Crank.js

The Just JavaScript Framework

UI Framework
bikeshaving/crankcrank.js.org@bikeshaving/crank

README

Crank.js

The Just JavaScript web framework.


Crank is a web framework where components can be defined with sync functions, async functions and generator functions. The documentation for Crank.js is available at crank.js.org.

Get Started


Crank.js is published on NPM under the @b9g organization (short for “bikeshaving”).

  1. ```shell
  2. $ npm i @b9g/crank
  3. ```

Key Examples


A Simple Component


  1. ```jsx live
  2. import {renderer} from "@b9g/crank/dom";

  4. function Greeting({name = "World"}) {
  5.   return (
  6.     <div>Hello {name}</div>
  7.   );
  8. }

  10. renderer.render(<Greeting />, document.body);
  11. ```

A Stateful Component


  1. ```jsx live
  2. import {renderer} from "@b9g/crank/dom";

  4. function *Timer() {
  5.   let seconds = 0;
  6.   const interval = setInterval(() => {
  7.     seconds++;
  8.     this.refresh();
  9.   }, 1000);
  10.   try {
  11.     while (true) {
  12.       yield <div>Seconds: {seconds}</div>;
  13.     }
  14.   } finally {
  15.     clearInterval(interval);
  16.   }
  17. }

  19. renderer.render(<Timer />, document.body);
  20. ```

An Async Component


  1. ```jsx live
  2. import {renderer} from "@b9g/crank/dom";

  4. async function QuoteOfTheDay() {
  5.   const res = await fetch("https://favqs.com/api/qotd");
  6.   const {quote} = await res.json();
  7.   return (
  8.     <p>
  9.       “{quote.body}” – <a href={quote.url}>{quote.author}</a>
  10.     </p>
  11.   );
  12. }

  14. renderer.render(<QuoteOfTheDay />, document.body);
  15. ```

A Loading Component


  1. ```jsx live
  2. import {Fragment} from "@b9g/crank";
  3. import {renderer} from "@b9g/crank/dom";

  5. async function LoadingIndicator() {
  6.   await new Promise(resolve => setTimeout(resolve, 1000));
  7.   return <div>Fetching a good boy...</div>;
  8. }

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

  17.   return (
  18.     <a href={data.message}>
  19.       <img src={data.message} alt="A Random Dog" width="300" />
  20.     </a>
  21.   );
  22. }

  24. async function *RandomDogLoader({throttle}) {
  25.   for await ({throttle} of this) {
  26.     yield <LoadingIndicator />;
  27.     yield <RandomDog throttle={throttle} />;
  28.   }
  29. }

  31. function *RandomDogApp() {
  32.   let throttle = false;
  33.   this.addEventListener("click", (ev) => {
  34.     if (ev.target.tagName === "BUTTON") {
  35.       throttle = !throttle;
  36.       this.refresh();
  37.     }
  38.   });

  40.   for ({} of this) {
  41.     yield (
  42.       <Fragment>
  43.         <div>
  44.           <button>Show me another dog.</button>
  45.         </div>
  46.         <RandomDogLoader throttle={throttle} />
  47.       </Fragment>
  48.     );
  49.   }
  50. }

  52. renderer.render(<RandomDogApp />, document.body);
  53. ```