workflow: improve template explorer

2019-10-04 17:43:20 -04:00
parent 8d49b97cc3
commit 0873254c6c
7 changed files with 313 additions and 53 deletions
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -0,0 +1,72 @@
+import { h, reactive, createApp } from '@vue/runtime-dom'
+import { CompilerOptions } from '@vue/compiler-dom'
+
+export const compilerOptions: CompilerOptions = reactive({
+  mode: 'module',
+  prefixIdentifiers: false,
+  hoistStatic: false
+})
+
+const App = {
+  setup() {
+    return () => [
+      h('h1', `Vue 3 Template Explorer`),
+      h('div', { id: 'options' }, [
+        // mode selection
+        h('span', { class: 'options-group' }, [
+          h('span', { class: 'label' }, 'Mode:'),
+          h('input', {
+            type: 'radio',
+            id: 'mode-module',
+            name: 'mode',
+            checked: compilerOptions.mode === 'module',
+            onChange() {
+              compilerOptions.mode = 'module'
+            }
+          }),
+          h('label', { for: 'mode-module' }, 'module'),
+          h('input', {
+            type: 'radio',
+            id: 'mode-function',
+            name: 'mode',
+            checked: compilerOptions.mode === 'function',
+            onChange() {
+              compilerOptions.mode = 'function'
+            }
+          }),
+          h('label', { for: 'mode-function' }, 'function')
+        ]),
+
+        // toggle prefixIdentifiers
+        h('input', {
+          type: 'checkbox',
+          id: 'prefix',
+          disabled: compilerOptions.mode === 'module',
+          checked:
+            compilerOptions.prefixIdentifiers ||
+            compilerOptions.mode === 'module',
+          onChange(e: any) {
+            compilerOptions.prefixIdentifiers =
+              e.target.checked || compilerOptions.mode === 'module'
+          }
+        }),
+        h('label', { for: 'prefix' }, 'prefixIdentifiers'),
+
+        // toggle hoistStatic
+        h('input', {
+          type: 'checkbox',
+          id: 'hoist',
+          checked: compilerOptions.hoistStatic,
+          onChange(e: any) {
+            compilerOptions.hoistStatic = e.target.checked
+          }
+        }),
+        h('label', { for: 'hoist' }, 'hoistStatic')
+      ])
+    ]
+  }
+}
+
+export function initOptions() {
+  createApp().mount(App, document.getElementById('header') as HTMLElement)
+}