vue_live 0.1.0

data/lib/vue_live/resolver.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module VueLive
+  # Maps request paths to files under the component root, refusing anything that escapes it.
+  class Resolver
+    Target = Struct.new(:relative_path, :absolute_path, :vue?, :digest_hint, keyword_init: true)
+
+    def initialize(config)
+      @config = config
+    end
+
+    def source_dir
+      @config.source_dir
+    end
+
+    # +path+ is the request path *after* the URL prefix, e.g. "components/App.vue.js".
+    # Returns a Target or nil when nothing under the root matches.
+    def resolve(path)
+      rel = clean(path)
+      return nil if rel.nil? || rel.empty?
+
+      rel = rel.sub(/\.vue\.js\z/, '.vue') # "App.vue.js" is the same component as "App.vue"
+      ext = File.extname(rel).downcase
+      return nil unless @config.extensions.include?(ext)
+
+      root = File.expand_path(source_dir)
+      abs = File.expand_path(rel, root)
+      return nil unless abs.start_with?(root + File::SEPARATOR)
+      return nil unless File.file?(abs)
+
+      Target.new(relative_path: rel, absolute_path: abs, vue?: ext == '.vue')
+    end
+
+    # Every .vue component under the root, as relative paths.
+    def components
+      root = File.expand_path(source_dir)
+      return [] unless File.directory?(root)
+
+      Dir.glob('**/*.vue', base: root).sort
+    end
+
+    # All servable files (components and their sibling assets).
+    def files
+      root = File.expand_path(source_dir)
+      return [] unless File.directory?(root)
+
+      Dir.glob('**/*', base: root).select do |rel|
+        File.file?(File.join(root, rel)) && @config.extensions.include?(File.extname(rel).downcase)
+      end.sort
+    end
+
+    private
+
+    def clean(path)
+      return nil if path.nil?
+
+      decoded = path.to_s.gsub(/%([0-9a-fA-F]{2})/) { Regexp.last_match(1).hex.chr }
+      return nil if decoded.include?("\0") || decoded.include?('\\')
+
+      parts = decoded.split('/').reject { |p| p.empty? || p == '.' }
+      return nil if parts.any? { |p| p == '..' || p.start_with?('.') }
+
+      parts.join('/')
+    end
+  end
+end

data/lib/vue_live/scoped_css.rb

@@ -0,0 +1,258 @@
+# frozen_string_literal: true
+
+module VueLive
+  # Rewrites the selectors of a <style scoped> block so they only match elements carrying the
+  # component's scope attribute, exactly like @vue/compiler-sfc does:
+  #
+  #   .a .b          -> .a .b[data-v-xxx]
+  #   .a :deep(.b)   -> .a[data-v-xxx] .b
+  #   .a ::v-deep .b -> .a[data-v-xxx] .b
+  #   :slotted(.a)   -> .a[data-v-xxx-s]
+  #   :global(.a)    -> .a
+  #   @keyframes     -> names left alone (animations are not scoped)
+  #
+  # The implementation is a small, forgiving CSS walker; it does not validate the stylesheet.
+  class ScopedCSS
+    def self.rewrite(css, scope_id)
+      new(scope_id).rewrite(css)
+    end
+
+    def initialize(scope_id)
+      @attr = "[#{scope_id}]"
+      @slot_attr = "[#{scope_id}-s]"
+    end
+
+    def rewrite(css)
+      out = +''
+      process(strip_comments(css), out, scope: true)
+      out
+    end
+
+    private
+
+    def strip_comments(css)
+      css.gsub(%r{/\*.*?\*/}m, '')
+    end
+
+    # Walk a stylesheet (or the body of a conditional at-rule) and append the rewritten text.
+    def process(css, out, scope:)
+      i = 0
+      len = css.length
+      while i < len
+        # whitespace between rules
+        if css[i] =~ /\s/
+          out << css[i]
+          i += 1
+          next
+        end
+
+        brace = find_rule_boundary(css, i)
+        if brace.nil?
+          out << css[i..]
+          break
+        end
+
+        kind, open_idx = brace
+        head = css[i...open_idx]
+
+        if kind == :statement # e.g. @import ...;  @charset ...;
+          out << head << ';'
+          i = open_idx + 1
+          next
+        end
+
+        close_idx = matching_brace(css, open_idx)
+        body = css[(open_idx + 1)...close_idx]
+
+        if head.lstrip.start_with?('@')
+          name = head.strip[/\A@([\w-]+)/, 1].to_s.downcase
+          out << head << '{'
+          if %w[media supports layer container document].include?(name)
+            process(body, out, scope: scope)
+          else
+            # @keyframes, @font-face, @page, @property ... : copy verbatim
+            out << body
+          end
+          out << '}'
+        else
+          out << (scope ? rewrite_selector_list(head) : head) << '{' << body << '}'
+        end
+        i = close_idx + 1
+      end
+    end
+
+    # From +i+ find whether the next rule is a block ({) or a statement (;).  Returns
+    # [:block, index_of_brace] or [:statement, index_of_semicolon], ignoring quoted strings.
+    def find_rule_boundary(css, i)
+      quote = nil
+      depth = 0
+      while i < css.length
+        c = css[i]
+        if quote
+          quote = nil if c == quote && css[i - 1] != '\\'
+        elsif ['"', "'"].include?(c)
+          quote = c
+        elsif c == '('
+          depth += 1
+        elsif c == ')'
+          depth -= 1
+        elsif depth.zero? && c == '{'
+          return [:block, i]
+        elsif depth.zero? && c == ';'
+          return [:statement, i]
+        end
+        i += 1
+      end
+      nil
+    end
+
+    def matching_brace(css, open_idx)
+      depth = 0
+      quote = nil
+      i = open_idx
+      while i < css.length
+        c = css[i]
+        if quote
+          quote = nil if c == quote && css[i - 1] != '\\'
+        elsif ['"', "'"].include?(c)
+          quote = c
+        elsif c == '{'
+          depth += 1
+        elsif c == '}'
+          depth -= 1
+          return i if depth.zero?
+        end
+        i += 1
+      end
+      css.length
+    end
+
+    def rewrite_selector_list(list)
+      leading = list[/\A\s*/]
+      trailing = list[/\s*\z/]
+      selectors = split_top_level(list.strip, ',')
+      leading + selectors.map { |s| rewrite_selector(s.strip) }.join(', ') + trailing
+    end
+
+    # Split on +sep+ while respecting parentheses and quotes.
+    def split_top_level(str, sep)
+      parts = []
+      depth = 0
+      quote = nil
+      buf = +''
+      str.each_char.with_index do |c, idx|
+        if quote
+          quote = nil if c == quote && str[idx - 1] != '\\'
+          buf << c
+        elsif ['"', "'"].include?(c)
+          quote = c
+          buf << c
+        elsif c == '('
+          depth += 1
+          buf << c
+        elsif c == ')'
+          depth -= 1
+          buf << c
+        elsif c == sep && depth.zero?
+          parts << buf
+          buf = +''
+        else
+          buf << c
+        end
+      end
+      parts << buf
+      parts
+    end
+
+    def rewrite_selector(sel)
+      return sel if sel.empty?
+
+      # :global(...) escapes scoping entirely.
+      if (m = sel.match(/\A:global\((.*)\)\z/m))
+        return m[1].strip
+      end
+
+      # :deep(x) / ::v-deep x / >>> x / /deep/ x : scope the part *before*, leave the rest alone.
+      if (m = sel.match(%r{\A(.*?)(?:\s*::v-deep\((.*?)\)|\s*:deep\((.*?)\)|\s*::v-deep\b|\s*>>>|\s*/deep/)(.*)\z}m))
+        before = m[1].strip
+        inner  = (m[2] || m[3]).to_s.strip
+        after  = m[4].to_s.strip
+        rest   = [inner, after].reject(&:empty?).join(' ')
+        return rest if before.empty? # ":deep(.a)" alone scopes nothing
+
+        return "#{scope_compound(before)} #{rest}".strip
+      end
+
+      # :slotted(x) -> x gets the slot scope attribute.
+      if (m = sel.match(/\A(.*?):slotted\((.*)\)(.*)\z/m))
+        before = m[1].strip
+        inner = m[2].strip
+        after = m[3].strip
+        scoped_inner = scope_compound(inner, attr: @slot_attr)
+        return [before, scoped_inner + after].reject(&:empty?).join(' ')
+      end
+
+      scope_compound(sel)
+    end
+
+    # Append the scope attribute to the last compound selector, before any pseudo-element.
+    def scope_compound(sel, attr: @attr)
+      sel = sel.strip
+      return sel if sel.empty?
+
+      compounds = split_compounds(sel)
+      last = compounds.pop
+      compounds.push(insert_attr(last, attr))
+      compounds.join
+    end
+
+    # Split "a > b ~ c" into ["a > ", "b ~ ", "c"] keeping combinators attached to the previous part.
+    def split_compounds(sel)
+      parts = []
+      buf = +''
+      depth = 0
+      quote = nil
+      i = 0
+      while i < sel.length
+        c = sel[i]
+        if quote
+          quote = nil if c == quote && sel[i - 1] != '\\'
+          buf << c
+        elsif ['"', "'"].include?(c)
+          quote = c
+          buf << c
+        elsif c == '('
+          depth += 1
+          buf << c
+        elsif c == ')'
+          depth -= 1
+          buf << c
+        elsif depth.zero? && (c =~ /\s/ || c == '>' || c == '+' || c == '~')
+          # consume the whole combinator run
+          j = i
+          j += 1 while j < sel.length && (sel[j] =~ /\s/ || sel[j] == '>' || sel[j] == '+' || sel[j] == '~')
+          buf << sel[i...j]
+          parts << buf
+          buf = +''
+          i = j
+          next
+        else
+          buf << c
+        end
+        i += 1
+      end
+      parts << buf unless buf.empty?
+      parts
+    end
+
+    def insert_attr(compound, attr)
+      # Split off pseudo-elements (::before, :before, :after, :first-line...) which must come last.
+      if (m = compound.match(/\A(.*?)((?:::[\w-]+(?:\([^)]*\))?|:(?:before|after|first-line|first-letter|selection|placeholder|marker|backdrop)\b)+)\z/m)) # rubocop:disable Layout/LineLength
+        base = m[1]
+        pseudo = m[2]
+        return "#{base.empty? ? '*' : base}#{attr}#{pseudo}"
+      end
+      compound.empty? ? "*#{attr}" : "#{compound}#{attr}"
+    end
+  end
+end

data/lib/vue_live/sfc/descriptor.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module VueLive
+  module SFC
+    # One top-level block of a single-file component: <template>, <script>, <style> or a custom block.
+    class Block
+      attr_reader :type, :content, :attrs, :line
+
+      def initialize(type:, content:, attrs: {}, line: 1)
+        @type = type
+        @content = content
+        @attrs = attrs
+        @line = line
+      end
+
+      def lang
+        attrs['lang']
+      end
+
+      def src
+        attrs['src']
+      end
+
+      def setup?
+        attrs.key?('setup')
+      end
+
+      def scoped?
+        attrs.key?('scoped')
+      end
+
+      def module?
+        attrs.key?('module')
+      end
+
+      def attr?(name)
+        attrs.key?(name)
+      end
+    end
+
+    # The parsed shape of a .vue file.  Mirrors @vue/compiler-sfc's SFCDescriptor closely enough
+    # that both compiler backends can reason about the same thing.
+    class Descriptor
+      attr_reader :filename, :source, :template, :script, :script_setup, :styles, :custom_blocks
+
+      def initialize(filename:, source:, template: nil, script: nil, script_setup: nil, styles: [], custom_blocks: [])
+        @filename = filename
+        @source = source
+        @template = template
+        @script = script
+        @script_setup = script_setup
+        @styles = styles
+        @custom_blocks = custom_blocks
+      end
+
+      def scoped_styles?
+        styles.any?(&:scoped?)
+      end
+
+      def css_modules?
+        styles.any?(&:module?)
+      end
+
+      def template_lang
+        template&.lang
+      end
+
+      def script_lang
+        (script_setup || script)&.lang
+      end
+
+      # Features the pure Ruby backend cannot provide.  Empty means "Ruby can compile this".
+      def advanced_features
+        features = []
+        features << '<script setup>' if script_setup
+        features << "<script lang=\"#{script_lang}\">" if script_lang && !%w[js javascript].include?(script_lang)
+        features << "<template lang=\"#{template_lang}\">" if template_lang && template_lang != 'html'
+        styles.each do |s|
+          features << "<style lang=\"#{s.lang}\">" if s.lang && !%w[css postcss].include?(s.lang)
+          features << '<style module>' if s.module?
+        end
+        features.uniq
+      end
+    end
+  end
+end

data/lib/vue_live/sfc/parser.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+require_relative 'descriptor'
+
+module VueLive
+  module SFC
+    # Splits a .vue file into its top-level blocks.
+    #
+    # Only the top level is parsed; the contents of <template> are handed to Vue's own compiler
+    # untouched, so nested <template v-slot> elements, comments and so on survive as-is.
+    class Parser
+      BLOCK_START = %r{<(template|script|style|[a-zA-Z][\w-]*)(\s[^>]*?)?(/?)>}m
+      ATTR        = %r{([^\s=/"']+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?}
+
+      def self.parse(source, filename: 'anonymous.vue')
+        new(source, filename).parse
+      end
+
+      def initialize(source, filename)
+        @source = source
+        @filename = filename
+      end
+
+      def parse
+        template = nil
+        script = nil
+        script_setup = nil
+        styles = []
+        custom = []
+
+        pos = 0
+        while (m = BLOCK_START.match(@source, pos))
+          tag        = m[1]
+          attrs      = parse_attrs(m[2].to_s)
+          self_close = m[3] == '/'
+          start      = m.end(0)
+          line       = @source[0...m.begin(0)].count("\n") + 1
+
+          if self_close
+            content = ''
+            pos = start
+          else
+            close = find_close(tag, start)
+            raise CompileError.new("unterminated <#{tag}> block starting on line #{line}", file: @filename) unless close
+
+            content = @source[start...close[0]]
+            pos = close[1]
+          end
+
+          block = Block.new(type: tag, content: content, attrs: attrs, line: line)
+          case tag
+          when 'template'
+            raise CompileError.new('only one top-level <template> block is allowed', file: @filename) if template
+
+            template = block
+          when 'script'
+            if block.setup?
+              raise CompileError.new('only one <script setup> block is allowed', file: @filename) if script_setup
+
+              script_setup = block
+            else
+              raise CompileError.new('only one plain <script> block is allowed', file: @filename) if script
+
+              script = block
+            end
+          when 'style'
+            styles << block
+          else
+            custom << block
+          end
+        end
+
+        if template.nil? && script.nil? && script_setup.nil?
+          raise CompileError.new('at least a <template> or <script> block is required', file: @filename)
+        end
+
+        Descriptor.new(filename: @filename, source: @source, template: template, script: script,
+                       script_setup: script_setup, styles: styles, custom_blocks: custom)
+      end
+
+      private
+
+      # Returns [content_end, after_close_tag] for the block opened at +start+.
+      def find_close(tag, start)
+        if tag == 'template'
+          # Templates nest (<template v-slot>), so balance open/close tags.
+          depth = 1
+          scan = start
+          re = %r{<(/?)template(?=[\s>/])[^>]*?(/?)>}m
+          while (m = re.match(@source, scan))
+            if m[1] == '/'
+              depth -= 1
+              return [m.begin(0), m.end(0)] if depth.zero?
+            elsif m[2] != '/'
+              depth += 1
+            end
+            scan = m.end(0)
+          end
+          nil
+        else
+          idx = @source.index(%r{</#{Regexp.escape(tag)}\s*>}i, start)
+          return nil unless idx
+
+          close_end = @source.index('>', idx) + 1
+          [idx, close_end]
+        end
+      end
+
+      def parse_attrs(str)
+        attrs = {}
+        str.scan(ATTR) do |name, dq, sq, bare|
+          attrs[name] = dq || sq || bare || ''
+        end
+        attrs
+      end
+    end
+  end
+end

data/lib/vue_live/sinatra.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require_relative '../vue_live'
+
+module VueLive
+  # Sinatra extension:
+  #
+  #   require 'vue_live/sinatra'
+  #   class App < Sinatra::Base
+  #     set :vue_live, source_path: 'app/vue', prefix: '/vue'   # optional, before register
+  #     register VueLive::Sinatra
+  #   end
+  #
+  # Classic-style apps call `register VueLive::Sinatra` at the top level.
+  #
+  # Mounts the middleware (unless config.middleware is false), defaults the component root to the
+  # app's own root and adds the view helpers.
+  module Sinatra
+    def self.registered(app)
+      app.helpers VueLive::Helpers
+      app.set :vue_live, {} unless app.respond_to?(:vue_live)
+
+      app.configure do
+        VueLive.config.root = app.root if app.respond_to?(:root) && app.root && !VueLive.rails?
+        VueLive.config.env = app.environment.to_s if app.respond_to?(:environment) && app.environment
+        VueLive.config.apply(app.vue_live || {})
+        VueLive.load_config_file
+        app.use VueLive::Middleware if VueLive.config.middleware
+      end
+    end
+  end
+end

data/lib/vue_live/source_map.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+require 'json'
+require 'base64'
+
+module VueLive
+  # Minimal source map (v3) writer: enough to map generated lines back to lines of the .vue file.
+  #
+  #   map = SourceMap.new('App.vue', source)
+  #   map.add(generated_line: 3, original_line: 12)          # 1-based
+  #   map.to_h  / map.to_json  / map.inline_comment
+  class SourceMap
+    BASE64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+
+    attr_reader :file, :source
+
+    def initialize(file, source, generated_file: "#{file}.js")
+      @file = file
+      @source = source
+      @generated_file = generated_file
+      @mappings = {} # generated line (1-based) => [[gen_col, orig_line, orig_col], ...]
+    end
+
+    def add(generated_line:, original_line:, generated_column: 0, original_column: 0)
+      (@mappings[generated_line] ||= []) << [generated_column, original_line, original_column]
+      self
+    end
+
+    # Map +count+ consecutive generated lines starting at +generated_line+ to the source lines
+    # starting at +original_line+.
+    def add_block(generated_line:, original_line:, count:)
+      count.times { |i| add(generated_line: generated_line + i, original_line: original_line + i) }
+      self
+    end
+
+    def empty?
+      @mappings.empty?
+    end
+
+    def to_h
+      {
+        'version' => 3,
+        'file' => @generated_file,
+        'sources' => [file],
+        'sourcesContent' => [source],
+        'names' => [],
+        'mappings' => encode_mappings
+      }
+    end
+
+    def to_json(*)
+      JSON.generate(to_h)
+    end
+
+    # `//# sourceMappingURL=data:...` line for a map Hash (this one or a backend-supplied one).
+    def self.inline_comment(map_hash)
+      data = Base64.strict_encode64(JSON.generate(map_hash))
+      "//# sourceMappingURL=data:application/json;charset=utf-8;base64,#{data}\n"
+    end
+
+    def inline_comment
+      self.class.inline_comment(to_h)
+    end
+
+    def self.vlq(value)
+      vlq = value.negative? ? ((-value) << 1) | 1 : value << 1
+      out = +''
+      loop do
+        digit = vlq & 0x1f
+        vlq >>= 5
+        digit |= 0x20 if vlq.positive?
+        out << BASE64[digit]
+        break unless vlq.positive?
+      end
+      out
+    end
+
+    private
+
+    def encode_mappings
+      last_line = @mappings.keys.max || 0
+      prev_orig_line = 0
+      prev_orig_col = 0
+      (1..last_line).map do |line|
+        segments = (@mappings[line] || []).sort_by(&:first)
+        prev_gen_col = 0
+        segments.map do |gen_col, orig_line, orig_col|
+          seg = self.class.vlq(gen_col - prev_gen_col) +
+                self.class.vlq(0) + # source index (always the one .vue file)
+                self.class.vlq((orig_line - 1) - prev_orig_line) +
+                self.class.vlq(orig_col - prev_orig_col)
+          prev_gen_col = gen_col
+          prev_orig_line = orig_line - 1
+          prev_orig_col = orig_col
+          seg
+        end.join(',')
+      end.join(';')
+    end
+  end
+end