Merge pull request #567 from lowcoder-org/fix-plugin-creator

Fix plugin creator

Author: FalkWolsky

.gitignore

@@ -5,3 +5,4 @@ client/.yarn/cache/*.zip
 server/node-service/.yarn/cache/*.zip
 .metadata/
 .DS_Store
+client/node_modules/

client/.yarn/releases/yarn-3.2.4.cjs

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

client/.yarn/releases/yarn-3.6.4.cjs

@@ -52,7 +52,7 @@
     "lint-staged": "^13.0.1",
     "lowcoder-dev-utils": "workspace:^",
     "mq-polyfill": "^1.1.8",
-    "prettier": "^2.7.0",
+    "prettier": "3.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.0",
     "shelljs": "^0.8.5",
@@ -65,7 +65,7 @@
     "**/*.{mjs,ts,tsx,json,md,html}": "prettier --write --ignore-unknown",
     "**/*.svg": "svgo"
   },
-  "packageManager": "yarn@3.2.4",
+  "packageManager": "yarn@3.6.4",
   "resolutions": {
     "@types/react": "^17",
     "moment": "2.29.2",

client/.yarnrc.yml

@@ -1,11 +1,37 @@
 # create-lowcoder-plugin
 
-## Usage
+## How to build a Component Plugin
 
-```bash
-yarn create lowcoder-plugin my-lowcoder-plugin
+This script helps you to create a skeleton Lowcoder Component, which you can then publish on npm and use it as imported Plugin in any app. 
 
-# or
+1) Navigate your terminal or bash to /client and install general dependencies
+```bash
+cd client
+yarn install
+```
+1) execute the Plugin Builder Script. PLease name your plugin with the prefix lowcoder-comp-
 
-npm create lowcoder-plugin my-lowcoder-plugin
+```bash
+npm create lowcoder-plugin lowcoder-comp-my-plugin
 ```
+3) Navigate your terminal or bash to the newly created Plugin folder
+```bash
+cd lowcoder-comp-my-plugin
+```
+4) install all dependencies:
+```bash
+yarn install
+```
+Now you can start your Plugin in the playground, so during development you have a realtime preview.
+4) install all dependencies:
+```bash
+yarn start
+```
+This will start the local development server and open a browser on http://localhost:9000 
+
+## How to publish a Component Plugin
+
+With the following command you can publish the script to the NPM repository:
+```bash
+yarn build --publish
+```

client/package.json

@@ -10,9 +10,11 @@ import { readJson, currentDirName } from "../lowcoder-dev-utils/util.js";
 const currentDir = currentDirName(import.meta.url);
 const pkg = readJson(path.resolve(currentDir, "./package.json"));
 
-const isUsingYarn = (process.env.npm_config_user_agent || "").indexOf("yarn") === 0;
+const isUsingYarn = true;
+// const isUsingYarn = (process.env.npm_config_user_agent || "").indexOf("yarn") === 0;
 const cliPackageName = "lowcoder-cli";
 const sdkPackageName = "lowcoder-sdk";
+const devPackageName = "lowcoder-dev-utils";
 
 let verbose = false;
 let registry;
@@ -36,6 +38,10 @@ function writePackageJson(file, content) {
   writeFileSync(file, JSON.stringify(content, null, 2));
 }
 
+function writeYarnFile() {
+  writeFileSync("yarn.lock", "");
+}
+
 async function isDirEmpty(dir) {
   if (!existsSync(dir)) {
     return true;
@@ -46,17 +52,21 @@ async function isDirEmpty(dir) {
 
 async function install(dependencies) {
   return new Promise((resolve, reject) => {
+
     let cmd = "npm";
     let args = ["install", "--no-audit", "--save", "--save-exact", "--loglevel", "error"];
     if (isUsingYarn) {
       cmd = "yarn";
       args = ["add"];
     }
+
     if (registry) {
       args.push("--registry", registry);
     }
     args.push(...dependencies);
+
     const child = spawn(cmd, args, { stdio: "inherit" });
+
     child.on("close", (code) => {
       if (code !== 0) {
         reject({
@@ -111,8 +121,6 @@ async function createProject(projectName, options) {
     }
   }
 
-  console.log("is using yarn:", isUsingYarn);
-
   const packageJsonFile = path.resolve(root, "package.json");
   fs.ensureDirSync(root);
   process.chdir(root);
@@ -123,12 +131,16 @@ async function createProject(projectName, options) {
     type: "module",
     license: "MIT",
   };
+
+  // now we prepare the files
   writePackageJson(packageJsonFile, initialPackageJson);
-  console.log("initial package.json generated");
+  // without empty yarn file the setup will fail
+  writeYarnFile();
 
   await install([
-    cliPackageName,
+    // cliPackageName,
     sdkPackageName,
+    devPackageName,
     "react@17",
     "react-dom@17",
     "@types/react@17",

client/packages/create-lowcoder-plugin/README.md

@@ -10,6 +10,9 @@
     "fs-extra": "^10.1.0",
     "lowcoder-dev-utils": "workspace:^"
   },
+  "devDependencies": {
+    "lowcoder-dev-utils": "workspace:^"
+  },
   "license": "MIT",
   "keywords": [
     "lowcoder"

client/packages/create-lowcoder-plugin/index.js

@@ -17,12 +17,13 @@
   },
   "devDependencies": {
     "lowcoder-cli": "workspace:^",
+    "lowcoder-dev-utils": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "typescript": "^4.8.4",
     "vite": "^4.3.9"
   },
   "keywords": [
-    "lowcoder"
+    "Lowcoder, Component, Template, Plugin"
   ],
   "license": "MIT"
 }

client/packages/create-lowcoder-plugin/package.json

@@ -29,7 +29,6 @@
     "commander": "^9.4.1",
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
-    "lowcoder-dev-utils": "workspace:^",
     "react": "^17",
     "react-dom": "^17",
     "react-json-view": "^1.21.3",
@@ -40,6 +39,7 @@
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
+    "lowcoder-dev-utils": "workspace:^",
     "typescript": "^4.8.4"
   },
   "peerDependencies": {

client/packages/lowcoder-cli-template-typescript/package.json

@@ -48,6 +48,9 @@
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.6.0"
   },
+  "dependencies": {
+    "typedoc": "^0.25.4"
+  },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"

client/packages/lowcoder-cli/package.json

@@ -64,6 +64,7 @@
     "moment": "^2.29.4",
     "numbro": "^2.3.6",
     "papaparse": "^5.3.2",
+    "prettier": "3.1.0",
     "qrcode.react": "^3.1.0",
     "rc-trigger": "^5.3.1",
     "react": "^17.0.2",

client/packages/lowcoder-sdk/package.json

@@ -0,0 +1,11 @@
+➤ YN0000: ┌ Resolution step
+➤ YN0001: │ Error: lowcoder-dev-utils@workspace:^: Workspace not found (lowcoder-dev-utils@workspace:^)
+    at je.getWorkspaceByDescriptor (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:439:3260)
+    at cC.getCandidates (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:390:29582)
+    at kf.getCandidates (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:391:1264)
+    at kf.getCandidates (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:391:1264)
+    at /Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:439:8033
+    at df (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:390:11070)
+    at ge (/Users/falkwolskyadmin/Development/Lowcoder/Development/lowcoder/client/.yarn/releases/yarn-3.6.4.cjs:439:8013)
+➤ YN0000: └ Completed in 0s 878ms
+➤ YN0000: Failed with errors in 0s 882ms