getting there

Barrie Hadfield · Barrie Hadfield · commit e41c2535a9cd · 2017-02-06T16:47:53.000Z
diff --git a/source/_components.html.erb b/source/_components.html.erb
@@ -2,12 +2,12 @@
 
 class CodeMirror < React::Component::Base
   param :code, type: String
-  define_state :output_code
   define_state :error_message
+
   before_mount do
-    state.output_code! params.code
     state.error_message! ""
   end
+
   after_mount do
     @editor = `CodeMirror(document.getElementById("code"), {
       value: #{params.code},
@@ -18,23 +18,32 @@ class CodeMirror < React::Component::Base
       theme: 'github'
     });`
     `#{@editor}.on('change', #{lambda {on_change} })`
+    execute_code
   end
+
   render(DIV) do
     div(id: 'code')
+    br
+    div(id: 'result')
     p { state.error_message }
-    p { state.output_code }
   end
 
   def on_change
     state.error_message! ""
-    compiled_code = Opal.compile `#{@editor}.getValue()`
-    state.output_code! compiled_code
+    execute_code
+  end
+
+  after_mount   :execute_code
+  after_update  :execute_code
+
+  def execute_code
+    compiled_code = Opal::Compiler.new(`#{@editor}.getValue()`).compile
+    `ReactDOM.unmountComponentAtNode(document.getElementById("result"));`
     `eval(#{compiled_code})`
+    Element['#result'].render{ Alfie() }
     rescue Exception => e
     @time_out = after(0.5) do
-      # Element[mount_node].render { div.playgroundError { e.message } }
       state.error_message! e.message
-      state.output_code! ""
     end
   end
 
diff --git a/source/index.html.md.erb b/source/index.html.md.erb
@@ -1,13 +1,13 @@
-<div data-reactrb-mount="CodeMirror" data-code="class TestApp < React::Component::Base
-  param :name
-  before_mount { @timer = every(1) { force_update! } }
+<div data-reactrb-mount="CodeMirror" data-code="class Alfie < React::Component::Base
   render(DIV) do
-    h1 {'The current time is #{Time.now}'}
-    h2 { 'here hello #{params.name}' }.on(:click) do
+    h1 { 'Alfie is here' }.on(:click) do
      alert 'you clicked'
     end
   end
-end"></div>
+end
+"></div>
+
+<!-- Element['#playground'].render{ Alfie() } -->
 
 <!-- <form><textarea id="code" name="code">
 class TestApp < React::Component::Base
