RegularFramework

RegularFramework is a new framework for building web pages that is simple, powerful, and elegant.

Features

• Simple: No magic or complex object-oriented concepts. Easy to understand and get started with, whether you're a developer or a large language model like GPT.
• Powerful: Provides a few functions as a starting point, allowing you to build more powerful features without limitations.
• Elegant: Carefully designed functions ensure you can accomplish more with less code.

Installation

pnpm i regular-framework
Copy

import { NewElement /*, ... */ } from 'regular-framework/client';

// or directly from the CDN

import { NewElement /*, ... */ } from 'https://esm.sh/regular-framework/client';
Copy

Getting Started

1. NewElement: Create the root element

const root = NewElement('div');
Copy

2. WatchRootElement: Watch all events on the root element

WatchRootElement(
  root, 
  // Optional callback
  (e) => {}
);
Copy

3. AddElement: Append the root element(, such as appending to document.body)

AddElement(document.body, root);
Copy

4. Say hello to the world

AddElement(root, NewElement('h1', {}, 'Hello, world!'));
Copy

5. Do things faster with aliases

• AddElement: ae
• NewElement: ne
• WatchRootElement: wre
• ...

5. NewSignal: Bring reactivity to your app

const signal = NewSignal('Hi!');
AddElement(root, NewElement('h1', {}, signal));
signal.value = 'Bye!';
Copy

6. Final<T> & GetValue: Understand what makes RegularFramework so powerful

GetValue(() => () => 'Powerful') === 'Powerful' // true
GetValue(() => signal) === 'Bye!' // true
GetValue(114514) === 114514 // true, of course
Copy

7. Visit the API and example sites to learn more

• https://intzaaa.github.io/RegularFramework

• https://regular-framework.pages.dev

The source code of the example site is available at example/vite.

---

Hope you enjoy using RegularFramework! If you have any questions or suggestions, feel free to open an issue or pull request. Thanks!