Support Embroider

addon/components/dynamic-template.hbs

@@ -0,0 +1,7 @@
+{{#if false}}
+  {{!-- This is just here to tell embroider to include <ColorPallet /> in
+    any bundle that <DynamicTemplate /> is used in --}}
+  <ColorPallet />
+{{/if}}
+
+{{component (ensure-safe-component this.component)}}

addon/components/dynamic-template.js

@@ -1,61 +1,68 @@
-/* eslint-disable ember/no-classic-components, ember/no-classic-classes, prettier/prettier, no-console */
-
-import Component from '@ember/component';
-import GlimmerComponent from '@glimmer/component';
-import layout from '../templates/components/dynamic-template';
-
-import { computed } from '@ember/object';
+import { setComponentTemplate } from '@ember/component';
 import { getOwner } from '@ember/application';
 import { compileTemplate } from '@ember/template-compilation';
+import { importSync } from '@embroider/macros';
+import Component from '@glimmer/component';
 
 let templateOwnerMap = new Map();
-let templateId = 0;
 
-export default Component.extend({
-  tagName: '',
-  layout,
-  init() {
-    this._super(...arguments);
+export default class DynamicTemplateComponent extends Component {
+  constructor() {
+    super(...arguments);
 
     let owner = getOwner(this);
     let templateMap = templateOwnerMap.get(owner);
     if (templateMap === undefined) {
       templateMap = templateOwnerMap.set(owner, new Map());
     }
     this.templateMap = templateMap;
-  },
+  }
 
-  componentName: computed('templateString', 'componentId', function() {
-    let { templateMap, templateString } = this;
-    if (!templateString) { return null; }
+  get component() {
+    let owner = getOwner(this);
 
-    let componentName = templateMap.get(templateString);
-    if (componentName === undefined) {
-      let owner = getOwner(this);
+    let { templateString } = this.args;
+    if (!templateString) {
+      return null;
+    }
 
+    let component = this.templateMap.get(templateString);
+    if (component === undefined) {
       let compiledTemplate;
       try {
         compiledTemplate = compileTemplate(templateString);
       } catch (err) {
         console.error(err);
         console.error(templateString);
-        compiledTemplate = compileTemplate(`<DynamicTemplateError />`)
+        compiledTemplate = compileTemplate(`<DynamicTemplateError />`);
       }
 
-      let component = owner.factoryFor(`component:${this.componentId}`);
+      component = owner.factoryFor(`component:${this.args.componentId}`);
 
-      if(!component) {
-        component = class extends GlimmerComponent {};
+      if (component) {
+        component = class extends component.class {};
       } else {
-        component = class extends component.class {}
+        // if component couldn't be found the old way try importing it directly
+        let module;
+        try {
+          module = importSync(`/docs/${this.args.componentId}.js`);
+        } catch (err) {
+          // backing class doesn't exist so just ignore the error
+        }
+
+        component = module?.default;
+      }
+
+      if (!component) {
+        component = class extends Component {};
       }
 
-      componentName = `some-prefix-${templateId++}`;
+      setComponentTemplate(compiledTemplate, component);
 
-      owner.register(`component:${componentName}`, component);
-      owner.register(`template:components/${componentName}`, compiledTemplate);
+      // eslint-disable-next-line ember/no-side-effects
+      this.templateMap.set(templateString, component);
     }
 
-    return componentName;
-  })
-});
+    return component;
+  }
+}

addon/services/head-data.js

@@ -2,7 +2,6 @@
 import HeadDataService from 'ember-meta/services/head-data';
 import { computed } from '@ember/object';
 import config from 'ember-get-config';
-import innertext from 'innertext';
 
 import { getExcerpt, stripHTML } from 'ember-html-excerpt/helpers/excerpt';
 
@@ -24,10 +23,6 @@ export default class CustomHeadDataService extends HeadDataService {
     return this.currentRouteMeta?.title ?? `${this.config.name} - ${this.config.tagLine ?? 'Field Guide'}`;
   }
 
-  get content() {
-    return innertext(this.currentRouteMeta.html);
-  }
-
   @computed('currentRouteMeta')
   get description() {
     let currentModel = this.currentRouteMeta;

index.js

@@ -90,9 +90,18 @@ module.exports = {
       subdir: 'docs',
     });
 
+    let backingClasses = new Funnel(
+      'docs',
+      {
+        destDir: 'docs',
+        include: ['**/*.js']
+      }
+    );
+
     return new MergeTrees([
       docs,
       toc,
+      backingClasses,
     ]);
   },
 

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.4",
+    "@embroider/macros": "^1.16.5",
     "@embroider/util": "^1.13.2",
     "@glimmer/component": "^1.1.2",
     "broccoli-funnel": "^3.0.3",
@@ -47,7 +48,6 @@
     "ember-meta": "^2.0.0",
     "ember-prism": "^0.13.0",
     "empress-blueprint-helpers": "^1.2.1",
-    "innertext": "^1.0.3",
     "resolve": "^1.17.0",
     "walk-sync": "^2.2.0"
   },

tests/acceptance/meta-test-test.js

@@ -2,7 +2,7 @@
 import { module, test } from 'qunit';
 import { visit } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
-import config from '../../config/environment';
+import config from 'ember-get-config';
 
 let originalConfig;