workflow(template-explorer): fix cacheHandlers disabled state

diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index 64fe809d7e62c66828be7e70fc1ec2abb540afa3..9f7c4b16f9446ee3a859a6fac93b00c530a25d20 100644 (file)
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -10,83 +10,86 @@ export const compilerOptions: CompilerOptions = reactive({
 
 const App = {
   setup() {
-    return () => [
-      h('h1', `Vue 3 Template Explorer`),
-      h(
-        'a',
-        {
-          href: `https://github.com/vuejs/vue-next/tree/${__COMMIT__}`,
-          target: `_blank`
-        },
-        `@${__COMMIT__}`
-      ),
-      h('div', { id: 'options' }, [
-        // mode selection
-        h('span', { class: 'options-group' }, [
-          h('span', { class: 'label' }, 'Mode:'),
+    return () => {
+      const usePrefix =
+        compilerOptions.prefixIdentifiers || compilerOptions.mode === 'module'
+      return [
+        h('h1', `Vue 3 Template Explorer`),
+        h(
+          'a',
+          {
+            href: `https://github.com/vuejs/vue-next/tree/${__COMMIT__}`,
+            target: `_blank`
+          },
+          `@${__COMMIT__}`
+        ),
+        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: 'radio',
-            id: 'mode-module',
-            name: 'mode',
-            checked: compilerOptions.mode === 'module',
-            onChange() {
-              compilerOptions.mode = 'module'
+            type: 'checkbox',
+            id: 'prefix',
+            disabled: compilerOptions.mode === 'module',
+            checked: usePrefix,
+            onChange(e: Event) {
+              compilerOptions.prefixIdentifiers =
+                (<HTMLInputElement>e.target).checked ||
+                compilerOptions.mode === 'module'
             }
           }),
-          h('label', { for: 'mode-module' }, 'module'),
+          h('label', { for: 'prefix' }, 'prefixIdentifiers'),
+
+          // toggle hoistStatic
           h('input', {
-            type: 'radio',
-            id: 'mode-function',
-            name: 'mode',
-            checked: compilerOptions.mode === 'function',
-            onChange() {
-              compilerOptions.mode = 'function'
+            type: 'checkbox',
+            id: 'hoist',
+            checked: compilerOptions.hoistStatic,
+            onChange(e: Event) {
+              compilerOptions.hoistStatic = (<HTMLInputElement>e.target).checked
             }
           }),
-          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: Event) {
-            compilerOptions.prefixIdentifiers =
-              (<HTMLInputElement>e.target).checked ||
-              compilerOptions.mode === 'module'
-          }
-        }),
-        h('label', { for: 'prefix' }, 'prefixIdentifiers'),
-
-        // toggle hoistStatic
-        h('input', {
-          type: 'checkbox',
-          id: 'hoist',
-          checked: compilerOptions.hoistStatic,
-          onChange(e: Event) {
-            compilerOptions.hoistStatic = (<HTMLInputElement>e.target).checked
-          }
-        }),
-        h('label', { for: 'hoist' }, 'hoistStatic'),
+          h('label', { for: 'hoist' }, 'hoistStatic'),
 
-        // toggle cacheHandlers
-        h('input', {
-          type: 'checkbox',
-          id: 'cache',
-          checked:
-            compilerOptions.cacheHandlers && compilerOptions.prefixIdentifiers,
-          disabled: !compilerOptions.prefixIdentifiers,
-          onChange(e: Event) {
-            compilerOptions.cacheHandlers = (<HTMLInputElement>e.target).checked
-          }
-        }),
-        h('label', { for: 'cache' }, 'cacheHandlers')
-      ])
-    ]
+          // toggle cacheHandlers
+          h('input', {
+            type: 'checkbox',
+            id: 'cache',
+            checked: usePrefix && compilerOptions.cacheHandlers,
+            disabled: !usePrefix,
+            onChange(e: Event) {
+              compilerOptions.cacheHandlers = (<HTMLInputElement>(
+                e.target
+              )).checked
+            }
+          }),
+          h('label', { for: 'cache' }, 'cacheHandlers')
+        ])
+      ]
+    }
   }
 }