agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

package/Readme.md

@@ -9,4 +9,10 @@ This repository is a part of [RTE app builder](https://appbuilder.agora.io).
     npm run dev-setup -- meeting
     npm run dev-setup -- live-streaming
     ```
-    This command will automatically set everything up for development
+    This command will automatically set everything up for development
+
+To build react sdk using esbuild,
+1. Install the go compiler from https://go.dev/doc/install
+2. Run `go mod tidy` to download dependencies
+
+You can now build react sdk using esbuild through npm script 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.2.0",
+  "version": "2.3.0-beta.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -8,11 +8,12 @@
     "template.config.js"
   ],
   "scripts": {
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout ab-dev-auto",
+    "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout release/fpe-1.0.0",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "copy-vercel": "cp vercel.json template/dist",
+    "copy-vercel": "cp -r Builds/web template/dist && cp vercel.json template/dist",
     "pre-release": "cd template && cp package-lock.json _package-lock.json"
   },
   "author": {

package/template/Gulpfile.js

@@ -9,19 +9,50 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-const {series, parallel} = require('gulp');
+const {series, parallel, src, dest} = require('gulp');
 const {spawn} = require('child_process');
 const fs = require('fs').promises;
 const path = require('path');
 const del = require('del');
-const args = require('yargs').argv;
+const config = require('./config.json');
+const replace = require('gulp-replace');
+const concat = require('gulp-concat');
+const header = require('gulp-header');
 
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const webpackConfig = require('./webpack.renderer.config');
+const webpackRsdkConfig = require('./webpack.rsdk.config');
 
-const log = (x) => console.log(x);
-const BUILD_PATH = path.join(__dirname, '.electron');
+const outPathArg = process.argv.indexOf('--outpath')
+getBuildPath = () => {
+  if (outPathArg == -1) {
+    return process.env.TARGET === 'wsdk'
+    ? path.join(__dirname, '../Builds/web-sdk')
+    : process.env.TARGET === 'rsdk'
+    ? path.join(__dirname, '../Builds/react-sdk')
+    : process.env.TARGET === 'android'
+    ? path.join(__dirname, '../Builds/android')
+    : path.join(__dirname, '../Builds/.electron');
+  } else {
+    return process.argv[outPathArg+1].split('/').slice(0, -1).join('/')
+  }
+}
+const BUILD_PATH = getBuildPath();
+const TS_DEFS_BUILD_PATH = process.env.TARGET === 'wsdk'
+? path.join(__dirname, '../Builds/ts-defs/web-sdk')
+: process.env.TARGET === 'rsdk'
+? path.join(__dirname, '../Builds/ts-defs/react-sdk')
+: process.env.TARGET === 'android'
+? path.join(__dirname, '../Builds/ts-defs/android')
+: path.join(__dirname, '../Builds/ts-defs/.electron');
+
+const pkgNameArg = process.argv.indexOf('--pkgname')
+const PACKAGE_NAME = pkgNameArg == -1
+  ?  'agora-app-builder-sdk'
+  : process.argv[pkgNameArg+1]
+
+let PRODUCT_NAME;
 
 const runCli = (cmd, cb) => {
   const [arg1, ...arg2] = cmd.split(' ');
@@ -32,94 +63,370 @@ const runCli = (cmd, cb) => {
   proc.on('exit', cb);
 };
 
-function clean() {
-  return del([`${BUILD_PATH}/**/*`]);
-}
+const general = {
+  clean: () => {
+    return del([`${BUILD_PATH}/**/*`], {force: true});
+  },
+  packageJson: async (cb) => {
+    let package = JSON.parse(
+      await fs.readFile(path.join(__dirname, 'package.json')),
+    );
+    let {
+      name,
+      version,
+      private,
+      author,
+      description,
+      dependencies,
+      optionalDependencies,
+    } = package;
+    PRODUCT_NAME = name;
+    let nativeDeps = require('./nativeDeps').default;
+    let natives = {};
+    let searchDeps = {
+      ...dependencies,
+      ...optionalDependencies,
+    };
+    nativeDeps.map((k) => {
+      natives[k] = searchDeps[k];
+    });
 
-function renderer(cb) {
-  runCli('webpack --config webpack.renderer.config.js', cb);
-}
+    let newPackage = {
+      name: PACKAGE_NAME,
+      version,
+      private,
+      author,
+      description,
+      // dependencies: natives,
+      // agora_electron: {
+      //   electron_version: '5.0.8',
+      //   prebuilt: true,
+      // },
+    };
 
-function main(cb) {
-  runCli('webpack --config ./webpack.main.config.js', cb);
-}
+    // Target specific changes
 
-async function packageJson(cb) {
-  let package = JSON.parse(
-    await fs.readFile(path.join(__dirname, 'package.json')),
-  );
-  let {
-    name,
-    version,
-    private,
-    author,
-    description,
-    dependencies,
-    optionalDependencies,
-  } = package;
-  let nativeDeps = require('./nativeDeps').default;
-  let natives = {};
-  let searchDeps = {
-    ...dependencies,
-    ...optionalDependencies,
-  };
-  nativeDeps.map((k) => {
-    natives[k] = searchDeps[k];
-  });
+    if (process.env.TARGET === 'rsdk') {
+      newPackage.main = 'index.js';
+      newPackage.types = 'index.d.ts';
 
-  let newPackage = {
-    name,
-    version,
-    private,
-    author,
-    description,
-    // dependencies: natives,
-    // agora_electron: {
-    //   electron_version: '5.0.8',
-    //   prebuilt: true,
-    // },
-  };
-  await fs.writeFile(
-    path.join(BUILD_PATH, 'package.json'),
-    JSON.stringify(newPackage, null, 2),
-  );
-  return;
-}
+      // Takes externals from the webpack config and applies them
+      // to react-sdk package as peer dependencies
+      newPackage.peerDependencies = Object.keys(dependencies)
+        .filter((key) => Object.keys(webpackRsdkConfig.externals).includes(key))
+        .reduce((peerDependencies, key) => {
+          peerDependencies[key] = `^${dependencies[key].split('.')[0]}`;
+          return peerDependencies;
+        }, {});
+    }
 
-function build(cb) {
-  runCli('electron-builder build --config ./electron-builder.js', cb);
-}
+    if (process.env.TARGET === 'wsdk') {
+      newPackage.main = 'app-builder-web-sdk.umd2.js';
+      newPackage.types = 'index.d.ts';
+    }
 
-function electronDevServer(cb) {
-  const config = webpack(webpackConfig);
-  new WebpackDevServer(config, {
-    hot: true,
-  }).listen(webpackConfig.devServer.port, 'localhost', (err) => {
-    if (err) {
-      console.error(err);
-    } else {
-      cb();
+    await fs.writeFile(
+      path.join(BUILD_PATH, 'package.json'),
+      JSON.stringify(newPackage, null, 2),
+    );
+    return;
+  },
+  createBuildDirectory: () => {
+    return fs.mkdir(BUILD_PATH, {recursive: true});
+  },
+  typescript: (cb) => {
+    runCli(
+      'npx -p typescript tsc --project tsconfig_fpeApi.json --outFile ../Builds/fpe-api.d.ts',
+      () => cb(),
+    );
+  },
+  typescriptFix: () => {
+    return src('../Builds/fpe-api.d.ts')
+      .pipe(replace('"agora-rn-uikit"', '"agora-rn-uikit/src/index"'))
+      .pipe(dest('../Builds/'));
+  },
+  typescriptClean: () => {
+    return del([`${path.join(BUILD_PATH, '../', '/')}*.d.ts`], {force: true});
+  },
+  genTsDefs: (cb) => {
+    runCli(`mkdir -p ${TS_DEFS_BUILD_PATH} && cp ${BUILD_PATH}/index.d.ts ${TS_DEFS_BUILD_PATH}/index.d.ts`, cb);
+  },
+  useTsDefs: (cb) => {
+    runCli(`cp ${TS_DEFS_BUILD_PATH}/index.d.ts ${BUILD_PATH}/index.d.ts`, cb)
+  },
+  npmPack: (cb) => {
+    runCli(`cd ${BUILD_PATH} && npm pack`, cb)
+  }
+};
+
+const electron = {
+  webpack_renderer: (cb) => {
+    runCli('webpack --config webpack.renderer.config.js', cb);
+  },
+
+  webpack_main: (cb) => {
+    runCli('webpack --config ./webpack.main.config.js', cb);
+  },
+
+  build: (cb) => {
+    runCli('electron-builder build --config ./electron-builder.js', cb);
+  },
+
+  devServer: (cb) => {
+    const config = webpack(webpackConfig);
+    new WebpackDevServer(config, {
+      hot: true,
+    }).listen(webpackConfig.devServer.port, 'localhost', (err) => {
+      if (err) {
+        console.error(err);
+      } else {
+        cb();
+      }
+    });
+  },
+
+  start: (cb) => {
+    runCli('electron .', cb);
+  },
+};
+
+const reactSdk = {
+  webpack: (cb) => {
+    runCli('webpack --config ./webpack.rsdk.config.js', cb);
+  },
+  esbuild: (cb) => {
+    let outPath = '';
+    if (outPathArg != -1) {
+      outPath = ` --outpath ${process.argv[outPathArg+1]}`
     }
-  });
-}
+    let configTransformerPath = '';
+    const configTransformerPathArg = process.argv.indexOf('--configtransformerpath')
+    if (configTransformerPathArg != -1) {
+      configTransformerPath = ` --configtransformerpath ${process.argv[configTransformerPathArg+1]}`
+    }
+    let esbuildCmd = `go build -o ../esbuild-bin/rsdk ./esbuild.rsdk.go && ../esbuild-bin/rsdk${outPath}${configTransformerPath}`
+    console.log(esbuildCmd)
+    runCli(esbuildCmd, cb);
+  },
+  typescript: (cb) => {
+    runCli(
+      //'npx -p typescript tsc index.rsdk.tsx --declaration --emitDeclarationOnly --noResolve --outFile ../Builds/temp.d.ts',
+      'npx -p typescript tsc --project tsconfig_rsdk_index.json --outFile ../Builds/reactSdk.d.ts',
+      () => cb(),
+    );
+  },
+  typescriptFix: () => {
+    return src(['../Builds/fpe-api.d.ts', '../Builds/reactSdk.d.ts'])
+      .pipe(concat('index.d.ts'))
+      .pipe(
+        replace(
+          'declare module "index.rsdk"',
+          'declare module "agora-app-builder-sdk"',
+        ),
+      )
+      .pipe(replace("'fpe-api'", "'fpe-api/index'"))
+      .pipe(replace('"fpe-api"', '"fpe-api/index"'))
+      .pipe(header('// @ts-nocheck\n'))
+      .pipe(dest(BUILD_PATH));
+  }
+};
 
-function directory(){
-  return fs.mkdir(BUILD_PATH, {recursive: true});
-}
+const webSdk = {
+  webpack: (cb) => {
+    runCli('webpack --config ./webpack.wsdk.config.js', cb);
+  },
+  typescript: (cb) => {
+    runCli(
+      'npx -p typescript tsc --project tsconfig_wsdk_index.json --outFile ../Builds/webSdk.d.ts',
+      () => cb(),
+    );
+  },
+  typescriptFix: () => {
+    return src(['../Builds/fpe-api.d.ts', '../Builds/webSdk.d.ts'])
+      .pipe(concat('index.d.ts'))
+      .pipe(
+        replace(
+          'declare module "index.wsdk"',
+          'declare module "agora-app-builder-sdk"',
+        ),
+      )
+      .pipe(replace("'fpe-api'", "'fpe-api/index'"))
+      .pipe(replace('"fpe-api"', '"fpe-api/index"'))
+      .pipe(header('// @ts-nocheck\n'))
+      .pipe(dest(BUILD_PATH));
+  },
+  npmPack: (cb) => {
+    runCli('cd ../Builds/web-sdk && npm pack',cb)
+  }
+};
 
-function mainDev(cb) {
-  runCli('webpack --config ./webpack.main.config.js', cb);
-}
+const android = {
+  gradleBuildUnix: (cb) => {
+    runCli('cd android && ./gradlew assembleRelease', cb);
+  },
+  gradleBuildWin: (cb) => {
+    runCli('cd android && gradlew.bat assembleRelease', cb);
+  },
+  copyBuild: (cb) => {
+    fs.copyFile(
+      path.resolve(
+        'android',
+        'app',
+        'build',
+        'outputs',
+        'apk',
+        'release',
+        'app-release.apk',
+      ),
+      path.resolve(BUILD_PATH, `${config.PRODUCT_ID}.apk`),
+    )
+      .then(() => {
+        cb();
+      })
+      .catch((err) => {
+        cb(new Error('Error in copying build', err));
+      });
+  },
+};
 
-function start(cb) {
-  runCli('electron .', cb);
-}
+// electron
+module.exports.electron_build = series(
+  general.clean,
+  general.createBuildDirectory,
+  parallel(
+    electron.webpack_renderer,
+    electron.webpack_main,
+    general.packageJson,
+  ),
+  electron.build,
+);
+
+module.exports.electron_development = series(
+  general.clean,
+  general.createBuildDirectory,
+  electron.devServer,
+  electron.webpack_main,
+  electron.start,
+);
+
+// react-sdk
+module.exports.reactSdk = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.webpack,
+  general.typescript,
+  general.typescriptFix,
+  reactSdk.typescript,
+  reactSdk.typescriptFix,
+  general.typescriptClean,
+  general.npmPack,
+);
+
+// react-sdk-esbuild
+module.exports.reactSdkEsbuild = series (
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.esbuild,
+  general.typescript,
+  general.typescriptFix,
+  reactSdk.typescript,
+  reactSdk.typescriptFix,
+  general.typescriptClean,
+  general.npmPack,
+)
 
-module.exports.build = series(
-  clean,
-  directory,
-  parallel(renderer, main, packageJson),
-  build,
+// generate typescript definitions
+module.exports.makeRsdkTsDefs = series (
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.esbuild,
+  general.typescript,
+  general.typescriptFix,
+  reactSdk.typescript,
+  reactSdk.typescriptFix,
+  general.typescriptClean,
+  general.genTsDefs,
+)
+
+// react-sdk-esbuild with cached type definitions
+module.exports.reactSdkEsbuildCachedTsc = series (
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  reactSdk.esbuild,
+  general.useTsDefs,
+  general.npmPack,
+)
+
+// web-sdk
+module.exports.webSdk = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  parallel(
+    webSdk.webpack,
+    series(
+      general.typescript,
+      general.typescriptFix,
+      webSdk.typescript,
+      webSdk.typescriptFix,
+      general.typescriptClean,
+    ),
+  ),
+  general.npmPack,
+);
+
+module.exports.makeWsdkTsDefs = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  parallel(
+    webSdk.webpack,
+    series(
+      general.typescript,
+      general.typescriptFix,
+      webSdk.typescript,
+      webSdk.typescriptFix,
+      general.typescriptClean,
+    ),
+  ),
+  general.genTsDefs,
+);
+
+module.exports.webSdkCachedTsc = series(
+  general.clean,
+  general.createBuildDirectory,
+  general.packageJson,
+  parallel(
+    webSdk.webpack,
+    general.useTsDefs,
+  ),
+  general.npmPack,
 );
 
-module.exports.development = series(clean, directory , electronDevServer, mainDev, start);
+module.exports.androidUnix = series(
+  general.clean,
+  general.createBuildDirectory,
+  android.gradleBuildUnix,
+  android.copyBuild,
+);
+
+module.exports.androidWin = series(
+  general.clean,
+  general.createBuildDirectory,
+  android.gradleBuildWin,
+  android.copyBuild,
+);
+
+module.exports.test = series(
+  general.npmPack,
+  // general.typescript,
+  // general.typescriptFix,
+  // reactSdk.typescript,
+  // reactSdk.typescriptFix,
+  // webSdk.typescript,
+  // webSdk.typescriptFix,
+);

package/template/_gitignore

@@ -71,4 +71,7 @@ dist/
 #Electron cache
 .electron/
 .webpack/
-out/
+out/
+
+#FPE plugin folder
+template/test-fpe/*