feat: framework agnostic refactor (#914)

.changeset/chilly-moose-dance.md

@@ -0,0 +1,27 @@
+---
+'@plait/draw': minor
+'@plait/flow': minor
+'@plait/mind': minor
+---
+
+Framework agnostic refactoring:
+
+1. Use `measureElement` to measure text width and height
+
+2. Use `text-manage` in `@plait/common` to render text
+
+3. Provide an overridable method `renderEmoji` in `@plait/mind` to remove the dependency on Angular and transform the response generator
+
+4. Provide an overridable method `renderLabelIcon` in `@plait/flow` to remove the dependency on Angular and transform the response generator
+
+---
+
+Framework agnostic 改造:
+
+1. 改用 `measureElement` 测量文本宽高
+
+2. 改用 `@plait/common` 中的 `text-manage` 实现文本的渲染
+
+3. `@plait/mind` 中提供可重写方法 `renderEmoji` 解除对 Angular 的依赖，并且改造响应 generator
+
+4. `@plait/flow` 中提供可重写方法 `renderLabelIcon` 解除对 Angular 的依赖，并且改造响应 generator

.changeset/hip-ducks-do.md

@@ -0,0 +1,23 @@
+---
+'@plait/common': minor
+'@plait/core': minor
+---
+
+Framework agnostic refactoring:
+
+1. Reimplement text-manage in `@plait/common`, and remove the dependency on front-end frameworks such as Angular/React by providing an overridable method renderText
+
+2. Provide an overridable method renderImage in `@plait/common`
+
+3. Implement the `measureElement` method based on `canvas`, calculate the width and height of the text in Plait through the `measureText` API of `canvas`, and change all places that originally called `getTextSize` or `measureDivSize` to call `measureElement`
+
+4. Move the part of `@plait/core` that depends on Angular to `@plait/angular-board`
+
+---
+
+Framework agnostic 改造:
+
+1. 在 `@plait/common` 中重新实现 text-manage，通过提供可重写方法 renderText 解除和 Angular/React 等前端框架的强依赖
+2. 在 `@plait/common` 中提供可重写方法 renderImage
+3. 基于 `canvas` 实现 `measureElement` 方法，通过 `canvas` 的 `measureText` API 计算 Plait 中文本的宽和高，将原本调用 `getTextSize` 或者 `measureDivSize` 的地方全部改为调用 `measureElement`
+4. 将 `@plait/core` 中依赖 Angular 的部分移入 `@plait/angular-board`

.changeset/moody-hounds-sleep.md

@@ -0,0 +1,9 @@
+---
+'@plait/text-plugins': minor
+---
+
+`@plait/text-plugins` is a split from the original `@plait/text` package, which mainly contains text-related plugins and general processing required by the Plait framework. `@plait/text-plugins` does not rely on any front-end framework
+
+---
+
+`@plait/text-plugins` 是原本的 `@plait/text` 包拆分出来，主要包含 Plait 框架需要的文本相关的插件和通用处理，`@plait/text-plugins` 不依赖任何前端框架

.changeset/twelve-pillows-scream.md

@@ -0,0 +1,17 @@
+---
+'@plait/angular-text': minor
+---
+
+1. Rename package `@plait/text` to `@plait/angular-text`
+
+2. Move some common processing and plugins into `@plait/text-plugins`
+
+3. Rename `richtext` component to `text` component
+
+---
+
+1. 将包 `@plait/text` 重命名为 `@plait/angular-text`
+
+2. 将一些通用处理和插件移入 `@plait/text-plugins` 中
+
+3. 将 `richtext` 组件重命名 `text` 组件

.changeset/witty-oranges-fail.md

@@ -0,0 +1,21 @@
+---
+'@plait/angular-board': minor
+---
+
+Added `@plait/angular-board` package:
+
+1. Moved the board component from `@plait/core` to `@plait/angular-board`, core no longer depends on the angular framework
+2. Provided `renderComponent` method to dynamically render Angular components
+3. Implemented `renderText` method to dynamically render text components (angular-text)
+4. ...
+
+
+---
+
+
+新增 `@plait/angular-board` 包：
+
+1. 将 board 组件从 `@plait/core` 移动到 `@plait/angular-board` 中, core 不再依赖 angular 框架
+2. 提供 `renderComponent` 方法实现动态渲染 Angular 组件
+3. 实现 `renderText` 方法实现动态渲染文本组件（angular-text）
+4. ...

angular.json

@@ -106,41 +106,41 @@
         }
       }
     },
-    "text": {
+    "angular-text": {
       "projectType": "library",
-      "root": "packages/text",
-      "sourceRoot": "packages/text/src",
+      "root": "packages/angular-text",
+      "sourceRoot": "packages/angular-text/src",
       "prefix": "pla",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "project": "packages/text/ng-package.json"
+            "project": "packages/angular-text/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "packages/text/tsconfig.lib.prod.json"
+              "tsConfig": "packages/angular-text/tsconfig.lib.prod.json"
             },
             "development": {
-              "tsConfig": "packages/text/tsconfig.lib.json"
+              "tsConfig": "packages/angular-text/tsconfig.lib.json"
             }
           },
           "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "packages/text/src/test.ts",
-            "tsConfig": "packages/text/tsconfig.spec.json",
-            "karmaConfig": "packages/text/karma.conf.js"
+            "main": "packages/angular-text/src/test.ts",
+            "tsConfig": "packages/angular-text/tsconfig.spec.json",
+            "karmaConfig": "packages/angular-text/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "packages/text/**/*.ts",
-              "packages/text/**/*.html"
+              "packages/angular-text/**/*.ts",
+              "packages/angular-text/**/*.html"
             ]
           }
         }
@@ -186,6 +186,46 @@
         }
       }
     },
+    "angular-board": {
+      "projectType": "library",
+      "root": "packages/angular-board",
+      "sourceRoot": "packages/angular-board/src",
+      "prefix": "pla",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "packages/angular-board/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "packages/angular-board/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/angular-board/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "packages/angular-board/src/test.ts",
+            "tsConfig": "packages/angular-board/tsconfig.spec.json",
+            "karmaConfig": "packages/angular-board/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "packages/angular-board/**/*.ts",
+              "packages/angular-board/**/*.html"
+            ]
+          }
+        }
+      }
+    },
     "mind": {
       "projectType": "library",
       "root": "packages/mind",
@@ -385,6 +425,46 @@
           }
         }
       }
+    },
+    "text-plugins": {
+      "projectType": "library",
+      "root": "packages/text-plugins",
+      "sourceRoot": "packages/text-plugins/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "packages/text-plugins/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "packages/text-plugins/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/text-plugins/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "packages/text-plugins/src/test.ts",
+            "tsConfig": "packages/text-plugins/tsconfig.spec.json",
+            "karmaConfig": "packages/text-plugins/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "packages/text-plugins/**/*.ts",
+              "packages/text-plugins/**/*.html"
+            ]
+          }
+        }
+      }
     }
   }
-}
+}

package.json

@@ -6,14 +6,16 @@
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
-        "build": "npm run build:core && npm run build:text && npm run build:common && ng build layouts && npm run build:mind && npm run build:flow && npm run build:draw",
+        "build": "npm run build:core && npm run build:common && npm run build:text-plugins && ng build layouts && npm run build:mind && npm run build:flow && npm run build:draw && npm run build:angular-text && npm run build:angular-board",
         "build:docs": "docgeni build",
         "build:core": "ng build core && cpx \"./packages/core/src/**/*.scss\" ./dist/core/",
+        "build:angular-board": "ng build angular-board && cpx \"./packages/angular-board/src/**/*.scss\" ./dist/angular-board/",
         "build:mind": " ng build mind && cpx \"./packages/mind/src/**/*.scss\" ./dist/mind/",
-        "build:text": "ng build text && cpx \"./packages/text/src/**/*.scss\" ./dist/text/",
+        "build:angular-text": "ng build angular-text && cpx \"./packages/angular-text/src/**/*.scss\" ./dist/angular-text/",
         "build:flow": "ng build flow && cpx \"./packages/flow/src/**/*.scss\" ./dist/flow/",
         "build:draw": "ng build draw && cpx \"./packages/draw/src/**/*.scss\" ./dist/draw/",
         "build:common": "ng build common",
+        "build:text-plugins": "ng build text-plugins",
         "build:demo": "ng build demo --configuration production",
         "pub:core": "cd dist/core && npm publish --access public",
         "pub:text": "cd dist/text && npm publish --access public",
@@ -32,7 +34,8 @@
         "start:docs": "docgeni serve --port 4600",
         "ci:test": "ng test --watch=false --progress=false --browsers=ChromeHeadlessCI",
         "lint": "ng lint --fix",
-        "pretty": "pretty-quick --staged"
+        "pretty": "pretty-quick --staged",
+        "copy-to": "cp -r dist/* ../plait-board-template/node_modules/@plait"
     },
     "private": true,
     "repository": {