fix: 🐛 parser state

packages/parser/src/shared/utils.ts

@@ -32,8 +32,10 @@ export function traverseAST(
 }
 
 export function generateCode(node: Node) {
+  if (!node) return '';
   try {
     const func = (generate as any).default || generate;
+
     const generated = func(node, {
       comments: false,
       concise: true,

packages/parser/src/vue/scripts.ts

@@ -196,10 +196,24 @@ function getState(block: BlockStatement) {
   if (!stateExpression) return {};
   const state: BlockState = {};
   for (const item of stateExpression.properties) {
-    const { key, value } = item as ObjectProperty;
-    if (key.type === 'Identifier') {
-      const code = generateCode(value);
-      state[key.name] = getJSExpression(code);
+    if (item.type === 'ObjectProperty') {
+      const { key, value } = item as ObjectProperty;
+      if (key.type === 'Identifier') {
+        const code = generateCode(value);
+        state[key.name] = getJSExpression(code);
+      }
+    } else if (item.type === 'ObjectMethod') {
+      const { key, params, body } = item as ObjectMethod;
+      if (key.type === 'Identifier') {
+        const bodyCode = generateCode(body);
+        const paramsCode = params
+          .map((n) => {
+            return (n as any).name || 'none';
+          })
+          .join(',');
+        const code = `(${paramsCode}) => ${bodyCode}`;
+        state[key.name] = getJSExpression(code);
+      }
     }
   }
   return state;

packages/parser/tests/sources/test_27.ts

@@ -1,48 +1,36 @@
 export const test_27 = `
 <template>
-
-    <button v-if="disabled">aaaa</button>
-    <button v-else>bbbb</button>
-   
+  <div class="main-layout">
+    <div class="page-content">
+      <RouterView />
+    </div>
+    <div class="tab-bar">
+      <div class="tab-item" v-for="(tab, idx) in state.tabs" :key="idx" :class="{ active: state.activeTab === tab.path }" @click="state.switchTab(tab.path)">
+        <VanIcon :name="tab.icon" :size="22" :color="state.activeTab === tab.path ? '#667eea' : '#999'"></VanIcon>
+        <span class="tab-label" :class="{ active: state.activeTab === tab.path }">{{ tab.title }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-  import { defineComponent, reactive } from 'vue';
-import { XIcon } from '@vtj/ui';
-import { List } from '@vtj/icons';
+import { defineComponent, reactive } from 'vue';
 import { useProvider } from '@vtj/renderer';
+import { Icon } from 'vant';
 export default defineComponent({
-  name: 'Scl90ProgressBar',
-  components: { XIcon },
-  props: {
-    current: {
-      type: Number,
-      required: false,
-      default: 0
-    }
-  },
+  name: 'MainLayout',
+  components: { VanIcon: Icon },
   setup(props) {
-    const provider = useProvider({ id: '3j60fz3e', version: '' });
+    const provider = useProvider({ id: 'vj6w05mm', version: '' });
     const state = reactive({
-      dots: [],
-      percent: 0,
-      hintText: ''
+      switchTab(path) {
+        state.activeTab = path;
+        this.$router.push(path);
+      }
     });
-    return { state, props, provider, List };
+    return { state, props, provider };
   },
-
-  computed: {
-    disabled() {
-    return !!this.state.value
-    }
-  },
-
-    watch: {
-    current: {
-      handler(v) {
-        console.log(v)
-      },
-      immediate: true
-    }
+  created() {
+    this.state.activeTab = this.$route.path;
   }
 });
 </script>