Merge pull request #302 from inokawa/vue-jsx

Use Vue JSX

.storybook/main.js

@@ -1,13 +1,27 @@
+import { mergeConfig } from "vite";
+
 /** @type { import('@storybook/react-vite').StorybookConfig } */
-export default {
-  stories: process.env.STORYBOOK_VUE
-    ? ["../stories/vue/**/*.stories.@(js|jsx|ts|tsx)"]
-    : ["../stories/react/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-storysource"],
-  framework: {
-    name: process.env.STORYBOOK_VUE
-      ? "@storybook/vue3-vite"
-      : "@storybook/react-vite",
-    options: {},
-  },
-};
+export default process.env.STORYBOOK_VUE
+  ? {
+      stories: ["../stories/vue/**/*.stories.@(js|jsx|ts|tsx)"],
+      addons: ["@storybook/addon-storysource"],
+      framework: {
+        name: "@storybook/vue3-vite",
+        options: {},
+      },
+      viteFinal: async (config) => {
+        const { default: vueJsx } = await import("@vitejs/plugin-vue-jsx");
+
+        return mergeConfig(config, {
+          plugins: [vueJsx()],
+        });
+      },
+    }
+  : {
+      stories: ["../stories/react/**/*.stories.@(js|jsx|ts|tsx)"],
+      addons: ["@storybook/addon-storysource"],
+      framework: {
+        name: "@storybook/react-vite",
+        options: {},
+      },
+    };

package.json

@@ -67,6 +67,7 @@
     "@types/react-virtualized": "9.21.28",
     "@types/react-window": "1.8.8",
     "@typescript-eslint/parser": "6.16.0",
+    "@vitejs/plugin-vue-jsx": "3.1.0",
     "concurrently": "8.2.2",
     "eslint": "8.56.0",
     "eslint-plugin-react-hooks": "4.6.0",

src/vue/ListItem.ts → src/vue/ListItem.tsx

@@ -1,4 +1,5 @@
-import { ref, h, defineComponent, watch } from "vue";
+/** @jsxImportSource vue */
+import { ref, defineComponent, watch } from "vue";
 import { ItemResizeObserver } from "../core/resizer";
 import { isRTLDocument } from "../core/environment";
 
@@ -38,9 +39,9 @@ export const ListItem = /*#__PURE__*/ defineComponent({
         _children: children,
         _offset: offset,
         _hide: hide,
-        _element: element,
+        _element: Element,
         _isHorizontal: isHorizontal,
-      } = props;
+      } = props as Omit<typeof props, "_element"> & { _element: "div" };
 
       const style: Record<string, number | string> = {
         margin: 0,
@@ -56,13 +57,10 @@ export const ListItem = /*#__PURE__*/ defineComponent({
         style["display"] = "flex";
       }
 
-      return h(
-        element,
-        {
-          ref: elementRef,
-          style: style,
-        },
-        children
+      return (
+        <Element ref={elementRef} style={style}>
+          {children}
+        </Element>
       );
     };
   },

src/vue/VList.ts → src/vue/VList.tsx

@@ -1,6 +1,6 @@
+/** @jsxImportSource vue */
 import {
   ref,
-  h,
   onMounted,
   defineComponent,
   onUnmounted,
@@ -207,45 +207,43 @@ export const VList = /*#__PURE__*/ defineComponent({
         const e = slots.default(props.data![i]!)[0]!;
         const key = e.key;
         items.push(
-          h(ListItem, {
-            key: exists(key) ? key : "_" + i,
-            _resizer: resizer._observeItem,
-            _index: i,
-            _offset: store._getItemOffset(i),
-            _hide: store._isUnmeasuredItem(i),
-            _element: "div",
-            _children: e,
-            _isHorizontal: isHorizontal,
-          })
+          <ListItem
+            key={exists(key) ? key : "_" + i}
+            _resizer={resizer._observeItem}
+            _index={i}
+            _offset={store._getItemOffset(i)}
+            _hide={store._isUnmeasuredItem(i)}
+            _element="div"
+            _children={e}
+            _isHorizontal={isHorizontal}
+          />
         );
       }
 
-      return h(
-        "div",
-        {
-          ref: rootRef,
-          style: {
+      return (
+        <div
+          ref={rootRef}
+          style={{
             display: isHorizontal ? "inline-block" : "block",
             [isHorizontal ? "overflowX" : "overflowY"]: "auto",
             overflowAnchor: "none",
             contain: "strict",
             width: "100%",
             height: "100%",
-          },
-        },
-        h(
-          "div",
-          {
-            style: {
+          }}
+        >
+          <div
+            style={{
               position: "relative",
               visibility: "hidden",
               width: isHorizontal ? scrollSize + "px" : "100%",
               height: isHorizontal ? "100%" : scrollSize + "px",
               pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
-            },
-          },
-          items
-        )
+            }}
+          >
+            {items}
+          </div>
+        </div>
       );
     };
   },