feat(compile route templates): remove the templateOnly import from a …

…specified hbs file
embroider-build · Apr 3, 2024 · d0387c2 · d0387c2
1 parent cd8bfc8
commit d0387c2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/packages/addon-dev/src/rollup-hbs-plugin.ts b/packages/addon-dev/src/rollup-hbs-plugin.ts
@@ -2,9 +2,14 @@ import { createFilter } from '@rollup/pluginutils';
 import type { Plugin, PluginContext, CustomPluginOptions } from 'rollup';
 import { readFileSync } from 'fs';
 import { hbsToJS } from '@embroider/core';
+import minimatch from 'minimatch';
 import { parse as pathParse } from 'path';
 
-export default function rollupHbsPlugin(): Plugin {
+export default function rollupHbsPlugin({
+  templates,
+}: {
+  templates?: string[];
+}): Plugin {
   return {
     name: 'rollup-hbs-plugin',
     async resolveId(source: string, importer: string | undefined, options) {
@@ -16,19 +21,26 @@ export default function rollupHbsPlugin(): Plugin {
       if (resolution) {
         return resolution;
       } else {
-        return maybeSynthesizeComponentJS(this, source, importer, options);
+        return maybeSynthesizeComponentJS(
+          this,
+          source,
+          importer,
+          options,
+          templates
+        );
       }
     },
 
     load(id: string) {
       if (hbsFilter(id)) {
-        let input = readFileSync(id, 'utf8');
-        let code = hbsToJS(input);
-        return {
-          code,
-        };
+        return getHbsToJSCode(id);
       }
-      if (getMeta(this, id)) {
+      let meta = getMeta(this, id);
+      if (meta) {
+        if (meta?.type === 'template-js') {
+          const hbsFile = id.replace(/\.js$/, '.hbs');
+          return getHbsToJSCode(hbsFile);
+        }
         return {
           code: templateOnlyComponent,
         };
@@ -42,7 +54,7 @@ const templateOnlyComponent =
   `export default templateOnly();\n`;
 
 type Meta = {
-  type: 'template-only-component-js';
+  type: 'template-only-component-js' | 'template-js';
 };
 
 function getMeta(context: PluginContext, id: string): Meta | null {
@@ -54,6 +66,14 @@ function getMeta(context: PluginContext, id: string): Meta | null {
   }
 }
 
+function getHbsToJSCode(file: string): { code: string } {
+  let input = readFileSync(file, 'utf8');
+  let code = hbsToJS(input);
+  return {
+    code,
+  };
+}
+
 function correspondingTemplate(filename: string): string {
   let { ext } = pathParse(filename);
   return filename.slice(0, filename.length - ext.length) + '.hbs';
@@ -63,7 +83,8 @@ async function maybeSynthesizeComponentJS(
   context: PluginContext,
   source: string,
   importer: string | undefined,
-  options: { custom?: CustomPluginOptions; isEntry: boolean }
+  options: { custom?: CustomPluginOptions; isEntry: boolean },
+  templates: string[] | undefined
 ) {
   let templateResolution = await context.resolve(
     correspondingTemplate(source),
@@ -76,13 +97,17 @@ async function maybeSynthesizeComponentJS(
   if (!templateResolution) {
     return null;
   }
+  let type = templates?.some((glob) => minimatch(source, glob))
+    ? 'template-js'
+    : 'template-only-component-js';
   // we're trying to resolve a JS module but only the corresponding HBS
-  // file exists. Synthesize the template-only component JS.
+  // file exists. Synthesize the JS. The meta states if the hbs corresponds
+  // to a template-only component or a simple template like a route template.
   return {
     id: templateResolution.id.replace(/\.hbs$/, '.js'),
     meta: {
       'rollup-hbs-plugin': {
-        type: 'template-only-component-js',
+        type,
       },
     },
   };

diff --git a/packages/addon-dev/src/rollup.ts b/packages/addon-dev/src/rollup.ts
@@ -53,8 +53,8 @@ export class Addon {
   // This wraps standalone .hbs files as Javascript files using inline
   // templates. This means special resolving rules for .hbs files aren't
   // required for javascript tooling to understand your package.
-  hbs() {
-    return hbs();
+  hbs(options = {}) {
+    return hbs(options);
   }
 
   gjs(options?: { inline_source_map: boolean }) {

diff --git a/tests/scenarios/v2-addon-dev-test.ts b/tests/scenarios/v2-addon-dev-test.ts
@@ -71,7 +71,9 @@ appScenarios
               exclude: ['**/-excluded/**/*'],
             }),
 
-            addon.hbs(),
+            addon.hbs({
+              templates: ['**/just-a-template.js'],
+            }),
             addon.gjs(),
             addon.dependencies(),
 
@@ -125,12 +127,10 @@ appScenarios
                 import { tracked } from '@glimmer/tracking';
 
                 import FlipButton from './button';
-                import JustATemplate from './just-a-template';
                 import Out from './out';
 
                 export default class ExampleComponent extends Component {
                   Button = FlipButton;
-                  JustATemplate = JustATemplate;
                   Out = Out;
 
                   @tracked active = false;
@@ -140,8 +140,6 @@ appScenarios
               `,
             'index.hbs': `Hello there!
 
-              <this.JustATemplate />
-
               <this.Out>{{this.active}}</this.Out>
 
               <this.Button @onClick={{this.flip}} />
@@ -287,12 +285,11 @@ appScenarios
 
           expectFile(
             'dist/components/demo/just-a-template.js'
-          ).equalsCode(`import templateOnly from '@ember/component/template-only';
-import { precompileTemplate } from '@ember/template-compilation';
+          ).equalsCode(`import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 var TEMPLATE = precompileTemplate("<p>I am not a component but a template.</p>");
-var JustATemplate = setComponentTemplate(TEMPLATE, templateOnly());
-export { JustATemplate as default };
+var justATemplate = setComponentTemplate(TEMPLATE, precompileTemplate("<p>I am not a component but a template.</p>"));
+export { justATemplate as default };
 //# sourceMappingURL=just-a-template.js.map`);
         });