refactor(many): remove in-browser compilation support (#4317)

This removes in-browser compilation support from Stencil. Doing so
involves a number of changes, including:

- removing the rollup plugin which polyfills node.js built-in modules
  (fs, path, etc) for use in the browser
- deleting the code for the polyfills themselves (found in
  src/compiler/sys/modules)
- miscellaneous refactors related to tests for browser vs node
  environment as well as testing

There will be more follow-up work to fully address this stuff, but this
makes the minimal change to remove browser support for Stencil.

Author: alicewriteswrongs

jest.config.js

@@ -3,13 +3,13 @@ module.exports = {
   moduleNameMapper: {
     '@app-data': '<rootDir>/internal/app-data/index.cjs',
     '@app-globals': '<rootDir>/internal/app-globals/index.cjs',
-    '@compiler-deps': '<rootDir>/src/compiler/sys/modules/compiler-deps.ts',
     '@platform': '<rootDir>/internal/testing/index.js',
     '@runtime': '<rootDir>/internal/testing/index.js',
     '@stencil/core/cli': '<rootDir>/cli/index.js',
     '@stencil/core/compiler': '<rootDir>/compiler/stencil.js',
     '@stencil/core/mock-doc': '<rootDir>/mock-doc/index.cjs',
     '@stencil/core/testing': '<rootDir>/testing/index.js',
+    '@sys-api-node': '<rootDir>/sys/node/index.js',
     '@utils': '<rootDir>/src/utils',
     '^typescript$': '<rootDir>/scripts/build/typescript-modified-for-jest.js',
   },

package-lock.json

@@ -70,6 +70,7 @@
     "@types/inquirer": "^7.3.1",
     "@types/jest": "^27.0.3",
     "@types/listr": "^0.14.4",
+    "@types/mock-fs": "^4.13.1",
     "@types/node": "^20.1.1",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
@@ -106,6 +107,7 @@
     "merge-source-map": "^1.1.0",
     "mime-db": "^1.46.0",
     "minimatch": "5.1.6",
+    "mock-fs": "^5.2.0",
     "node-fetch": "3.3.1",
     "open": "^9.0.0",
     "open-in-editor": "2.2.0",

package.json

@@ -8,14 +8,13 @@ import type { OutputChunk, RollupOptions, RollupWarning, TransformResult } from
 import sourcemaps from 'rollup-plugin-sourcemaps';
 
 import { getBanner } from '../utils/banner';
+import { NODE_BUILTINS } from '../utils/constants';
 import type { BuildOptions } from '../utils/options';
 import { writePkgJson } from '../utils/write-pkg-json';
 import { aliasPlugin } from './plugins/alias-plugin';
-import { inlinedCompilerDepsPlugin } from './plugins/inlined-compiler-deps-plugin';
 import { parse5Plugin } from './plugins/parse5-plugin';
 import { replacePlugin } from './plugins/replace-plugin';
 import { sizzlePlugin } from './plugins/sizzle-plugin';
-import { sysModulesPlugin } from './plugins/sys-modules-plugin';
 import { terserPlugin } from './plugins/terser-plugin';
 import { typescriptSourcePlugin } from './plugins/typescript-source-plugin';
 
@@ -67,6 +66,7 @@ export async function compiler(opts: BuildOptions) {
   const rollupWatchPath = join(opts.nodeModulesDir, 'rollup', 'dist', 'es', 'shared', 'watch.js');
   const compilerBundle: RollupOptions = {
     input: join(inputDir, 'index.js'),
+    external: NODE_BUILTINS,
     output: {
       format: 'cjs',
       file: join(opts.output.compilerDir, compilerFileName),
@@ -154,14 +154,11 @@ export async function compiler(opts: BuildOptions) {
           };
         },
       },
-      inlinedCompilerDepsPlugin(opts, inputDir),
       parse5Plugin(opts),
       sizzlePlugin(opts),
       aliasPlugin(opts),
-      sysModulesPlugin(inputDir),
       rollupNodeResolve({
         mainFields: ['module', 'main'],
-        preferBuiltins: false,
       }),
       rollupCommonjs({
         transformMixedEsModules: false,

scripts/bundles/compiler.ts

@@ -15,7 +15,6 @@ export function aliasPlugin(opts: BuildOptions): Plugin {
     ['@hydrate-factory', '@stencil/core/hydrate-factory'],
     ['@stencil/core/mock-doc', '@stencil/core/mock-doc'],
     ['@stencil/core/testing', '@stencil/core/testing'],
-    ['@sys-api-node', './index.js'],
     ['@dev-server-process', './server-process.js'],
   ]);
 
@@ -54,6 +53,9 @@ export function aliasPlugin(opts: BuildOptions): Plugin {
       if (id === '@environment') {
         return join(opts.buildDir, 'compiler', 'sys', 'environment.js');
       }
+      if (id === '@sys-api-node') {
+        return join(opts.buildDir, 'sys', 'node', 'index.js');
+      }
       if (helperResolvers.has(id)) {
         return join(opts.bundleHelpersDir, `${id}.js`);
       }

scripts/bundles/plugins/alias-plugin.ts

@@ -6,6 +6,7 @@ import type { RollupOptions } from 'rollup';
 import webpack, { Configuration } from 'webpack';
 
 import { getBanner } from '../utils/banner';
+import { NODE_BUILTINS } from '../utils/constants';
 import type { BuildOptions } from '../utils/options';
 import { writePkgJson } from '../utils/write-pkg-json';
 import { aliasPlugin } from './plugins/alias-plugin';
@@ -38,7 +39,7 @@ export async function sysNode(opts: BuildOptions) {
       preferConst: true,
       freeze: false,
     },
-    external: ['child_process', 'crypto', 'events', 'https', 'path', 'readline', 'os', 'util'],
+    external: NODE_BUILTINS,
     plugins: [
       relativePathPlugin('glob', './glob.js'),
       relativePathPlugin('graceful-fs', './graceful-fs.js'),
@@ -69,7 +70,7 @@ export async function sysNode(opts: BuildOptions) {
       preferConst: true,
       freeze: false,
     },
-    external: ['child_process', 'crypto', 'events', 'https', 'path', 'readline', 'os', 'util'],
+    external: NODE_BUILTINS,
     plugins: [
       {
         name: 'sysNodeWorkerAlias',
@@ -82,6 +83,7 @@ export async function sysNode(opts: BuildOptions) {
           }
         },
       },
+      relativePathPlugin('@sys-api-node', './index.js'),
       rollupResolve({
         preferBuiltins: true,
       }),

scripts/bundles/plugins/inlined-compiler-deps-plugin.ts

@@ -3,6 +3,7 @@ import { dirname, join, relative } from 'path';
 import { rollup } from 'rollup';
 import ts, { ModuleResolutionKind, ScriptTarget } from 'typescript';
 
+import { NODE_BUILTINS } from '../utils/constants';
 import { BuildOptions, getOptions } from '../utils/options';
 import { PackageData } from '../utils/write-pkg-json';
 
@@ -335,8 +336,11 @@ async function validateModuleTreeshake(opts: BuildOptions, moduleName: string, e
   const outputFile = join(opts.scriptsBuildDir, `treeshake_${moduleName}.js`);
 
   const bundle = await rollup({
+    external: NODE_BUILTINS,
     input: virtualInputId,
-    treeshake: true,
+    treeshake: {
+      moduleSideEffects: false,
+    },
     plugins: [
       {
         name: 'stencilResolver',

scripts/bundles/plugins/sys-modules-plugin.ts

@@ -1,5 +1,5 @@
 /**
- * Node builtin modules as of v14.5.0
+ * Node built-ins that we mark as external when building Stencil
  */
 export const NODE_BUILTINS = [
   '_http_agent',
@@ -58,9 +58,3 @@ export const NODE_BUILTINS = [
   'worker_threads',
   'zlib',
 ];
-
-export default class Module {
-  static get builtinModules() {
-    return NODE_BUILTINS;
-  }
-}

scripts/bundles/sys-node.ts

@@ -1,4 +1,5 @@
-import { path } from '../../../compiler';
+import path from 'path';
+
 import { BuildOptions, getOptions } from '../options';
 import * as Vermoji from '../vermoji';
 

scripts/test/validate-build.ts

@@ -1,6 +1,5 @@
 import { hasError, isFunction, shouldIgnoreError } from '@utils';
 
-import { createLogger } from '../compiler/sys/logger/console-logger';
 import type * as d from '../declarations';
 import { ValidatedConfig } from '../declarations';
 import { createConfigFlags } from './config-flags';
@@ -114,13 +113,14 @@ export const runTask = async (
   coreCompiler: CoreCompiler,
   config: d.Config,
   task: d.TaskCommand,
-  sys?: d.CompilerSystem
+  sys: d.CompilerSystem
 ): Promise<void> => {
-  const logger = config.logger ?? createLogger();
   const flags = createConfigFlags(config.flags ?? { task });
-  config.logger = logger;
   config.flags = flags;
-  config.sys = sys ?? config.sys ?? coreCompiler.createSystem({ logger });
+
+  if (!config.sys) {
+    config.sys = sys;
+  }
   const strictConfig: ValidatedConfig = coreCompiler.validateConfig(config, {}).config;
 
   switch (task) {
@@ -134,7 +134,7 @@ export const runTask = async (
 
     case 'generate':
     case 'g':
-      await taskGenerate(coreCompiler, strictConfig);
+      await taskGenerate(strictConfig);
       break;
 
     case 'help':