resolveAsset interface via new svg-jar service

addon/components/svg/index.hbs

@@ -1,16 +1,15 @@
-{{#if this._svgComponentName}}
-  {{#let (component this._svgComponentName) as |SvgJar|}}
-    <SvgJar
-      @title={{@title}}
-      @titleId={{this.titleId}}
-      @desc={{@desc}}
-      @descId={{this.descId}}
-      role={{@role}}
-      aria-label={{@ariaLabel}}
-      aria-hidden={{this.isAriaHidden}}
-      aria-labelledby={{this.ariaLabelledBy}}
-      ...attributes
-      {{did-update this.updateSvg @name}}
-    />
-  {{/let}}
+{{#if this.svgComponent}}
+  <this.svgComponent
+    @title={{@title}}
+    @titleId={{this.titleId}}
+    @desc={{@desc}}
+    @descId={{this.descId}}
+    role={{@role}}
+    aria-label={{@ariaLabel}}
+    aria-hidden={{this.isAriaHidden}}
+    aria-labelledby={{this.ariaLabelledBy}}
+    ...attributes
+    {{did-update this.updateSvg @name}}
+  />
+
 {{/if}}

addon/components/svg/index.js

@@ -1,8 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import resolveAsset from 'ember-cli-resolve-asset';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { inject as service } from '@ember/service';
+import { ensureSafeComponent } from '@embroider/util';
 
 
 function needsLoading(name) {
@@ -20,48 +21,59 @@ function getInvocationName(name) {
   return `ember-svg-jar@${name}`;
 }
 
-export async function loadSvg(name) {
+export async function loadSvg(resolver, name) {
   let componentDefinedName = `ember-svg-jar/components/${name}`;
   let invokationName = getInvocationName(name);
 
   if (!needsLoading(name)) {
     return invokationName;
   }
-
-  const assetPath = await resolveAsset(`${componentDefinedName}.js`);
+  const assetPath = await resolver.resolveAsset(`${componentDefinedName}.js`);
   await import(assetPath);
-  return invokationName;
+  return window.require(componentDefinedName).default;
 }
 
 export default class Svg extends Component {
+  @service svgJar;
+
   constructor() {
     super(...arguments);
     this.updateSvg();
   }
 
-  @tracked _svgComponentName = null;
+  @tracked _svgComponent = null;
+
+  get svgComponent() {
+    return this._svgComponent;
+  }
+
+  set svgComponent(value) {
+    this._svgComponent = ensureSafeComponent(value, this);
+  }
 
   @action
   async updateSvg() {
-    if (needsLoading(this.args.name)) {
-      if (this.args.loadingSvg) {
-        if (needsLoading(this.args.loadingSvg)) {
-          // maybe we didn't bundle the loadingSvg, it will be there for the next one.
-          loadSvg(this.args.loadingSvg);
-        } else {
-          this._svgComponentName = getInvocationName(this.args.loadingSvg);
+    if (typeof FastBoot === 'undefined') {
+      if (needsLoading(this.args.name)) {
+        if (this.args.loadingSvg) {
+          if (needsLoading(this.args.loadingSvg)) {
+            // maybe we didn't bundle the loadingSvg, it will be there for the next one.
+            loadSvg(this.svgJar, this.args.loadingSvg);
+          } else {
+            this.svgComponent = getInvocationName(this.args.loadingSvg);
+          }
         }
-      }
-      let invokationName = await loadSvg(this.args.name);
-      if (!this.isDestroyed || !this.isDestroying) {
-        this._svgComponentName = invokationName;
-        this.isLoading = false;
-        if (this.args.onIconLoad && typeof this.args.onIconLoad === 'function') {
-          this.args.onIconLoad();
+        let invokationName = await loadSvg(this.svgJar, this.args.name);
+        if (!this.isDestroyed || !this.isDestroying) {
+          this.svgComponent = invokationName;
+          this.isLoading = false;
+          if (this.args.onIconLoad && typeof this.args.onIconLoad === 'function') {
+            this.args.onIconLoad();
+          }
         }
+      } else {
+        this.svgComponent = getInvocationName(this.args.name);
       }
-    } else {
-      this._svgComponentName = getInvocationName(this.args.name);
     }
   }
 

addon/services/svg-jar.js

@@ -0,0 +1,8 @@
+import Service from '@ember/service';
+
+export default class SvgJarService extends Service {
+  // eslint-disable-next-line
+  resolveAsset(path) {
+    return `/${path}`;
+  }
+}

app/services/svg-jar.js

@@ -0,0 +1 @@
+export { default } from 'ember-svg-jar/services/svg-jar';

config/ember-try.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const getChannelURL = require('ember-source-channel-url');
+const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
 
 module.exports = async function() {
   return {
@@ -80,16 +81,8 @@ module.exports = async function() {
           }
         }
       },
-      {
-        name: 'embroider-tests',
-        npm: {
-          devDependencies: {
-            '@embroider/core': '*',
-            '@embroider/webpack': '*',
-            '@embroider/compat': '*',
-          },
-        },
-      },
+      embroiderSafe(),
+      embroiderOptimized()
     ]
   };
 };

ember-cli-build.js

@@ -1,22 +1,14 @@
 'use strict';
 
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+const { maybeEmbroider } = require('@embroider/test-setup');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
     svgJar: {
       strategy: ['symbol', 'inline', 'hbs'],
       sourceDirs: ['tests/dummy/public'],
       stripPath: false
-    },
-    // ember-cli-resolve-asset config
-    fingerprint: {
-      enabled: true,
-      generateAssetMap: true, // Required.
-      fingerprintAssetMap: true // Recommended to prevent caching issues.
-    },
-    'ember-fetch': {
-      preferNative: true // Recommended to enable faster preloading for browsers that support it.
     }
   });
 
@@ -30,5 +22,6 @@ module.exports = function(defaults) {
         staticComponents: true,
       });
   }
-  return app.toTree();
+
+  return maybeEmbroider(app);
 };

package.json

@@ -31,6 +31,7 @@
     "prepublishOnly": "yarn lint:js && yarn test:node"
   },
   "dependencies": {
+    "@embroider/util": "^0.37.0",
     "broccoli-caching-writer": "^3.0.3",
     "broccoli-concat": "^3.7.4",
     "broccoli-funnel": "^2.0.2",
@@ -49,6 +50,7 @@
     "path-posix": "^1.0.0"
   },
   "devDependencies": {
+    "@embroider/test-setup": "^0.37.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^1.0.2",
     "@glimmer/component": "^1.0.1",

tests/dummy/app/templates/application.hbs

@@ -1,15 +1,13 @@
 {{! template-lint-disable no-curly-component-invocation}}
-
-{{!-- The following component displays Ember's default welcome message. --}}
+{{! The following component displays Ember's default welcome message. }}
 <WelcomePage />
-{{!-- Feel free to remove this! --}}
-
+{{! Feel free to remove this! }}
 <div class="inline-icon">
-  {{svg-jar "icon"}}
+  {{svg-jar 'icon'}}
 </div>
-
 <div class="inline-accessible-icon">
-  {{svg-jar "icon" title="dummy title" desc="dummy dec"}}
+  {{svg-jar 'icon' title='dummy title' desc='dummy dec'}}
 </div>
 
+<Svg @name="svg/icon" @title="Dummy title" @desc="Dummy desc" @role="img"/>
 {{outlet}}