Merge pull request #252 from evoactivity/embroider-issues

Update asset inlining strategy

.github/workflows/ci-bsvg.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: '14'
+  NODE_VERSION: '16'
 
 jobs:
   lint_and_test:

.github/workflows/ci-ember-svg-jar.yml

@@ -38,7 +38,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: '14'
+  NODE_VERSION: '16'
 
 jobs:
   lint:

.gitignore

@@ -118,3 +118,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+yarn.lock.*

packages/ember-svg-jar/addon/helpers/svg-jar.js

@@ -0,0 +1,19 @@
+import { helper } from '@ember/component/helper';
+import makeSVG from 'ember-svg-jar/utils/make-svg';
+import assets from '../inlined';
+
+function getInlineAsset(assetId) {
+  try {
+    return assets[assetId]().default;
+  } catch (err) {
+    return null;
+  }
+}
+
+export function svgJar(assetId, svgAttrs) {
+  return makeSVG(assetId, svgAttrs, getInlineAsset);
+}
+
+export default helper(function svgJarHelper([assetId], svgAttrs) {
+  return svgJar(assetId, svgAttrs);
+});

packages/ember-svg-jar/app/helpers/svg-jar.js

@@ -1,19 +1 @@
-import { helper } from '@ember/component/helper';
-import makeSVG from 'ember-svg-jar/utils/make-svg';
-
-function getInlineAsset(assetId) {
-  try {
-    /* eslint-disable global-require */
-    return require(`ember-svg-jar/inlined/${assetId}`).default;
-  } catch (err) {
-    return null;
-  }
-}
-
-export function svgJar(assetId, svgAttrs) {
-  return makeSVG(assetId, svgAttrs, getInlineAsset);
-}
-
-export default helper(function svgJarHelper([assetId], svgAttrs) {
-  return svgJar(assetId, svgAttrs);
-});
+export { default, svgJar } from 'ember-svg-jar/helpers/svg-jar';

packages/ember-svg-jar/lib/inline-packer.js

@@ -42,14 +42,32 @@ class InlinePacker extends CachingWriter {
     let outputPath = path.join(toPosixPath(this.outputPath), 'inlined');
     let { makeAssetID } = this.options;
 
+    const assets = [];
+
     this.listFiles().forEach(_filePath => {
-      let filePath = toPosixPath(_filePath);
-      let relativePath = relativePathFor(filePath, inputPath);
-      let modulePath = path.join(outputPath, `${makeAssetID(relativePath)}.js`);
-      let svgData = svgDataFor(readFile(filePath));
+      const filePath = toPosixPath(_filePath);
+      const relativePath = relativePathFor(filePath, inputPath);
+      const jsName = makeAssetID(relativePath);
+      const modulePath = path.join(outputPath, `${jsName}.js`);
+      const svgData = svgDataFor(readFile(filePath));
 
       saveToFile(modulePath, `export default ${JSON.stringify(svgData)}`);
+
+      assets.push(jsName);
     });
+
+    // Generate index.js that contains methods to import each asset
+    const contents = `import { importSync } from '@embroider/macros';
+      const obj = {
+        ${assets
+          .map(asset => {
+            const assetName = asset.replace(/'/g, "\\'");
+            return `['${assetName}']: function() { return importSync('./${assetName}'); }`;
+          })
+          .join(',\n')}
+      }; export default obj;`;
+
+    saveToFile(path.join(outputPath, `index.js`), contents);
   }
 }
 

packages/ember-svg-jar/node-tests/acceptance/inline-packer-test.js

@@ -16,6 +16,8 @@ describe('InlinePacker', function () {
     let inputNode = new fixture.Node({
       'foo.svg': '<svg viewBox="0 0 1 1"><path d="foo"/></svg>',
       'bar.svg': '<svg height="10px" viewBox="0 0 2 2"><path d="bar"/></svg>',
+      "apost'rophe.svg":
+        '<svg height="10px" viewBox="0 0 2 2"><path d="bar"/></svg>',
     });
 
     let options = {
@@ -32,10 +34,14 @@ describe('InlinePacker', function () {
 
     let expected = {
       inlined: {
+        "apost'rophe.js":
+          'export default {"content":"<path d=\\"bar\\"/>","attrs":{"height":"10px","viewBox":"0 0 2 2"}}',
         'foo.js':
           'export default {"content":"<path d=\\"foo\\"/>","attrs":{"viewBox":"0 0 1 1"}}',
         'bar.js':
           'export default {"content":"<path d=\\"bar\\"/>","attrs":{"height":"10px","viewBox":"0 0 2 2"}}',
+        'index.js':
+          "import { importSync } from '@embroider/macros';\n      const obj = {\n        ['apost\\'rophe']: function() { return importSync('./apost\\'rophe'); },\n['bar']: function() { return importSync('./bar'); },\n['foo']: function() { return importSync('./foo'); }\n      }; export default obj;",
       },
     };
 

packages/ember-svg-jar/package.json

@@ -34,6 +34,7 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
+    "@embroider/macros": "^1.12.2",
     "broccoli-caching-writer": "^3.0.3",
     "broccoli-concat": "^4.2.5",
     "broccoli-funnel": "^3.0.8",
@@ -51,8 +52,9 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
+    "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^2.6.0",
-    "@embroider/test-setup": "^1.2.0",
+    "@embroider/test-setup": "^3.0.1",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@types/ember__component": "^4.0.8",
@@ -65,17 +67,16 @@
     "ember-auto-import": "^2.2.0",
     "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-fastboot": "^3.3.2",
-    "ember-cli-fastboot-testing": "^0.6.0",
+    "ember-cli-fastboot": "^4.1.1",
+    "ember-cli-fastboot-testing": "^0.6.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^1.0.0",
     "ember-qunit": "^5.1.4",
-    "ember-resolver": "^8.0.2",
+    "ember-resolver": "^10.1.1",
     "ember-source": "~3.28.8",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.0.0",

packages/ember-svg-jar/tests/integration/helpers/svg-jar-test.js

@@ -251,4 +251,10 @@ module('Integration | Helper | svg-jar', function (hooks) {
     assert.dom('desc').hasText('<div>evil string</div>');
     assert.strictEqual(document.querySelector('svg desc').children.length, 0);
   });
+
+  test('it can handle files with apostrophes in their names', async function (assert) {
+    await render(hbs`{{svg-jar "apos'trophe" data-test-id="one"}}`);
+
+    assert.dom('[data-test-id="one"]').exists();
+  });
 });