mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2024-11-10 09:39:14 +08:00
chore: monaco in cdn
This commit is contained in:
Amour1688
parent
d00a225a2d
commit
53739e1d5c
@ -1,14 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Vue JSX Explorer</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header"></div>
|
||||
<div id="source" class="editor"></div>
|
||||
<div id="output" class="editor"></div>
|
||||
</body>
|
||||
</html>
|
||||
<title>Vue JSX Explorer</title>
|
||||
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css">
|
||||
|
||||
<div id="header"></div>
|
||||
<div id="source" class="editor"></div>
|
||||
<div id="output" class="editor"></div>
|
||||
|
||||
<script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
paths: {
|
||||
'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script src="./main.js"></script>
|
||||
<script>
|
||||
require(['vs/editor/editor.main'], init /* injected by build */)
|
||||
</script>
|
||||
|
||||
@ -8,16 +8,12 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"css-loader": "^3.5.3",
|
||||
"file-loader": "^6.0.0",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"monaco-editor-webpack-plugin": "^1.9.0",
|
||||
"style-loader": "^1.2.1",
|
||||
"ts-loader": "^8.0.0",
|
||||
"typescript": "^4.0.2",
|
||||
"url-loader": "^4.1.0",
|
||||
"vue": "3.0.0-rc.10",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"worker-plugin": "^4.0.3"
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,92 +1,100 @@
|
||||
/* eslint-disable no-console */
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import * as monaco from 'monaco-editor';
|
||||
import * as m from 'monaco-editor';
|
||||
import { h, createApp } from 'vue';
|
||||
import { transform } from '@babel/core';
|
||||
import babelPluginJSx from '../../babel-plugin-jsx/src';
|
||||
import babelPluginJsx from '../../babel-plugin-jsx/src';
|
||||
import './index.css';
|
||||
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
||||
// if shipping only a subset of the features & languages is desired
|
||||
|
||||
createApp(
|
||||
() => h('h1', null, 'Vue JSX Explorer'),
|
||||
).mount('#header');
|
||||
|
||||
// @ts-ignore
|
||||
if (module.hot) {
|
||||
// @ts-ignore
|
||||
module.hot.accept('../../babel-plugin-jsx/src', () => {
|
||||
compile();
|
||||
});
|
||||
declare global {
|
||||
interface Window {
|
||||
monaco: typeof m
|
||||
init: () => void
|
||||
}
|
||||
}
|
||||
|
||||
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
|
||||
theme: 'vs-dark',
|
||||
fontSize: 14,
|
||||
wordWrap: 'on',
|
||||
scrollBeyondLastLine: false,
|
||||
renderWhitespace: 'selection',
|
||||
contextmenu: false,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
window.init = () => {
|
||||
const { monaco } = window;
|
||||
createApp(
|
||||
() => h('h1', null, 'Vue JSX Explorer'),
|
||||
).mount('#header');
|
||||
|
||||
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
|
||||
allowJs: true,
|
||||
allowNonTsExtensions: true,
|
||||
lib: [],
|
||||
jsx: monaco.languages.typescript.JsxEmit.React,
|
||||
target: monaco.languages.typescript.ScriptTarget.Latest,
|
||||
typeRoots: ['node_modules/@types'],
|
||||
});
|
||||
// @ts-ignore
|
||||
if (module.hot) {
|
||||
// @ts-ignore
|
||||
module.hot.accept('../../babel-plugin-jsx/src', () => {
|
||||
compile();
|
||||
});
|
||||
}
|
||||
|
||||
const editor = monaco.editor.create(document.getElementById('source')!, {
|
||||
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
|
||||
language: 'javascript',
|
||||
tabSize: 2,
|
||||
...sharedEditorOptions,
|
||||
});
|
||||
const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
|
||||
theme: 'vs-dark',
|
||||
fontSize: 14,
|
||||
wordWrap: 'on',
|
||||
scrollBeyondLastLine: false,
|
||||
renderWhitespace: 'selection',
|
||||
contextmenu: false,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
|
||||
const output = monaco.editor.create(document.getElementById('output')!, {
|
||||
value: '',
|
||||
language: 'javascript',
|
||||
readOnly: true,
|
||||
tabSize: 2,
|
||||
...sharedEditorOptions,
|
||||
});
|
||||
|
||||
const compile = () => {
|
||||
const src = editor.getValue();
|
||||
localStorage.setItem('state', src);
|
||||
window.location.hash = encodeURIComponent(src);
|
||||
console.clear();
|
||||
transform(src, {
|
||||
babelrc: false,
|
||||
plugins: [[babelPluginJSx, { transformOn: true, optimize: true }]],
|
||||
ast: true,
|
||||
}, (err, result = {}) => {
|
||||
const res = result!;
|
||||
if (!err) {
|
||||
console.log('AST', res.ast!);
|
||||
output.setValue(res.code!);
|
||||
} else {
|
||||
output.setValue(err.message!);
|
||||
}
|
||||
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
|
||||
allowJs: true,
|
||||
allowNonTsExtensions: true,
|
||||
lib: [],
|
||||
jsx: monaco.languages.typescript.JsxEmit.React,
|
||||
target: monaco.languages.typescript.ScriptTarget.Latest,
|
||||
typeRoots: ['node_modules/@types'],
|
||||
});
|
||||
|
||||
const editor = monaco.editor.create(document.getElementById('source')!, {
|
||||
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
|
||||
language: 'javascript',
|
||||
tabSize: 2,
|
||||
...sharedEditorOptions,
|
||||
});
|
||||
|
||||
const output = monaco.editor.create(document.getElementById('output')!, {
|
||||
value: '',
|
||||
language: 'javascript',
|
||||
readOnly: true,
|
||||
tabSize: 2,
|
||||
...sharedEditorOptions,
|
||||
});
|
||||
|
||||
const compile = () => {
|
||||
const src = editor.getValue();
|
||||
localStorage.setItem('state', src);
|
||||
window.location.hash = encodeURIComponent(src);
|
||||
console.clear();
|
||||
transform(src, {
|
||||
babelrc: false,
|
||||
plugins: [[babelPluginJsx, { transformOn: true, optimize: true }]],
|
||||
ast: true,
|
||||
}, (err, result = {}) => {
|
||||
const res = result!;
|
||||
if (!err) {
|
||||
console.log('AST', res.ast!);
|
||||
output.setValue(res.code!);
|
||||
} else {
|
||||
output.setValue(err.message!);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// handle resize
|
||||
window.addEventListener('resize', () => {
|
||||
editor.layout();
|
||||
output.layout();
|
||||
});
|
||||
|
||||
compile();
|
||||
|
||||
// update compile output when input changes
|
||||
editor.onDidChangeModelContent(debounce(compile));
|
||||
};
|
||||
|
||||
// handle resize
|
||||
window.addEventListener('resize', () => {
|
||||
editor.layout();
|
||||
output.layout();
|
||||
});
|
||||
|
||||
compile();
|
||||
|
||||
// update compile output when input changes
|
||||
editor.onDidChangeModelContent(debounce(compile));
|
||||
|
||||
function debounce<T extends(...args: any[]) => any>(
|
||||
fn: T,
|
||||
delay = 300): T {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
const path = require('path');
|
||||
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
@ -20,14 +19,6 @@ module.exports = {
|
||||
compilerOptions: { downlevelIteration: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: 'fonts/[name].[hash:7].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
@ -37,7 +28,6 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new MonacoWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'index.html',
|
||||
filename: 'index.html',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user