RubyGems - esvg - Versions diffs - 3.2.0 → 4.0.0 - Mend

esvg 3.2.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5df426e77287c9878d1d1e4015cb0e53b587bb5a
-  data.tar.gz: 37c2c9e0f77f3898afdef009a59fecaae870fbec
+  metadata.gz: 103e4a996c91ea83c6ce587b3f6c7f9f21e1f3ab
+  data.tar.gz: e221e24b800402c241ade048d560fd578086d741
 SHA512:
-  metadata.gz: dbcb61a40159c48fef3e224b3a83723ef243d224acb6eff08b2c42032c66471b214e3d16ef6399abeb80d3c13c4f86ed5e4b6766cefa21fc4ee5d0026c5f7b32
-  data.tar.gz: 3305442d217788371c21e7c9f069522257c1d1f38dd85bef58ea996904a3197201ac5ab086b2c306a4db733ad092df56b107d22620bdbdfd72558a970bb77d06
+  metadata.gz: 48afc2004b3768882d80f17d338bf476116584005694c20e737ccdc0a411a67fcc1446aa50641ddcfbe214e6ed861f8e848a610b26c042129db653f23433a577
+  data.tar.gz: e2637534ae3808537b3b8619433d959584d9f69a2b0a078d6a8b77e964e5cbbb1647480629f55269b9639d3bc5a7c7c54ff4e3adb0f5dae988bcc1421df83503

data/.gitignore CHANGED Viewed

@@ -10,4 +10,5 @@
 /test/build
 /test/optimized
 .DS_Store
+.esvg-cache
 node_modules

data/.travis.yml CHANGED Viewed

@@ -2,4 +2,4 @@ language: ruby
 rvm:
   - 2.1.2
 before_install: gem install bundler -v 1.10.3
-script: bundle exec clash
+script: bundle exec clash 1-4

data/README.md CHANGED Viewed

@@ -1,9 +1,9 @@
 # Esvg
-Easily embed optimized SVGs in JS or HTML. Use as a standalone tool or with Rails.
+Easly slip optimized, cached svgs into your workflow using standalone CLI or the simple Rails integration.
-1. Converts a directory full of SVGs into a single optimized SVG using symbols.
-2. Uses Javascript to inject SVGs into pages, so it's easily cacheable.
+1. Converts a directory full of SVGs into a an optimized SVG using symbols for each file.
+2. Build a Javascript file to inject SVGs into pages, so it's easily cacheable.
 3. Offers Rails application helpers for placing icons in your views.
 [![Gem Version](http://img.shields.io/gem/v/esvg.svg)](https://rubygems.org/gems/esvg)
@@ -28,63 +28,75 @@ Or install it yourself as:
 ## Usage: Rails
-First, add SVG files to your `app/assets/esvg/` directory.
+Add `Esvg.precompile_assets` to your `config/initializers/assets.rb` to add build with `rake assets:precomile`.
-### Inject SVG symbols
+Add SVG files to your `app/assets/svgs/` directory.
-Then create an `esvg.js.erb` in your `app/assets/javascripts/` and add the following:
+for example:
 ```
-<%= Esvg.embed %>
+app/assets/svgs
+ - logo.svg
+ - share.svg
+ - thumbs-up.svg
 ```
-Finally add the following to your `application.js`
+### Inject SVG symbols
+Add this to a page or layout where SVGs should be available
 ```
-//= require esvg
+<%= embed_svgs %>
 ```
-This script will inject your SVG symbols at the top of your site's `<body>` as soon as the DOM is ready, and after any Turbolinks `page:change` event.
+**During development:**
+This will embed a `<script>` which will place svg symbols at the top of your site's `<body>` as soon as the DOM is ready, and after any Turbolinks page load events.
+**In Production:**
+The `embed_svgs` view helper will write a `javascript_include_tag` to include the script (rather than embeding it in the page).
+When you run `rake assets:precompile` this script will be built to `public/assets/svgs-{fingerprint}.js` (and a gzipped version).
+This allows browsers to cache the javascript files and reduce the weight of downloading svgs for each page.
-### Place an icon
+### Placing an SVG
-To place an SVG icon, use the `svg_icon` helper. This helper will embed an SVG `use` tag which will reference the appropriate symbol. Here's how it works.
+To place an SVG, use the `use_svg` vew helper. This helper will embed an SVG `use` tag which will reference the appropriate symbol. Here's how it works.
 ```
-# Syntax: svg_icon name, [options]
+# Syntax: use_svg name, [options]
 # Standard example
-<%= svg_icon 'kitten' %>
+<%= use_svg 'logo' %>
 # Output:
-# <svg class="icon kitten-icon"><use xlink:href="#kitten-icon"/></svg>
+# <svg class="svg-symbol svg-logo"><use xlink:href="#svg-logo"/></svg>
 # Add custom classnames
-<%= svg_icon 'kitten', class: 'adorbs' %>
+<%= use_svg 'share', class: 'disabled' %>
 # Output:
-# <svg class="icon kitten-icon adorbs"><use xlink:href="#kitten-icon"/></svg>
-# Provide fallback icon if an icon is missing
-<%= svg_icon 'missing', fallback: 'kitten' %>
-# Output:
-# <svg class="icon kitten-icon"><use xlink:href="#kitten-icon"/></svg>
+# <svg class="svg-symbol svg-share disabled"><use xlink:href="#svg-share"/></svg>
 # Add custom styles
-<%= svg_icon 'kitten', style: 'color: #c0ffee' %>
+<%= use_svg 'logo', style: 'fill: #c0ffee' %>
 # Output:
-# <svg class="icon kitten-icon" style="color: #coffee;"><use xlink:href="#kitten-icon"/></svg>
+# <svg class="svg-symbol svg-logo" style="fill: #coffee;"><use xlink:href="#svg-logo"/></svg>
 # Add title and desc tags for SVG accessibility.
-<%= svg_icon 'kitten', title: "Mr. Snuggles", desc: "A graphic of a cat snuggling a ball of yarn" %>
+<%= use_svg 'kitten', title: "Mr. Snuggles", desc: "A graphic of a cat snuggling a ball of yarn" %>
 # Output:
 # <svg class="icon kitten-icon"><use xlink:href="#kitten-icon"/>
 #   <title>Mr. Snuggles</title>
 #   <desc>A graphic of a cat snuggling a ball of yarn</desc>
 # </svg>
+# Provide fallback icon if an icon is missing (great for when you are generating icon names from code)
+<%= use_svg 'missing', fallback: 'default' %>
 ```
 ## Usage: stand-alone CLI
@@ -94,10 +106,10 @@ To place an SVG icon, use the `svg_icon` helper. This helper will embed an SVG `
 $ esvg PATH [options]
 # Examples:
-$ esvg                          # Read icons from current directory, write js to ./esvg.js
-$ esvg icons                    # Read icons from 'icons' directory, write js to ./esvg.js
-$ esvg --output embedded        # Read icons from current directory, write js to embedded/esvg.js
-$ esvg -c --config foo.yml      # Read confguration from foo.yml (otherwise, defaults to esvg.yml, or config/esvg.yml)
+$ esvg                      # Read icons from current directory, write js to ./svgs.js
+$ esvg icons                # Read icons from 'icons' directory, write js to ./svgs.js
+$ esvg --output build       # Read icons from current directory, write js to build/svgs.js
+$ esvg -c --config foo.yml  # Read confguration from foo.yml (otherwise, defaults to esvg.yml, or config/esvg.yml)
 ```
 ## Configuration
@@ -105,13 +117,14 @@ $ esvg -c --config foo.yml      # Read confguration from foo.yml (otherwise, def
 If you're using esvg from the command line, configuration files are read from `./esvg.yml` or you can pass a path with the `--config` option to read the config file from elsewhere.
 ```
-path: .                     # Where to find SVG icons (Rails defaults to app/assets/esvg)
-output_path: .              # Where to write output files (CLI only)
-format: js                  # Format for output (js, html)
-base_class: svg-icon        # Select all icons with this base classname
-namespace: icon             # Namespace for symbol ids
-namespace_before: true      # Add namespace before, e.g. icon-kitten
+source: .                   # Where to find SVG icons (Rails defaults to app/assets/esvg)
+build: .                    # Where to write build files
+assets: .                   # Where to write asset files (builds for directories beginning in _)
+tmp: .                      # Write temporary cache files (will write to #{dir}/.esvg-cache/
+class: svg-symbol           # All svgs with `use_svg` will have this base classname
+namespace: svg              # Namespace for symbol ids, e.g 'svg-logo'
+namespace_before: true      # Add namespace before, e.g. 'svg-logo', false would be 'logo-svg'
 alias:                      # Add aliases for icon names
   comment: chat             # use "chat" to reference comment.svg

data/exe/esvg CHANGED Viewed

@@ -8,12 +8,8 @@ require 'esvg'
 options = {}
 OptionParser.new do |opts|
-  opts.on("-f", "--format TYPE", String, "Options: js, html (defaults to js)") do |format|
-    options[:format] = format
-  end
   opts.on("-o", "--output PATH", String, "Where should JS/HTML files be written, (default: current directory)") do |path|
-    options[:output_path] = path
+    options[:build] = path
   end
   opts.on("-c", "--config PATH", String, "Path to a config file (default: esvg.yml, config/esvg.yml)") do |path|
@@ -24,11 +20,11 @@ OptionParser.new do |opts|
     options[:rails] = true
   end
-  opts.on("-O", "--optimize", "Optimize svgs with svgo") do |svgo|
-    options[:optimize] = svgo
+  opts.on("-O", "--optimize", "Optimize svgs with svgo") do
+    options[:optimize] = true
   end
-  opts.on("-v", "--version", "Print version") do |version|
+  opts.on("-v", "--version", "Print version") do
     options[:version] = true
   end
@@ -39,9 +35,9 @@ if options[:version]
 else
   if path = ARGV.shift
-    options[:path] = path
+    options[:source] = path
   end
-  options[:cli] = true
-  esvg = Esvg::SVG.new(options).write
+  options[:print] = true
+  esvg = Esvg::SVG.new(options).build
 end

data/lib/esvg.rb CHANGED Viewed

@@ -19,12 +19,23 @@ module Esvg
     @svgs
   end
-  def embed
-    new.embed
+  def embed(key)
+    new.embed(key)
   end
   def rails?
     defined?(Rails)
   end
+  def build(options={})
+    new(options).build
+  end
+  def precompile_assets
+    if rails? && defined?(Rake)
+      ::Rake::Task['assets:precompile'].enhance do
+        build(compress: true, print: true)
+      end
+    end
+  end
 end

data/lib/esvg/helpers.rb CHANGED Viewed

@@ -1,17 +1,24 @@
 module Esvg::Helpers
-  def svg_icons(options={})
-    svgs = Esvg.svgs
-    if svgs.nil? || !options.empty?
-      svgs = Esvg.new(options)
+  def embed_svgs(*keys)
+    if Rails.env.production?
+      esvg_files.build_paths(keys).each do |path|
+        javascript_include_tag(path)
+      end.join("\n")
+    else
+      esvg_files.embed_script(keys).html_safe
     end
+  end
+  def use_svg(name, options={})
+    esvg_files.use(name, options).html_safe
+  end
+  def esvg_files
+    svgs = Esvg.svgs || Esvg.new()
     svgs.read_files if Rails.env.development?
     svgs
   end
-  def svg_icon(name, options={})
-    svg_icons.use(name, options).html_safe
-  end
 end

data/lib/esvg/svg.rb CHANGED Viewed

@@ -1,34 +1,38 @@
 require 'yaml'
 require 'json'
+require 'zlib'
 module Esvg
   class SVG
-    attr_accessor :files, :svgs, :last_read, :svg_cache
+    attr_accessor :svgs, :last_read, :svg_symbols
     CONFIG = {
-      base_class: 'svg-icon',
-      namespace: 'icon',
-      optimize: false,
+      filename: 'svgs',
+      class: 'svg-symbol',
+      namespace: 'svg',
+      core: true,
       namespace_before: true,
-      font_size: '1em',
-      verbose: false,
-      format: 'js',
+      optimize: false,
+      compress: false,
       throttle_read: 4,
       flatten: [],
       alias: {}
     }
     CONFIG_RAILS = {
-      path: "app/assets/esvg",
-      js_path: "app/assets/javascripts/esvg.js",
+      source: "app/assets/svgs",
+      assets: "app/assets/javascripts",
+      build: "public/assets",
+      temp: "tmp"
     }
     def initialize(options={})
       config(options)
+      @modules = {}
       @last_read = nil
-      @svg_cache = {}
+      read_cache
       read_files
     end
@@ -36,10 +40,10 @@ module Esvg
       @config ||= begin
         paths = [options[:config_file], 'config/esvg.yml', 'esvg.yml'].compact
-        config = CONFIG
+        config = CONFIG.dup
         if Esvg.rails? || options[:rails]
-          config.merge!(CONFIG_RAILS)
+          config.merge!(CONFIG_RAILS)
         end
         if path = paths.select{ |p| File.exist?(p)}.first
@@ -47,61 +51,21 @@ module Esvg
         end
         config.merge!(options)
-        config[:path] ||= Dir.pwd
-        config[:output_path] ||= Dir.pwd
-        if config[:cli]
-          config[:path] = File.expand_path(config[:path])
-          config[:output_path] = File.expand_path(config[:output_path])
-        end
+        config[:filename] = File.basename(config[:filename], '.*')
-        config[:js_path]        ||= File.join(config[:output_path], 'esvg.js')
-        config[:js_core_path]   ||= config[:js_path].sub(/[^\/]+?\./, '_esvg-core.')
-        config[:html_path]      ||= File.join(config[:output_path], 'esvg.html')
-        config.delete(:output_path)
-        config[:aliases] = load_aliases(config[:alias])
-        config[:flatten] = config[:flatten].map { |dir| File.join(dir, '/') }.join('|')
+        config[:pwd]      = File.expand_path Dir.pwd
+        config[:source]   = File.expand_path config[:source] || config[:pwd]
+        config[:build]    = File.expand_path config[:build]  || config[:pwd]
+        config[:assets]   = File.expand_path config[:assets] || config[:pwd]
-        config
-      end
-    end
+        config[:temp]     = config[:pwd] if config[:temp].nil?
+        config[:temp]     = File.expand_path File.join(config[:temp], '.esvg-cache')
-    # Load aliases from configuration.
-    #  returns a hash of aliasees mapped to a name.
-    #  Converts configuration YAML:
-    #    alias:
-    #      foo: bar
-    #      baz: zip, zop
-    #  To output:
-    #    { :bar => "foo", :zip => "baz", :zop => "baz" }
-    #
-    def load_aliases(aliases)
-      a = {}
-      aliases.each do |name,alternates|
-        alternates.split(',').each do |val|
-          a[dasherize(val.strip).to_sym] = dasherize(name.to_s)
-        end
-      end
-      a
-    end
-    def get_alias(name)
-      config[:aliases][dasherize(name).to_sym] || name
-    end
-    def embed
-      return if files.empty?
-      output = if config[:format] == "html"
-        html
-      elsif config[:format] == "js"
-        js
-      end
+        config[:aliases] = load_aliases(config[:alias])
+        config[:flatten] = [config[:flatten]].flatten.map { |dir| File.join(dir, '/') }.join('|')
-      if Esvg.rails?
-        output.html_safe
-      else
-        output
+        config
       end
     end
@@ -110,157 +74,219 @@ module Esvg
         return
       end
-      @files = {}
       # Get a list of svg files and modification times
       #
-      find_files.each do |f|
-        files[f] = File.mtime(f)
-      end
+      find_files
+      write_cache
       @last_read = Time.now.to_i
-      puts "Read #{files.size} files from #{config[:path]}" if config[:cli]
+      puts "Read #{svgs.size} files from #{config[:source]}" if config[:print]
-      process_files
-      if files.empty? && config[:cli]
-        puts "No svgs found at #{config[:path]}"
+      if svgs.empty? && config[:print]
+        puts "No svgs found at #{config[:source]}"
       end
     end
-    # Add new svgs, update modified svgs, remove deleted svgs
-    #
-    def process_files
-      @svgs = {}
+    def find_files
+      files = Dir[File.join(config[:source], '**/*.svg')].uniq.sort
+      # Remove deleted files from svg cache
+      (svgs.keys - file_keys(files)).each { |f| svgs.delete(f) }
+      dirs = {}
+      files.each do |path|
-      files.each do |path, mtime|
-        key = file_key( path )
+        mtime = File.mtime(path).to_i
+        key = file_key path
+        dkey = dir_key path
-        if svg_cache[key].nil? || svg_cache[key][:last_modified] != mtime
-          svg_cache[key] = process_file(path, mtime, key)
+        # Use cache if possible
+        if svgs[key].nil? || svgs[key][:last_modified] != mtime
+          svgs[key] = process_file(path, mtime, key)
         end
-        svgs[File.dirname( flatten_path( path ) )] ||= {}
-        svgs[File.dirname( flatten_path( path ) )][key] = svg_cache[key]
+        dirs[dkey]           ||= {}
+        (dirs[dkey][:files]  ||= []) << key
+        if dirs[dkey][:last_modified].nil? || dirs[dkey][:last_modified] < mtime
+          dirs[dkey][:last_modified] = mtime
+        end
       end
-      # Remove deleted svgs
-      #
-      (svg_cache.keys - files.keys.map {|file| file_key(file) }).each do |f|
-        svg_cache.delete(f)
+      dirs = sort(dirs)
+      # Remove deleted directories from svg_symbols cache
+      (svg_symbols.keys - dirs.keys).each {|dir| svg_symbols.delete(dir) }
+      dirs.each do |dir, data|
+        # overwrite cache if
+        if svg_symbols[dir].nil?                                   || # No cache for this dir yet
+          svg_symbols[dir][:last_modified] != data[:last_modified] || # New or updated file
+          svg_symbols[dir][:optimized] != optimize?                || # Cache is unoptimized
+          svg_symbols[dir][:files] != data[:files]                    # Changed files
+          symbols    = data[:files].map { |f| svgs[f][:content] }.join
+          attributes = data[:files].map { |f| svgs[f][:attr] }
+          svg_symbols[dir] = data.merge({
+            name: dir,
+            symbols: optimize(symbols, attributes),
+            optimized: optimize?,
+            version: config[:version] || Digest::MD5.hexdigest(symbols),
+            asset: File.basename(dir).start_with?('_')
+          })
+        end
+        svg_symbols.keys.each do |dir|
+          svg_symbols[dir][:path] = write_path(dir)
+        end
       end
+      @svg_symbols = sort(@svg_symbols)
+      @svgs = sort(@svgs)
+    end
+    def read_cache
+      @svgs        = YAML.load(read_tmp '.svgs') || {}
+      @svg_symbols = YAML.load(read_tmp '.svg_symbols') || {}
+    end
+    def write_cache
+      return if production?
+      write_tmp '.svgs', sort(@svgs).to_yaml
+      write_tmp '.svg_symbols', sort(@svg_symbols).to_yaml
     end
-    def build_paths
-      build_keys = svgs.keys.reject do |key|
-        key == '.' ||
-        key.match(/^_/) ||
-        config[:flatten].include?(key)
+    def sort(hash)
+      sorted = {}
+      hash.sort.each do |h|
+        sorted[h.first] = h.last
       end
+      sorted
+    end
-      build_keys.map { | key | File.expand_path(build_path(key)) }
+    def embed_script(key=nil)
+      if script = js(key)
+        "<script>#{script}</script>"
+      else
+        ''
+      end
     end
-    def flatten_path(path)
-      root_path = File.expand_path(config[:path])
+    def build_paths(keys=nil)
+      build_files(keys).map { |s| File.basename(s[:path]) }
+    end
-      path.sub("#{root_path}/",'').sub('.svg', '')
-          .sub(Regexp.new(config[:flatten]), '')
+    def build_files(keys=nil)
+      valid_keys(keys).reject do |k|
+        svg_symbols[k][:asset]
+      end.map { |k| svg_symbols[k] }
     end
-    def file_key(path)
-      dasherize flatten_path(path)
+    def asset_files(keys=nil)
+      valid_keys(keys).select do |k|
+        svg_symbols[k][:asset]
+      end.map { |k| svg_symbols[k] }
     end
     def process_file(file, mtime, name)
-      content = File.read(file).gsub(/<?.+\?>/,'').gsub(/<!.+?>/,'')
-      {
+      content   = File.read(file)
+      classname = classname(name)
+      size_attr = dimensions(content)
+      svg = {
         name: name,
-        content: content,
-        use: use_svg(name, content),
-        last_modified: mtime
+        use: %Q{<use xlink:href="##{classname}"/>},
+        last_modified: mtime,
+        attr: { class: classname }.merge(dimensions(content))
       }
-    end
+      # Add attributes
+      svg[:content] = prep_svg(content, svg[:attr])
-    def use_svg(file, content)
-      name = classname get_alias(file)
-      viewbox = content.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten.first
-      %Q{<svg class="#{config[:base_class]} #{name}" #{viewbox}><use xlink:href="##{name}"/></svg>}
+      svg
     end
-    def svg_icon(file, options={})
-      name = dasherize file
-      if !exist?(name)
-        if fallback = options.delete(:fallback)
-          svg_icon(fallback, options)
-        else
-          if Esvg.rails? && Rails.env.production?
-            return ''
-          else
-            raise "no svg named '#{get_alias(file)}' exists at #{config[:path]}"
-          end
-        end
-      else
-        embed = use_icon(name)
-        embed = embed.sub(/class="(.+?)"/, 'class="\1 '+options[:class]+'"') if options[:class]
+    def use(file, options={})
+      if name = exist?(file, options[:fallback])
+        svg = svgs[name]
         if options[:color]
           options[:style] ||= ''
-          options[:style] += ";color:#{options[:color]};"
+          options[:style] += "color:#{options[:color]};#{options[:style]}"
         end
-        embed = add_attribute(embed, 'style', options[:style], ';')
-        embed = add_attribute(embed, 'fill', options[:fill])
-        embed = add_attribute(embed, 'height', options[:height])
-        embed = add_attribute(embed, 'width', options[:width])
+        attr = {
+          fill:   options[:fill],
+          style:  options[:style],
+          viewbox: svg[:attr][:viewbox],
+          classname: [config[:class], svg[:attr][:class], options[:class]].compact.join(' ')
+        }
-        embed = embed.sub(/><\/svg/, ">#{title(options)}#{desc(options)}</svg")
+        # If user doesn't pass a size or set scale: true
+        if !(options[:width] || options[:height] || options[:scale])
-        if Esvg.rails?
-          embed.html_safe
+          # default to svg dimensions
+          attr[:width]  = svg[:attr][:width]
+          attr[:height] = svg[:attr][:height]
         else
-          embed
+          # Add sizes (nil options will be stripped)
+          attr[:width]  = options[:width]
+          attr[:height] = options[:height]
         end
-      end
-    end
-    alias :use :svg_icon
+        use = %Q{<svg #{attributes(attr)}>#{svg[:use]}#{title(options)}#{desc(options)}</svg>}
-    def add_attribute(tag, attr, content=nil, append=false)
-      return tag if content.nil?
-      content = content.to_s
-      if tag.match(/#{attr}/)
-        if append
-          tag.sub(/#{attr}="(.+?)"/, attr+'="\1'+append+content+'"')
+        if Esvg.rails?
+          use.html_safe
         else
-          tag.sub(/#{attr}=".+?"/, attr+'="'+content+'"')
+          use
         end
       else
-        tag.sub(/><use/, %Q{ #{attr}="#{content}"><use})
+        if production?
+          return ''
+        else
+          raise "no svg named '#{get_alias(file)}' exists at #{config[:source]}"
+        end
       end
     end
+    alias :svg_icon :use
     def dimensions(input)
-      dimension = input.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten
-      viewbox = dimension.first
-      coords = dimension.last.split(' ')
+      viewbox = input.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten.last
+      coords  = viewbox.split(' ')
-      width = coords[2].to_i - coords[0].to_i
-      height = coords[3].to_i - coords[1].to_i
-      %Q{#{viewbox} width="#{width}" height="#{height}"}
+      {
+        viewbox: viewbox,
+        width: coords[2].to_i - coords[0].to_i,
+        height: coords[3].to_i - coords[1].to_i
+      }
     end
-    def use_icon(name)
-      name = get_alias(name)
-      svg_cache[name][:use]
+    def attributes(hash)
+      att = []
+      hash.each do |key, value|
+        att << %Q{#{key}="#{value}"} unless value.nil?
+      end
+      att.join(' ')
     end
-    def exist?(name)
-      name = get_alias(name)
-      !svg_cache[name].nil?
+    def exist?(name, fallback=nil)
+      name = get_alias dasherize(name)
+      if svgs[name].nil?
+        exist?(fallback) if fallback
+      else
+        name
+      end
     end
     alias_method :exists?, :exist?
@@ -277,12 +303,6 @@ module Esvg
       input.gsub(/[\W,_]/, '-').sub(/^-/,'').gsub(/-{2,}/, '-')
     end
-    def find_files
-      path = File.expand_path(File.join(config[:path], '**/*.svg'))
-      Dir[path].uniq
-    end
     def title(options)
       if options[:title]
         "<title>#{options[:title]}</title>"
@@ -299,104 +319,224 @@ module Esvg
       end
     end
-    def write
-      return if @files.empty?
-      write_paths = case config[:format]
-      when "html"
-        write_html
-      when "js"
-        write_js
+    def version(key)
+      svg_symbols[key][:version]
+    end
+    def build
+      paths = write_files svg_symbols.values
+      if config[:core]
+        path = File.join config[:assets], "_esvg.js"
+        write_file(path, js_core)
+        paths << path
       end
-      write_paths.each do |path|
-        puts "Written to #{log_path path}" if config[:cli]
+      paths
+    end
+    def write_files(files)
+      paths = []
+      files.each do |file|
+        if file[:asset] || !File.exist?(file[:path])
+          write_file(file[:path], js(file[:name]))
+          puts "Writing #{file[:path]}" if config[:print]
+          paths << file[:path]
+          if !file[:asset] && gz = compress(file[:path])
+            puts "Writing #{gz}" if config[:print]
+            paths << gz
+          end
+        end
       end
-      write_paths
+      paths
     end
-    def log_path(path)
-      File.expand_path(path).sub(File.expand_path(Dir.pwd), '').sub(/^\//,'')
+    def symbols(keys)
+      symbols = valid_keys(keys).map { |key|
+        svg_symbols[key][:symbols]
+      }.join.gsub(/\n/,'')
+      %Q{<svg id="esvg-#{key_id(keys)}" version="1.1" style="height:0;position:absolute">#{symbols}</svg>}
     end
-    def write_svg(svg)
-      path = File.join((config[:tmp_path] || config[:path]), '.esvg-tmp')
-      write_file path, svg
-      path
+    def js(key)
+      keys = valid_keys(key)
+      return if keys.empty?
+      script key_id(keys), symbols(keys).gsub('/n','').gsub("'"){"\\'"}
     end
-    def write_js
-      paths = []
+    def script(id, symbols)
+      %Q{(function(){
-      unless config[:js_core_path] == false
-        path = config[:js_core_path]
-        write_file path, js_core
+  function embed() {
+    if (!document.querySelector('#esvg-#{id}')) {
+      document.querySelector('body').insertAdjacentHTML('afterbegin', '#{symbols}')
+    }
+  }
-        paths.push path
-      end
+  // If DOM is already ready, embed SVGs
+  if (document.readyState == 'interactive') { embed() }
-      svgs.each do |key, files|
-        path = write_path(:js_path, key)
-        write_file path, js(key)
-        paths.push path
-      end
+  // Handle Turbolinks page change events
+  if ( window.Turbolinks ) {
+    document.addEventListener("turbolinks:load", function(event) { embed() })
+  }
-      paths
+  // Handle standard DOM ready events
+  document.addEventListener("DOMContentLoaded", function(event) { embed() })
+})()}
     end
-    def write_html
-      paths = []
+    def js_core
+      %Q{(function(){
+  var names
-      svgs.each do |key, files|
-        path = write_path(:html_path, key)
-        write_file path, html(key)
-        paths.push path
-      end
+  function attr( source, name ){
+    if (typeof source == 'object')
+      return name+'="'+source.getAttribute(name)+'" '
+    else
+      return name+'="'+source+'" ' }
-      paths
-    end
+  function dasherize( input ) {
+    return input.replace(/[\\W,_]/g, '-').replace(/-{2,}/g, '-')
+  }
-    def write_file(path, contents)
-      FileUtils.mkdir_p(File.expand_path(File.dirname(path)))
-      File.open(path, 'w') do |io|
-        io.write(contents)
-      end
+  function svgName( name ) {
+    #{if config[:namespace_before]
+      %Q{return "#{config[:namespace]}-"+dasherize( name )}
+    else
+      %Q{return dasherize( name )+"-#{config[:namespace]}"}
+    end}
+  }
+  function use( name, options ) {
+    options = options || {}
+    var id = dasherize( svgName( name ) )
+    var symbol = svgs()[id]
+    if ( symbol ) {
+      var svg = document.createRange().createContextualFragment( '<svg><use xlink:href="#'+id+'"/></svg>' ).firstChild;
+      svg.setAttribute( 'class', '#{config[:class]} '+id+' '+( options.classname || '' ).trim() )
+      svg.setAttribute( 'viewBox', symbol.getAttribute( 'viewBox' ) )
+      if ( !( options.width || options.height || options.scale ) ) {
+        svg.setAttribute('width',  symbol.getAttribute('width'))
+        svg.setAttribute('height', symbol.getAttribute('height'))
+      } else {
+        if ( options.width )  svg.setAttribute( 'width',  options.width )
+        if ( options.height ) svg.setAttribute( 'height', options.height )
+      }
+      return svg
+    } else {
+      console.error('Cannot find "'+name+'" svg symbol. Ensure that svg scripts are loaded')
+    }
+  }
+  function svgs(){
+    if ( !names ) {
+      names = {}
+      for( var symbol of document.querySelectorAll( 'svg[id^=esvg] symbol' ) ) {
+        names[symbol.id] = symbol
+      }
+    }
+    return names
+  }
+  var esvg = {
+    svgs: svgs,
+    use: use
+  }
+  // Handle Turbolinks page change events
+  if ( window.Turbolinks ) {
+    document.addEventListener( "turbolinks:load", function( event ) { names = null; esvg.svgs() })
+  }
+  if( typeof( module ) != 'undefined' ) { module.exports = esvg }
+  else window.esvg = esvg
+})()}
     end
-    def build_path(key)
-      dir = config[:js_build_dir] || File.dirname(config[:js_path])
-      if config[:js_build_version]
-        key = "#{key}-#{config[:js_build_version]}"
+    private
+    def dir_key(path)
+      dir = File.dirname(flatten_path(path))
+      # Flattened paths which should be treated as assets will use '_' as their dir key
+      if dir == '.' && ( sub_path(path).start_with?('_') || config[:filename].start_with?('_') )
+        '_'
+      else
+        dir
       end
+    end
-      File.join(dir, key+'.js')
+    def sub_path(path)
+      path.sub("#{config[:source]}/",'')
     end
-    def write_path(path, key)
-      # Write root svgs
-      return config[path] if key == "."
+    def flatten_path(path)
+      sub_path(path).sub(Regexp.new(config[:flatten]), '')
+    end
-      if !key.start_with?('_') && path.to_s.start_with?('js')
-        build_path(key)
+    def file_key(path)
+      dasherize flatten_path(path).sub('.svg', '')
+    end
+    def file_keys(paths)
+      paths.flatten.map { |p| file_key(p) }
+    end
+    def write_path(key)
+      name = if key == '_'  # Root level asset file
+        "_#{config[:filename]}".sub(/_+/, '_')
+      elsif key == '.'      # Root level build file
+        config[:filename]
       else
-        config[path].sub(/[^\/]+?\./, key+'.')
+        "#{key}"
+      end
+      # Is it an asset, or a build file
+      if name.start_with?('_')
+        File.join config[:assets], "#{name}.js"
+      else
+        File.join config[:build], "#{name}-#{version(key)}.js"
       end
     end
+    def prep_svg(content, attr)
+      content = content.gsub(/<?.+\?>/,'').gsub(/<!.+?>/,'')  # Get rid of doctypes and comments
+         .gsub(/\n/, '')                                      # Remove endlines
+         .gsub(/\s{2,}/, ' ')                                 # Remove whitespace
+         .gsub(/>\s+</, '><')                                 # Remove whitespace between tags
+         .gsub(/\s?fill="(#0{3,6}|black|rgba?\(0,0,0\))"/,'') # Strip black fill
+         .gsub(/style="([^"]*?)fill:(.+?);/m, 'fill="\2" style="\1')                   # Make fill a property instead of a style
+         .gsub(/style="([^"]*?)fill-opacity:(.+?);/m, 'fill-opacity="\2" style="\1')   # Move fill-opacity a property instead of a style
+      sub_def_ids(content, attr[:class])
+    end
     # Scans <def> blocks for IDs
     # If urls(#id) are used, ensure these IDs are unique to this file
     # Only replace IDs if urls exist to avoid replacing defs
     # used in other svg files
     #
-    def sub_def_ids(file, content)
+    def sub_def_ids(content, classname)
       return content unless !!content.match(/<defs>/)
       content.scan(/<defs>.+<\/defs>/m).flatten.each do |defs|
         defs.scan(/id="(.+?)"/).flatten.uniq.each_with_index do |id, index|
           if content.match(/url\(##{id}\)/)
-            new_id = "#{classname(file)}-ref#{index}"
+            new_id = "#{classname}-def#{index}"
             content = content.gsub(/id="#{id}"/, %Q{class="#{new_id}"})
                              .gsub(/url\(##{id}\)/, "url(##{new_id})" )
@@ -409,127 +549,106 @@ module Esvg
       content
     end
-    def prep_svg(file, content)
-      content = content.gsub(/<svg.+?>/, %Q{<svg class="#{classname(file)}" #{dimensions(content)}>})  # convert svg to symbols
-             .gsub(/\n/, '')                 # Remove endlines
-             .gsub(/\s{2,}/, ' ')            # Remove whitespace
-             .gsub(/>\s+</, '><')            # Remove whitespace between tags
-             .gsub(/\s?fill="(#0{3,6}|black|rgba?\(0,0,0\))"/,'')      # Strip black fill
-             .gsub(/style="([^"]*?)fill:(.+?);/m, 'fill="\2" style="\1')                   # Make fill a property instead of a style
-             .gsub(/style="([^"]*?)fill-opacity:(.+?);/m, 'fill-opacity="\2" style="\1')   # Move fill-opacity a property instead of a style
+    def optimize?
+      !!(config[:optimize] && svgo_cmd)
+    end
-      sub_def_ids(file, content)
+    def svgo_cmd
+      find_node_module('svgo')
     end
-    def optimize(svg)
-      if config[:optimize] && svgo_path = find_node_module('svgo')
-        path = write_svg(svg)
-        svg = `#{svgo_path} --disable=removeUselessDefs '#{path}' -o -`
-        FileUtils.rm(path)
+    def optimize(svg, attributes)
+      if optimize?
+        path = write_tmp '.svgo-tmp', svg
+        command = "#{svgo_cmd} --disable=removeUselessDefs '#{path}' -o -"
+        svg = `#{command}`
+        FileUtils.rm(path) if File.exist? path
       end
-      svg
+      id_symbols(svg, attributes)
     end
-    def html(key)
-      if svgs[key].empty?
-        ''
-      else
-        symbols = []
-        svgs[key].each do |name, data|
-          symbols << prep_svg(name, data[:content])
-        end
-        symbols = optimize(symbols.join).gsub(/class=/,'id=').gsub(/svg/,'symbol')
-        %Q{<svg id="esvg-#{key_id(key)}" version="1.1" style="height:0;position:absolute">#{symbols}</svg>}
+    def id_symbols(svg, attr)
+      svg.gsub(/<svg.+?>/).with_index do |match, index|
+        %Q{<symbol #{attributes(attr[index])}>}     # Remove clutter from svg declaration
       end
+        .gsub(/<\/svg/,'</symbol') # Replace svgs with symbols
+        .gsub(/class=/,'id=')     # Replace classes with ids (classes are generated here)
+        .gsub(/\w+=""/,'')      # Remove empty attributes
     end
-    def key_id(key)
-      (key == '.') ? 'symbols' : classname(key)
-    end
+    def compress(file)
+      return if !config[:compress]
-    def svg_to_js(key)
-      html(key).gsub(/\n/,'').gsub("'"){"\\'"}
-    end
+      mtime = File.mtime(file)
+      gz_file = "#{file}.gz"
-    def js_core
-      %Q{var esvg = {
-  icon: function(name, classnames) {
-    var svgName = this.iconName(name)
-    var element = document.querySelector('#'+svgName)
+      return if (File.exist?(gz_file) && File.mtime(gz_file) >= mtime)
-    if (element) {
-      return '<svg class="#{config[:base_class]} '+svgName+' '+(classnames || '')+'" '+this.dimensions(element)+'><use xlink:href="#'+svgName+'"/></svg>'
-    } else {
-      console.error('File not found: "'+name+'.svg" at #{log_path(File.join(config[:path],''))}/')
-    }
-  },
-  iconName: function(name) {
-    var before = #{config[:namespace_before]}
-    if (before) {
-      return "#{config[:namespace]}-"+this.dasherize(name)
-    } else {
-      return name+"-#{config[:namespace]}"
-    }
-  },
-  dimensions: function(el) {
-    return 'viewBox="'+el.getAttribute('viewBox')+'" width="'+el.getAttribute('width')+'" height="'+el.getAttribute('height')+'"'
-  },
-  dasherize: function(input) {
-    return input.replace(/[\W,_]/g, '-').replace(/-{2,}/g, '-')
-  },
-  aliases: #{config[:aliases].to_json},
-  alias: function(name) {
-    var aliased = this.aliases[name]
-    if (typeof(aliased) != "undefined") {
-      return aliased
-    } else {
-      return name
-    }
-  }
-}
+      File.open(gz_file, "wb") do |dest|
+        gz = ::Zlib::GzipWriter.new(dest, Zlib::BEST_COMPRESSION)
+        gz.mtime = mtime.to_i
+        IO.copy_stream(open(file), gz)
+        gz.close
+      end
-// Work with module exports:
-if(typeof(module) != 'undefined') { module.exports = esvg }
-}
+      File.utime(mtime, mtime, gz_file)
+      gz_file
     end
-    def js(key)
-      %Q{(function(){
+    def write_tmp(name, content)
+      path = File.join(config[:temp], name)
+      FileUtils.mkdir_p(File.dirname(path))
+      write_file path, content
+      path
+    end
-  function embed() {
-    if (!document.querySelector('#esvg-#{key_id(key)}')) {
-      document.querySelector('body').insertAdjacentHTML('afterbegin', '#{svg_to_js(key)}')
-    }
-  }
+    def read_tmp(name)
+      path = File.join(config[:temp], name)
+      if File.exist? path
+        File.read path
+      else
+        ''
+      end
+    end
-  // If DOM is already ready, embed SVGs
-  if (document.readyState == 'interactive') { embed() }
+    def log_path(path)
+      File.expand_path(path).sub(config[:pwd], '').sub(/^\//,'')
+    end
-  // Handle Turbolinks page change events
-  if ( window.Turbolinks ) {
-    document.addEventListener("turbolinks:load", function(event) { embed() })
-  }
+    def write_file(path, contents)
+      FileUtils.mkdir_p(File.expand_path(File.dirname(path)))
+      File.open(path, 'w') do |io|
+        io.write(contents)
+      end
+    end
-  // Handle standard DOM ready events
-  document.addEventListener("DOMContentLoaded", function(event) { embed() })
-})()}
+    def key_id(keys)
+      keys.map do |key|
+        (key == '.') ? 'symbols' : classname(key)
+      end.join('-')
     end
+    # Determine if an NPM module is installed by checking paths with `npm bin`
+    # Returns path to binary if installed
     def find_node_module(cmd)
       require 'open3'
-      response = Open3.capture3("npm ls #{cmd}")
+      return @modules[cmd] unless @modules[cmd].nil?
-      # Check for error
-      if response[1].empty?
-        "$(npm bin)/#{cmd}"
+      @modules[cmd] = begin
+        local = "$(npm bin)/#{cmd}"
+        global = "$(npm -g bin)/#{cmd}"
-      # Attempt global module path
-      elsif Open3.capture3("npm ls -g #{cmd}")[1].empty?
-        cmd
+        if Open3.capture3(local)[2].success?
+          local
+        elsif Open3.capture3(global)[2].success?
+          global
+        else
+          false
+        end
       end
     end
@@ -539,5 +658,43 @@ if(typeof(module) != 'undefined') { module.exports = esvg }
       h
     end
+    # Return non-empty key names for groups of svgs
+    def valid_keys(keys)
+      if keys.nil? || keys.empty?
+        svg_symbols.keys
+      else
+        keys = [keys].flatten.map { |k| dasherize k }
+        svg_symbols.keys.select { |k| keys.include? dasherize(k) }
+      end
+    end
+    # Load aliases from configuration.
+    #  returns a hash of aliasees mapped to a name.
+    #  Converts configuration YAML:
+    #    alias:
+    #      foo: bar
+    #      baz: zip, zop
+    #  To output:
+    #    { :bar => "foo", :zip => "baz", :zop => "baz" }
+    #
+    def load_aliases(aliases)
+      a = {}
+      aliases.each do |name,alternates|
+        alternates.split(',').each do |val|
+          a[dasherize(val.strip).to_sym] = dasherize(name.to_s)
+        end
+      end
+      a
+    end
+    def get_alias(name)
+      config[:aliases][dasherize(name).to_sym] || name
+    end
+    def production?
+      config[:produciton] || if Esvg.rails?
+        Rails.env.production?
+      end
+    end
   end
 end

data/lib/esvg/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module Esvg
-  VERSION = "3.2.0"
+  VERSION = "4.0.0"
 end

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: esvg
 version: !ruby/object:Gem::Version
-  version: 3.2.0
+  version: 4.0.0
 platform: ruby
 authors:
 - Brandon Mathis
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2017-05-04 00:00:00.000000000 Z
+date: 2017-05-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler