question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created a year ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
samijabercommented, Jun 17, 2022

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 😄

0reactions
kylecordescommented, Jun 17, 2022

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found