Optimize Vue Virtualizer with @vue/babel-plugin-jsx

.storybook/main.js

@@ -13,7 +13,7 @@ export default process.env.STORYBOOK_VUE
  const { default: vueJsx } = await import("@vitejs/plugin-vue-jsx");
 
  return mergeConfig(config, {
- plugins: [vueJsx()],
+ plugins: [vueJsx({ optimize: true })],
  });
  },
  }

package.json

@@ -77,6 +77,7 @@
  "@types/react-window": "1.8.8",
  "@typescript-eslint/parser": "6.20.0",
  "@vitejs/plugin-vue-jsx": "3.1.0",
+ "@vue/babel-plugin-jsx": "1.2.1",
  "babel-preset-solid": "1.8.12",
  "cmdk": "0.2.1",
  "concurrently": "8.2.2",

rollup.config.mjs

@@ -3,6 +3,7 @@ import terser from "@rollup/plugin-terser";
 import { babel, getBabelOutputPlugin } from "@rollup/plugin-babel";
 import banner from "rollup-plugin-banner2";
 import pkg from "./package.json" assert { type: "json" };
+import vueVNodePlugin from "./scripts/babel-plugin-annotate-vue-vnode.mjs";
 
 const external = (id) =>
  [
@@ -14,7 +15,12 @@ const terserPlugin = terser({
  ecma: 2018,
  module: true,
  compress: { passes: 5, unsafe: true, keep_fargs: false },
- mangle: { properties: { regex: "^_" } },
+ mangle: {
+ properties: {
+ // @vue/babel-plugin-jsx may generate _ field
+ regex: "^_.+",
+ },
+ },
  format: {
  preserve_annotations: true,
  },
@@ -72,6 +78,18 @@ export default [
  outDir: ".",
  // declaration: true,
  exclude: ["**/*.{spec,stories}.*"],
+ jsx: "preserve",
+ }),
+ babel({
+ babelrc: false,
+ configFile: false,
+ extensions: [".jsx", ".tsx"],
+ babelHelpers: "bundled",
+ plugins: [["@vue/babel-plugin-jsx", { optimize: true }]],
+ parserOpts: { sourceType: "module", plugins: ["jsx", "typescript"] },
+ }),
+ getBabelOutputPlugin({
+ plugins: [vueVNodePlugin],
  }),
  terserPlugin,
  ],
@@ -103,7 +121,6 @@ export default [
  babel({
  babelrc: false,
  configFile: false,
- filter: /\.(jsx|tsx)$/,
  extensions: [".jsx", ".tsx"],
  babelHelpers: "bundled",
  presets: ["babel-preset-solid"],

scripts/babel-plugin-annotate-vue-vnode.mjs

@@ -0,0 +1,33 @@
+function isCreateVNodeCall(path) {
+ const calleePath = path.get("callee");
+ for (const method of ["createVNode"]) {
+ if (calleePath.referencesImport("vue", method)) {
+ return true;
+ }
+ }
+ return false;
+}
+
+/**
+ * annotate argument of createVNode for terser
+ */
+export default ({ types: t }) => {
+ return {
+ name: "babel-plugin-annotate-vue-vnode",
+ visitor: {
+ CallExpression(path) {
+ if (isCreateVNodeCall(path)) {
+ const [type, props, children, patchFlag, dynamicProps] =
+ path.get("arguments");
+ if (dynamicProps && t.isArrayExpression(dynamicProps)) {
+ dynamicProps.get("elements").forEach((e) => {
+ if (e.node.value.startsWith("_")) {
+ e.addComment("leading", "#__KEY__", false);
+ }
+ });
+ }
+ }
+ },
+ },
+ };
+};

src/vue/ListItem.tsx

@@ -17,7 +17,6 @@ export const ListItem = /*#__PURE__*/ defineComponent({
  _offset: { type: Number, required: true },
  _hide: { type: Boolean },
  _isHorizontal: { type: Boolean },
- _element: { type: String, required: true },
  },
  setup(props) {
  const elementRef = ref<HTMLDivElement>();
@@ -38,9 +37,8 @@ export const ListItem = /*#__PURE__*/ defineComponent({
  _children: children,
  _offset: offset,
  _hide: hide,
- _element: Element,
  _isHorizontal: isHorizontal,
- } = props as Omit<typeof props, "_element"> & { _element: "div" };
+ } = props;
 
  const style: StyleValue = {
  margin: 0,
@@ -57,9 +55,9 @@ export const ListItem = /*#__PURE__*/ defineComponent({
  }
 
  return (
- <Element ref={elementRef} style={style}>
+ <div ref={elementRef} style={style}>
  {children}
- </Element>
+ </div>
  );
  };
  },

src/vue/Virtualizer.tsx

@@ -206,7 +206,6 @@ export const Virtualizer = /*#__PURE__*/ defineComponent({
  _index={i}
  _offset={store._getItemOffset(i)}
  _hide={store._isUnmeasuredItem(i)}
- _element="div"
  _children={e}
  _isHorizontal={isHorizontal}
  />

src/vue/WindowVirtualizer.tsx

@@ -153,7 +153,6 @@ export const WindowVirtualizer = /*#__PURE__*/ defineComponent({
  _index={i}
  _offset={store._getItemOffset(i)}
  _hide={store._isUnmeasuredItem(i)}
- _element="div"
  _children={e}
  _isHorizontal={isHorizontal}
  />