compiling on change

Barrie Hadfield · Barrie Hadfield · commit be7ddabfd3fd · 2017-02-06T15:06:32.000Z
diff --git a/source/_components.html.erb b/source/_components.html.erb
@@ -1,34 +1,31 @@
 <script type="text/ruby">
 
-class CodeEditor < React::Component::Base
-
-  define_state :code, type: String
-
+class CodeMirror < React::Component::Base
+  param :code, type: String
+  define_state :output_code
   before_mount do
-    state.code! "I am the code"
+    state.output_code! params.code
   end
-
-  render do
-    div.row do
-      div.col_md_6 { code_card }
-      div.col_md_6 { result_card }
-    end
+  after_mount do
+    @editor = `CodeMirror(document.getElementById("code"), {
+      value: #{params.code},
+      mode: "text/x-ruby",
+      matchBrackets: true,
+      lineNumbers: true,
+      indentUnit: 2,
+      theme: 'github'
+    });`
+    `#{@editor}.on('change', #{lambda {on_change} })`
   end
-
-  def code_card
-    div.card_block do
-      input(type: :text, value: state.code, placeholder: "placeholder"
-      ).on(:change) do |e|
-        state.code! e.target.value
-      end
-    end
+  render(DIV) do
+    div(id: 'code')
+    p { state.output_code }
   end
 
-  def result_card
-    div.card_block do
-      p { state.code }
-    end
+  def on_change
+    state.output_code! Opal.compile `#{@editor}.getValue()`
   end
+
 end
 
 class TestApp < React::Component::Base
diff --git a/source/index.html.md.erb b/source/index.html.md.erb
@@ -1,6 +1,15 @@
-<div data-reactrb-mount="CodeEditor"></div>
+<div data-reactrb-mount="CodeMirror" data-code="class TestApp < React::Component::Base
+  param :name
+  before_mount { @timer = every(1) { force_update! } }
+  render(DIV) do
+    h1 {'The current time is #{Time.now}'}
+    h2 { 'here hello #{params.name}' }.on(:click) do
+     alert 'you clicked'
+    end
+  end
+end"></div>
 
-<form><textarea id="code" name="code">
+<!-- <form><textarea id="code" name="code">
 class TestApp < React::Component::Base
   param :name
   before_mount { @timer = every(1) { force_update! } }
@@ -11,17 +20,31 @@ class TestApp < React::Component::Base
     end
   end
 end
-</textarea></form>
+</textarea></form> -->
+
+<!-- <div id="code"> </div> -->
 
-<script>
+<!-- <script>
   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     mode: "text/x-ruby",
     matchBrackets: true,
     lineNumbers: true,
     indentUnit: 2,
     theme: 'github'
   });
-</script>
+</script> -->
+
+<!-- <script>
+var myCodeMirror = CodeMirror(document.getElementById("code"), {
+  value: "puts 'hello'",
+  mode: "text/x-ruby",
+  matchBrackets: true,
+  lineNumbers: true,
+  indentUnit: 2,
+  theme: 'github'
+});
+</script> -->
+
 
 <br>
 
diff --git a/source/stylesheets/override.css b/source/stylesheets/override.css
@@ -2,11 +2,6 @@
 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
 .cm-s-default span.cm-arrow { color: red; }
 
-/*table.rouge-table.tr {
-  background-color: blue;
-  border: 0px;
-}*/
-
 
 .page-header {
   color: #fff;
