@netless/appliance-plugin 1.0.0-beta.0 → 1.0.0-beta.10

package/README.md

@@ -33,25 +33,18 @@ npm install @netless/appliance-plugin
 Plug-ins can support two scenarios, their access plug-in names are different:
 - Multi-window 'ApplianceMultiPlugin' 
 ```js 
-// All bundled
 import { ApplianceMultiPlugin } from '@netless/appliance-plugin'; 
-// cdn 
-// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
 ``` 
 - Single whiteboard 'ApplianceSinglePlugin' 
 ```js 
-// All bundled
 import { ApplianceSinglePlugin } from '@netless/appliance-plugin'; 
-// cdn 
-// import { ApplianceSinglePlugin } from '@netless/appliance-plugin/cdn'; 
 ``` 
  
-> About cdn version description 
+> workerjs file cdn deployment
 > 
-> Since worker is logic independent of main thread js, public packages in worker, such as spritejs, etc. These are all repeated into workerjs, so we have introduced the cdn version to include these public packages in the cdn 
+> We used two-worker concurrency to improve drawing efficiency, which improved it by more than 40% over single-thread efficiency. However, the common dependencies on the two worker files are repeated, so building directly into the package will greatly increase the package size. So we allow the workerjs file cdn deployment by simply deploying the file under @netless/appliance-plugin/cdn into the cdn and then configuring the c of the last two workerjs via the second parameter of getInstance in the plug-in, options.cdn The dn address is fine. This solves the problem of excessive package size
 > 
-> - **cdn package is about 700kb, full package is about 2100kb.** If you need to consider the size of the package to be built, please choose reasonably. 
-> - The cdn version reduces the size of the package, but there are network problems, please fully consider it 
+> - **The total package is about 300kB, and the two wokerjs are 600kB each** If you need to consider the size of the package you are building, select Configure cdn. 
  
 ### Access mode reference 
  
@@ -64,7 +57,13 @@ import { WindowManager } from "@netless/window-manager";
 // All bundled
 import { ApplianceMultiPlugin } from '@netless/appliance-plugin'; 
 // cdn 
-// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
+// The following steps are optional. If you use cdn, you do not need to import from dist. If you import from dist, you need to import resources and configure them to options.cdn in bolb inline form. Such as? raw, this requires packaging support,vite default support? raw,webpack needs to be configured.
+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);
  
 const whiteWebSdk = new WhiteWebSdk(...) 
 const room = await whiteWebSdk.joinRoom({ 
@@ -75,7 +74,16 @@ useMultiViews: true,
 const manager = await WindowManager.mount({ room , container:elm, chessboard: true, cursor: true, supportTeachingAidsPlugin: true}); 
 if (manager) { 
 await manager.switchMainViewToWriter(); 
-await ApplianceMultiPlugin.getInstance(manager); 
+await ApplianceMultiPlugin.getInstance(manager,
+        {
+            options: {
+                cdn: {
+                    fullWorkerUrl,
+                    subWorkerUrl,
+                }
+            }
+        }
+    ); 
 } 
 ``` 
 #### Single whiteboard (interconnection with white-web-sdk) 
@@ -83,8 +91,13 @@ await ApplianceMultiPlugin.getInstance(manager);
 import { WhiteWebSdk } from "white-web-sdk"; 
 // All bundled
 import { ApplianceSinglePlugin, ApplianceSigleWrapper } from '@netless/appliance-plugin'; 
-// cdn 
-// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
+// The following steps are optional. If you use cdn, you do not need to import from dist. If you import from dist, you need to import resources and configure them to options.cdn in bolb inline form. Such as? raw, this requires packaging support,vite default support? raw,webpack needs to be configured.
+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);
  
 const whiteWebSdk = new WhiteWebSdk(...) 
 const room = await whiteWebSdk.joinRoom({ 
@@ -92,7 +105,33 @@ const room = await whiteWebSdk.joinRoom({
 invisiblePlugins: [ApplianceSinglePlugin], 
 wrappedComponents: [ApplianceSigleWrapper] 
 }) 
-await ApplianceSinglePlugin.getInstance(room); 
+await ApplianceSinglePlugin.getInstance(room,
+    {
+        options: {
+            cdn: {
+                fullWorkerUrl,
+                subWorkerUrl,
+            }
+        }
+    }
+); 
+```
+#### About ’?raw‘ webpack configuration
+```js
+module: {
+    rules: [
+        // ...
+        {
+            test: /\.m?js$/,
+            resourceQuery: { not: [/raw/] },
+            use: [ ... ]
+        },
+        {
+            resourceQuery: /raw/,
+            type: 'asset/source',
+        }
+    ]
+},
 ``` 
  
 ### Call introduction 

package/cdn/cdn.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="/fullWorker-DkNRgu.js",e="/subWorker-BvxT1L.js";exports.fullWorkerUrl=r;exports.subWorkerUrl=e;