error occor with jsx-vapor, note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

[8797110103-8955]

my code is all write in tsx,
normally use vue 3.6.x + @vitejs/plugin-vue-jsx to build.
when i change to

import vueJsxVapor from "vue-jsx-vapor/vite";

export const basicConfig = {
  get plugins() {
    if (plugins.length === 0)
      plugins = [
        aliasWithTsconfig({ cwd: root }),
        // @ts-ignore
        vueJsxVapor({ macros: true }), // same with options or null
        pollyfill()
      ];
    return plugins;
  }
}

will report me with:

thread '<unnamed>' (24860) panicked at C:\Users\runneradmin\.cargo\git\checkouts\oxc-35af26dd473e1f70\c9fed4e\crates\oxc_ast\src\ast\jsx.rs:261:1:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

[zhiyuanzmj]

Do you want to build JSX as Vapor or Virtual DOM?

[zhiyuanzmj]

Option::unwrap() is shouldn't appear, Can you provide your JSX codes for me to debug.

[8797110103-8955]

need i migrate my app from createApp to createVaporApp (or defineComponet)?
based on some articles, it seems unnecessary to do this, but maybe needed?

[zhiyuanzmj]

I guess your code has empty JSXExpression, such as <div foo={} />, i should to support JSXEmptyExpression.

[zhiyuanzmj]

If you want use JSX Vapor, need use createVaporApp instead of createApp, or you can add interop: true option to support Virtual DOM and vapor co-usage.

VueJsxVapor({
  interop: true
})

And then, only JSX in defineVaporComponent will be compile to Vapor, others is Virtual DOM. Convenient for migration.
https://jsx-vapor.netlify.app/introduction/interop.html

[8797110103-8955]

just like my project have many code like <div foo={} />,
and with near thirty createApp, inaccurate mpa? (a big project),
and remaining pages without error messages are basically empty.

but in my understand, i don't need any config & migrate to createVaporApp .
just want the ultimate performance, hope all product to vapor

here are some error for reference with interop: true. If any further testing is needed, I'd be happy to cooperate.

Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
  Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/package.scene/right/src/components/custom/seasonsDateDisplay.tsx:111:14
  117 |                {seasonsI18n.t("spring")}:{" "}
  118 |                {`${Math.floor(winterEndDay.value) === 365 ? 1 : Math.floor(winterEndDay.value) + 1} - ${Math.floor(spr...
  119 |              </div>
      |                    ^
  120 |              <div data-v-inspector="package.scene/right/src/components/custom/seasonsDateDisplay.tsx:110:12">
  121 |                {seasonsI18n.t("summer")}:{" "}
17:42:24 [vite] (client) Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
  Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/package.scene/main/immerse/angle/index.tsx:101:68
  139 |                                {getNavigationKey(index, "RotateView")}
  140 |                                {getNavigationKey(index, "RotateView2")}
  141 |  ...se/angle/index.tsx:126:30">{TNavigation("RotateView")}</div>
      |                                                                 ^
  142 |                              </div>
  143 |                              <div class={style.mouseTipsItem} data-v-inspector="package.scene/main/immerse/angle/index...
17:42:24 [vite] (client) Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
  Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/package.scene/right/src/pcg/scatter/simplify/content/units.tsx:220:15
  203 |                 _createElementVNode("div", { class: _normalizeClass(style["unit-text"]) }, [
  204 |                         _createElementVNode("img", { src: unit.logo || assetLogoMap.get(unit.asset_id) }, null, 8, _hoisted_1),
  205 |  ...:199:177">{unit.title}</p>, utf8Length(unit.title) < 22]]]),
      |                                                                 ^
  206 |                         _withDirectives(_createVNode(RateSlider, {
  207 |                                 value: unit.rate,
17:42:25 [vite] (client) ✨ new dependencies optimized: pinia, pinyin-match
17:42:25 [vite] (client) ✨ optimized dependencies changed. reloading
17:42:25 [vite] (client) Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
17:42:29 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
  Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/package.scene/main/immerse/angle/index.tsx:101:68
  139 |                                {getNavigationKey(index, "RotateView")}
  140 |                                {getNavigationKey(index, "RotateView2")}
  141 |  ...se/angle/index.tsx:126:30">{TNavigation("RotateView")}</div>
      |                                                                 ^
  142 |                              </div>
  143 |                              <div class={style.mouseTipsItem} data-v-inspector="package.scene/main/immerse/angle/index...
      at TransformPluginContext._formatLog (file:///C:/Codes/fusion_context/node_modules/.pnpm/rolldown-vite@7.3.1_@types+node@22.18.1_esbuild@0.25.12_less@4.5.1_tsx@4.21.0/node_modules/rolldown-vite/dist/node/chunks/node.js:30036:43)
      at TransformPluginContext.error (file:///C:/Codes/fusion_context/node_modules/.pnpm/rolldown-vite@7.3.1_@types+node@22.18.1_esbuild@0.25.12_less@4.5.1_tsx@4.21.0/node_modules/rolldown-vite/dist/node/chunks/node.js:30033:14)
      at TransformPluginContext.transform (file:///C:/Codes/fusion_context/node_modules/.pnpm/rolldown-vite@7.3.1_@types+node@22.18.1_esbuild@0.25.12_less@4.5.1_tsx@4.21.0/node_modules/rolldown-vite/dist/node/chunks/node.js:28037:10)
      at async file:///C:/Codes/fusion_context/node_modules/.pnpm/vite-plugin-inspect@11.3.3_rolldown-vite@7.3.1__9898394915fa2d2191b2c2f61240302d/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.BzUKaD4x.mjs:403:17
      at async EnvironmentPluginContainer.transform (file:///C:/Codes/fusion_context/node_modules/.pnpm/rolldown-vite@7.3.1_@types+node@22.18.1_esbuild@0.25.12_less@4.5.1_tsx@4.21.0/node_modules/rolldown-vite/dist/node/chunks/node.js:29825:14)
      at async loadAndTransform (file:///C:/Codes/fusion_context/node_modules/.pnpm/rolldown-vite@7.3.1_@types+node@22.18.1_esbuild@0.25.12_less@4.5.1_tsx@4.21.0/node_modules/rolldown-vite/dist/node/chunks/node.js:20950:26)
 
Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/packages/aiFunctions/src/leftSection/TextTo3D.tsx:50:83
  52 |                          _normalizeVNode(() => t("useFixedSeed")),
  53 |                          _cache[0] || (_cache[0] = _normalizeVNode(" &nbsp;&nbsp;", -1)),
  54 |  ...eftSection/TextTo3D.tsx:45:90">{t("seedHovertips")}</div>]])
     |                                                                 ^
  55 |                  ], 2), _createVNode(DRCheckbox, {
  56 |                          type: "switch",

 Plugin: vite:import-analysis
  File: C:/Codes/fusion_context/packages/repository/src/view/assetDetail/index.tsx:84:46
  91 |                                          _: 1
  92 |                                  }, 8, ["onClick"])), [[vTips, () => <div class={"detail_tip"} data-v-inspector="packages/repository/src/view/asse...
  93 |  .../view/assetDetail/index.tsx:79:16">{t("closeSidebar")}</div>
     |                                                                 ^
  94 |                  <div data-v-inspector="packages/repository/src/view/assetDetail/index.tsx:80:16">{getShortcutValue("A...
  95 |                </div>]])], 2),

[zhiyuanzmj]

Thanks I really need feedback from real projects.
If you are using interop: true, no need createVaporApp, only need add a runtime plugin:

import { vaporInteropPlugin } from 'vue'
createApp(App).use(vaporInteropPlugin).mount('#app')

[zhiyuanzmj]

vite:import-analysis

It seems some JSX don't be compiled. can you provide the JSX snippet from aiFunctions/src/leftSection/TextTo3D.tsx for me to debug?

[8797110103-8955]

// aiFunctions/src/leftSection/TextTo3D.tsx

import { Question } from "@d5/icons";
import { DRCheckbox, DRText } from "@runtime:components";
import { defineComponent, PropType, shallowRef } from "vue";
import PromptInput from "../components/promptInput";
import { ArtStyle, TextTo3DExpose } from "../index.type";
import { textTo3DParams } from "../model";
import { t } from "../util";
import styles from "./index.module.less";

interface ArtStyleItem {
  label: string;
  value: ArtStyle;
  img: string;
}

export default defineComponent((_, { expose }) => {
  const promptRef = shallowRef<HTMLElement>();
  const seedInputRef = shallowRef<HTMLElement>();

  const focusPrompt = () => {
    promptRef.value?.focus();
  };

  const focusSeed = () => {
    seedInputRef.value?.focus();
  };

  expose<TextTo3DExpose>({
    focusPrompt,
    focusSeed
  });

  return () => (
    <>
      <div class={styles.box}>
        <div class={styles.boxTitle}>{t("prompt")}</div>
        <PromptInput
          placeholder={t("promptDesc")}
          v-model:modelValue={textTo3DParams.prompt}
          ref={promptRef}
        />
      </div>
      <div class={styles.box}>
        <div class={styles.boxTitle}>
          <div class={styles.tipTitle}>
            {t("useFixedSeed")} &nbsp;&nbsp;
            <Question
              size="16px"
              v-tips={() => <div class={styles.tipContent}>{t("seedHovertips")}</div>}
            />
          </div>
          <DRCheckbox
            type="switch"
            value={textTo3DParams.useSeed}
            onInput={(e) => {
              textTo3DParams.useSeed = e.value;
              if (textTo3DParams.useSeed && !textTo3DParams.seed) textTo3DParams.seed = 1;
            }}
          />
        </div>
        <DRText
          ref={seedInputRef}
          disabled={!textTo3DParams.useSeed}
          class={styles.seedInput}
          {...{
            targetAttrs: {
              placeholder: t("seedInp")
            }
          }}
          value={textTo3DParams.seed}
          onInput={(e: any) => {
            const reg = /^[0-9]*$/;
            let value = e.value.trim();
            if (!reg.test(value)) {
              e.target.value = value.replace(/[^\d]/g, "");
              return;
            }

            if (!value || (value && value < 1)) value = 1;
            if (value > 2147483647) value = 2147483647;
            e.target.value = value;
            textTo3DParams.seed = Number(value);
          }}
        />
      </div>
    </>
  );
});

const ArtStyleItem = defineComponent({
  props: {
    artStyle: {
      type: Object as PropType<ArtStyleItem>,
      required: true
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    return () => (
      <div class={styles.artStyleItem} selected={props.selected}>
        <div>{props.artStyle.label}</div>
        <img src={props.artStyle.img} />
      </div>
    );
  }
});

and icon in line 50

import { defineComponent, h, shallowRef, type SVGAttributes } from "vue";
import { props, useContext } from "./index_define";

export default /* @__PURE__ */ defineComponent<SVGAttributes & Partial<typeof props>>({
  name: "ICON:Question",
  props,
  setup(props, { expose }) {
    const $el = shallowRef();
    const context = useContext($el, props);
    expose({ $el });
    return () =>
      h(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          width: context._width.value,
          height: context._height.value,
          viewBox: "0 0 16 16",
          preserveAspectRatio: "xMidYMid meet",
          fill: "none",
          role: "presentation",
          ref: $el,
          spin: context.spin.value,
          rtl: context.rtl.value,
          class: "_scoped_ci_svg"
        },
        [
          h("g", {}, [
            h("path", {
              d: "M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2zm0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3zm0 7.5A.75.75 0 1 1 8 12a.75.75 0 0 1 0-1.5zm0-6a2 2 0 0 1 2 2c0 .73-.212 1.14-.754 1.708l-.264.27C8.605 8.87 8.5 9.082 8.5 9.5a.5.5 0 0 1-1 0c0-.73.212-1.14.754-1.708l.264-.27C8.895 7.13 9 6.918 9 6.5a1 1 0 0 0-2 0 .5.5 0 0 1-1 0 2 2 0 0 1 2-2z",
              "data-follow-fill": "currentColor",
              fill: context._fill.value
            })
          ])
        ]
      );
  }
});

// define
import { computed, toRefs, onMounted, onUpdated } from "vue";

const SN = [String, Number] as any as string | number;
const S = String as any as string;
const B = {
  type: Boolean,
  default: false
} as any as boolean;

export const props = {
  width: SN,
  height: SN,
  stroke: S,
  fill: S,
  color: S,
  spin: B,
  rtl: B,
  size: {
    type: SN,
    default: "1em"
  } as any as typeof SN
};

export function useContext(host, props) {
  const context = toRefs(props) as any;
  context._fill = computed(() => props.fill || props.color);
  context._stroke = computed(() => props.stroke || props.color);
  context._width = computed(() => props.width || props.size);
  context._height = computed(() => props.height || props.size);

  function run(key) {
    const element = host.value as HTMLElement;
    if (!element) return;
    const dataKey = `data-follow-${key}`;
    element.querySelectorAll(`[${dataKey}]`).forEach((item) => {
      const attr = item.getAttribute(dataKey) || "";
      item.setAttribute(key, attr);
    });
  }
  function merge() {
    if (!context._fill.value) run("fill");
    if (!context._stroke.value) run("stroke");
  }
  onMounted(merge);
  onUpdated(merge);

  return context;
}

error by transform for L54 don't understand, feel it‘s not the reason for compile

[8797110103-8955]

maybe a suspicion? a weird driective code

interface like this

[zhiyuanzmj]

vue-jsx-vapor don't wrap custom directives to resolveDirectives("vTips"), and your code don't import vTips. so vite can't find the vTips directive. i should to wrapped it by resolveDirectives.

[zhiyuanzmj]

Do you have also use a @vitejs/vue-jsx? it will close vite's TS transformer. and vue-jsx-vapor don't process TS，TS needs to be handled by vite. for smaller bundler size.

[8797110103-8955]

noop, had close it when try vapor.

[8797110103-8955]

project use rolldown-vite, and customized many logics,
let's me try to reproduce that using a single smallest unit.

[zhiyuanzmj]

I don't know the JSXEmptyExpression's meaning:<div foo={} />, What do you usually do with it.
Should it be compiler to <div foo={undefined}> ?