Finalize Dockerfile

Added Cheerp logo

Separate dev and build webpack configs

Add vue hotkeys support for ctrl+f9 for compile and ctrl+f10 for run.

Communicate with API to compile to Javascript now.

Auto indent

Dockerfile

     
 RUN apt-get -y install cheerp-core
 
+RUN apt-get -y install python3-pip
 
+RUN mkdir /mnt/work
+
+COPY Pipfile /mnt/work/
+
+WORKDIR /mnt/work
+
+RUN LC_ALL=C.UTF-8 LANG=C.UTF-8 python3 -m pip install pipenv && \
+    LC_ALL=C.UTF-8 LANG=C.UTF-8 python3 -m pipenv install
+
+EXPOSE 5000
+COPY api.py /mnt/work/
+CMD LC_ALL=C.UTF-8 LANG=C.UTF-8 python3 -m pipenv run python api.py
 
-#RUN g++ -v
-#
-#WORKDIR /usr/local/src/
-#
-#RUN git clone https://bitbucket.org/rayburgemeestre/starcry
-#
-#WORKDIR /usr/local/src/starcry/
-#
-#RUN git submodule update --init --recursive
-#
-#RUN echo deb http://apt.llvm.org/artful/ llvm-toolchain-artful-6.0 main >> /etc/apt/sources.list && \
-#    echo deb-src http://apt.llvm.org/artful/ llvm-toolchain-artful-6.0 main >> /etc/apt/sources.list && \
-#    wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key|sudo apt-key add - ; \
-#    apt update -y && \
-#    apt-get install -y clang-6.0 lldb-6.0 lld-6.0
-#
-##RUN bash prepare_ubuntu15.sh initialize
-##RUN bash prepare_ubuntu15.sh crtmpserver
-##RUN bash prepare_ubuntu15.sh v8
-##RUN bash prepare_ubuntu15.sh allegro
-##RUN bash prepare_ubuntu15.sh caf
-##RUN bash prepare_ubuntu15.sh boost
-##RUN bash prepare_ubuntu15.sh benchmarklib
-##RUN bash prepare_ubuntu15.sh fastpfor
-##RUN bash prepare_ubuntu15.sh ffmpeg
-#
-## Use below to run all at once
-#RUN /bin/bash -c "set -euxo pipefail; bash prepare_ubuntu15.sh 2>&1 | tee /tmp/install.log"
-#
-## Use below as sanity check if image is correct
-## TODO: is it using clang now or what??
-#RUN /bin/bash -c "set -euxo pipefail; cmake -DSTATIC=1 -DLIB_PREFIX_DIR=/usr/local/src/starcry . && make -j 8 starcry"
-#
-#WORKDIR /projects/starcry
-#
-#CMD "/bin/bash"

package-lock.json

       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
       "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
-      "dev": true,
       "requires": {
         "debug": "=3.1.0"
       },
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
       "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
     },
+    "vue-shortkey": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vue-shortkey/-/vue-shortkey-3.1.6.tgz",
+      "integrity": "sha512-Nh5cwN86rfNCKINVi16OzN/iVPLvhk1yvVZD8h8E34WlzDRtdm+dngUjfsedz30+Eebbr6c444TmLLIrKqzW9g==",
+      "requires": {
+        "vue": "^2.1.0"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
-    "dev": "webpack-dev-server --config webpack.config.js"
+    "dev": "webpack-dev-server --config webpack-dev.config.js"
   },
   "author": "",
   "license": "ISC",
     "webpack-dev-server": "^3.1.9"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "lodash": "^4.17.11",
     "monaco-editor": "^0.14.3",
     "monaco-editor-webpack-plugin": "^1.5.4",
     "monaco-vim": "0.0.7",
     "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vue-shortkey": "^3.1.6"
   }
 }

src/App.vue

 <template>
-    <div class="columns is-fullheight">
-      <div class="column">
-        <nav class="navbar is-black" role="navigation" aria-label="main navigation">
-          <div class="navbar-brand">
-            <a class="navbar-item" href="https://bulma.io">
-              <img src="dist/cheerp.png" height="28">
-            </a>
+  <div class="columns is-fullheight">
+    <div class="column">
+      <nav class="navbar is-black" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="https://bulma.io">
+            <img src="cheerp.png" height="28">
+          </a>
+
+          <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
 
-            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
-              <span aria-hidden="true"></span>
-              <span aria-hidden="true"></span>
-              <span aria-hidden="true"></span>
+        <div id="navbarBasicExample" class="navbar-menu">
+          <div class="navbar-start">
+            <a class="navbar-item">
+              Home
             </a>
-          </div>
 
-          <div id="navbarBasicExample" class="navbar-menu">
-            <div class="navbar-start">
-              <a class="navbar-item">
-                Home
-              </a>
+            <a class="navbar-item">
+              Documentation
+            </a>
 
-              <a class="navbar-item">
-                Documentation
+            <div class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link">
+                More
               </a>
 
-              <div class="navbar-item has-dropdown is-hoverable">
-                <a class="navbar-link">
-                  More
+              <div class="navbar-dropdown">
+                <a class="navbar-item">
+                  About
+                </a>
+                <a class="navbar-item">
+                  Jobs
+                </a>
+                <a class="navbar-item">
+                  Contact
+                </a>
+                <hr class="navbar-divider">
+                <a class="navbar-item">
+                  Report an issue
                 </a>
-
-                <div class="navbar-dropdown">
-                  <a class="navbar-item">
-                    About
-                  </a>
-                  <a class="navbar-item">
-                    Jobs
-                  </a>
-                  <a class="navbar-item">
-                    Contact
-                  </a>
-                  <hr class="navbar-divider">
-                  <a class="navbar-item">
-                    Report an issue
-                  </a>
-                </div>
               </div>
             </div>
+          </div>
 
-            <div class="navbar-end">
-              <div class="navbar-item">
-                <div class="buttons">
-                  <a class="button is-primary" v-on:click="">
-                    <strong>Compile</strong>
-                  </a>
-                  <a class="button is-light">
-                    Run
-                  </a>
-                </div>
+          <div class="navbar-end">
+            <div class="navbar-item">
+              <div class="buttons">
+                <a class="button is-primary" v-on:click="compile" v-shortkey.once="['ctrl', 'f9']" @shortkey="compile()">
+                  <strong>Compile</strong>
+                </a>
+                <a class="button is-light" v-on:click="run" v-shortkey.once="['ctrl', 'f10']" @shortkey="run()">
+                  Run
+                </a>
               </div>
             </div>
           </div>
-        </nav>
+        </div>
+      </nav>
 
-        <div class="columns is-fullheight">
-          <div class="column">
-            <div class="rows">
-              <div class="row">
+      <div class="columns is-fullheight">
+        <div class="column">
+          <div class="rows">
+            <div class="row">
 
-                <div class="tabs">
-                  <ul>
-                    <li class="is-active"><a>Code editor</a></li>
-                    <li><a>Compiler</a></li>
-                  </ul>
-                </div>
+              <div class="tabs">
+                <ul>
+                  <li class="is-active"><a>Code editor</a></li>
+                  <li><a>Compiler</a></li>
+                </ul>
+              </div>
 
-                <editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh" :vim_mode="vim_mode" />
+              <editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh" :vim_mode="vim_mode" />
 
-              </div>
-              <div class="row">
+            </div>
+            <div class="row">
 
-                <div class="tabs">
-                  <ul>
-                    <li class="is-active"><a>HTML</a></li>
-                  </ul>
-                </div>
-                <editor-component v-model="html_code" name="html" language="html" height="50vh" :vim_mode="vim_mode" />
+              <div class="tabs">
+                <ul>
+                  <li class="is-active"><a>HTML</a></li>
+                </ul>
               </div>
+              <editor-component v-model="html_code" name="html" language="html" height="50vh" :vim_mode="vim_mode" />
             </div>
-
           </div>
-          <div class="column">
-            <div class="rows">
-              <div class="row">
-                <div class="tabs">
-                  <ul>
-                    <li class="is-active"><a>Javascript</a></li>
-                  </ul>
-                </div>
-                <editor-component v-model="js_code" name="js" language="javascript" height="50vh" :vim_mode="vim_mode" />
+
+        </div>
+        <div class="column">
+          <div class="rows">
+            <div class="row">
+              <div class="tabs">
+                <ul>
+                  <li class="is-active"><a>Javascript</a></li>
+                </ul>
               </div>
-              <div class="row">
-                <div class="tabs">
-                  <ul>
-                    <li class="is-active"><a>Compiler output</a></li>
-                    <li><a>Run output</a></li>
-                  </ul>
-                </div>
-                <!--
-                <textarea class="textarea" placeholder="Compiler output will be displayed here."></textarea>
-                -->
-               <iframe src="about:blank" v-on:load="onLoadIframe" name="myIframe"></iframe>
+              <editor-component v-model="js_code" name="js" language="javascript" height="50vh" :vim_mode="vim_mode" />
+            </div>
+            <div class="row">
+              <div class="tabs">
+                <ul>
+                  <li class="is-active"><a>Compiler output</a></li>
+                  <li><a>Run output</a></li>
+                </ul>
               </div>
+              <!--
+              <textarea class="textarea" placeholder="Compiler output will be displayed here."></textarea>
+              -->
+              <iframe src="about:blank" v-on:load="onLoadIframe" name="myIframe"></iframe>
             </div>
           </div>
         </div>
-
-        <!-- for development commented out <script src="main.js"></script> -->
       </div>
+
+      <!-- for development commented out <script src="main.js"></script> -->
     </div>
+  </div>
 </template>
 
 <script>
-import EditorComponent from './components/EditorComponent.vue'
-const _ = require('lodash');
+    import EditorComponent from './components/EditorComponent.vue'
+    const _ = require('lodash');
+    const axios = require('axios');
 
-const cpp_code = `
+    const cpp_code = `
 #include <cheerp/client.h>
 #include <cheerp/clientlib.h>
 
     changeTitle("Literal C++ string");
 }`.trim();
 
-const html_code = `
+    const html_code = `
 <!DOCTYPE html>
 <html lang="en">
   <head>
   </body>
 </html>`.trim();
 
-const js_code = `
+    const js_code = `
 "use strict";
 /*Compiled using Cheerp (R) by Leaning Technologies Ltd*/
 var aSlot=null;var oSlot=0;var nullArray=[null];var nullObj={d:nullArray,o:0};
 var _$pstr1=new Uint8Array([76,105,116,101,114,97,108,32,67,43,43,32,115,116,114,105,110,103,0]);
 __Z7webMainv();`.trim();
 
-function findIframeByName(name) {
-  return _.find(window.frames, frame => frame.name === name);
-}
-
-export default {
-  props: {
-    vim_mode: {
-        type: Boolean,
-        default: true
-    },
-    cpp_code: {
-        type: String,
-        default: cpp_code,
-    },
-    html_code: {
-        type: String,
-        default: html_code,
-    },
-    js_code: {
-        type: String,
-        default: js_code,
+    function findIframeByName(name) {
+        return _.find(window.frames, frame => frame.name === name);
     }
-  },
-  components: {
-    EditorComponent
-  },
-  methods: {
-    update_iframe(name) {
-      const iframe = findIframeByName(name);
-      iframe.document.body.innerHTML = '';
-      iframe.document.write(this.html_code);
-      iframe.document.write("<script>");
-      iframe.document.write(this.js_code);
-      iframe.document.write("<\/script>");
-    },
-    onLoadIframe(event) {
-      // iframe ready
-      this.update_iframe(event.currentTarget.name);
+
+    export default {
+        props: {
+            vim_mode: {
+                type: Boolean,
+                default: true
+            },
+            cpp_code: {
+                type: String,
+                default: cpp_code,
+            },
+            html_code: {
+                type: String,
+                default: html_code,
+            },
+            js_code: {
+                type: String,
+                // default: js_code,
+            }
+        },
+        components: {
+            EditorComponent
+        },
+        methods: {
+            update_iframe(name) {
+                const iframe = findIframeByName(name);
+                iframe.document.body.innerHTML = '';
+                iframe.document.write(this.html_code);
+                iframe.document.write("<script>");
+                iframe.document.write(this.js_code);
+                iframe.document.write("<\/script>");
+            },
+            onLoadIframe(event) {
+                // iframe ready, set flag?
+            },
+            compile() {
+                axios.post('//localhost:5000/compile', {
+                    flags: '',
+                    source: this.cpp_code
+                })
+                    .then(function (response) {
+                        // response.data.retcode
+                        // response.data.stdout
+                        // response.data.stderr
+                        this.js_code = response.data.javascript;
+                    }.bind(this))
+                    .catch(function (error) {
+                        console.log(error);
+                    });
+            },
+            run() {
+                console.log('running..');
+                this.update_iframe('myIframe');
+            },
+        },
+        watch: {
+            html_code(new_val) {
+            },
+            cpp_code(new_val) {
+            },
+            js_code(new_val) {
+            },
+        }
     }
-  },
-  watch: {
-    html_code(new_val) {
-      this.update_iframe('myIframe');
-    },
-    cpp_code(new_val) {
-    },
-    js_code(new_val) {
-      this.update_iframe('myIframe');
-    },
-  }
-}
 </script>
 
 <style scoped>
-.full-width {
+  .full-width {
     width: 100%;
-}
-.center-content {
+  }
+  .center-content {
     display: flex;
     justify-content: center;
     align-items: center;
-}
+  }
 </style>

src/components/EditorComponent.vue

 </template>
 
 <script>
-import { initVimMode } from 'monaco-vim';
-export default {
-  props: {
-    vim_mode: {
-      type: Boolean,
-      required: true
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    value: {
-      type: String,
-      required: false
-    },
-    language: {
-      type: String,
-      required: false
-    },
-    height: {
-      type: String,
-      required: true
-    }
-  },
-  mounted() {
-    this.editor = monaco.editor.create(document.getElementById(this.name), {
-      value: this.value,
-      language: this.language,
-      automaticLayout: true
-    });
+    import { initVimMode } from 'monaco-vim';
+    export default {
+        props: {
+            vim_mode: {
+                type: Boolean,
+                required: true
+            },
+            name: {
+                type: String,
+                required: true
+            },
+            value: {
+                type: String,
+                required: false
+            },
+            language: {
+                type: String,
+                required: false
+            },
+            height: {
+                type: String,
+                required: true
+            }
+        },
+        mounted() {
+            this.editor = monaco.editor.create(document.getElementById(this.name), {
+                value: this.value,
+                language: this.language,
+                automaticLayout: true
+            });
 
-    this.editor.onDidChangeModelContent(event => {
-      const value = this.editor.getValue()
-      if (this.value !== value) {
-        this.$emit('input', value, event)
-      }
-    });
+            this.editor.onDidChangeModelContent(event => {
+                const value = this.editor.getValue()
+                if (this.value !== value) {
+                    this.$emit('input', value, event)
+                }
+            });
 
-    this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
-  },
-  watch: {
-    value(new_val) {
-      if (this.editor) {
-        if (new_val !== this.editor.getValue()) {
-          this.editor.setValue(new_val)
-          this.$emit('input', new_val);
+            this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
+        },
+        watch: {
+            value(new_val) {
+                if (this.editor) {
+                    if (new_val !== this.editor.getValue()) {
+                        this.editor.setValue(new_val)
+                        this.$emit('input', new_val);
+                    }
+                }
+            },
+            vim_mode(new_val) {
+                if (new_val) {
+                    this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
+                } else {
+                    this.vimMode_1.dispose();
+                    document.getElementById(this.name + "_status").innerHTML = '';
+                }
+            }
         }
-      }
-    },
-    vim_mode(new_val) {
-      if (new_val) {
-        this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
-      } else {
-        this.vimMode_1.dispose();
-        document.getElementById(this.name + "_status").innerHTML = '';
-      }
     }
-  }
-}
 </script>
 
 <style scoped>
-.container {
-  width: calc(100vh - ( 6rem) );
-}
+  .container {
+    width: calc(50vw - ( 6rem) );
+  }
 </style>

src/index.js

 
 if (!window.included) {
     window.included = true;
+    Vue.use(require('vue-shortkey'))
     new Vue({
         el: '#app',
         render: h => h(App)

webpack-dev.config.js

+const path = require('path');
+const webpack = require('webpack');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const { VueLoaderPlugin } = require('vue-loader');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    mode: 'development', // change to production when ready
+
+    devServer: {
+        hot: true,
+        watchOptions: {
+            poll: true
+        }
+    },
+
+    entry: './src/index.js',
+    output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        'css-loader',
+                        'sass-loader'
+                    ]
+                })
+            },
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'style-loader', 'css-loader']
+            },
+            {
+                test: /\.vue$/,
+                use: 'vue-loader'
+            }
+        ]
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(), // for development
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'dist/index.html',
+            inject: true
+        }), // for development
+        new MonacoWebpackPlugin(),
+        new ExtractTextPlugin('css/mystyles.css'),
+        new VueLoaderPlugin()
+    ]
+};
+

webpack.config.js

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-    mode: 'development', // change to production when ready
-
-    devServer: {
-        hot: true,
-        watchOptions: {
-            poll: true
-        }
-    },
-
+    mode: 'production',
     entry: './src/index.js',
     output: {
         filename: 'main.js',
         ]
     },
     plugins: [
-        new webpack.HotModuleReplacementPlugin(), // for development
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: 'dist/index.html',
-            inject: true
-        }), // for development
         new MonacoWebpackPlugin(),
         new ExtractTextPlugin('css/mystyles.css'),
         new VueLoaderPlugin()