images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-04-24 02:22:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: monaco in cdn

Browse Source
This commit is contained in:
Amour1688 2020-09-05 21:58:07 +08:00
parent d00a225a2d
commit 53739e1d5c
4 changed files with 103 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/jsx-explorer/index.html
View File

@ -1,14 +1,19 @@
<!DOCTYPE html> <title>Vue JSX Explorer</title>
<html lang="en"> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css">
<head>
<meta charset="utf-8" /> <div id="header"></div>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <div id="source" class="editor"></div>
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <div id="output" class="editor"></div>
<title>Vue JSX Explorer</title>
</head> <script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
<body> <script>
<div id="header"></div> require.config({
<div id="source" class="editor"></div> paths: {
<div id="output" class="editor"></div> 'vs': 'https://unpkg.com/monaco-editor@0.20.0/min/vs'
</body> }
</html> })
</script>
<script src="./main.js"></script>
<script>
require(['vs/editor/editor.main'], init /* injected by build */)
</script>

6
packages/jsx-explorer/package.json
View File

@ -8,16 +8,12 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0", "@babel/core": "^7.0.0",
"css-loader": "^3.5.3", "css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"ts-loader": "^8.0.0", "ts-loader": "^8.0.0",
"typescript": "^4.0.2", "typescript": "^4.0.2",
"url-loader": "^4.1.0",
"vue": "3.0.0-rc.10", "vue": "3.0.0-rc.10",
"webpack": "^4.43.0", "webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0"
"worker-plugin": "^4.0.3"
} }
} }

158
packages/jsx-explorer/src/index.ts
View File

@ -1,92 +1,100 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
// eslint-disable-next-line import/no-unresolved // 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 { h, createApp } from 'vue';
import { transform } from '@babel/core'; import { transform } from '@babel/core';
import babelPluginJSx from '../../babel-plugin-jsx/src'; import babelPluginJsx from '../../babel-plugin-jsx/src';
import './index.css'; 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( declare global {
() => h('h1', null, 'Vue JSX Explorer'), interface Window {
).mount('#header'); monaco: typeof m
init: () => void
// @ts-ignore }
if (module.hot) {
// @ts-ignore
module.hot.accept('../../babel-plugin-jsx/src', () => {
compile();
});
} }
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = { window.init = () => {
theme: 'vs-dark', const { monaco } = window;
fontSize: 14, createApp(
wordWrap: 'on', () => h('h1', null, 'Vue JSX Explorer'),
scrollBeyondLastLine: false, ).mount('#header');
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ // @ts-ignore
allowJs: true, if (module.hot) {
allowNonTsExtensions: true, // @ts-ignore
lib: [], module.hot.accept('../../babel-plugin-jsx/src', () => {
jsx: monaco.languages.typescript.JsxEmit.React, compile();
target: monaco.languages.typescript.ScriptTarget.Latest, });
typeRoots: ['node_modules/@types'], }
});
const editor = monaco.editor.create(document.getElementById('source')!, { const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>', theme: 'vs-dark',
language: 'javascript', fontSize: 14,
tabSize: 2, wordWrap: 'on',
...sharedEditorOptions, scrollBeyondLastLine: false,
}); renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
const output = monaco.editor.create(document.getElementById('output')!, { monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
value: '', allowJs: true,
language: 'javascript', allowNonTsExtensions: true,
readOnly: true, lib: [],
tabSize: 2, jsx: monaco.languages.typescript.JsxEmit.React,
...sharedEditorOptions, target: monaco.languages.typescript.ScriptTarget.Latest,
}); typeRoots: ['node_modules/@types'],
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!);
}
}); });
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>( function debounce<T extends(...args: any[]) => any>(
fn: T, fn: T,
delay = 300): T { delay = 300): T {

10
scripts/webpack.base.conf.js
View File

@ -1,5 +1,4 @@
const path = require('path'); const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { module.exports = {
@ -20,14 +19,6 @@ module.exports = {
compilerOptions: { downlevelIteration: true }, compilerOptions: { downlevelIteration: true },
}, },
}, },
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]',
},
},
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
@ -37,7 +28,6 @@ module.exports = {
], ],
}, },
plugins: [ plugins: [
new MonacoWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: 'index.html', template: 'index.html',
filename: 'index.html', filename: 'index.html',