jass-vue-sfc 0.5.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ab40368ebb1bc5a2c21ea1ac7bde01c96a63897f2b072440849d047e510c8494
+  data.tar.gz: d82d4dd740cc97e33226bb644dcbae8a6525cd545c1e6ff6eb5b4306601550b0
+SHA512:
+  metadata.gz: '081894ef43d71ddf65e050436020fa61657043de187907debe17952fe54397c8977bdae706511e4081980a370afed63e9036b95bbf7f007cfd23bc453e29cb8e'
+  data.tar.gz: 01acb42ca64cc5ce55cad25cbda8cc2b34394138024bc9bd7031c8b97a562cf7887fd30fbedefb24b4dd48f5e762773a71a67210dc43f86f158f614ef5769f28

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Matthias Grosser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,101 @@
+[![Gem Version](https://badge.fury.io/rb/jass-vue-sfc.svg)](http://badge.fury.io/rb/jass-vue-sfc)
+[![build](https://github.com/mtgrosser/jass-vue-sfc/actions/workflows/build.yml/badge.svg)](https://github.com/mtgrosser/jass-vue-sfc/actions/workflows/build.yml)
+
+# Jass::Vue::SFC – Vue SFC support for the Rails asset pipeline
+
+`Jass::Vue::SFC` provides [Vue Single File Component](https://v3.vuejs.org/guide/single-file-component.html) support for Sprockets and the Rails asset pipeline.
+
+Vue SFCs will be compiled to ES modules, which can be imported using the new Rails [Import Maps](https://github.com/rails/importmap-rails) or regular `<script module>` tags.
+
+## Why?
+
+Modern browsers support native loading of ES modules using the `import` statement.
+By leveraging the new Rails Import Maps, modular JS applications can be built
+without having to integrate a complex and tedious JS build pipeline. 
+
+However, framework-specific component formats like the Vue SFC format could not be used this
+way till now.
+
+`Jass::Vue::SFC` enables the asset pipeline to compile `.vue` files to ES modules,
+allowing to build modular Vue applications in a clear and straightforward way,
+without the necessity of external build tools.
+
+## Installation
+
+### Gemfile
+```ruby
+gem 'jass-vue-sfc'
+```
+
+### JS dependencies
+Add `@vue/compiler-sfc` to your JS dependencies:
+```sh
+$ yarn add @vue/compiler-sfc
+```
+
+### Node.js
+
+`Jass::Vue::SFC` depends on [Nodo](https://github.com/mtgrosser/nodo), which requires a working Node.js installation.
+
+## Usage
+
+Place your `.vue` components inside your regular asset path, e.g. under `app/assets/javascripts` or `app/javascript`.
+
+In `app/javascript/components/HelloWorld.vue`:
+
+```vue
+<script>
+export default {
+  data() {
+    return {
+      greeting: 'Hello World!'
+    }
+  }
+}
+</script>
+
+<template>
+  <p class="greeting">{{ greeting }}</p>
+</template>
+```
+
+Then add the component to `app/assets/config/manifest.js`:
+
+```js
+//= link app/javascript/components/HelloWorld.js
+```
+
+Make sure to link the file as `.js` instead of `.vue`. Sprockets will take care of
+converting it into an ES module.
+
+In your HTML code, load the component as a module:
+
+```erb
+<%= javascript_include_tag 'HelloWorld.js', module: true %>
+```
+
+### Components with imports
+
+If you want to use module `import`s within your components, pin them in your Rails importmap:
+
+```
+# config/importmap.rb
+pin 'vue'
+pin 'HelloWorld.vue', to: 'HelloWorld.js'
+```
+
+Then just use them in your component:
+
+```vue
+<script>
+import Vue from 'vue';
+...
+</script>
+```
+
+## Limitations
+
+Currently, the following things are not (yet) supported:
+
+- extracting the `<style>` section of the SFC
+- source maps

data/lib/jass/vue/sfc/compiler.rb

@@ -0,0 +1,88 @@
+require 'digest/md5'
+
+class Jass::Vue::SFC::Compiler < Nodo::Core
+  const :COMP_IDENTIFIER, '__sfc__'
+  
+  require compiler: '@vue/compiler-sfc'
+
+  class_function def compile(source, filename)
+    filename = File.basename(filename)
+    id = Digest::MD5.hexdigest(filename)[0..7]
+    compile_component(source, filename, id)
+  end
+  
+  function :compile_component, <<~'JS'
+    (source, filename, id) => {
+      let code = '';
+      nodo.debug(`Compiling component ${filename}`);
+      const { errors, descriptor } = compiler.parse(source, { filename, sourceMap: true });
+  
+      const [clientScript, bindings] = compile_script(descriptor, id);
+      if (clientScript) {
+        code += clientScript;
+      }
+      const clientTemplate = compile_template(descriptor, id, bindings);
+      if (clientTemplate) {
+        code += clientTemplate;
+      }
+      
+      return code;
+    }
+  JS
+
+  function :compile_script, <<~'JS'
+    (descriptor, id) => {
+      if (descriptor.script || descriptor.scriptSetup) {
+        try {
+          const compiledScript = compiler.compileScript(descriptor, {
+              id,
+              refSugar: true,
+              inlineTemplate: true,
+              templateOptions: { ssrCssVars: descriptor.cssVars }
+          });
+          let code = '';
+          if (compiledScript.bindings) {
+            code += `\n/* Analyzed bindings: ${JSON.stringify(compiledScript.bindings, null, 2)} */`;
+          }
+          code += `\n` + compiler.rewriteDefault(compiledScript.content, COMP_IDENTIFIER);
+          return [code, compiledScript.bindings];
+        } catch (e) {
+          e.fileName = descriptor.filename;
+          throw e;
+        }
+      } else {
+        return [`\nconst ${COMP_IDENTIFIER} = {}`, undefined];
+      }
+    }
+  JS
+
+  function :compile_template, <<~'JS'
+    (descriptor, id, bindingMetadata) => {
+      if (descriptor.template && !descriptor.scriptSetup) {
+        const templateResult = compiler.compileTemplate({
+          source: descriptor.template.content,
+          filename: descriptor.filename,
+          id: id,
+          scoped: descriptor.styles.some(s => s.scoped),
+          slotted: descriptor.slotted,
+          ssr: false,
+          ssrCssVars: descriptor.cssVars,
+          isProd: 'production' == process.env.NODE_ENV,
+          compilerOptions: { bindingMetadata }
+        });
+        if (templateResult.errors.length) {
+          const error = templateResult.errors[0];
+          error.fileName = descriptor.filename;
+          throw error;
+        }
+        let code = `${templateResult.code.replace(/\nexport (function|const) (render|ssrRender)/, '$1 render')}\n`;
+        code += `${COMP_IDENTIFIER}.__file = ${JSON.stringify(descriptor.filename)}\n`;
+        code += `${COMP_IDENTIFIER}.render = render\n`;
+        code += `export default ${COMP_IDENTIFIER}\n`;
+        
+        return code;
+      }
+    }
+  JS
+
+end

data/lib/jass/vue/sfc/processor.rb

@@ -0,0 +1,25 @@
+module Jass::Vue::SFC::Processor
+  VERSION = '1'
+
+  class << self
+    
+    def cache_key
+      @cache_key ||= "#{name}:#{VERSION}".freeze
+    end
+    
+    def call(input)
+      data = input[:data]
+
+      js, map = input[:cache].fetch([self.cache_key, data]) do
+        result = Jass::Vue::SFC::Compiler.compile(data, input[:filename])
+        [result, nil]
+      end
+
+      #map = SourceMapUtils.format_source_map(map, input)
+      #map = SourceMapUtils.combine_source_maps(input[:metadata][:map], map)
+
+      { data: js } #, map: map }
+    end
+  
+  end
+end

data/lib/jass/vue/sfc/version.rb

@@ -0,0 +1,7 @@
+module Jass
+  module Vue
+    module SFC
+      VERSION = '0.5.1'
+    end
+  end
+end

data/lib/jass/vue/sfc.rb

@@ -0,0 +1,16 @@
+require 'nodo'
+
+require_relative 'sfc/version'
+require_relative 'sfc/compiler'
+
+begin
+  require 'sprockets'
+rescue LoadError
+  # Sprockets not available
+end
+
+if defined?(Sprockets)
+  require_relative 'sfc/processor'
+  Sprockets.register_mime_type 'text/vue-sfc', extensions: %w[.vue], charset: :unicode
+  Sprockets.register_transformer 'text/vue-sfc', 'application/javascript', Jass::Vue::SFC::Processor
+end

data/lib/jass-vue-sfc.rb

@@ -0,0 +1 @@
+require_relative 'jass/vue/sfc'

metadata

@@ -0,0 +1,120 @@
+--- !ruby/object:Gem::Specification
+name: jass-vue-sfc
+version: !ruby/object:Gem::Version
+  version: 0.5.1
+platform: ruby
+authors:
+- Matthias Grosser
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-10-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: nodo
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.5.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.5.6
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: byebug
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- mtgrosser@gmx.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/jass-vue-sfc.rb
+- lib/jass/vue/sfc.rb
+- lib/jass/vue/sfc/compiler.rb
+- lib/jass/vue/sfc/processor.rb
+- lib/jass/vue/sfc/version.rb
+homepage: https://github.com/mtgrosser/jass-vue-sfc
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Compile Vue SFCs for Sprockets
+test_files: []