Module suika - v1.5.4

Suika is a lightweight component based Javascript library for building user interfaces, that relies on a virtual DOM with JSX support.

Installation

You can use suika as a package on npm

npm install suika@latest
Copy

Documentation

Please follow the documentation at jonwatkins.github.io/suika/.

Example

A simple todo example can be found here. Or you can checkout the repo here.

Usage

The easiest way to use Suika is to use the vite bundler.Below is an example vite.config.js for bundling a Suika application.

import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    build: {
      outDir: "./dist",
    },
    esbuild: {
      jsxFactory: "h",
      jsxFragment: "Fragment",
    },
  };
});
Copy

By default Vite will use the src/index.ts file for the bundle. Below is an example of a simple index.ts and App.tsx file for a Suika application.

import { mount } from "suika";
import { App } from "./App";
const el = document.querySelector("#app");
mount(App, el as HTMLElement);
Copy

App.tsx

import { App, Component, mount, h, reactive } from "suika";

export default class App extends Component {
  state = reactive({
    count: 0,
  });
  render() {
    return (
      <div id="counter">
        <h1 className="title">Count: {this.state.value.count.toString()}</h1>
        <button onclick={() => this.state.value.count++}>Inc</button>
      </div>
    );
  }
}

mount(App, root);
Copy

License

MIT

Copyright (c) 2023-present, Jon Watkins