fie 0.1.9

data/lib/fie/state/track.rb

@@ -0,0 +1,167 @@
+module Fie
+  module Track
+    def track_changes_in_objects(object)
+      if object.is_a?(Array)
+        track_changes_in_array(object)
+      elsif object.is_a?(Hash)
+        track_changes_in_hash(object)
+      elsif !object.duplicable? || object.is_a?(String) || object.is_a?(Time)
+        nil
+      else
+        track_changes_in_object(object)
+      end
+    end
+
+    def untrack_changes_in_objects(object)
+      if object.is_a? Hash
+        untrack_changes_in_hash(object)
+      elsif object.is_a? Array
+        untrack_changes_in_array(object)
+      elsif !object.duplicable? || object.is_a?(String) || object.is_a?(Time)
+        nil
+      else
+        untrack_changes_in_object(object)
+      end
+    end
+    
+    private
+      def track_changes_in_array(object)
+        state = self
+
+        unless object.frozen?
+          object.class_eval do
+            alias_method('previous_[]=', '[]=')
+            alias_method('previous_<<', '<<')
+            alias_method('previous_push', 'push')
+            
+            define_method('[]=') do |key, value|
+              send('previous_[]=', key, value)
+              state.permeate
+            end
+
+            define_method('<<') do |value|
+              send('previous_<<', value)
+              state.permeate
+            end
+
+
+            define_method('push') do |value|
+              send('previous_push', value)
+              state.permeate
+            end
+          end
+        end
+
+        object.each do |value|
+          track_changes_in_objects(value)
+        end
+      end
+
+      def track_changes_in_hash(object)
+        state = self
+
+        unless object.frozen?
+          object.class_eval do
+            alias_method('previous_[]=', '[]=')
+            define_method('[]=') do |key, value|
+              send('previous_[]=', key, value)
+              state.permeate
+            end
+          end
+        end
+
+        object.each do |value|
+          track_changes_in_objects(value)
+        end
+      end
+
+      def track_changes_in_object(object)
+        state = self
+
+        object.methods.each do |attribute_name, attribute_value|
+          is_setter = attribute_name.to_s.ends_with?('=') && attribute_name.to_s.match(/[A-Za-z]/)
+
+          if is_setter
+            unless object.frozen?
+              object.class_eval do
+                alias_method("previous_#{attribute_name}", attribute_name)
+                define_method(attribute_name) do |setter_value|
+                  send("previous_#{attribute_name}", setter_value)
+                  state.permeate
+                end
+              end
+            end
+
+            getter_name = attribute_name.to_s.chomp('=').to_sym
+            object_has_getter = object.methods.include?(getter_name)
+            if object_has_getter
+              track_changes_in_objects object.send(getter_name)
+            end
+          end
+        end
+      end
+
+      def untrack_changes_in_hash(hash)
+        unless hash.frozen?
+          hash.class_eval do
+            begin
+              remove_method :'previous_[]='
+              remove_method :'[]='
+            rescue
+            end
+          end
+        end
+
+        hash.each do |key, value|
+          untrack_changes_in_objects(value)
+        end
+      end
+
+      def untrack_changes_in_array(array)
+        unless array.frozen?
+          array.class_eval do
+            begin
+              remove_method :'previous_[]='
+              remove_method :'previous_<<'
+              remove_method :previous_push
+              remove_method :'[]='
+              remove_method :'<<'
+              remove_method :push
+            rescue
+            end
+          end
+        end
+
+        array.each do |value|
+          untrack_changes_in_objects(value)
+        end
+      end
+
+      def untrack_changes_in_object(object)
+        object.methods.each do |attribute_name, attribute_value|
+          is_setter = 
+            attribute_name.to_s.ends_with?('=') &&
+            attribute_name.to_s.match(/[A-Za-z]/) &&
+            !attribute_name.to_s.start_with?('previous_')
+
+          if is_setter
+            unless object.frozen?
+              object.class_eval do
+                begin
+                  remove_method :"previous_#{attribute_name}"
+                  remove_method :"#{attribute_name}"
+                rescue
+                end
+              end
+            end
+
+            getter_name = attribute_name.to_s.chomp('=').to_sym
+            object_has_getter = object.methods.include?(getter_name)
+            if object_has_getter
+              untrack_changes_in_objects object.send(getter_name)
+            end
+          end
+        end
+      end
+  end
+end

data/lib/fie/version.rb

@@ -0,0 +1,3 @@
+module Fie
+  VERSION = "0.1.9"
+end

data/lib/layouts/fie.html.erb

@@ -0,0 +1,12 @@
+<span fie-body='true'>
+  <%= yield %>
+
+  <% assigns.symbolize_keys.map do |assigns_name, assigns_value| %>
+    <% unless assigns_value.blank? || assigns_name == :marked_for_same_origin_verification %>
+      <% encryptor = ActiveSupport::MessageEncryptor.new Rails.application.credentials[:secret_key_base] %>
+      <span fie-variable='<%= assigns_name %>' fie-value='<%= encryptor.encrypt_and_sign Marshal.dump(assigns_value) %>'></span>
+    <% end %>
+  <% end %>
+
+  <span fie-controller='<%= params[:controller] || @fie_controller_name %>' fie-action='<%= params[:action] || @fie_action_name %>'></span>
+</span>

data/lib/opal/fie.rb

@@ -0,0 +1,21 @@
+require 'opal'
+
+module Fie
+    require_tree './fie'
+
+    include Fie::Native
+
+    Native(`window.Fie = {}`)
+    Native \
+      `window.Fie.addEventListener =
+          #{
+            -> (event_name, selector, block) do
+              Element.fie_body.add_event_listener(event_name, selector, &block)
+            end
+          }`
+
+    Element.document.add_event_listener('DOMContentLoaded') do
+      cable = Cable.new
+      Listeners.new(cable)
+    end
+end

data/lib/opal/fie/cable.rb

@@ -0,0 +1,63 @@
+require 'securerandom'
+require 'fie/native'
+require 'json'
+
+module Fie
+  class Cable
+    include Fie::Native
+
+    def initialize
+      connection_uuid = SecureRandom.uuid
+      commander_name = "#{ camelize(controller_name) }Commander"
+
+      @commander = Commander.new(channel_name: commander_name, identifier: connection_uuid, cable: self)
+      @pools = {}
+    end
+
+    def call_remote_function(element:, event_name:, function_name:, parameters:)
+      log_event(element: element, event_name: event_name, function_name: function_name, parameters: parameters)
+
+      function_parameters = {
+        caller: {
+          id: element.id,
+          class: element.class_name,
+          value: element.value
+        },
+        controller_name: controller_name,
+        action_name: action_name
+      }.merge(parameters)
+
+      @commander.perform(function_name, function_parameters)
+    end
+
+    def subscribe_to_pool(subject)
+      @pools['subject'] = Pool.new(channel_name: 'Fie::Pools', identifier: subject, cable: self)
+    end
+
+    def commander
+      @commander
+    end
+
+    private
+      def log_event(element:, event_name:, function_name:, parameters:)
+        parameters = parameters.to_json
+        puts "Event #{ event_name } triggered by element #{ element.descriptor } is calling function #{ function_name } with parameters #{ parameters }"
+      end
+
+      def action_name
+        view_name_element['fie-action']
+      end
+
+      def controller_name
+        view_name_element['fie-controller']
+      end
+
+      def view_name_element
+        Element.body.query_selector('[fie-controller]:not([fie-controller=""])');
+      end
+
+      def camelize(string)
+        string.split('_').collect(&:capitalize).join
+      end
+  end
+end

data/lib/opal/fie/commander.rb

@@ -0,0 +1,43 @@
+require 'fie/native'
+require 'diffhtml'
+
+module Fie
+  class Commander < Fie::Native::ActionCableChannel
+    include Fie::Native
+
+    def connected
+      super
+
+      @cable.call_remote_function \
+        element: Element.body,
+        function_name: 'initialize_state',
+        event_name: 'Upload State',
+        parameters: { view_variables: Util.view_variables }
+    end
+
+    def received(data)
+      process_command(data['command'], data['parameters'])
+    end
+
+    def process_command(command, parameters = {})
+      case command
+      when 'refresh_view'
+        $$.diff.innerHTML(Element.fie_body.unwrapped_element, parameters['html'])
+        @event.dispatch
+      when 'subscribe_to_pools'
+        parameters['subjects'].each do |subject|
+          @cable.subscribe_to_pool(subject)
+        end
+      when 'publish_to_pools'
+        subject = parameters['subject']
+        object = parameters['object']
+
+        perform("pool_#{ subject }_callback", { object: object })
+      when 'execute_function'
+        Util.exec_js(parameters['name'], parameters['arguments'])
+      else
+        console.log("Command: #{ command }, Parameters: #{ parameters }")
+      end
+    end
+  end
+end

data/lib/opal/fie/listeners.rb

@@ -0,0 +1,109 @@
+require 'fie/native'
+
+module Fie
+  class Listeners
+    include Fie::Native
+
+    def initialize(cable)
+      @cable = cable
+
+      initialize_input_elements
+      initialize_fie_events [:click, :submit, :scroll, :keyup, :keydown, :enter]
+    end
+
+    private
+      def initialize_fie_events(event_names)
+        event_names.each do |fie_event_name|
+          event_name = fie_event_name
+          event_name = :keydown if event_name == :enter
+
+          Element.fie_body.add_event_listener(event_name, "[fie-#{ fie_event_name }]:not([fie-#{ fie_event_name }=''])") do |event|
+            event_is_valid = (fie_event_name == :enter && event.keyCode == 13) || fie_event_name != :enter
+
+            if event_is_valid
+              element = Element.new(element: event.target)
+              remote_function_name = element["fie-#{ fie_event_name }"]
+              function_parameters = JSON.parse(element['fie-parameters'] || {})
+
+              @cable.call_remote_function \
+                element: element,
+                function_name: remote_function_name,
+                event_name: event_name,
+                parameters: function_parameters
+            end
+          end
+        end
+      end
+
+      def initialize_input_elements
+        timer = Timeout.new(0) { }
+
+        typing_input_types = ['text', 'password', 'search', 'tel', 'url']
+
+        typing_input_selector = (['textarea'] + typing_input_types).reduce do |selector, input_type|
+          selector += ", input[type=#{ input_type }]"
+        end
+
+        non_typing_input_selector = (['input'] + typing_input_types).reduce do |selector, input_type|
+          selector += ":not([type=#{ input_type }])"
+        end
+
+        Element.fie_body.add_event_listener('keydown', typing_input_selector) do |event|
+          timer.clear
+
+          input_element = Element.new(element: event.target)
+
+          timer = Timeout.new(500) do
+            update_state_using_changelog(input_element)
+          end
+        end
+
+        Element.fie_body.add_event_listener('change', non_typing_input_selector) do |event|
+          input_element = Element.new(element: event.target)
+          update_state_using_changelog(input_element)
+        end
+      end
+
+      def update_state_using_changelog(input_element)
+        objects_changelog = {}
+
+        changed_object_name = Regexp.new('(?:^|])([^[\\]]+)(?:\\[|$)').match(input_element.name)[0][0..-2]
+        changed_object_key_chain = input_element.name.scan(Regexp.new '(?<=\\[).+?(?=\\])')
+
+        is_form_object = !changed_object_key_chain.empty? && !changed_object_name.nil?
+        is_fie_nested_object = Util.view_variables.include? changed_object_name
+        is_fie_form_object = is_form_object && is_fie_nested_object
+
+        is_fie_non_nested_object = Util.view_variables.include? input_element.name
+
+        if is_fie_form_object
+          build_changelog(changed_object_key_chain, changed_object_name, objects_changelog, input_element)
+        elsif is_fie_non_nested_object
+          objects_changelog[input_element.name] = input_element.value;
+        end
+
+        @cable.call_remote_function \
+          element: input_element,
+          function_name: 'modify_state_using_changelog',
+          event_name: 'Input Element Change',
+          parameters: { objects_changelog: objects_changelog }
+      end
+
+      def build_changelog(object_key_chain, object_name, changelog, input_element)
+        is_final_key = -> (key) { key == object_key_chain[-1] }
+        object_final_key_value = input_element.value
+        
+        changelog[object_name] = {}
+        changelog = changelog[object_name]
+
+        object_key_chain.each do |key|
+          if is_final_key.call(key)
+            changelog[key] = object_final_key_value
+          else
+            changelog[key] = {}
+            changelog = changelog[key]
+          end
+        end
+      end
+  end
+end

data/lib/opal/fie/native.rb

@@ -0,0 +1,5 @@
+module Fie
+  module Native
+    require_tree './native'
+  end
+end

data/lib/opal/fie/native/action_cable_channel.rb

@@ -0,0 +1,34 @@
+require 'fie/native'
+
+module Fie
+  module Native
+    class ActionCableChannel
+      def initialize(channel_name:, identifier:, cable:)
+        @channel_name = channel_name
+        @identifier = identifier
+        @cable = cable
+        @event = Event.new('fieChanged')
+
+        @subscription = $$.App.cable.subscriptions.create(
+          { channel: @channel_name, identifier: @identifier },
+          {
+            connected: -> { connected },
+            received: -> (data) { received Native(`#{data}`) }
+          }
+        )
+      end
+
+      def responds_to?(t)
+        true
+      end
+
+      def connected
+        puts "Connected to #{ @channel_name } with identifier #{ @identifier }"
+      end
+
+      def perform(function_name, parameters = {})
+        @subscription.perform(function_name, parameters);
+      end
+    end
+  end
+end