Eofol

Felt cute might delete later idk <3

All-inclusive blazingly fast reactive web framework with zero configuration, batteries included! Create a reactive app from template out-of-the-box with eofol-app.

Features

• Declaratively define custom tag html elements or render to DOM element
• Multiple entrypoints
• Global state management
• Dynamic styling in JS
• Typescript support
• Bundle and asset optimization
• PWA support

Create-eofol-app

npx @eofol/create-eofol-app (project-name)

Installation

npm install --save @eofol/eofol

Usage

• Development

  npm start

  Copy

• Build

  npm run build

  Copy

• Test build locally

  npm run serve

  Copy

• Clean

  npm run clean

  Copy

• Analyze bundle

  npm start analyze

  Copy

Eofol automatically generates bundles from your views on the path .../eofol-app/views/your-view/your-view.js paired together with a html file in your public folder by the same filename: .../eofol-app/public/your-view.html.

Showcase

Docs

Example

renderTarget<CountState>("eofol-target", {

   render: (

      state: StateTypeImpl<CountState> | undefined,

      setState: StateSetter<CountState> | undefined

   ) => {

      const s = state as CountState;



      return [

         createElement("div", sx({ color: "blue" }), "Targeted element example"),

         createElement("div", undefined, `Click count: ${s.count}`),

         createElement("button", "eofol-button", "Click!", undefined, {

           onclick: () => {

              setState && setState({ count: s.count + 1 });

           },

       }),

        createElement("button", "eofol-button", "Reset", undefined, {

           onclick: () => {

              setState && setState({ count: 0 });

           },

        }),

     ];

   },

    initialState: { count: 0 },

 });

License

Author