Skip to content

Commit 53739e1

Browse files
Amour1688Amour1688
committed
chore: monaco in cdn
1 parent d00a225 commit 53739e1

File tree

4 files changed

+100
-101
lines changed

4 files changed

+100
-101
lines changed

‎packages/jsx-explorer/index.html‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7-
<title>Vue JSX Explorer</title>
8-
</head>
9-
<body>
10-
<div id="header"></div>
11-
<div id="source" class="editor"></div>
12-
<div id="output" class="editor"></div>
13-
</body>
14-
</html>
1+
<title>Vue JSX Explorer</title>
2+
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css">
3+
4+
<div id="header"></div>
5+
<div id="source" class="editor"></div>
6+
<div id="output" class="editor"></div>
7+
8+
<script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
9+
<script>
10+
require.config({
11+
paths: {
12+
'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'
13+
}
14+
})
15+
</script>
16+
<script src="./main.js"></script>
17+
<script>
18+
require(['vs/editor/editor.main'], init /* injected by build */)
19+
</script>

‎packages/jsx-explorer/package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,12 @@
88
"devDependencies": {
99
"@babel/core": "^7.0.0",
1010
"css-loader": "^3.5.3",
11-
"file-loader": "^6.0.0",
1211
"html-webpack-plugin": "^4.3.0",
13-
"monaco-editor-webpack-plugin": "^1.9.0",
1412
"style-loader": "^1.2.1",
1513
"ts-loader": "^8.0.0",
1614
"typescript": "^4.0.2",
17-
"url-loader": "^4.1.0",
1815
"vue": "3.0.0-rc.10",
1916
"webpack": "^4.43.0",
20-
"webpack-dev-server": "^3.11.0",
21-
"worker-plugin": "^4.0.3"
17+
"webpack-dev-server": "^3.11.0"
2218
}
2319
}

‎packages/jsx-explorer/src/index.ts‎

Lines changed: 80 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,99 @@
11
/* eslint-disable no-console */
22
// eslint-disable-next-line import/no-unresolved
3-
import * as monaco from 'monaco-editor';
3+
import * as m from 'monaco-editor';
44
import { h, createApp } from 'vue';
55
import { transform } from '@babel/core';
6-
import babelPluginJSx from '../../babel-plugin-jsx/src';
6+
import babelPluginJsx from '../../babel-plugin-jsx/src';
77
import './index.css';
8-
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
9-
// if shipping only a subset of the features & languages is desired
108

11-
createApp(
12-
() => h('h1', null, 'Vue JSX Explorer'),
13-
).mount('#header');
14-
15-
// @ts-ignore
16-
if (module.hot) {
17-
// @ts-ignore
18-
module.hot.accept('../../babel-plugin-jsx/src', () => {
19-
compile();
20-
});
9+
declare global {
10+
interface Window {
11+
monaco: typeof m
12+
init: () => void
13+
}
2114
}
2215

23-
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
24-
theme: 'vs-dark',
25-
fontSize: 14,
26-
wordWrap: 'on',
27-
scrollBeyondLastLine: false,
28-
renderWhitespace: 'selection',
29-
contextmenu: false,
30-
minimap: {
31-
enabled: false,
32-
},
33-
};
16+
window.init = () => {
17+
const { monaco } = window;
18+
createApp(
19+
() => h('h1', null, 'Vue JSX Explorer'),
20+
).mount('#header');
21+
22+
// @ts-ignore
23+
if (module.hot) {
24+
// @ts-ignore
25+
module.hot.accept('../../babel-plugin-jsx/src', () => {
26+
compile();
27+
});
28+
}
3429

35-
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
36-
allowJs: true,
37-
allowNonTsExtensions: true,
38-
lib: [],
39-
jsx: monaco.languages.typescript.JsxEmit.React,
40-
target: monaco.languages.typescript.ScriptTarget.Latest,
41-
typeRoots: ['node_modules/@types'],
42-
});
30+
const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
31+
theme: 'vs-dark',
32+
fontSize: 14,
33+
wordWrap: 'on',
34+
scrollBeyondLastLine: false,
35+
renderWhitespace: 'selection',
36+
contextmenu: false,
37+
minimap: {
38+
enabled: false,
39+
},
40+
};
4341

44-
const editor = monaco.editor.create(document.getElementById('source')!, {
45-
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
46-
language: 'javascript',
47-
tabSize: 2,
48-
...sharedEditorOptions,
49-
});
42+
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
43+
allowJs: true,
44+
allowNonTsExtensions: true,
45+
lib: [],
46+
jsx: monaco.languages.typescript.JsxEmit.React,
47+
target: monaco.languages.typescript.ScriptTarget.Latest,
48+
typeRoots: ['node_modules/@types'],
49+
});
5050

51-
const output = monaco.editor.create(document.getElementById('output')!, {
52-
value: '',
53-
language: 'javascript',
54-
readOnly: true,
55-
tabSize: 2,
56-
...sharedEditorOptions,
57-
});
51+
const editor = monaco.editor.create(document.getElementById('source')!, {
52+
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
53+
language: 'javascript',
54+
tabSize: 2,
55+
...sharedEditorOptions,
56+
});
5857

59-
const compile = () => {
60-
const src = editor.getValue();
61-
localStorage.setItem('state', src);
62-
window.location.hash = encodeURIComponent(src);
63-
console.clear();
64-
transform(src, {
65-
babelrc: false,
66-
plugins: [[babelPluginJSx, { transformOn: true, optimize: true }]],
67-
ast: true,
68-
}, (err, result = {}) => {
69-
const res = result!;
70-
if (!err) {
71-
console.log('AST', res.ast!);
72-
output.setValue(res.code!);
73-
} else {
74-
output.setValue(err.message!);
75-
}
58+
const output = monaco.editor.create(document.getElementById('output')!, {
59+
value: '',
60+
language: 'javascript',
61+
readOnly: true,
62+
tabSize: 2,
63+
...sharedEditorOptions,
7664
});
77-
};
7865

79-
// handle resize
80-
window.addEventListener('resize', () => {
81-
editor.layout();
82-
output.layout();
83-
});
66+
const compile = () => {
67+
const src = editor.getValue();
68+
localStorage.setItem('state', src);
69+
window.location.hash = encodeURIComponent(src);
70+
console.clear();
71+
transform(src, {
72+
babelrc: false,
73+
plugins: [[babelPluginJsx, { transformOn: true, optimize: true }]],
74+
ast: true,
75+
}, (err, result = {}) => {
76+
const res = result!;
77+
if (!err) {
78+
console.log('AST', res.ast!);
79+
output.setValue(res.code!);
80+
} else {
81+
output.setValue(err.message!);
82+
}
83+
});
84+
};
8485

85-
compile();
86+
// handle resize
87+
window.addEventListener('resize', () => {
88+
editor.layout();
89+
output.layout();
90+
});
91+
92+
compile();
8693

87-
// update compile output when input changes
88-
editor.onDidChangeModelContent(debounce(compile));
94+
// update compile output when input changes
95+
editor.onDidChangeModelContent(debounce(compile));
96+
};
8997

9098
function debounce<T extends(...args: any[]) => any>(
9199
fn: T,

‎scripts/webpack.base.conf.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const path = require('path');
2-
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
32
const HtmlWebpackPlugin = require('html-webpack-plugin');
43

54
module.exports = {
@@ -20,14 +19,6 @@ module.exports = {
2019
compilerOptions: { downlevelIteration: true },
2120
},
2221
},
23-
{
24-
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
25-
loader: 'url-loader',
26-
options: {
27-
limit: 10000,
28-
name: 'fonts/[name].[hash:7].[ext]',
29-
},
30-
},
3122
{
3223
test: /\.css$/,
3324
use: [
@@ -37,7 +28,6 @@ module.exports = {
3728
],
3829
},
3930
plugins: [
40-
new MonacoWebpackPlugin(),
4131
new HtmlWebpackPlugin({
4232
template: 'index.html',
4333
filename: 'index.html',

0 commit comments

Comments
 (0)