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

esvg 3.2.0 → 4.0.0

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