https://github.com/zetsuboii/respond.js

A single page website library, in 200 lines
https://github.com/zetsuboii/respond.js

Last synced: about 1 month ago
JSON representation

A single page website library, in 200 lines

• Host: GitHub
• URL: https://github.com/zetsuboii/respond.js
• Owner: zetsuboii
• Created: 2023-12-09T12:37:06.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-09T14:03:38.000Z (about 1 year ago)
• Last Synced: 2023-12-09T15:23:43.928Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Respond

Respond is a single page application library, written in 200 LOC.

## Features

- Reactive DOM: DOM elements update automatically when state changes

- Granular state updates: Only the DOM elements that depend on a state change are updated

- Native HTML APIs: No custom syntax or DSL, just plain JavaScript

## Installation

Just build the project with `yarn build` and copy `respond/index.es.js` into your project.

To run the development server, run `yarn dev`.

## Example: Counter App

```js

import {

    getState,

    createState,

    reactive,

    p,

    button,

    div,

} from "./respond.js";

const counterState = createState({ count: 0 });

const CounterText = p({

    innerText: reactive(counterState, ([state]) => state.count),

});

const IncrementButton = button({

    innerText: "Increment",

    onclick: () => getState(counterState).count++,

});

const Counter = div([CounterText, IncrementButton]);

createApp("body", [Counter]);

```

## Example: Todo App

```js

import {

    getState,

    createState,

    reactiveChildren,

    p,

    button,

    input,

    div,

} from "./respond.js";

const todoState = createState({ todos: [] });

const TodoList = div(

    reactiveChildren(

        todoState, 

        ([state]) => state.todos.map((todo) => p({ innerText: todo }))

    )

);

const TodoInput = input({

    oninput: (event) => {

        const value = event.target.value;

        if (value != undefined) {

            getState(todoState).todos.push(value);

            event.target.value = "";

        }

    },

});

const TodoApp = div([TodoList, TodoInput]);

createApp("body", [TodoApp]);

```

## Contributing

This is a hobby project, but if you feel like contributing, feel free to open a pull request.