Dynamic Import for SIMPLE_OPTIMIZATIONS (#91)

Dynamic Import for SIMPLE_OPTIMIZATIONS

Author: kristoferbaxter

src/acorn.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Program } from 'estree';
+import { DYNAMIC_IMPORT_DECLARATION } from './types';
+const acorn = require('acorn');
+const acornWalk = require('acorn-walk');
+const dynamicImport = require('acorn-dynamic-import');
+
+const DYNAMIC_IMPORT_BASEVISITOR = Object.assign({}, acornWalk.base, {
+  [DYNAMIC_IMPORT_DECLARATION]: () => {},
+});
+
+export const walk = {
+  simple(node: Program, visitors: any): void {
+    acornWalk.simple(node, visitors, DYNAMIC_IMPORT_BASEVISITOR);
+  },
+  ancestor(node: Program, visitors: any): void {
+    acornWalk.ancestor(node, visitors, DYNAMIC_IMPORT_BASEVISITOR);
+  },
+};
+
+const DEFAULT_ACORN_OPTIONS = {
+  ecmaVersion: 2019,
+  sourceType: 'module',
+  preserveParens: false,
+  ranges: true,
+};
+
+export function parse(source: string): Program {
+  return acorn.Parser.extend(dynamicImport.default).parse(source, DEFAULT_ACORN_OPTIONS);
+}

src/index.ts

@@ -16,6 +16,7 @@
 
 import { CompileOptions } from 'google-closure-compiler';
 import * as fs from 'fs';
+import * as path from 'path';
 import { promisify } from 'util';
 import {
   OutputOptions,
@@ -65,26 +66,36 @@ const renderChunk = async (
 };
 
 export default function closureCompiler(requestedCompileOptions: CompileOptions = {}): Plugin {
+  const transforms: { [key: string]: Array<Transform> } = {};
   let inputOptions: InputOptions;
   let context: PluginContext;
-  let transforms: Array<Transform>;
-  let transformsDefined: boolean = false;
 
   return {
     name: 'closure-compiler',
     options: options => (inputOptions = options),
     buildStart() {
       context = this;
-    },
-    load() {
-      if (!transformsDefined) {
-        transforms = createTransforms(context, inputOptions);
-        transformsDefined = true;
+      if (
+        'compilation_level' in requestedCompileOptions &&
+        requestedCompileOptions.compilation_level === 'ADVANCED_OPTIMIZATIONS' &&
+        inputOptions.experimentalCodeSplitting
+      ) {
+        context.warn(
+          'Rollup experimentalCodeSplitting with Closure Compiler ADVANCED_OPTIMIZATIONS is not currently supported.',
+        );
       }
     },
+    load(id: string) {
+      transforms[path.parse(id).base] = createTransforms(context, inputOptions);
+    },
     renderChunk: async (code: string, chunk: RenderedChunk, outputOptions: OutputOptions) => {
-      await deriveFromInputSource(code, chunk, transforms);
-      return await renderChunk(transforms, requestedCompileOptions, code, outputOptions);
+      await deriveFromInputSource(code, chunk, transforms[chunk.fileName]);
+      return await renderChunk(
+        transforms[chunk.fileName],
+        requestedCompileOptions,
+        code,
+        outputOptions,
+      );
     },
   };
 }

src/options.ts

@@ -18,6 +18,7 @@ import { Transform } from './types';
 import { ModuleFormat, OutputOptions } from 'rollup';
 import { CompileOptions } from 'google-closure-compiler';
 import { sync } from 'temp-write';
+import { logSource } from './debug';
 
 export const ERROR_WARNINGS_ENABLED_LANGUAGE_OUT_UNSPECIFIED =
   'Providing the warning_level=VERBOSE compile option also requires a valid language_out compile option.';
@@ -80,6 +81,10 @@ export const defaults = (
       ? providedExterns
       : '';
 
+  if (typeof externs === 'string' && externs !== '') {
+    logSource('externs', externs);
+  }
+
   return {
     language_out: 'NO_TRANSPILE',
     assume_function_wrapper: isESMFormat(options.format),

src/transformers/exports.ts

@@ -32,7 +32,7 @@ import {
   ExportClosureMapping,
 } from '../types';
 import MagicString from 'magic-string';
-const walk = require('acorn-dynamic-import/lib/walk').default(require('acorn-walk'));
+import { parse, walk } from '../acorn';
 
 /**
  * This Transform will apply only if the Rollup configuration is for 'esm' output.
@@ -54,7 +54,7 @@ export default class ExportTransform extends Transform implements TransformInter
   public async deriveFromInputSource(code: string, chunk: RenderedChunk): Promise<void> {
     const context = this.context;
     let originalExports: ExportNameToClosureMapping = {};
-    const program = context.parse(code, { ranges: true });
+    const program = parse(code);
 
     walk.simple(program, {
       ExportNamedDeclaration(node: ExportNamedDeclaration) {
@@ -105,7 +105,7 @@ export default class ExportTransform extends Transform implements TransformInter
         // where exports were not part of the language.
         source.remove(this.originalExports[key].range[0], this.originalExports[key].range[1]);
         // Window scoped references for each key are required to ensure Closure Compilre retains the code.
-        source.append(`\nwindow['${key}'] = ${key}`);
+        source.append(`\nwindow['${key}'] = ${key};`);
       });
 
       return {
@@ -134,7 +134,7 @@ export default class ExportTransform extends Transform implements TransformInter
       );
     } else if (isESMFormat(this.outputOptions.format)) {
       const source = new MagicString(code);
-      const program = this.context.parse(code, { ranges: true });
+      const program = parse(code);
       const collectedExportsToAppend: Array<string> = [];
 
       const originalExports = this.originalExports;

src/transformers/imports.ts

@@ -18,8 +18,11 @@ import { Transform } from '../types';
 import { literalName, importLocalNames } from './parsing-utilities';
 import { TransformSourceDescription } from 'rollup';
 import MagicString from 'magic-string';
-import { ImportDeclaration } from 'estree';
-const walk = require('acorn-dynamic-import/lib/walk').default(require('acorn-walk'));
+import { ImportDeclaration, Identifier } from 'estree';
+import { parse, walk } from '../acorn';
+
+const DYNAMIC_IMPORT_KEYWORD = 'import';
+const DYNAMIC_IMPORT_REPLACEMENT = `import_${new Date().getMilliseconds()}`;
 
 const HEADER = `/**
 * @fileoverview Externs built via derived configuration from Rollup or input code.
@@ -28,9 +31,15 @@ const HEADER = `/**
 */
 `;
 
+interface RangedImport {
+  type: string;
+  range: [number, number];
+}
+
 export default class ImportTransform extends Transform {
   private importedExternalsSyntax: { [key: string]: string } = {};
   private importedExternalsLocalNames: Array<string> = [];
+  private dynamicImportPresent: boolean = false;
 
   /**
    * Rollup allows configuration for 'external' imports.
@@ -56,16 +65,24 @@ export default class ImportTransform extends Transform {
    * @return string representing content of generated extern.
    */
   public extern(): string {
+    let extern = HEADER;
     if (this.importedExternalsLocalNames.length > 0) {
-      let extern = HEADER;
       this.importedExternalsLocalNames.forEach(name => {
         extern += `function ${name}(){};\n`;
       });
+    }
 
-      return extern;
+    if (this.dynamicImportPresent) {
+      extern += `
+/**
+ * @param {string} path
+ * @return {!Promise<?>}
+ */
+function ${DYNAMIC_IMPORT_REPLACEMENT}(path) { return Promise.resolve(path) };
+window['${DYNAMIC_IMPORT_REPLACEMENT}'] = ${DYNAMIC_IMPORT_REPLACEMENT};`;
     }
 
-    return '';
+    return extern;
   }
 
   /**
@@ -79,7 +96,7 @@ export default class ImportTransform extends Transform {
   public async preCompilation(code: string): Promise<TransformSourceDescription> {
     const self = this;
     const source = new MagicString(code);
-    const program = self.context.parse(code, { ranges: true });
+    const program = parse(code);
 
     walk.simple(program, {
       async ImportDeclaration(node: ImportDeclaration) {
@@ -95,6 +112,18 @@ export default class ImportTransform extends Transform {
           );
         }
       },
+      Import(node: RangedImport) {
+        self.dynamicImportPresent = true;
+        // Rename the `import` method to something we can put in externs.
+        // CC doesn't understand dynamic import yet.
+        source.overwrite(
+          node.range[0],
+          node.range[1],
+          code
+            .substring(node.range[0], node.range[1])
+            .replace(DYNAMIC_IMPORT_KEYWORD, DYNAMIC_IMPORT_REPLACEMENT),
+        );
+      },
     });
 
     return {
@@ -110,10 +139,21 @@ export default class ImportTransform extends Transform {
    */
   public async postCompilation(code: string): Promise<TransformSourceDescription> {
     const source = new MagicString(code);
+    const program = parse(code);
+
     Object.values(this.importedExternalsSyntax).forEach(importedExternalSyntax =>
       source.prepend(importedExternalSyntax),
     );
 
+    walk.simple(program, {
+      Identifier(node: Identifier) {
+        if (node.name === DYNAMIC_IMPORT_REPLACEMENT) {
+          const range: [number, number] = node.range ? [node.range[0], node.range[1]] : [0, 0];
+          source.overwrite(range[0], range[1], DYNAMIC_IMPORT_KEYWORD);
+        }
+      },
+    });
+
     return {
       code: source.toString(),
       map: source.generateMap(),

src/transformers/literal-computed-keys.ts

@@ -18,7 +18,7 @@ import { Transform } from '../types';
 import { TransformSourceDescription } from 'rollup';
 import MagicString from 'magic-string';
 import { ObjectExpression } from 'estree';
-const walk = require('acorn-dynamic-import/lib/walk').default(require('acorn-walk'));
+import { parse, walk } from '../acorn';
 
 /**
  * Closure Compiler will not transform computed keys with literal values back to the literal value.
@@ -34,7 +34,7 @@ export default class LiteralComputedKeys extends Transform {
    */
   public async postCompilation(code: string): Promise<TransformSourceDescription> {
     const source = new MagicString(code);
-    const program = this.context.parse(code, { ranges: true });
+    const program = parse(code);
 
     walk.simple(program, {
       ObjectExpression(node: ObjectExpression) {

src/types.ts

@@ -23,14 +23,14 @@ import {
   InputOption,
   RenderedChunk,
 } from 'rollup';
+const dynamicImport = require('acorn-dynamic-import');
 
 // @see https://github.com/estree/estree/blob/master/es2015.md#imports
 export const IMPORT_DECLARATION = 'ImportDeclaration';
-export const DYNAMIC_IMPORT_DECLARATION = 'Import';
+export const DYNAMIC_IMPORT_DECLARATION = dynamicImport.DynamicImportKey;
 export const IMPORT_SPECIFIER = 'ImportSpecifier';
 export const IMPORT_DEFAULT_SPECIFIER = 'ImportDefaultSpecifier';
 export const IMPORT_NAMESPACE_SPECIFIER = 'ImportNamespaceSpecifier';
-export const ALL_IMPORT_DECLARATIONS = [IMPORT_DECLARATION, DYNAMIC_IMPORT_DECLARATION];
 
 // @see https://github.com/estree/estree/blob/master/es2015.md#exports
 export const EXPORT_NAMED_DECLARATION = 'ExportNamedDeclaration';

test/generator.js

@@ -53,6 +53,7 @@ function generate(
   shouldFail,
   category,
   name,
+  codeSplit,
   formats,
   closureFlags,
 ) {
@@ -65,26 +66,37 @@ function generate(
         input: fixtureLocation(category, name, format, optionKey, false),
         plugins: [compiler(closureFlags[optionKey])],
         external: ['lodash'],
+        experimentalCodeSplitting: codeSplit,
       });
 
-      return {
-        minified: await readFile(
-          path.join(fixtureLocation(category, name, format, optionKey, true)),
-          'utf8',
-        ),
-        code: (await bundle.generate({
-          format,
-          sourcemap: true,
-        })).code,
-      };
+      const bundles = await bundle.generate({
+        format,
+        sourcemap: true,
+      });
+
+      const output = [];
+      for (file in bundles.output) {
+        output.push({
+          minified: await readFile(
+            path.join(fixtureLocation(category, path.parse(bundles.output[file].fileName).name, format, optionKey, true)),
+            'utf8',
+          ),
+          code: bundles.output[file].code
+        });
+      }
+
+      return output;
     }
 
     Object.keys(closureFlags).forEach(optionKey => {
       const method = shouldFail ? test.failing : test;
       method(`${name} – ${format.padEnd(targetLength)} – ${optionKey.padEnd(optionLength)}`, async t => {
-        const { minified, code } = await compile(optionKey);
+        const output = await compile(optionKey);
 
-        t.is(code, minified);
+        t.plan(output.length);
+        output.forEach(result => {
+          t.is(result.code, result.minified);
+        })
       });
     });
   });
@@ -93,24 +105,27 @@ function generate(
 function failureGenerator(
   category,
   name,
+  codeSplit = false,
   formats = [ESM_OUTPUT],
   closureFlags = defaultClosureFlags,
 ) {
-  generate(true, category, name, formats, closureFlags);
+  generate(true, category, name, codeSplit, formats, closureFlags);
 }
 
 function generator(
   category,
   name,
+  codeSplit = false,
   formats = [ESM_OUTPUT],
   closureFlags = defaultClosureFlags,
 ) {
-  generate(false, category, name, formats, closureFlags);
+  generate(false, category, name, codeSplit, formats, closureFlags);
 }
 
 module.exports = {
   DEFAULT_CLOSURE_OPTIONS,
   ADVANCED_CLOSURE_OPTIONS,
+  ES5_STRICT_CLOSURE_OPTIONS,
   ES_OUTPUT,
   ESM_OUTPUT,
   generator,