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

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

@ -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> <title>Vue JSX Explorer</title>
</head> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.20.0/min/vs/editor/editor.main.css">
<body>
<div id="header"></div> <div id="header"></div>
<div id="source" class="editor"></div> <div id="source" class="editor"></div>
<div id="output" class="editor"></div> <div id="output" class="editor"></div>
</body>
</html> <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>

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"
} }
} }

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

@ -1,13 +1,20 @@
/* 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
declare global {
interface Window {
monaco: typeof m
init: () => void
}
}
window.init = () => {
const { monaco } = window;
createApp( createApp(
() => h('h1', null, 'Vue JSX Explorer'), () => h('h1', null, 'Vue JSX Explorer'),
).mount('#header'); ).mount('#header');
@ -20,7 +27,7 @@ if (module.hot) {
}); });
} }
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = { const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
theme: 'vs-dark', theme: 'vs-dark',
fontSize: 14, fontSize: 14,
wordWrap: 'on', wordWrap: 'on',
@ -63,7 +70,7 @@ const compile = () => {
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!;
@ -86,6 +93,7 @@ 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',