rayburgemeestre
/
cheerpweb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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
master
Ray Burgemeestre 6 years ago
parent
4b51fd0893
commit
cb7ccc4774
9 changed files with 319 additions and 266 deletions
Split View Show Diff Stats
  1. +13
    -36
      Dockerfile
  2. BIN
      dist/cheerp.png
  3. +19
    -6
      package-lock.json
  4. +4
    -2
      package.json
  5. +166
    -149
      src/App.vue
  6. +58
    -58
      src/components/EditorComponent.vue
  7. +1
    -0
      src/index.js
  8. +57
    -0
      webpack-dev.config.js
  9. +1
    -15
      webpack.config.js

+ 13
- 36
Dockerfile View File

@@ -9,41 +9,18 @@ RUN apt-get update && \
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"

BIN
dist/cheerp.png View File

Before After
Width: 1024  |  Height: 287  |  Size: 12KB

+ 19
- 6
package-lock.json View File

@@ -473,6 +473,15 @@
"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",
@@ -2153,7 +2162,6 @@
"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"
},
@@ -2162,7 +2170,6 @@
"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"
}
@@ -3574,8 +3581,7 @@
"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",
@@ -4342,8 +4348,7 @@
"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",
@@ -6853,6 +6858,14 @@
"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",

+ 4
- 2
package.json View File

@@ -6,7 +6,7 @@
"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",
@@ -26,11 +26,13 @@
"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"
}
}

+ 166
- 149
src/App.vue View File

@@ -1,130 +1,131 @@
<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>

@@ -147,7 +148,7 @@ void webMain()
changeTitle("Literal C++ string");
}`.trim();

const html_code = `
const html_code = `
<!DOCTYPE html>
<html lang="en">
<head>
@@ -168,7 +169,7 @@ const html_code = `
</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};
@@ -205,66 +206,82 @@ var _$pstr=new Uint8Array([112,97,103,101,116,105,116,108,101,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>

+ 58
- 58
src/components/EditorComponent.vue View File

@@ -11,69 +11,69 @@
</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>

+ 1
- 0
src/index.js View File

@@ -4,6 +4,7 @@ import App from './App.vue'

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

+ 57
- 0
webpack-dev.config.js View File

@@ -0,0 +1,57 @@
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()
]
};


+ 1
- 15
webpack.config.js View File

@@ -6,15 +6,7 @@ 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
}
},

mode: 'production',
entry: './src/index.js',
output: {
filename: 'main.js',
@@ -43,12 +35,6 @@ module.exports = {
]
},
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()

Write Preview
Loading…
Cancel
Save