From 53739e1d5c393583886b0c2d815e931d6e0fa2ca Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sat, 5 Sep 2020 21:58:07 +0800 Subject: [PATCH] chore: monaco in cdn --- packages/jsx-explorer/index.html | 33 ++++--- packages/jsx-explorer/package.json | 6 +- packages/jsx-explorer/src/index.ts | 152 +++++++++++++++-------------- scripts/webpack.base.conf.js | 10 -- 4 files changed, 100 insertions(+), 101 deletions(-) diff --git a/packages/jsx-explorer/index.html b/packages/jsx-explorer/index.html index c3d76ab2..19e74520 100644 --- a/packages/jsx-explorer/index.html +++ b/packages/jsx-explorer/index.html @@ -1,14 +1,19 @@ - - - - - - - Vue JSX Explorer - - - -
-
- - +Vue JSX Explorer + + + +
+
+ + + + + diff --git a/packages/jsx-explorer/package.json b/packages/jsx-explorer/package.json index dc37b824..d90cd138 100644 --- a/packages/jsx-explorer/package.json +++ b/packages/jsx-explorer/package.json @@ -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" } } diff --git a/packages/jsx-explorer/src/index.ts b/packages/jsx-explorer/src/index.ts index ad519869..8e2bff20 100644 --- a/packages/jsx-explorer/src/index.ts +++ b/packages/jsx-explorer/src/index.ts @@ -1,91 +1,99 @@ /* 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'); + + // @ts-ignore + if (module.hot) { + // @ts-ignore + module.hot.accept('../../babel-plugin-jsx/src', () => { + compile(); + }); + } -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 sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = { + theme: 'vs-dark', + fontSize: 14, + wordWrap: 'on', + scrollBeyondLastLine: false, + renderWhitespace: 'selection', + contextmenu: false, + minimap: { + enabled: false, + }, + }; -const editor = monaco.editor.create(document.getElementById('source')!, { - value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () =>
Hello World
', - language: 'javascript', - tabSize: 2, - ...sharedEditorOptions, -}); + 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 output = monaco.editor.create(document.getElementById('output')!, { - value: '', - language: 'javascript', - readOnly: true, - tabSize: 2, - ...sharedEditorOptions, -}); + const editor = monaco.editor.create(document.getElementById('source')!, { + value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () =>
Hello World
', + language: 'javascript', + 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!); - } + const output = monaco.editor.create(document.getElementById('output')!, { + value: '', + language: 'javascript', + readOnly: true, + tabSize: 2, + ...sharedEditorOptions, }); -}; -// handle resize -window.addEventListener('resize', () => { - editor.layout(); - output.layout(); -}); + 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!); + } + }); + }; -compile(); + // handle resize + window.addEventListener('resize', () => { + editor.layout(); + output.layout(); + }); + + compile(); -// update compile output when input changes -editor.onDidChangeModelContent(debounce(compile)); + // update compile output when input changes + editor.onDidChangeModelContent(debounce(compile)); +}; function debounce any>( fn: T, diff --git a/scripts/webpack.base.conf.js b/scripts/webpack.base.conf.js index c395cf54..27cb9ba1 100644 --- a/scripts/webpack.base.conf.js +++ b/scripts/webpack.base.conf.js @@ -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',