images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-07-03 02:23:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: upgrade project setup (#646)

Browse Source
This commit is contained in:
三咲智子 Kevin Deng
2023-06-22 12:14:02 +08:00
committed by GitHub
parent 687be8aca8
commit dbba3205e4
53 changed files with 6861 additions and 12397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/jsx-explorer/README.md
View File

@ -1,2 +1 @@
# JSX Explorer

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

@ -1,19 +1,14 @@
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<script type="module" src="./src/index.ts"></script>
</body>
</html>

21
packages/jsx-explorer/package.json
View File

@ -2,18 +2,19 @@
"name": "@vue/jsx-explorer",
"version": "1.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"monaco-editor": "^0.34.0"
"@babel/core": "^7.22.5",
"@vue/babel-plugin-jsx": "workspace:*",
"monaco-editor": "^0.39.0",
"vue": "^3.3.4"
},
"devDependencies": {
"@babel/core": "^7.19.3",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.5.2",
"style-loader": "^1.3.0",
"ts-loader": "^8.4.0",
"typescript": "^4.8.4",
"vue": "3.2.41",
"webpack": "^4.46.0",
"webpack-dev-server": "^3.11.3"
"vite-plugin-monaco-editor": "^1.1.0",
"vite-plugin-node-polyfills": "^0.9.0"
}
}

3
packages/jsx-explorer/src/index.css
View File

@ -1,6 +1,7 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#header {

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

@ -1,42 +1,40 @@
/* eslint-disable no-console */
// eslint-disable-next-line import/no-unresolved
import * as m from 'monaco-editor';
import * as monaco from 'monaco-editor';
import { watchEffect } from 'vue';
import { transform } from '@babel/core';
import babelPluginJsx from '../../babel-plugin-jsx/src';
import { initOptions, compilerOptions, VueJSXPluginOptions } from './options';
import babelPluginJsx from '@vue/babel-plugin-jsx';
import {
type VueJSXPluginOptions,
compilerOptions,
initOptions,
} from './options';
import './index.css';
declare global {
interface Window {
monaco: typeof m
init: () => void
}
}
main();
interface PersistedState {
src: string
options: VueJSXPluginOptions
src: string;
options: VueJSXPluginOptions;
}
window.init = () => {
const { monaco } = window;
const persistedState: PersistedState = JSON.parse(localStorage.getItem('state') || '{}');
function main() {
const persistedState: PersistedState = JSON.parse(
localStorage.getItem('state') || '{}'
);
Object.assign(compilerOptions, persistedState.options);
const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
{
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowJs: true,
@ -46,7 +44,10 @@ window.init = () => {
});
const editor = monaco.editor.create(document.getElementById('source')!, {
value: decodeURIComponent(window.location.hash.slice(1)) || persistedState.src || 'const App = () => <div>Hello World</div>',
value:
decodeURIComponent(window.location.hash.slice(1)) ||
persistedState.src ||
'const App = () => <div>Hello World</div>',
language: 'typescript',
tabSize: 2,
...sharedEditorOptions,
@ -69,19 +70,23 @@ window.init = () => {
localStorage.setItem('state', state);
window.location.hash = encodeURIComponent(src);
console.clear();
transform(src, {
babelrc: false,
plugins: [[babelPluginJsx, compilerOptions]],
ast: true,
}, (err, result = {}) => {
const res = result!;
if (!err) {
console.log('AST', res.ast!);
output.setValue(res.code!);
} else {
output.setValue(err.message!);
transform(
src,
{
babelrc: false,
plugins: [[babelPluginJsx, compilerOptions]],
ast: true,
},
(err, result = {}) => {
const res = result!;
if (!err) {
console.log('AST', res.ast!);
output.setValue(res.code!);
} else {
output.setValue(err.message!);
}
}
});
);
};
// handle resize
@ -95,11 +100,9 @@ window.init = () => {
// update compile output when input changes
editor.onDidChangeModelContent(debounce(reCompile));
};
}
function debounce<T extends(...args: any[]) => any>(
fn: T,
delay = 300): T {
function debounce<T extends (...args: any[]) => any>(fn: T, delay = 300): T {
let prevTimer: number | null = null;
return ((...args: any[]) => {
if (prevTimer) {

29
packages/jsx-explorer/src/options.ts
View File

@ -1,7 +1,5 @@
import {
h, reactive, createApp,
} from 'vue';
import { VueJSXPluginOptions } from '../../babel-plugin-jsx/src';
import { createApp, h, reactive } from 'vue';
import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
export { VueJSXPluginOptions };
@ -19,16 +17,15 @@ const App = {
h(
'a',
{
href: 'https://app.netlify.com/sites/vue-next-jsx-explorer/deploys',
href: 'https://app.netlify.com/sites/vue-jsx-explorer/deploys',
target: '_blank',
},
'History',
'History'
),
h('div', { id: 'options-wrapper' }, [
h('div', { id: 'options-label' }, 'Options ↘'),
h('ul', { id: 'options' }, [
// mergeProps
h('li', [
h('input', {
@ -37,7 +34,9 @@ const App = {
name: 'mergeProps',
checked: compilerOptions.mergeProps,
onChange(e: Event) {
compilerOptions.mergeProps = (e.target as HTMLInputElement).checked;
compilerOptions.mergeProps = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'mergeProps' }, 'mergeProps'),
@ -50,7 +49,9 @@ const App = {
id: 'optimize',
checked: compilerOptions.optimize,
onChange(e: Event) {
compilerOptions.optimize = (e.target as HTMLInputElement).checked;
compilerOptions.optimize = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'optimize' }, 'optimize'),
@ -63,7 +64,9 @@ const App = {
id: 'transformOn',
checked: compilerOptions.transformOn,
onChange(e: Event) {
compilerOptions.transformOn = (e.target as HTMLInputElement).checked;
compilerOptions.transformOn = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'transformOn' }, 'transformOn'),
@ -73,10 +76,12 @@ const App = {
h('li', [
h('input', {
type: 'checkbox',
id: 'transformOn',
id: 'enableObjectSlots',
checked: compilerOptions.enableObjectSlots,
onChange(e: Event) {
compilerOptions.enableObjectSlots = (e.target as HTMLInputElement).checked;
compilerOptions.enableObjectSlots = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'enableObjectSlots' }, 'enableObjectSlots'),

14
packages/jsx-explorer/vite.config.ts Normal file
View File

@ -0,0 +1,14 @@
import { defineConfig } from 'vite';
import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
export default defineConfig({
plugins: [
MonacoEditorPlugin({}),
nodePolyfills({
globals: {
process: true,
},
}),
],
});