images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-04-24 10:32: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"
} }
} }

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

@ -1,26 +1,33 @@
/* 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 {
interface Window {
monaco: typeof m
init: () => void
}
}
window.init = () => {
const { monaco } = window;
createApp(
() => h('h1', null, 'Vue JSX Explorer'), () => h('h1', null, 'Vue JSX Explorer'),
).mount('#header'); ).mount('#header');
// @ts-ignore // @ts-ignore
if (module.hot) { if (module.hot) {
// @ts-ignore // @ts-ignore
module.hot.accept('../../babel-plugin-jsx/src', () => { module.hot.accept('../../babel-plugin-jsx/src', () => {
compile(); compile();
}); });
} }
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = { const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
theme: 'vs-dark', theme: 'vs-dark',
fontSize: 14, fontSize: 14,
wordWrap: 'on', wordWrap: 'on',
@ -30,40 +37,40 @@ const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
minimap: { minimap: {
enabled: false, enabled: false,
}, },
}; };
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowJs: true, allowJs: true,
allowNonTsExtensions: true, allowNonTsExtensions: true,
lib: [], lib: [],
jsx: monaco.languages.typescript.JsxEmit.React, jsx: monaco.languages.typescript.JsxEmit.React,
target: monaco.languages.typescript.ScriptTarget.Latest, target: monaco.languages.typescript.ScriptTarget.Latest,
typeRoots: ['node_modules/@types'], typeRoots: ['node_modules/@types'],
}); });
const editor = monaco.editor.create(document.getElementById('source')!, { const editor = monaco.editor.create(document.getElementById('source')!, {
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>', value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
language: 'javascript', language: 'javascript',
tabSize: 2, tabSize: 2,
...sharedEditorOptions, ...sharedEditorOptions,
}); });
const output = monaco.editor.create(document.getElementById('output')!, { const output = monaco.editor.create(document.getElementById('output')!, {
value: '', value: '',
language: 'javascript', language: 'javascript',
readOnly: true, readOnly: true,
tabSize: 2, tabSize: 2,
...sharedEditorOptions, ...sharedEditorOptions,
}); });
const compile = () => { const compile = () => {
const src = editor.getValue(); const src = editor.getValue();
localStorage.setItem('state', src); localStorage.setItem('state', src);
window.location.hash = encodeURIComponent(src); window.location.hash = encodeURIComponent(src);
console.clear(); console.clear();
transform(src, { transform(src, {
babelrc: false, babelrc: false,
plugins: [[babelPluginJSx, { transformOn: true, optimize: true }]], plugins: [[babelPluginJsx, { transformOn: true, optimize: true }]],
ast: true, ast: true,
}, (err, result = {}) => { }, (err, result = {}) => {
const res = result!; const res = result!;
@ -74,18 +81,19 @@ const compile = () => {
output.setValue(err.message!); output.setValue(err.message!);
} }
}); });
}; };
// handle resize // handle resize
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
editor.layout(); editor.layout();
output.layout(); output.layout();
}); });
compile(); compile();
// update compile output when input changes // update compile output when input changes
editor.onDidChangeModelContent(debounce(compile)); editor.onDidChangeModelContent(debounce(compile));
};
function debounce<T extends(...args: any[]) => any>( function debounce<T extends(...args: any[]) => any>(
fn: T, fn: 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',