Need help with crank?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bikeshaving
2.3K Stars 64 Forks MIT License 909 Commits 35 Opened issues

Description

Write JSX-driven components with functions, promises and generators.

Services available

!
?

Need anything else?

Contributors list

Crank.js

Write JSX-driven components with functions, promises and generators.

Documentation is available at crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.

Features

Declarative

Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in JavaScript.

Just Functions

All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.

Promise-friendly

Crank provides first-class support for promises. You can define components as async functions and race renderings to display fallback UIs.

Lightweight

Crank has no dependencies, and its core is a single file. It currently measures at 4.5KB minified and gzipped.

Performant

According to benchmarks, Crank beats React in terms of speed and memory usage, and is currently comparable to Preact or Vue.

Extensible

The core renderer can be extended to target alternative environments such as WebGL libraries, terminals, smartphones or smart TVs.

Installation

Crank is available on NPM in the ESModule and CommonJS formats.

$ npm install @bikeshaving/crank
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

renderer.render(

Hello world
, document.body);

If your environment does not support ESModules (you may see a message like

SyntaxError: Unexpected token export
), you can import the CommonJS versions of the library under the
cjs
directory.
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank/cjs";
import {renderer} from "@bikeshaving/crank/cjs/dom";

renderer.render(

Hello world
, document.body);

Key Examples

A Simple Component

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

function Greeting({name = "World"}) { return (

Hello {name}
); }

renderer.render(, document.body);

Try on CodeSandbox

A Stateful Component

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

function *Timer() { let seconds = 0; const interval = setInterval(() => { seconds++; this.refresh(); }, 1000); try { while (true) { yield

Seconds: {seconds}
; } } finally { clearInterval(interval); } }

renderer.render(, document.body);

Try on CodeSandbox

An Async Component

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

async function QuoteOfTheDay() { const res = await fetch("https://favqs.com/api/qotd"); const {quote} = await res.json(); return (

“{quote.body}” – {quote.author}

); }

renderer.render(, document.body);

Try on CodeSandbox

A Loading Component

/** @jsx createElement */
import {createElement, Fragment} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

async function LoadingIndicator() { await new Promise(resolve => setTimeout(resolve, 1000)); return

Fetching a good boy...
; }

async function RandomDog({throttle = false}) { const res = await fetch("https://dog.ceo/api/breeds/image/random"); const data = await res.json(); if (throttle) { await new Promise(resolve => setTimeout(resolve, 2000)); }

return ( A Random Dog ); }

async function *RandomDogLoader({throttle}) { for await ({throttle} of this) { yield ; yield ; } }

function *RandomDogApp() { let throttle = false; this.addEventListener("click", (ev) => { if (ev.target.tagName === "BUTTON") { throttle = !throttle; this.refresh(); } });

while (true) { yield (

Show me another dog.
); } }

renderer.render(, document.body);

Try on CodeSandbox

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.