Mitosis exports className as class for qwik
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 672
- PR merge metrics
- No merged PRs in 30d
Description
### I am interested in helping provide a fix!
Yes
### Which generators are impacted?
- [ ] All
- [ ] Angular
- [ ] HTML
- [X] Qwik
- [ ] React
- [ ] React-Native
- [ ] Solid
- [ ] Stencil
- [ ] Svelte
- [ ] Vue
- [ ] Web components
### Reproduction case
https://mitosis.builder.io/?outputTab=I4dwlg1kA%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKNroDQoYBK6AZgRAHYCyEyl8AvnKVBCHAOQACARssAA2AE3RQAdMAgB6EMBypgqTgG4AUGvQAPSLDijSAQ2SD4pegGMYUynGoBPAMLtIldAwAUYNmFQBKRDU4OAsqVHhgSjBkGBJSOABeQnQ4jz91IJCw%2BHDDGHRE5OxcDwRM4MpDEHQALi58rRgAWgAmLUE4XmhRKE7usSbUCEFgYT6oHqaAcyhDeyaAZgAGJbg2elExsFbOPHK4KgAhQWQoNMDgy7hI6NiycVIICzQ09SvGPavDc7Kr4MNBGIYB5cvlxJVqul9h99lN0PBBBAAO5iRyGDAAOSq6B%2B%2B2CUHhp1soPQ4Ox4hwABlkaj0Tioe9MowoZkqLR6MDzgkAHwXS4ksnVQqcAAWo1ElFU%2BwBQJBMDypIh6AZ%2FPlYO%2BKuZGXxhKgtg8%2BwAPMJgAA3EKCdGoLHVBIIAVKxjcvGIbwQXziVAi5EASSiMTgADJA3ADX9LoabjEXVcCaQ7VG7qRGDHLqaAch0HaHdiU%2BGrkcTlA7R50Kb3DAAjy4ALC6c0nn88EqI4RYZKHCS2WK1Xeb8m6qFYKCkluwwKYYoHCYOJ0yd0G8B4xG%2BHpM7w34V5cABLoQSIl32tWkxEoqBozG5gCEcB9IXba3o11sJEMVgIADVMwRMMNRhRekpYAAEcBGEK8jWkE1TXXOAoRTIA%3D%3D
### Expected Behaviour
```jsx
import {
Fragment,
component$,
h,
useClientEffect$,
useRef,
useStore,
} from "@builder.io/qwik";
export const onBlur = function onBlur(props, state, inputRef) {
inputRef.focus();
};
export const a = function a(props, state, inputRef) {
alert(state.name);
};
export const lowerCaseName = function lowerCaseName(props, state, inputRef) {
return state.name.toLowerCase();
};
export const MyComponent = component$((props) => {
const inputRef = useRef();
const state = useStore({
name: "text-2xl border border-solid border-gray-300 rounded p-2",
});
useClientEffect$(() => {
state.name = "hidden";
alert(state.name);
a(props, state, inputRef);
});
return (
{props.showInput ? (
onBlur(props, state, inputRef)}
onChange$={(event) => {
state.name = event.target.value;
}}
>
) : null}
Hello
{lowerCaseName(props, state, inputRef)}! I can run in React, Vue, Solid,
or Liquid!
);
});
export default MyComponent;
```
### Actual Behaviour
```jsx
import {
Fragment,
component$,
h,
useClientEffect$,
useRef,
useStore,
} from "@builder.io/qwik";
export const onBlur = function onBlur(props, state, inputRef) {
inputRef.focus();
};
export const a = function a(props, state, inputRef) {
alert(state.name);
};
export const lowerCaseName = function lowerCaseName(props, state, inputRef) {
return state.name.toLowerCase();
};
export const MyComponent = component$((props) => {
const inputRef = useRef();
const state = useStore({
name: "text-2xl border border-solid border-gray-300 rounded p-2",
});
useClientEffect$(() => {
state.name = "hidden";
alert(state.name);
a(props, state, inputRef);
});
return (
{props.showInput ? (
onBlur(props, state, inputRef)}
onChange$={(event) => {
state.name = event.target.value;
}}
>
) : null}
Hello
{lowerCaseName(props, state, inputRef)}! I can run in React, Vue, Solid,
or Liquid!
);
});
export default MyComponent;
```
### Additional Information
_No response_
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Mitosis reproduction and compare the Qwik output's expected className with the actual class output. Trace the Qwik generator entry point that handles this JSX attribute, then verify that the generated output preserves the expected reactive behavior. Done means the reproduction produces className rather than class for Qwik.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- compilers, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100