Implement support for classic scripts and automatic module/nomodule

flow-libs/posthtml-parser.js.flow

@@ -17,6 +17,7 @@ declare module 'posthtml-parser' {
     options?: {
       lowerCaseAttributeNames?: boolean,
       lowerCaseTags?: boolean,
+      sourceLocations?: boolean,
       ...
     }
   ) => PostHTMLNode;

flow-libs/posthtml.js.flow

@@ -11,6 +11,11 @@ declare module 'posthtml' {
     tag: string,
     attrs?: {[string]: string, ...},
     content?: Array<string>,
+    location?: {
+       start: {|line: number, column: number|},
+       end: {|line: number, column: number|},
+       ...
+     },
     ...
   };
 
@@ -26,7 +31,7 @@ declare module 'posthtml' {
     ...
   };
 
-  declare var walk: (fn: (node: PostHTMLNode) => PostHTMLNode) => void;
+  declare var walk: (fn: (node: PostHTMLNode) => PostHTMLNode | PostHTMLNode[]) => void;
   declare var process: (
     tree: PostHTMLTree | string,
     options: ?PostHTMLOptions,

packages/core/core/src/Environment.js

@@ -13,10 +13,12 @@ export function createEnvironment({
   engines,
   includeNodeModules,
   outputFormat,
+  sourceType,
   shouldOptimize = false,
   isLibrary = false,
   shouldScopeHoist = false,
   sourceMap,
+  loc,
 }: EnvironmentOptions = {}): Environment {
   if (context == null) {
     if (engines?.node) {
@@ -84,10 +86,12 @@ export function createEnvironment({
     engines,
     includeNodeModules,
     outputFormat,
+    sourceType: sourceType ?? 'module',
     isLibrary,
     shouldOptimize,
     shouldScopeHoist,
     sourceMap,
+    loc,
   };
 
   res.id = getEnvironmentHash(res);
@@ -118,6 +122,7 @@ function getEnvironmentHash(env: Environment): string {
       env.engines,
       env.includeNodeModules,
       env.outputFormat,
+      env.sourceType,
       env.isLibrary,
       env.shouldScopeHoist,
       env.sourceMap,

packages/core/core/src/applyRuntimes.js

@@ -26,6 +26,7 @@ import {PluginLogger} from '@parcel/logger';
 import {hashString} from '@parcel/hash';
 import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 import {dependencyToInternalDependency} from './public/Dependency';
+import {mergeEnvironments} from './Environment';
 import createAssetGraphRequest from './requests/AssetGraphRequest';
 import {createDevDependency, runDevDepRequest} from './requests/DevDepRequest';
 
@@ -77,7 +78,13 @@ export default async function applyRuntimes({
 
         if (applied) {
           let runtimeAssets = Array.isArray(applied) ? applied : [applied];
-          for (let {code, dependency, filePath, isEntry} of runtimeAssets) {
+          for (let {
+            code,
+            dependency,
+            filePath,
+            isEntry,
+            env,
+          } of runtimeAssets) {
             let sourceName = path.join(
               path.dirname(filePath),
               `runtime-${hashString(code)}.${bundle.type}`,
@@ -86,7 +93,7 @@ export default async function applyRuntimes({
             let assetGroup = {
               code,
               filePath: sourceName,
-              env: bundle.env,
+              env: mergeEnvironments(bundle.env, env),
               // Runtime assets should be considered source, as they should be
               // e.g. compiled to run in the target environment
               isSource: true,

packages/core/core/src/public/Environment.js

@@ -2,10 +2,13 @@
 import type {
   Environment as IEnvironment,
   EnvironmentContext,
+  EnvironmentFeature,
   Engines,
   OutputFormat,
   PackageName,
   VersionMap,
+  SourceLocation,
+  SourceType,
   TargetSourceMapOptions,
 } from '@parcel/types';
 import type {Environment as InternalEnvironment} from '../types';
@@ -45,17 +48,41 @@ const ALL_BROWSERS = [
   'kaios',
 ];
 
-const ESMODULE_BROWSERS = {
-  edge: '16',
-  firefox: '60',
-  chrome: '61',
-  safari: '11',
-  opera: '48',
-  ios: '11',
-  android: '76',
-  and_chr: '76',
-  and_ff: '68',
-  samsung: '8.2',
+const supportData = {
+  esmodules: {
+    edge: '16',
+    firefox: '60',
+    chrome: '61',
+    safari: '11',
+    opera: '48',
+    ios: '11',
+    android: '76',
+    and_chr: '76',
+    and_ff: '68',
+    samsung: '8.2',
+  },
+  'dynamic-import': {
+    edge: '76',
+    firefox: '67',
+    chrome: '63',
+    safari: '11.1',
+    opera: '50',
+    ios: '11.3',
+    android: '63',
+    and_chr: '63',
+    and_ff: '67',
+    samsung: '8',
+  },
+  'worker-module': {
+    edge: '80',
+    chrome: '80',
+    opera: '67',
+    android: '81',
+    and_chr: '86',
+  },
+  'service-worker-module': {
+    // TODO: Safari 14.1??
+  },
 };
 
 const internalEnvironmentToEnvironment: WeakMap<
@@ -110,6 +137,10 @@ export default class Environment implements IEnvironment {
     return this.#environment.outputFormat;
   }
 
+  get sourceType(): ?SourceType {
+    return this.#environment.sourceType;
+  }
+
   get isLibrary(): boolean {
     return this.#environment.isLibrary;
   }
@@ -126,6 +157,10 @@ export default class Environment implements IEnvironment {
     return this.#environment.sourceMap;
   }
 
+  get loc(): ?SourceLocation {
+    return this.#environment.loc;
+  }
+
   isBrowser(): boolean {
     return BROWSER_ENVS.has(this.#environment.context);
   }
@@ -146,7 +181,10 @@ export default class Environment implements IEnvironment {
     return WORKER_ENVS.has(this.#environment.context);
   }
 
-  matchesEngines(minVersions: VersionMap): boolean {
+  matchesEngines(
+    minVersions: VersionMap,
+    defaultValue?: boolean = false,
+  ): boolean {
     // Determine if the environment matches some minimum version requirements.
     // For browsers, we run a browserslist query with and without the minimum
     // required browsers and compare the lists. For node, we just check semver.
@@ -159,18 +197,30 @@ export default class Environment implements IEnvironment {
 
       // If outputting esmodules, exclude browsers without support.
       if (this.outputFormat === 'esmodule') {
-        browsers = [...browsers, ...getExcludedBrowsers(ESMODULE_BROWSERS)];
+        browsers = [...browsers, ...getExcludedBrowsers(supportData.esmodules)];
       }
 
       let matchedBrowsers = browserslist(browsers);
       let minBrowsers = getExcludedBrowsers(minVersions);
       let withoutMinBrowsers = browserslist([...browsers, ...minBrowsers]);
       return matchedBrowsers.length === withoutMinBrowsers.length;
-    } else if (this.isNode() && this.engines.node != null && minVersions.node) {
-      return !semver.intersects(`< ${minVersions.node}`, this.engines.node);
+    } else if (this.isNode() && this.engines.node != null) {
+      return (
+        minVersions.node != null &&
+        !semver.intersects(`< ${minVersions.node}`, this.engines.node)
+      );
+    }
+
+    return defaultValue;
+  }
+
+  supports(feature: EnvironmentFeature, defaultValue?: boolean): boolean {
+    let engines = supportData[feature];
+    if (!engines) {
+      throw new Error('Unknown environment feature: ' + feature);
     }
 
-    return false;
+    return this.matchesEngines(engines, defaultValue);
   }
 }
 

packages/core/core/src/public/Symbols.js

@@ -70,7 +70,7 @@ export class AssetSymbols implements IAssetSymbols {
 
   exportSymbols(): Iterable<ISymbol> {
     // $FlowFixMe
-    return this.#value.symbols.keys();
+    return this.#value.symbols?.keys() ?? [];
   }
   // $FlowFixMe
   [Symbol.iterator]() {

packages/core/core/src/requests/TargetRequest.js

@@ -387,7 +387,7 @@ export class TargetResolver {
           let config = browserslist.parseConfig(contents);
           let browserslistBrowsers = config[env] || config.defaults;
 
-          if (browserslistBrowsers) {
+          if (browserslistBrowsers?.length > 0) {
             pkgEngines = {
               ...pkgEngines,
               browsers: browserslistBrowsers,

packages/core/core/src/types.js

@@ -17,6 +17,7 @@ import type {
   ReporterEvent,
   ServerOptions,
   SourceLocation,
+  SourceType,
   Stats,
   Symbol,
   TargetSourceMapOptions,
@@ -68,10 +69,12 @@ export type Environment = {|
     | Array<PackageName>
     | {[PackageName]: boolean, ...},
   outputFormat: OutputFormat,
+  sourceType: ?SourceType,
   isLibrary: boolean,
   shouldOptimize: boolean,
   shouldScopeHoist: boolean,
   sourceMap: ?TargetSourceMapOptions,
+  loc: ?SourceLocation,
 |};
 
 export type Target = {|

packages/core/core/test/Environment.test.js

@@ -6,7 +6,7 @@ import {createEnvironment} from '../src/Environment';
 describe('Environment', () => {
   it('assigns a default environment with nothing passed', () => {
     assert.deepEqual(createEnvironment(), {
-      id: '1051b306b4fe6e64',
+      id: '2163092a3dd83a5f',
       context: 'browser',
       engines: {
         browsers: ['> 0.25%'],
@@ -17,12 +17,14 @@ describe('Environment', () => {
       shouldOptimize: false,
       shouldScopeHoist: false,
       sourceMap: undefined,
+      loc: undefined,
+      sourceType: 'module',
     });
   });
 
   it('assigns a node context if a node engine is given', () => {
     assert.deepEqual(createEnvironment({engines: {node: '>= 10.0.0'}}), {
-      id: '3938a02d672f6a6b',
+      id: '36da7887c1caf6e9',
       context: 'node',
       engines: {
         node: '>= 10.0.0',
@@ -33,14 +35,16 @@ describe('Environment', () => {
       shouldOptimize: false,
       shouldScopeHoist: false,
       sourceMap: undefined,
+      loc: undefined,
+      sourceType: 'module',
     });
   });
 
   it('assigns a browser context if browser engines are given', () => {
     assert.deepEqual(
       createEnvironment({engines: {browsers: ['last 1 version']}}),
       {
-        id: '7b484221d8006458',
+        id: '74e2019b893d5a25',
         context: 'browser',
         engines: {
           browsers: ['last 1 version'],
@@ -51,13 +55,15 @@ describe('Environment', () => {
         shouldOptimize: false,
         shouldScopeHoist: false,
         sourceMap: undefined,
+        loc: undefined,
+        sourceType: 'module',
       },
     );
   });
 
   it('assigns default engines for node', () => {
     assert.deepEqual(createEnvironment({context: 'node'}), {
-      id: '6e21f46e99d1eeb1',
+      id: 'e9e007a350f036f2',
       context: 'node',
       engines: {
         node: '>= 8.0.0',
@@ -68,12 +74,14 @@ describe('Environment', () => {
       shouldOptimize: false,
       shouldScopeHoist: false,
       sourceMap: undefined,
+      loc: undefined,
+      sourceType: 'module',
     });
   });
 
   it('assigns default engines for browsers', () => {
     assert.deepEqual(createEnvironment({context: 'browser'}), {
-      id: '1051b306b4fe6e64',
+      id: '2163092a3dd83a5f',
       context: 'browser',
       engines: {
         browsers: ['> 0.25%'],
@@ -84,6 +92,8 @@ describe('Environment', () => {
       shouldOptimize: false,
       shouldScopeHoist: false,
       sourceMap: undefined,
+      loc: undefined,
+      sourceType: 'module',
     });
   });
 });