ruby2js 3.6.1 → 4.0.0

data/lib/ruby2js/filter/{wunderbar.rb → jsx.rb}

@@ -1,17 +1,19 @@
 require 'ruby2js'
 
+# Convert Wunderbar syntax to JSX
+
 module Ruby2JS
   module Filter
-    module Wunderbar
+    module JSX
       include SEXP
 
       def on_send(node)
-        target, method, *attrs = node.children
+        target, method, *args = node.children
 
         if target == s(:const, nil, :Wunderbar)
           if [:debug, :info, :warn, :error, :fatal].include? method
             method = :error if method == :fatal
-            return node.updated(nil, [s(:const, nil, :console), method, *attrs])
+            return node.updated(nil, [s(:const, nil, :console), method, *args])
           end
         end
 
@@ -27,7 +29,17 @@ module Ruby2JS
         end
 
         if target == nil and method.to_s.start_with? "_"
-          S(:xnode, *method.to_s[1..-1], *stack, *process_all(attrs))
+          S(:xnode, method.to_s[1..-1], *stack, *process_all(args))
+
+        elsif method == :createElement and target == s(:const, nil, :React)
+          if args.first.type == :str and \
+            (args.length == 1 or %i(nil hash).include? args[1].type)
+            attrs = (args[1]&.type != :nil && args[1]) || s(:hash)
+            S(:xnode, args[0].children.first, attrs, *process_all(args[2..-1]))
+          else
+            super
+          end
+
         else
           super
         end
@@ -42,8 +54,18 @@ module Ruby2JS
 
         if target == nil and method.to_s.start_with? "_"
           if args.children.empty?
-            # append block as a standalone proc
-            process send.updated(nil, [*send.children, *process_all(block)])
+            if method == :_
+              # Fragment
+              if send.children.length == 2
+                process send.updated(:xnode, ['', *process_all(block)])
+              else
+                process s(:xnode, 'React.Fragment', *send.children[2..-1],
+                  *process_all(block))
+              end
+            else
+              # append block as a standalone proc
+              process send.updated(nil, [*send.children, *process_all(block)])
+            end
           else
             # iterate over Enumerable arguments if there are args present
             send = send.children
@@ -58,6 +80,6 @@ module Ruby2JS
       end
     end
 
-    DEFAULTS.push Wunderbar
+    DEFAULTS.push JSX
   end
 end

data/lib/ruby2js/filter/react.rb

@@ -17,30 +17,39 @@
 #  * ~"x" becomes document.querySelector("x")
 #
 require 'ruby2js'
+require 'ruby2js/jsx'
 
 module Ruby2JS
   module Filter
     module React
       include SEXP
+      extend  SEXP
+
+      REACT_IMPORTS = {
+        React: s(:import, ['React'], s(:attr, nil, :React)),
+        ReactDOM: s(:import, ['ReactDOM'], s(:attr, nil, :ReactDOM))
+      }
 
       # the following command can be used to generate ReactAttrs:
       # 
       #   ruby -r ruby2js/filter/react -e "Ruby2JS::Filter::React.genAttrs"
       #
       def self.genAttrs
-        require 'nokogumbo'
-        page = 'https://facebook.github.io/react/docs/tags-and-attributes.html'
-        doc = Nokogiri::HTML5.get(page)
-
-        # delete contents of page prior to the list of supported attributes
-        attrs = doc.at('a[name=supported-attributes]')
-        attrs = attrs.parent while attrs and not attrs.name.start_with? 'h'
-        attrs.previous_sibling.remove while attrs and attrs.previous_sibling
-
-        # extract attribute names with uppercase chars from code and format
-        attrs = doc.search('code').map(&:text).join(' ')
-        attrs = attrs.split(/\s+/).grep(/[A-Z]/).sort.uniq.join(' ')
-        puts "ReactAttrs = %w(#{attrs})".gsub(/(.{1,72})(\s+|\Z)/, "\\1\n")
+        unless RUBY_ENGINE == 'opal'
+          require 'nokogumbo'
+          page = 'https://facebook.github.io/react/docs/tags-and-attributes.html'
+          doc = Nokogiri::HTML5.get(page)
+
+          # delete contents of page prior to the list of supported attributes
+          attrs = doc.at('a[name=supported-attributes]')
+          attrs = attrs.parent while attrs and not attrs.name.start_with? 'h'
+          attrs.previous_sibling.remove while attrs and attrs.previous_sibling
+
+          # extract attribute names with uppercase chars from code and format
+          attrs = doc.search('code').map(&:text).join(' ')
+          attrs = attrs.split(/\s+/).grep(/[A-Z]/).sort.uniq.join(' ')
+          puts "ReactAttrs = %w(#{attrs})".gsub(/(.{1,72})(\s+|\Z)/, "\\1\n")
+        end
       end
 
       # list of react attributes that require special processing
@@ -60,8 +69,13 @@ module Ruby2JS
       xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle
       xlinkType xmlBase xmlLang xmlSpace)
 
+      ReactLifecycle = %w(render componentDidMount shouldComponentUpdate
+      getShapshotBeforeUpdate componentDidUpdate componentWillUnmount
+      componentDidCatch)
+
       ReactAttrMap = Hash[ReactAttrs.map {|name| [name.downcase, name]}]
       ReactAttrMap['for'] = 'htmlFor'
+      ReactFragment = :'_React.Fragment'
 
       def initialize(*args)
         @react = nil
@@ -71,6 +85,7 @@ module Ruby2JS
         @react_props = []
         @react_methods = []
         @react_filter_functions = false
+        @react_imports = false
         @jsx = false
         super
       end
@@ -88,8 +103,17 @@ module Ruby2JS
         end
 
         if \
-          defined? Ruby2JS::Filter::Wunderbar and
-          filters.include? Ruby2JS::Filter::Wunderbar
+          (defined? Ruby2JS::Filter::ESM and
+          filters.include? Ruby2JS::Filter::ESM) or
+          (defined? Ruby2JS::Filter::CJS and
+          filters.include? Ruby2JS::Filter::CJS)
+        then
+          @react_imports = true
+        end
+
+        if \
+          defined? Ruby2JS::Filter::JSX and
+          filters.include? Ruby2JS::Filter::JSX
         then
           @jsx = true
         end
@@ -106,8 +130,11 @@ module Ruby2JS
         return super unless cname.children.first == nil
         return super unless inheritance == s(:const, nil, :React) or
           inheritance == s(:const, nil, :Vue) or
+          inheritance == s(:const, s(:const, nil, :React), :Component) or
           inheritance == s(:send, s(:const, nil, :React), :Component)
 
+        prepend_list << REACT_IMPORTS[:React] if @react_imports
+
         # traverse down to actual list of class statements
         if body.length == 1
           if not body.first
@@ -156,24 +183,46 @@ module Ruby2JS
             end
           end
 
-	  # collect instance methods (including getters and setters)
+          # collect instance methods (including getters and setters)
           @react_props = []
           @react_methods = []
-	  body.each do |statement|
-	    if statement.type == :def
-	      method = statement.children.first
-	      unless method == :initialize
-		if method.to_s.end_with? '='
-		  method = method.to_s[0..-2].to_sym
-		  @react_props << method unless @react_props.include? method
-		elsif statement.is_method?
-		  @react_methods << method unless @react_methods.include? method
-		else
-		  @react_props << method unless @react_props.include? method
-		end
-	      end
-	    end
-	  end
+          body.each do |statement|
+            if statement.type == :def
+              method = statement.children.first
+              unless method == :initialize
+                if method.to_s.end_with? '='
+                  method = method.to_s[0..-2].to_sym
+                  @react_props << method unless @react_props.include? method
+                elsif statement.is_method?
+                  @react_methods << method unless @react_methods.include? method
+                else
+                  @react_props << method unless @react_props.include? method
+                end
+              end
+            end
+          end
+
+          # determine which instance methods need binding
+          needs_binding = []
+          scan_events = lambda do |list|
+            list.each do |node|
+              next unless Parser::AST::Node === node
+              node = process node if node.type == :xstr
+              if node.type == :hash
+                node.children.each do |pair|
+                  value = pair.children.last
+                  if value.type == :send and \
+                    @react_methods.include? value.children[1] and \
+                    [nil, s(:self), s(:send, nil, :this)].include? value.children[0]
+
+                    needs_binding << value.children[1]
+                  end
+                end
+              end
+              scan_events[node.children]
+            end
+          end
+          scan_events[body]
 
           # append statics (if any)
           unless statics.empty?
@@ -181,9 +230,9 @@ module Ruby2JS
           end
 
           # create a default getInitialState method if there is no such method
-          # and there are references to instance variables.
+          # and there are either references to instance variables or there are
+          # methods that need to be bound.
           if \
-            not es2015 and
             not body.any? do |child|
               child.type == :def and
               [:getInitialState, :initialize].include? child.children.first
@@ -191,9 +240,11 @@ module Ruby2JS
           then
             @reactIvars = {pre: [], post: [], asgn: [], ref: [], cond: []}
             react_walk(node)
-            unless @reactIvars.values.flatten.empty?
+            if not es2015 and not @reactIvars.values.flatten.empty?
               body = [s(:def, :getInitialState, s(:args),
                 s(:return, s(:hash))), *body]
+            elsif not needs_binding.empty? or not @reactIvars.values.flatten.empty?
+              body = [s(:def, :initialize, s(:args)), *body]
             end
           end
 
@@ -221,9 +272,22 @@ module Ruby2JS
                 end
               end
 
+              # add props argument if there is a reference to a prop
+              if args.children.length == 0
+                has_cvar = lambda {|list|
+                  list.any? {|node|
+                    next unless Parser::AST::Node === node
+                    return true if node.type == :cvar
+                    has_cvar.call(node.children)
+                  }
+                }
+                args = s(:args, s(:arg, 'prop$')) if has_cvar[block]
+              end
+
               # peel off the initial set of instance variable assignment stmts
               assigns = []
               block = block.dup
+              block.shift if block.first == s(:zsuper)
               while not block.empty? and block.first.type == :ivasgn
                 node = block.shift
                 vars = [node.children.first]
@@ -240,9 +304,15 @@ module Ruby2JS
               state = s(:hash, *assigns.map {|anode| s(:pair, s(:str,
                 anode.children.first.to_s[1..-1]), anode.children.last)})
 
+              # bind methods as needed
+              needs_binding.each do |method|
+                block.push(s(:send, s(:self), "#{method}=",
+                  s(:send, s(:attr, s(:self), method), :bind, s(:self))))
+              end
+
               # modify block to build and/or return state
               if mname == :initialize
-                block.unshift(s(:send, s(:self), :state=, state))
+                block.unshift(s(:zsuper), s(:send, s(:self), :state=, state))
               elsif block.empty?
                 block = [s(:return, state)]
               else
@@ -250,7 +320,7 @@ module Ruby2JS
                 block.push(s(:return, s(:attr, s(:self), :state)))
               end
 
-            elsif mname == :render
+            elsif mname == :render and not react_wunderbar_free(block, true)
               if \
                  block.length != 1 or not block.last or
                 not [:send, :block].include? block.last.type
@@ -271,9 +341,9 @@ module Ruby2JS
                   block = [*prolog, s(:return,
                     s(:xnode, '', *process_all(block)))]
                 else
-                  # wrap multi-line blocks with a 'span' element
+                  # wrap multi-line blocks with a React Fragment
                   block = [s(:return,
-                    s(:block, s(:send, nil, :_span), s(:args), *block))]
+                    s(:block, s(:send, nil, ReactFragment), s(:args), *block))]
                 end
               end
 
@@ -300,7 +370,10 @@ module Ruby2JS
             end
 
             if es2015
-              pairs << s(:def, mname, args,  process(s(type, *block)))
+              pairs << child.updated(
+                ReactLifecycle.include?(mname.to_s) ? :defm : :def, 
+                [mname, args, process(s(type, *block))]
+              )
             else
               pairs << s(:pair, s(:sym, mname), child.updated(:block,
                 [s(:send, nil, :proc), args, process(s(type, *block))]))
@@ -369,8 +442,12 @@ module Ruby2JS
           # enable React filtering within React class method calls or
           # React component calls
           if \
-            node.children.first == s(:const, nil, :React)
+            node.children.first == s(:const, nil, :React) or
+            node.children.first == s(:const, nil, :ReactDOM)
           then
+            if @react_imports
+              prepend_list << REACT_IMPORTS[node.children.first.children.last]
+            end
 
             begin
               react, @react = @react, true
@@ -429,6 +506,10 @@ module Ruby2JS
               # :block arguments are inserted by on_block logic below
               block = child
 
+            elsif child.type == :splat
+              # arrays need not be expanded
+              text = child.children.first
+
             else
               # everything else added as text
               text = child
@@ -586,6 +667,9 @@ module Ruby2JS
               next true if arg.children[1] == :createElement and
                 arg.children[0] == s(:const, nil, :Vue)
 
+              # JSX
+              next true if arg.type == :xstr
+
               # wunderbar style call
               arg = arg.children.first if arg.type == :block
               while arg.type == :send and arg.children.first != nil
@@ -598,7 +682,19 @@ module Ruby2JS
               if simple
                 # in the normal case, process each argument
                 reactApply, @reactApply = @reactApply, false
-                params += args.map {|arg| process(arg)}
+                args.each do |arg|
+                  arg = process(arg)
+                  if arg.type == :send and 
+                    arg.children[0] == s(:const, nil, :React) and
+                    arg.children[1] == :createElement and
+                    arg.children[2] == s(:const, nil, "React.Fragment") and
+                    arg.children[3] == s(:nil) 
+                  then
+                    params += arg.children[4..-1]
+                  else
+                    params << arg
+                  end
+                end
               else
                 reactApply, @reactApply = @reactApply, true
 
@@ -860,7 +956,15 @@ module Ruby2JS
         end
 
         # wunderbar style calls
-        if !@jsx and child.children[0] == nil and child.children[1] =~ /^_\w/
+        if child.children[0] == nil and child.children[1] == :_ and \
+          node.children[1].children.empty? and !@jsx
+
+          block = s(:block, s(:send, nil, :proc), s(:args),
+            *node.children[2..-1])
+          return on_send node.children.first.updated(:send,
+            [nil, ReactFragment, block])
+
+        elsif !@jsx and child.children[0] == nil and child.children[1] =~ /^_\w/
           if node.children[1].children.empty?
             # append block as a standalone proc
             block = s(:block, s(:send, nil, :proc), s(:args),
@@ -871,9 +975,18 @@ module Ruby2JS
             # iterate over Enumerable arguments if there are args present
             send = node.children.first.children
             return super if send.length < 3
-            return process s(:block, s(:send, *send[0..1], *send[3..-1]),
-              s(:args), s(:block, s(:send, send[2], :forEach),
-              *node.children[1..-1]))
+            if node.children.length == 3 and
+              node.children.last.respond_to? :type and
+              node.children.last.type == :send
+
+              return process s(:send, *send[0..1], *send[3..-1],
+                s(:splat, s(:block, s(:send, send[2], :map),
+                node.children[1], s(:return, node.children[2]))))
+            else
+              return process s(:block, s(:send, *send[0..1], *send[3..-1]),
+                s(:args), s(:block, s(:send, send[2], :forEach),
+                *node.children[1..-1]))
+            end
           end
         end
 
@@ -885,6 +998,13 @@ module Ruby2JS
         end
       end
 
+      def on_lvasgn(node)
+        return super unless @reactClass
+        return super unless @react_props.include? node.children.first
+        node.updated(:send, [s(:self), "#{node.children.first}=",
+          node.children.last])
+      end
+
       # convert global variables to refs
       def on_gvar(node)
         return super unless @reactClass
@@ -993,7 +1113,7 @@ module Ruby2JS
       end
 
       # is this a "wunderbar" style call or createElement?
-      def react_element?(node)
+      def react_element?(node, wunderbar_only=false)
         return false unless node
 
         forEach = [:forEach]
@@ -1001,15 +1121,17 @@ module Ruby2JS
 
         return true if node.type == :block and
           forEach.include? node.children.first.children.last and 
-          react_element?(node.children.last)
+          react_element?(node.children.last, wunderbar_only)
 
-        # explicit call to React.createElement
-        return true if node.children[1] == :createElement and
-          node.children[0] == s(:const, nil, :React)
+        unless wunderbar_only
+          # explicit call to React.createElement
+          return true if node.children[1] == :createElement and
+            node.children[0] == s(:const, nil, :React)
 
-        # explicit call to Vue.createElement
-        return true if node.children[1] == :createElement and
-          node.children[0] == s(:const, nil, :Vue)
+          # explicit call to Vue.createElement
+          return true if node.children[1] == :createElement and
+            node.children[0] == s(:const, nil, :Vue)
+        end
 
         # wunderbar style call
         node = node.children.first if node.type == :block
@@ -1021,13 +1143,14 @@ module Ruby2JS
 
       # ensure that there are no "wunderbar" or "createElement" calls in
       # a set of statements.
-      def react_wunderbar_free(nodes)
+      def react_wunderbar_free(nodes, wunderbar_only=false)
         nodes.each do |node|
           if Parser::AST::Node === node
-            return false if react_element?(node)
+            return false if node.type == :xstr
+            return false if react_element?(node, wunderbar_only)
 
             # recurse
-            return false unless react_wunderbar_free(node.children)
+            return false unless react_wunderbar_free(node.children, wunderbar_only)
           end
         end
 
@@ -1181,6 +1304,18 @@ module Ruby2JS
 
         block
       end
+
+      def on_xstr(node)
+       loc = node.loc
+       return super unless loc
+       source = loc.begin.source_buffer.source
+       source = source[loc.begin.end_pos...loc.end.begin_pos].strip
+       return super unless @reactClass or source.start_with? '<'
+       source = Ruby2JS.jsx2_rb(source)
+       ast =  Ruby2JS.parse(source).first
+       ast = s(:block, s(:send, nil, :_), s(:args), ast) if ast.type == :begin
+       process ast
+      end
     end
 
     DEFAULTS.push React