agora-toolchain 1.0.1-1

package/env/electron.setup.ts

@@ -0,0 +1,44 @@
+import { app, BrowserWindow } from 'electron';
+import { initialize, enable } from '@electron/remote/main';
+
+let baseUrl = process.env.ELECTRON_START_URL ?? `http://localhost:3000`;
+
+const defaultWindowOptions: Electron.BrowserWindowConstructorOptions = {
+  height: 850,
+  width: 1340,
+  minWidth: 825, // 这个值会影响主窗口的最小宽度，如需改变，记得同步 /fcr-ui-scene-desktop/src/modules/state-bar/store.ts 中的 GALLERY_MIN_SIZE
+  minHeight: 600,
+};
+
+const defaultWebPreferences: Electron.WebPreferences = {
+  nodeIntegration: true,
+  nodeIntegrationInWorker: true,
+  contextIsolation: false,
+  webSecurity: false,
+  webviewTag: true,
+  backgroundThrottling: false,
+};
+
+initialize();
+
+app.addListener('ready', () => {
+  const mainWindow = new BrowserWindow({
+    ...defaultWindowOptions,
+    webPreferences: {
+      ...defaultWebPreferences,
+    },
+    show: false,
+  });
+
+  mainWindow.addListener('closed', () => {
+    app.exit(0);
+  });
+
+  mainWindow.addListener('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  enable(mainWindow.webContents);
+
+  mainWindow.loadURL(baseUrl);
+});

package/env/karma-setup.ts

@@ -0,0 +1,5 @@
+import { Buffer } from "buffer/";
+// @ts-ignore
+window.Buffer = Buffer;
+// @ts-ignore
+window.require = parent.window.require;

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "agora-toolchain",
+  "version": "1.0.1-1",
+  "main": "index.js",
+  "license": "MIT",
+  "bin": {
+    "agora-tc-transpile": "./scripts/transpile.js",
+    "agora-tc-test-karma-browser": "./scripts/test-karma-browser.js",
+    "agora-tc-test-karma-electron": "./scripts/test-karma-electron.js",
+    "agora-tc-dev-server": "./scripts/dev-server.js",
+    "agora-tc-bundle": "./scripts/bundle.js",
+    "agora-tc-pack-app": "./scripts/pack-client-app.js",
+    "agora-tc-pack-sdk": "./scripts/pack-client-sdk.js",
+    "agora-tc-sign": "./scripts/sign-client.js"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.3",
+    "@types/react": "^17.0.2"
+  },
+  "peerDependencies": {
+    "tslib": "^2.6.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.3%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      ">0.3%",
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "dotenv": "^16.3.1",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.23.5",
+    "@babel/plugin-proposal-decorators": "^7.23.5",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.23.3",
+    "@hot-loader/react-dom": "^17.0.2",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
+    "buffer": "^6.0.3",
+    "core-js": "^3.33.3",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.10.0",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-jasmine": "^5.1.0",
+    "karma-webpack": "^5.0.0",
+    "postcss-loader": "^8.1.1",
+    "process": "^0.11.10",
+    "react-hot-loader": "^4.13.1",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.4.3",
+    "vm-browserify": "^1.1.2",
+    "wait-on": "^7.2.0",
+    "webpack": "^5.10.0",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.10.0",
+    "worker-loader": "^3.0.8",
+    "zlib-browserify": "^0.0.3",
+    "mini-css-extract-plugin": "^2.9.1",
+    "electron-builder": "^24.13.3"
+  }
+}

package/presets/.babelrc

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

package/presets/karma.conf.js

@@ -0,0 +1,88 @@
+require('dotenv/config');
+const webpackConfig = require('./webpack.karma')();
+const path = require('path');
+const cwd = process.cwd();
+
+const files =
+  process.env.platform === 'browser'
+    ? ['__test__/browser/**/*.test.ts']
+    : ['__test__/electron/**/*.test.ts'];
+
+const preprocessors =
+  process.env.platform === 'browser'
+    ? {
+        [path.join(cwd, '__test__/browser/**/*.test.ts')]: ['webpack'],
+      }
+    : {
+        [path.join(cwd, '__test__/electron/**/*.test.ts')]: ['webpack'],
+      };
+
+const browsers = process.env.platform === 'browser' ? ['Chrome'] : [];
+
+module.exports = (config) => {
+  config.set({
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: cwd,
+    // frameworks to use
+    // available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
+    frameworks: ['jasmine', 'webpack'],
+    webpack: webpackConfig,
+    // list of files / patterns to load in the browser
+    files: [
+      path.join(path.resolve(__dirname, '..'), 'env/karma-setup.ts'),
+      '__test__/utilities/*.ts',
+      ...files,
+      {
+        pattern: '__test__/fixtures/**/*',
+        watched: false,
+        included: false,
+        served: true,
+        nocache: false,
+      },
+    ],
+    proxies: {
+      '/fixtures/': `/base/__test__/fixtures/`,
+    },
+
+    // list of files / patterns to exclude
+    exclude: [],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
+    preprocessors: {
+      [path.join(path.resolve(__dirname, '..'), 'env/karma-setup.ts')]: ['webpack'],
+      [path.join(cwd, '__test__/utilities/*.ts')]: ['webpack'],
+      ...preprocessors,
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://www.npmjs.com/search?q=keywords:karma-reporter
+    reporters: ['progress'],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+    // start these browsers
+    // available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
+    browsers,
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser instances should be started simultaneously
+    concurrency: Infinity,
+  });
+};

package/presets/postcss.config.js

@@ -0,0 +1,5 @@
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [autoprefixer()],
+};

package/presets/tsconfig.base.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "es6",
+    "module": "esnext",
+    "lib": ["dom", "esnext", "DOM.Iterable", "WebWorker"],
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "declaration": true,
+    // "pretty": true,
+    // "sourceMap": true,
+    // "inlineSources": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmitHelpers": true,
+    // "noEmitOnError": false,
+    "emitDeclarationOnly": true,
+    "isolatedModules": true,
+    // no need experimentalDecorators anymore after typescript 5.0
+    // "experimentalDecorators": true,
+    "allowJs": false,
+    "stripInternal": true,
+    "resolveJsonModule": true
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
+}

package/presets/webpack.base.js

@@ -0,0 +1,76 @@
+const { DefinePlugin, ProvidePlugin } = require('webpack');
+const path = require('path');
+const { sourceAlias } = require('../tools/webpack-utils');
+const { resolveCwd, resolveModule } = require('../tools/paths');
+const cwd = process.cwd();
+
+module.exports = {
+  plugins: [
+    new ProvidePlugin({
+      process: 'process/browser',
+    }),
+    new DefinePlugin({
+      AGORA_TEST_RTM_APP_ID: JSON.stringify(process.env.AGORA_TEST_RTM_APP_ID),
+      AGORA_TEST_RTM_APP_CERTIFICATE: JSON.stringify(process.env.AGORA_TEST_RTM_APP_CERTIFICATE),
+      DEMO_APP_VERSION: JSON.stringify(require(resolveCwd('package.json')).version),
+      DEMO_APP_SHARE_LINK: JSON.stringify(process.env.fcr_app_share_link),
+    }),
+  ],
+  resolve: {
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      zlib: require.resolve('zlib-browserify'),
+      vm: require.resolve('vm-browserify'),
+    },
+    alias: {
+      '@src': resolveCwd('src'),
+      'process/browser': resolveModule('process'),
+      react: resolveModule('react', true),
+      mobx: resolveModule('mobx', true),
+      ...sourceAlias(cwd, [
+        'agora-foundation',
+        'agora-ui-foundation',
+        'agora-rte-sdk',
+        'agora-edu-core',
+        'fcr-ui-scene',
+      ]),
+    },
+    extensions: ['.ts', '.js', '.tsx'],
+  },
+  externals: {
+    'agora-electron-sdk': 'commonjs2 agora-electron-sdk',
+    electron: 'commonjs2 electron',
+  },
+  module: {
+    rules: [
+      {
+        test: /worker-entry/,
+        use: {
+          loader: require.resolve('worker-loader'),
+          options: {
+            inline: 'no-fallback',
+          },
+        },
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+            },
+          },
+          // path.resolve(__dirname, '..', 'webpack-loaders/fragment-loader'),
+          // path.resolve(__dirname, '..', 'webpack-loaders/ui-module-loader'),
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff|woff2|eot|ttf)$/,
+        type: 'asset',
+      },
+    ],
+  },
+};

package/presets/webpack.dev.js

@@ -0,0 +1,186 @@
+const webpackMerge = require('webpack-merge');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const path = require('path');
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { AppendCodePlugin } = require('../webpack-plugins/append-code-plugin');
+const { getCodeOfDeclaredVariables } = require('../tools/ast-utils');
+const baseConfig = require('./webpack.base');
+const { resolveBase, resolveCwd, resolveScene } = require('../tools/paths');
+const fs = require('fs');
+
+const isSourceAttached = () => {
+  const srcPath = resolveScene(`src`);
+
+  if (fs.existsSync(srcPath)) {
+    return true;
+  }
+  return false;
+};
+
+module.exports = createConfig = ({ entry, port = 3000, analyze }) => {
+  const extractArray = (str = '') => {
+    if (!str) {
+      return [];
+    }
+
+    return str.split(',').map((s) => s.trim());
+  };
+
+  const plugins = extractArray(process.env.fcr_plugins);
+  const fragments = extractArray(process.env.fcr_fragments);
+  const fragmentPlugins = extractArray(process.env.fcr_fragment_plugins);
+  const modules = extractArray(process.env.fcr_dev_module);
+
+  const htmlPlugins = [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: resolveCwd('public/index.html'),
+      inject: true,
+      chunks: ['main'],
+      title: process.env.fcr_app_name ?? 'Development HTML',
+    }),
+  ];
+
+  const codeAppendPlugins = [];
+
+  const otherPlugins = [];
+
+  if (modules.length) {
+    console.log('dev module:', modules);
+  }
+  if (plugins.length) {
+    console.log('plugins:', plugins);
+  }
+  if (fragments.length) {
+    console.log('fragments:', fragments);
+  }
+  if (fragmentPlugins.length) {
+    console.log('fragment plugins:', fragmentPlugins);
+  }
+
+  const entries = {
+    main: [resolveBase('react-hot-loader/patch', true)],
+  };
+
+  if (modules.length) {
+    entries.main.push(resolveScene(`src/modules/${modules[0]}/index.dev`));
+  }
+
+  if (fragments.length) {
+    fragments.forEach((fragment) => {
+      const fragmentEntry = [resolveBase('react-hot-loader/patch', true)];
+
+      if (fragmentPlugins.length) {
+        fragmentPlugins.forEach((pluginName) => {
+          fragmentEntry.push(
+            isSourceAttached()
+              ? resolveScene(`src/plugins/${pluginName}`)
+              : resolveScene(`lib/plugins/${pluginName}`),
+          );
+        });
+      }
+
+      fragmentEntry.push(
+        isSourceAttached()
+          ? resolveScene(`src/fragments/${fragment}/index`)
+          : resolveScene(`lib/fragments/${fragment}/index`),
+      );
+
+      entries[fragment] = fragmentEntry;
+
+      const { windowOptions, webPreferences, title } = getCodeOfDeclaredVariables(
+        isSourceAttached()
+          ? resolveScene(`src/fragments/${fragment}/index.tsx`)
+          : resolveScene(`lib/fragments/${fragment}/index.js`),
+        ['windowOptions', 'webPreferences', 'title'],
+      );
+
+      codeAppendPlugins.push(
+        new AppendCodePlugin({
+          code: `window.runtime && window.runtime.setFragmentOptions('${fragment}', ${windowOptions} || {}, ${webPreferences} || {});`,
+          patterns: [/main.js$/, ...fragments.map((f) => new RegExp(`${f}.js$`))],
+        }),
+      );
+
+      htmlPlugins.push(
+        new HtmlWebpackPlugin({
+          filename: `${fragment}.html`,
+          template: resolveCwd('public/index.html'),
+          inject: true,
+          chunks: [fragment],
+          title: eval(`(${title} ?? '')`),
+        }),
+      );
+    });
+  }
+
+  if (process.env.DEV === 'true') {
+    const normalizedNodeModulePath = JSON.stringify(
+      path.join(`${process.cwd()}`.replace('\\', '\\\\'), 'node_modules'),
+    );
+
+    // add cwd to node path, so that we can require agora-electron-sdk from cwd
+    codeAppendPlugins.push(
+      new AppendCodePlugin({
+        code: `
+                if(window.module && Array.isArray(window.module.paths) && !window.module.paths.includes(${normalizedNodeModulePath})) {
+                  window.module.paths.unshift(${normalizedNodeModulePath});
+                }
+              `,
+        patterns: [/main.js$/, ...fragments.map((f) => new RegExp(`${f}.js$`))],
+      }),
+    );
+  }
+
+  if (entry) {
+    entries.main.push(resolveCwd(entry));
+  }
+
+  if (analyze) {
+    otherPlugins.push(new BundleAnalyzerPlugin());
+  }
+
+  const devConfig = {
+    mode: 'development',
+    devtool: 'eval-source-map',
+    entry: entries,
+    devServer: {
+      static: [
+        {
+          directory: resolveCwd('public'),
+          publicPath: '/',
+        },
+      ],
+      compress: true,
+      port: port,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: [
+            require.resolve('style-loader'),
+            // require.resolve(MiniCssExtractPlugin.loader),
+            require.resolve('css-loader'),
+            require.resolve('postcss-loader'),
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // new MiniCssExtractPlugin({
+      //   filename: '[name].[contenthash].css',
+      // }),
+      ...htmlPlugins,
+      ...codeAppendPlugins,
+      ...otherPlugins,
+    ],
+    resolve: {
+      alias: {
+        'react-dom': resolveBase('@hot-loader/react-dom', true),
+      },
+    },
+  };
+  return webpackMerge.merge(baseConfig, devConfig);
+};

package/presets/webpack.karma.js

@@ -0,0 +1,29 @@
+const webpackMerge = require('webpack-merge');
+const path = require('path');
+const { AppendCodePlugin } = require('../webpack-plugins/append-code-plugin');
+const baseConfig = require('./webpack.base');
+
+module.exports = createConfig = () => {
+  // add cwd to node path, so that we can require agora-electron-sdk from cwd
+
+  const normalizedNodeModulePath = JSON.stringify(
+    path.join(`${process.cwd()}`.replace('\\', '\\\\'), 'node_modules'),
+  );
+
+  const codeAppendPlugins = [
+    new AppendCodePlugin({
+      code: `
+                if(parent.module && Array.isArray(parent.module.paths) && !parent.module.paths.includes(${normalizedNodeModulePath})) {
+                  parent.module.paths.unshift(${normalizedNodeModulePath});
+                }
+            `,
+      patterns: [/\.test\..*\.js$/],
+    }),
+  ];
+
+  const karmaWebpackConfig = {
+    plugins: [...codeAppendPlugins],
+  };
+
+  return webpackMerge.merge(baseConfig, karmaWebpackConfig);
+};