Renku

npm

Dependencies

• signal-polyfill for reactivity
• capnweb for RPC
• @sqlite.org/sqlite-wasm for client data storage

Getting started

bun create github.com/renkudev/template-bun

bun create github.com/renkudev/template-vite

CSS Classes

Renku uses the class prop to apply CSS classes to its components (as opposed to className in React). Using className will still work though. The prop accespts either a string or an array of strings.

<ul>
  <li><a href="/about" class={["link", "active"]}>About</a></li>
  <li><a href="/contact" class="link">Contact</a></li>
</ul>

Signals

import { createSignal, createComputed, type FunctionComponent } from "renku";

export const Counter: FunctionComponent<{ start: number }> = ({ start }) => {
  const counter = createSignal(start);
  const isEven = createComputed(() => counter.get() % 2 === 0);

  return (
    <div>
      <button type="button" onclick={() => counter.set(counter.get() + 1)}>
        Counter: {counter.get()} ({isEven.get() ? "even" : "odd"})
      </button>
    </div>
  );
};

Context

import { createContext } from "renku";

export const context: Context<{
  counter: Signal.State<number>;
}> = createContext();

export const Parent: FunctionComponent = ({
  children,
}) => {
  const counter = createSignal(0);
  context.set({ counter });

  return <div>{children}</div>;
};

export const Child: FunctionComponent = ({
  children,
}) => {
  const counter = createSignal(0);
  context.get({ counter });

  return (
    <div>
      <button type="button" onclick={() => counter.set(counter.get() + 1)}>
        Counter: {counter.get()}
      </button>
    </div>
  );
};

export const App: FunctionComponent = () => {
  return (
    <Parent>
      <Child />
      <Child />
    </Parent>
  );
};