feat: inital move cli to mono-repo (#6126)

* feat: inital move cli to mono-repo

* feat: linting and formatting on cli package

* ci: remove force command

* package: terser-webpack-plugin

* config: ignore local from eslint and prettier

* ci: add seperate runners for each package in monorepo

* fix: point to local grapesjs location vs installed for scripts

* package: move old babel deps back

* config: remove stats.json from eslint

* package: bump and pin all build deps for cli

* test: fix ts errors in cli and global test script

.eslintrc.js

@@ -52,5 +52,5 @@ module.exports = {
     'max-len': ['error', { code: 300 }],
     'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }],
   },
-  ignorePatterns: ['*/docs/api/*', 'dist'],
+  ignorePatterns: ['*/docs/api/*', 'dist', 'packages/cli/src/template/**/*.*', '*/locale/*', 'stats.json'],
 };

.github/workflows/quality.yml

@@ -17,7 +17,5 @@ jobs:
         run: pnpm lint
       - name: Format Check
         run: pnpm format:check
-      - name: Test
-        run: pnpm test
       - name: Docs
         run: pnpm docs:api

.github/workflows/test.yml

@@ -0,0 +1,24 @@
+name: GrapesJS Tests
+on:
+  push:
+    branches: [dev]
+  pull_request:
+    branches: [dev]
+
+jobs:
+  test-core:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-project
+      - name: Core Tests
+        run: pnpm test
+        working-directory: ./packages/core
+  test-cli:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-project
+      - name: CLI Tests
+        run: pnpm test
+        working-directory: ./packages/cli

.prettierignore

@@ -1,3 +1,6 @@
 docs/**/*.md
 dist/
-pnpm-lock.yaml
+pnpm-lock.yaml
+packages/cli/src/template/**/*.*
+**/locale/**
+stats.json

package.json

@@ -4,21 +4,23 @@
   "packageManager": "pnpm@9.10.0",
   "scripts": {
     "start": "pnpm --filter grapesjs start",
-    "test": "pnpm --filter grapesjs test",
+    "test": "pnpm -r run test",
     "docs": "pnpm --filter @grapesjs/docs docs",
     "docs:api": "pnpm --filter @grapesjs/docs docs:api",
     "lint": "eslint .",
     "build": "pnpm --filter \"!@grapesjs/docs\" build",
     "ts:check": "pnpm --filter grapesjs ts:check",
     "clean": "find . -type d \\( -name \"node_modules\" -o -name \"build\" -o -name \"dist\" \\) -exec rm -rf {} + && rm ./pnpm-lock.yaml",
-    "format": "prettier . --write",
-    "format:check": "prettier . --check"
+    "format": "prettier . --write --ignore-path .prettierignore",
+    "format:check": "prettier . --check --ignore-path .prettierignore"
   },
   "devDependencies": {
     "@babel/cli": "7.24.8",
     "@babel/core": "7.25.2",
     "@babel/preset-env": "7.25.4",
     "@babel/preset-typescript": "7.24.7",
+    "@babel/runtime": "7.25.6",
+    "babel-loader": "9.1.3",
     "@jest/globals": "29.7.0",
     "@types/jest": "29.5.12",
     "@types/node": "22.4.1",

packages/cli/README.md

@@ -0,0 +1,122 @@
+# GrapesJS CLI
+
+[![npm](https://img.shields.io/npm/v/grapesjs-cli.svg)](https://www.npmjs.com/package/grapesjs-cli)
+
+![grapesjs-cli](https://user-images.githubusercontent.com/11614725/67523496-0ed41300-f6af-11e9-9850-7175355f2946.jpg)
+
+A simple CLI library for helping in GrapesJS plugin development.
+
+The goal of this package is to avoid the hassle of setting up all the dependencies and configurations for the plugin development by centralizing and speeding up the necessary steps during the process.
+
+- Fast project scaffolding
+- No need to touch Babel and Webpack configurations
+
+## Plugin from 0 to 100
+
+Create a production-ready plugin in a few simple steps.
+
+- Create a folder for your plugin and init some preliminary steps
+
+```sh
+mkdir grapesjs-my-plugin
+cd grapesjs-my-plugin
+npm init -y
+git init
+```
+
+- Install the package
+
+```sh
+npm i -D grapesjs-cli
+```
+
+- Init your plugin project by following few steps
+
+```sh
+npx grapesjs-cli init
+```
+
+You can also skip all the questions with `-y` option or pass all the answers via options (to see all available options run `npx grapesjs-cli init --help`)
+
+```sh
+npx grapesjs-cli init -y --user=YOUR-GITHUB-USERNAME
+```
+
+- The command will scaffold the `src` directory and a bunch of other files inside your project. The `src/index.js` will be the entry point of your plugin. Before starting developing your plugin run the development server and open the printed URL (eg. the default is http://localhost:8080)
+
+```sh
+npx grapesjs-cli serve
+```
+
+If you need a custom port use the `-p` option
+
+```sh
+npx grapesjs-cli serve -p 8081
+```
+
+Under the hood we use `webpack-dev-server` and you can pass its option via CLI in this way
+
+```sh
+npx grapesjs-cli serve --devServer='{"https": true}'
+```
+
+- Once the development is finished you can build your plugin and generate the minified file ready for production
+
+```sh
+npx grapesjs-cli build
+```
+
+- Before publishing your package remember to complete your README.md file with all the available options, components, blocks and so on.
+  For a better user engagement create a simple live demo by using services like [JSFiddle](https://jsfiddle.net) [CodeSandbox](https://codesandbox.io) [CodePen](https://codepen.io) and link it in your README. To help you in this process we'll print all the necessary HTML/CSS/JS in your README, so it will be just a matter of copy-pasting on some of those services.
+
+## Customization
+
+### Customize webpack config
+
+If you need to customize the webpack configuration, you can create `webpack.config.js` file in the root dir of your project and export a function, which should return the new configuration object. Check the example below.
+
+```js
+// YOUR-PROJECT-DIR/webpack.config.js
+
+// config is the default configuration
+export default ({ config }) => {
+  // This is how you can distinguish the `build` command from the `serve`
+  const isBuild = config.mode === 'production';
+
+  return {
+    ...config,
+    module: {
+      rules: [
+        {
+          /* extra rule */
+        },
+        ...config.module.rules,
+      ],
+    },
+  };
+};
+```
+
+## Generic CLI usage
+
+Show all available commands
+
+```sh
+grapesjs-cli
+```
+
+Show available options for a command
+
+```sh
+grapesjs-cli COMMAND --help
+```
+
+Run the command
+
+```sh
+grapesjs-cli COMMAND --OPT1 --OPT2=VALUE
+```
+
+## License
+
+MIT

packages/cli/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+};

packages/cli/index.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title><%= title %></title>
+    <link
+      href="<%= pathGjsCss ? pathGjsCss : 'https://unpkg.com/grapesjs@' + gjsVersion + '/dist/css/grapes.min.css' %>"
+      rel="stylesheet"
+    />
+    <script src="<%= pathGjs ? pathGjs : 'https://unpkg.com/grapesjs@' + gjsVersion %>"></script>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="gjs" style="height: 0px; overflow: hidden">
+      <div style="margin: 100px 100px 25px; padding: 25px; font: caption">
+        This is a demo content generated from <b>GrapesJS CLI</b>. For the development, you should create a _index.html
+        template file (might be a copy of this one) and on the next server start the new file will be served, and it
+        will be ignored by git.
+      </div>
+    </div>
+
+    <script type="text/javascript">
+      window.onload = () => {
+        window.editor = grapesjs.init({
+          height: '100%',
+          container: '#gjs',
+          showOffsets: 1,
+          noticeOnUnload: 0,
+          storageManager: false,
+          fromElement: true,
+          plugins: ['<%= name %>'],
+        });
+      };
+    </script>
+  </body>
+</html>

packages/cli/jest.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  testEnvironment: 'node',
+  verbose: true,
+  modulePaths: ['<rootDir>/src'],
+  testMatch: ['<rootDir>/test/**/*.(t|j)s'],
+};
+
+export default config;

packages/cli/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "grapesjs-cli",
+  "version": "4.1.3",
+  "description": "GrapesJS CLI tool for the plugin development",
+  "bin": {
+    "grapesjs-cli": "dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "BUILD_MODE=production webpack --config ./webpack.cli.ts",
+    "build:watch": "webpack --config ./webpack.cli.ts --watch",
+    "lint": "eslint src",
+    "patch": "npm version patch -m 'Bump v%s'",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GrapesJS/grapesjs.git"
+  },
+  "keywords": [
+    "grapesjs",
+    "plugin",
+    "dev",
+    "cli"
+  ],
+  "author": "Artur Arseniev",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/plugin-transform-runtime": "7.25.4",
+    "@babel/preset-env": "7.25.4",
+    "@babel/runtime": "7.25.6",
+    "babel-loader": "9.1.3",
+    "chalk": "^4.1.2",
+    "core-js": "3.38.1",
+    "dts-bundle-generator": "^8.0.1",
+    "html-webpack-plugin": "5.6.0",
+    "inquirer": "^8.2.5",
+    "listr": "^0.14.3",
+    "lodash.template": "^4.5.0",
+    "rimraf": "^4.1.2",
+    "spdx-license-list": "^6.6.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.1.0",
+    "yargs": "^17.6.2"
+  },
+  "devDependencies": {
+    "@types/webpack-node-externals": "^3.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "webpack-node-externals": "^3.0.0"
+  }
+}

packages/cli/src/banner.txt

@@ -0,0 +1,6 @@
+   ______                               _______       ________    ____
+  / ____/________ _____  ___  _____    / / ___/      / ____/ /   /  _/
+ / / __/ ___/ __ `/ __ \/ _ \/ ___/_  / /\__ \______/ /   / /    / /
+/ /_/ / /  / /_/ / /_/ /  __(__  ) /_/ /___/ /_____/ /___/ /____/ /
+\____/_/   \__,_/ .___/\___/____/\____//____/      \____/_____/___/
+               /_/