Dev -> Main (release preview)

.github/workflows/publish-lowcoder-cli.yml

@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder CLI
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-cli/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-cli
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-cli
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}

.github/workflows/publish-lowcoder-comps.yml

@@ -0,0 +1,49 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Comps
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-comps/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-comps
+
+      - name: Publish
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build_publish
+          dir: client/packages/lowcoder-comps
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}

.github/workflows/publish-lowcoder-core.yml

@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Core
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-core/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-core
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-core
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}

.github/workflows/publish-lowcoder-sdk.yml

@@ -0,0 +1,54 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder SDK
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-sdk/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-sdk
+
+      - name: Build Package
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build
+          dir: client/packages/lowcoder-sdk
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-sdk
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}

.gitignore

@@ -9,3 +9,4 @@ client/node_modules/
 client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
+.DS_Store

README.md

@@ -96,4 +96,4 @@ You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/)
 Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)
 
-Like ... @CHSchuepfer. Thank you very much!
+Like ... @CHSchuepfer & @spacegoats-io. Thank you very much!!

client/config/test/jest.config.js

@@ -36,7 +36,7 @@ export default {
     path.resolve(currentDir, "../../packages/lowcoder-design/src"),
   ],
   setupFiles: [path.resolve(currentDir, "./jest.setup.js")],
-  setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js")],
+  setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js"), 'jest-canvas-mock'],
   transform: {
     "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": path.resolve(currentDir, "./transform/babelTransform.js"),
     "^.+\\.css$": path.resolve(currentDir, "./transform/cssTransform.js"),

client/config/test/jest.setup-after-env.js

@@ -21,3 +21,36 @@ window.ResizeObserver = function () {
     disconnect: () => {},
   };
 };
+
+Object.defineProperty(window, 'ImageData', { value: 'yourValue' });
+Object.defineProperty(window, 'MediaStreamTrack', { value: 'yourValue' });
+Object.defineProperty(window, 'URL', {
+  writable: true,
+  value: {
+    createObjectURL: jest.fn(),
+  }
+});
+Object.defineProperty(window, "navigator", {
+  writable: true,
+  value: {
+    mediaDevices: {
+      enumerateDevices: jest.fn(),
+    },
+    userAgent: '',
+    language: '',
+    browserLanguage: '',
+  },
+});
+
+class Worker {
+  constructor(stringUrl) {
+    this.url = stringUrl;
+    this.onmessage = () => {};
+  }
+
+  postMessage(msg) {
+    this.onmessage(msg);
+  }
+}
+
+window.Worker = Worker;

client/package.json

@@ -25,9 +25,6 @@
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-typescript": "^8.5.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/ali-oss": "^6.16.4",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.2.2",
     "@types/mime": "^2.0.3",
@@ -37,17 +34,16 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
-    "@types/styled-components": "^5.1.19",
     "@types/stylis": "^4.0.2",
     "@types/tern": "0.23.4",
-    "@types/toposort": "^2.0.3",
     "@types/ua-parser-js": "^0.7.36",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "add": "^2.0.6",
     "babel-jest": "^29.3.0",
     "babel-preset-react-app": "^10.0.1",
     "husky": "^8.0.1",
     "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.0.1",
     "lowcoder-cli": "workspace:^",
@@ -66,14 +62,17 @@
   },
   "packageManager": "yarn@3.6.4",
   "resolutions": {
-    "@types/react": "^17",
+    "@types/react": "^18",
     "moment": "2.29.2",
     "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz",
     "react-virtualized@^9.22.3": "patch:react-virtualized@npm%3A9.22.3#./.yarn/patches/react-virtualized-npm-9.22.3-0fff3cbf64.patch",
     "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch"
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.28.0",
     "chalk": "4",
     "number-precision": "^1.6.0",

client/packages/lowcoder-cli-template-typescript/.gitignore

@@ -1,2 +1,4 @@
 *.tgz
-/node_modules
+.DS_Store
+node_modules
+*.zip

client/packages/lowcoder-cli-template-typescript/README.md

@@ -1,5 +1,27 @@
-# lowcoder-cli-template-typescript
+# Lowcoder Demonstrator Plugin Sourcecode
 
-This is the official typescript template of lowcoder-cli.
+## Overview
 
-This template will be used by default.
+This repository contains the demonstrator code for a Component Plugin in Lowcoder. It serves as a practical example and a reference for developers looking to build their own Component Plugins within the Lowcoder framework.
+
+This repository is not about to integrate the Plugin like other NPM repositories. However, for the Lowcoder Component Plugin Creator we wanted to publish the Demonstrator Plugin code sources.
+
+### The Lowcoder App Editor
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
+</p>
+
+### Purpose
+
+The primary goal of this repository is to showcase best practices, demonstrate the structure, and provide a clear example of how to develop Component Plugins for Lowcoder. It is intended to be a learning resource rather than a production-ready solution.
+
+## Getting Started
+
+To explore this demonstrator plugin, install and test it in action you can use the "Lowcoder Component Plugin Builder". https://www.npmjs.com/package/create-lowcoder-plugin
+
+### The Lowcoder Component Plugin Builder and Preivew
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Component%20Plugin%20Builder%20%7C%20Preview.png" alt="Lowcoder Plugin Preview">
+</p>

client/packages/lowcoder-cli-template-typescript/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lowcoder Comp Playground</title>
+    <title>Lowcoder Component Plugin Preview</title>
     <style>
       #root {
         height: 100vh;

client/packages/lowcoder-cli-template-typescript/index.tsx

@@ -1,8 +1,7 @@
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
-
 import "lowcoder-sdk/dist/style.css";
 
 function CompDevApp() {
@@ -15,5 +14,6 @@ function CompDevApp() {
     />
   );
 }
-
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root") as Element | DocumentFragment;
+const root = createRoot(container);
+root.render(<CompDevApp />);