Dynamic import support

[theseanl]

Since Closure Compiler 20210505.0.0, it now supports dynamic imports, and producing chunks in ES module format. Here I try to describe an intended behavior of tscc for dynamic imports.

Blocker

Dynamic import does not work in goog.module as of writing.

Intended behavior

• "Statically analyzable" imports referring to an existing file
  • If this matches some module(in the tscc's sense)'s entry file, we would like the string in the import clause to be transformed to the output module's name.
  • If this matches none, we would like to create an anonymous chunk whose entry point is that file.
    • This can be done in 2 ways, either by obtaining required information from .ts or .js after tsickle transpilation.
      • Doing this at .ts side may be more stable, we may even be able to use Typescript API.
    • Such chunk names need to be customizable, as in rollup, and should provide a JS API that returns chunk names.
• "Statically analyzable" imports referring to an external module: it's clear what to do.
• There needs to be a settings field in spec files to indicate output chunk format (global namespace or es module).
  • Why this needs to be a separate field instead of letting users to provide them in compilerFlags key? Because we want to do isomorphic builds with rollup too.

Technical issues

• There are "statically analyzable" dynamic imports and those which are not.

  • This notion can be different between Typescript and Closure Compiler. For example, will they be able to statically analyze this?

    const locale = "en";
    import ("vender-" + locale + '.js').then(()=>{/*...*/})

• tsickle forces compilerOptions.module to be commonjs, and then Typescript transpiles import clauses to something like

  Promise.resolve().then(()=>require('...')).then(()=>{/*...*/})

  Therefore one needs a Typescript transformer to transform it back to import clauses before feeding it to Closure Compiler.