chore: monaco in cdn

vuejs · Sep 5, 2020 · 53739e1 · 53739e1
1 parent d00a225
commit 53739e1
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 101 deletions.
diff --git a/packages/jsx-explorer/index.html b/packages/jsx-explorer/index.html
@@ -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>
diff --git 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
@@ -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 = () => <div>Hello World</div>',
-  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 = () => <div>Hello World</div>',
+    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<T extends(...args: any[]) => any>(
   fn: T,

diff --git 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',