ready to test native element rewrite

Author: catmando

ruby/hyper-component/Gemfile

@@ -7,6 +7,7 @@ gem 'hyper-state',       path: '../hyper-state'
 unless ENV['OPAL_VERSION']&.match("0.11")
   gem 'opal-browser', git: 'https://github.com/opal/opal-browser'
 end
+gem 'hyper-trace',       path: '../hyper-trace'
 
 #gem 'puma', '~> 3.11.0' # As of adding, version 3.12.0 isn't working so we are locking
 gemspec

ruby/hyper-component/lib/hyperstack/component/children.rb

@@ -22,7 +22,7 @@ def each(&block)
         %x{
           React.Children.forEach(#{@children}, function(context){
             #{
-              element = Element.new(`context`)
+              element = Element.new(`context`, :wrap_child)
               block.call(element)
               collection << element
             }

ruby/hyper-component/lib/hyperstack/component/element.rb

@@ -15,33 +15,73 @@ module Component
     # by using method missing
     #
     class Element
-      include Native::Wrapper
 
-      alias_native :element_type, :type
-      alias_native :props, :props
+#       $$typeof: Symbol(react.element)
+#       key: null
+#       props: {}
+#       ref: null
+#       type: "div"
+# _     _owner: null
 
-      attr_reader :type
+      attr_reader   :type
+
+      attr_reader :element_type # change this so name does not conflict - change to element type
       attr_reader :properties
       attr_reader :block
+      attr_reader :to_n
 
       attr_accessor :waiting_on_resources
 
-      def initialize(native_element, type = nil, properties = {}, block = nil)
-        @type = type
+      def set_native_attributes(native_element)
+        @key =    `native_element.key`
+        @props =  `native_element.props`
+        @ref =    `native_element.ref`
+        @type =   `native_element.type`
+        @_owner = `native_element._owner`
+        @_props_as_hash = Hash.new(@props)
+      end
+
+      def props
+        @_props_as_hash
+      end
+
+      def convert_string(native_element, element_type, props, block)
+        return native_element unless `native_element['$is_a?']`
+        return native_element unless native_element.is_a? String
+        raise "Internal Error Element.new called with string, but non-nil props or block" if !props.empty? || block
+
+        if element_type == :wrap_child
+          `React.createElement(React.Fragment, null, [native_element])`
+        else
+          `React.createElement(native_element, null)`
+        end
+      end
+
+      def initialize(native_element, element_type = nil, properties = {}, block = nil)
+
+        native_element = convert_string(native_element, element_type, properties, block)
+        @element_type = element_type unless element_type == :wrap_child
         @properties = (`typeof #{properties} === 'undefined'` ? nil : properties) || {}
         @block = block
-        @native = native_element
+        `#{self}.$$typeof = native_element.$$typeof`
+        @to_n = self
+        set_native_attributes(native_element)
+      rescue Exception
+      end
+
+      def children
+        `#{@props}.children`
       end
 
       def _update_ref(x)
-        @ref = x
+        @_ref = x
         @_child_element._update_ref(x) if @_child_element
       end
 
-      def ref
-        return @ref if @ref
-        raise("The instance of #{self.type} has not been mounted yet") if properties[:ref]
-        raise("Attempt to get a ref on #{self.type} which is a static component.")
+      def ref # this will not conflict with React's on ref attribute okay because its $ref!!!
+        return @_ref if @_ref
+        raise("The instance of #{self.element_type} has not been mounted yet") if properties[:ref]
+        raise("Attempt to get a ref on #{self.element_type} which is a static component.")
       end
 
       def dom_node
@@ -57,7 +97,7 @@ def on(*event_names, &block)
           merge_event_prop!(event_name, &block)
           any_found = true
         end
-        @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})` if any_found
+        set_native_attributes(`React.cloneElement(#{self}, #{@properties.shallow_to_n})`) if any_found
         self
       end
 
@@ -69,22 +109,23 @@ def render(*props)
         if props.empty?
           Hyperstack::Internal::Component::RenderingContext.render(self)
         else
-          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(@type, @properties, *props)
+          props = Hyperstack::Internal::Component::ReactWrapper.convert_props(element_type, @properties, *props)
           @_child_element = Hyperstack::Internal::Component::RenderingContext.render(
-            Element.new(`React.cloneElement(#{@native}, #{props.shallow_to_n})`,
-                        type, props, block)
+            Element.new(`React.cloneElement(#{self}, #{props.shallow_to_n})`,
+                        element_type, props, block)
           )
         end
       end
 
       # Delete (remove) element from rendering context, the element may later be added back in
       # using the render method.
 
-      def delete
+      def ~
         Hyperstack::Internal::Component::RenderingContext.delete(self)
       end
       # Deprecated version of delete method
-      alias as_node delete
+      alias as_node ~
+      alias delete ~
 
       private
 
@@ -109,7 +150,7 @@ def merge_event_prop!(event_name, &block)
           merge_built_in_event_prop! name, &block
         elsif event_name == :enter
           merge_built_in_event_prop!('onKeyDown') { |evt| yield(evt) if evt.key_code == 13 }
-        elsif @type.instance_variable_get('@native_import')
+        elsif element_type.instance_variable_get('@native_import')
           merge_component_event_prop! name, &block
         else
           merge_component_event_prop! "on_#{event_name}", &block

ruby/hyper-component/lib/hyperstack/internal/component/class_methods.rb

@@ -50,7 +50,7 @@ def before_receive_props(*args, &block)
         def render(container = nil, params = {}, &block)
           Tags.included(self)
           if container
-            container = container.type if container.is_a? Hyperstack::Component::Element
+            container = container.element_type if container.is_a? Hyperstack::Component::Element
             define_method(:__hyperstack_component_render) do
               __hyperstack_component_select_wrappers do
                 RenderingContext.render(container, params) do

ruby/hyper-component/lib/hyperstack/internal/component/haml.rb

@@ -28,7 +28,7 @@ def method_missing(class_name, args = {}, &new_block)
             self,
             Hyperstack::Internal::Component::RenderingContext.build do
               Hyperstack::Internal::Component::RenderingContext.render(
-                type, @properties, args, class: haml_class_name(class_name), &new_block
+                element_type, @properties, args, class: haml_class_name(class_name), &new_block
               )
             end
           )

ruby/hyper-component/lib/hyperstack/internal/component/rendering_context.rb

@@ -19,11 +19,16 @@ def quiet_test(component)
             raise NotQuiet.new("#{component} is waiting on resources")
           end
 
+          def render_string(string)
+            @buffer ||= []
+            @buffer << string
+          end
+
           def render(name, *args, &block)
             was_outer_most = !@not_outer_most
             @not_outer_most = true
             remove_nodes_from_args(args)
-            @buffer ||= [] unless @buffer
+            @buffer ||= [] #unless @buffer
             if block
               element = build do
                 saved_waiting_on_resources = nil #waiting_on_resources  what was the purpose of this its used below to or in with the current elements waiting_for_resources
@@ -200,10 +205,10 @@ def para(*args, &block)
   def br
     # see above comment
     return send(:br) if respond_to?(:hyper_component?) && hyper_component?
-
-    Hyperstack::Internal::Component::RenderingContext.render(:span) do
-      Hyperstack::Internal::Component::RenderingContext.render(to_s)
-      Hyperstack::Internal::Component::RenderingContext.render(:br)
+    
+    Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::FRAGMENT) do
+      Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::FRAGMENT) { to_s }
+      Hyperstack::Internal::Component::RenderingContext.render(Hyperstack::Internal::Component::Tags::BR)
     end
   end
 

ruby/hyper-component/spec/client_features/children_spec.rb

@@ -26,7 +26,7 @@ def self.get_children
 
     it 'is enumerable' do
       expect_evaluate_ruby do
-        InitTest.get_children.map { |elem| elem.element_type }
+        InitTest.get_children.map { |elem| elem.type }
       end.to eq(['a', 'li'])
     end
 
@@ -40,7 +40,7 @@ def self.get_children
     describe '#each' do
       it 'returns an array of elements' do
         expect_evaluate_ruby do
-          nodes = InitTest.get_children.each { |elem| elem.element_type }
+          nodes = InitTest.get_children.each { |elem| elem.type }
           [nodes.class.name, nodes.map(&:class)]
         end.to eq(["Array", ["Hyperstack::Component::Element", "Hyperstack::Component::Element"]])
       end
@@ -80,7 +80,7 @@ def self.get_children
 
     it 'is enumerable containing single element' do
       expect_evaluate_ruby do
-        InitTest.get_children.map { |elem| elem.element_type }
+        InitTest.get_children.map { |elem| elem.type }
       end.to eq(["a"])
     end
 
@@ -117,7 +117,7 @@ def self.get_children
 
     it 'is enumerable containing no elements' do
       expect_evaluate_ruby do
-        InitTest.get_children.map { |elem| elem.element_type }
+        InitTest.get_children.map { |elem| elem.type }
       end.to eq([])
     end
 

ruby/hyper-component/spec/client_features/component_spec.rb

@@ -297,7 +297,7 @@ class Bar < Hyperloop::Component
         end
         class Foo < Hyperloop::Component
           render do
-            Bar.insert_element(p: "param") { "child"}
+            Bar.insert_element(p: "param") { "child" }
           end
         end
       end
@@ -859,7 +859,7 @@ class Foo
       end
       expect_evaluate_ruby("CHILDREN.class.name").to eq('Hyperstack::Component::Children')
       expect_evaluate_ruby("CHILDREN.count").to eq(2)
-      expect_evaluate_ruby("CHILDREN.map(&:element_type)").to eq(['a', 'li'])
+      expect_evaluate_ruby("CHILDREN.map(&:type)").to eq(['a', 'li'])
     end
 
     it 'returns an empty Enumerator if there are no children' do

ruby/hyper-component/spec/client_features/dsl_spec.rb

@@ -107,7 +107,7 @@ class Foo
     end
     expect(
       find(
-        'div[data-react-class="Hyperstack.Internal.Component.TopLevelRailsComponent"] div.foo span'
+        'div[data-react-class="Hyperstack.Internal.Component.TopLevelRailsComponent"] div.foo'
       )['innerHTML']
     ).to eq 'hello<br>'
   end
@@ -238,22 +238,22 @@ class Foo
     expect(page.body[-60..-19]).to include('<span class="the-class">hello</span>')
   end
 
-  it "can generate a unrendered node using the .as_node method" do          # DIV { "hello" }.as_node
+  it "can generate a unrendered node using the ~ operator" do
     mount 'Foo' do
       class Foo
         include Hyperstack::Component
         render do
-          SPAN(data: {size: 12}) { "hello".span.as_node.class.name }.as_node.render
+          (~SPAN(data: {size: 12}) { (~"hello".span).class.name }).render
         end
       end
     end
     expect(page.body[-80..-19]).to include('<span data-size="12">Hyperstack::Component::Element</span>')
   end
 
-  it "the delete method (alias as_node) removes the node from the render buffer" do
+  it "~ operator removes the node from the render buffer" do
     mount 'Foo' do
       class Foo < Hyperloop::Component
-        render { "hello".span; "goodby".span.delete }
+        render { "hello".span; ~"goodby".span }
       end
     end
     expect(find('span').text).to eq('hello')

ruby/hyper-component/spec/client_features/react_spec.rb

@@ -11,7 +11,6 @@
     end
 
     it "should return false is passed a non React element" do
-
       expect_evaluate_ruby do
         element = Hyperstack::Component::Element.new(JS.call(:eval, "{}"))
         Hyperstack::Component::ReactAPI.is_valid_element?(element)
@@ -35,7 +34,7 @@
           ELEMENT = Hyperstack::Component::ReactAPI.create_element('div') { "lorem ipsum" }
         end
         expect_evaluate_ruby("Hyperstack::Component::ReactAPI.is_valid_element?(ELEMENT)").to eq(true)
-        expect_evaluate_ruby("ELEMENT.props.children").to eq("lorem ipsum")
+        expect_evaluate_ruby("ELEMENT.children").to eq("lorem ipsum")
       end
 
       it "should create a valid element with children as array when block yield Array of element" do
@@ -46,7 +45,7 @@
           end
         end
         expect_evaluate_ruby("Hyperstack::Component::ReactAPI.is_valid_element?(ELEMENT)").to eq(true)
-        expect_evaluate_ruby("ELEMENT.props.children.length").to eq(3)
+        expect_evaluate_ruby("ELEMENT.children.length").to eq(3)
       end
 
       it "should render element with children as array when block yield Array of element" do
@@ -88,7 +87,7 @@ def props
           true
         end
         expect_evaluate_ruby("INSTANCE.props[:children].is_a?(Array)").to be_falsy
-        expect_evaluate_ruby("INSTANCE.props[:children][:type]").to eq("span")
+        expect_evaluate_ruby("INSTANCE.props[:children].type").to eq("span")
       end
 
       it "should render element with more than one children correctly" do
@@ -116,7 +115,7 @@ def props
             param :foo
           end
           element = Hyperstack::Component::ReactAPI.create_element(Foo, foo: "bar")
-          element.props.foo
+          element.props[:foo]
         end.to eq("bar")
       end
 
@@ -180,23 +179,23 @@ def self.count
 
         expect_evaluate_ruby do
           element = Hyperstack::Component::ReactAPI.create_element("div", class_name: "foo")
-          element.props.className
+          element.props[:className]
         end.to eq("foo")
       end
 
       it "should allow custom property" do
 
         expect_evaluate_ruby do
           element = Hyperstack::Component::ReactAPI.create_element("div", foo: "bar")
-          element.props.foo
+          element.props[:foo]
         end.to eq("bar")
       end
 
       it "should not camel-case custom property" do
 
         expect_evaluate_ruby do
           element = Hyperstack::Component::ReactAPI.create_element("div", foo_bar: "foo")
-          element.props.foo_bar
+          element.props[:foo_bar]
         end.to eq("foo")
       end
     end
@@ -206,7 +205,7 @@ def self.count
 
         expect_evaluate_ruby do
           element = Hyperstack::Component::ReactAPI.create_element("div", class_name: "foo bar")
-          element.props.className
+          element.props[:className]
         end.to eq("foo bar")
       end
     end