From dfdbde2cb47f97bc5d08116757b5d329642bad5a Mon Sep 17 00:00:00 2001 From: inokawa <48897392+inokawa@users.noreply.github.com> Date: Fri, 29 Dec 2023 14:46:59 +0900 Subject: [PATCH] Use Vue JSX --- .storybook/main.js | 38 ++++--- package-lock.json | 141 +++++++++++++++++++++++--- package.json | 1 + src/vue/{ListItem.ts => ListItem.tsx} | 18 ++-- src/vue/{VList.ts => VList.tsx} | 50 +++++---- 5 files changed, 185 insertions(+), 63 deletions(-) rename src/vue/{ListItem.ts => ListItem.tsx} (85%) rename src/vue/{VList.ts => VList.tsx} (92%) diff --git a/.storybook/main.js b/.storybook/main.js index 66798818c..26d4978b3 100644 --- a/.storybook/main.js +++ b/.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: {}, + }, + }; diff --git a/package-lock.json b/package-lock.json index ef23d4ce5..737fa0cf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,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", @@ -6635,6 +6636,19 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true }, + "node_modules/@storybook/vue3-vite/node_modules/@vitejs/plugin-vue": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.0.tgz", + "integrity": "sha512-XHuyFdAikWRmHuAd89FOyUGIjrBU5KlxJtyi2hVeR9ySGFxQwE0bl5xAQju/ArMq5azdBivY4d+D2yPKwoYWUg==", + "dev": true, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.0.0 || ^5.0.0", + "vue": "^3.2.25" + } + }, "node_modules/@storybook/vue3-vite/node_modules/magic-string": { "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", @@ -7651,17 +7665,60 @@ "node": ">=0.10.0" } }, - "node_modules/@vitejs/plugin-vue": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz", - "integrity": "sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==", + "node_modules/@vitejs/plugin-vue-jsx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz", + "integrity": "sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==", "dev": true, + "dependencies": { + "@babel/core": "^7.23.3", + "@babel/plugin-transform-typescript": "^7.23.3", + "@vue/babel-plugin-jsx": "^1.1.5" + }, "engines": { "node": "^14.18.0 || >=16.0.0" }, "peerDependencies": { "vite": "^4.0.0 || ^5.0.0", - "vue": "^3.2.25" + "vue": "^3.0.0" + } + }, + "node_modules/@vue/babel-helper-vue-transform-on": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz", + "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==", + "dev": true + }, + "node_modules/@vue/babel-plugin-jsx": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz", + "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "@babel/template": "^7.22.5", + "@babel/traverse": "^7.22.5", + "@babel/types": "^7.22.5", + "@vue/babel-helper-vue-transform-on": "^1.1.5", + "camelcase": "^6.3.0", + "html-tags": "^3.3.1", + "svg-tags": "^1.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@vue/babel-plugin-jsx/node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/@vue/compiler-core": { @@ -12008,9 +12065,9 @@ "dev": true }, "node_modules/html-tags": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", - "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", "dev": true, "engines": { "node": ">=8" @@ -19070,6 +19127,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -25358,6 +25421,12 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true }, + "@vitejs/plugin-vue": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.0.tgz", + "integrity": "sha512-XHuyFdAikWRmHuAd89FOyUGIjrBU5KlxJtyi2hVeR9ySGFxQwE0bl5xAQju/ArMq5azdBivY4d+D2yPKwoYWUg==", + "dev": true + }, "magic-string": { "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", @@ -26125,12 +26194,48 @@ } } }, - "@vitejs/plugin-vue": { - "version": "4.5.2", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz", - "integrity": "sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==", + "@vitejs/plugin-vue-jsx": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz", + "integrity": "sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==", + "dev": true, + "requires": { + "@babel/core": "^7.23.3", + "@babel/plugin-transform-typescript": "^7.23.3", + "@vue/babel-plugin-jsx": "^1.1.5" + } + }, + "@vue/babel-helper-vue-transform-on": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz", + "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==", "dev": true }, + "@vue/babel-plugin-jsx": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz", + "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "@babel/template": "^7.22.5", + "@babel/traverse": "^7.22.5", + "@babel/types": "^7.22.5", + "@vue/babel-helper-vue-transform-on": "^1.1.5", + "camelcase": "^6.3.0", + "html-tags": "^3.3.1", + "svg-tags": "^1.0.0" + }, + "dependencies": { + "camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true + } + } + }, "@vue/compiler-core": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.0.tgz", @@ -29459,9 +29564,9 @@ "dev": true }, "html-tags": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz", - "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", "dev": true }, "htmlparser2": { @@ -34694,6 +34799,12 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index c0c81ec34..bb39a1fd1 100644 --- a/package.json +++ b/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", diff --git a/src/vue/ListItem.ts b/src/vue/ListItem.tsx similarity index 85% rename from src/vue/ListItem.ts rename to src/vue/ListItem.tsx index 72103b565..bf10fbea0 100644 --- a/src/vue/ListItem.ts +++ b/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 & { _element: "div" }; const style: Record = { margin: 0, @@ -56,13 +57,10 @@ export const ListItem = /*#__PURE__*/ defineComponent({ style["display"] = "flex"; } - return h( - element, - { - ref: elementRef, - style: style, - }, - children + return ( + + {children} + ); }; }, diff --git a/src/vue/VList.ts b/src/vue/VList.tsx similarity index 92% rename from src/vue/VList.ts rename to src/vue/VList.tsx index d420c53d4..140704cc4 100644 --- a/src/vue/VList.ts +++ b/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, - }) + ); } - return h( - "div", - { - ref: rootRef, - style: { + return ( +
+
+ {items} +
+
); }; },