feat(compile): browser compile

ionic-team · Jul 23, 2019 · 33b11a4 · 33b11a4
1 parent 0478457
commit 33b11a4
Show file tree

Hide file tree

Showing 96 changed files with 2,220 additions and 1,470 deletions.
diff --git a/package.json b/package.json
@@ -98,7 +98,6 @@
     "jest-environment-node": "^24.0.0",
     "listr": "0.14.3",
     "magic-string": "^0.25.2",
-    "memfs": "^2.15.5",
     "mime-db": "1.40.0",
     "minimatch": "3.0.4",
     "mkdirp": "^0.5.1",

diff --git a/scripts/build-compiler.js b/scripts/build-compiler.js
@@ -3,13 +3,22 @@ const path = require('path');
 const rollup = require('rollup');
 const rollupResolve = require('rollup-plugin-node-resolve');
 const rollupCommonjs = require('rollup-plugin-commonjs');
-const { run, transpile, updateBuildIds, relativeResolve } = require('./script-utils');
+const { run, transpile, updateBuildIds } = require('./script-utils');
 const { urlPlugin } = require('./plugin-url');
+const buildPolyfills = require('./build-polyfills');
 
-
-const DIST_DIR = path.join(__dirname, '..', 'dist');
+const ROOT_DIR = path.join(__dirname, '..');
+const DIST_DIR = path.join(ROOT_DIR, 'dist');
 const TRANSPILED_DIR = path.join(DIST_DIR, 'transpiled-compiler');
-const INPUT_FILE = path.join(TRANSPILED_DIR, 'compiler', 'index.js');
+const COMPILER_INPUT_FILE = path.join(TRANSPILED_DIR, 'compiler', 'index.js');
+
+const INTERNAL_CLIENT_INPUT = path.join(TRANSPILED_DIR, 'client', 'index.js');
+const INTERNAL_CLIENT_CONDITIONALS_INPUT = path.join(TRANSPILED_DIR, 'compiler', 'browser', 'build-conditionals-client.js');
+const INTERNAL_CLIENT_DIST_DIR = path.join(ROOT_DIR, 'internal', 'client');
+
+const BROWSER_COMPILER_INPUT_FILE = path.join(TRANSPILED_DIR, 'compiler', 'browser', 'index.js');
+const BROWSER_COMPILER_DIST_FILE = path.join(ROOT_DIR, 'compiler', 'stencil.js');
+
 const COMPILER_DIST_DIR = path.join(DIST_DIR, 'compiler');
 const COMPILER_DIST_FILE = path.join(COMPILER_DIST_DIR, 'index.js');
 const UTILS_DIST_DIR = path.join(DIST_DIR, 'utils');
@@ -19,27 +28,25 @@ const DECLARATIONS_DST_DIR = path.join(DIST_DIR, 'declarations');
 
 async function bundleCompiler() {
   const rollupBuild = await rollup.rollup({
-    input: INPUT_FILE,
+    input: COMPILER_INPUT_FILE,
     external: [
       'readline',
       'typescript'
     ],
     plugins: [
-      (() => {
-        return {
-          resolveId(id) {
-            if (id === '@build-conditionals') {
-              return path.join(TRANSPILED_DIR, 'compiler', 'app-core', 'build-conditionals.js');
-            }
-            if (id === '@utils') {
-              return path.join(TRANSPILED_DIR, 'utils', 'index.js');
-            }
-            if (id === 'path') {
-              return path.join(__dirname, 'helpers', 'path.js');
-            }
+      {
+        resolveId(importee) {
+          if (importee === '@build-conditionals') {
+            return path.join(TRANSPILED_DIR, 'compiler', 'app-core', 'build-conditionals.js');
+          }
+          if (importee === '@utils') {
+            return path.join(TRANSPILED_DIR, 'utils', 'index.js');
+          }
+          if (importee === 'path') {
+            return path.join(__dirname, 'helpers', 'path.js');
           }
         }
-      })(),
+      },
       urlPlugin(),
       rollupResolve({
         preferBuiltins: true
@@ -56,7 +63,7 @@ async function bundleCompiler() {
   });
 
   // copy over all the .d.ts file too
-  await fs.copy(path.dirname(INPUT_FILE), COMPILER_DIST_DIR, {
+  await fs.copy(path.dirname(COMPILER_INPUT_FILE), COMPILER_DIST_DIR, {
     filter: src => {
       return src.indexOf('.js') === -1 && src.indexOf('.spec.') === -1;
     }
@@ -80,11 +87,117 @@ async function bundleCompiler() {
 }
 
 
+async function bundleInternalClient() {
+  const transpiledPolyfillsDir = path.join(TRANSPILED_DIR, 'client', 'polyfills');
+  const outputPolyfillsDir = path.join(INTERNAL_CLIENT_DIST_DIR, 'polyfills');
+  await buildPolyfills(transpiledPolyfillsDir, outputPolyfillsDir);
+
+  const rollupBuild = await rollup.rollup({
+    input: {
+      'index': INTERNAL_CLIENT_INPUT,
+      'build-conditionals': INTERNAL_CLIENT_CONDITIONALS_INPUT
+    },
+
+    plugins: [
+      {
+        resolveId(importee) {
+          if (importee === '@build-conditionals') {
+            return {
+              id: '@stencil/core/internal/client/build-conditionals',
+              external: true
+            }
+          }
+          if (importee === '@platform') {
+            return path.join(TRANSPILED_DIR, 'client', 'index.js');
+          }
+          if (importee === '@runtime') {
+            return path.join(TRANSPILED_DIR, 'runtime', 'index.js');
+          }
+          if (importee === '@utils') {
+            return path.join(TRANSPILED_DIR, 'utils', 'index.js');
+          }
+        }
+      }
+    ],
+    onwarn: (message) => {
+      if (message.code === 'CIRCULAR_DEPENDENCY') return;
+      console.error(message);
+    }
+  });
+
+  const { output } = await rollupBuild.generate({
+    format: 'esm',
+    dir: INTERNAL_CLIENT_DIST_DIR,
+    entryFileNames: '[name].mjs',
+    chunkFileNames: '[name].stencil-client.mjs'
+  });
+
+  await fs.ensureDir(INTERNAL_CLIENT_DIST_DIR);
+
+  output.forEach(o => {
+    const outputFilePath = path.join(INTERNAL_CLIENT_DIST_DIR, o.fileName);
+    const outputText = updateBuildIds(o.code);
+    fs.writeFileSync(outputFilePath, outputText);
+  });
+}
+
+
+async function bundleBrowserCompiler() {
+  const rollupBuild = await rollup.rollup({
+    input: BROWSER_COMPILER_INPUT_FILE,
+
+    plugins: [
+      {
+        resolveId(importee) {
+          if (importee === '@build-conditionals') {
+            return path.join(TRANSPILED_DIR, 'compiler', 'app-core', 'build-conditionals.js');
+          }
+          if (importee === '@utils') {
+            return path.join(TRANSPILED_DIR, 'utils', 'index.js');
+          }
+          if (importee === 'path') {
+            return require.resolve('path-browserify');
+          }
+          if (importee === 'typescript') {
+            return path.join(TRANSPILED_DIR, 'sys', 'browser', 'browser-typescript.js');
+          }
+        }
+      },
+      urlPlugin(),
+      rollupResolve({
+        preferBuiltins: true
+      }),
+      rollupCommonjs({
+        ignore: ['path'],
+        ignoreGlobal: true
+      })
+    ],
+    onwarn: (message) => {
+      if (message.code === 'CIRCULAR_DEPENDENCY') return;
+      console.error(message);
+    }
+  });
+
+  const { output } = await rollupBuild.generate({
+    format: 'iife',
+    file: BROWSER_COMPILER_DIST_FILE,
+    output: {
+      name: 'stencil'
+    },
+    intro: fs.readFileSync(path.resolve(__dirname, 'helpers', 'browser-intro.js'), 'utf8')
+  });
+
+  const outputText = updateBuildIds(output[0].code);
+
+  await fs.ensureDir(path.dirname(BROWSER_COMPILER_DIST_FILE));
+  await fs.writeFile(BROWSER_COMPILER_DIST_FILE, outputText);
+}
+
+
 async function buildUtils() {
   const build = await rollup.rollup({
     input: path.join(TRANSPILED_DIR, 'utils', 'index.js'),
     plugins: [
-
       rollupResolve({
         preferBuiltins: true
       }),
@@ -114,7 +227,9 @@ run(async () => {
 
   await Promise.all([
     buildUtils(),
-    bundleCompiler()
+    bundleCompiler(),
+    bundleBrowserCompiler(),
+    bundleInternalClient()
   ]);
 
   await fs.remove(TRANSPILED_DIR);

diff --git a/scripts/build-sys-browser.js b/scripts/build-sys-browser.js