vue_live 0.1.0

data/lib/vue_live/store.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+require 'digest'
+
+module VueLive
+  # Compiles components on demand and remembers the result.
+  #
+  # In development (config.reload? == true) every fetch compares the file's mtime (and the mtimes
+  # of any `src="..."` dependencies and imported siblings) with the cached entry and recompiles
+  # when something changed.  In production the first request compiles and every later one is a
+  # hash lookup.
+  #
+  # With config.digest_imports the relative imports inside a module get `?v=<digest>` appended,
+  # so a page's whole module graph can be served with immutable caching: a child's digest is part
+  # of its parent's code, and therefore of the parent's digest.
+  class Store
+    attr_reader :config, :resolver, :cache
+
+    def initialize(config)
+      @config = config
+      @resolver = Resolver.new(config)
+      @cache = Cache.build(config)
+      @locks = Hash.new { |h, k| h[k] = Mutex.new }
+      @locks_mutex = Mutex.new
+    end
+
+    # Compiled module for the component at +relative_path+ (e.g. "App.vue").  Raises
+    # Errno::ENOENT when the file is missing and CompileError when it cannot be compiled.
+    def fetch(relative_path)
+      relative_path = relative_path.sub(/\.vue\.js\z/, '.vue')
+      absolute = File.join(resolver.source_dir, relative_path)
+      raise Errno::ENOENT, absolute unless File.file?(absolute)
+
+      key = cache_key(relative_path)
+      hit = cache.read(key)
+      return hit if hit && !stale?(hit, absolute)
+
+      lock_for(key).synchronize do
+        hit = cache.read(key)
+        return hit if hit && !stale?(hit, absolute)
+
+        compiling.push(relative_path)
+        begin
+          compiled = compile(relative_path, absolute)
+        ensure
+          compiling.pop
+        end
+        cache.write(key, compiled)
+      end
+    end
+
+    # Content digest for cache-busting URLs; nil when the component does not exist or fails.
+    def digest(relative_path)
+      fetch(relative_path).digest
+    rescue Error, Errno::ENOENT
+      nil
+    end
+
+    # Cache-busting token for a non-component file under the root (matches the middleware's ETag).
+    def file_digest(relative_path)
+      stat = File.stat(File.join(resolver.source_dir, relative_path))
+      Store.file_etag(stat)
+    rescue Errno::ENOENT
+      nil
+    end
+
+    def self.file_etag(stat)
+      "#{stat.mtime.to_i.to_s(16)}-#{stat.size.to_s(16)}"
+    end
+
+    def clear
+      cache.clear
+    end
+
+    private
+
+    def compile(relative_path, absolute)
+      source = File.read(absolute)
+      started = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+      result = Compiler.compile(source, relative_path: relative_path, absolute_path: absolute, config: config)
+      dependencies = result.dependencies.dup
+      code = Emitter.emit(result, relative_path: relative_path, inject_styles: config.inject_styles,
+                                  source_map: config.source_maps?) do |spec|
+        digest_import(spec, relative_path, dependencies)
+      end
+      ms = ((Process.clock_gettime(Process::CLOCK_MONOTONIC) - started) * 1000).round(1)
+      config.logger.debug("[vue_live] compiled #{relative_path} with #{result.backend} in #{ms}ms")
+
+      Compiled.new(
+        relative_path: relative_path,
+        code: code,
+        digest: Digest::SHA256.hexdigest(code)[0, 16],
+        mtime: latest_mtime([absolute] + dependencies),
+        dependencies: dependencies,
+        backend: result.backend,
+        scope_id: result.scope_id
+      )
+    end
+
+    # `./Child.vue.js` -> `./Child.vue.js?v=<digest>` (compiling the child if needed);
+    # `./util.js` -> `./util.js?v=<mtime-size>`.  Imports that cannot be resolved are left alone.
+    def digest_import(spec, importer, dependencies)
+      return nil unless config.digest_imports
+      return nil if spec.start_with?('/') # absolute URLs may belong to another mount
+
+      target = resolver.resolve(File.expand_path(spec, "/#{File.dirname(importer)}").sub(%r{\A/}, ''))
+      return nil unless target
+
+      dependencies << target.absolute_path
+      token = if target.vue?
+                compiling.include?(target.relative_path) ? nil : digest(target.relative_path)
+              else
+                file_digest(target.relative_path)
+              end
+      token ? "#{spec}?v=#{token}" : nil
+    end
+
+    # Components whose compilation is in progress on this thread, to break import cycles.
+    def compiling
+      Thread.current[:vue_live_compiling] ||= []
+    end
+
+    def stale?(compiled, absolute)
+      return false unless config.reload?
+
+      latest_mtime([absolute] + Array(compiled.dependencies)) > compiled.mtime
+    rescue Errno::ENOENT
+      true
+    end
+
+    def latest_mtime(files)
+      files.map { |f| File.mtime(f) }.max
+    end
+
+    def cache_key(relative_path)
+      "#{config.env}:#{config.compiler}:#{relative_path}"
+    end
+
+    def lock_for(key)
+      @locks_mutex.synchronize { @locks[key] }
+    end
+  end
+end

data/lib/vue_live/tasks.rake

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+namespace :vue_live do
+  desc 'Compile every .vue component into static .vue.js modules (default: public/vue)'
+  task :precompile do
+    Rake::Task['environment'].invoke if Rake::Task.task_defined?('environment')
+    VueLive.load_config_file unless VueLive.rails?
+    manifest = VueLive::Precompiler.new.run
+    puts "  #{manifest.size} file(s) written to #{VueLive.config.precompile_dir}"
+  end
+
+  desc 'Remove precompiled components and the compile cache'
+  task :clobber do
+    Rake::Task['environment'].invoke if Rake::Task.task_defined?('environment')
+    VueLive::Precompiler.new.clobber
+    VueLive.store.clear
+    puts "  removed #{VueLive.config.precompile_dir} and #{VueLive.config.cache_dir}"
+  end
+
+  desc 'Verify the configuration, component directory and (if used) the Node toolchain'
+  task :check do
+    Rake::Task['environment'].invoke if Rake::Task.task_defined?('environment')
+    VueLive.load_config_file unless VueLive.rails?
+    problems = VueLive::NodeTools.problems
+    components = VueLive.store.resolver.components
+    puts "  root:       #{VueLive.config.root}"
+    puts "  components: #{VueLive.config.source_dir} (#{components.size} .vue file(s))"
+    puts "  prefix:     #{VueLive.config.normalized_prefix}"
+    puts "  compiler:   #{VueLive.config.compiler}"
+    puts "  vue:        #{VueLive.config.resolved_vue_url}"
+    puts "  node:       #{VueLive::NodeTools.node_version || 'not found'}"
+    puts "  compiler-sfc: #{VueLive::NodeTools.compiler_sfc_version || 'not installed'}"
+    if problems.empty?
+      puts 'Everything looks good.'
+    else
+      problems.each { |p| puts "  problem:    #{p}" }
+      exit 1
+    end
+  end
+
+  desc 'Install @vue/compiler-sfc and vue with npm/yarn for the :node compiler'
+  task :node_setup do
+    Rake::Task['environment'].invoke if Rake::Task.task_defined?('environment')
+    VueLive::NodeTools.setup
+  end
+end
+
+if VueLive.config.hook_assets_precompile && Rake::Task.task_defined?('assets:precompile')
+  Rake::Task['assets:precompile'].enhance(['vue_live:precompile'])
+end

data/lib/vue_live/tasks.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# `require 'vue_live/tasks'` in a Rakefile outside Rails to get the vue_live:* tasks.
+require_relative '../vue_live'
+load File.expand_path('tasks.rake', __dir__)

data/lib/vue_live/templates/HelloVueLive.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="hello">
+    <h2>{{ greeting }}, {{ name }}!</h2>
+    <p>
+      This component was compiled by <code>vue_live</code> straight from
+      <code>app/vue/HelloVueLive.vue</code> — no build step.
+    </p>
+    <button type="button" @click="count++">Clicked {{ count }} time{{ count === 1 ? '' : 's' }}</button>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    name: { type: String, default: 'world' }
+  },
+  data() {
+    return { count: 0 }
+  },
+  computed: {
+    greeting() {
+      return this.count > 4 ? 'Still hello' : 'Hello'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hello {
+  font-family: system-ui, sans-serif;
+  padding: 1rem 1.5rem;
+  border: 1px solid #42b883;
+  border-radius: 8px;
+  max-width: 32rem;
+}
+.hello h2 {
+  color: #42b883;
+  margin-top: 0;
+}
+button {
+  background: #35495e;
+  color: white;
+  border: 0;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+</style>

data/lib/vue_live/templates/vue_live.yml

@@ -0,0 +1,32 @@
+# vue_live configuration.  Keys mirror VueLive::Configuration; the `default` section is merged
+# with the section for the current environment (RAILS_ENV / RACK_ENV / APP_ENV).
+default: &default
+  # Directory holding your .vue components (relative to the project root).
+  source_path: app/vue
+  # URL prefix the components are served under.
+  prefix: /vue
+  # ruby  - pure Ruby, zero dependencies: <template>, <script>, <style [scoped]>
+  # node  - @vue/compiler-sfc through Node.js: adds <script setup>, TypeScript, Sass, CSS modules
+  # auto  - Ruby, falling back to Node only for components that need it
+  compiler: auto
+  # memory | file | none
+  cache: memory
+  cache_path: tmp/cache/vue_live
+  # URL of Vue's ESM browser build.  Leave unset to use a local copy (node_modules or
+  # vendor/vue_live) when one exists, otherwise the pinned jsDelivr build.
+  # vue_url: https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js
+  # Extra import-map entries available to your components:
+  # import_map:
+  #   pinia: https://cdn.jsdelivr.net/npm/pinia@3/dist/pinia.esm-browser.js
+
+development:
+  <<: *default
+  reload: true
+
+test:
+  <<: *default
+
+production:
+  <<: *default
+  reload: false
+  # cache: file

data/lib/vue_live/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module VueLive
+  VERSION = '0.1.0'
+end

data/lib/vue_live.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+require_relative 'vue_live/version'
+require_relative 'vue_live/errors'
+require_relative 'vue_live/configuration'
+require_relative 'vue_live/source_map'
+require_relative 'vue_live/compiler'
+require_relative 'vue_live/emitter'
+require_relative 'vue_live/cache'
+require_relative 'vue_live/resolver'
+require_relative 'vue_live/store'
+require_relative 'vue_live/live_reload'
+require_relative 'vue_live/middleware'
+require_relative 'vue_live/helpers'
+require_relative 'vue_live/precompiler'
+require_relative 'vue_live/node_tools'
+
+# vue_live: serve Vue single-file components straight from Ruby, in production, with no build step.
+#
+#   # Rack / Sinatra
+#   use VueLive::Middleware
+#
+#   # Rails: nothing to do - the Railtie mounts the middleware and adds the view helpers.
+#
+#   <%= vue_live_import_map_tag %>
+#   <%= vue_live_mount_tag 'App.vue', '#app' %>
+module VueLive
+  class << self
+    def config
+      @config ||= Configuration.new
+    end
+
+    def configure
+      yield config if block_given?
+      reset_store!
+      config
+    end
+
+    # Replace the configuration wholesale (used by tests and by the Railtie).
+    def config=(configuration)
+      @config = configuration
+      reset_store!
+    end
+
+    # Load config/vue_live.yml from the project root if it exists.
+    def load_config_file(path = nil)
+      config.load_yaml(*[path].compact)
+      reset_store!
+      config
+    end
+
+    # The object that compiles and caches components; one per configuration.
+    def store
+      @store ||= Store.new(config)
+    end
+
+    def reset_store!
+      @store = nil
+    end
+
+    # Compile a component by its path relative to the source directory and return the module body.
+    def compile(relative_path)
+      store.fetch(relative_path).code
+    end
+
+    # Convenience: compile a .vue string with no file behind it.
+    def compile_source(source, filename: 'anonymous.vue')
+      result = Compiler.compile(source, relative_path: filename, config: config)
+      Emitter.emit(result, relative_path: filename, inject_styles: config.inject_styles)
+    end
+
+    # ---- environment detection -------------------------------------------------------------
+
+    def rails?
+      defined?(::Rails) && ::Rails.respond_to?(:application) && !::Rails.application.nil?
+    rescue StandardError
+      false
+    end
+
+    # A Rails project on disk (even when Rails itself is not loaded, e.g. from the CLI).
+    def rails_project?(dir = Dir.pwd)
+      File.file?(File.join(dir, 'config', 'application.rb')) &&
+        (File.file?(File.join(dir, 'bin', 'rails')) || File.file?(File.join(dir, 'config', 'environment.rb')))
+    end
+
+    def sinatra?
+      defined?(::Sinatra::Base) ? true : false
+    end
+
+    def detect_root
+      return ::Rails.root.to_s if rails? && ::Rails.root
+
+      ENV['VUE_LIVE_ROOT'] || Dir.pwd
+    end
+
+    def detect_env
+      ENV['VUE_LIVE_ENV'] || ENV['RAILS_ENV'] || ENV['RACK_ENV'] || ENV['APP_ENV'] ||
+        (rails? ? ::Rails.env.to_s : 'development')
+    end
+
+    def logger
+      config.logger
+    end
+  end
+end
+
+require_relative 'vue_live/railtie' if defined?(Rails::Railtie)

metadata

@@ -0,0 +1,292 @@
+--- !ruby/object:Gem::Specification
+name: vue_live
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Daniel P. Clark
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: actionview
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.11'
+- !ruby/object:Gem::Dependency
+  name: rack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+- !ruby/object:Gem::Dependency
+  name: rack-test
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rackup
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.60'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.60'
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+- !ruby/object:Gem::Dependency
+  name: webpacker_cli
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: webrick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+description: |-
+  vue_live compiles .vue single-file components on the fly, in Ruby, and serves them to the browser
+  as native ES modules.  It works with any Rack application (Sinatra, Roda, plain Rack), detects a
+  Rails application and configures itself as a Railtie, and coexists with Sprockets, Propshaft,
+  Webpacker, importmap-rails and jsbundling without touching their paths.  An optional Node backend
+  (via @vue/compiler-sfc) adds <script setup>, TypeScript and CSS preprocessors.
+email:
+- 6ftdan@gmail.com
+executables:
+- vue-live
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE-APACHE
+- LICENSE-MIT
+- README.md
+- exe/vue-live
+- lib/generators/vue_live/install/install_generator.rb
+- lib/vue_live.rb
+- lib/vue_live/assets/reload.js
+- lib/vue_live/cache.rb
+- lib/vue_live/cli.rb
+- lib/vue_live/compiler.rb
+- lib/vue_live/compiler/node.rb
+- lib/vue_live/compiler/node/compile.js
+- lib/vue_live/compiler/ruby.rb
+- lib/vue_live/configuration.rb
+- lib/vue_live/emitter.rb
+- lib/vue_live/errors.rb
+- lib/vue_live/helpers.rb
+- lib/vue_live/live_reload.rb
+- lib/vue_live/middleware.rb
+- lib/vue_live/node_tools.rb
+- lib/vue_live/precompiler.rb
+- lib/vue_live/rails/helper.rb
+- lib/vue_live/railtie.rb
+- lib/vue_live/resolver.rb
+- lib/vue_live/scoped_css.rb
+- lib/vue_live/sfc/descriptor.rb
+- lib/vue_live/sfc/parser.rb
+- lib/vue_live/sinatra.rb
+- lib/vue_live/source_map.rb
+- lib/vue_live/store.rb
+- lib/vue_live/tasks.rake
+- lib/vue_live/tasks.rb
+- lib/vue_live/templates/HelloVueLive.vue
+- lib/vue_live/templates/vue_live.yml
+- lib/vue_live/version.rb
+homepage: https://github.com/danielpclark/vue-live
+licenses:
+- MIT
+- Apache-2.0
+metadata:
+  source_code_uri: https://github.com/danielpclark/vue-live
+  changelog_uri: https://github.com/danielpclark/vue-live/blob/main/CHANGELOG.md
+  bug_tracker_uri: https://github.com/danielpclark/vue-live/issues
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: Serve Vue single-file components straight from Ruby, in production, with
+  no build step.
+test_files: []