BuilderIO / mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
https://mitosis.builder.io
MIT License
12.37k stars 549 forks source link

[fix] `preventDefault` in Qwik #1351

Closed sidmohanty11 closed 8 months ago

sidmohanty11 commented 8 months ago

Description

This PR updates the preventDefault logic for Qwik by:

For example test,

import { useState } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const [name, setName] = useState('Steve');

  return (
    <div>
      <input
        value={name}
        onChange={(event) => {
          event.preventDefault();

          setName(event.target.value);
        }}
      />
      Hello! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
}

gives output,

import { $, Fragment, component$, h, useStore } from "@builder.io/qwik";

export const MyComponent = component$((props) => {
  const state = useStore({ name: "Steve" });

  return (
    <div>
      <input
        preventdefault:change
        value={state.name}
        onChange$={$((event) => {
          state.name = event.target.value;
        })}
      />
      Hello! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
});

export default MyComponent;
changeset-bot[bot] commented 8 months ago

🦋 Changeset detected

Latest commit: 1a5cb8ec3b757d04c0c8f6d16e03e65bff40e663

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages | Name | Type | | ----------------------- | ----- | | @builder.io/mitosis | Patch | | @builder.io/mitosis-cli | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 8 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mitosis-fiddle ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 1, 2024 3:35pm
nx-cloud[bot] commented 8 months ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1a5cb8ec3b757d04c0c8f6d16e03e65bff40e663. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 4 targets - [`nx build @builder.io/mitosis-fiddle`](https://cloud.nx.app/runs/eTMveWXH0H?utm_source=pull-request&utm_medium=comment) - [`nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,*/e2e-angular,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps`](https://cloud.nx.app/runs/YMS3GJ6fnd?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/eslint-plugin-mitosis`](https://cloud.nx.app/runs/aG4UELSq4Q?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/mitosis`](https://cloud.nx.app/runs/btARanhaqo?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.