rayburgemeestre
/
cheerpweb
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Refactor monaco editor into a vue component.

master
Ray Burgemeestre 6 年前
父节点
a662e02852
当前提交
5f2c686e4a
共有 8 个文件被更改，包括 180 次插入 和 172 次删除
合并视图 显示文件统计
  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 查看文件

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

+ 2
- 1
package-lock.json 查看文件

"lodash": { "lodash": {
"version": "4.17.11", "version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", "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": { "lodash.assign": {
"version": "4.2.0", "version": "4.2.0",

+ 0
- 1
package.json 查看文件

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

+ 106
- 24
src/App.vue 查看文件

<template> <template>
<!--
<div class="full-width center-content">
<hello-component name="World" />
</div>
-->
<div class="columns is-fullheight"> <div class="columns is-fullheight">
<div class="column"> <div class="column">
<nav class="navbar is-black" role="navigation" aria-label="main navigation"> <nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-primary">
<a class="button is-primary" v-on:click="">
<strong>Compile</strong> <strong>Compile</strong>
</a> </a>
<a class="button is-light"> <a class="button is-light">
<li><a>Compiler</a></li> <li><a>Compiler</a></li>
</ul> </ul>
</div> </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>
<div class="row"> <div class="row">
<li class="is-active"><a>HTML</a></li> <li class="is-active"><a>HTML</a></li>
</ul> </ul>
</div> </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>
</div> </div>


<li class="is-active"><a>Javascript</a></li> <li class="is-active"><a>Javascript</a></li>
</ul> </ul>
</div> </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>
<div class="row"> <div class="row">
<div class="tabs"> <div class="tabs">
</template> </template>


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

+ 70
- 0
src/components/EditorComponent.vue 查看文件

<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 查看文件

<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 查看文件

import _ from 'lodash';
import * as monaco from 'monaco-editor';
import { initVimMode } from 'monaco-vim';
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'


}) })


require('./mystyles.scss'); 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 查看文件

.is-fullheight.columns { .is-fullheight.columns {
height: calc(100vh - ( 3.25rem - .75rem ) ); 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 { textarea.textarea {
width: calc(100vh - ( 6rem) ); width: calc(100vh - ( 6rem) );
min-width: calc(100vh - ( 6rem) ); min-width: calc(100vh - ( 6rem) );

撰写 预览
正在加载...
取消
保存