refactor: add "lite" package

netless-io · Feb 28, 2024 · 760f2fc · 760f2fc
1 parent 61bf535
commit 760f2fc
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+- Added a <q>lite</q> version of Fastboard where `@netless/app-slide` is not registered.\
+  You can save about 2 MB of the bundle size.
+  If you do not want to use PPTX or want to load it dynamically, import `@netless/fastboard/lite` to use it.
+
 ## 0.3.12
 
 - Fixed an error when UI config is updated to `{ toolbar: undefined }`.

diff --git a/packages/buildtool/index.mjs b/packages/buildtool/index.mjs
@@ -30,7 +30,7 @@ export async function build({
   process.chdir(dir);
   fs.rmSync("dist", { recursive: true, force: true });
 
-  const esbuildPlugin = external => ({
+  const esbuildPlugin = (external, alias = {}) => ({
     name: "esbuild",
     async load(id) {
       const { outputFiles } = await esbuild.build({
@@ -51,6 +51,7 @@ export async function build({
           __NAME__: '"@netless/fastboard"',
           __VERSION__: JSON.stringify(version),
         },
+        alias,
         external: Object.keys({
           ...dependencies,
           ...peerDependencies,
@@ -66,30 +67,61 @@ export async function build({
     },
   });
 
+  // Build dist/index.js
   let start = Date.now();
-  let bundle = await rollup.rollup({
-    input: main,
-    plugins: [esbuildPlugin()],
-    external: [/^[@a-z]/],
-  });
+  {
+    let bundle = await rollup.rollup({
+      input: main,
+      plugins: [esbuildPlugin()],
+      external: [/^[@a-z]/],
+    });
 
-  const esm = bundle.write({
-    file: "dist/index.mjs",
-    format: "es",
-    sourcemap: true,
-  });
+    const esm = bundle.write({
+      file: "dist/index.mjs",
+      format: "es",
+      sourcemap: true,
+    });
 
-  const cjs = bundle.write({
-    file: "dist/index.js",
-    format: "cjs",
-    sourcemap: true,
-    interop: "auto",
-  });
+    const cjs = bundle.write({
+      file: "dist/index.js",
+      format: "cjs",
+      sourcemap: true,
+      interop: "auto",
+    });
+
+    await esm;
+    await cjs;
+    await bundle.close();
+    console.log("Built dist/index.{js|mjs} in", Date.now() - start + "ms");
+  }
+
+  // Build dist/lite.js
+  start = Date.now();
+  if (!name.endsWith("-ui")) {
+    let bundle = await rollup.rollup({
+      input: name.endsWith("-core") ? "src/lite.ts" : main,
+      plugins: [esbuildPlugin([], { "@netless/fastboard-core": "@netless/fastboard-core/lite" })],
+      external: [/^[@a-z]/],
+    });
+
+    const esm = bundle.write({
+      file: "dist/lite.mjs",
+      format: "es",
+      sourcemap: true,
+    });
 
-  await esm;
-  await cjs;
-  await bundle.close();
-  console.log("Built dist/index.{js|mjs} in", Date.now() - start + "ms");
+    const cjs = bundle.write({
+      file: "dist/lite.js",
+      format: "cjs",
+      sourcemap: true,
+      interop: "auto",
+    });
+
+    await esm;
+    await cjs;
+    await bundle.close();
+    console.log("Built dist/lite.{js|mjs} in", Date.now() - start + "ms");
+  }
 
   // Generate dist/index.svelte.mjs for the UI package,
   // this also helps to avoid depending on svelte in fastboard/fastboard-react test.
@@ -112,4 +144,16 @@ export async function build({
   start = Date.now();
   await dts.build(main, "dist/index.d.ts", { exclude: ["svelte", "svelte/internal"] });
   console.log("Built dist/index.d.ts in", Date.now() - start + "ms");
+
+  // Generate dist/lite.d.ts
+  start = Date.now();
+  if (name.endsWith("-core")) {
+    await dts.build("src/lite.ts", "dist/lite.d.ts", { exclude: ["svelte", "svelte/internal"] });
+    console.log("Built dist/lite.d.ts in", Date.now() - start + "ms");
+  } else if (!name.endsWith("-ui")) {
+    let code = fs.readFileSync("dist/index.d.ts", "utf-8");
+    code = code.replace(/@netless\/fastboard-core/g, "@netless/fastboard-core/lite");
+    fs.writeFileSync("dist/lite.d.ts", code);
+    console.log("Built dist/lite.d.ts in", Date.now() - start + "ms");
+  }
 }
diff --git a/packages/fastboard-core/package.json b/packages/fastboard-core/package.json
@@ -3,6 +3,10 @@
   "version": "0.3.12",
   "description": "A tiny wrapper of white-web-sdk and @netless/window-manager.",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./lite": "./src/lite.ts"
+  },
   "files": [
     "src",
     "dist"
@@ -28,6 +32,16 @@
   "publishConfig": {
     "main": "dist/index.js",
     "module": "dist/index.mjs",
-    "types": "dist/index.d.ts"
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "./lite": {
+        "types": "./dist/lite.d.ts",
+        "default": "./dist/lite.mjs"
+      }
+    }
   }
 }
diff --git a/packages/fastboard-core/src/behaviors/index.ts b/packages/fastboard-core/src/behaviors/index.ts
@@ -1,4 +1,3 @@
-import type { RegisterParams } from "@netless/window-manager";
 import { WindowManager } from "@netless/window-manager";
 import SlideApp, { apps, addHooks, previewSlide } from "@netless/app-slide";
 
@@ -10,53 +9,9 @@ export type {
 } from "@netless/app-slide";
 export { previewSlide, SlideApp, addHooks as addSlideHooks, apps as slideApps };
 
-export interface AppsConfig {
-  [kind: string]: Omit<RegisterParams, "kind">;
-}
-
-const DefaultApps: AppsConfig = {
-  Monaco: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-monaco/0.1.14-beta.1/dist/main.iife.js",
-  },
-  Countdown: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-countdown/0.0.2/dist/main.iife.js",
-  },
-  GeoGebra: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-geogebra/0.0.4/dist/main.iife.js",
-    appOptions: {
-      HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d",
-    },
-  },
-  EmbeddedPage: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-embedded-page/0.1.1/dist/main.iife.js",
-  },
-  Plyr: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-plyr/0.1.3/dist/main.iife.js",
-  },
-};
-
 WindowManager.register({
   kind: "Slide",
   appOptions: { debug: false },
   src: SlideApp,
   addHooks,
 });
-
-for (const kind in DefaultApps) {
-  if (Object.prototype.hasOwnProperty.call(DefaultApps, kind)) {
-    const options = DefaultApps[kind];
-    WindowManager.register({ kind, ...options });
-  }
-}
-
-export const register = WindowManager.register.bind(WindowManager);
-
-declare let __NAME__: string, __VERSION__: string;
-
-export const version = __VERSION__;
-
-if (typeof window !== "undefined") {
-  let str = (window as { __netlessUA?: string }).__netlessUA || "";
-  str += ` ${__NAME__}@${version} `;
-  (window as { __netlessUA?: string }).__netlessUA = str;
-}
diff --git a/packages/fastboard-core/src/behaviors/lite.ts b/packages/fastboard-core/src/behaviors/lite.ts
@@ -0,0 +1,45 @@
+import { WindowManager, type RegisterParams } from "@netless/window-manager";
+
+export const register = WindowManager.register.bind(WindowManager);
+
+export interface AppsConfig {
+  [kind: string]: Omit<RegisterParams, "kind">;
+}
+
+const DefaultApps: AppsConfig = {
+  Monaco: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-monaco/0.1.14-beta.1/dist/main.iife.js",
+  },
+  Countdown: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-countdown/0.0.2/dist/main.iife.js",
+  },
+  GeoGebra: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-geogebra/0.0.4/dist/main.iife.js",
+    appOptions: {
+      HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d",
+    },
+  },
+  EmbeddedPage: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-embedded-page/0.1.1/dist/main.iife.js",
+  },
+  Plyr: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-plyr/0.1.3/dist/main.iife.js",
+  },
+};
+
+for (const kind in DefaultApps) {
+  if (Object.prototype.hasOwnProperty.call(DefaultApps, kind)) {
+    const options = DefaultApps[kind];
+    WindowManager.register({ kind, ...options });
+  }
+}
+
+declare let __NAME__: string, __VERSION__: string;
+
+export const version = __VERSION__;
+
+if (typeof window !== "undefined") {
+  let str = (window as { __netlessUA?: string }).__netlessUA || "";
+  str += ` ${__NAME__}@${version} `;
+  (window as { __netlessUA?: string }).__netlessUA = str;
+}
diff --git a/packages/fastboard-core/src/impl/FastboardApp.ts b/packages/fastboard-core/src/impl/FastboardApp.ts
@@ -35,7 +35,7 @@ import {
   warn,
 } from "../utils";
 import { ensure_official_plugins, transform_app_status } from "../internal";
-import { register } from "../behaviors";
+import { register } from "../behaviors/lite";
 
 class FastboardAppBase<TEventData extends Record<string, any> = any> {
   public constructor(

diff --git a/packages/fastboard-core/src/impl/FastboardPlayer.ts b/packages/fastboard-core/src/impl/FastboardPlayer.ts
@@ -16,7 +16,7 @@ import { WindowManager } from "@netless/window-manager";
 import { SyncedStorePlugin } from "@netless/synced-store";
 import { readable, writable } from "../utils";
 import { ensure_official_plugins } from "../internal";
-import { register } from "../behaviors";
+import { register } from "../behaviors/lite";
 
 class FastboardPlayerBase<TEventData extends Record<string, any> = any> {
   public constructor(

diff --git a/packages/fastboard-core/src/lite.ts b/packages/fastboard-core/src/lite.ts
@@ -0,0 +1,4 @@
+export * from "./utils";
+export * from "./impl";
+export * from "./behaviors/lite";
+export * from "./helpers";
diff --git a/packages/fastboard-react/package.json b/packages/fastboard-react/package.json
@@ -21,17 +21,27 @@
     "@netless/fastboard-core": "workspace:*",
     "@netless/fastboard-ui": "workspace:*"
   },
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts"
-  },
   "devDependencies": {
     "@netless/buildtool": "workspace:*",
     "@netless/esbuild-plugin-inline-sass": "workspace:*",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "./lite": {
+        "types": "./dist/lite.d.ts",
+        "default": "./dist/lite.mjs"
+      }
+    }
   }
 }
diff --git a/packages/fastboard/package.json b/packages/fastboard/package.json
@@ -18,13 +18,23 @@
     "@netless/fastboard-core": "workspace:*",
     "@netless/fastboard-ui": "workspace:*"
   },
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts"
-  },
   "devDependencies": {
     "@netless/buildtool": "workspace:*",
     "@netless/esbuild-plugin-inline-sass": "workspace:*"
+  },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "./lite": {
+        "types": "./dist/lite.d.ts",
+        "default": "./dist/lite.mjs"
+      }
+    }
   }
 }