Merge pull request #893 from embroider-build/inline-hbs-reform

Inline hbs reform
embroider-build · Oct 14, 2021 · ca24a88 · ca24a88
2 parents 5685276 + 564aa32
commit ca24a88
Show file tree

Hide file tree

Showing 36 changed files with 625 additions and 295 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -9,8 +9,8 @@
       "request": "launch",
       "name": "Run tests",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "cwd": "${workspaceFolder}/packages/compat",
-      "args": ["--runInBand", "--testPathPattern", "tests/stage2  .test.js"],
+      "cwd": "${workspaceFolder}/packages/core",
+      "args": ["--runInBand", "--testPathPattern", "tests/inline-hbs.test.js"],
       "outputCapture": "std"
     },
     {

diff --git a/packages/compat/package.json b/packages/compat/package.json
@@ -29,7 +29,6 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.14.5",
     "@babel/traverse": "^7.14.5",
-    "@babel/types": "^7.14.5",
     "@embroider/macros": "0.46.2",
     "@embroider/shared-internals": "0.46.2",
     "@types/babel__code-frame": "^7.0.2",

diff --git a/packages/compat/src/audit/babel-visitor.ts b/packages/compat/src/audit/babel-visitor.ts
@@ -1,21 +1,5 @@
 import traverse, { NodePath, Node } from '@babel/traverse';
-import {
-  CallExpression,
-  ExportAllDeclaration,
-  ExportDefaultDeclaration,
-  ExportNamedDeclaration,
-  ExportNamespaceSpecifier,
-  ExportSpecifier,
-  Identifier,
-  ImportDeclaration,
-  ImportDefaultSpecifier,
-  ImportNamespaceSpecifier,
-  ImportSpecifier,
-  isImport,
-  isStringLiteral,
-  StringLiteral,
-} from '@babel/types';
-import { TransformOptions, transformSync } from '@babel/core';
+import { TransformOptions, transformSync, types as t } from '@babel/core';
 import { codeFrameColumns, SourceLocation } from '@babel/code-frame';
 
 export class VisitorState {}
@@ -61,7 +45,7 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
   let saveCodeFrame = frames.forSource(rawSource);
 
   traverse(ast, {
-    Identifier(path: NodePath<Identifier>) {
+    Identifier(path: NodePath<t.Identifier>) {
       if (path.node.name === 'module' && isFreeVariable(path)) {
         sawModule = true;
       } else if (path.node.name === 'exports' && isFreeVariable(path)) {
@@ -73,9 +57,9 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
         exports.add(path.node.name);
       }
     },
-    CallExpression(path: NodePath<CallExpression>) {
+    CallExpression(path: NodePath<t.CallExpression>) {
       let callee = path.get('callee');
-      if (callee.referencesImport('@embroider/macros', 'importSync') || isImport(callee)) {
+      if (callee.referencesImport('@embroider/macros', 'importSync') || t.isImport(callee)) {
         let arg = path.node.arguments[0];
         if (arg.type === 'StringLiteral') {
           imports.push({
@@ -85,45 +69,45 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
           });
         } else {
           problems.push({
-            message: `audit tool is unable to understand this usage of ${isImport(callee) ? 'import' : 'importSync'}`,
+            message: `audit tool is unable to understand this usage of ${t.isImport(callee) ? 'import' : 'importSync'}`,
             detail: arg.type,
             codeFrameIndex: saveCodeFrame(arg),
           });
         }
       }
     },
-    ImportDeclaration(path: NodePath<ImportDeclaration>) {
+    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
       imports.push({
         source: path.node.source.value,
         codeFrameIndex: saveCodeFrame(path.node.source),
         specifiers: [],
       });
     },
-    ImportDefaultSpecifier(path: NodePath<ImportDefaultSpecifier>) {
+    ImportDefaultSpecifier(path: NodePath<t.ImportDefaultSpecifier>) {
       imports[imports.length - 1].specifiers.push({
         name: 'default',
         local: path.node.local.name,
         codeFrameIndex: saveCodeFrame(path.node),
       });
     },
-    ImportNamespaceSpecifier(path: NodePath<ImportNamespaceSpecifier>) {
+    ImportNamespaceSpecifier(path: NodePath<t.ImportNamespaceSpecifier>) {
       imports[imports.length - 1].specifiers.push({
         name: { isNamespace: true },
         local: path.node.local.name,
         codeFrameIndex: saveCodeFrame(path.node),
       });
     },
-    ImportSpecifier(path: NodePath<ImportSpecifier>) {
+    ImportSpecifier(path: NodePath<t.ImportSpecifier>) {
       imports[imports.length - 1].specifiers.push({
         name: name(path.node.imported),
         local: path.node.local.name,
         codeFrameIndex: saveCodeFrame(path.node),
       });
     },
-    ExportDefaultDeclaration(_path: NodePath<ExportDefaultDeclaration>) {
+    ExportDefaultDeclaration(_path: NodePath<t.ExportDefaultDeclaration>) {
       exports.add('default');
     },
-    ExportSpecifier(path: NodePath<ExportSpecifier>) {
+    ExportSpecifier(path: NodePath<t.ExportSpecifier>) {
       exports.add(name(path.node.exported));
       if (path.parent.type === 'ExportNamedDeclaration' && path.parent.source) {
         imports[imports.length - 1].specifiers.push({
@@ -133,7 +117,7 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
         });
       }
     },
-    ExportNamespaceSpecifier(path: NodePath<ExportNamespaceSpecifier>) {
+    ExportNamespaceSpecifier(path: NodePath<t.ExportNamespaceSpecifier>) {
       exports.add(name(path.node.exported));
       if (path.parent.type === 'ExportNamedDeclaration' && path.parent.source) {
         imports[imports.length - 1].specifiers.push({
@@ -143,7 +127,7 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
         });
       }
     },
-    ExportAllDeclaration(path: NodePath<ExportAllDeclaration>) {
+    ExportAllDeclaration(path: NodePath<t.ExportAllDeclaration>) {
       exports.add({ all: path.node.source.value });
       imports.push({
         source: path.node.source.value,
@@ -157,7 +141,7 @@ export function auditJS(rawSource: string, filename: string, babelConfig: Transf
         ],
       });
     },
-    ExportNamedDeclaration(path: NodePath<ExportNamedDeclaration>) {
+    ExportNamedDeclaration(path: NodePath<t.ExportNamedDeclaration>) {
       if (path.node.source) {
         imports.push({
           source: path.node.source.value,
@@ -205,15 +189,15 @@ export class CodeFrameStorage {
   }
 }
 
-function name(node: StringLiteral | Identifier): string {
-  if (isStringLiteral(node)) {
+function name(node: t.StringLiteral | t.Identifier): string {
+  if (t.isStringLiteral(node)) {
     return node.value;
   } else {
     return node.name;
   }
 }
 
-function isFreeVariable(path: NodePath<Identifier>) {
+function isFreeVariable(path: NodePath<t.Identifier>) {
   return !path.scope.hasBinding(path.node.name);
 }
 

diff --git a/packages/compat/tests/resolver.test.ts b/packages/compat/tests/resolver.test.ts
@@ -49,7 +49,7 @@ describe('compat-resolver', function () {
     let compiler = new NodeTemplateCompiler({ compilerPath, compilerChecksum, resolver, EmberENV, plugins });
     return function (relativePath: string, contents: string) {
       let moduleName = givenFile(relativePath);
-      let { dependencies } = compiler.precompile(moduleName, contents);
+      let { dependencies } = compiler.precompile(contents, { filename: moduleName });
       return sortBy(dependencies, d => d.runtimeName).map(d => ({
         path: d.path,
         runtimeName: d.runtimeName,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -37,11 +37,11 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/runtime": "^7.14.5",
     "@babel/traverse": "^7.14.5",
-    "@babel/types": "^7.14.5",
     "@embroider/macros": "0.46.2",
     "@embroider/shared-internals": "0.46.2",
     "assert-never": "^1.2.1",
     "babel-import-util": "^0.2.0",
+    "babel-plugin-ember-template-compilation": "^1.0.0",
     "broccoli-node-api": "^1.7.0",
     "broccoli-persistent-filter": "^3.1.2",
     "broccoli-plugin": "^4.0.7",

diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts
@@ -39,6 +39,7 @@ import type { Params as InlineBabelParams } from './babel-plugin-inline-hbs-node
 import { PortableHint, maybeNodeModuleVersion } from './portable';
 import escapeRegExp from 'escape-string-regexp';
 import { getEmberExports } from './load-ember-template-compiler';
+import type { Options as InlinePrecompileOptions } from 'babel-plugin-ember-template-compilation';
 import type { Options as ColocationOptions } from '@embroider/shared-internals/src/template-colocation-plugin';
 
 export type EmberENV = unknown;
@@ -385,14 +386,32 @@ export class AppBuilder<TreeNames> {
     // https://github.com/webpack/webpack/issues/12154
     babel.plugins.push(require.resolve('./rename-require-plugin'));
 
-    // this is our built-in support for the inline hbs macro
-    babel.plugins.push([
-      join(__dirname, 'babel-plugin-inline-hbs-node.js'),
-      {
-        templateCompiler: templateCompilerParams,
-        stage: 3,
-      } as InlineBabelParams,
-    ]);
+    if (this.adapter.adjustImportsOptions().emberNeedsModulesPolyfill) {
+      // on older ember versions that need the modules-api-polyfill, we use our
+      // bespoke inline template compiler plugin.
+      babel.plugins.push([
+        join(__dirname, 'babel-plugin-inline-hbs-node.js'),
+        {
+          templateCompiler: templateCompilerParams,
+          stage: 3,
+        } as InlineBabelParams,
+      ]);
+    } else {
+      // on newer ember versions that don't need the modules-api-polyfill, we
+      // can compose with the newer babel-plugin-htmlbars-inline-precompile, and
+      // use a simpler plugin that only needs to handle inserting discovered
+      // dependencies.
+      babel.plugins.push([
+        join(__dirname, '../src/babel-plugin-inline-hbs-deps-node.js'),
+        { templateCompiler: templateCompilerParams },
+      ]);
+      babel.plugins.push([
+        require.resolve('babel-plugin-ember-template-compilation'),
+        {
+          precompilerPath: join(__dirname, '../src/babel-plugin-inline-hbs-deps-node.js'),
+        } as InlinePrecompileOptions,
+      ]);
+    }
 
     // this is @embroider/macros configured for full stage3 resolution
     babel.plugins.push(...this.macrosConfig.babelPluginConfig());

diff --git a/packages/core/src/babel-plugin-adjust-imports.ts b/packages/core/src/babel-plugin-adjust-imports.ts
@@ -1,7 +1,8 @@
 import { emberVirtualPackages, emberVirtualPeerDeps, packageName as getPackageName } from '@embroider/shared-internals';
 import { join, dirname, resolve } from 'path';
 import type { NodePath } from '@babel/traverse';
-import type * as t from '@babel/types';
+import type * as Babel from '@babel/core';
+import type { types as t } from '@babel/core';
 import { PackageCache, Package, V2Package, explicitRelative } from '@embroider/shared-internals';
 import { outputFileSync } from 'fs-extra';
 import { Memoize } from 'typescript-memoize';
@@ -341,8 +342,8 @@ function makeExternal(specifier: string, sourceFile: AdjustFile, opts: Options):
   return explicitRelative(dirname(sourceFile.name), target.slice(0, -3));
 }
 
-export default function main(babel: unknown) {
-  let t = (babel as any).types as BabelTypes;
+export default function main(babel: typeof Babel) {
+  let t = babel.types;
   return {
     visitor: {
       Program: {

diff --git a/packages/core/src/babel-plugin-inline-hbs-deps-node.ts b/packages/core/src/babel-plugin-inline-hbs-deps-node.ts
@@ -0,0 +1,9 @@
+import { NodeTemplateCompiler, NodeTemplateCompilerParams } from './template-compiler-node';
+import make, { precompile } from './babel-plugin-inline-hbs-deps';
+
+export interface Params {
+  templateCompiler: NodeTemplateCompilerParams;
+}
+
+export default make((opts: Params) => new NodeTemplateCompiler(opts.templateCompiler));
+export { precompile };