https://github.com/oakfang/bean

An unapologetically modern, build-free, Frontend infrastructure
https://github.com/oakfang/bean

Last synced: 6 days ago
JSON representation

An unapologetically modern, build-free, Frontend infrastructure

• Host: GitHub
• URL: https://github.com/oakfang/bean
• Owner: oakfang
• License: mit
• Created: 2022-05-12T06:57:29.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-10T08:53:05.000Z (over 2 years ago)
• Last Synced: 2024-11-09T18:19:29.023Z (2 months ago)
• Language: JavaScript
• Size: 43.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bean

An unapologetically modern, build-free, Frontend infrastructure

## Current Release: **Coffee**

Features:

- Zero build tools

- Enhanced Web Components

- Stream based state updates

- Fully native SPA routing

  - Falling back to hash routing if unsupported (temporarily, while unavailable in Chrome proper)

## Usage

### WebComponents

```js

import {

  WebComponent,

  prop,

  on,

  child,

} from "https://cdn.jsdelivr.net/gh/oakfang/bean/bean.js";

export default class extends WebComponent {

  static tagName = "my-component";

  static html = `

    

        :host {

            display: block;

        }

        p {

            color: var(--text, black);

        }

    

    


  `;


  text = child("p");

  [prop("text")](_, [newText]) {

    this.text.innerText = newText;

  }

  [on("click")]() {

    console.log("clicked");

  }

  static {

    this.setup();

  }

}

```

### State

```js

import { ValueStream } from "https://cdn.jsdelivr.net/gh/oakfang/bean/vstream.js";

const stateManager = new ValueStream({

  todos: null,

});

(async () => {

  for await (let { todos } of stateManager) {

    console.log(todos);

  }

})();

stateManager.update((current) => ({ ...current, todos: ["a", "b", "c"] }));

```

### Routing

```js

import { createRouter } from "https://cdn.jsdelivr.net/gh/oakfang/bean/router.js";

const router = createRouter(({ pathname }) => {

  switch (pathname) {

    case "/": {

      return import("./home.js");

    }

    default: {

      return import("./404.js");

    }

  }

});

document.body.appendChild(router);

```

> Or, y'know, just take a look at the Demo.