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