Name: SOLIDJS in Browser
Rating: 1.2 (9143 reviews)
Author: artydev

SOLIDJS in Browser

artydev - Sep 17 '23 -

- Dev Community

For SolidJS fans, here is a way to use it directly in a browser (although you loose some performances benefits)

SolidJS in Browser

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module" src="./src/index.js"></script>
  </body>
</html>

solid.js

import {
    createSignal,
    onCleanup,
  } from "https://cdn.skypack.dev/solid-js";

  import { render } from "https://cdn.skypack.dev/solid-js/web";
  import html from "https://cdn.skypack.dev/solid-js/html";


  export {createSignal, onCleanup, render, html};

index.js

import { createSignal, onCleanup, render, html } from "./libs/solid.js";

const [count, setCount] = createSignal(0),
  timer = setInterval(() => setCount(count() + 1), 1000);

function Titre() {
  return html`<span style="margin: 0 10px">COUNTER</span>`;
}

const App = () => {
  onCleanup(() => clearInterval(timer));
  return html`
    <div style="font-weight:bold">
      ${Titre}
      <span>${count}</span>
    </div>
  `;
};

render(App, document.body);