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

Refactor monaco editor into a vue component.

master
Ray Burgemeestre 6 years ago
parent
a662e02852
commit
5f2c686e4a
8 changed files with 180 additions and 172 deletions
Split View Show Diff Stats
  1. +1
    -1
      dist/index.html
  2. +2
    -1
      package-lock.json
  3. +0
    -1
      package.json
  4. +106
    -24
      src/App.vue
  5. +70
    -0
      src/components/EditorComponent.vue
  6. +0
    -16
      src/components/HelloComponent.vue
  7. +0
    -117
      src/index.js
  8. +1
    -12
      src/mystyles.scss

+ 1
- 1
dist/index.html View File

@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<title>Cheerp C++ to Javascript compiler</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/mystyles.css">
<link href="css/mystyles.css" rel="stylesheet"></head>

+ 2
- 1
package-lock.json View File

@@ -3948,7 +3948,8 @@
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
"dev": true
},
"lodash.assign": {
"version": "4.2.0",

+ 0
- 1
package.json View File

@@ -26,7 +26,6 @@
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"lodash": "^4.17.11",
"monaco-editor": "^0.14.3",
"monaco-editor-webpack-plugin": "^1.5.4",
"monaco-vim": "0.0.7",

+ 106
- 24
src/App.vue View File

@@ -1,9 +1,4 @@
<template>
<!--
<div class="full-width center-content">
<hello-component name="World" />
</div>
-->
<div class="columns is-fullheight">
<div class="column">
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
@@ -55,7 +50,7 @@
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<a class="button is-primary" v-on:click="">
<strong>Compile</strong>
</a>
<a class="button is-light">
@@ -78,12 +73,8 @@
<li><a>Compiler</a></li>
</ul>
</div>
<div id="container_editor_cpp"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_cpp"></span>
</div>

<editor-component name="cpp" language="cpp" height="70vh" :code="cpp_code" :vim_mode="vim_mode" />

</div>
<div class="row">
@@ -93,12 +84,7 @@
<li class="is-active"><a>HTML</a></li>
</ul>
</div>
<div id="container_editor_html"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_html"></span>
</div>

<editor-component name="html" language="html" height="30vh" :code="html_code" :vim_mode="vim_mode" />
</div>
</div>

@@ -111,11 +97,7 @@
<li class="is-active"><a>Javascript</a></li>
</ul>
</div>
<div id="container_editor_javascript"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_javascript"></span>
</div>
<editor-component name="js" language="javascript" height="70vh" :code="js_code" :vim_mode="vim_mode" />
</div>
<div class="row">
<div class="tabs">
@@ -136,10 +118,110 @@
</template>

<script>
import HelloComponent from './components/HelloComponent.vue'
import EditorComponent from './components/EditorComponent.vue'

const cpp_code = `
#include <cheerp/client.h>
#include <cheerp/clientlib.h>

// We need to extend the client namespace to declare our
// custom JavaScript function
namespace client
{
// The name should be the same as the JavaScript one
// The parameters needs to be a const client::String reference
// so that implicit conversion from const char* is supported
void changeTitle(const String& str);
}

using namespace client;

void webMain()
{
Element* titleElement=document.getElementById("pagetitle");
String* oldText=titleElement->get_textContent();
changeTitle("Literal C++ string");
}`.trim();

const html_code = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheerp test</title>
<script defer src="example.js"><\/script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>
<script>
// Use jQuery to make a (trivial) change to the page
function changeTitle(str)
{
$("#pagetitle").text(str);
}
<\/script>
</head>
<body>
<h1 id="pagetitle">Boring static text</h1>
</body>
</html>`.trim();

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};
function __Z7webMainv(){
var LretConstructor=null;
LretConstructor="pagetitle";
LretConstructor=document.getElementById(LretConstructor);
LretConstructor.textContent;
LretConstructor="Literal C++ string";
changeTitle(LretConstructor);
return;
}
function _cheerpCreate_ZN6client6StringC2EPKc(Larg0,Marg0){
var tmp0=0,Lgeptoindexphi=0,LretConstructor$pi=null,tmp3=null;
LretConstructor$pi=String();
tmp0=Larg0[Marg0]|0;
if((tmp0&255)===0){
return String(LretConstructor$pi);
}else{
Lgeptoindexphi=0;
}
while(1){
tmp3=String.fromCharCode(tmp0<<24>>24);
LretConstructor$pi=LretConstructor$pi.concat(tmp3);
Lgeptoindexphi=Lgeptoindexphi+1|0;
tmp0=Larg0[Marg0+Lgeptoindexphi|0]|0;
if((tmp0&255)===0){
break;
}
}
return String(LretConstructor$pi);
}
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();

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: {
HelloComponent
EditorComponent
}
}
</script>

+ 70
- 0
src/components/EditorComponent.vue View File

@@ -0,0 +1,70 @@
<template>
<div>
<div class="container" :id="name" :style="{'height': `calc(${height} - ( 8rem) )`}"></div>
<div class="tags has-addons">
<span class="tag"><label class="checkbox">
<input type="checkbox" v-model="vim_mode">VIM</label>
</span>
<span class="tag is-primary" :id="`${name}_status`"></span>
</div>
</div>
</template>

<script>
import { initVimMode } from 'monaco-vim';
export default {
props: {
vim_mode: {
type: Boolean,
required: true
},
name: {
type: String,
required: true
},
code: {
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.code,
language: this.language,
automaticLayout: true
});
this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
},
watch: {
code(new_val) {
if (this.editor) {
if (new_val !== this.editor.getValue()) {
this.editor.setValue(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 = '';
}
}
}
}
</script>

<style scoped>
.container {
width: calc(100vh - ( 6rem) );
}
</style>

+ 0
- 16
src/components/HelloComponent.vue View File

@@ -1,16 +0,0 @@
<template>
<h1>Hello {{ name }}!</h1>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
}
</script>
<style scoped>
h1 { color: red; }
</style>

+ 0
- 117
src/index.js View File

@@ -1,6 +1,3 @@
import _ from 'lodash';
import * as monaco from 'monaco-editor';
import { initVimMode } from 'monaco-vim';
import Vue from 'vue'
import App from './App.vue'

@@ -13,118 +10,4 @@ if (!window.included) {
})

require('./mystyles.scss');

/*
function component() {
let element = document.createElement('div');

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());
*/

const editor_cpp = monaco.editor.create(document.getElementById('container_editor_cpp'), {
value: `#include <cheerp/client.h>
#include <cheerp/clientlib.h>

// We need to extend the client namespace to declare our
// custom JavaScript function
namespace client
{
// The name should be the same as the JavaScript one
// The parameters needs to be a const client::String reference
// so that implicit conversion from const char* is supported
void changeTitle(const String& str);
}

using namespace client;

void webMain()
{
Element* titleElement=document.getElementById("pagetitle");
String* oldText=titleElement->get_textContent();
changeTitle("Literal C++ string");
}`,
language: 'cpp',
automaticLayout: true
});

const editor_html = monaco.editor.create(document.getElementById('container_editor_html'), {
value: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheerp test</title>
<script defer src="example.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// Use jQuery to make a (trivial) change to the page
function changeTitle(str)
{
$("#pagetitle").text(str);
}
</script>
</head>
<body>
<h1 id="pagetitle">Boring static text</h1>
</body>
</html>`,
language: 'cpp',
automaticLayout: true
});


const editor_javascript = monaco.editor.create(document.getElementById('container_editor_javascript'), {
value: `
"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};
function __Z7webMainv(){
var LretConstructor=null;
LretConstructor="pagetitle";
LretConstructor=document.getElementById(LretConstructor);
LretConstructor.textContent;
LretConstructor="Literal C++ string";
changeTitle(LretConstructor);
return;
}
function _cheerpCreate_ZN6client6StringC2EPKc(Larg0,Marg0){
var tmp0=0,Lgeptoindexphi=0,LretConstructor$pi=null,tmp3=null;
LretConstructor$pi=String();
tmp0=Larg0[Marg0]|0;
if((tmp0&255)===0){
return String(LretConstructor$pi);
}else{
Lgeptoindexphi=0;
}
while(1){
tmp3=String.fromCharCode(tmp0<<24>>24);
LretConstructor$pi=LretConstructor$pi.concat(tmp3);
Lgeptoindexphi=Lgeptoindexphi+1|0;
tmp0=Larg0[Marg0+Lgeptoindexphi|0]|0;
if((tmp0&255)===0){
break;
}
}
return String(LretConstructor$pi);
}
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();
`,
language: 'javascript',
automaticLayout: true
});

const vimMode_1 = initVimMode(editor_cpp, document.getElementById('statusbar_editor_cpp'))
const vimMode_2 = initVimMode(editor_html, document.getElementById('statusbar_editor_html'))
const vimMode_3 = initVimMode(editor_javascript, document.getElementById('statusbar_editor_javascript'))

//vimMode_1.dispose();

//console.log(editor);

}

+ 1
- 12
src/mystyles.scss View File

@@ -4,18 +4,7 @@
.is-fullheight.columns {
height: calc(100vh - ( 3.25rem - .75rem ) );
}
#container_editor_cpp, #container_editor_html, #container_editor_javascript {
width: calc(100vh - ( 6rem) );
}
#container_editor_cpp {
height: calc(70vh - ( 8rem) );
}
#container_editor_html {
height: calc(30vh - ( 8rem) );
}
#container_editor_javascript {
height: calc(70vh - ( 8rem) );
}

textarea.textarea {
width: calc(100vh - ( 6rem) );
min-width: calc(100vh - ( 6rem) );

Write Preview
Loading…
Cancel
Save