@arachnide/core

Requirements

• Node
• NPM

Initialisation

npm create vite -- --template vanilla-ts my-arachnide-project
cd my-arachnide-project
npm install

Installation

npm install --save --save-exact @arachnide/core

Initialization

import { startApplication } from "@arachnide/core";
import { ul, li, div, p, h1 } from "@arachnide/html";
import { styles } from "@arachnide/css";
import { oninput } from "@arachnide/event";
import { button, input, label } from "@arachnide/silk"

const root = document.getElementById("root");

if (!root) {
  throw new Error("Root element not found");
}

export type ApplicationState = {
  counter: number
}

export type ApplicationEvent =
  | { name: "INCREMENT" }
  | { name: "DECREMENT" }
  | { name: "SET_STEPS", data: number }

export enum ApplicationPath {
  NotFound = "*",
  Home = "/"
}

startApplication<ApplicationState, ApplicationEvent, ApplicationPath>({
  root,
  initialState: () => ({
    counter: 10,
  }),
  onUpdate: ({ state, event }): ApplicationState => {
    switch (event.name) {
      case "INCREMENT":
        return {
          ...state,
          counter: state.counter + state.steps
        };

      case "DECREMENT":
        const newCounter = state.counter - state.steps;

        if (newCounter < 0) {
          return {
            ...state,
            counter: 0
          };
        }

        return {
          ...state,
          counter: state.counter - state.steps
        };

      case "SET_STEPS":
        return {
          ...state,
          steps: event.data
        };
    }
  },
  pages: {
    [ApplicationPath.Home]: ({ state, update, changePage }) => {
      return div({
        attributes: {
          class: "container"
        },
        content: [
          h1({
            attributes: {
              class: "center",
              style: styles({
                textAlign: "center"
              })
            },
            content: "Home"
          }),
          div({
            attributes: {
              class: "grid"
            },
            content: [
              button({
                attributes: {
                  class: "outline",
                  onclick: () => {
                    update(() => ({
                      name: "INCREMENT"
                    }));
                  }
                },
                content: "Increment"
              }),
              button({
                attributes: {
                  class: "outline",
                  onclick: () => {
                    update(() => ({
                      name: "DECREMENT"
                    }));
                  }
                },
                content: "Decrement"
              }),
            ]
          }),
          label({
            attributes: {
              for: "steps"
            },
            content: " Steps "
          }),
          input({
            attributes: {
              id: "steps",
              step: 10,
              type: "number",
              value: state.steps,
              oninput: oninput((value) => {
                update(() => ({
                  name: "SET_STEPS",
                  data: Number(value) || 100
                }));
              })
            }
          }),
          ul({
            content: Array.from(Array(state.counter)).map((_, index) => {
              return li({
                attributes: {},
                content: `Index #${index}`
              });
            })
          })
        ]
      });
    },
    [ApplicationPath.NotFound]: ({ changePage }) => {
      return div({
        content: [
          h1({
            content: "Page not found"
          }),
          button({
            attributes: {
              style: styles({
                display: "block",
                margin: "0 auto"
              }),
              onclick: () => {
                changePage({
                  path: ApplicationPath.Home,
                  parameters: {},
                  searchParameters: {}
                });
              }
            },
            content: "Go back home"
          })
        ]
      });
    }
  }
});

Start

npm run dev

Example

See example.

Changelogs

See CHANGELOG.md.

License

See LICENSE.