You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: packages/docs/src/routes/docs/figma/index.mdx
+1-1
Original file line number
Diff line number
Diff line change
@@ -25,4 +25,4 @@ To use this integration:
25
25
26
26
This method ensures that developers can work within a unified framework while supporting various technology stacks.
27
27
28
-
Learn more about [Visual Copilot](https://www.builder.io/c/docs/visual-copilot) or [talk to us](https://www.builder.io/m/demo?utm_source=mitosis+docs) for a tailored demo.
28
+
Learn more about [Visual Copilot](https://www.builder.io/c/docs/visual-copilot) or [talk to us](https://www.builder.io/m/demo?utm_source=builder-docs-mitosis&utm_campaign=builder-docs&utm_medium=website) for a tailored demo.
Copy file name to clipboardexpand all lines: packages/docs/src/routes/docs/overview/index.mdx
+2-2
Original file line number
Diff line number
Diff line change
@@ -25,13 +25,13 @@ By simplifying the development process through having one singular source of tru
25
25
26
26
### Challenges with web components
27
27
28
-
While [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) are standalone elements designed for reuse across web applications, they present challenges:
28
+
While [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) are standalone elements designed for reuse across web applications, they present some [key challenges](https://designsystemcentral.com/why-web-components-arent-the-design-system-silver-bullet-just-yet/152/) for design systems:
29
29
30
30
- Web components do not natively render on the server side. This can be problematic when using frameworks that rely on server-side rendering for performance and SEO benefits.
31
31
- Web components do not seamlessly integrate with your library or framework. For instance, web components do not inherently understand or interact with React's context.
32
32
- Web components often come with their own rendering libraries and dependencies, which can lead to performance overhead.
33
33
34
-
Although web components offer a modular and reusable approach to UI elements, these challenges can limit their viability.
34
+
Although web components offer a modular and reusable approach to UI elements, these challenges can limit their viability. However, if supporting web components is a requirement, you can use Mitosis to generate them from a single source of truth. Mitosis supports [Lit](https://lit.dev/), [Stencil](https://stenciljs.com/), and raw web components as outputs.
Copy file name to clipboardexpand all lines: packages/docs/src/routes/docs/quickstart/index.mdx
+59-1
Original file line number
Diff line number
Diff line change
@@ -70,6 +70,64 @@ By following these steps, you'll be well on your way to developing with Mitosis,
70
70
71
71
See our [CLI documentation](/docs/cli) for more commands you can run for developing and building.
72
72
73
+
### Verify your components
74
+
75
+
After generating the component code with Mitosis, the next step is to ensure that your components work as expected. Here's how to verify them using Svelte as the target framework:
From the `library/packages/svelte` folder, build the Svelte components by running the following command:
88
+
89
+
```bash
90
+
npm run build:watch
91
+
```
92
+
93
+
3.**Test in a an application**
94
+
95
+
We'll use Svelte for this example, but these same steps work for any other output frameworks.
96
+
97
+
- Navigate to the `test-apps/svelte` folder:
98
+
```bash
99
+
cd test-apps/svelte
100
+
```
101
+
- Open the `src/routes/+page.svelte` file and import the component:
102
+
103
+
```tsx
104
+
<scriptlang="ts">
105
+
import {AutoComplete, Todos, Greet} from '@demo-one/library-svelte';
106
+
</script>
107
+
108
+
<h1>Welcome to SvelteKit</h1>
109
+
<AutoComplete />
110
+
<Todos />
111
+
<Greet />
112
+
<p>Visit <ahref="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
113
+
114
+
```
115
+
116
+
4.**Start the dev server**
117
+
118
+
Start the development server for your Svelte app with the following command:
119
+
120
+
```bash
121
+
npm run dev
122
+
```
123
+
124
+
5.**Verify the component**
125
+
126
+
Open [http://localhost:5173](http://localhost:5173/) in your browser. You should see the functioning Greet component along with the other components.
127
+
128
+
By following these steps, you'll be well on your way to developing with Mitosis, taking advantage of its capability to write once and deploy to multiple frameworks.
129
+
73
130
### Next steps
74
131
75
-
Now, you can build [Mitosis components](/docs/components) and explore our [Figma integration](/docs/figma) to sync your design systems in Figma to code, and then run [`mitosis build`](/docs/cli#mitosis-build) to generate packages for each output framework and publish them to npm.
132
+
- Read more on writing [Mitosis components](/docs/components)
133
+
- Explore the [Figma integration](/docs/figma) for generating Mitosis components from Figma designs
0 commit comments