svelte-adapter-solid v1.1.1

svelte-adapter-solid

Use Svelte components with Solid

Usage

import { render } from "solid-js/web";
import { toSolid } from "svelte-adapter-solid";
import SvelteApp from "./Main.svelte";

const Main = toSolid(SvelteApp, 'div');

function App() {
  return (
    <>
      <p>Hello, Svelte!</p>
      <Main class="w-full h-full m-0 p-0" style="margin-top: 1px !important;" props={{ name: 'Adolf' }}/>
    </>
  );
}

render(App, document.body);

Props

Reactivity

Props and style are reactive, class is not. Take a look at the example to understand:

//Main.svelte
<script>
  export let margin = 0;
</script>

<p>Current margin is {margin}px!</p>

//App.jsx (part)
function App(){

  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  setInterval(increment, 1000);

  return(
    //Every one second style and props will update, but class will not
    <Main class={`bg-red-${count()}`} style={`margin-top: ${count()}px;`} props={{ margin: count() }}/>
  )
}