vueck 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: fb2e9df97919a0cf450ce3c03e19c9361a24d108
+  data.tar.gz: 5f3a25d9b685f76611f7e729d2ae280667a4fce1
+SHA512:
+  metadata.gz: 5afb7564a4720812a647c4704907da8eb3b9be1c59462b763d3072e7bf40cc0fd7b633db23a0204c3ccb28c6f78a5141b03aadbb2a9deac3c29514e44d934e88
+  data.tar.gz: 0b7d32e8dfcbd99128f259ba2d38eabd1dadd2c03e069b14304bcb2fac2d16306b273aa50603e53b6ac19d9c0a24c089788f2c25c8ed483810732e61df287872

data/.bundle/config

@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"

data/.gitignore

@@ -0,0 +1,3 @@
+vendor
+.sass-cache
+.vueck_cache

data/Gemfile

@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+
+gem "oga"
+gem "pry"
+gem "tilt"
+gem "slim"
+gem "sass"
+gem "cssminify"

data/Gemfile.lock

@@ -0,0 +1,45 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    ansi (1.5.0)
+    ast (2.4.0)
+    coderay (1.1.2)
+    cssminify (1.0.2)
+    ffi (1.9.18)
+    method_source (0.9.0)
+    oga (2.13)
+      ast
+      ruby-ll (~> 2.1)
+    pry (0.11.3)
+      coderay (~> 1.1.0)
+      method_source (~> 0.9.0)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    ruby-ll (2.1.2)
+      ansi
+      ast
+    sass (3.5.5)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    slim (3.0.9)
+      temple (>= 0.7.6, < 0.9)
+      tilt (>= 1.3.3, < 2.1)
+    temple (0.8.0)
+    tilt (2.0.8)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cssminify
+  oga
+  pry
+  sass
+  slim
+  tilt
+
+BUNDLED WITH
+   1.16.1

data/README.md

@@ -0,0 +1,46 @@
+# VueCK
+### VueJS component compiler middleware for Rack
+## Introduction
+VueCK makes it easy to integrate VueJS single file components into Rack applications. VueCK offers the following features:
+* Compiles all of your project's components into sinlge Javascript and CSS files
+* Minifies CSS and HTML
+* (Probably) supports any flavor of HTML, Javscript, or CSS that Tilt supports, including Slim, Sass, Less, ERB, etc
+* Caches compiled components for faster requests
+* No server-side Javascript infrastructure required!
+## Usage
+VueCK is easy to use.
+
+Install the gem:
+```bash
+$ gem install vueck
+```
+or include it in your Gemfile
+```ruby
+gem 'vueck'
+```
+and then install
+```
+$ bundler install
+```
+Add VueCK to your `config.ru`
+```ruby
+require 'vueck'
+use VueCK::Plugin
+```
+Create a directory in the root of your project called `vue` and place your SFC files (with a `.vue` extension) in that directory.
+Finally, add the `vue.js` and `vue.css` requests into your layout:
+```html
+script type="text/javascript" src="/vue.js"
+link rel="stylesheet" type='text/css' href="/vue.css"
+```
+That's it!
+## Rationale
+VueJS is amazing and Vue single file components (SFCs) increase productivity, make your code easier to mantain, and are generally awesome. However, using SFCs traditionally means bringing some server side Javascript into your environment. This can be both a hassle and a bit silly if you've already got a robust Ruby stack working for you. VueCK lets you take advantage of SFCs without any Javascript dependencies.
+## Format
+VueCK isn't 100% compatible with official VueJS SFCs. It's a from-the-ground-up reimplementation of the SFC compiler and thus has some differences. These are minor however and you can probably get any SFC you can find working in VueCK just by adding one or two attributes. Here's what you need to know:
+* VueCK SFCs are enclosed in a parent `<component/>` element
+* The `<component/>` element needs to have a `name` attribute. This is the name that will be used for the Javascript object for your component.
+* Styles in VueCK are not scoped. Vue's official compiler achieves the illusion of scoped styles by appending random charecters to class names.
+## Notes
+* VueCK should support any templating or preprocessing tools Tilt does; that said, I only care about Slim and Sass, so I can't be 100% sure. If anyone is interested in ensuring compatibility with others I would welcome the contribution!
+ 

data/lib/batchrenderer.rb

@@ -0,0 +1,26 @@
+module VueCK
+    class BatchRenderer
+        def initialize(opts={})
+            @path = opts[:path] || DIRS[:components]
+        end
+
+        def render
+            out = {components:"",style:""}
+            file_iterator do |file|
+                component = SFC.new file
+                out[:components] += component.render_component
+                out[:style]      += component.render_style
+            end
+            out
+        end
+
+        private
+
+        def file_iterator(&block)
+            Dir.glob("#{@path}*.vue") do |item|
+                next if item == '.' or item == '..'
+                yield item
+            end
+        end
+    end
+end

data/lib/element.rb

@@ -0,0 +1,32 @@
+module VueCK
+    class Element    
+        def initialize(doc, type)
+            @node = doc.css(ELEMENTS[type])
+            @type = type
+            verify
+        end
+
+        def verify
+            return unless REQUIRED[@type]
+            raise ComonentRenderError if @node.empty?
+        end
+
+        def lang
+            @node.attribute(ATTRIBUTES[:lang]).first.value || LANG_DEFALTS[type]
+        end
+
+        def empty?
+            @node.empty?
+        end
+
+        def text
+            @node.first.children.text
+        end
+
+        def render
+            return text if lang == LANG_DEFALTS[:script]
+            raise InvalidTemplateEngine unless Tilt[lang]
+            Tilt[lang].new { text }.render
+        end
+    end
+end

data/lib/filemanager.rb

@@ -0,0 +1,53 @@
+module VueCK
+    class FileManager
+        def initialize(filename)
+            @filename  = filename
+            @js_cache  = "#{DIRS[:cache]}#{FILES[:javascript]}"
+            @css_cache = "#{DIRS[:cache]}#{FILES[:style]}"
+        end
+
+        def serve
+            return render unless cachedir_exists?
+            return render unless cachefiles_exist?
+            return render unless cachefiles_fresh?
+            read_file
+        end
+
+        private
+
+        def render
+            renders = BatchRenderer.new.render
+            File.write(@js_cache,  renders[:components])
+            File.write(@css_cache, renders[:style])
+            read_file
+        end
+
+        def read_file
+            cache_file = @js_cache if @filename == FILES[:javascript]
+            cache_file = @css_cache if @filename == FILES[:style]
+            File.read(cache_file)
+        end
+
+        def cachedir_exists?
+            return true if File.exists? DIRS[:cache]
+            Dir.mkdir DIRS[:cache]
+            false
+        end
+
+        def cachefiles_exist?
+            return File.exists?(@js_cache) && File.exists?(@css_cache)
+        end
+
+        def cachefiles_fresh?
+            cache_mtime  = newest_file_in_dir(DIRS[:cache])
+            source_mtime = newest_file_in_dir(DIRS[:components])
+            return cache_mtime > source_mtime
+        end
+
+        def newest_file_in_dir(path)
+            Dir.glob(File.join(path, '*.*')).max { |a,b| File.mtime(a) <=> File.mtime(b) }
+        end
+
+    end
+end
+

data/lib/plugin.rb

@@ -0,0 +1,28 @@
+module VueCK
+    class Plugin
+        RESPONSE_TYPES = {
+            "vue.js"  => "application/javascript",
+            "vue.css" =>  "text/css"
+        }
+
+        def initialize(app={})
+            @app = app
+        end
+        
+        def call(env)
+            return unless env["REQUEST_METHOD"] == "GET"
+            file = env["PATH_INFO"][1..-1]
+            return unless file == FILES[:javascript] || file == FILES[:style]
+            vueck = VueCK.new(file)
+            content = vueck.serve_file
+            response(content, file)
+        end
+
+        def response(content, file)
+            ["200", {
+                "Content-Type"   => RESPONSE_TYPES[file],
+                "Content-Length" => content.size.to_s },
+                [content]]
+        end
+    end
+end

data/lib/sfc.rb

@@ -0,0 +1,40 @@
+module VueCK
+    class SFC
+        attr_accessor :xml, :script, :style, :template, :name
+
+        def initialize(component_file)
+            @path = component_file
+            @xml  = component_xml
+            @name = @xml.attribute(ATTRIBUTES[:name]).value
+        end
+
+        def render_component
+            reduce_whitespace "var #{@name} = Vue.component('#{@name}',{template:'#{render(:template)}', #{render(:script)}});"
+        end
+
+        def render_style
+            style = Element.new(@xml, :style)
+            return "" if style.empty?
+            CSSminify.compress reduce_whitespace(style.render)
+        end
+
+        private
+
+        def reduce_whitespace(text)
+            text.gsub(/\s+/, " ")
+        end
+
+        def load
+            Oga.parse_xml File.open @path
+        end
+
+        def component_xml
+            load.css(ELEMENTS[:component]).first
+        end
+
+        def render(type)
+            Element.new(@xml, type).render
+        end
+
+    end
+end

data/lib/vueck.rb

@@ -0,0 +1,54 @@
+require 'batchrenderer'
+require 'element'
+require 'filemanager'
+require 'sfc'
+require 'tilt'
+require 'oga'
+require 'cssminify'
+require 'plugin'
+
+module VueCK
+    FILES = {
+        javascript: "vue.js",
+        style: "vue.css"
+    }
+    DIRS = {
+        cache: ".vueck_cache/",
+        components: "vue/" 
+    }
+    ELEMENTS = {
+        component: "component",
+        template:  "template",
+        script:    "script",
+        style:     "style"
+    }
+    ATTRIBUTES = {
+        name: "name",
+        lang: "lang"
+    }
+    LANG_DEFALTS = {
+        script: "javascript",
+        style: "css",
+        template: "html"
+    }
+    REQUIRED = {
+        script: true,
+        style: false,
+        template: true
+    }
+
+    class InvalidTemplateEngine < StandardError
+    end
+    class ComonentRenderError < StandardError
+    end
+
+    class VueCK
+        def initialize(filename)
+            @filename = filename
+            return unless FILES[:javascript] || FILES[:style]
+        end
+        def serve_file
+            FileManager.new(@filename).serve
+        end
+    end
+end

data/test/test.rb

@@ -0,0 +1,20 @@
+require 'minitest/autorun'
+require 'vueck'
+
+class VueCKTest < Minitest::Test
+    CSS = ["200", {"Content-Type"=>"text/css", "Content-Length"=>"48"}, [".post{color:red}.post{color:green}h1{color:pink}"]]
+    JS =  ["200",{"Content-Type"=>"application/javascript", "Content-Length"=>"735"},["var test_component = Vue.component('test_component',{template:'<div class=\"post\"><h1>Adam</h1></div>', props: [\"test\"], data: { adam: true }, methods: { yo: function() { } } });var test_component = Vue.component('test_component',{template:'<div class=\"post\"><h1>Other Guy</h1><h1>Oh hai mark</h1></div>', props: [\"test\"], data: { adam: true, drew: true }, methods: { yo: function() { } } });var test_component = Vue.component('test_component',{template:'<Oh>, Hai Mark!</Oh>', props: [\"test\"], data: { adam: true, drew: true }, methods: { yo: function() { } } });var test_component = Vue.component('test_component',{template:'<Oh>, Hai Mark!</Oh>', props: [\"test\"], data: { adam: true, drew: true }, methods: { yo: function() { } } });"]]
+
+    def test_render_css
+        plugin = VueCK::Plugin.new()
+        response = plugin.call({"PATH_INFO"=>"/vue.css", "REQUEST_METHOD"=>"GET"})
+        require pry ; binding.pry
+        assert response == CSS
+    end
+
+    def test_render_js
+        plugin = VueCK::Plugin.new()
+        response = plugin.call({"PATH_INFO"=>"/vue.js", "REQUEST_METHOD"=>"GET"})
+        assert response == JS
+    end
+end

data/test/vue/test.vue

@@ -0,0 +1,23 @@
+<component name="test_component">
+<template lang="slim"> 
+.post
+    h1 Adam
+</template>
+
+<script lang="javascript">
+props: ["test"],
+data: {
+    adam: true
+},
+methods: {
+    yo: function() {
+
+    }
+}
+</script>
+
+<style lang="sass">
+.post
+    color: red
+</style>
+</component>

data/test/vue/test2.vue

@@ -0,0 +1,27 @@
+<component name="test_component">
+<template lang="slim"> 
+.post
+    h1 Other Guy
+    h1 Oh hai mark
+</template>
+
+<script lang="javascript">
+props: ["test"],
+data: {
+    adam: true,
+    drew: true
+},
+methods: {
+    yo: function() {
+
+    }
+}
+</script>
+
+<style lang="sass">
+.post
+    color: green
+h1
+    color: pink
+</style>
+</component>

data/test/vue/test3.vue

@@ -0,0 +1,21 @@
+<component name="test_component">
+<template lang="slim"> 
+<div>
+    <h1>Oh, Hai Mark!</h1>
+</div>
+</template>
+
+<script lang="javascript">
+props: ["test"],
+data: {
+    adam: true,
+    drew: true
+},
+methods: {
+    yo: function() {
+
+    }
+}
+</script>
+
+</component>

data/test/vue/test4.vue

@@ -0,0 +1,21 @@
+<component name="test_component">
+<template lang="slim"> 
+<div>
+    <h1>Oh, Hai Mark!</h1>
+</div>
+</template>
+
+<script lang="javascript">
+props: ["test"],
+data: {
+    adam: true,
+    drew: true
+},
+methods: {
+    yo: function() {
+
+    }
+}
+</script>
+
+</component>

data/vueck.gemspec

@@ -0,0 +1,19 @@
+Gem::Specification.new do |s|
+    s.name        = 'vueck'
+    s.homepage    = 'https://github.com/adamrdrew/vueck'
+    s.version     = '1.0.0'
+    s.date        = '2018-01-30'
+    s.summary     = "VueCK"
+    s.description = "Rack middleware for compiling and serving VueJS single file components"
+    s.authors     = ["Adam Drew"]
+    s.email       = 'adamrdrew@live.com'
+    s.files       = %x{git ls-files}.split("\n")
+    s.licenses    = ['LGPL3']
+  
+    s.add_runtime_dependency "oga", "~> 2.9", ">= 2.9.0"
+    s.add_runtime_dependency "tilt", "~> 2.0", ">= 2.0.0"
+    s.add_runtime_dependency "cssminify", '~> 1.0', '>= 1.0.2'
+    s.add_runtime_dependency "slim", '~> 3.0', '>= 3.0.0'
+    s.add_runtime_dependency "sass", '~> 3.5', '>= 3.5.5'
+  end
+  

metadata

@@ -0,0 +1,160 @@
+--- !ruby/object:Gem::Specification
+name: vueck
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Adam Drew
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2018-01-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: oga
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.9'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.9.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.9'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.9.0
+- !ruby/object:Gem::Dependency
+  name: tilt
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+- !ruby/object:Gem::Dependency
+  name: cssminify
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.2
+- !ruby/object:Gem::Dependency
+  name: slim
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.5.5
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.5.5
+description: Rack middleware for compiling and serving VueJS single file components
+email: adamrdrew@live.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".bundle/config"
+- ".gitignore"
+- Gemfile
+- Gemfile.lock
+- README.md
+- lib/batchrenderer.rb
+- lib/element.rb
+- lib/filemanager.rb
+- lib/plugin.rb
+- lib/sfc.rb
+- lib/vueck.rb
+- test/test.rb
+- test/vue/test.vue
+- test/vue/test2.vue
+- test/vue/test3.vue
+- test/vue/test4.vue
+- vueck.gemspec
+homepage: https://github.com/adamrdrew/vueck
+licenses:
+- LGPL3
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: VueCK
+test_files: []