vue-helpers 0.1.0

data/lib/vue/helpers/utilities.rb

@@ -0,0 +1,79 @@
+require 'erb'
+
+module Vue
+  module Helpers
+  
+    module CoreRefinements
+      refine String do
+        def interpolate(**locals)
+          gsub(/\#\{/, '%{') % locals
+        end
+        
+        def camelize
+          #split(/[_-]/).collect(&:capitalize).join
+          split(/\W|_/).collect(&:capitalize).join
+        end
+        
+        def kebabize
+          split(/\W|_/).collect(&:downcase).join('-')
+        end
+        
+        def escape_backticks
+          gsub(/\`/,'\\\`')
+        end
+      end
+      
+      refine Hash do
+        def to_html_attributes
+          inject(''){|o, kv| o.to_s << %Q(#{kv[0]}="#{kv[1]}")}
+        end
+      end
+      
+      refine Dir.singleton_class do
+        # Args are like Dir.glob() with **opts accaptable.
+        #
+        # Returns list of files breadth-first.
+        # Pass :no_recurse=>true to block directory recursion.
+        # Pass a block to yield each found path to the block.
+        #
+        def breadth_first(pattern, flags=0, base: Dir.getwd, **opts, &block)
+          files, dirs = [], []
+          Dir.glob(File.join(base, pattern), flags).each{|path| FileTest.directory?(path) ? dirs.push(path) : files.push(path)}
+          
+          files.each{|f| yield(f)} if block_given?
+          dirs.each{|dir| files.concat(breadth_first(pattern, flags, base:dir, &block))} unless opts[:no_recurse]
+      
+          files
+        end
+      end
+    end # CoreRefinements
+    
+    module ErbPrepend
+      def initialize(*args)
+        #puts "ERB.new: #{args.to_yaml}"
+        #puts "ERB.new with eoutvar: #{args[3]}"
+        args[3] ||= Vue::Helpers.default_outvar
+        super
+      end
+      
+      def set_eoutvar(*args)
+        #puts "ERB.set_eoutvar: #{args[1]}"
+        Thread.current.instance_variable_set(:@current_eoutvar, args[1])
+        super
+      end
+    end
+    ::ERB.send(:prepend, ErbPrepend)
+    
+    module ControllerPrepend
+      # Assign value to undefined @outvar
+      # TODO: This might not be needed any more, after implementation of ERB.set_eoutvar hack.
+      # def initialize(*args)
+      #   super
+      #   unless defined?(@outvar)
+      #     @outvar ||= Vue::Helpers.default_outvar
+      #   end
+      # end
+    end
+    
+  end # Helpers
+end # Vue

data/lib/vue/helpers/version.rb

@@ -0,0 +1,5 @@
+module Vue
+  module Helpers
+    VERSION = "0.1.0"
+  end
+end

data/lib/vue/helpers/vue_component.rb

@@ -0,0 +1,83 @@
+require_relative 'utilities'
+require_relative 'helper_refinements'
+require_relative 'vue_object'
+
+module Vue
+  module Helpers
+    using CoreRefinements
+    using HelperRefinements
+
+    class VueComponent < VueObject
+      def type; 'component'; end
+      
+      #puts "VueComponent defining @defaults"
+      @defaults = {
+        root_name:         nil,  #Vue::Helpers.root_name,
+        register_local:    nil,
+        template_literal:  nil
+      }
+      
+      attr_writer *defaults.keys
+      custom_attr_reader *defaults.keys
+      
+      # Gets root object
+      def root
+        repo.root(root_name)
+      end
+      
+      # Renders the html block to replace ruby vue_component tags.
+      # TODO: Are locals used here? Do they work?
+      def render(tag_name=nil, locals:{}, attributes:{}, &block)
+        # Adds 'is' attribute to html vue-component element,
+        # if the user specifies an alternate 'tag_name' (default tag_name is name-of-component).
+        if tag_name
+          attributes['is'] = name
+        end
+        
+        block_content = context.capture_html(root_name:root_name, locals:locals, &block) if block_given?
+        
+        # TODO: Are locals being passed properly here?
+        wrapper(:component_call_html,
+          name:name,
+          tag_name:tag_name,
+          el_name:(tag_name || name).to_s.kebabize,
+          block_content:block_content.to_s,
+          attributes_string:attributes.to_html_attributes,
+          **locals
+        )
+      end
+  
+      # Builds js output string.
+      # TODO: Follow this backwards/upstream to determine if parsed_template, parsed_script, and locals are being handled correctly.
+      #def to_component_js(register_local:Vue::Helpers.register_local, template_literal:Vue::Helpers.template_literal, locals:{})  #, **options)
+      def to_component_js(locals:{})
+          # The above **options are not used yet, but need somewhere to catch extra stuff.
+          template_spec = template_literal ? "\`#{parsed_template(locals).to_s.escape_backticks}\`" : "'##{name}-template'"
+          js_output = register_local \
+            ? 'var #{name} = {template: #{template_spec}, \2;'
+            : 'var #{name} = Vue.component("#{name}", {template: #{template_spec}, \2);'  # ) << ")"
+          
+          # TODO: Make escaping backticks optional, as they could break user templates with nested backtick blocks, like ${``}.
+          _parsed_script = parsed_script(locals)
+          _parsed_script.gsub( 
+            /export\s+default\s*(\{|Vue.component\s*\([^\{]*\{)(.*$)/m,
+            js_output
+          ).interpolate(name: name.to_s.camelize, template_spec: template_spec) if _parsed_script
+      end
+      
+      # TODO: Follow this backwards/upstream to determine if parsed_template, parsed_script, and locals are being handled correctly.
+      def get_x_template(**locals)
+        wrapper(:x_template_html, name:name, template:parsed_template(locals), **locals)
+      end
+      
+      # def template_literal?
+      #   case
+      #     when !template_literal.nil?; template_literal
+      #     when !root.template_literal.nil?; root.template_literal
+      #     when !Vue::Helpers.template_literal.nil?; Vue::Helpers.template_literal
+      #   end
+      # end
+      
+    end # VueComponent
+  end # Helpers
+end # Vue

data/lib/vue/helpers/vue_object.rb

@@ -0,0 +1,201 @@
+require_relative 'utilities'
+require_relative 'helper_refinements'
+
+module Vue
+  module Helpers
+    using CoreRefinements
+    using HelperRefinements
+  
+
+    # NOTE: Vue components can be called MULTIPLE times,
+    # so we can't store the calling args OR the block here.
+    #
+    # But note that Vue root-apps can only be called once,
+    # so should we continue to store the vue-root calling args & block here,
+    # or pass them in at run-time as well? I think it ALL has to be dynamic.
+    #
+    class VueObject
+      
+      @defaults = {
+        # Only what's necessary to load dot-vue file.
+        name:             nil,
+        root_name:        nil,
+        file_name:        nil,
+        template_engine:  nil,
+        #locals:          {},
+        
+        # The loaded (but not rendered or parsed) dot-vue file as Tilt teplate.
+        # See 'initialize_options()' below
+        tilt_template:    nil,
+        
+        # Vue-specific options to be inserted in js object.
+        # Remember that component data must be a function in the js object.
+        data:             {}, 
+        watch:            {},
+        computed:         {},
+        
+        # Utility
+        repo:             nil
+      }
+      
+      # Concatenates subclass defaults with master class defaults.
+      def self.defaults
+        super_defaults = superclass.singleton_class.method_defined?(__method__) ? superclass.defaults : (@defaults || {})
+        super_defaults.merge(@defaults || {})
+      end
+      
+      # Creates custom attr readers that tie in to defaults.
+      def self.custom_attr_reader(*args)
+        args.each do |a|
+          define_method(a) do |use_default=true|
+            get_attribute(a, use_default)
+          end
+        end
+      end
+      
+      #attr_accessor :repo, *defaults.keys
+      attr_reader   :initialized
+      
+      
+      ### Internal methods
+      
+      def defaults
+        self.class.defaults
+      end
+      
+      # For debugging.
+      def print_ivars
+        puts "\nIVARS:"
+        instance_variables.each do |v|
+          unless v.to_s[/repo/i]
+            puts "#{v}: #{instance_variable_get(v)}"
+          end
+        end
+      end
+      
+      def initialize(name, **options)
+        @name = name
+        #puts "VueObject created: #{name}, self: #{self}"
+        initialize_options(**options)
+      end
+      
+      def initialize_options(**options)
+        @repo ||= options.delete(:repo)
+        #locals = options.delete(:locals) || {}
+        #puts "\n#{self.class.name}.initialize_options '#{name}' #{options.inspect}"
+        return self unless options.size > 0 && !@initialized
+        locals = options.delete(:locals) || {}
+        #puts "\n#{self.class.name}.initialize_options '#{name}', #{options.inspect}, locals:#{locals.inspect}"
+
+        merged_options = defaults.dup.merge(options)
+        
+        # Sets each default ivar, unless ivar is already non-nil.
+        merged_options.each do |k,v|
+          #puts "Setting ivar '#{k}' with '#{v}', was previously '#{instance_variable_get('@' + k.to_s)}'"
+          #instance_variable_set("@#{k}", v) if v && instance_variable_get("@#{k}").nil?  #!(v.respond_to?(:empty) && v.empty?)
+          instance_variable_set("@#{k}", v) if instance_variable_get("@#{k}").nil?
+        end
+        
+        @file_name ||= @name
+        
+        #load_dot_vue if file_name
+        load_tilt_template if file_name   #&& !tilt_template
+        
+        # We need this to discover subcomponents, otherwise
+        # vue_app won't know about them until it's too late.
+        render_template(**locals)
+        
+        #puts "\n#{self.class.name} initialized."
+        #print_ivars
+        
+        @initialized = true
+        #puts "VueObject initialized options: #{name}, self: #{self}"
+        self
+      end
+      
+      # Loads a dot-vue into a tilt template, but doesn't render or parse it.
+      def load_tilt_template
+        self.tilt_template = context.load_template(file_name.to_sym, template_engine:template_engine(false))
+      end
+      
+      # Renders loaded tilt_template.
+      # TODO: Find a way to easily insert attributes like 'name', 'root_name', etc. into locals.
+      #   Or just insert the current vue object instance into the locals
+      def render_template(**locals)
+        @rendered_template ||= (
+          #puts "\n#{self.class.name} '#{name}' calling render_template with tilt_template: #{tilt_template&.file}, engine: #{template_engine}, locals: #{locals}"
+          context.render_ruby_template(tilt_template, template_engine:template_engine(false), locals:locals.merge(vo:self, vue_object:self)) if !tilt_template.to_s.empty?
+        )
+      end
+      
+      # Parses a rendered sfc file.
+      # Returns [nil, template-as-html, nil, script-as-js].
+      # Must be HTML (already rendered from ruby template).
+      def parse_sfc(**locals)
+        @parsed_sfc ||= (
+          #rendered_template = render_template(**locals)
+          rslt = {}
+          rslt[:template], rslt[:script] = render_template(**locals).to_s.match(/(.*<template>(.*)<\/template>)*.*(<script>(.*)<\/script>)/m).to_a.values_at(2,4)
+          rslt
+        )
+      end
+      
+      def parsed_template(**locals)
+        @parsed_template ||= (
+          parse_sfc(**locals)[:template]
+        )
+      end
+      
+      def parsed_script(**locals)
+        @parsed_script ||= (
+          parse_sfc(**locals)[:script]
+        )
+      end
+      
+      def context
+        repo.context
+      end
+
+
+      ### Called from user-space by  vue_app, vue_root, vue_component.
+
+      # Gets a defined wrapper, and interpolates it with the given locals & options.
+      def wrapper(wrapper_name, **locals)   #, **wrapper_options)
+        #Vue::Helpers.send(wrapper_name).interpolate(**wrapper_options.merge(locals))
+        Vue::Helpers.send(wrapper_name).interpolate(locals)
+      end
+      
+      def js_var_name
+        name.to_s.camelize
+      end
+      
+      # def is_set?(setting)
+      #   case
+      #     when !send(setting).nil?; send(setting)
+      #     when !root.send(setting).nil?; root.send(setting)
+      #     when !Vue::Helpers.send(setting).nil?; Vue::Helpers.send(setting)
+      #   end
+      # end
+      
+      # Get attribute, considering upstream possibilities.
+      def get_attribute(attribute, use_default=true)
+        case
+          when
+            ( val = instance_variable_get("@#{attribute}"); !val.nil? );
+            val
+          when
+            type != 'root' &&
+            root.respond_to?(attribute) &&
+            ( val = root.send(attribute, use_default); !val.nil? );
+            val
+          when
+            use_default &&
+            Vue::Helpers.respond_to?(attribute) &&
+            ( val = Vue::Helpers.send(attribute); !val.nil? );
+            val
+        end
+      end
+    
+    end # VueObject
+  end # Helpers
+end # Vue

data/lib/vue/helpers/vue_repository.rb

@@ -0,0 +1,49 @@
+require_relative 'utilities'
+require_relative 'helper_refinements'
+require_relative 'vue_component'
+require_relative 'vue_root'
+
+module Vue
+
+  #Debug = []
+
+  module Helpers
+    using CoreRefinements
+    using HelperRefinements
+  
+    # Stores ruby representations of vue objects.
+    # Intended for a single request cycle.
+    # TODO: Rename this to VueStash.
+    # NOTE: Always use the repository interface for vue-object crud operations from controller or views.
+    class VueRepository < Hash
+      attr_reader :context
+      
+      # Always pass a context when creating a VueRepository.
+      def initialize(context)
+        #Debug << self
+        @context = context
+      end
+    
+      # Master get_or_create for any object in the repository.
+      def get_or_create(klas, name, **options)
+        obj = fetch(name){ |n| self[name] = klas.new(name, **options.merge({repo:self})) }
+        obj.repo ||= self
+        obj.initialize_options(**options)
+        obj
+      end
+      
+      # Gets or creates a VueRoot instance.
+      def root(name=nil, **options)
+        name ||= Vue::Helpers.root_name
+        get_or_create(VueRoot, name, **options)
+      end
+      #alias_method :[], :root
+      
+      # Gets or creates a VueComponent instance.
+      def component(name, **options)
+        get_or_create(VueComponent, name, **options)
+      end
+    end
+    
+  end # Helpers
+end # Vue

data/lib/vue/helpers/vue_root.rb

@@ -0,0 +1,148 @@
+require 'securerandom'
+require_relative 'utilities'
+require_relative 'helper_refinements'
+require_relative 'vue_object'
+
+module Vue
+  module Helpers
+    using CoreRefinements
+    using HelperRefinements
+    
+    class VueRoot < VueObject
+      def type; 'root'; end
+      
+      @defaults = {
+        #app_name:           nil,
+        name:                Vue::Helpers.root_name,
+        external_resource:   nil,  #Vue::Helpers.external_resource,
+        template_literal:    nil,  #Vue::Helpers.template_literal,
+        register_local:      nil,  #Vue::Helpers.register_local,
+        minify:              nil,  #Vue::Helpers.minify,
+        #locals:             {},
+      }
+      
+      attr_writer *defaults.keys
+      custom_attr_reader *defaults.keys
+      
+      ###  Under Construction
+      # Renders the html block to replace ruby vue_root tags.
+      #def render(tag_name=nil, locals:{}, attributes:{}, &block) # From vue_component
+      #def render(locals:{}, **options, &block)
+      def render(locals:{}, &block)
+        #puts "\nVueRoot#render with locals: #{locals}, self: #{self}"
+        #print_ivars
+        
+        block_content = context.capture_html(root_name:name, locals:locals, &block) if block_given?
+        
+        compiled_js = compile_app_js(locals:locals)   #, **options)
+
+        root_script_output = case external_resource
+          # TODO: Handle external_resource:<some-string> if necessary.
+          when true;
+            key = SecureRandom.urlsafe_base64(32)
+            Vue::Helpers.cache_store[key] = compiled_js
+            callback_prefix = Vue::Helpers.callback_prefix
+            wrapper(:external_resource_html, callback_prefix:callback_prefix, key:key, **locals)
+          else
+            wrapper(:inline_script_html, compiled:compiled_js, **locals)
+        end
+
+        root_script_output.prepend(components_x_template(locals).to_s) unless template_literal
+        
+        # TODO: Are locals being passed properly here?
+        if block_given?
+          wrapper(:root_app_html,
+            root_name:           name,
+            block_content:       block_content,
+            root_script_output:  root_script_output,
+            **locals
+          )
+        else
+          root_script_output
+        end
+      end
+      
+      def app_name
+        @app_name || js_var_name
+      end
+            
+      # Gets or creates a related component.
+      def component(_name, **component_options)
+        repo.component(_name, **component_options.merge({root_name:(root_name || name)}))
+      end
+      
+      # Selects all related components.
+      def components
+        repo.select{|k,v| v.type == 'component' && v.root_name == name}.values.compact.uniq{|v| v.name.to_s}
+      end
+      
+      def component_names
+        components.map{|c| c.js_var_name}.join(', ')
+      end
+      
+      # Returns JS string of all component object definitions.
+      def components_js(**component_options)
+        #puts "\nVueRoot#componenets_js called with components: #{components.map(&:name)}"
+        components.map{|c| c.to_component_js(**component_options)}.join("\n")
+      end
+      
+      # Returns HTML string of component vue templates in x-template format.
+      def components_x_template(**locals)
+        components.map{|c| c.get_x_template(locals) unless c.template_literal}.compact.join("\n")
+      end      
+      
+      # Compiles js output (components & root) for entire vue app for this root object.
+      # If template_literal is false, only the js object definitions are included.
+      # In that case, the vue template html is left to be rendered in x-template blocks.
+      # TODO: Clean up args, especially locals handling.
+      def compile_app_js(locals:{})  #, **options)
+        ### Above is generic opts placeholder until we get the args/opts flow worked out.
+        ### It used to bee this:
+        # root_name = Vue::Helpers.root_name,
+        # file_name:root_name,
+        # app_name:root_name.camelize, # Maybe obsolete, see js_var_name
+        # #template_engine:context.current_template_engine,
+        # register_local: Vue::Helpers.register_local,
+        # minify: Vue::Helpers.minify,
+        # # Block may not be needed here, it's handled in 'vue_root'.
+        # &block
+        
+        # TODO: Make these locals accessible from anywhere within the root instance,
+        #   as we also need them for the 'render' method.
+        #   Should this just be moved to 'render' method?
+        locals = {
+          root_name:        name.to_s.kebabize,
+          #app_name:         (options[:app_name] || js_var_name),
+          app_name:         js_var_name,
+          file_name:        file_name,
+          template_engine:  template_engine(false),
+          components:       component_names,
+          vue_data_json:    data.to_json
+        }.merge!(locals)
+        
+        # {block_content:rendered_block, vue_sfc:{name:name, vue_template:template, vue_script:script}}
+        #rendered_root_sfc_js = \
+        #app_js << (
+        #output = components_js(locals:{}, **options) << "\n" << (
+        output = components_js(locals:{}) << "\n" << (
+          parsed_script(locals) ||
+          wrapper(:root_object_js, **locals)  #, **options)
+        )
+        
+        #app_js << rendered_root_sfc_js
+        
+        output = if minify
+          #extra_spaces_removed = app_js.gsub(/(^\s+)|(\s+)|(\s+$)/){|m| {$1 => "\\\n", $2 => ' ', $3 => "\\\n"}[m]}
+          Uglifier.compile(output, harmony:true).gsub(/\s{2,}/, ' ')
+        else
+          output
+        end
+        
+        # Should we have an append_output option that takes a string of js?
+        #output << "; App = VueApp;"
+        
+      end  # compile_app_js
+      
+    end  # VueRoot
+  end # Helpers
+end # Vue