vue_live 0.1.0

data/lib/vue_live/compiler/ruby.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require 'json'
+require_relative '../scoped_css'
+
+module VueLive
+  module Compiler
+    # The zero-dependency backend.
+    #
+    # Output for a component with <template>, <script> and <style scoped>:
+    #
+    #   import Something from './Something.vue'   // the user's own script, untouched
+    #   const __sfc__ = { components: { Something }, data() { ... } }
+    #   __sfc__.template = "<div class=\"a\">…</div>"
+    #   __sfc__.__scopeId = "data-v-1a2b3c4d"     // Vue 3 applies this in the renderer
+    #   __sfc__._scopeId  = "data-v-1a2b3c4d"     // same for Vue 2
+    #   export default __sfc__
+    #
+    # The template string is compiled in the browser by Vue's *full* build, which is what the
+    # old Sprockets .vue setups relied on too.  Scope ids are applied by Vue's renderer, not its
+    # template compiler, so scoped styles work without a build step.
+    class Ruby < Base
+      EXPORT_DEFAULT = /^[ \t]*export[ \t]+default[ \t]+/m
+      MODULE_EXPORTS = /^[ \t]*module\.exports[ \t]*=[ \t]*/m
+
+      def compile(descriptor, relative_path:, absolute_path: nil)
+        unless descriptor.advanced_features.empty?
+          raise UnsupportedFeature.new(
+            "uses #{descriptor.advanced_features.join(', ')}; the Ruby compiler supports plain " \
+            '<template>, <script> and <style> blocks only (switch to the :node compiler for more)',
+            file: relative_path
+          )
+        end
+
+        dependencies = []
+        scope_id = Compiler.scope_id(relative_path)
+        scoped = descriptor.scoped_styles?
+
+        script, script_file = block_source(descriptor.script, absolute_path, dependencies)
+        code = rewrite_script(script.to_s, relative_path)
+        map = build_map(descriptor, script.to_s, code, script_file.nil?) if config.source_maps?
+
+        if descriptor.template
+          template, = block_source(descriptor.template, absolute_path, dependencies)
+          code << "__sfc__.template = #{js_string(template.strip)}\n"
+        end
+
+        if scoped
+          code << "__sfc__.__scopeId = #{js_string(scope_id)}\n"
+          code << "__sfc__._scopeId = #{js_string(scope_id)}\n"
+        end
+        code << "__sfc__.__file = #{js_string(relative_path)}\n" unless config.production?
+        code << "export default __sfc__\n"
+
+        css = descriptor.styles.map do |style|
+          content, = block_source(style, absolute_path, dependencies)
+          style.scoped? ? ScopedCSS.rewrite(content, scope_id) : content
+        end.join("\n")
+
+        Result.new(code: code, css: css, source_map: map&.to_h, scope_id: scoped ? scope_id : nil, backend: :ruby,
+                   dependencies: dependencies)
+      end
+
+      private
+
+      # `export default {...}` becomes `const __sfc__ = {...}` so we can decorate the options
+      # object before re-exporting it.  Works for `export default defineComponent({...})` too.
+      def rewrite_script(script, relative_path)
+        body = script.dup
+        if body.match?(EXPORT_DEFAULT)
+          body.sub!(EXPORT_DEFAULT, 'const __sfc__ = ')
+        elsif body.match?(MODULE_EXPORTS)
+          body.sub!(MODULE_EXPORTS, 'const __sfc__ = ')
+        else
+          body << "\nconst __sfc__ = {}"
+        end
+        if body.match?(EXPORT_DEFAULT)
+          raise CompileError.new('only one `export default` is allowed in <script>', file: relative_path)
+        end
+
+        "#{body.rstrip}\n"
+      end
+
+      # The script block is copied line for line (only `export default` is rewritten in place), so
+      # each generated line of it maps straight to its line in the .vue file.
+      def build_map(descriptor, script, code, inline_script)
+        map = SourceMap.new(descriptor.filename, descriptor.source)
+        return map unless descriptor.script && inline_script && !script.empty?
+
+        # Block content starts right after the opening tag, so its first line is the tag's line.
+        script_lines = script.rstrip.split("\n", -1).length # the trailing newline is not a line
+        generated_lines = code.split("\n", -1).length
+        map.add_block(generated_line: 1, original_line: descriptor.script.line, count: [script_lines, generated_lines].min)
+        map
+      end
+
+      def js_string(str)
+        # JSON is a subset of JS string literal syntax; escape the two JS-only line terminators and
+        # "</script>" so the output is safe even when inlined into HTML.
+        JSON.generate(str).gsub('
', '
').gsub('
', '
').gsub('</', '<\/')
+      end
+    end
+  end
+end

data/lib/vue_live/compiler.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+require 'digest'
+require_relative 'sfc/parser'
+
+module VueLive
+  # Turns a .vue source into the pieces of an ES module.  Two backends implement the same
+  # interface:
+  #
+  #   VueLive::Compiler::Ruby  - pure Ruby, no dependencies.  Templates stay as strings and are
+  #                              compiled in the browser by Vue's full build.
+  #   VueLive::Compiler::Node  - @vue/compiler-sfc via Node.js.  Templates become render
+  #                              functions; <script setup>, TypeScript and preprocessors work.
+  module Compiler
+    # What a backend hands back.  +code+ is the module body *without* style injection and
+    # before import rewriting; Emitter finishes the job.
+    # +source_map+ is an optional source map (Hash, v3) whose generated lines refer to +code+.
+    Result = Struct.new(:code, :css, :source_map, :scope_id, :backend, :dependencies, keyword_init: true) do
+      def css?
+        css && !css.strip.empty?
+      end
+    end
+
+    # Deterministic scope id for a component, derived from its path relative to the component
+    # root so it is stable across machines and deploys: "data-v-1a2b3c4d".
+    def self.scope_id(relative_path)
+      "data-v-#{Digest::SHA256.hexdigest(relative_path.to_s.tr('\\', '/'))[0, 8]}"
+    end
+
+    # Pick a backend for +descriptor+ according to the configured strategy.
+    def self.for(descriptor, config = VueLive.config)
+      case config.compiler.to_s
+      when 'ruby' then Ruby.new(config)
+      when 'node' then Node.new(config)
+      when 'auto', ''
+        if descriptor.advanced_features.empty?
+          Ruby.new(config)
+        elsif Node.available?(config)
+          Node.new(config)
+        else
+          raise UnsupportedFeature.new(
+            "uses #{descriptor.advanced_features.join(', ')}, which the pure Ruby compiler cannot handle. " \
+            'Install Node.js and @vue/compiler-sfc (`vue-live node-setup`) to enable the Node backend, ' \
+            'or rewrite the component with a plain <script> / <style> block.',
+            file: descriptor.filename
+          )
+        end
+      else
+        raise Error, "unknown compiler #{config.compiler.inspect} (expected :ruby, :node or :auto)"
+      end
+    end
+
+    # Parse + compile in one go.  +relative_path+ is the component's path under the source dir
+    # and +absolute_path+ (optional) lets `src="..."` attributes resolve sibling files.
+    def self.compile(source, relative_path:, absolute_path: nil, config: VueLive.config)
+      descriptor = SFC::Parser.parse(source, filename: relative_path)
+      backend = self.for(descriptor, config)
+      backend.compile(descriptor, relative_path: relative_path, absolute_path: absolute_path)
+    end
+
+    class Base
+      attr_reader :config
+
+      def initialize(config = VueLive.config)
+        @config = config
+      end
+
+      def name
+        self.class.name.split('::').last.downcase.to_sym
+      end
+
+      # Resolve a block's `src="./file"` attribute against the component's own location.
+      # Returns [content, path] or [block.content, nil].
+      def block_source(block, absolute_path, dependencies)
+        return [block&.content, nil] unless block&.src
+        raise CompileError.new('src="..." attributes need the component path', file: absolute_path) unless absolute_path
+
+        path = File.expand_path(block.src, File.dirname(absolute_path))
+        root = File.expand_path(config.source_dir)
+        unless path.start_with?(root + File::SEPARATOR)
+          raise ForbiddenPath, "#{block.src} resolves outside the component root"
+        end
+        raise CompileError.new("src file not found: #{block.src}", file: absolute_path) unless File.file?(path)
+
+        dependencies << path
+        [File.read(path), path]
+      end
+    end
+  end
+end
+
+require_relative 'compiler/ruby'
+require_relative 'compiler/node'

data/lib/vue_live/configuration.rb

@@ -0,0 +1,219 @@
+# frozen_string_literal: true
+
+require 'yaml'
+require 'logger'
+
+module VueLive
+  # All tunables live here.  Values come from (lowest to highest precedence):
+  #
+  #   1. built-in defaults
+  #   2. config/vue_live.yml  (``default`` section merged with the current environment section)
+  #   3. Ruby: VueLive.configure { |c| ... }  /  Rails: config.vue_live.xxx = ...
+  #
+  # Everything is plain Ruby so it works the same under Rails, Sinatra or bare Rack.
+  class Configuration
+    VUE_VERSION   = '3.5.43'
+    CDN_TEMPLATE  = 'https://cdn.jsdelivr.net/npm/vue@%<version>s/dist/%<file>s'
+
+    # Files the middleware is willing to serve from the component root.  Everything else is 404.
+    DEFAULT_EXTENSIONS = %w[.vue .js .mjs .css .json .svg .png .jpg .jpeg .gif .webp .avif .ico .woff .woff2 .ttf .otf].freeze
+
+    # Where the project lives.  Rails.root under Rails, the current directory elsewhere.
+    attr_writer :root
+    # Directory holding the .vue components, relative to +root+ (or absolute).
+    attr_accessor :source_path
+    # URL prefix the middleware answers on.
+    attr_accessor :prefix
+    # Current environment name: development / test / production.
+    attr_writer :env
+    # :ruby (pure Ruby, zero dependencies), :node (@vue/compiler-sfc through Node.js) or :auto
+    # (Ruby, falling back to Node only for components the Ruby backend cannot handle).
+    attr_accessor :compiler
+    # Re-check mtimes and recompile changed files on every request.  On in development and test.
+    attr_accessor :reload
+    # :memory keeps compiled modules in the process, :file additionally persists them under
+    # +cache_path+ (survives restarts, shared between workers), :none disables caching.
+    attr_accessor :cache
+    attr_accessor :cache_path, :vue_version
+    attr_writer :logger
+    # URL of the Vue ESM build.  nil = auto: a local copy under node_modules or vendor/vue_live when
+    # present, otherwise the pinned jsDelivr build.  Must be a *full* build (with the template
+    # compiler) when components ship their templates as strings, i.e. with the Ruby backend.
+    attr_accessor :vue_url
+    # Extra entries for the generated import map, e.g. { 'pinia' => 'https://...' }.
+    attr_accessor :import_map
+    # Node.js executable used by the :node compiler.
+    attr_accessor :node_bin
+    # Allowed file extensions under +source_path+.
+    attr_accessor :extensions
+    # Output directory for +vue-live compile+ (precompiled, static ES modules).
+    attr_accessor :precompile_path
+    # Use public/vue/manifest.json for URLs instead of the live middleware.  nil = auto
+    # (true in production when the manifest exists).
+    attr_accessor :use_manifest
+    # Mount the middleware automatically (Railtie / Sinatra extension).  Set false to +use+ it yourself.
+    attr_accessor :middleware
+    # Register a `vue` pin with importmap-rails automatically when that gem is present.
+    attr_accessor :importmap_pin
+    # Hook `vue_live:precompile` into `assets:precompile` under Rails (off by default: live is the point).
+    attr_accessor :hook_assets_precompile
+    # Whether to emit `<style>` content into the module (true) or drop styles entirely (false).
+    attr_accessor :inject_styles
+    # Append an inline source map to every compiled module.  nil = on outside production.
+    attr_accessor :source_maps
+    # Keep one long-lived `node compile.js --server` process per configuration (true) or spawn a
+    # process per compile (false).
+    attr_accessor :node_worker
+    # Development live reload: SSE stream at <prefix>/-/events + client at <prefix>/-/reload.js.
+    # nil = on whenever +reload+ is on.
+    attr_accessor :live_reload
+    # Seconds between directory scans for live reload.
+    attr_accessor :live_reload_interval
+    # Add `?v=<digest>` to the relative imports inside compiled modules so every file a page loads
+    # can be cached immutably.
+    attr_accessor :digest_imports
+
+    def initialize
+      @root         = nil
+      @source_path  = 'app/vue'
+      @prefix       = '/vue'
+      @env          = nil
+      @compiler     = :auto
+      @reload       = nil
+      @cache        = :memory
+      @cache_path   = 'tmp/cache/vue_live'
+      @vue_url      = nil
+      @vue_version  = VUE_VERSION
+      @import_map   = {}
+      @node_bin     = ENV['VUE_LIVE_NODE'] || 'node'
+      @extensions   = DEFAULT_EXTENSIONS.dup
+      @precompile_path = 'public/vue'
+      @use_manifest = nil
+      @middleware   = true
+      @logger       = nil
+      @importmap_pin = true
+      @hook_assets_precompile = false
+      @inject_styles = true
+      @source_maps  = nil
+      @node_worker  = true
+      @live_reload  = nil
+      @live_reload_interval = 0.5
+      @digest_imports = true
+    end
+
+    def root
+      @root ||= VueLive.detect_root
+    end
+
+    def env
+      @env ||= VueLive.detect_env
+    end
+
+    def production?
+      env.to_s == 'production'
+    end
+
+    def reload?
+      @reload.nil? ? !production? : !!@reload
+    end
+
+    def source_maps?
+      @source_maps.nil? ? !production? : !!@source_maps
+    end
+
+    def live_reload?
+      @live_reload.nil? ? reload? : !!@live_reload
+    end
+
+    def logger
+      @logger ||= default_logger
+    end
+
+    def source_dir
+      File.expand_path(source_path.to_s, root)
+    end
+
+    def cache_dir
+      File.expand_path(cache_path.to_s, root)
+    end
+
+    def precompile_dir
+      File.expand_path(precompile_path.to_s, root)
+    end
+
+    def manifest_path
+      File.join(precompile_dir, 'manifest.json')
+    end
+
+    def use_manifest?
+      return !!@use_manifest unless @use_manifest.nil?
+
+      production? && File.exist?(manifest_path)
+    end
+
+    # Normalised prefix: leading slash, no trailing slash ("/vue").
+    def normalized_prefix
+      p = "/#{prefix.to_s.gsub(%r{\A/+|/+\z}, '')}"
+      p == '/' ? '' : p
+    end
+
+    # The URL the browser loads Vue itself from.
+    def resolved_vue_url
+      return vue_url if vue_url && !vue_url.empty?
+      return "#{normalized_prefix}/-/vue.esm-browser.js" if local_vue_file
+
+      format(CDN_TEMPLATE, version: vue_version, file: production? ? 'vue.esm-browser.prod.js' : 'vue.esm-browser.js')
+    end
+
+    # A copy of Vue's full ESM browser build inside the project, if one is installed.
+    def local_vue_file
+      candidates = [
+        File.join(root, 'vendor', 'vue_live', production? ? 'vue.esm-browser.prod.js' : 'vue.esm-browser.js'),
+        File.join(root, 'vendor', 'vue_live', 'vue.esm-browser.js'),
+        File.join(root, 'node_modules', 'vue', 'dist', production? ? 'vue.esm-browser.prod.js' : 'vue.esm-browser.js'),
+        File.join(root, 'node_modules', 'vue', 'dist', 'vue.esm-browser.js')
+      ]
+      candidates.find { |f| File.file?(f) }
+    end
+
+    # Merge a config/vue_live.yml (``default`` + env sections) into this object.
+    def load_yaml(file = File.join(root, 'config', 'vue_live.yml'))
+      return self unless File.file?(file)
+
+      data = YAML.safe_load_file(file, aliases: true, symbolize_names: false) || {}
+      merged = (data['default'] || {}).merge(data[env.to_s] || {})
+      apply(merged)
+    end
+
+    # Apply a Hash of settings (string or symbol keys).
+    def apply(hash)
+      hash.each do |key, value|
+        setter = "#{key}="
+        next unless respond_to?(setter)
+
+        value = value.to_sym if %w[compiler cache].include?(key.to_s) && value.is_a?(String)
+        public_send(setter, value)
+      end
+      self
+    end
+
+    def to_h
+      instance_variables.each_with_object({}) do |ivar, h|
+        name = ivar.to_s.delete('@')
+        next if name == 'logger'
+
+        h[name] = instance_variable_get(ivar)
+      end
+    end
+
+    private
+
+    def default_logger
+      if defined?(::Rails) && ::Rails.respond_to?(:logger) && ::Rails.logger
+        ::Rails.logger
+      else
+        Logger.new($stderr).tap { |l| l.level = production? ? Logger::INFO : Logger::DEBUG }
+      end
+    end
+  end
+end

data/lib/vue_live/emitter.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+require 'json'
+require 'digest'
+
+module VueLive
+  # Finishes a Compiler::Result into the JavaScript the browser receives:
+  #
+  #   * relative imports of `./Foo.vue` become `./Foo.vue.js` so the same output works from the
+  #     live middleware and from a precompiled directory served by any static file server
+  #     (a block can further rewrite each relative specifier, e.g. to add `?v=<digest>`)
+  #   * <style> content is injected once per component via a constructable stylesheet
+  #     (CSP-friendly), falling back to a <style> element
+  #   * the source map, when present, is appended inline
+  #
+  # The component code always starts on line 1 so source maps need no offset.
+  module Emitter
+    # Any relative/absolute-path import specifier:
+    #   import X from './x.vue'   import './x.js'   export * from '../y.vue'   import('./z.vue')
+    RELATIVE_IMPORT = %r{((?:\bfrom\s*|\bimport\s*\(?\s*|\bexport\s+\*\s+from\s*)\s*)(['"])((?:\.{1,2}/|/)[^'"?#]+)([?#][^'"]*)?\2} # rubocop:disable Layout/LineLength
+
+    STYLE_RUNTIME = <<~JS
+      ;(function (css, key) {
+        if (typeof document === 'undefined') return
+        var registry = (globalThis.__vueLiveStyles = globalThis.__vueLiveStyles || {})
+        if (registry[key]) return
+        registry[key] = true
+        try {
+          if (document.adoptedStyleSheets && typeof CSSStyleSheet === 'function') {
+            var sheet = new CSSStyleSheet()
+            sheet.replaceSync(css)
+            document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet)
+            return
+          }
+        } catch (e) { /* fall through to a <style> element */ }
+        var el = document.createElement('style')
+        el.setAttribute('data-vue-live', key)
+        el.textContent = css
+        document.head.appendChild(el)
+      })(%<css>s, %<key>s)
+    JS
+
+    module_function
+
+    # +rewrite+ receives each relative specifier (already `.vue` -> `.vue.js`) and returns the
+    # specifier to emit; nil keeps it.
+    def emit(result, relative_path:, inject_styles: true, banner: true, source_map: true, &rewrite)
+      out = rewrite_imports(result.code, &rewrite)
+      out << "\n" unless out.end_with?("\n")
+      out << "// #{relative_path} — compiled by vue_live (#{result.backend})\n" if banner
+      if inject_styles && result.css?
+        key = "vue-live-#{Digest::SHA256.hexdigest(relative_path)[0, 10]}"
+        out << format(STYLE_RUNTIME, css: js_string(result.css), key: js_string(key))
+      end
+      out << SourceMap.inline_comment(result.source_map) if source_map && result.source_map && !result.source_map.empty?
+      out
+    end
+
+    def rewrite_imports(code)
+      code.gsub(RELATIVE_IMPORT) do
+        prefix, quote, spec, suffix = Regexp.last_match[1..4]
+        spec = "#{spec}.js" if spec.end_with?('.vue')
+        spec = (block_given? && yield(spec)) || spec unless suffix # leave explicit queries alone
+        "#{prefix}#{quote}#{spec}#{suffix}#{quote}"
+      end
+    end
+
+    def js_string(str)
+      JSON.generate(str).gsub('
', '
').gsub('
', '
').gsub('</', '<\/')
+    end
+  end
+end

data/lib/vue_live/errors.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module VueLive
+  class Error < StandardError; end
+
+  # Raised when a .vue file cannot be turned into a JavaScript module.
+  class CompileError < Error
+    attr_reader :file
+
+    def initialize(message, file: nil)
+      @file = file
+      super(file ? "#{file}: #{message}" : message)
+    end
+  end
+
+  # Raised when a component uses a feature the selected compiler backend cannot handle
+  # (for example <script setup> with the pure Ruby backend).
+  class UnsupportedFeature < CompileError; end
+
+  # Raised when a requested path escapes the component root or has a disallowed extension.
+  class ForbiddenPath < Error; end
+end

data/lib/vue_live/helpers.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+require 'json'
+
+module VueLive
+  # Framework-agnostic view helpers.  They return plain Strings; the Rails module wraps them in
+  # html_safe and adds CSP nonces.  Include into any view context:
+  #
+  #   helpers VueLive::Helpers          # Sinatra
+  #   include VueLive::Helpers          # ERB / Tilt / anything with a binding
+  module Helpers
+    # URL for a component (or any file under the component root), with a content digest for
+    # cache busting:  vue_live_path('App.vue')  #=> "/vue/App.vue.js?v=1a2b3c4d5e6f7a8b"
+    def vue_live_path(component)
+      config = vue_live_config
+      rel = component.to_s.sub(%r{\A/+}, '')
+      if config.use_manifest?
+        manifest = VueLive::Precompiler.manifest(config)
+        return manifest[rel] || manifest[rel.sub(/\.vue\.js\z/, '.vue')] || "#{config.normalized_prefix}/#{rel}"
+      end
+      url = "#{config.normalized_prefix}/#{rel.end_with?('.vue') ? "#{rel}.js" : rel}"
+      digest = rel.end_with?('.vue') ? VueLive.store.digest(rel) : nil
+      digest ? "#{url}?v=#{digest}" : url
+    end
+
+    # The import map every page needs once, before any module script:
+    #
+    #   <script type="importmap">{"imports":{"vue":"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js"}}</script>
+    #
+    # Extra entries come from config.import_map and the +imports+ argument.  Returns an empty
+    # string when importmap-rails is managing the page's import map (the Railtie pins `vue` there).
+    def vue_live_import_map_tag(imports: {}, nonce: nil)
+      return '' if vue_live_external_importmap?
+
+      map = { 'imports' => vue_live_import_map(imports) }
+      %(<script type="importmap"#{vue_live_nonce_attr(nonce)}>#{JSON.generate(map).gsub('</', '<\/')}</script>)
+    end
+
+    def vue_live_import_map(extra = {})
+      config = vue_live_config
+      { 'vue' => config.resolved_vue_url }.merge(stringify_keys(config.import_map)).merge(stringify_keys(extra))
+    end
+
+    # <script type="module"> that imports a component and mounts it on +selector+:
+    #
+    #   vue_live_mount_tag 'App.vue', '#app', props: { user: current_user.name }
+    #
+    # Pass +create: false+ to get only the import and an exported `app` you can configure
+    # yourself, or use vue_live_module_tag for arbitrary code.
+    def vue_live_mount_tag(component, selector = '#app', props: {}, nonce: nil, element: false, plugins: [])
+      config = vue_live_config
+      url = vue_live_path(component)
+      js = +''
+      if config.vue_version.to_s.start_with?('2')
+        js << "import Vue from 'vue'\nimport App from #{js_str(url)}\n"
+        js << "new Vue({ render: h => h(App, { props: #{JSON.generate(props)} }) }).$mount(#{js_str(selector)})\n"
+      else
+        js << "import { createApp } from 'vue'\nimport App from #{js_str(url)}\n"
+        js << "const app = createApp(App, #{JSON.generate(props)})\n"
+        Array(plugins).each { |plugin| js << "app.use(#{plugin})\n" }
+        js << "app.mount(#{js_str(selector)})\n"
+      end
+      tag = vue_live_module_tag(js, nonce: nonce)
+      tag = "#{tag}\n#{vue_live_reload_tag(nonce: nonce)}" if config.live_reload?
+      element ? "#{vue_live_mount_element(selector)}\n#{tag}" : tag
+    end
+
+    # Development live reload client (reloads the page when a component changes).  Included by
+    # vue_live_mount_tag whenever config.live_reload? is on; renders nothing otherwise.
+    def vue_live_reload_tag(nonce: nil)
+      config = vue_live_config
+      return '' unless config.live_reload?
+
+      prefix = config.normalized_prefix
+      %(<script src="#{prefix}/-/reload.js" data-events="#{prefix}/-/events" defer#{vue_live_nonce_attr(nonce)}></script>)
+    end
+
+    def vue_live_module_tag(javascript, nonce: nil)
+      %(<script type="module"#{vue_live_nonce_attr(nonce)}>\n#{javascript.to_s.gsub('</script', '<\/script')}</script>)
+    end
+
+    # Everything a simple page needs: import map + mount script (+ the mount element).
+    def vue_live_tags(component, selector = '#app', **options)
+      [vue_live_import_map_tag(nonce: options[:nonce]), vue_live_mount_tag(component, selector, **options)].join("\n")
+    end
+
+    private
+
+    def vue_live_config
+      VueLive.config
+    end
+
+    def vue_live_mount_element(selector)
+      if selector.start_with?('#')
+        %(<div id="#{selector[1..]}"></div>)
+      else
+        %(<div class="#{selector.sub(/\A\./, '')}"></div>)
+      end
+    end
+
+    # Overridden by the Rails helper to detect importmap-rails.
+    def vue_live_external_importmap?
+      false
+    end
+
+    def vue_live_nonce_attr(nonce)
+      nonce ? %( nonce="#{nonce}") : ''
+    end
+
+    def js_str(str)
+      JSON.generate(str.to_s).gsub('</', '<\/')
+    end
+
+    def stringify_keys(hash)
+      (hash || {}).each_with_object({}) { |(k, v), h| h[k.to_s] = v }
+    end
+  end
+end