esvg 4.1.6 → 4.2.0

data/lib/esvg/svgs.rb

@@ -0,0 +1,320 @@
+require 'yaml'
+require 'json'
+require 'zlib'
+require 'digest'
+require 'esvg/symbol'
+
+module Esvg
+  class Svgs
+    include Esvg::Utils
+
+    attr_reader :symbols
+
+    CONFIG = {
+      filename: 'svgs',
+      class: 'svg-symbol',
+      prefix: 'svg',
+      core: true,
+      optimize: false,
+      gzip: false,
+      fingerprint: true,
+      throttle_read: 4,
+      flatten: [],
+      alias: {}
+    }
+
+    CONFIG_RAILS = {
+      source: "app/assets/svgs",
+      assets: "app/assets/javascripts",
+      build: "public/javascripts",
+      temp: "tmp"
+    }
+
+    def initialize(options={})
+      config(options)
+      @symbols = []
+      @svgs = []
+      @last_read = nil
+      read_cache
+
+      load_files
+    end
+
+    def config(options={})
+      @config ||= begin
+        paths = [options[:config_file], 'config/esvg.yml', 'esvg.yml'].compact
+
+        config = CONFIG.dup
+
+        if Esvg.rails? || options[:rails]
+          config.merge!(CONFIG_RAILS)
+        end
+
+        if path = paths.select{ |p| File.exist?(p)}.first
+          config.merge!(symbolize_keys(YAML.load(File.read(path) || {})))
+        end
+
+        config.merge!(options)
+
+        config[:filename] = File.basename(config[:filename], '.*')
+
+        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[:temp]     = config[:pwd] if config[:temp].nil?
+        config[:temp]     = File.expand_path File.join(config[:temp], '.esvg-cache')
+
+        config[:aliases] = load_aliases(config[:alias])
+        config[:flatten] = [config[:flatten]].flatten.map { |dir| File.join(dir, '/') }.join('|')
+
+        config
+      end
+    end
+
+    def load_files
+      if !@last_read.nil? && (Time.now.to_i - @last_read) < config[:throttle_read]
+        return
+      end
+
+      files = Dir[File.join(config[:source], '**/*.svg')].uniq.sort
+
+      if files.empty? && config[:print]
+        puts "No svgs found at #{config[:source]}"
+        return
+      end
+
+      # Remove deleted files
+      @symbols.reject(&:read).each { |s| @symbols.delete(s) }
+
+      files.each do |path|
+        unless @symbols.find { |s| s.path == path }
+          @symbols << Symbol.new(path, config)
+        end
+      end
+
+      @svgs.clear
+
+      sort(@symbols.group_by(&:group)).each do |name, symbols|
+        @svgs << Svg.new(name, symbols, config)
+      end
+
+      @last_read = Time.now.to_i
+
+      puts "Read #{@symbols.size} files from #{config[:source]}" if config[:print]
+
+    end
+
+    def build
+
+      paths = []
+
+      if config[:core]
+        path = File.join config[:assets], "_esvg.js"
+        write_file path, js_core
+        paths << path
+      end
+
+      @svgs.each do |file|
+        write_file file.path, js(file.embed)
+
+        puts "Writing #{file.path}" if config[:print]
+        paths << file.path
+
+        if !file.asset && config[:gzip] && gz = compress(file[:path])
+          puts "Writing #{gz}" if config[:print]
+          paths << gz
+        end
+      end
+
+      write_cache
+      paths
+    end
+
+    def write_cache
+      write_tmp '.symbols', @symbols.map(&:data).to_yaml
+    end
+
+    def read_cache
+      (YAML.load(read_tmp '.symbols') || []).each do |s|
+        @symbols << Symbol.new(s[:path], config)
+      end
+    end
+
+    # Embed only build scripts
+    def embed_script(names=nil)
+      embeds = buildable_svgs(names).map(&:embed)
+      if !embeds.empty?
+        "<script>#{js(embeds.join("\n"))}</script>"
+      end
+    end
+
+    def build_paths(names=nil)
+      buildable_svgs(names).map{ |f| File.basename(f.path) }
+    end
+
+    def find_symbol(name, fallback=nil)
+      name = get_alias dasherize(name)
+
+      if svg = @symbols.find { |s| s.name == name }
+        svg
+      elsif fallback
+        find_symbol(fallback)
+      end
+    end
+
+    def find_svgs(names=nil)
+      return @svgs if names.nil? || names.empty?
+
+      @svgs.select { |svg| svg.named?(names) }
+    end
+
+    def buildable_svgs(names=nil)
+      find_svgs(names).reject(&:asset)
+    end
+
+    private
+
+    def js(embed)
+      %Q{(function(){
+
+  function embed() {
+    #{embed}
+  }
+
+  // If DOM is already ready, embed SVGs
+  if (document.readyState == 'interactive') { embed() }
+
+  // Handle Turbolinks page change events
+  if ( window.Turbolinks ) {
+    document.addEventListener("turbolinks:load", function(event) { embed() })
+  }
+
+  // Handle standard DOM ready events
+  document.addEventListener("DOMContentLoaded", function(event) { embed() })
+})()}
+    end
+
+    def js_core
+      %Q{(function(){
+  var names
+
+  function attr( source, name ){
+    if (typeof source == 'object')
+      return name+'="'+source.getAttribute(name)+'" '
+    else
+      return name+'="'+source+'" ' }
+
+  function dasherize( input ) {
+    return input.replace(/[\\W,_]/g, '-').replace(/-{2,}/g, '-')
+  }
+
+  function svgName( name ) {
+    return "#{config[:prefix]}-"+dasherize( name )
+  }
+
+  function use( name, options ) {
+    options = options || {}
+    var id = dasherize( name )
+    var symbol = svgs()[id]
+
+    if ( symbol ) {
+      var parent = symbol.parentElement
+      var prefix = parent.dataset.prefix
+      var base   = parent.dataset.symbolClass
+
+      var svg = document.createRange().createContextualFragment( '<svg><use xlink:href="#'+id+'"/></svg>' ).firstChild;
+      svg.setAttribute( 'class', base + ' ' + prefix + '-' + id + ' ' + ( options.class || '' ).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.dataset.name] = 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 get_alias(name)
+      config[:aliases][dasherize(name).to_sym] || name
+    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 write_tmp(name, content)
+      path = File.join(config[:temp], name)
+      FileUtils.mkdir_p(File.dirname(path))
+      write_file path, content
+      path
+    end
+
+    def read_tmp(name)
+      path = File.join(config[:temp], name)
+      if File.exist? path
+        File.read path
+      else
+        ''
+      end
+    end
+
+    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
+  end
+end

data/lib/esvg/symbol.rb

@@ -0,0 +1,249 @@
+require 'open3'
+
+module Esvg
+  class Symbol
+    attr_reader :name, :id, :path, :content, :optimized, :size, :group, :mtime
+
+    include Esvg::Utils
+
+    def initialize(path, config={})
+      @config  = config
+      @path    = path
+      load_data
+      read
+    end
+
+    def read
+      return if !File.exist?(@path)
+
+      time = last_modified
+      if @mtime != time
+        @mtime   = time
+        @content = pre_optimize File.read(@path)
+        @size    = dimensions
+        @optimized = nil
+      end
+      @group = dir_key
+      @name  = file_name
+      @id    = file_id file_key
+
+      self
+    end
+
+    def data
+      {
+        path: @path,
+        id: @id,
+        name: @name,
+        group: @group,
+        last_modified: @mtime,
+        size: @size,
+        content: @content,
+        optimized: @optimized,
+        optimized_at: @optimized_at
+      }
+    end
+
+    def attr
+      { id: @id, 'data-name': @name }.merge @size
+    end
+
+    def use(options={})
+      if options[:color]
+        options[:style] ||= ''
+        options[:style] += "color:#{options[:color]};#{options[:style]}"
+      end
+
+      use_attr = {
+        class: [@config[:class], @config[:prefix]+"-"+@name, options[:class]].compact.join(' '),
+        viewBox: @size[:viewBox],
+        style:  options[:style],
+        fill:   options[:fill]
+      }
+
+      # If user doesn't pass a size or set scale: true
+      if !(options[:width] || options[:height] || options[:scale])
+
+        # default to svg dimensions
+        use_attr[:width]  = @size[:width]
+        use_attr[:height] = @size[:height]
+      else
+
+        # Add sizes (nil options will be stripped)
+        use_attr[:width]  = options[:width]
+        use_attr[:height] = options[:height]
+      end
+
+      %Q{<svg #{attributes(use_attr)}>#{use_tag}#{title(options)}#{desc(options)}#{options[:content]||''}</svg>}
+    end
+
+    def use_tag(options={})
+      options["xlink:href"] = "##{@id}"
+      %Q{<use #{attributes(options)}/>}
+    end
+
+    def title(options)
+      if options[:title]
+        "<title>#{options[:title]}</title>"
+      else
+        ''
+      end
+    end
+
+    def desc(options)
+      if options[:desc]
+        "<desc>#{options[:desc]}</desc>"
+      else
+        ''
+      end
+    end
+
+    def optimize
+      # Only optimize again if the file has changed
+      return @optimized if @optimized_at && @optimized_at > @mtime
+
+      @optimized = @content
+      sub_def_ids
+
+      if @config[:optimize] && Esvg.node_module('svgo')
+        response = Open3.capture3(%Q{#{Esvg.node_module('svgo')} --disable=removeUselessDefs -s '#{@optimized}' -o -})
+        @optimized = response[0] if response[2].success?
+      end
+
+      post_optimize
+      @optimized_at = Time.now.to_i
+
+      @optimized
+    end
+
+    private
+
+    def load_data
+      if @config[:cache]
+        @config.delete(:cache).each do |name, value|
+          set_instance name.to_s, value
+        end
+      end
+    end
+
+    def last_modified
+      File.mtime(@path).to_i
+    end
+
+    def file_id(name)
+      dasherize "#{@config[:prefix]}-#{name}"
+    end
+
+    def local_path
+      @local_path ||= sub_path(@config[:source], @path)
+    end
+
+    def file_name
+      dasherize flatten_path.sub('.svg','')
+    end
+
+    def file_key
+      dasherize local_path.sub('.svg','')
+    end
+
+    def dir_key
+      dir = File.dirname(flatten_path)
+
+      # Flattened paths which should be treated as assets will use '_' as their dir key
+      # - flatten: _foo - _foo/icon.svg will have a dirkey of _
+      # - filename: _icons - treats all root or flattened files as assets
+      if dir == '.' && ( local_path.start_with?('_') || @config[:filename].start_with?('_') )
+        '_'
+      else
+        dir
+      end
+    end
+
+    def flatten_path
+      @flattened_path ||= local_path.sub(Regexp.new(@config[:flatten]), '')
+    end
+
+    def name_key(key)
+      if key == '_'  # Root level asset file
+        "_#{@config[:filename]}".sub(/_+/, '_')
+      elsif key == '.'      # Root level build file
+        @config[:filename]
+      else
+        "#{key}"
+      end
+    end
+
+    def dimensions
+      if viewbox = @content.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten.last
+        coords  = viewbox.split(' ')
+
+        {
+          viewBox: viewbox,
+          width: coords[2].to_i - coords[0].to_i,
+          height: coords[3].to_i - coords[1].to_i
+        }
+      else
+        {}
+      end
+    end
+
+    def pre_optimize(svg)
+      # Generate a regex of attributes to be removed
+      att = Regexp.new %w(xmlns xmlns:xlink xml:space version).map { |m| "#{m}=\".+?\"" }.join('|')
+
+      svg.strip
+        .gsub(att, '')                                       # Remove unwanted attributes
+        .sub(/.+?<svg/,'<svg')                               # Get rid of doctypes and comments
+        .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
+        .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
+    end
+
+    def post_optimize
+      @optimized = set_attributes
+        .gsub(/<\/svg/,'</symbol')      # Replace svgs with symbols
+        .gsub(/class="def-/,'id="def-') # Replace <def> classes with ids (classes are generated in sub_def_ids)
+        .gsub(/\w+=""/,'')              # Remove empty attributes
+    end
+
+    def set_attributes
+      attr.keys.each do |key|
+        @optimized.sub!(/ #{key}=".+?"/,'')
+      end
+
+      @optimized.sub!(/<svg/, "<symbol #{attributes(attr)}")
+    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
+      @optimized.scan(/<defs>.+<\/defs>/m).flatten.each do |defs|
+        defs.scan(/id="(.+?)"/).flatten.uniq.each_with_index do |id, index|
+
+          # If there are urls which refer to
+          # ids be sure to update both
+          #
+          if @optimized.match(/url\(##{id}\)/)
+            new_id = "def-#{@id}-#{index}"
+
+            @optimized.gsub! /id="#{id}"/, %Q{class="#{new_id}"}
+            @optimized.gsub! /url\(##{id}\)/, "url(##{new_id})"
+
+          # Otherwise just leave the IDs of the
+          # defs and change them to classes to 
+          # avoid SVGO ID mangling
+          #
+          else
+            @optimized.gsub! /id="#{id}"/, %Q{class="#{id}"}
+          end
+        end
+      end
+    end
+  end
+end

data/lib/esvg/utils.rb

@@ -0,0 +1,52 @@
+module Esvg
+  module Utils
+    def dasherize(input)
+      input.gsub(/[\W,_]/, '-').sub(/^-/,'').gsub(/-{2,}/, '-')
+    end
+
+    def sub_path(root, path)
+      path.sub(File.join(root,''),'')
+    end
+
+    def symbolize_keys(hash)
+      h = {}
+      hash.each {|k,v| h[k.to_sym] = v }
+      h
+    end
+
+    def attributes(hash)
+      att = []
+      hash.each do |key, value|
+        att << %Q{#{key}="#{value}"} unless value.nil?
+      end
+      att.join(' ')
+    end
+
+    def sort(hash)
+      sorted = {}
+      hash.sort.each do |h|
+        sorted[h.first] = h.last
+      end
+      sorted
+    end
+
+    def compress(file)
+      mtime = File.mtime(file)
+      gz_file = "#{file}.gz"
+
+      return if (File.exist?(gz_file) && File.mtime(gz_file) >= mtime)
+
+      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
+
+      File.utime(mtime, mtime, gz_file)
+
+      gz_file
+    end
+
+  end
+end

data/lib/esvg/version.rb

@@ -1,3 +1,3 @@
 module Esvg
-  VERSION = "4.1.6"
+  VERSION = "4.2.0"
 end

data/lib/esvg.rb

@@ -1,6 +1,8 @@
 require "fileutils"
 
 require "esvg/version"
+require "esvg/utils"
+require "esvg/svgs"
 require "esvg/svg"
 
 if defined?(Rails)
@@ -12,21 +14,60 @@ module Esvg
   extend self
 
   def new(options={})
-    @svgs = SVG.new(options)
+    @svgs ||=[]
+    @svgs << Svgs.new(options)
+    @svgs.last
   end
 
   def svgs
     @svgs
   end
 
-  def embed(key)
-    new.embed(key)
+  def use(name, options={})
+    if symbol = find_symbol(name, options)
+      html_safe symbol.use options
+    end
+  end
+
+  def use_tag(name, options={})
+    if symbol = find_symbol(name, options)
+      html_safe symbol.use_tag options
+    end
+  end
+
+  def embed(names=nil)
+    if rails? && Rails.env.production?
+      html_safe build_paths(names).each do |path|
+        javascript_include_tag(path, async: true)
+      end.join("\n")
+    else
+      html_safe find_svgs(names).map{|s| s.embed_script(names) }.join
+    end
+  end
+
+  def build_paths(names=nil)
+    find_svgs(names).map{|s| s.build_paths(names) }.flatten
+  end
+
+  def find_svgs(names=nil)
+    @svgs.select {|s| s.buildable_svgs(names) }
+  end
+
+  def find_symbol(name, options={})
+    if group = @svgs.find {|s| s.find_symbol(name, options[:fallback]) }
+      group.find_symbol(name, options[:fallback])
+    end
   end
 
   def rails?
     defined?(Rails)
   end
 
+  def html_safe(input)
+    input = input.html_safe if rails?
+    input
+  end
+
   def build(options={})
     new(options).build
   end
@@ -38,4 +79,22 @@ module Esvg
       end
     end
   end
+
+  # Determine if an NPM module is installed by checking paths with `npm bin`
+  # Returns path to binary if installed
+  def node_module(cmd)
+    @modules ||={}
+    return @modules[cmd] if !@modules[cmd].nil?
+
+    local = "$(npm bin)/#{cmd}"
+    global = "$(npm -g bin)/#{cmd}"
+
+    @modules[cmd] = if Open3.capture3(local)[2].success?
+      local
+    elsif Open3.capture3(global)[2].success?
+      global
+    else
+      false
+    end
+  end
 end