- What is Mitosis
- Astro.js as the dev server
Steps
- Set up Mitosis
Set up Astro.js in/test-app
- Framework integrations
- Astro.js folder structure
- Update the build script
- (Bonus) .gitignore
- (Bonus) Settings of Publishing to NPM
to jump start the development. I built a , , components.
What is Mitosis
In case you are new to , .
Its syntax is pretty similar to and open .
Note: Astro supports a variety of popular frameworks including , , and and .
cli guide with the following modifications.
- We aren't initializing
test-appsfor each framework. Instead, we would run onetest-appwith Astro.js for all frameworks. - In terms of NPM package, we aren't scoping the component under a namespace and output various packages like
@my-awesome-component/library-reactand@my-awesome-component/library-svelteetc. Instead, we publish all components in one package onlymy-awesome-component. The output components can then be imported likemy-awesome-component/reactandmy-awesome-component/svelteetc
The folder structure should look like this by the end of this step.
CODE
.
├── src/
│ └── MyAwesomeComponent.lite.tsx
├── mitosis.config.cjs
├── package.json
└── tsconfig.json
Without further ado, let's initiate an empty project.
CODE
mkdir my-awesome-component
cd ./my-awesome-component
npm init -y
Install the relevant packages
CODE
npm i @builder.io/eslint-plugin-mitosis @builder.io/mitosis @builder.io/mitosis-cli
npm i watch --save-dev
Setup mitosis.config.cjs. In the targets field, place all downstream frameworks to compile.
CODE
/**
* @type {import('@builder.io/mitosis').MitosisConfig}
*/
module.exports = {
files: 'src/**',
targets: ['react', 'svelte', 'solid', 'vue'],
dest: 'output',
commonOptions: {
typescript: true,
},
options: {
react: {
stylesType: 'style-tag',
},
svelte: {},
qwik: {},
},
};
Setup tsconfig.json
CODE
{
"compilerOptions": {
"target": "ESNext",
"strict": true,
"jsx": "preserve",
"noImplicitAny": false,
"moduleResolution": "node",
"jsxImportSource": "@builder.io/mitosis"
},
"include": ["src"]
}
Initialize src/MyAwesomeComponent.lite.tsx
CODE
import { useState } from "@builder.io/mitosis";
export default function MyComponent(props) {
const [name, setName] = useState("Steve");
return (
<div>
<input
css={{
color: "red",
}}
value={name}
onChange={(event) => setName(event.target.value)}
/>
Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!
</div>
);
}
2. Set up Astro.js in /test-app
The folder structure should look like this by the end of this step. We will focus on test-app
CODE
.
├── src/
│ └── MyAwesomeComponent.lite.tsx
├── test-app/
│ └── astro.config.mjs
├── mitosis.config.js
├── package.json
└── tsconfig.json
Create astro project with the following config
CODE
npm create astro@latest
CODE
# Where should we create your new project?
./test-app
# How would you like to start your new project?
Empty
# Do you plan to write TypeScript?
Yes
# How strict should TypeScript be?
Strict
# Install dependencies?
Yes
# Initialize a new git repository?
No
Cd into the directory
CODE
cd test-app
2.1. Framework integrations
Follow the , and 😉
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR