myjam

Experimental framework for building web interfaces (Wannabe React & Next.js).

Getting started

Checkout the example.

Install

yarn add myjam

Add scripts

{
  "scripts": {
    "dev": "myjam dev",
    "build": "myjam build",
    "type-check": "myjam type-check"
  }
}

Add entry file (src/index.tsx)

export default function App() {
  return <h1>myjam!</h1>;
}

dev command

Starts a dev server that rebuilds the project on changes.

$ myjam dev
⏳ Starting dev server
🎉 Dev server started: http://localhost:3000

build command

Exports the site as pre-rendered static files.

$ myjam build
🛠️ Building
🎉 Build successful!

type-check command

Type checks the project with tsc.

$ myjam type-check
✨  Done in 3.51s.

Features

getProps function

Only runs at build time, returned value is sent to the entry point component.

export const getProps: GetPropsFunction<Props> = async (
  fetch /* node-fetch */
) => {
  const fs = await import("fs");
  const data = await fs.promises.readFile("./data.json", { encoding: "utf-8" });
  return JSON.parse(data);
};

Styling

Tailwind works out of the box.

<div class="border shadow">Hello world!</div>

<div class={{ "border shadow": !disabled, hidden: disabled }}>Hello world!</p>

Hooks

import {
  useState,
  useReducer,
  useEffect,
  useRef,
  useMemo,
  useCallback,
} from "myjam";