ruby2js 4.0.1 → 4.1.0

data/lib/ruby2js/filter/react.rb

@@ -26,8 +26,12 @@ 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, '*'))
       }
 
       # the following command can be used to generate ReactAttrs:
@@ -75,7 +79,12 @@ module Ruby2JS
 
       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
@@ -85,7 +94,6 @@ module Ruby2JS
         @react_props = []
         @react_methods = []
         @react_filter_functions = false
-        @react_imports = false
         @jsx = false
         super
       end
@@ -102,15 +110,6 @@ module Ruby2JS
           @react_filter_functions = true
         end
 
-        if \
-          (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
@@ -128,12 +127,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 @react_imports
+          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
@@ -151,12 +161,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))
@@ -166,9 +178,8 @@ 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)])))
@@ -222,7 +233,7 @@ 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?
@@ -240,7 +251,7 @@ module Ruby2JS
           then
             @reactIvars = {pre: [], post: [], asgn: [], ref: [], cond: []}
             react_walk(node)
-            if not es2015 and not @reactIvars.values.flatten.empty?
+            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?
@@ -261,7 +272,7 @@ module Ruby2JS
               (@reactIvars[:pre] + @reactIvars[:post]).uniq
 
             if mname == :initialize
-              mname = es2015 ? :initialize : :getInitialState
+              mname = createClass ? :getInitialState : :initialize 
 
               # extract real list of statements
               if block.length == 1
@@ -343,7 +354,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
 
@@ -369,14 +380,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
@@ -384,38 +395,24 @@ 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))])
+          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?
@@ -433,24 +430,21 @@ 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 @react_imports
+            if modules_enabled?
               prepend_list << REACT_IMPORTS[node.children.first.children.last]
             end
 
             begin
-              react, @react = @react, true
+              react = @react
+              @react = (node.children.first.children.last == :Preact ? :Preact : :React)
               return on_send(node)
             ensure
               @react = react
@@ -471,13 +465,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.
@@ -559,7 +566,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
@@ -569,13 +581,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))))
@@ -588,7 +615,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, :!))))
@@ -596,13 +623,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
 
@@ -664,8 +703,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
@@ -727,8 +772,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
@@ -856,8 +906,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),
@@ -927,8 +982,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
@@ -941,11 +999,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
 
@@ -962,7 +1022,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?
@@ -1030,7 +1090,7 @@ module Ruby2JS
           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]}",
@@ -1085,7 +1145,7 @@ module Ruby2JS
         if @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]}"),
@@ -1128,9 +1188,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
@@ -1290,7 +1354,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))