|
| 1 | +#### Notes on how component names are looked up |
| 2 | + |
| 3 | +Given: |
| 4 | + |
| 5 | +```ruby |
| 6 | + |
| 7 | +class Blat < React::Component::Base |
| 8 | + |
| 9 | + render do |
| 10 | + Bar() |
| 11 | + Foo::Bar() |
| 12 | + end |
| 13 | + |
| 14 | +end |
| 15 | + |
| 16 | +class Bar < React::Component::Base |
| 17 | +end |
| 18 | + |
| 19 | +module Foo |
| 20 | + |
| 21 | + class Bar < React::Component::Base |
| 22 | + |
| 23 | + render do |
| 24 | + Blat() |
| 25 | + Baz() |
| 26 | + end |
| 27 | + end |
| 28 | + |
| 29 | + class Baz < React::Component::Base |
| 30 | + end |
| 31 | + |
| 32 | +end |
| 33 | +``` |
| 34 | + |
| 35 | +The problem is that method lookup is different than constant lookup. We can prove it by running this code: |
| 36 | + |
| 37 | +```ruby |
| 38 | +def try_it(test, &block) |
| 39 | + puts "trying #{test}" |
| 40 | + result = yield |
| 41 | + puts "success#{': '+result.to_s if result}" |
| 42 | +rescue Exception => e |
| 43 | + puts "failed: #{e}" |
| 44 | +ensure |
| 45 | + puts "---------------------------------" |
| 46 | +end |
| 47 | + |
| 48 | +module Boom |
| 49 | + |
| 50 | + Bar = 12 |
| 51 | + |
| 52 | + def self.Bar |
| 53 | + puts " Boom::Bar says hi" |
| 54 | + end |
| 55 | + |
| 56 | + class Baz |
| 57 | + def doit |
| 58 | + try_it("Bar()") { Bar() } |
| 59 | + try_it("Boom::Bar()") {Boom::Bar()} |
| 60 | + try_it("Bar") { Bar } |
| 61 | + try_it("Boom::Bar") { Boom::Bar } |
| 62 | + end |
| 63 | + end |
| 64 | +end |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +Boom::Baz.new.doit |
| 69 | +``` |
| 70 | + |
| 71 | +which prints: |
| 72 | + |
| 73 | +```text |
| 74 | +trying Bar() |
| 75 | +failed: Bar: undefined method `Bar' for #<Boom::Baz:0x774> |
| 76 | +--------------------------------- |
| 77 | +trying Boom::Bar() |
| 78 | + Boom::Bar says hi |
| 79 | +success |
| 80 | +--------------------------------- |
| 81 | +trying Bar |
| 82 | +success: 12 |
| 83 | +--------------------------------- |
| 84 | +trying Boom::Bar |
| 85 | +success: 12 |
| 86 | +--------------------------------- |
| 87 | +``` |
| 88 | + |
| 89 | +[try-it](http://opalrb.org/try/?code:def%20try_it(test%2C%20%26block)%0A%20%20puts%20%22trying%20%23%7Btest%7D%22%0A%20%20result%20%3D%20yield%0A%20%20puts%20%22success%23%7B%27%3A%20%27%2Bresult.to_s%20if%20result%7D%22%0Arescue%20Exception%20%3D%3E%20e%0A%20%20puts%20%22failed%3A%20%23%7Be%7D%22%0Aensure%0A%20%20puts%20%22---------------------------------%22%0Aend%0A%0Amodule%20Boom%0A%20%20%0A%20%20Bar%20%3D%2012%0A%20%20%0A%20%20def%20self.Bar%0A%20%20%20%20puts%20%22%20%20%20Boom%3A%3ABar%20says%20hi%22%0A%20%20end%0A%0A%20%20class%20Baz%0A%20%20%20%20def%20doit%0A%20%20%20%20%20%20try_it(%22Bar()%22)%20%7B%20Bar()%20%7D%0A%20%20%20%20%20%20try_it(%22Boom%3A%3ABar()%22)%20%7BBoom%3A%3ABar()%7D%0A%20%20%20%20%20%20try_it(%22Bar%22)%20%7B%20Bar%20%7D%0A%20%20%20%20%20%20try_it(%22Boom%3A%3ABar%22)%20%7B%20Boom%3A%3ABar%20%7D%0A%20%20%20%20end%0A%20%20end%0Aend%0A%20%20%0A%0A%0ABoom%3A%3ABaz.new.doit) |
| 90 | + |
| 91 | + |
| 92 | +What we need to do is: |
| 93 | + |
| 94 | +1. when defining a component class `Foo`, also define in the same scope that Foo is being defined a method `self.Foo` that will accept Foo's params and child block, and render it. |
| 95 | + |
| 96 | +2. As long as a name is qualified with at least one scope (i.e. `ModName::Foo()`) everything will work out, but if we say just `Foo()` then the only way I believe out of this is to handle it via method_missing, and let method_missing do a const_get on the method_name (which will return the class) and then render that component. |
| 97 | + |
| 98 | +#### details |
| 99 | + |
| 100 | +To define `self.Foo` in the same scope level as the class `Foo`, we need code like this: |
| 101 | + |
| 102 | +```ruby |
| 103 | +def register_component_dsl_method(component) |
| 104 | + split_name = component.name && component.name.split('::') |
| 105 | + return unless split_name && split_name.length > 2 |
| 106 | + component_name = split_name.last |
| 107 | + parent = split_name.inject([Module]) { |nesting, next_const| nesting + [nesting.last.const_get(next_const)] }[-2] |
| 108 | + class << parent |
| 109 | + define_method component_name do |*args, &block| |
| 110 | + React::RenderingContext.render(name, *args, &block) |
| 111 | + end |
| 112 | + define_method "#{component_name}_as_node" do |*args, &block| |
| 113 | + React::Component.deprecation_warning("..._as_node is deprecated. Render component and then use the .node method instead") |
| 114 | + send(component_name, *args, &block).node |
| 115 | + end |
| 116 | + end |
| 117 | +end |
| 118 | + |
| 119 | +module React |
| 120 | + module Component |
| 121 | + def self.included(base) |
| 122 | + ... |
| 123 | + register_component_dsl_method(base.name) |
| 124 | + end |
| 125 | + end |
| 126 | +end |
| 127 | +``` |
| 128 | + |
| 129 | +The component's method_missing function will look like this: |
| 130 | + |
| 131 | +```ruby |
| 132 | +def method_missing(name, *args, &block) |
| 133 | + if name =~ /_as_node$/ |
| 134 | + React::Component.deprecation_warning("..._as_node is deprecated. Render component and then use the .node method instead") |
| 135 | + method_missing(name.gsub(/_as_node$/,""), *args, &block).node |
| 136 | + else |
| 137 | + component = const_get name if defined? name |
| 138 | + React::RenderingContext.render(nil, component, *args, &block) |
| 139 | + end |
| 140 | +end |
| 141 | +``` |
| 142 | + |
| 143 | +### other related issues |
| 144 | + |
| 145 | +The Kernel#p method conflicts with the <p> tag. However the p method can be invoked on any object so we are going to go ahead and use it, and deprecate the para method. |
0 commit comments