Module: Ruby2JS::Filter::React

Includes:
SEXP
Defined in:
lib/ruby2js/filter/react.rb

Instance Method Summary collapse

Methods included from SEXP

#s

Instance Method Details

#on_block(node) ⇒ Object

convert blocks to proc arguments



363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
 
# File 'lib/ruby2js/filter/react.rb', line 363

def on_block(node)
  if not @react
    # enable React filtering on React component calls
    if 
      node.children[0].children[0] == nil and 
      node.children[0].children[1] =~ /^_[A-Z]/
    then
      begin
        @react = true
        return on_block(node)
      ensure
        @react = false
      end
    end
  end

  return super unless @react

  # traverse through potential "css proxy" style method calls
  child = node.children.first
  test = child.children.first
  while test and test.type == :send and not test.is_method?
    child, test = test, test.children.first
  end

  # iterate over Enumerable arguments if (a) node is a createElement
  # type of call, and (b) there are args present
  if
    child.children[0] == nil and child.children[1] =~ /^_/ and
    not node.children[1].children.empty?
  then
    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]))
  end

  # append block as a standalone proc to wunderbar style method call
  if child.children[0] == nil and child.children[1] =~ /^_\w/
    block = s(:block, s(:send, nil, :proc), s(:args),
      *node.children[2..-1])
    return on_send s(:send, *node.children.first.children, block)
  end

  super
end

#on_class(node) ⇒ Object

Example conversion before:

(class (const nil :Foo) (const nil :React) nil)

after:

(casgn nil :foo, (send :React :createClass (hash (sym :displayName)
  (:str, "Foo"))))



30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'lib/ruby2js/filter/react.rb', line 30

def on_class(node)
  cname, inheritance, *body = node.children
  return super unless cname.children.first == nil
  return super unless inheritance == s(:const, nil, :React)

  # traverse down to actual list of class statements
  if body.length == 1 
    if not body.first
      body = []
    elsif body.first.type == :begin
      body = body.first.children 
    end
  end

  # abort conversion unless all body statements are method definitions
  return super unless body.all? {|child| child.type == :def}

  begin
    react, @react = @react, true
    reactClass, @reactClass = @reactClass, true

    # automatically capture the displayName for the class
    pairs = [s(:pair, s(:sym, :displayName), 
      s(:str, cname.children.last.to_s))]

    # add a proc/function for each method
    body.each do |child|
      mname, args, *block = child.children
      pairs << s(:pair, s(:sym, mname), s(:block, s(:send, nil, :proc), 
        args, process(s((child.is_method? ? :begin : :autoreturn),
        *block))))
    end
  ensure
    @react = react
    @reactClass = reactClass
  end

  # emit a createClass statement
  s(:casgn, nil, cname.children.last, 
    s(:send, inheritance, :createClass, s(:hash, *pairs)))
end

#on_cvar(node) ⇒ Object

convert class variables to props



432
433
434
435
 
# File 'lib/ruby2js/filter/react.rb', line 432

def on_cvar(node)
  return super unless @react
  s(:attr, s(:attr, s(:self), :props), node.children.first.to_s[2..-1])
end

#on_gvar(node) ⇒ Object

convert global variables to refs



412
413
414
415
 
# File 'lib/ruby2js/filter/react.rb', line 412

def on_gvar(node)
  return super unless @reactClass
  s(:attr, s(:attr, s(:self), :refs), node.children.first.to_s[1..-1])
end

#on_ivar(node) ⇒ Object

convert instance variables to state



418
419
420
421
 
# File 'lib/ruby2js/filter/react.rb', line 418

def on_ivar(node)
  return super unless @reactClass
  s(:attr, s(:attr, s(:self), :state), node.children.first.to_s[1..-1])
end

#on_ivasgn(node) ⇒ Object

convert instance variable assignments to setState calls



424
425
426
427
428
429
 
# File 'lib/ruby2js/filter/react.rb', line 424

def on_ivasgn(node)
  return super unless @react
  s(:send, s(:self), :setState, s(:hash, s(:pair,
    s(:str, node.children.first.to_s[1..-1]),
    process(node.children.last))))
end

#on_send(node) ⇒ Object 



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
 
# File 'lib/ruby2js/filter/react.rb', line 72

def on_send(node)
  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 == nil and node.children[1] =~ /^_[A-Z]/
    then
      begin
        @react = true
        return on_send(node)
      ensure
        @react = false
      end
    end
  end

  return super unless @react

  if node.children[0] == nil and node.children[1] == :_
    # text nodes
    if @reactApply
      # if apply is set, emit code that pushes text
      s(:send, s(:gvar, :$_), :push, node.children[2])
    else
      # simple/normal case: simply return the text
      node.children[2]
    end

  elsif node.children[0] == nil and node.children[1] =~ /^_\w/
    # map method calls starting with an underscore to React calls
    # to create an element.  
    #
    # input:
    #   _a 'name', href: 'link'
    # output:
    #  React.createElement("a", {href: "link"}, "name")
    #
    tag = node.children[1].to_s[1..-1]
    pairs = []
    text = block = nil
    node.children[2..-1].each do |child|
      if child.type == :hash
        # convert _ to - in attribute names
        pairs += child.children.map do |pair|
          key, value = pair.children
          if key.type == :sym
            s(:pair, s(:str, key.children[0].to_s.gsub('_', '-')), value)
          else
            pair
          end
        end

      elsif child.type == :block
        # :block arguments are inserted by on_block logic below
        block = child

      else
        # everything else added as text
        text = child
      end
    end

    # extract all class names
    classes = pairs.find_all do |pair|
      key = pair.children.first.children.first
      [:class, 'class', :className, 'className'].include? key
    end

    # combine all classes into a single value (or expression)
    if classes.length > 0
      expr = nil
      values = classes.map do |pair|
        if [:sym, :str].include? pair.children.last.type
          pair.children.last.children.first.to_s
        else
          expr = pair.children.last
          ''
        end
      end
      pairs -= classes
      value = s(:str, values.join(' '))
      value = s(:send, value, :+, expr) if expr
      pairs.unshift s(:pair, s(:sym, :className), value)
    end

    # search for the presence of a 'for' attribute
    htmlFor = pairs.find_index do |pair|
      ['for', :for].include? pair.children.first.children.first
    end

    # replace 'for' attribute (if any) with 'htmlFor'
    if htmlFor
      pairs[htmlFor] = s(:pair, s(:sym, :htmlFor),
        pairs[htmlFor].children.last)
    end

    # construct hash (or nil) from pairs
    hash = (pairs.length > 0 ? process(s(:hash, *pairs)) : s(:nil))

    # based on case of tag name, build a HTML tag or React component
    if tag =~ /^[A-Z]/
      params = [s(:const, nil, tag), hash]
    else
      params = [s(:str, tag), hash]
    end

    # handle nested elements
    if block

      # traverse down to actual list of nested statements
      args = block.children[2..-1]
      if args.length == 1 
        if not args.first
          args = []
        elsif args.first.type == :begin
          args = args.first.children 
        end
      end

      # check for normal case: only elements and text
      simple = args.all? do |arg|
        arg = arg.children.first if arg.type == :block
        while arg.type == :send and arg.children.first != nil
          arg = arg.children.first
        end
        arg.type == :send and arg.children[1] =~ /^_/
      end

      begin
        if simple
          # in the normal case, process each argument
          reactApply, @reactApply = @reactApply, false
          params += args.map {|arg| process(arg)}
        else
          reactApply, @reactApply = @reactApply, true

          # collect children and apply.  Intermediate representation
          # will look something like the following:
          #
          #   React.createElement(*proc {
          #     var $_ = ['tag', hash]
          #     $_.push(React.createElement(...))
          #   }())
          #
          # Base Ruby2JS processing will convert the 'splat' to 'apply'
          params = [s(:splat, s(:send, s(:block, s(:send, nil, :proc), 
            s(:args, s(:shadowarg, :$_)), s(:begin, 
            s(:lvasgn, :$_, s(:array, *params)),
            *args.map {|arg| process arg},
            s(:return, s(:lvar, :$_)))), :[]))]
        end
      ensure
        @reactApply = reactApply
      end

    elsif text
      # add text
      params << process(text)
    end

    # trim trailing null if no text or children
    params.pop if params.last == s(:nil)

    # construct element using params
    element = s(:send, s(:const, nil, :React), :createElement, *params)

    if @reactApply
      # if apply is set, emit code that pushes result
      s(:send, s(:gvar, :$_), :push, element)
    else
      # simple/normal case: simply return the element
      element
    end

  # map method calls involving i/g/c vars to straight calls
  #
  # input:
  #   @x.(a,b,c)
  # output:
  #   @x(a,b,c)
  elsif node.children[1] == :call
    if [:ivar, :gvar, :cvar].include? node.children.first.type
      return process(s(:send, node.children.first, nil,
        *node.children[2..-1]))
    else
      return super
    end

  elsif node.children[1] == :~
    # map ~expression.method to $(expression).method

    if node.children[0] and node.children[0].type == :op_asgn
      asgn = node.children[0]
      if asgn.children[0] and asgn.children[0].type == :send
        inner = asgn.children[0]
        return on_send s(:send, s(:send, inner.children[0],
          (inner.children[1].to_s+'=').to_sym,
          s(:send, s(:send, s(:send, inner.children[0], :~),
          *inner.children[1..-1]), *asgn.children[1..-1])), :~)
      else
        return on_send asgn.updated nil, [s(:send, asgn.children[0], :~),
          *asgn.children[1..-1]]
      end
    end

    rewrite_tilda = proc do |node|
      # Example conversion:
      #   before:
      #    (send (send nil :a) :text) :~)
      #   after:
      #    (send (send (gvar :$a), :getDOMNode)), :text)
      if node.type == :send and node.children[0]
        if node.children[1] == :~ and node.children[0].children[1] == :~
          # consecutive tildes
          if node.children[0].children[0].children[1] == :~
            result = node.children[0].children[0].children[0]
          else
            result = s(:attr, node.children[0].children[0], :~)
          end
          s(:attr, s(:attr, process(result), :~), :~)
        else
          # possible getter/setter
          method = node.children[1]
          method = method.to_s.chomp('=') if method =~ /=$/
          rewrite = [rewrite_tilda[node.children[0]], 
            method, *node.children[2..-1]]
          rewrite[1] = node.children[1]
          node.updated nil, rewrite
        end
      elsif node.children.first == nil and Symbol === node.children[1]
        # innermost expression is a scalar
        s(:send, s(:gvar, "$#{node.children[1]}"), :getDOMNode)
      elsif node.type == :lvar
        s(:send, s(:gvar, "$#{node.children[0]}"), :getDOMNode)
      else
        # leave alone
        node
      end
    end

    return process rewrite_tilda[node].children[0]

  elsif node.children[0] and node.children[0].type == :send
    # determine if markaby style class and id names are being used
    child = node
    test = child.children.first
    while test and test.type == :send and not test.is_method?
      child, test = test, test.children.first
    end

    if child.children[0] == nil and child.children[1] =~ /^_\w/
      # capture the arguments provided on the current node
      children = node.children[2..-1]

      # convert method calls to id and class values
      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('_','-')))
        else
          # convert method name to hash {id: name} pair
          pair = s(:pair, s(:sym, :id), 
            s(:str, node.children[1].to_s[0..-2].gsub('_','-')))
        end

        # if a hash argument is already passed, merge in id value
        hash = children.find_index {|node| node.type == :hash}
        if hash
          children[hash] = s(:hash, pair, *children[hash].children)
        else
          children.unshift s(:hash, pair)
        end

        # advance to next node
        node = node.children.first
      end

      # collapse series of method calls into a single call
      return process(s(:send, *node.children[0..1], *children))
    else
      super
    end

  else
    super
  end
end