ruby2js 4.0.2 → 4.1.1

data/lib/ruby2js/filter/react.rb

@@ -26,8 +26,13 @@ module Ruby2JS
       extend  SEXP
 
       REACT_IMPORTS = {
-        React: s(:import, ['React'], s(:attr, nil, :React)),
-        ReactDOM: s(:import, ['ReactDOM'], s(:attr, nil, :ReactDOM))
+        React: s(:import, ['react'], s(:attr, nil, :React)),
+        ReactDOM: s(:import, ['react-dom'], s(:attr, nil, :ReactDOM)),
+        Preact: s(:import,
+          [s(:pair, s(:sym, :as), s(:const, nil, :Preact)),
+            s(:pair, s(:sym, :from), s(:str, "preact"))],
+            s(:str, '*')),
+        PreactHook: s(:import, ["preact/hooks"], [s(:attr, nil, :useState)])
       }
 
       # the following command can be used to generate ReactAttrs:
@@ -71,17 +76,23 @@ module Ruby2JS
 
       ReactLifecycle = %w(render componentDidMount shouldComponentUpdate
       getShapshotBeforeUpdate componentDidUpdate componentWillUnmount
-      componentDidCatch)
+      componentDidCatch componentWillReceiveProps)
 
       ReactAttrMap = Hash[ReactAttrs.map {|name| [name.downcase, name]}]
       ReactAttrMap['for'] = 'htmlFor'
-      ReactFragment = :'_React.Fragment'
+
+      PreactAttrMap = {
+        htmlFor: 'for',
+        onDoubleClick: 'onDblClick',
+        tabIndex: 'tabindex'
+      }
 
       def initialize(*args)
         @react = nil
         @reactApply = nil
         @reactBlock = nil
         @reactClass = nil
+        @reactMethod = nil
         @react_props = []
         @react_methods = []
         @react_filter_functions = false
@@ -118,12 +129,23 @@ module Ruby2JS
       def on_class(node)
         cname, inheritance, *body = node.children
         return super unless cname.children.first == nil
-        return super unless inheritance == s(:const, nil, :React) or
-          inheritance == s(:const, nil, :Vue) or
+
+        if inheritance == s(:const, nil, :React) or
           inheritance == s(:const, s(:const, nil, :React), :Component) or
           inheritance == s(:send, s(:const, nil, :React), :Component)
 
-        prepend_list << REACT_IMPORTS[:React] if modules_enabled?
+          react = :React
+          prepend_list << REACT_IMPORTS[:React] if modules_enabled?
+
+        elsif inheritance == s(:const, nil, :Preact) or
+          inheritance == s(:const, s(:const, nil, :Preact), :Component) or
+          inheritance == s(:send, s(:const, nil, :Preact), :Component)
+
+          react = :Preact
+          prepend_list << REACT_IMPORTS[:Preact] if modules_enabled?
+        else
+          return super
+        end
 
         # traverse down to actual list of class statements
         if body.length == 1
@@ -141,12 +163,14 @@ module Ruby2JS
         end
 
         begin
-          react, @react = @react, true
+          react, @react = @react, react
           reactClass, @reactClass = @reactClass, true
 
           pairs = []
 
-          unless es2015
+          createClass = (@react == :React and not es2015)
+
+          if createClass
             # automatically capture the displayName for the class
             pairs << s(:pair, s(:sym, :displayName),
               s(:str, cname.children.last.to_s))
@@ -156,12 +180,11 @@ module Ruby2JS
           statics = []
           body.select {|child| child.type == :defs}.each do |child|
             _parent, mname, args, *block = child.children
-            if es2015
-              block = [s(:autoreturn, *block)] unless child.is_method?
-              pairs << s(:defs, s(:self), mname, args, *block)
+            if not createClass
+              pairs << child
             elsif child.is_method?
-              statics << s(:pair, s(:sym, mname), process(child.updated(:block,
-                [s(:send, nil, :proc), args, s(:autoreturn, *block)])))
+              statics << s(:pair, s(:sym, mname), child.updated(:block,
+                [s(:send, nil, :proc), args, s(:autoreturn, *block)]))
             elsif \
               block.length == 1 and
               Converter::EXPRESSIONS.include? block.first.type
@@ -212,13 +235,53 @@ module Ruby2JS
               scan_events[node.children]
             end
           end
-          scan_events[body] unless es2015
+          scan_events[body] if createClass
 
           # append statics (if any)
           unless statics.empty?
             pairs << s(:pair, s(:sym, :statics), s(:hash, *statics))
           end
 
+          # determine if this class can be emitted as a hook
+          hook = (es2015 and inheritance.children.first == nil)
+          hookinit = nil
+          useState = []
+          body.each_with_index do |statement, index|
+            if statement.type == :def
+              method = statement.children.first
+              if method == :initialize
+                children = statement.children[2..-1]
+                children.pop unless children.last
+                while children.length == 1 and children.first.type == :begin
+                  children = children.first.children 
+                end
+                hookinit = index if children.any? {|child| child.type != :ivasgn}
+              elsif method == :render
+                nil
+              elsif ReactLifecycle.include? method.to_s
+                hook = false
+              elsif not statement.is_method?
+                hook = false
+              elsif method.to_s.end_with? '='
+                hook = false
+              end
+            elsif statement.type == :defs
+              hook = false
+            end
+          end
+
+          if hook
+            @reactClass = :hook
+            @react_props = []
+            @react_methods = []
+
+            if hookinit
+              body = body.dup
+              hookinit = body.delete_at(hookinit)
+              pairs.unshift process hookinit.children[2]
+            end
+          end
+
           # create a default getInitialState method if there is no such method
           # and there are either references to instance variables or there are
           # methods that need to be bound.
@@ -230,7 +293,13 @@ module Ruby2JS
           then
             @reactIvars = {pre: [], post: [], asgn: [], ref: [], cond: []}
             react_walk(node)
-            if not es2015 and not @reactIvars.values.flatten.empty?
+
+            if hook
+              react_walk(hookinit) if hookinit
+              useState = (@reactIvars[:asgn] + @reactIvars[:ref]).uniq
+            end
+
+            if createClass 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?
@@ -242,16 +311,21 @@ module Ruby2JS
           body.select {|child| child.type == :def}.each do |child|
             mname, args, *block = child.children
             @reactMethod = mname
-            @reactProps = child.updated(:attr, [s(:self), :props])
+
+            if @reactClass == :hook
+              @reactProps = s(:lvar, :"prop$")
+            else
+              @reactProps = child.updated(:attr, [s(:self), :props])
+            end
 
             # analyze ivar usage
             @reactIvars = {pre: [], post: [], asgn: [], ref: [], cond: []}
             react_walk(child) unless mname == :initialize
-            @reactIvars[:capture] =
-              (@reactIvars[:pre] + @reactIvars[:post]).uniq
+            @reactIvars[:capture] = (@reactIvars[:pre] + @reactIvars[:post]).uniq
+            @reactIvars[:pre] = @reactIvars[:post] = [] if @reactClass == :hook
 
             if mname == :initialize
-              mname = es2015 ? :initialize : :getInitialState
+              mname = createClass ? :getInitialState : :initialize 
 
               # extract real list of statements
               if block.length == 1
@@ -333,7 +407,7 @@ module Ruby2JS
                 else
                   # wrap multi-line blocks with a React Fragment
                   block = [s(:return,
-                    s(:block, s(:send, nil, ReactFragment), s(:args), *block))]
+                    s(:block, s(:send, nil, :"_#{@react}.Fragment"), s(:args), *block))]
                 end
               end
 
@@ -359,14 +433,14 @@ module Ruby2JS
               type = :begin if block.first.type == :return
             end
 
-            if es2015
+            if createClass
+              pairs << s(:pair, s(:sym, mname), child.updated(:block,
+                [s(:send, nil, :proc), args, process(s(type, *block))]))
+            else
               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))]))
             end
 
             # retain comment
@@ -374,38 +448,70 @@ module Ruby2JS
               @comments[pairs.last] = @comments[child]
             end
           end
+
+          if createClass
+            # emit a createClass statement
+            node.updated(:casgn, [nil, cname.children.last,
+              s(:send, s(:const, nil, :React), :createClass, s(:hash, *pairs))])
+          elsif hook
+            initialize = pairs.find_index {|node| node.type == :def and node.children.first == :initialize}
+
+            hash = {}
+            if initialize
+              hash = pairs.delete_at(initialize)
+              hash = hash.children.last while %i(def begin send).include? hash&.type
+              hash = s(:hash) unless hash&.type == :hash
+              hash = hash.children.map {|pair|
+                [pair.children.first.children.first, pair.children.last]
+              }.to_h
+            end 
+
+            useState.each do |symbol|
+              hash[symbol.to_s[1..-1]] ||= s(:nil)
+            end
+
+            hash.sort.reverse.each do |var, value|
+              if @react == :Preact 
+                hooker = nil
+                prepend_list << REACT_IMPORTS[:PreactHook] if modules_enabled?
+              else
+                hooker = s(:const, nil, :React)
+              end
+
+              setter = 'set' + var[0].upcase + var[1..-1]
+              pairs.unshift(s(:masgn, s(:mlhs, s(:lvasgn, var), 
+                s(:lvasgn, setter)), s(:send, hooker, :useState, value)))
+            end
+
+            render = pairs.find_index {|node| node.type == :defm and node.children.first == :render}
+            if render
+              render = pairs.delete_at(render)
+              pairs.push s(:autoreturn, render.children.last)
+            end
+
+            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 = has_cvar[node.children] ? s(:args, s(:arg, 'prop$')) : s(:args)
+
+            node.updated(:def, [cname.children.last, args, s(:begin, *pairs)])
+          else
+            # emit a class that extends React.Component
+            node.updated(:class, [s(:const, nil, cname.children.last),
+              s(:attr, s(:const, nil, @react), :Component), *pairs])
+          end
         ensure
           @react = react
           @reactClass = reactClass
           @reactMethod = nil
         end
-
-        if es2015
-          # emit a class that extends React.Component
-          node.updated(:class, [s(:const, nil, cname.children.last),
-            s(:attr, s(:const, nil, :React), :Component), *pairs]) 
-        else
-          # emit a createClass statement
-          node.updated(:casgn, [nil, cname.children.last,
-            s(:send, s(:const, nil, :React), :createClass, s(:hash, *pairs))])
-        end
       end
 
       def on_send(node)
-        # convert Vue.utile.defineReactive to class fields or assignments
-        if node.children.first == s(:send, s(:const, nil, :Vue), :util)
-          if node.children[1] == :defineReactive
-            if node.children[2].type == :cvar
-              return process s(:cvasgn, node.children[2].children.first,
-                node.children[3])
-            elsif node.children[2].type == :send
-              assign = node.children[2]
-              return assign.updated(nil, [assign.children[0],
-                assign.children[1].to_s + '=', node.children[3]])
-            end
-          end
-        end
-
         # calls to methods (including getters) defined in this class
         if node.children[0]==nil and Symbol === node.children[1]
           if node.is_method?
@@ -423,16 +529,12 @@ module Ruby2JS
           end
         end
 
-        if node.children.first == s(:const, nil, :Vue)
-          node = node.updated(nil, [s(:const, nil, :React),
-            *node.children[1..-1]])
-        end
-
         if not @react
           # enable React filtering within React class method calls or
           # React component calls
           if \
             node.children.first == s(:const, nil, :React) or
+            node.children.first == s(:const, nil, :Preact) or
             node.children.first == s(:const, nil, :ReactDOM)
           then
             if modules_enabled?
@@ -440,7 +542,8 @@ module Ruby2JS
             end
 
             begin
-              react, @react = @react, true
+              react = @react
+              @react = (node.children.first.children.last == :Preact ? :Preact : :React)
               return on_send(node)
             ensure
               @react = react
@@ -461,13 +564,26 @@ module Ruby2JS
           end
 
         elsif \
-          @reactApply and node.children[1] == :createElement and
-          node.children[0] == s(:const, nil, :React)
+          (@reactApply and node.children[1] == :createElement and
+          node.children[0] == s(:const, nil, :React)) or
+          (@reactApply and node.children[1] == :h and
+          node.children[0] == s(:const, nil, :Preact))
         then
           # push results of explicit calls to React.createElement
           s(:send, s(:gvar, :$_), :push, s(:send, *node.children[0..1],
             *process_all(node.children[2..-1])))
 
+        elsif \
+          @react == :Preact and node.children[1] == :h and node.children[0] == nil
+        then
+          if @reactApply
+            # push results of explicit calls to Preact.h
+            s(:send, s(:gvar, :$_), :push, s(:send, s(:const, nil, :Preact), :h,
+              *process_all(node.children[2..-1])))
+          else
+            node.updated(nil, [s(:const, nil, :Preact), :h, *process_all(node.children[2..-1])])
+          end
+
         elsif !@jsx and node.children[0] == nil and node.children[1] =~ /^_\w/
           # map method calls starting with an underscore to React calls
           # to create an element.
@@ -549,7 +665,12 @@ module Ruby2JS
             else
               value = s(:str, values.join(' '))
             end
-            pairs.unshift s(:pair, s(:sym, :className), value)
+
+            if @react == :Preact
+              pairs.unshift s(:pair, s(:sym, :class), value)
+            else
+              pairs.unshift s(:pair, s(:sym, :className), value)
+            end
           end
 
           # support controlled form components
@@ -559,13 +680,28 @@ module Ruby2JS
               ['value', :value].include? pair.children.first.children.first
             end
 
-            # search for the presence of a 'onChange' attribute
+            event = (@react == :Preact ? :onInput : :onChange)
+
+
+            # search for the presence of a onInput/onChange attribute
             onChange = pairs.find_index do |pair|
-              ['onChange', :onChange].include? pair.children.first.children[0]
+              pair.children.first.children[0].to_s == event.to_s
+            end
+
+            if event == :onInput and not onChange
+              # search for the presence of a 'onChange' attribute
+              onChange = pairs.find_index do |pair|
+                pair.children.first.children[0].to_s == 'onChange'
+              end
+
+              if onChange
+                pairs[onChange] = s(:pair, s(:sym, event),
+                  pairs[onChange].children.last)
+              end
             end
 
             if value and pairs[value].children.last.type == :ivar and !onChange
-              pairs << s(:pair, s(:sym, :onChange),
+              pairs << s(:pair, s(:sym, event),
                 s(:block, s(:send, nil, :proc), s(:args, s(:arg, :event)),
                 s(:ivasgn, pairs[value].children.last.children.first,
                 s(:attr, s(:attr, s(:lvar, :event), :target), :value))))
@@ -578,7 +714,7 @@ module Ruby2JS
               end
 
               if checked and pairs[checked].children.last.type == :ivar
-                pairs << s(:pair, s(:sym, :onChange),
+                pairs << s(:pair, s(:sym, event),
                   s(:block, s(:send, nil, :proc), s(:args),
                   s(:ivasgn, pairs[checked].children.last.children.first,
                   s(:send, pairs[checked].children.last, :!))))
@@ -586,13 +722,25 @@ module Ruby2JS
             end
           end
 
-          # replace attribute names with case-sensitive javascript properties
-          pairs.each_with_index do |pair, index|
-            next if pair.type == :kwsplat
-            name = pair.children.first.children.first.downcase
-            if ReactAttrMap[name] and name.to_s != ReactAttrMap[name]
-              pairs[index] = pairs[index].updated(nil, 
-                [s(:str, ReactAttrMap[name]), pairs[index].children.last])
+          if @react == :Preact
+            # replace selected Reactisms with native HTML
+            pairs.each_with_index do |pair, index|
+              next if pair.type == :kwsplat
+              name = pair.children.first.children.first.to_sym
+              if PreactAttrMap[name]
+                pairs[index] = pairs[index].updated(nil, 
+                  [s(:str, PreactAttrMap[name]), pairs[index].children.last])
+              end
+            end
+          else
+            # replace attribute names with case-sensitive javascript properties
+            pairs.each_with_index do |pair, index|
+              next if pair.type == :kwsplat
+              name = pair.children.first.children.first.downcase
+              if ReactAttrMap[name] and name.to_s != ReactAttrMap[name]
+                pairs[index] = pairs[index].updated(nil, 
+                  [s(:str, ReactAttrMap[name]), pairs[index].children.last])
+              end
             end
           end
 
@@ -654,8 +802,14 @@ module Ruby2JS
               # explicit call to React.createElement
               next true if arg.children[1] == :createElement and
                 arg.children[0] == s(:const, nil, :React)
-              next true if arg.children[1] == :createElement and
-                arg.children[0] == s(:const, nil, :Vue)
+
+              # explicit call to Preact.h
+              next true if arg.children[1] == :h and
+                arg.children[0] == s(:const, nil, :Preact)
+
+              # explicit call to h
+              next true if arg.children[1] == :h and
+                arg.children[0] == nil
 
               # JSX
               next true if arg.type == :xstr
@@ -717,8 +871,13 @@ module Ruby2JS
           params.pop if params.last == s(:nil)
 
           # construct element using params
-          element = node.updated(:send, [s(:const, nil, :React),
-            :createElement, *params])
+          if @react == :Preact
+            element = node.updated(:send, [s(:const, nil, :Preact),
+              :h, *params])
+          else
+            element = node.updated(:send, [s(:const, nil, :React),
+              :createElement, *params])
+          end
 
           if @reactApply
             # if apply is set, emit code that pushes result
@@ -846,8 +1005,13 @@ module Ruby2JS
             while node != child
               if node.children[1] !~ /!$/
                 # convert method name to hash {className: name} pair
-                pair = s(:pair, s(:sym, :className),
-                  s(:str, node.children[1].to_s.gsub('_','-')))
+                if @react == :Preact
+                  pair = s(:pair, s(:sym, :class),
+                    s(:str, node.children[1].to_s.gsub('_','-')))
+                else
+                  pair = s(:pair, s(:sym, :className),
+                    s(:str, node.children[1].to_s.gsub('_','-')))
+                end
               else
                 # convert method name to hash {id: name} pair
                 pair = s(:pair, s(:sym, :id),
@@ -917,8 +1081,11 @@ module Ruby2JS
         # Base Ruby2JS processing will convert the 'splat' to 'apply'
         child = node.children.first
         if \
-          child.children[1] == :createElement and
-          child.children[0] == s(:const, nil, :React)
+          (child.children[1] == :createElement and
+          child.children[0] == s(:const, nil, :React)) or
+          (child.children[1] == :h and
+          (child.children[0] == s(:const, nil, :Preact) or
+          child.children[0] == nil))
         then
           begin
             reactApply, @reactApply = @reactApply, true
@@ -931,11 +1098,13 @@ module Ruby2JS
             @reactApply = reactApply
           end
 
+          target = child.children[0] || s(:const, nil, :Preact)
+
           if reactApply
             return child.updated(:send, [s(:gvar, :$_), :push, 
-              s(:send, *child.children[0..1], *params)])
+              s(:send, target, child.children[1], *params)])
           else
-            return child.updated(:send, [*child.children[0..1], *params])
+            return child.updated(:send, [target, child.children[1], *params])
           end
         end
 
@@ -952,7 +1121,7 @@ module Ruby2JS
           block = s(:block, s(:send, nil, :proc), s(:args),
             *node.children[2..-1])
           return on_send node.children.first.updated(:send,
-            [nil, ReactFragment, block])
+            [nil, :"_#{@react}.Fragment", block])
 
         elsif !@jsx and child.children[0] == nil and child.children[1] =~ /^_\w/
           if node.children[1].children.empty?
@@ -998,13 +1167,17 @@ module Ruby2JS
       # convert global variables to refs
       def on_gvar(node)
         return super unless @reactClass
+        return super if @reactClass == :hook
         s(:attr, s(:attr, s(:self), :refs), node.children.first.to_s[1..-1])
       end
 
       # convert instance variables to state
       def on_ivar(node)
         return super unless @reactClass
-        if @reactMethod and @reactIvars[:capture].include? node.children.first
+
+        if @reactClass == :hook
+          node.updated(:lvar, [node.children.first.to_s[1..-1]])
+        elsif @reactMethod and @reactIvars[:capture].include? node.children.first
           node.updated(:lvar, ["$#{node.children.first[1..-1]}"])
         else
           node.updated(:attr, [s(:attr, s(:self), :state),
@@ -1016,11 +1189,17 @@ module Ruby2JS
       def on_ivasgn(node)
         return super unless @react
 
+        if @reactClass == :hook
+          var = node.children.first.to_s[1..-1]
+          return node.updated(:send, [nil, 'set' + var[0].upcase + var[1..-1],
+            process(node.children.last)])
+        end
+
         if @reactMethod and @reactIvars[:capture].include? node.children.first
           ivar = node.children.first.to_s
           if @reactBlock
             return s(:send, s(:self), :setState, s(:hash, s(:pair,
-              s(:lvar, ivar[1..-1]), process(s(:lvasgn, "$#{ivar[1..-1]}",
+              s(:str, ivar[1..-1]), process(s(:lvasgn, "$#{ivar[1..-1]}",
               *node.children[1..-1])))))
           else
             return s(:lvasgn, "$#{ivar[1..-1]}",
@@ -1072,10 +1251,14 @@ module Ruby2JS
         return super unless @react
         return super unless node.children.first.type == :ivasgn
         var = node.children.first.children.first
-        if @reactMethod and @reactIvars[:capture].include? var
+        if @reactClass == :hook
+          var = node.children.first.children.first.to_s[1..-1]
+          node.updated(:send, [nil, 'set' + var[0].upcase + var[1..-1],
+            s(:send, s(:lvar, var), *node.children[1..-1])])
+        elsif @reactMethod and @reactIvars[:capture].include? var
           if @reactBlock
             s(:send, s(:self), :setState, s(:hash, s(:pair,
-              s(:lvar, var[1..-1]), process(s(node.type,
+              s(:str, var[1..-1]), process(s(node.type,
               s(:lvasgn, "$#{var[1..-1]}"), *node.children[1..-1])))))
           else
             process s(node.type, s(:lvasgn, "$#{var[1..-1]}"),
@@ -1118,9 +1301,13 @@ module Ruby2JS
           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 Preact.h
+          return true if node.children[1] == :h and
+            node.children[0] == s(:const, nil, :Preact)
+
+          # explicit call to h
+          return true if node.children[1] == :h and
+            node.children[0] == nil
         end
 
         # wunderbar style call
@@ -1256,6 +1443,7 @@ module Ruby2JS
           @reactIvars = {pre: [], post: [], asgn: [], ref: [], cond: []}
           react_walk(node.children.last)
           @reactIvars[:capture] = (@reactIvars[:pre] + @reactIvars[:post]).uniq
+          @reactIvars[:pre] = @reactIvars[:post] = [] if @reactClass == :hook
           node = super
           block = react_process_ivars([node.children.last.dup])
           node.updated(nil, [*node.children[0..-2], s(:begin, *block)])
@@ -1280,7 +1468,7 @@ module Ruby2JS
         # update ivars that are set and later referenced
         unless @reactIvars[:post].empty?
           updates = @reactIvars[:post].uniq.sort.reverse.map do |ivar|
-            s(:pair, s(:lvar, ivar.to_s[1..-1]),
+            s(:pair, s(:str, ivar.to_s[1..-1]),
               s(:lvar, "$#{ivar.to_s[1..-1]}"))
           end
           update = s(:send, s(:self), :setState, s(:hash, *updates))