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

package/template/tsconfig_fpeApi.json

@@ -0,0 +1,103 @@
+{
+  // --------------------------------------------------------
+  // Use with webpack loader
+  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // --------------------------------------------------------
+  // Use with typescript tsc command
+  "files":["./fpe-api/index.ts","./global.d.ts"],
+  // --------------------------------------------------------
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "esNext",
+      "DOM"
+    ] /* Specify library files to be included in the compilation. */,
+    "typeRoots": ["./global.d.ts"],
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "noResolve": true,
+    // "outDir": "dist" /* Redirect output structure to the directory. */,
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": false /* Do not emit outputs. */,
+    "noEmitOnError": false,
+    // "incremental": true,                   /* Enable incremental compilation */ // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    //"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+    /* Strict Type-Checking Options */
+    //"strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "resolveJsonModule": true,
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": ["./node_modules/agora-react-native-rtm/lib/typescript/src/RtmEngine"],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    //
+    //
+    // --------------------------------------------------------
+    // ---------------------CONFIG CHANGES---------------------
+    // --------------------------------------------------------
+    // Use with webpack loader
+    // "isolatedModules": true,
+    // "emitDeclarationOnly": false
+    // --------------------------------------------------------
+    // Use with typescript tsc command
+    "isolatedModules": false,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "paths": {
+      "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
+      "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
+      "react-native": ["react-native-web"],
+      "fpe-api": ["./fpe-api/index.ts"],
+      "fpe-api/install": ["./fpe-api/install.ts"],
+      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "./RtcContext": ["agora-rn-uikit/src/index"]
+    }
+    // --------------------------------------------------------
+  },
+  // "references": [{"path": "./fpe-api", "prepend": true}],
+  "exclude": [
+    //"node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ],
+  "include": [
+    "node_modules/agora"
+  ]
+}

package/template/tsconfig_rsdk_index.json

@@ -0,0 +1,105 @@
+{
+  // --------------------------------------------------------
+  // Use with webpack loader
+  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // --------------------------------------------------------
+  // Use with typescript tsc command
+  "files":["./src/SDKAppWrapper.tsx","./index.rsdk.tsx","./global.d.ts"],
+  // --------------------------------------------------------
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "esNext",
+      "DOM"
+    ] /* Specify library files to be included in the compilation. */,
+    "typeRoots": ["./global.d.ts"],
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "noResolve": true,
+    // "outDir": "dist" /* Redirect output structure to the directory. */,
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": false /* Do not emit outputs. */,
+    "noEmitOnError": false,
+    // "incremental": true,                   /* Enable incremental compilation */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    //"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+    /* Strict Type-Checking Options */
+    //"strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "noResolve": true /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "resolveJsonModule": true,
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": ["./node_modules/agora-react-native-rtm/lib/typescript/src/RtmEngine"],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    //
+    //
+    // --------------------------------------------------------
+    // ---------------------CONFIG CHANGES---------------------
+    // --------------------------------------------------------
+    // Use with webpack loader
+    // "isolatedModules": true,
+    // "emitDeclarationOnly": false
+    // --------------------------------------------------------
+    // Use with typescript tsc command
+    "isolatedModules": false,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "paths": {
+      "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
+      "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
+      "react-native": ["react-native-web"],
+      "fpe-api": ["./fpe-api/index.ts"],
+      "fpe-api/install": ["./fpe-api/install.ts"],
+      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "./RtcContext": ["agora-rn-uikit/src/index"]
+    }
+    // --------------------------------------------------------
+  },
+  // "references": [{"path": "./fpe-api", "prepend": true}],
+  "exclude": [
+    //"node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ],
+  "include": [
+    "node_modules/agora"
+  ]
+}

package/template/tsconfig_wsdk_index.json

@@ -0,0 +1,104 @@
+{
+  // --------------------------------------------------------
+  // Use with webpack loader
+  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // --------------------------------------------------------
+  // Use with typescript tsc command
+  "files":["./src/SDKAppWrapper.tsx","./index.wsdk.tsx","./global.d.ts"],
+  // --------------------------------------------------------
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "esNext",
+      "DOM"
+    ] /* Specify library files to be included in the compilation. */,
+    "typeRoots": ["./global.d.ts"],
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "noResolve": true,
+    // "outDir": "dist" /* Redirect output structure to the directory. */,
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": false /* Do not emit outputs. */,
+    "noEmitOnError": false,
+    // "incremental": true,                   /* Enable incremental compilation */ // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    //"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+    /* Strict Type-Checking Options */
+    //"strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "noResolve": true /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "resolveJsonModule": true,
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": ["./node_modules/agora-react-native-rtm/lib/typescript/src/RtmEngine"],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    //
+    //
+    // --------------------------------------------------------
+    // ---------------------CONFIG CHANGES---------------------
+    // --------------------------------------------------------
+    // Use with webpack loader
+    // "isolatedModules": true,
+    // "emitDeclarationOnly": false
+    // --------------------------------------------------------
+    // Use with typescript tsc command
+    "isolatedModules": false,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "paths": {
+      "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
+      "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
+      "react-native": ["react-native-web"],
+      "fpe-api": ["./fpe-api/index.ts"],
+      "fpe-api/install": ["./fpe-api/install.ts"],
+      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "./RtcContext": ["agora-rn-uikit/src/index"]
+    }
+    // --------------------------------------------------------
+  },
+  // "references": [{"path": "./fpe-api", "prepend": true}],
+  "exclude": [
+    //"node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ],
+  "include": [
+    "node_modules/agora"
+  ]
+}

package/template/webpack.commons.js

@@ -1,35 +1,44 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and
+documentation (the “Materials”) are owned by Agora Lab, Inc. and its licensors.
+The Materials may not be accessed, used, modified, or distributed for any
+purpose without a license from Agora Lab, Inc. Use without a license or in
+violation of any license terms and conditions (including use for any purpose
+competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 /**
- * Common Webpack configuration to be used across web and electron's renderer process
+ * Common Webpack configuration to be used across web and electron's renderer
+ * process
  */
-
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const isDevelopment = process.env.NODE_ENV === 'development';
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const configVars = require('./configTransform');
+const getFpePath = require('./fpe.config');
 
 const isElectron = ['linux', 'windows', 'mac'].includes(process.env.TARGET);
+const isReactSdk = process.env.TARGET === 'rsdk';
+const isWebSdk = process.env.TARGET === 'wsdk';
+const isSdk = isReactSdk || isWebSdk;
 
 module.exports = {
   // Adds React Refresh webpack plugin for webpack dev server hmr
   plugins: [
     // Using html webpack plugin to utilize our index.html
-    new HtmlWebpackPlugin({
-      title: configVars['$config.APP_NAME'],
-      template: isElectron ? 'electron/index.html' : 'web/index.html',
-    }),
+    !isSdk &&
+      new HtmlWebpackPlugin({
+        title: configVars['$config.APP_NAME'],
+        template: isElectron
+          ? 'electron/index.html'
+          : 'web/index.html',
+      }),
     isDevelopment &&
+      !isSdk &&
       new ReactRefreshWebpackPlugin({
         overlay: false,
       }),
@@ -39,10 +48,21 @@ module.exports = {
       // Using react-native web to translate UI
       'react-native$': 'react-native-web',
       // Using rtm bridge to translate React Native RTM SDK calls to web SDK calls
-      'agora-react-native-rtm': path.join(__dirname, 'bridge/rtm/web/index.ts'),
+      'agora-react-native-rtm$': path.join(
+        __dirname,
+        'bridge/rtm/web/index.ts',
+      ),
       // Using rtc bridge to translate React Native RTC SDK calls to web SDK calls for web and linux
       // Using rtc bridge to translate React Native RTC SDK calls to electron SDK calls for windows and mac
       'react-native-agora$': path.join(__dirname, 'bridge/rtc/webNg/index.ts'),
+      'fpe-api/install': path.join(__dirname, 'fpe-api/install.ts'),
+      'fpe-api': path.join(__dirname, 'fpe-api/index.ts'),
+      'fpe-implementation': path.join(__dirname, 'fpe-implementation/index.ts'),
+      'test-fpe': path.join(__dirname, getFpePath()),
+      'agora-react-native-rtm/lib/typescript/src': path.join(
+        __dirname,
+        'bridge/rtm/web/index.ts',
+      ),
     },
     // Adds platform specific extensions and OS specific extensions
     // .web.tsx works for web specific code
@@ -53,6 +73,10 @@ module.exports = {
       `.${process.env.TARGET}.ts`,
       isElectron && '.electron.tsx',
       isElectron && '.electron.ts',
+      isSdk && '.sdk.ts',
+      isSdk && '.sdk.tsx',
+      isSdk && '.web.ts',
+      isSdk && '.web.tsx',
       '.tsx',
       '.ts',
       '.jsx',
@@ -61,7 +85,7 @@ module.exports = {
     ].filter(Boolean),
   },
   // Enable source maps during development
-  devtool: isDevelopment ? 'cheap-module-eval-source-map' : undefined,
+  // devtool: isDevelopment ? 'eval-cheap-module-source-map' : undefined,
   module: {
     rules: [
       {
@@ -89,14 +113,14 @@ module.exports = {
                     node: 'current',
                   },
                 },
-              ].filter(Boolean),
+              ],
             ],
             plugins: [
               // Adds support for class properties
               ['transform-define', configVars],
               '@babel/plugin-proposal-optional-chaining',
               '@babel/plugin-proposal-class-properties',
-              isDevelopment && require.resolve('react-refresh/babel'),
+              isDevelopment && !isSdk && require.resolve('react-refresh/babel'),
             ].filter(Boolean),
           },
         },

package/template/webpack.main.config.js

@@ -14,6 +14,7 @@
 const isDevelopment = process.env.NODE_ENV === 'development';
 const path = require('path');
 const webpack = require('webpack');
+
 module.exports = {
   // Main entry point for the web application
   mode: isDevelopment ? 'development' : 'production',
@@ -26,7 +27,7 @@ module.exports = {
   target: 'electron-main',
   output: {
     filename: 'index.js',
-    path: path.resolve(__dirname, '.electron'),
+    path: path.resolve(__dirname, '../Builds/.electron'),
   },
   plugins: [
     new webpack.DefinePlugin({

package/template/webpack.renderer.config.js

@@ -32,7 +32,7 @@ module.exports = merge(commons, {
   // },
   output: {
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, '.electron'),
+    path: path.resolve(__dirname, `../Builds/.electron`),
   },
   plugins: [
     isDevelopment && new webpack.HotModuleReplacementPlugin(), // to enable HMR for webpack-dev-server

package/template/webpack.rsdk.config.js

@@ -0,0 +1,33 @@
+const commons = require('./webpack.commons');
+const path = require('path');
+const {merge} = require('webpack-merge');
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+module.exports = merge(commons, {
+  // Enable optimizations in production
+  mode: isDevelopment ? 'development' : 'production',
+  // externals: [
+  //   nodeExternals({allowlist: [/agora.*/, /fpe.*/]}),
+  // ],
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-router': 'react-router',
+    'react-router-dom': 'react-router-dom',
+    '@apollo/client': '@apollo/client',
+  },
+  // Main entry point for the web application
+  entry: {
+    main: './index.rsdk.tsx',
+  },
+  target: 'node',
+  output: {
+    path: path.resolve(__dirname, `../Builds/react-sdk`),
+    filename: 'index.js',
+    library:{
+      type: 'commonjs2',
+    } 
+  },
+  // watch: isDevelopment
+});

package/template/webpack.ts.config.js

@@ -0,0 +1,89 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+const commons = require('./webpack.commons');
+const {merge} = require('webpack-merge');
+const path = require('path');
+const configVars = require('./configTransform');
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+module.exports = merge(commons, {
+  // Enable optimizations in production
+  mode: isDevelopment ? 'development' : 'production',
+  // Main entry point for the web application
+  module:{
+    rules:[
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        // loader: 'ts-loader',
+        exclude: /node_modules|\.d\.ts$/,
+        options: {
+          configFile: 'tsconfig.json',
+          ignoreDiagnostics: [2339,2554,2539,1005]
+          // ignoreDiagnostics: [2554,2539,2339,2551,2769,2305,2614,2322,2362,2369,2698]
+        }
+      },
+      {
+        // Use babel to transpile all js, ts, jsx and tsx files
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/, // don't transpile the files under node_modules
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true, // enables caching in babel
+            configFile: false,
+            presets: [
+              '@babel/preset-react', // transforms tsx into normal ts
+              [
+                '@babel/preset-typescript', // transforms ts into js
+                {
+                  allExtensions: true,
+                  isTSX: true,
+                },
+              ],
+              [
+                '@babel/preset-env', // smartly transforms js into es5-es6
+                {
+                  targets: {
+                    node: 'current',
+                  },
+                },
+              ],
+            ],
+            plugins: [
+              // Adds support for class properties
+              ['transform-define', configVars],
+              '@babel/plugin-proposal-optional-chaining',
+              '@babel/plugin-proposal-class-properties',
+              isDevelopment && !isSdk && require.resolve('react-refresh/babel'),
+            ].filter(Boolean),
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
+    ]
+  },
+  entry: {
+    main: './fpe-api/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, `../Builds/ts`),
+  },
+});

package/template/webpack.web.config.js

@@ -11,6 +11,7 @@
 */
 const commons = require('./webpack.commons');
 const {merge} = require('webpack-merge');
+const path = require('path');
 
 const isDevelopment = process.env.NODE_ENV === 'development';
 
@@ -21,10 +22,16 @@ module.exports = merge(commons, {
   entry: {
     main: './index.web.js',
   },
+  output: {
+    path: path.resolve(__dirname, `../Builds/web`),
+  },
   // Webpack dev server config
   devServer: {
     port: 9000,
     historyApiFallback: true, // Support for react-router
-    contentBase: './',
+    static: './', // same as contentBase from webpack v4 config
+    client:{
+      overlay: false
+    }
   },
 });

package/template/webpack.wsdk.config.js

@@ -0,0 +1,34 @@
+const commons = require('./webpack.commons');
+const {merge} = require('webpack-merge');
+const path = require('path');
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+const libraryTargets = ['commonjs2', 'var','umd2'];
+
+const baseConfig = {
+  // Enable optimizations in production
+  mode: isDevelopment ? 'development' : 'production',
+  // Main entry point for the web application
+  entry: {
+    main: './index.wsdk.tsx',
+  },
+  output: {
+    path: path.resolve(__dirname, `../Builds/web-sdk`),
+    filename: 'app-builder-web-sdk.js',
+    library: {
+      name: 'AgoraAppBuilder',
+    },
+  },
+  watch: isDevelopment
+};
+
+const mappedConfigs = libraryTargets.map((target, _) => {
+  let newConfig = baseConfig;
+  newConfig.output.library.type = target;
+  newConfig.output.filename = `app-builder-web-sdk.${target}.js`;
+  newConfig = merge(commons, newConfig);
+  return newConfig;
+});
+
+module.exports = mappedConfigs;