chore:release 0.3.22

netless-io · Nov 15, 2024 · 72083e2 · 72083e2
1 parent 7487a02
commit 72083e2
Show file tree

Hide file tree

Showing 13 changed files with 1,673 additions and 1,206 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -2,7 +2,7 @@
 
 本库用于快速开始一个白板应用，基于 [white-web-sdk](https://www.npmjs.com/package/white-web-sdk)、[@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager) 和 [netless-app](https://github.com/netless-io/netless-app) 实现。
 
-从0.3.21版本开始, fastboard 集成了[@netless/appliance-plugin](./docs/zh/appliance-plugin.md)插件,以便于提供更优性能及更丰富的教具功能
+从0.3.22版本开始, fastboard 集成了[@netless/appliance-plugin](./docs/zh/appliance-plugin.md)插件,以便于提供更优性能及更丰富的教具功能
 
 从0.3.22版本开始, fastboard 新增全打包文件, `@netless/fastboard/full` or `@netless/fastboard-react/full`, 用于解决内外依赖冲突问题.
 
@@ -20,13 +20,16 @@
 <pre class="language-bash">
 npm add <b>@netless/fastboard</b> @netless/window-manager white-web-sdk @netless/appliance-plugin
 </pre>
+> **注意：** `@netless/appliance-plugin` 是开启 [性能优化版本](#performance) 才需要安装。
 
 #### 全打包方式引用
 <pre class="language-bash">
-npm add <b>@netless/fastboard</b>
+npm add <b>@netless/fastboard</b> @netless/appliance-plugin
 </pre>
 
-> **注意：**@netless/window-manager、white-web-sdk、@netless/appliance-plugin 是 peerDependency，如果你不清楚 peerDependency 是什么意思，可以阅读 [《为什么使用 peerDependency ？》](./docs/zh/peer-dependency.md)。如果使用全打包方式引用，则 @netless/window-manager、white-web-sdk、@netless/appliance-plugin 可以不用安装。
+> **注意：** 全打包方式引用，则 `@netless/window-manager`、`white-web-sdk` 可以不用安装。而 @netless/appliance-plugin 是开启[性能优化版本](#performance) 才需要安装。
+>
+> `@netless/window-manager`、`white-web-sdk`、`@netless/appliance-plugin` 是 peerDependency，如果你不清楚 peerDependency 是什么意思，可以阅读 [《为什么使用 peerDependency ？》](./docs/zh/peer-dependency.md)。
 
 
 <h2 id="usage">使用</h2>
@@ -36,8 +39,9 @@ npm add <b>@netless/fastboard</b>
 ```js
 // 全打包方式引用
 import { createFastboard, createUI } from "@netless/fastboard/full";
+
 // 分包引用
-// import { createFastboard, createUI } from "@netless/fastboard";
+import { createFastboard, createUI } from "@netless/fastboard";
 
 async function main() {
   const fastboard = await createFastboard({
@@ -62,8 +66,10 @@ async function main() {
     },
     // [4] (可选)
     netlessApps: [],
-    // [5] (可选), 开启appliance-plugin, 从0.3.21开始
-    enableAppliancePlugin: true,
+    // [5] (可选), 开启appliance-plugin, 从0.3.22开始
+    enableAppliancePlugin: {
+      ...
+    },
   });
 
   const container = createContainer();
@@ -129,7 +135,8 @@ npm add <b>@netless/fastboard-react</b> @netless/window-manager white-web-sdk re
 // 全打包方式引用
 import { useFastboard, Fastboard } from "@netless/fastboard-react/full";
 // 分包引用
-// import { useFastboard, Fastboard } from "@netless/fastboard-react";
+import { useFastboard, Fastboard } from "@netless/fastboard-react";
+
 import React from "react";
 import { createRoot } from "react-dom/client";
 
@@ -145,7 +152,9 @@ function App() {
       roomToken: "NETLESSROOM_...",
     },
     //  开启 appliance-plugin 插件
-    enableAppliancePlugin: true,
+    enableAppliancePlugin: {
+      ...
+    },
   }));
 
   // 白板元素必须具有可见的大小
@@ -402,10 +411,23 @@ const appId = await fastboard.manager.addApp({
 
 <h2 id="performance">使用性能优化版本</h2>
 
-通过 ``enableAppliancePlugin`` 配置项开启 appliance-plugin 插件，以提升性能。
+通过 ``enableAppliancePlugin`` 配置项开启 appliance-plugin 插件，以提升性能, 也可以参考文档:[appliance-plugin](./docs/zh/appliance-plugin.md)。
+> **注意：** 开启使用性能优化版本,需要安装 ``@netless/appliance-plugin`` 。
 
 ### 示例代码
 ```jsx
+// 直接通过raw-loader引入
+import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
+import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
+const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
+const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
+const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
+const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
+
+// CDN 引入, 需要部署到自己的CDN服务器上, 它必须遵守 同源策略 。
+const subWorkerUrl = "https://cdn.jsdelivr.net/npm/@netless/appliance-plugin@latest/dist/subWorker.js";
+const fullWorkerUrl = "https://cdn.jsdelivr.net/npm/@netless/appliance-plugin@latest/dist/fullWorker.js";
+
 function App() {
   const fastboard = useFastboard(() => ({
     sdkConfig: {
@@ -415,14 +437,19 @@ function App() {
       ...
     },
     //  开启 appliance-plugin 插件
-    enableAppliancePlugin: true,
+    enableAppliancePlugin: {
+        cdn: {
+            fullWorkerUrl,
+            subWorkerUrl,
+        }
+    }
   }));
   ....
 }
 ```
 ### 注意
 
-- 在开启 appliance-plugin 插件后, 绘制的内容会显示,但是无法操作和升级, 所以为了不影响体验,请在一个无任何历史数据的白板上使用。同理插件关闭后, 新绘制的内容会丢失。
+- 在开启 appliance-plugin 插件后, 之前白板上旧绘制的内容会显示,但是无法操作和升级. 所以为了不影响体验,请在一个无任何历史数据的白板上使用。同理插件关闭后, 新绘制的内容会丢失。
 - 只有浏览器对 web API [offscreenCanvas](https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7) 的完全支持,才能体验到更加的性能及丰富的教具功能体验。
 
 <h2 id="customization">自定义</h2>

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ A starter library for making whiteboard web app, based on [white-web-sdk](https:
 
 <img src="https://user-images.githubusercontent.com/8097890/165052277-f0bc1fba-c261-44a8-8219-cd7832ee3091.jpg" align="center">
 
-Starting with version 0.3.21, fastboard integrates the [@netless/appliance-plugin](./docs/en/appliance-plugin.md) plug-in to provide better performance and richer teaching AIDS features
+Starting with version 0.3.22, fastboard integrates the [@netless/appliance-plugin](./docs/en/appliance-plugin.md) plug-in to provide better performance and richer teaching AIDS features
 
 Starting with version 0.3.22, fastboard added a fully packaged file, '@netless/fastboard/full' or '@netless/fastboard-react/full', to resolve internal and external dependency conflicts.
 
@@ -24,12 +24,16 @@ Starting with version 0.3.22, fastboard added a fully packaged file, '@netless/f
 npm add <b>@netless/fastboard</b> @netless/window-manager white-web-sdk @netless/appliance-plugin
 </pre>
 
+> **注意：** The `@netless/appliance-plugin` needs to be installed only when [Use performance](#performance) is enabled.
+
 #### Full package mode
 <pre class="language-bash">
-npm add <b>@netless/fastboard</b>
+npm add <b>@netless/fastboard</b> @netless/appliance-plugin
 </pre>
 
-> **Note:** `@netless/window-manager`、`netless/appliance-plugin` and `white-web-sdk` are **peerDependencies**. If the reference is used in full packaging mode, then @netless/window-manager, white-web-sdk, and @netless/appliance-plugin can be installed without installation.
+> **Note:** Full package reference, then `@netless/window-manager`, `white-web-sdk` can not be installed. The `@netless/appliance-plugin` needs to be installed only when [Use performance](#performance) is enabled.
+>
+> `@netless/window-manager`, `white-web-sdk`, `@netless/appliance-plugin` is peerDependency, if you're not sure what peerDependency means, You can read [Why Use peerDependency?](./docs/zh/peer-dependency.md)
 
 ## Usage
 
@@ -39,7 +43,7 @@ npm add <b>@netless/fastboard</b>
 // Full package
 import { createFastboard, createUI } from "@netless/fastboard/full";
 // Subcontracting package
-// import { createFastboard, createUI } from "@netless/fastboard";
+import { createFastboard, createUI } from "@netless/fastboard";
 
 async function main() {
   const fastboard = await createFastboard({
@@ -64,8 +68,10 @@ async function main() {
     },
     // [4] (optional)
     netlessApps: [],
-    // [5] (Optional), turn on the appliance-plugin starting at 0.3.21
-    enableAppliancePlugin: true,
+    // [5] (Optional), turn on the appliance-plugin starting at 0.3.22
+    enableAppliancePlugin: {
+      ...
+    },
   });
 
   const container = createContainer();
@@ -123,7 +129,8 @@ npm add <b>@netless/fastboard-react</b> @netless/window-manager white-web-sdk re
 // Full package
 import { useFastboard, Fastboard } from "@netless/fastboard-react/full";
 // Subcontracting package
-// import { useFastboard, Fastboard } from "@netless/fastboard-react";
+import { useFastboard, Fastboard } from "@netless/fastboard-react";
+
 import React from "react";
 import { createRoot } from "react-dom/client";
 
@@ -139,7 +146,9 @@ function App() {
       roomToken: "NETLESSROOM_...",
     },
     //  开启 appliance-plugin 插件
-    enableAppliancePlugin: true,
+    enableAppliancePlugin: {
+      ...
+    },
   }));
 
   // Container must have a visible size
@@ -399,9 +408,23 @@ To develop your own app, see [Write you a Netless App](./docs/en/app.md).
 
 ## performance
 
-Enable the appliance-plugin through the `enableAppliancePlugin` configuration item to improve performance.
+Enable the `@netless/appliance-plugin` through the `enableAppliancePlugin` configuration item to improve performance.Also refer to the document [appliance-plugin](./docs/en/appliance-plugin.md).
+
+> **Note:** To enable the use of the performance optimized version, you need to install `@netless/appliance-plugin`.
 
 ```jsx
+// Import the product directly by raw-loader
+import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
+import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
+const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
+const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
+const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
+const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
+
+// Import the CDN. A CDN is imported and needs to be deployed on its own CDN server, which must comply with the same-origin policy.
+const subWorkerUrl = "https://cdn.jsdelivr.net/npm/@netless/appliance-plugin@latest/dist/subWorker.js";
+const fullWorkerUrl = "https://cdn.jsdelivr.net/npm/@netless/appliance-plugin@latest/dist/fullWorker.js";
+
 function App() {
   const fastboard = useFastboard(() => ({
     sdkConfig: {
@@ -411,7 +434,12 @@ function App() {
       ...
     },
     //  use appliance-plugin
-    enableAppliancePlugin: true,
+    enableAppliancePlugin: {
+        cdn: {
+            fullWorkerUrl,
+            subWorkerUrl,
+        }
+    },
   }));
   ....
 }

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "@hyrious/esbuild-dev": "^0.10.3",
     "@hyrious/esbuild-plugin-svelte": "^0.2.0",
     "@hyrious/rimraf": "^0.1.0",
-    "@netless/appliance-plugin": "1.1.3",
+    "@netless/appliance-plugin": "1.1.4",
     "@netless/window-manager": "^0.4.75",
     "@sveltejs/vite-plugin-svelte": "2.4.2",
     "@types/node": "^18.11.18",
@@ -32,7 +32,7 @@
     "fast-glob": "^3.3.0",
     "prettier": "^3.0.0",
     "rollup": "^3.26.2",
-    "sass": "^1.63.6",
+    "sass": "1.63.6",
     "semver": "^7.5.3",
     "svelte": "^3.59.2",
     "svelte-check": "^3.4.5",
@@ -46,7 +46,7 @@
   "pnpm": {
     "overrides": {
       "@netless/window-manager": "^0.4.75",
-      "@netless/appliance-plugin": "1.1.3",
+      "@netless/appliance-plugin": "1.1.4",
       "white-web-sdk": "^2.16.52"
     },
     "peerDependencyRules": {

diff --git a/packages/buildtool/index.mjs b/packages/buildtool/index.mjs
@@ -4,7 +4,7 @@ import * as esbuild from "esbuild";
 import * as dts from "@hyrious/dts";
 import { svelte } from "@hyrious/esbuild-plugin-svelte";
 import { sass } from "@netless/esbuild-plugin-inline-sass";
-import rawPlugin from "../buildtool/rawLoader.mjs";
+// import rawPlugin from "../buildtool/rawLoader.mjs";
 /**
  * The output is always dist/index.{js|mjs|d.ts}.
  *
@@ -44,7 +44,7 @@ export async function build({
         sourcemap: true,
         write: false,
         target: ["es2017"],
-        plugins: [rawPlugin(), svelte(), sass()],
+        plugins: [svelte(), sass()],
         loader: {
           ".svg": "dataurl",
         },
@@ -76,7 +76,6 @@ export async function build({
       plugins: [esbuildPlugin()],
       external: [/^[@a-z]/],
     });
-
     const esm = bundle.write({
       file: "dist/index.mjs",
       format: "es",
@@ -180,7 +179,7 @@ export async function build({
         sourcemap: true,
         write: false,
         target: ["es2017"],
-        plugins: [rawPlugin(), svelte(), sass()],
+        plugins: [svelte(), sass()],
         loader: {
           ".svg": "dataurl",
         },
@@ -192,7 +191,7 @@ export async function build({
         external: name.endsWith("-core")
           ? Object.keys({
               ...(external && external.reduce((acc, cur) => ((acc[cur] = true), acc), {})),
-            })
+            }).concat("@netless/applicance-plugin")
           : Object.keys({
               ...dependencies,
               ...peerDependencies,

diff --git a/packages/fastboard-core/package.json b/packages/fastboard-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-core",
-  "version": "0.3.22-beta.2",
+  "version": "0.3.22",
   "description": "A tiny wrapper of white-web-sdk and @netless/window-manager and @netless/appliance-plugin.",
   "main": "src/index.ts",
   "exports": {
@@ -25,7 +25,7 @@
     "@netless/synced-store": "^2.0.7"
   },
   "peerDependencies": {
-    "@netless/appliance-plugin": ">=1.1.2",
+    "@netless/appliance-plugin": ">=1.1.4",
     "@netless/window-manager": ">=0.4.75",
     "jspdf": ">=2.5.1",
     "white-web-sdk": ">=2.16.52"