Svelte generation fails if there is an inner function
See original GitHub issue- I am interested in helping provide a fix!
Scope
- This only impacts specific generators/outputs (please list them here): Svelte
Describe the bug
Mitosis fails with an error trying to generate Svelte output for a simple component with an inner function, in this case addItem()
import { useState } from '@builder.io/mitosis';
export interface State {
list: string[];
newItemName: string;
}
export default function MyComponent(props: any) {
const state = useState<State>({
list: ['hello', 'world'],
newItemName: 'New item',
});
function addItem() {
state.list = [...state.list, state.newItemName];
}
return (
<div
css={{
padding: '10px',
}}
>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<input
class="shadow-md rounded w-full px-4 py-2"
value={state.newItemName}
onChange={(event) => (state.newItemName = event.target.value)}
/>
<button
class="bg-blue-500 rounded w-full text-white font-bold py-2 px-4"
css={{
margin: '10px 0',
}}
onClick={(event) => addItem()}
>
Add list item
</button>
<ul class="shadow-md rounded">
{state.list.map((item) => (
<li
class="border-gray-200 border-b"
css={{
padding: '10px',
}}
>
{item}
</li>
))}
</ul>
</div>
);
}
``
**To Reproduce**
Checkout current mainline.
Edit ``packages/e2e-app/mitosis.config.js` to un-comment svelte output
`yarn workspace @builder.io/e2e-app run build`
Notably, if you remove the inner addItem function, Svelte output is generated.
**Expected behavior**
Generates (valid) Svelte
Alternatively, maybe such an inner function is considered invalid Mitosis? It work OK for React, Solid, Vue (at least)
Issue Analytics
- State:
- Created a year ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Error when navigating from a svelte page to an endpoint #867
When on a .svelte route, if you have a link that points to a server endpoint (my use case: generating a .pdf), you...
Read more >Docs • Svelte
If you export a const , class or function , it is readonly from outside the component. Functions are valid prop values, however,...
Read more >I'm getting an error in "Serverless Function" in my SvelteKit ...
When you deploy a SvelteKit app, it uses a serverless function to handle incoming requests and render the HTML for each page.
Read more >Dynamic behavior in Svelte: working with variables and props
Our Todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
Read more >Full Stack SvelteKit For Beginners - Joy of Code
SvelteKit is an opinionated full stack framework that ties the frontend and ... If you disable JavaScript or it fails to load for...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’d rather stick with creating issues until we have that system in place, to avoid the risk of forgetting what to test for. I don’t mind having tons of issues highlighting bugs 😄
I think we can close this one because the ongoing improvement of the docs to set expectations of what code works is already well-known elsewhere, right?