Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: framework agnostic refactor #914

Merged
merged 6 commits into from
Jun 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .changeset/chilly-moose-dance.md
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions .changeset/hip-ducks-do.md
Original file line number Diff line number Diff line change
@@ -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`
9 changes: 9 additions & 0 deletions .changeset/moody-hounds-sleep.md
Original file line number Diff line number Diff line change
@@ -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` 不依赖任何前端框架
17 changes: 17 additions & 0 deletions .changeset/twelve-pillows-scream.md
Original file line number Diff line number Diff line change
@@ -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` 组件
21 changes: 21 additions & 0 deletions .changeset/witty-oranges-fail.md
Original file line number Diff line number Diff line change
@@ -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. ...
104 changes: 92 additions & 12 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
}
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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"
]
}
}
}
}
}
}
}
51 changes: 43 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
Loading
Loading