agora-toolchain 3.8.1 → 3.9.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-toolchain",
-  "version": "3.8.1",
+  "version": "3.9.0-alpha",
   "license": "MIT",
   "bin": {
     "agora-tc-transpile": "./scripts/transpile.js",

package/presets/.babelrc.esm

@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "useBuiltIns": "usage",
+        "corejs": {
+          "version": "3.33",
+          "proposals": true
+        }
+      }
+    ],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
+    ["@babel/plugin-transform-runtime", { "regenerator": true }]
+  ]
+}

package/presets/electron.vite.config.js

@@ -1,7 +1,8 @@
 import { defineConfig } from 'electron-vite';
 import commonjs from '@rollup/plugin-commonjs';
 import legacy from '@vitejs/plugin-legacy';
-import { existsSync } from 'fs';
+import { existsSync, writeFileSync, unlinkSync } from 'fs';
+import path from 'path';
 import { resolveCwd, resolveModule } from '../tools/paths';
 
 /**
@@ -15,6 +16,7 @@ function generateWorkspaceAlias(libNames) {
     try {
       const modulePath = resolveModule(libName);
       const srcPath = `${modulePath}/src`;
+      const libEsPath = `${modulePath}/lib-es`;
       // const libPath = `${modulePath}/lib`;
 
       // Check if src directory exists
@@ -23,19 +25,50 @@ function generateWorkspaceAlias(libNames) {
         // Link to src if it exists
         aliases.push(
           { find: new RegExp(`^${libName}/lib/(.*)`), replacement: `${srcPath}/$1` },
-          { find: libName, replacement: srcPath },
+          { find: new RegExp(`^${libName}$`), replacement: srcPath },
         );
+      } else if (existsSync(libEsPath)) {
+        console.log(`source linker: ${libName} linked to lib-es`);
+        aliases.push({ find: new RegExp(`^${libName}/lib/(.*)`), replacement: `${libEsPath}/$1` });
+        if (existsSync(`${libEsPath}/index.js`)) {
+          aliases.push({ find: new RegExp(`^${libName}$`), replacement: libEsPath });
+        }
       }
+      //  else if (existsSync(libPath)) {
+      //   console.log(`source linker: ${libName} linked to lib`);
+      //   aliases.push({ find: new RegExp(`^${libName}/lib/(.*)`), replacement: `${libPath}/$1` });
+      //   if (existsSync(`${libPath}/index.js`)) {
+      //     aliases.push({ find: new RegExp(`^${libName}$`), replacement: libPath });
+      //   }
+      // }
     } catch (e) {
       console.log(`source linker: ${libName} not found, using default paths`);
       // Fallback to relative path if module not found
-      const relativePath = resolveCwd(`../${libName}/src`);
-      if (existsSync(relativePath)) {
-        aliases.push(
-          { find: new RegExp(`^${libName}/lib/(.*)`), replacement: `${relativePath}/$1` },
-          { find: libName, replacement: relativePath },
-        );
-      }
+      // const relativePath = resolveCwd(`../${libName}/src`);
+      // const relativeLibEsPath = resolveCwd(`../${libName}/lib-es`);
+      // const relativeLibPath = resolveCwd(`../${libName}/lib`);
+      // if (existsSync(relativePath)) {
+      //   aliases.push(
+      //     { find: new RegExp(`^${libName}/lib/(.*)`), replacement: `${relativePath}/$1` },
+      //     { find: new RegExp(`^${libName}$`), replacement: relativePath },
+      //   );
+      // } else if (existsSync(relativeLibEsPath)) {
+      //   aliases.push({
+      //     find: new RegExp(`^${libName}/lib/(.*)`),
+      //     replacement: `${relativeLibEsPath}/$1`,
+      //   });
+      //   if (existsSync(`${relativeLibEsPath}/index.js`)) {
+      //     aliases.push({ find: new RegExp(`^${libName}$`), replacement: relativeLibEsPath });
+      //   }
+      // } else if (existsSync(relativeLibPath)) {
+      //   aliases.push({
+      //     find: new RegExp(`^${libName}/lib/(.*)`),
+      //     replacement: `${relativeLibPath}/$1`,
+      //   });
+      //   if (existsSync(`${relativeLibPath}/index.js`)) {
+      //     aliases.push({ find: new RegExp(`^${libName}$`), replacement: relativeLibPath });
+      //   }
+      // }
     }
   });
 
@@ -50,6 +83,88 @@ export default defineConfig(() => {
   const preloadEntry = process.env.VITE_PRELOAD_ENTRY || 'electron/preload/index.js';
   const rendererEntry =
     process.env.VITE_RENDERER_ENTRY || 'electron/renderer/public/index.vite.html';
+  const rendererFragments = process.env.fcr_fragments || '';
+
+  const generatedFragmentFiles = [];
+
+  const ensureFragmentHtml = (fragmentName) => {
+    const filePath = resolveCwd(`${fragmentName}.html`);
+
+    if (existsSync(filePath)) {
+      return filePath;
+    }
+
+    const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title></title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script type="module">
+    import { title, windowOptions, webPreferences } from '/src/fragments/${fragmentName}/index.tsx';
+    if (title) document.title = title;
+    if (window.runtime && window.runtime.setFragmentOptions) {
+      window.runtime.setFragmentOptions('${fragmentName}', windowOptions || {}, webPreferences || {});
+    }
+  </script>
+</html>
+`;
+    writeFileSync(filePath, html);
+    generatedFragmentFiles.push(filePath);
+
+    return filePath;
+  };
+
+  const parseRendererFragments = (value) => {
+    if (!value) return {};
+
+    return value
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean)
+      .reduce((acc, item) => {
+        if (
+          !item.includes('=') &&
+          !item.includes('/') &&
+          !item.includes('\\') &&
+          !item.includes('.')
+        ) {
+          const fragmentName = item;
+          const htmlPath = ensureFragmentHtml(fragmentName);
+          if (htmlPath) {
+            acc[fragmentName] = htmlPath;
+          }
+          return acc;
+        }
+
+        const [name, fragmentPath] = item.includes('=') ? item.split('=') : [null, item];
+        const trimmedPath = fragmentPath?.trim();
+        const trimmedName =
+          (name && name.trim()) || path.basename(trimmedPath).replace(/\.html$/i, '');
+
+        if (!trimmedName || !trimmedPath) {
+          console.warn(`Invalid fragment entry: "${item}", expected name=path`);
+          return acc;
+        }
+
+        if (trimmedName === 'index') {
+          console.warn(`Skip fragment entry "${item}" because "index" is reserved`);
+          return acc;
+        }
+
+        const resolvedPath = resolveCwd(trimmedPath);
+        if (!existsSync(resolvedPath)) {
+          console.warn(`Fragment entry not found: ${trimmedPath}`);
+          return acc;
+        }
+
+        acc[trimmedName] = resolvedPath;
+        return acc;
+      }, {});
+  };
 
   // Check if entry files exist
   const mainEntryPath = resolveCwd(mainEntry);
@@ -63,7 +178,12 @@ export default defineConfig(() => {
   console.log('Using electron-vite config with:');
   console.log('  Main entry:', mainEntry, hasMain ? '✓' : '✗');
   console.log('  Preload entry:', preloadEntry, hasPreload ? '✓' : '✗');
+  const fragmentEntries = parseRendererFragments(rendererFragments);
+  const fragmentKeys = Object.keys(fragmentEntries);
   console.log('  Renderer entry:', rendererEntry, hasRenderer ? '✓' : '✗');
+  if (fragmentKeys.length) {
+    console.log('  Renderer fragments:', fragmentKeys.join(', '));
+  }
   console.log('  Output dir prefix:', outDirPrefix);
 
   if (!hasMain && !hasPreload && !hasRenderer) {
@@ -73,6 +193,45 @@ export default defineConfig(() => {
     process.exit(1);
   }
 
+  const external = [
+    'agora-electron-sdk',
+    'electron',
+    'winston',
+    'winston-daily-rotate-file',
+    'node:fs',
+    'node:fs/promises',
+    'fs',
+    'node:path',
+    'path',
+    'node:os',
+    'os',
+    'electron-screenshots',
+    'original-fs',
+  ];
+
+  const resolveWorkspaceLib = (libName) => {
+    try {
+      const modulePath = resolveModule(libName);
+      const srcPath = `${modulePath}/src`;
+      const libEsPath = `${modulePath}/lib-es`;
+      const libPath = `${modulePath}/lib`;
+      if (existsSync(srcPath)) {
+        return { basePath: srcPath, modulePath };
+      }
+      if (existsSync(libEsPath)) {
+        return { basePath: libEsPath, modulePath };
+      }
+      if (existsSync(libPath)) {
+        return { basePath: libPath, modulePath };
+      }
+    } catch (e) {
+      return null;
+    }
+    return null;
+  };
+
+  const foundationPaths = resolveWorkspaceLib('agora-foundation');
+
   if (hasMain) {
     config.main = {
       // 主进程构建配置
@@ -82,20 +241,20 @@ export default defineConfig(() => {
           input: {
             index: resolveCwd(mainEntry),
           },
-          external: ['electron-screenshots', 'original-fs'],
+          external,
           plugins: [
-            commonjs({
-              include: [
-                /fcr-ui-scene[/\\]lib[/\\].*/,
-                /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
-                /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
-                /agora-ui-foundation[/\\]lib[/\\].*/,
-                /fcr-core[/\\]lib[/\\].*/,
-                /agora-rte-sdk[/\\]lib[/\\].*/,
-                /agora-foundation[/\\]lib[/\\].*/,
-                /foundation[/\\]lib[/\\].*/,
-              ],
-            }),
+            // commonjs({
+            //   include: [
+            //     /fcr-ui-scene[/\\]lib[/\\].*/,
+            //     /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
+            //     /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
+            //     /agora-ui-foundation[/\\]lib[/\\].*/,
+            //     /fcr-core[/\\]lib[/\\].*/,
+            //     /agora-rte-sdk[/\\]lib[/\\].*/,
+            //     /agora-foundation[/\\]lib[/\\].*/,
+            //     /foundation[/\\]lib[/\\].*/,
+            //   ],
+            // }),
           ],
         },
         bytecode: true,
@@ -115,19 +274,20 @@ export default defineConfig(() => {
           input: {
             index: resolveCwd(preloadEntry),
           },
+          external,
           plugins: [
-            commonjs({
-              include: [
-                /fcr-ui-scene[/\\]lib[/\\].*/,
-                /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
-                /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
-                /agora-ui-foundation[/\\]lib[/\\].*/,
-                /fcr-core[/\\]lib[/\\].*/,
-                /agora-rte-sdk[/\\]lib[/\\].*/,
-                /agora-foundation[/\\]lib[/\\].*/,
-                /foundation[/\\]lib[/\\].*/,
-              ],
-            }),
+            // commonjs({
+            //   include: [
+            //     /fcr-ui-scene[/\\]lib[/\\].*/,
+            //     /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
+            //     /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
+            //     /agora-ui-foundation[/\\]lib[/\\].*/,
+            //     /fcr-core[/\\]lib[/\\].*/,
+            //     /agora-rte-sdk[/\\]lib[/\\].*/,
+            //     /agora-foundation[/\\]lib[/\\].*/,
+            //     /foundation[/\\]lib[/\\].*/,
+            //   ],
+            // }),
           ],
         },
         bytecode: true,
@@ -140,19 +300,29 @@ export default defineConfig(() => {
 
   if (hasRenderer) {
     config.renderer = {
+      worker: {
+        rollupOptions: {
+          external,
+        },
+        plugins: () => [
+          // commonjs({
+          //   include: [/foundation[/\\]lib/, /agora-foundation[/\\]lib/, /agora-rte-sdk[/\\]lib/],
+          // }),
+        ],
+      },
       plugins: [
-        commonjs({
-          include: [
-            /fcr-ui-scene[/\\]lib[/\\].*/,
-            /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
-            /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
-            /agora-ui-foundation[/\\]lib[/\\].*/,
-            /fcr-core[/\\]lib[/\\].*/,
-            /agora-rte-sdk[/\\]lib[/\\].*/,
-            /agora-foundation[/\\]lib[/\\].*/,
-            /foundation[/\\]lib[/\\].*/,
-          ],
-        }),
+        // commonjs({
+        //   include: [
+        //     /fcr-ui-scene[/\\]lib[/\\].*/,
+        //     /fcr-ui-scene-mobile[/\\]lib[/\\].*/,
+        //     /fcr-ui-widget-sdk[/\\]lib[/\\].*/,
+        //     /agora-ui-foundation[/\\]lib[/\\].*/,
+        //     /fcr-core[/\\]lib[/\\].*/,
+        //     /agora-rte-sdk[/\\]lib[/\\].*/,
+        //     /agora-foundation[/\\]lib[/\\].*/,
+        //     /foundation[/\\]lib[/\\].*/,
+        //   ],
+        // }),
         legacy({
           targets: ['defaults'],
           modernPolyfills: true,
@@ -160,6 +330,17 @@ export default defineConfig(() => {
           // MapIterator.find
           additionalLegacyPolyfills: ['core-js/proposals/iterator-helpers'],
         }),
+        {
+          name: 'fcr-clean-fragment-html',
+          closeBundle() {
+            if (!generatedFragmentFiles.length) return;
+            generatedFragmentFiles.forEach((filePath) => {
+              if (existsSync(filePath)) {
+                unlinkSync(filePath);
+              }
+            });
+          },
+        },
       ],
       // 渲染进程构建配置
       root: '.',
@@ -167,13 +348,23 @@ export default defineConfig(() => {
       build: {
         outDir: `${outDirPrefix}/electron/renderer`,
         rollupOptions: {
+          external,
           input: {
             index: resolveCwd(rendererEntry),
+            ...fragmentEntries,
           },
         },
       },
       resolve: {
         alias: [
+          ...(foundationPaths
+            ? [
+                {
+                  find: /^agora-foundation\/lib\/(.*)/,
+                  replacement: `${foundationPaths.basePath}/$1`,
+                },
+              ]
+            : []),
           // Node.js polyfills (对应 webpack 的 resolve.fallback)
           { find: 'crypto', replacement: 'crypto-browserify' },
           { find: 'stream', replacement: 'stream-browserify' },

package/presets/webpack.base.js

@@ -56,6 +56,7 @@ module.exports = {
     'node:os': 'commonjs2 node:os',
     os: 'commonjs2 os',
     'winston-daily-rotate-file': 'commonjs2 winston-daily-rotate-file',
+    util: 'commonjs2 util',
   },
   module: {
     rules: [

package/scripts/transpile.js

@@ -2,15 +2,17 @@
 const { spawn } = require('../tools/process-utils');
 const fs = require('fs');
 const path = require('path');
-const { src, out, transpileOnly } = require('../tools/transpile-options');
+const { src, out, transpileOnly, esm } = require('../tools/transpile-options');
 const presetsDir = path.join(__dirname, '../presets');
 const babelPresetPath = path.join(presetsDir, '.babelrc');
+const babelEsmPresetPath = path.join(presetsDir, '.babelrc.esm');
 const tsPresetPath = path.join(presetsDir, 'tsconfig.json');
 
 const cwd = process.cwd();
 
 const srcDir = path.join(cwd, src ?? 'src');
 const outDir = path.join(cwd, out ?? 'lib');
+const outEsmDir = path.join(cwd, 'lib-es');
 
 // console.log("Agora Toolchain: transpiling...");
 spawn(
@@ -54,6 +56,34 @@ spawn(
         }
       });
     }
+
+    if (esm) {
+      spawn(
+        require.resolve('.bin/babel'),
+        [
+          srcDir,
+          '--extensions',
+          '.ts,.tsx',
+          '--out-dir',
+          outEsmDir,
+          '--ignore',
+          '**/*.d.ts',
+          '--config-file',
+          babelEsmPresetPath,
+          '--copy-files',
+        ],
+        {
+          stdio: 'inherit',
+        },
+      ).on('exit', (esmCode) => {
+        if (esmCode !== 0) {
+          console.error('Agora Toolchain: ESM transpilation failed! code:', esmCode);
+          process.exit(1);
+        }
+
+        console.log('Agora Toolchain: ESM transpilation successful!');
+      });
+    }
   } else {
     console.error('Agora Toolchain: transpilation failed! code:', code);
     process.exit(1);

package/tools/transpile-options.js

@@ -4,6 +4,7 @@ const opts = program
   .option('--transpile-only', 'Only transpile the code, do not build types')
   .option('--src <src>', 'Source directory')
   .option('--out <out>', 'Output directory')
+  .option('--esm', 'Also output ESM modules')
   .parse(process.argv)
   .opts();
 

package/env/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../presets/tsconfig.base.json",
-  "files": ["./electron.setup.ts", "./karma-setup.ts"]
-}

package/presets/postcss-plugin/px-to-vw/src/pixel-unit-regexp.js

@@ -1,14 +0,0 @@
-// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
-
-// Not anything inside double quotes
-// Not anything inside single quotes
-// Not anything inside url()
-// Any digit followed by px
-// !singlequotes|!doublequotes|!url()|pixelunit
-function getUnitRegexp(unit) {
-  return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g');
-}
-
-module.exports = {
-  getUnitRegexp,
-};

package/presets/postcss-plugin/px-to-vw/src/prop-list-matcher.js

@@ -1,118 +0,0 @@
-var filterPropList = {
-  exact: function (list) {
-    return list.filter(function (m) {
-      return m.match(/^[^\*\!]+$/);
-    });
-  },
-  contain: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\*.+\*$/);
-      })
-      .map(function (m) {
-        return m.substr(1, m.length - 2);
-      });
-  },
-  endWith: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\*[^\*]+$/);
-      })
-      .map(function (m) {
-        return m.substr(1);
-      });
-  },
-  startWith: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^[^\*\!]+\*$/);
-      })
-      .map(function (m) {
-        return m.substr(0, m.length - 1);
-      });
-  },
-  notExact: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\![^\*].*$/);
-      })
-      .map(function (m) {
-        return m.substr(1);
-      });
-  },
-  notContain: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\!\*.+\*$/);
-      })
-      .map(function (m) {
-        return m.substr(2, m.length - 3);
-      });
-  },
-  notEndWith: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\!\*[^\*]+$/);
-      })
-      .map(function (m) {
-        return m.substr(2);
-      });
-  },
-  notStartWith: function (list) {
-    return list
-      .filter(function (m) {
-        return m.match(/^\![^\*]+\*$/);
-      })
-      .map(function (m) {
-        return m.substr(1, m.length - 2);
-      });
-  },
-};
-
-function createPropListMatcher(propList) {
-  var hasWild = propList.indexOf('*') > -1;
-  var matchAll = hasWild && propList.length === 1;
-  var lists = {
-    exact: filterPropList.exact(propList),
-    contain: filterPropList.contain(propList),
-    startWith: filterPropList.startWith(propList),
-    endWith: filterPropList.endWith(propList),
-    notExact: filterPropList.notExact(propList),
-    notContain: filterPropList.notContain(propList),
-    notStartWith: filterPropList.notStartWith(propList),
-    notEndWith: filterPropList.notEndWith(propList),
-  };
-  return function (prop) {
-    if (matchAll) return true;
-    return (
-      (hasWild ||
-        lists.exact.indexOf(prop) > -1 ||
-        lists.contain.some(function (m) {
-          return prop.indexOf(m) > -1;
-        }) ||
-        lists.startWith.some(function (m) {
-          return prop.indexOf(m) === 0;
-        }) ||
-        lists.endWith.some(function (m) {
-          return prop.indexOf(m) === prop.length - m.length;
-        })) &&
-      !(
-        lists.notExact.indexOf(prop) > -1 ||
-        lists.notContain.some(function (m) {
-          return prop.indexOf(m) > -1;
-        }) ||
-        lists.notStartWith.some(function (m) {
-          return prop.indexOf(m) === 0;
-        }) ||
-        lists.notEndWith.some(function (m) {
-          return prop.indexOf(m) === prop.length - m.length;
-        })
-      )
-    );
-  };
-}
-
-module.exports = {
-  filterPropList,
-  createPropListMatcher,
-};