Create a simple editor #47

mangolang · May 13, 2018 · f3a932f · f3a932f
1 parent 4098b1b
commit f3a932f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 6 deletions.
diff --git a/Web.toml b/Web.toml
@@ -6,7 +6,7 @@ minimum-version = "0.6.0"
 
 [target.wasm32-unknown-emscripten]
 prepend-js = ["src/mango/ui/webi/static/prepend-general.js", "src/mango/ui/webi/static/prepend-emscripten.js"]
-link-args = ["-s", "USE_SDL=2", "-s", "EXPORTED_FUNCTIONS=['_compile_string']"]
+link-args = ["-s", "USE_SDL=2", "-s", "EXPORTED_FUNCTIONS=['_compile_string_to_wat']", "-s", "EXTRA_EXPORTED_RUNTIME_METHODS=['cwrap','addOnInit']"]
 
 ## You can also specify the target by its full name.
 #[target.wasm32-unknown-unknown]

diff --git a/src/mango/ui/webi/compile_str.rs b/src/mango/ui/webi/compile_str.rs
@@ -13,7 +13,7 @@ fn str_from_rust(internal_str: String) -> *mut c_char {
 }
 
 #[no_mangle]
-pub fn compile_string(codechrs: *const c_char) -> *mut c_char {
+pub fn compile_string_to_wat(codechrs: *const c_char) -> *mut c_char {
     let code = str_to_rust(codechrs);
     // TODO
     println!("compiling {}", code);

diff --git a/src/mango/ui/webi/mod.rs b/src/mango/ui/webi/mod.rs
@@ -1,2 +1,2 @@
 pub mod compile_str;
-pub use self::compile_str::compile_string;
+pub use self::compile_str::compile_string_to_wat;
diff --git a/static/index.html b/static/index.html
@@ -1,9 +1,33 @@
+
+<!-- TODO: NOTICE: -->
+<!-- TODO: This is a simple wasm demo of the compiler. -->
+<!-- TODO: The 'real' version should be in github.com/mangolang/website. -->
+
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" name="viewport" />
+    <style type="text/css" media="screen">
+        body {
+            background-color: orange;
+        }
+        #content {
+            background-color: #EEE;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        #editor {
+            width: 100%;
+            height: 600px;
+        }
+        #output {
+            background-color: #DDD;
+            border: 1px solid black;
+            min-height: 150px;
+        }
+    </style>
     <script>
         var Module = {};
         var __cargo_web = {};
@@ -23,9 +47,38 @@
     </script>
 </head>
 <body>
+    <main>
+        <section id="content">
+            <h1>Mango (wasm)</h1>
+            <div id="editor">// Type your Mango code here!
+
+</div>
+            <button onclick="alert('not implemented');">Compile to wat</button>
+            <button onclick="alert('not implemented');">Compile to wasm</button>
+            <button onclick="alert('not implemented');">Compile and run</button>
+            <div id="output"></div>
+        </section>
+    </main>
+
+    <!-- Editor -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/theme-crimson_editor.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/mode-javascript.js"></script>
+
+    <script>
+        let editor = ace.edit("editor");
+        editor.setTheme("ace/theme/crimson_editor");
+        editor.session.setMode("ace/mode/javascript");
+        editor.resize();
+    </script>
+
+     <!--Wasm Mango compiler-->
     <script src="mango.js"></script>
-	<script>
-
-	</script>
+    <script type="text/javascript">
+        Module.addOnInit(function () {
+            let code = Module.cwrap('compile_string', 'string', ['string']);
+        });
+    </script>
 </body>
 </html>