SolidJS Official Release: The long road to 1.0

const myButton = <button
  onClick={() => console.log("Hello")}
>Click Me</button>

// myButton instanceof HTMLButtonElement

<div>{ showComponent() && <MyComp /> }</div>

// custom end user created component
<Paginated
  list={someList()}
  numberOfItems={25}
>
  {item => <div>{item.description}</div>}
</Paginated>

function App() {
  const [count, setCount] = createSignal(0);

  // custom primitive with same syntax
  const [state, setState] = createTweenState(0);

  createEffect(() => {
    // no need for that dependency list we know when you update
    const c = count();

    // yep I'm nested
    createEffect(() => {
      document.title = `Weird Sum ${ c + state() }`;
    })
  });

  // Did I mention no stale closures to worry about?
  // Our component only runs once
  const t = setInterval(() => setCount(count() + 1, 5000);
  onCleanup(() => clearInterval(t));

  // other stuff...
}

const el = <div>Initial Text</div>
createEffect(() => {
  el.textContent = getNewText();
});

// versus
render(() => <MyGiantApp />, document.getElementById("app"))

// directive using the same primitives
function accordion(node, isOpen) {
  let initialHeight;
  createEffect(() => {
    if (!initialHeight) {
      initialHeight = `${node.offsetHeight}px`;
    }
    node.style.height = isOpen() ? initialHeight : 0;
  })
}

// use it like this
<div use:accordion={isOpen()}>
  {/* some expandable content */}
</div>