style: format

packages/jsx-explorer/src/editor.worker.ts

@@ -1,13 +1,13 @@
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 
 // @ts-ignore
 self.MonacoEnvironment = {
   globalAPI: true,
   getWorker(_: any, label: string) {
     if (label === 'typescript' || label === 'javascript') {
-      return new tsWorker();
+      return new tsWorker()
     }
-    return new editorWorker();
+    return new editorWorker()
   },
-};
+}

packages/jsx-explorer/src/index.ts

@@ -1,30 +1,30 @@
-import * as monaco from 'monaco-editor';
-import { watchEffect } from 'vue';
-import { transform } from '@babel/standalone';
-import babelPluginJsx from '@vue/babel-plugin-jsx';
+import * as monaco from 'monaco-editor'
+import { watchEffect } from 'vue'
+import { transform } from '@babel/standalone'
+import babelPluginJsx from '@vue/babel-plugin-jsx'
 // @ts-expect-error missing types
-import typescript from '@babel/plugin-syntax-typescript';
+import typescript from '@babel/plugin-syntax-typescript'
 import {
   type VueJSXPluginOptions,
   compilerOptions,
   initOptions,
-} from './options';
-import './editor.worker';
-import './index.css';
+} from './options'
+import './editor.worker'
+import './index.css'
 
-main();
+main()
 
 interface PersistedState {
-  src: string;
-  options: VueJSXPluginOptions;
+  src: string
+  options: VueJSXPluginOptions
 }
 
 function main() {
   const persistedState: PersistedState = JSON.parse(
-    localStorage.getItem('state') || '{}'
-  );
+    localStorage.getItem('state') || '{}',
+  )
 
-  Object.assign(compilerOptions, persistedState.options);
+  Object.assign(compilerOptions, persistedState.options)
 
   const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
     {
@@ -39,11 +39,11 @@ function main() {
       minimap: {
         enabled: false,
       },
-    };
+    }
 
   monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSemanticValidation: true,
-  });
+  })
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     allowJs: true,
     allowNonTsExtensions: true,
@@ -51,7 +51,7 @@ function main() {
     target: monaco.languages.typescript.ScriptTarget.Latest,
     module: monaco.languages.typescript.ModuleKind.ESNext,
     isolatedModules: true,
-  });
+  })
 
   const editor = monaco.editor.create(document.getElementById('source')!, {
     ...sharedEditorOptions,
@@ -62,9 +62,9 @@ function main() {
 
 const App = defineComponent((props) => <div>Hello World</div>)`,
       'typescript',
-      monaco.Uri.parse('file:///app.tsx')
+      monaco.Uri.parse('file:///app.tsx'),
     ),
-  });
+  })
 
   const output = monaco.editor.create(document.getElementById('output')!, {
     readOnly: true,
@@ -72,19 +72,19 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
     model: monaco.editor.createModel(
       '',
       'typescript',
-      monaco.Uri.parse('file:///output.tsx')
+      monaco.Uri.parse('file:///output.tsx'),
     ),
-  });
+  })
 
   const reCompile = () => {
-    const src = editor.getValue();
+    const src = editor.getValue()
     const state = JSON.stringify({
       src,
       options: compilerOptions,
-    });
-    localStorage.setItem('state', state);
-    window.location.hash = encodeURIComponent(src);
-    console.clear();
+    })
+    localStorage.setItem('state', state)
+    window.location.hash = encodeURIComponent(src)
+    console.clear()
     try {
       const res = transform(src, {
         babelrc: false,
@@ -93,37 +93,37 @@ const App = defineComponent((props) => <div>Hello World</div>)`,
           [typescript, { isTSX: true }],
         ],
         ast: true,
-      });
-      console.log('AST', res.ast!);
-      output.setValue(res.code!);
+      })
+      console.log('AST', res.ast!)
+      output.setValue(res.code!)
     } catch (err: any) {
-      console.error(err);
-      output.setValue(err.message!);
+      console.error(err)
+      output.setValue(err.message!)
     }
-  };
+  }
 
   // handle resize
   window.addEventListener('resize', () => {
-    editor.layout();
-    output.layout();
-  });
+    editor.layout()
+    output.layout()
+  })
 
-  initOptions();
-  watchEffect(reCompile);
+  initOptions()
+  watchEffect(reCompile)
 
   // update compile output when input changes
-  editor.onDidChangeModelContent(debounce(reCompile));
+  editor.onDidChangeModelContent(debounce(reCompile))
 }
 
 function debounce<T extends (...args: any[]) => any>(fn: T, delay = 300): T {
-  let prevTimer: number | null = null;
+  let prevTimer: number | null = null
   return ((...args: any[]) => {
     if (prevTimer) {
-      clearTimeout(prevTimer);
+      clearTimeout(prevTimer)
     }
     prevTimer = window.setTimeout(() => {
-      fn(...args);
-      prevTimer = null;
-    }, delay);
-  }) as any;
+      fn(...args)
+      prevTimer = null
+    }, delay)
+  }) as any
 }

packages/jsx-explorer/src/options.tsx

@@ -1,7 +1,7 @@
-import { createApp, defineComponent, reactive } from 'vue';
-import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
+import { createApp, defineComponent, reactive } from 'vue'
+import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
 
-export { VueJSXPluginOptions };
+export { VueJSXPluginOptions }
 
 export const compilerOptions: VueJSXPluginOptions = reactive({
   mergeProps: true,
@@ -9,7 +9,7 @@ export const compilerOptions: VueJSXPluginOptions = reactive({
   transformOn: false,
   enableObjectSlots: true,
   resolveType: false,
-});
+})
 
 const App = defineComponent({
   setup() {
@@ -34,7 +34,7 @@ const App = defineComponent({
                 onChange={(e: Event) => {
                   compilerOptions.mergeProps = (
                     e.target as HTMLInputElement
-                  ).checked;
+                  ).checked
                 }}
               />
               <label for="mergeProps">mergeProps</label>
@@ -49,7 +49,7 @@ const App = defineComponent({
                 onChange={(e: Event) => {
                   compilerOptions.optimize = (
                     e.target as HTMLInputElement
-                  ).checked;
+                  ).checked
                 }}
               />
               <label for="optimize">optimize</label>
@@ -64,7 +64,7 @@ const App = defineComponent({
                 onChange={(e: Event) => {
                   compilerOptions.transformOn = (
                     e.target as HTMLInputElement
-                  ).checked;
+                  ).checked
                 }}
               />
               <label for="transformOn">transformOn</label>
@@ -79,7 +79,7 @@ const App = defineComponent({
                 onChange={(e: Event) => {
                   compilerOptions.enableObjectSlots = (
                     e.target as HTMLInputElement
-                  ).checked;
+                  ).checked
                 }}
               />
               <label for="enableObjectSlots">enableObjectSlots</label>
@@ -94,7 +94,7 @@ const App = defineComponent({
                 onChange={(e: Event) => {
                   compilerOptions.resolveType = (
                     e.target as HTMLInputElement
-                  ).checked;
+                  ).checked
                 }}
               />
               <label for="resolveType">resolveType</label>
@@ -102,10 +102,10 @@ const App = defineComponent({
           </ul>
         </div>
       </>,
-    ];
+    ]
   },
-});
+})
 
 export function initOptions() {
-  createApp(App).mount(document.getElementById('header')!);
+  createApp(App).mount(document.getElementById('header')!)
 }

packages/jsx-explorer/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
-import VueJSX from '@vitejs/plugin-vue-jsx';
+import { defineConfig } from 'vite'
+import VueJSX from '@vitejs/plugin-vue-jsx'
 
 export default defineConfig({
   resolve: {
@@ -11,4 +11,4 @@ export default defineConfig({
     'process.env.BABEL_TYPES_8_BREAKING': 'false',
   },
   plugins: [VueJSX()],
-});
+})