minutebase / ember-inline-svg Goto Github PK

I'm getting the following error in our app when building for production since upgrading to ember 3.27

Uncaught (in promise) TypeError: (0 , t.htmlSafe) is not a function

This line https://github.com/minutebase/ember-inline-svg/blob/master/addon/helpers/inline-svg.js#L1 should be changed to import from @ember/template instead of @ember/string

I've placed the helper like so:
{{inline-svg "assets/images/loader.svg"}}

Double checked the path.

Unfortunately I get:
Uncaught Error: Assertion Failed: A helper named 'inline-svg' could not be found

Is there something I'm missing?

ember-inline-svg expects the following format:

{{inline-svg "/path/to/my/image"}}

Out of habit, many people will write the following Handlebars code, which will cause an error:

{{inline-svg "/path/to/my/image.svg"}}

ember-inline-svg should chop off the .svg suffix, if present.

If you want your production app to get the fingerprinted SVGs from an asset host, you will use something like this in your ember-cli-build.js:

fingerprint: {
      ...
      prepend: 'https://domain.cloudfront.net/'
    },

This will fail to work with this addon. The path of the SVG + the prepended host will get 'dottified' at https://github.com/minutebase/ember-inline-svg/blob/master/app/helpers/inline-svg.js#L9. Then the lookup at https://github.com/minutebase/ember-inline-svg/blob/master/app/helpers/inline-svg.js#L15 doesn't work anymore, of course.
Either an option is needed for removing the appended host from path or this is done automatically. The later could be achieved by something like this in inlineSvg():

var clearedPath = path.substr(path.indexOf(Object.keys(SVGs)[0]));

Then only use clearedPath instead of path. Of course, you also need to get rid of the fingerprint. One possiblity would be using jsonPath.slice(0, -37) to get the SVG.
However, there are further additions necessary to make this work with multiple 'SVG Paths' specified in ember-cli-build.js.

I'd like to be able to store the SVGs for a component within the component pod itself, much like ember-css-modules enabled for CSS files. Is this something you'd be interested in supporting? I'd be willing to take a look at implementing it, if I knew it was something you might accept if done well.

In our application we see the following error:

[BABEL] Note: The code generator has deoptimised the styling of "my-app/svgs.js" as it exceeds the max of "100KB"

I believe this means Babel is trying to optimize this file. This plugin should exclude this file from Babel's optimization process.

I expected ember-inline-svg to traverse all .svgs in my public directory. As it turned out later, it only looks for .svgs in public/images by default.

Is there a specific reason for this, like performance gains? If not, I suggest changing the default path to just public. Different users have different directory structures and not everyone uses public/images. Nevertheless, the svg.paths array is still useful and should be kept as it is.

The output file is hard-coded to svgs.js, in the app tree.

For projects with lots of SVG files, the size of svgs.js can be very large. Some projects don't have any SVGs on their initial page, so they could lazy load svgs.js separately from the project's main .js file and significantly decrease the time that their apps take to load, especially on a mobile device with a slower network.

broccoli-funnel doesn't seem to be able to exclude the svgs.js file, which would have been a possible solution.

Does this library support retrieving an SVG from another domain? We host our assets on another domain.

I'm also kinda wondering why this is helper?

It'd be great if we could wrap this in something like:

{{#if this.someCondition}}
  <InlineSvg @path={{this.path}} ...attributes />
{{/if}}

there the invocation could then become:

<MyIcon class='blue' />

I'm using ember-cli-node-assets addon which copies an icon library to my public folder at runtime. In my templates, I can use an standard image tag to load the SVG, but with the handlebars helper

{{!-- This works --}}
<img src="assets/calcite-web/img/icons/ui/share.svg" alt="">

{{!-- This does not work --}}
{{inline-svg "assets/calcite-web/img/icons/ui/share"}}

I get the following error:

I'm just using the default options. There's no entry in my ember-cli-build.js file.

Would be helpful in cases where we need to style the svg using dynamically generated values or values from an external source..

After installing via npm install --save-dev ember-inline-svg, ember serve doesn't work anymore.

ember serve yields this output:

version: 0.1.4
Could not find watchman, falling back to NodeWatcher for file system events
Livereload server on port 35729
Serving on http://0.0.0.0:4200/

The build doesn't happen or doesn't get finished. If it was finished, this would be displayed:

version: 0.1.4
Could not find watchman, falling back to NodeWatcher for file system events
Livereload server on port 35729
Serving on http://0.0.0.0:4200/

Build successful - 1209ms.

Slowest Trees                  | Total          
-------------------------------+----------------
SassCompiler                   | 282ms          
EsnextFilter                   | 238ms          
EsnextFilter                   | 127ms          
Concat                         | 79ms   

ember-inline-svg fails importing an svg from an addon's public/ folder.

I would like to inline an svg from an addon's public/ folder both in the main app and in the addon itself.

If I would know how, I would have written these tests myself, but I couldn't find any resources on writing tests for error / exception handling with broccoli. So the untested cases we have are:

• Test that ember-inline-svg throws an error during build time, if an SVG optimization has failed.
• Test that ember-inline-svg emits an "empty" svg.js, if there are no .svg files present.

Another case that is untested:

• Throw an error, if the handlebars helper could not find the coresponding .svg. StackOverflow
  • Refactor tests

This one is easy to fix tho. Expect a PR soon.
Edit: Not so easy as I thought. Here be StackOverflow.

My SVG was inlined correctly like this:

    {{#link-to "games.index"}}
      <figure class="logo-full">
        {{inline-svg "/images/app-logo.svg"}}
      </figure>
    {{/link-to}}

However, once I configured SVGs to be fingerprinted, it stopped working. Now it renders nothing.

Is this supposed to work with fingerprinting?

This isn’t an issue per se. More a cautionary tale for other users.

Our app was spending around ~500ms in Flatiron during incremental builds. Turns out this was due to several large SVG fonts in public/fonts.

Simple fix: configure ember-inline-svg just to target public/images.

Thanks for the awesome addon 😁

ember-svg-inline detects the .svg files, but returns an empty / undefined output.

define("canvas/svgs", 
  ["exports"],
  function(__exports__) {
    "use strict";
    __exports__["default"] = { application:{ logo:"undefined" } };
  }
);//# sourceURL=canvas/svgs.js"

This is due to the optimizer. Setting svg.optimize = false solves the problem.

Getting the following deprectation warning when doing an ember s after updating to [email protected]

An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from: new NPMDependencyVersionChecker

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Code Injection                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ js-yaml                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=3.13.1                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ ember-inline-svg                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ ember-inline-svg > svgo > js-yaml                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/813                         │
└───────────────┴──────────────────────────────────────────────────────────────┘

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate      │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ js-yaml                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=3.13.0                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ ember-inline-svg                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ ember-inline-svg > svgo > js-yaml                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/788                         │
└───────────────┴──────────────────────────────────────────────────────────────┘

Dependency svgo should be upgraded to 1.2.2

Hey Richard,

Like the plugin and have it working but only after manually configuring the Brocfile:

var app = new EmberApp({
    svg: {
        paths: [
          'public/images'
        ]
      }
});

which based on your instructions should be default behaviour but when I used that I was getting an error that it couldn't locate the SVG.

ember-inline-svg is working well for me in development, but it fails when I deploy a staging or production build.

Assertion Failed: No SVG found for https://s3-ap-southeast-2.amazonaws.com/my-asset-bucket/assets/images/my_svg-ba344c0da7825ce242e302595e5122fe.svg

If I visit https://s3-ap-southeast-2.amazonaws.com/my-asset-bucket/assets/images/my_svg-ba344c0da7825ce242e302595e5122fe.svg, then the SVG is available.

I'm currently attempting to debug the issue. I've tried moving my SVGs to public/assets/inline-svg, and changing the svg.paths setting in ember-cli-build.js. However, ember-inline-svg seems to ignore this config, and looks for the image in public/assets/images.

I've worked through the checklist at https://github.com/minutebase/ember-inline-svg#no-svg-found--the-handlebars-template-is-not-rendered, but am still hitting the issue in staging / production.

http://emberjs.com/deprecations/v2.x/#toc_use-ember-string-htmlsafe-over-ember-handlebars-safestring

Ran into this problem where I was setting a class within a template on an SVG (concat "icon-" iconName). Some of my SVGs have classes already on the element, and the applyClass utility overwrites those classes.

I threw together #36 as a quick solution. A similar solution could be used to set any attribute on the SVG, with a little more tweaking.

I noticed a conversation going on about componentizing the helper, so this may not be worth moving forward with. Figured I'd bring up the issue here. Would be happy to contribute towards this PR or componentizing in general.

When processing huge or lots of .svg files, the build time gets extremely slow with the default configuration. The problem vanishes, when the optimization is disabled: optimize: false

This has two possible causes:

• If svgo is enabled, the caching doesn't work properly.
• The caching doesn't work at all.

Expected behaviour: Each .svg file is tracked individually and only re-processed, if it actually changes.

I will look into this. Originally reported in #14.

This is tracking issue to get project up to date from maintenance side.

• Upgrade Ember.js to v3.28 -> #112
• Upgrade other dependencies ⌛
  • #114
  • #115
• Write change log + release v2.x major

Run yarn audit. Make sure your yarn/npm version supports audit.

1641 vulnerabilities found - Packages audited: 37779
Severity: 8 Low | 1628 Moderate | 5 High

There's a way to inline-svg receive an action?

Something like: {{ inline-svg click=(action "toggleProperty") 'svg-name' }}

Thanks in advance.

You are using SVGO v0.6.6 which was released almost 2 years ago. Many features and plugins were released since. See the last SVGO releases.

Please update SVGO.

Vendor.js file is often the same between app deployments and cached for longer time. Therefore existing visitors to Ember app using this addon would have to download less data for app upgrade. Less data served, especially on mobile networks is always better.

viewBox property which is present on original svg file is being removed on usage with inline-svg helper. This started happening after we upgraded from 0.1.12 to 0.2.1.

I have install svgo globally using yarn global add svgo and it is available in the command line. However I encounter the following issue when I try to start Ember server.

It is working fine when I disable SVG optimise using snippet below,

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    svg: {
      optimize: false
    }
  });
  // ...
}

Snippet Below is the error trace when I using add-on's default configuration.

➜  MemoCycle git:(master) ✗ ember s
Livereload server on http://localhost:49153
Serving on http://localhost:4200/

The Broccoli Plugin: [SVGOptimizer] failed with:
TypeError: Cannot read property 'filter' of undefined
    at monkeys (/Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo/plugins.js:46:38)
    at perItem (/Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo/plugins.js:77:12)
    at /Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo/plugins.js:18:24
    at Array.forEach (native)
    at module.exports (/Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo/plugins.js:14:13)
    at /Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo.js:63:17
    at Object.sax.onend (/Users/li-xinyang/Desktop/MemoCycle/node_modules/svgo/lib/svgo/svg2js.js:156:13)
    at emit (/Users/li-xinyang/Desktop/MemoCycle/node_modules/sax/lib/sax.js:640:35)
    at end (/Users/li-xinyang/Desktop/MemoCycle/node_modules/sax/lib/sax.js:683:5)
    at Object.write (/Users/li-xinyang/Desktop/MemoCycle/node_modules/sax/lib/sax.js:991:14)

The broccoli plugin was instantiated at:
    at SVGOptimizer.Plugin (/Users/li-xinyang/Desktop/MemoCycle/node_modules/broccoli-plugin/index.js:7:31)
    at SVGOptimizer.CachingWriter [as constructor] (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-inline-svg/node_modules/broccoli-caching-writer/index.js:18:10)
    at new SVGOptimizer (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-inline-svg/svg-optimizer.js:18:10)
    at Class.optimizeSVGs (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-inline-svg/index.js:41:12)
    at Class.treeForApp (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-inline-svg/index.js:53:17)
    at Class._treeFor (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-cli/lib/models/addon.js:517:33)
    at Class.treeFor (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-cli/lib/models/addon.js:477:21)
    at project.addons.map.addon (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-cli/lib/broccoli/ember-app.js:525:20)
    at Array.map (native)
    at EmberApp.addonTreesFor (/Users/li-xinyang/Desktop/MemoCycle/node_modules/ember-cli/lib/broccoli/ember-app.js:523:30)