### Run Test Server

Source: https://github.com/builderio/mitosis/blob/main/packages/starter/template/README.md

After starting Mitosis and any necessary build steps, run this command to start the corresponding test server and view your components.

```bash
cd test-apps/qwik
npm run dev
```

--------------------------------

### Run Local Development Server and Tests

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Use these commands to start the local development server or run unit tests within the Mitosis project. Ensure all dependencies are installed first.

```bash
yarn start
```

```bash
yarn test
```

--------------------------------

### Changeset Format Examples

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Examples illustrating the preferred format for changeset entries, indicating impacted generators, type of change, and a brief description.

```plaintext
[React,Vue,Solid] Bug: Fix style bindings not applying.
```

```plaintext
[Angular] Feature: Add support for ngFor bindings.
```

```plaintext
[All] Feature: store state types.
```

--------------------------------

### Example Component for Documentation

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/customizability/index.mdx

This component is designed to be documented. It uses `useMetadata` to provide documentation details.

```tsx
/* button.docs.lite.tsx */
import { useMetadata } from '@builder.io/mitosis';
import MyButton from './my-button.lite';

useMetadata({
  docs: {
    name: "This is the name of my button"
  },
});

export default function ButtonDocs(props: any) {
  return <MyButton name={props.name}></MyButton>;
}
```

--------------------------------

### Install Mitosis Project Dependencies

Source: https://github.com/builderio/mitosis/blob/main/examples/basic/README.md

Use this command to install all necessary dependencies for your Mitosis project.

```bash
yarn install
```

--------------------------------

### Example: Compile to React

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/readme.md

Demonstrates compiling a TypeScript file to React format. Supports piping input or specifying input files and output directories.

```bash
mitosis compile -t react component.tsx
```

```bash
mitosis compile -t react < component.tsx
```

```bash
cat component.tsx | mitosis compile -t html -
```

```bash
mitosis compile -t react --out-dir build -- src/**/*.tsx
```

--------------------------------

### Run Mitosis Development Server

Source: https://github.com/builderio/mitosis/blob/main/examples/basic/README.md

Starts a development server that watches for file changes and rebuilds automatically.

```bash
yarn run start
```

--------------------------------

### Install Mitosis ESLint Plugin

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/README.md

Install the plugin as a development dependency using yarn.

```bash
yarn add -D @builder.io/eslint-plugin-mitosis
```

--------------------------------

### Install Mitosis CLI Globally

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/readme.md

Installs the Mitosis CLI globally on your system using npm. This command is typically run once to set up the CLI for general use.

```bash
npm install -g @builder.io/mitosis-cli
```

--------------------------------

### Start Development Server

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-qwikcity/README.md

Runs Vite's development server for local development. During development, the output is server-side rendered (SSR).

```shell
npm start # or `yarn start`
```

--------------------------------

### Basic Mitosis Component Example

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

A comprehensive example demonstrating Mitosis component features including state management with `useStore`, conditional rendering with `Show`, list rendering with `For`, and event handling.

```tsx
import { For, Show, useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    newItemName: 'New item',
    list: ['hello', 'world'],
    addItem() {
      state.list = [...state.list, state.newItemName];
    },
  });

  return (
    <div>
      <Show when={props.showInput}>
        <input
          value={state.newItemName}
          onChange={(event) => (state.newItemName = event.target.value)}
        />
      </Show>
      <div css={{ padding: '10px' }}>
        <button onClick={() => state.addItem()}>Add list item</button>
        <div>
          <For each={state.list}>{(item) => <div>{item}</div>}</For>
        </div>
      </div>
    </div>
  );
}
```

--------------------------------

### Run Mitosis on File System Changes

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/readme.md

This example shows how to use `entr` to automatically re-run a Mitosis compilation process whenever changes are detected in `.lite.tsx` files. Ensure `entr` is installed separately.

```bash
find . -name '*lite.tsx' | entr make /_
```

--------------------------------

### Run Mitosis in Watch Mode

Source: https://github.com/builderio/mitosis/blob/main/packages/starter/template/README.md

Navigate to the library directory and run this command to start Mitosis in watch mode for development.

```bash
cd library
npm run start
```

--------------------------------

### Create a Mitosis Extension

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/docs/plugins.md

Add custom functionality to the Mitosis `toolbox` using an extension. This example adds a `bar` function to the toolbox.

```javascript
// extensions/bar-extension.js

module.exports = (toolbox) => {
  const { print } = toolbox;

  toolbox.bar = () => {
    print.info('Bar!');
  };
};

```

--------------------------------

### Correct: State with Functions and Prop Assignment

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-assign-props-to-state.md

This example demonstrates a correct pattern where state includes functions and props are assigned to state within onMount. This adheres to the no-assign-props-to-state rule.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    text: null,
    fn1() {
      return foo(props.text);
    },
    fn2() {
      return foo({ text: props.text });
    }
  });

  onMount(() => {
    state.text = props.text;
  });
}
```

--------------------------------

### Correct useStore() variable name

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/use-state-var-declarator.md

Assigning useStore() to the 'state' variable is the correct approach. This example also shows the correct usage of useState, which is not subject to this rule.

```javascript
export default function MyComponent(props) {
  const state = useStore();
  return <div />;
}
```

```javascript
export default function MyComponent(props) {
  const [name, setName] = useState();
  return <div />;
}
```

--------------------------------

### Build and Run E2E Tests for Vue 3

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-vue3/README.md

Commands to build the e2e-app and e2e-vue3 packages and then run the end-to-end tests. These commands are executed from the project root in a Yarn workspace setup.

```bash
yarn workspace @builder.io/e2e-app run build
yarn workspace @builder.io/e2e-vue3 run build
yarn workspace @builder.io/e2e-vue3 run e2e
```

--------------------------------

### Generated Markdown Documentation

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/customizability/index.mdx

Example of a markdown file generated by the Mitosis plugin for the Vue target. It includes component name, metadata, and the component's code.

```markdown
# ButtonDocs - vue

{"name":"This is the name of my button"}

This is the content:
\````
<template>
  <MyButton :name="name"></MyButton>
</template>

<script setup lang="ts">
  import MyButton from "./my-button.vue";

  const props = defineProps(["name"]);
</script>

\````
```

--------------------------------

### Variable name same as state property, assigned to state

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a local variable 'foo' being declared and then assigned to the state property 'state.foo'. This can be confusing as the local variable shadows the state property.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const foo = 'some value';
    state.foo = foo;
  }

  return <div />;
}
```

--------------------------------

### Cloudflare Pages Auto-generated Routes

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/README.md

This is an example of an auto-generated `dist/_routes.json` file for Cloudflare Pages. It specifies which paths should be server-side rendered (SSR) and which should be treated as static files.

```json
{
  "include": [
    "/*"
  ],
  "exclude": [
    "/_headers",
    "/_redirects",
    "/build/*",
    "/favicon.ico",
    "/manifest.json",
    "/service-worker.js",
    "/about"
  ],
  "version": 1
}
```

--------------------------------

### Correct: Using Hooks and State in Mitosis Component

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-declaration-or-assignment-in-component.md

This is a correct example of a Mitosis component utilizing 'useContext' and 'useStore' hooks without direct variable declarations or assignments in the component's main scope.

```javascript
export default function MyComponent(props) {
  const context = useContext(x)

  const state = useStore({ name: null })

  return (
      <div />
  );
}
```

--------------------------------

### Correct variable naming convention

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example demonstrates a correct way to name a variable 'foo_' when a state property with a similar name 'foo' exists. Using a suffix like '_' avoids naming conflicts.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  const foo_ = bar;

  return <div />;
}
```

--------------------------------

### Basic Mitosis Component in JSX

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/overview/index.mdx

This is a basic example of a Mitosis component written in JSX, demonstrating state management and input binding. It serves as the source for generating components in other frameworks.

```tsx
export function MyComponent() {
  const state = useStore({
    name: 'Steve',
  });

  return (
    <div>
      <input value={state.name} onChange={(event) => (state.name = event.target.value)} />
    </div>
  );
}
```

--------------------------------

### Variable name same as state property

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a variable 'foo' declared at the top level of the component, which has the same name as a state property 'foo'. This can lead to confusion and potential bugs.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  const foo = bar;

  return <div />;
}
```

--------------------------------

### Correct destructured variable naming

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows correct handling of destructured variables when a state property has a similar name. By aliasing 'foo' to 'foo1', naming conflicts are avoided.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const { foo: foo1 } = props.obj;

    state.foo = foo;
  }

  return <div />;
}
```

--------------------------------

### Incorrect: Variable name same as prop name (different scope)

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-prop-name.md

This example demonstrates another case where a local variable 'foo' shadows the prop 'props.foo'. This pattern can lead to confusion and is flagged by the rule.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const foo = props.foo;
  }

  return <div />;
}
```

--------------------------------

### Correct: Conditional Logic within useEffect

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-conditional-logic-in-component-render.md

This example shows the correct way to handle conditional logic in Mitosis by placing it within a useEffect hook. This is suitable for side effects and avoids issues with the render method.

```javascript
export default function MyComponent(props) {
  useEffect(() => {
    if (x > 5) {
      return foo;
    }
  }, []);
  return <div />;
}
```

--------------------------------

### ForwardRef for React DOM Access

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

In React, wrap your component with `forwardRef` to provide direct access to an element like an input. This example shows the Mitosis input and its corresponding Mitosis output.

```tsx
export default function MyInput(props) {
  return <input ref={props.inputRef} />;
}
```

```tsx
import { forwardRef } from 'react';

export default forwardRef(function MyInput(props, inputRef) {
  return <input ref={inputRef} />;
});
```

--------------------------------

### Preview Production Build Locally

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-qwikcity/README.md

Creates a production build of client modules and a production build of `src/entry.preview.tsx`, then runs a local server. This is for previewing a production build locally and not for production use.

```shell
npm run preview # or `yarn preview`
```

--------------------------------

### Build Watch Step for Bundled Outputs

Source: https://github.com/builderio/mitosis/blob/main/packages/starter/template/README.md

If your output has a bundling step (e.g., Svelte/Qwik), run this command in a separate terminal to watch for changes.

```bash
cd library/packages/qwik
npm run build:watch
```

--------------------------------

### Serve Qwik City App Locally

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/README.md

Use this command to preview a production build of your Qwik City app locally using Cloudflare's wrangler CLI. Visit http://localhost:8787/ to view the app.

```bash
npm run serve
```

--------------------------------

### Build Mitosis Project

Source: https://github.com/builderio/mitosis/blob/main/examples/basic/README.md

Execute this command to build your Mitosis project for production.

```bash
yarn run build
```

--------------------------------

### Responsive `css-in-js` Styling with Media Queries

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Demonstrates how to include media queries as keys within the `css` prop to apply responsive styles.

```tsx
export default function ResponsiveExample() {
  return (
    <div
      css={{
        marginTop: '10px',
        '@media (max-width: 500px)': {
          marginTop: '0px',
        },
      }}
    />
  );
}
```

--------------------------------

### Create New Mitosis Project

Source: https://github.com/builderio/mitosis/blob/main/README.MD

Use this command to initialize a new Mitosis project. After creation, refer to the generated README.md for project structure and component development guidance.

```bash
npm create @builder.io/mitosis@latest
```

--------------------------------

### Transform Mitosis to Builder Format and Back

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/readme.md

This recipe demonstrates a two-step compilation process: first transforming a Mitosis component to the Builder format, and then back to Mitosis. This is useful for validating transformations.

```bash
cat components/postscript.lite.tsx |
  mitosis compile -t builder - |
  mitosis compile -f builder -t mitosis
```

--------------------------------

### Ternary Operator within Function (Incorrect)

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/prefer-show-over-ternary-operator.md

This example demonstrates an incorrect usage of a ternary operator within a function definition, which should be refactored.

```javascript
export default function MyComponent(props) {
      const state = useState({
        getName() {
          props.a ? 'a' : 'b'
        }
      })
return <div />;
}
```

--------------------------------

### Ternary Operator in Input Value (Incorrect)

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/prefer-show-over-ternary-operator.md

This example shows an incorrect usage of the ternary operator within an input's value attribute, which should be refactored.

```javascript
export default function MyComponent(props) {
    return <div> <input value={props.a ? 'a' : 'b'} /> </div>;
}
```

--------------------------------

### Build All Packages and Run E2E Tests

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Commands to build all Mitosis packages and then run end-to-end tests. These are typically run from the project root.

```bash
yarn ci:build
```

```bash
yarn ci:e2e
```

--------------------------------

### Use lodash in a Mitosis Component

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/using-libraries/index.mdx

Import and use any standard JavaScript library, such as lodash, directly within your Mitosis components. Ensure the library is installed in your project.

```tsx
import { kebabCase } from 'lodash';

export default function MyComponent(props: { name: string }) {
  return <div>{kebabCase(props.name)}</div>;
}
```

--------------------------------

### Build and Run E2E Tests for Solid

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-solid/README.md

Use these commands to recompile and run the E2E tests for the Solid framework when working within a Yarn workspace environment. Ensure you are in the project root.

```bash
yarn workspace @builder.io/e2e-app run build
```

```bash
yarn workspace @builder.io/e2e-solid run build
```

```bash
yarn workspace @builder.io/e2e-solid run e2e
```

--------------------------------

### State Management with `useStore`

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Illustrates basic state management in Mitosis using the `useStore` hook. The state object must be named `state` and can hold properties and methods.

```tsx
export default function MyComponent() {
  const state = useStore({
    name: 'Steve',
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
      <input
        onInput={(event) => {
          state.name = event.target.value;
        }}
        value={state.name}
      />
    </div>
  );
}
```

--------------------------------

### UseStyle Hook for Component Styling

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

The `useStyle` hook adds extra CSS to your component. It can be used within the component's body or outside, as shown in these examples.

```tsx
import { useStyle } from '@builder.io/mitosis';

export default function MyComponent(props) {
  useStyle(`
    button {
      font-size: 12px;
      outline: 1px solid black;
    }
  `);

  return (
    <button
      css={{
        background: 'blue',
        color: 'white',
      }}
      type="button"
    >
      Button
    </button>
  );
}
```

```tsx
import { useStyle } from '@builder.io/mitosis';

export default function MyComponent(props) {
  return <button type="button">Button</button>;
}

useStyle(`
  button {
    background: blue;
    color: white;
    font-size: 12px;
    outline: 1px solid black;
  }
`);
```

--------------------------------

### Get Target-Specific Variable with useTarget

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

Retrieve a value that varies based on the target platform. The `default` key provides a fallback if no specific target match is found.

```tsx
import { useTarget, useStore } from '@builder.io/mitosis';

export default function MyName() {
  const state = useStore({
    get name() {
      const prefix = useTarget<string | number | boolean>({
        default: 'Default str',
        react: 123,
        angular: true,
        vue: 'v',
      });
      return prefix + 'foo';
    }
  });

  return (
    <div>{state.name}</div>
  );
}
```

--------------------------------

### Test Mitosis Project

Source: https://github.com/builderio/mitosis/blob/main/examples/basic/README.md

Run this command to execute the test suite for your Mitosis project.

```bash
yarn run test
```

--------------------------------

### Add Integrations with npm

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-qwikcity/README.md

Use this command to add various integrations to your Qwik project, such as Cloudflare, Netlify, or an Express server.

```shell
npm run qwik add # or `yarn qwik add`
```

--------------------------------

### Destructured variable name same as state property

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a destructured variable 'foo' from props.obj having the same name as the state property 'state.foo'. This can lead to confusion when accessing the state.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const { foo } = props.obj;

    state.foo = foo;
  }

  return <div />;
}
```

--------------------------------

### Build and Run Svelte E2E Tests

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-svelte/README.md

Use these commands to build the E2E application and Svelte workspace, then execute the end-to-end tests. This is useful for recompiling and running a specific set of E2E tests within a Yarn workspace.

```bash
yarn workspace @builder.io/e2e-app run build
```

```bash
yarn workspace @builder.io/e2e-svelte run build
```

```bash
yarn workspace @builder.io/e2e-svelte run e2e
```

--------------------------------

### onInit Hook for Pre-Mount Execution

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

The `onInit` hook is executed before the `onMount` hook, making it suitable for custom code that needs to run before the component mounts.

```tsx
import { onInit, onMount } from '@builder.io/mitosis';

export default function MyComponent() {
  onInit(() => {
    alert('First: I have init!');
  });

  onMount(() => {
    alert('Second: I have mounted!');
  });

  return <div>Hello world</div>;
}
```

--------------------------------

### Format Codebase with Prettier

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Format the entire Mitosis codebase using Prettier. Run this command from the project root.

```bash
yarn fmt:prettier
```

--------------------------------

### Nested function declaration name same as state property

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a function declaration 'baz' within another function, which has the same name as a state property 'response'. This can lead to naming conflicts.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    response: 'null',
    saveResponse() {
      function baz(response) {
        return response;
      }
    },
  });

  return <div>Hello</div>;
}
```

--------------------------------

### Build and Run E2E Tests in Yarn Workspaces

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-react/README.md

Use these commands at the project root to recompile and run E2E tests for the React E2E application. This is necessary because Yarn workspaces have limited awareness of the build graph.

```bash
yarn workspace @builder.io/e2e-app run build
yarn workspace @builder.io/e2e-react run build
yarn workspace @builder.io/e2e-react run e2e
```

--------------------------------

### State with Methods using `useStore`

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Shows how to include methods directly within the `useStore` state object to manage and update component state.

```tsx
export default function MyComponent() {
  const state = useStore({
    name: 'Steve',
    updateName(newName) {
      state.name = newName;
    },
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
      <input onInput={(event) => state.updateName(event.target.value)} value={state.name} />
    </div>
  );
}
```

--------------------------------

### Importing and Applying CSS File

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Shows how to import a local CSS file into a Mitosis component and apply its classes to elements. Note that only `.ts` and `.js` files are automatically moved by the CLI; CSS files require manual handling.

```css
/* ./src/my-component/my-component.css */


.my-component{
    margin-top: 10px;
}
```

```tsx
/* ./src/my-component/my-component.lite.tsx */
import "./my-component.css";

export default function CSSExample() {
  return <div class="my-component" />;
}
```

--------------------------------

### Build and Run Angular E2E Tests

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-angular/README.md

Use these commands to recompile the Angular E2E test suite and then execute the tests. Ensure you are in the project root directory.

```bash
yarn workspace @builder.io/e2e-angular run build
```

```bash
yarn workspace @builder.io/e2e-angular run e2e
```

--------------------------------

### Nested function variable name same as state property

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a variable 'bar' declared within a nested arrow function, which has the same name as a state property 'response'. This can cause confusion if not handled carefully.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    response: 'null',
    saveResponse() {
      const bar = (response) => {
        return response;
      };
    },
  });

  return <div>Hello</div>;
}
```

--------------------------------

### onMount Hook for Post-Mount Execution

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

The `onMount` hook is the recommended place to put custom code that should execute once the component has mounted.

```tsx
import { onMount } from '@builder.io/mitosis';

export default function MyComponent() {
  onMount(() => {
    alert('I have mounted!');
  });

  return <div>Hello world</div>;
}
```

--------------------------------

### State property name conflicts with function parameter

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example shows a state property 'response' and a function parameter 'response' within the same scope. While not a direct variable declaration conflict, it can lead to similar confusion.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    response: 'null',
    saveResponse(response) {
      state.response = response;
    },
  });

  return <div>Hello</div>;
}
```

--------------------------------

### Build for Production

Source: https://github.com/builderio/mitosis/blob/main/e2e/e2e-qwikcity/README.md

Generates client and server modules for production. This command also performs a Typescript type check on the source code.

```shell
npm run build # or `yarn build`
```

--------------------------------

### Variable name same as state property within a method

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md

This example demonstrates a variable 'foo' declared inside a method 'abc' which has the same name as a state property 'foo'. This can cause issues when trying to access the state property within the method.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',

    abc() {
      const foo = 'baz';

      return foo;
    },
  });

  return <div />;
}
```

--------------------------------

### Create a Mitosis Command

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/docs/plugins.md

Define a command for your Mitosis plugin. The `run` function receives the `toolbox` object, which provides access to utilities like `print` and `filesystem`.

```javascript
// commands/foo.js

module.exports = {
  run: (toolbox) => {
    const { print, filesystem } = toolbox;

    const desktopDirectories = filesystem.subdirectories(`~/Desktop`);
    print.info(desktopDirectories);
  },
};

```

--------------------------------

### React Options for Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/configuration/index.mdx

Configuration for transpiling to React, enabling TypeScript output.

```js
// react-options.cjs

/** @type {import('@builder.io/mitosis').ToReactOptions} */
module.exports = {
	typescript: true
};
```

--------------------------------

### Compile Mitosis Code to Different Formats

Source: https://github.com/builderio/mitosis/blob/main/packages/cli/readme.md

Compiles Mitosis code to a specified format. Use the `--to` flag for the target format and pipe input or specify an input file. Check `mitosis compile --help` for all options.

```bash
mitosis compile --to=<format> < <input-file>
```

```bash
cat my-file.tsx | mitosis compile -t=<format>
```

```bash
mitosis compile -t=<format> <input-file>
```

--------------------------------

### Generate Changeset Entry

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Create a new changeset entry for tracking changes and versioning. Follow the interactive CLI prompts after running this command from the project root.

```bash
yarn g:changeset
```

--------------------------------

### Mitosis Component with Metadata and Default Export

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/only-default-function-and-imports.md

This snippet demonstrates a valid Mitosis component structure that includes metadata configuration and a default export for the component. It adheres to the rule by only exporting the default component.

```javascript
useMetadata({
  qwik: {
    component: {
      isLight: true,
    },
  },
});

export default function RenderComponent(props) {
  return <div>Text</div>;
}
```

--------------------------------

### Create a Mitosis Context

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/context/index.mdx

Define a context object with initial state and methods. Ensure the file name ends with `context.lite.ts` and the default export is a function returning the context.

```typescript
import { createContext } from '@builder.io/mitosis';

export default createContext({
  foo: 'bar',
  get fooUpperCase() {
    return this.foo.toUpperCase();
  },
  someMethod() {
    return this.fooUpperCase.toLowercase();
  },
  content: null,
  context: {} as any,
  state: {},
});
```

--------------------------------

### Mitosis Project Configuration

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/configuration/index.mdx

Main configuration file for Mitosis, specifying files to transpile, targets, and options for each target.

```js
// mitosis-config.cjs
const react = require('./react-options.cjs');
const vue = require('./vue-options.cjs');

/** @type {import('@builder.io/mitosis').MitosisConfig} */
module.exports = {
	files: 'src/**',
	targets: ['vue', 'react'],
	options: {
		react,
		vue
	}
};
```

--------------------------------

### Import and use Mitosis components in SvelteKit

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/quickstart/index.mdx

Import components generated by Mitosis into your SvelteKit application to display them. Ensure the component library is built and available.

```tsx
<script lang="ts">
  import { AutoComplete, Todos, Greet } from '@demo-one/library-svelte';
</script>

<h1>Welcome to SvelteKit</h1>
<AutoComplete />
<Todos />
<Greet />
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

```

--------------------------------

### Vue Options for Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/configuration/index.mdx

Configuration for transpiling to Vue, enabling TypeScript output.

```js
// vue-options.cjs

/** @type {import('@builder.io/mitosis').ToVueOptions} */
module.exports = {
	typescript: true
};
```

--------------------------------

### Mitosis Configuration with Plugin

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/customizability/index.mdx

Configuration file for Mitosis, including a plugin to generate markdown documentation. The plugin intercepts code generation to add metadata and target-specific information.

```js
/**
 * @type {import('@builder.io/mitosis'.MitosisConfig)}
 */
module.exports = {
  files: 'src/**',
  targets: [
    'angular',
    'react',
    'vue'
  ],
  commonOptions: {
    typescript: true,
    explicitBuildFileExtensions: {
      '.md': /.*(docs\.lite\.tsx)$/g
    },
    plugins: [
      () => ({
        code: {
          post: (code, json) => {
            if (json.meta?.useMetadata?.docs) {
              return (
                `# ${json.name} - ${json.pluginData?.target}\n\n` +
                `${JSON.stringify(json.meta?.useMetadata?.docs)}\n\n` +
                'This is the content:\n' +
                '````\n' +
                code +
                '\n````'
              );
            }

            return code;
          }
        }
      })
    ]
  }
};
```

--------------------------------

### Computed State with Getters in `useStore`

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Shows how to handle computed state values using getter methods within `useStore`. This is useful when the initial state depends on props or other computations.

```tsx
export default function MyComponent(props) {
  const state = useStore({
    _name: '',
    get name() {
      // Use the state value if set, otherwise the prop value if set,
      // otherwise the default value of 'Steve'
      return state._name || props.name || 'Steve';
    },
    setName(name: string) {
      state._name = name;
    },
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
      <input onInput={(event) => state.setName(event.target.value)} value={state.name} />
    </div>
  );
}
```

--------------------------------

### Correct: Simple Component Render

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-conditional-logic-in-component-render.md

This is a correct way to structure a component in Mitosis, with no conditional logic in the render method. Ensure your component logic adheres to Mitosis limitations.

```javascript
export default function MyComponent(props) {
  return <div />;
}
```

--------------------------------

### Run Snapshot Tests in Watch Mode

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Execute snapshot tests in watch mode for the core Mitosis package. This command is run from the `packages/core` directory.

```bash
yarn g:nx test:watch
```

--------------------------------

### Conditional Rendering with <Show>

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Implement conditional rendering using the `<Show>` component. Provide a `when` prop for the condition and an optional `else` prop for alternative content.

```tsx
export default function MyComponent(props) {
  return (
    <>
      <Show when={props.showContents} else={<span {...props.attributes}>{props.text}</span>}> 
        Hello, I may or may not show!
      </Show>
      ;
    </>
  );
}
```

--------------------------------

### Run Target-Specific Function with useTarget

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/hooks/index.mdx

Execute different functions based on the target environment. The `default` case acts as a catch-all for any target not explicitly listed.

```tsx
import { onMount, useTarget } from '@builder.io/mitosis';

export default function MyLogger() {
     onMount(() => {
        useTarget({
          react: () => {
            console.log('react');
          },
          qwik: () => {
            console.log('qwik');
          },
          default: () => {
            console.log('the rest');
          },
        });
    });

  return <span></span>;
}
```

--------------------------------

### Correct Callback Parameter Usage in JSX

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/jsx-callback-arg-name.md

Demonstrates valid ways to handle callbacks in JSX, including omitting parameters, using 'event', or passing null/strings. This adheres to Mitosis's requirements for callback parameter naming.

```jsx
<button/>
```

```jsx
<button type="button"/>
```

```jsx
<button onClick={ null }/>
```

```jsx
<button onClick={ "string" }/>
```

```jsx
<button onClick={ event => doSomething(event) }/>
```

```jsx
<button onClick={ () => doSomething() }/>
```

```jsx
<button onClick={ function(event) {} }/>
```

--------------------------------

### Add a new component in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/quickstart/index.mdx

Create a new component file with the .lite.tsx extension and define its structure and state using Mitosis hooks like useStore.

```tsx
import { useStore } from '@builder.io/mitosis';

export default function Greet() {
  const state = useStore({
    name: '',
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(event) => (state.name = event.target.value)}
        placeholder="Your name"
      />
      <div>Hello, {state.name}!</div>
    </div>
  );
}
```

--------------------------------

### Use Show Component for Conditional Rendering in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/prefer-show-over-ternary-operator.md

Demonstrates the correct usage of the Show component for conditional rendering, avoiding ternary operators for JSX.

```javascript
export default function MyComponent(props) {
  return (
    <div>
      <Show when={foo}>
        <bar />
      </Show>
      <Show when={!foo}>
        <baz />
      </Show>
    </div>
  );
}
```

--------------------------------

### Configure ESLint for Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/README.md

Configure ESLint to use the Mitosis plugin and its recommended rules. You can also individually configure specific rules.

```javascript
module.exports = {
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['@builder.io/mitosis'],
  extends: [
    // Use this approach for our recommended rules configuration
    'plugin:@builder.io/mitosis/recommended',
  ],
  rules: {
    // Use this to configure rules individually
    '@builder.io/mitosis/css-no-vars': 'error',
  },
};
```

--------------------------------

### Update All Snapshots

Source: https://github.com/builderio/mitosis/blob/main/CONTRIBUTING.md

Update all snapshots in the core and CLI packages. This command ensures consistency and should be run before submitting a PR.

```bash
yarn test:update
```

--------------------------------

### Single State Piece with `useState`

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Demonstrates an alternative way to manage state using the `useState` hook for a single piece of state, similar to React's `useState`.

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

  return (
    <div>
      <h2>Hello, {name}</h2>
      <input onInput={(event) => setName(event.target.value)} value={name} />
    </div>
  );
}
```

--------------------------------

### Correct: Assigning Props to State in onMount

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/no-assign-props-to-state.md

This code shows a correct pattern for handling props by assigning them to state within the onMount lifecycle hook. This avoids the direct assignment issue flagged by the rule.

```javascript
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({ text: null });

  onMount(() => {
    state.text = props.text;
  });
}
```

--------------------------------

### Fragment with Key for Lists

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Use the `Fragment` component with a `key` prop when it's a direct child of a `For` loop. This is crucial for efficient list rendering.

```tsx
import { For, Fragment } from '@builder.io/mitosis';

export default function BasicForFragment() {
  return (
    <div>
      <For each={['a', 'b', 'c']}>
        {(option) => (
          <Fragment key={`key-${option}`}>
            <span>{option}</span>
          </Fragment>
        )}
      </For>
    </div>
  );

}
```

--------------------------------

### Async Methods on State in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/gotchas/index.mdx

Async methods cannot be directly defined on Mitosis state due to parsing limitations. Use promises or immediately invoked async functions as a workaround.

```tsx
export default function MyComponent() {
  const state = useStore({
    async doSomethingAsync(event) {
      //  ^^^^^^^^^^^^^^^^^^^^^^^^^
      //  Fails to parse this line
      return;
    },
  });
}
```

--------------------------------

### Web Component Named Slots with ShadowDom Metadata

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Demonstrates how to enable named slots in Web Components using the `useMetadata` hook with `isAttachedToShadowDom: true`.

```tsx
import { useMetadata } from '@builder.io/mitosis';

useMetadata({
  isAttachedToShadowDom: true,
});
export default function Layout(props) {
  return (
    <div className="layout">
      <div className="top">{props.top}</div>
      <div className="left">{props.left}</div>
      <div className="center">{props.center}</div>
      {props.children}
    </div>
  );
}
```

--------------------------------

### Angular and HTML Output for Layout Component

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Displays the compiled HTML output for a Layout component, showing how named slots are represented in Angular and generic HTML.

```html
<div>
  <layout>
    <sidebar left></sidebar>
    <nav-bar top></nav-bar>
    <content center></content>
    anything else
  </layout>
  <div></div>
</div>
```

--------------------------------

### Layout Component Implementation (React)

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Shows a basic implementation of a Layout component in React that projects content passed via props into specific divs.

```tsx
export default function Layout(props) {
  return (
    <div className="layout">
      <div className="top">{props.top}</div>
      <div className="left">{props.left}</div>
      <div className="center">{props.center}</div>
      {props.children}
    </div>
  );
}
```

--------------------------------

### Correct Export Structure with Default Component and Types

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/only-default-function-and-imports.md

This code shows a correct export structure. It includes imports, a default export for the component, and type declarations, adhering to the rule's requirements.

```javascript
import x from 'y';
import { a } from 'b';
export default function MyComponent(props) {
  return <div />;
}
```

```javascript
import x from "y";
import {a} from "b";

export type Props = {}
export interface OtherProps {}
type Props1 = {}
interface OtherProps2 {}

export default function MyComponent(props) {
  return (
      <div />
  );
}
```

--------------------------------

### Correct: Using ref without .current

Source: https://github.com/builderio/mitosis/blob/main/packages/eslint-plugin/docs/rules/ref-no-current.md

This code shows the correct way to use refs in Mitosis by directly accessing the ref methods or properties without using '.current'. This avoids the limitation addressed by the ref-no-current rule.

```javascript
import { useRef } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const inputRef = useRef();
  const myFn = () => {
    inputRef.focus();
  };
  return <div />;
}
```

```javascript
import { useRef } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const someRef = useRef();
  const myFn = () => {
    someRef = 1;
  };
  return <div />;
}
```

--------------------------------

### Mitosis: Workaround for Default Props

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/gotchas/index.mdx

To work around the limitation of setting default props with destructuring, define a constant for default values and use it with a fallback.

```tsx
const DEFAULT_VALUES = {
  color: 'blue',
};
export default function MyComponent(props) {
  return <div>{props.color || DEFAULT_VALUES.color}</div>;
}
```

```tsx
const DEFAULT_VALUES = {
  color: 'blue',
};
export default function MyComponent(props) {
  return <div>{props.color || DEFAULT_VALUES.color}</div>;
}
```

--------------------------------

### Layout Component with Default Slot Content (React)

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Shows how to provide default content for named slots and the default slot in a Layout component using the `Slot` component.

```tsx
import { Slot } from '@builder.io/mitosis';

export default function Layout(props) {
  return (
    <div className="layout">
      <div className="top">
        <Slot name="top">Top default</Slot>
      </div>
      <div className="left">
        <Slot name="left" />
      </div>
      <div className="center">
        <Slot name="center" />
      </div>
      <Slot>Default child</Slot>
    </div>
  );
}
```

--------------------------------

### Export component in Mitosis index file

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/quickstart/index.mdx

Export your newly created component from the index file to make it available for other parts of your library or for framework-specific builds.

```tsx
export { default as Greet } from './greet.lite';
```

--------------------------------

### Headless Component Styling with CSS Classes

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Use `class` attributes to apply styles loaded externally in your Mitosis components. This approach decouples styling from component logic.

```tsx
/* ./src/my-component/my-component.lite.tsx */
export default function CSSExample() {
  return <div class="my-component" />;
}
```

--------------------------------

### Use useMetadata Hook in Mitosis Component

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/customizability/index.mdx

Demonstrates how to use the `useMetadata` hook within a Mitosis component to provide custom metadata for plugins. This metadata is accessible in the component's JSON.

```tsx
import { useMetadata } from '@builder.io/mitosis';

useMetadata({ mySpecialComponentType: 'ABC' });

export default function SmileReviews(props: SmileReviewsProps) {
  return <div>{/**/}</div>;
}
```

--------------------------------

### Basic `css-in-js` Styling

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Applies styles to a `div` element using the `css` prop with camelCased CSS properties.

```tsx
export default function CSSExample() {
  return <div css={{ marginTop: '10px', color: 'red' }} />;
}
```

--------------------------------

### Iterating with <For>

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Use the `<For>` component to map over arrays and render lists. It requires an `each` prop for the array and a child function that receives the item and index.

```tsx
export default function MyComponent(props) {
  const state = useStore({
    myArray: [1, 2, 3],
  });
  return <For each={state.myArray}>{(theArrayItem, index) => <div>{theArrayItem}</div>}</For>;
}
```

--------------------------------

### Workaround for Assigning Props to State in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/gotchas/index.mdx

Initialize state with a null value and then assign prop values within the 'onMount' lifecycle hook.

```tsx
export default function MyComponent(props) {
  const state = useStore({ text: null });

  onMount(() => {
    state.text = props.text;
  });
}
```

```tsx
import { useState } from 'react';

export default function MyComponent(props) {
  const [text, setText] = useState(() => null);

  useEffect(() => {
    setText(props.text);
  }, []);

  return <></>;
}
```

--------------------------------

### Registering Named Slots in Layout Component (React)

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

Demonstrates how to register named slots like 'top', 'left', and 'center' for a Layout component using props in a React context.

```tsx
<div>
  <Layout
    top={<NavBar/>}
    left={<Sidebar/>}
    center={<Content/>}
  />
    anything else
  </Layout>
</div>
```

--------------------------------

### Native Form Handling in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/using-libraries/index.mdx

Leverage native HTML form elements and their built-in validation for form handling instead of relying on framework-specific libraries. This approach ensures framework-agnostic compatibility.

```tsx
export default function MyComponent() {
  function handleSubmit(event: SubmitEvent) {
    event.preventDefault();

    const form = event.target as HTMLFormElement;
    if (!form.checkValidity()) {
      alert('Form is invalid');
      return;
    }
    const data = new FormData(form);
    const email = data.get('email');
    console.log(email);
  }

  return (
    <form onSubmit={(event) => handleSubmit(event)}>
      <input type="email" name="email" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

--------------------------------

### Define Angular Transpilation Options

Source: https://github.com/builderio/mitosis/blob/main/packages/core/src/generators/angular/README.md

Configure global Angular transpilation options within `MitosisConfig`. These options control aspects like standalone component generation and import preservation.

```typescript
export interface ToAngularOptions extends BaseTranspilerOptions {
  standalone?: boolean;
  preserveImports?: boolean;
  preserveFileExtensions?: boolean;
  importMapper?: Function;
  bootstrapMapper?: Function;
}
```

--------------------------------

### Web Component Shadow DOM Metadata

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/components/index.mdx

For Web Components, enable Shadow DOM by using the `useMetadata` hook with `isAttachedToShadowDom: true`.

```tsx
import { useMetadata } from '@builder.io/mitosis';

useMetadata({
  isAttachedToShadowDom: true,
});
export default function MyComponent(props) {
  return <div>{props.children}</div>;
}
```

--------------------------------

### Assigning Props to State in Mitosis

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/gotchas/index.mdx

Directly assigning 'props' to 'state' is not allowed due to JSX lite parsing limitations. Use 'onMount' to initialize state with prop values.

```tsx
export default function MyComponent(props) {
  const state = useStore({ text: props.text });
  //                             ^^^^^^^^^^^
  //                             Error
}
```

--------------------------------

### TypeScript Configuration for JSX

Source: https://github.com/builderio/mitosis/blob/main/packages/docs/src/routes/docs/configuration/index.mdx

Configure tsconfig.json to enable JSX transpilation compatible with Mitosis.

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis",
    // other config here
  }
}
```