fixing plugin creator

Author: FalkWolsky

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

@@ -1,3 +1,3 @@
 export default {
-  projects: ["<rootDir>/packages/lowcoder", "<rootDir>/packages/lowcoder-core"],
+  projects: ["<rootDir>/packages/lowcoder", "<rootDir>/packages/lowcoder-core", "<rootDir>/packages/lowcoder-dev-utils"],
 };

client/.yarnrc.yml

@@ -50,7 +50,6 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.0.1",
-    "lowcoder-dev-utils": "workspace:^",
     "mq-polyfill": "^1.1.8",
     "prettier": "^2.7.0",
     "rimraf": "^3.0.2",
@@ -65,7 +64,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/jest.config.js

@@ -1,11 +1,36 @@
 # 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
+```bash
+cd /client
+```
+2) 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,25 @@ async function isDirEmpty(dir) {
 
 async function install(dependencies) {
   return new Promise((resolve, reject) => {
+
+    console.log("install dependencies:", dependencies);
+
     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" });
+
+    console.log("spawn child process: ", child);
+
     child.on("close", (code) => {
       if (code !== 0) {
         reject({
@@ -123,19 +137,26 @@ 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",
     "@types/react-dom@17",
     "vite",
   ]);
 
+  console.log("install packages done");
+  console.log("Now executeNodeScript");
+
   await executeNodeScript(
     {
       cwd: process.cwd(),

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

@@ -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/index.js

@@ -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,7 +39,8 @@
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.8.4",
+    "lowcoder-dev-utils": "workspace:^"
   },
   "peerDependencies": {
     "lowcoder-sdk": "*"