the-fun-framework - GitLite

KO | EN

gitlite — search

#claude #machine-learning #anthropic #javascript #dotnet #cloud-native #cpp #vue #git #typescript

the-fun-framework

(★ 23)

🛝 An experimental homegrown JS framework.

File Explorer

ZIP Download

- - build.yml
  - deploy-docs.yml
  - test.yml
- commit-msg
- pre-commit
- pre-push
- setup-tests.ts
- - config.ts
- index.md
- main.ts
- expression-parser.ts
- hooks.ts
- index.ts
- renderer.spec.ts
- renderer.ts
- types.ts
- slide.png
.eslintignore
.eslintrc.cjs
.gitignore
commitlint.config.cjs
index.html
LICENSE.md
package.json
pnpm-lock.yaml
README.md
tsconfig.json
tsconfig.node.json
tsconfig.spec.json
vite.config.ts
vitest.config.ts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
<h1>The Fun Framework</h1>

<a href="https://joypixels.com/profiles/emoji/playground-slide">
  <img
    height="80"
    width="80"
    alt="playground slide"
    src="./other/slide.png"
  />
</a>

<p>An experimental homegrown JS framework.</p>

</div>

<div align="center">

[![Build Status](https://img.shields.io/github/actions/workflow/status/crutchcorn/the-fun-framework/build.yml?branch=main)](https://github.com/crutchcorn/the-fun-framework/actions/workflows/build.yml?query=branch%3Amain)
[![Test Status](https://img.shields.io/github/actions/workflow/status/crutchcorn/the-fun-framework/test.yml?branch=main&label=tests)](https://github.com/crutchcorn/the-fun-framework/actions/workflows/test.yml?query=branch%3Amain)
[![Pre-release](https://img.shields.io/npm/v/the-fun-framework.svg)](https://npm.im/the-fun-framework)
[![gzip size](https://img.badgesize.io/https://unpkg.com/the-fun-framework@latest/dist/the-fun-framework.cjs?compression=gzip)](https://unpkg.com/browse/the-fun-framework@latest/dist/the-fun-framework.cjs)
[![license](https://badgen.now.sh/badge/license/MIT)](https://raw.githubusercontent.com/crutchcorn/the-fun-framework/main/LICENSE.md)

</div>

The goals of this project are:

- HTML-first templating
- No VDOM
- Implicit re-renders (instead of calling an update function manually, "mutate")

## Installation

```shell
npm install the-fun-framework
```

## Usage

```html

<div data-island-comp="App">
  <p>{{message}}</p>
</div>
```

```typescript
// index.ts
import { createState, registerComponent, render } from "the-fun-framework";

function App() {
  return {
    message: "Hello, world",
  };
}

// Register with the same name as `data-island-comp`
App.selector = "App";
registerComponent(App);
render();
```

### Conditional Display

```html

<div data-island-comp="Counter">
  <button data-on-click="updateCount()">Count</button>
  <p>Count: {{count.value}}</p>
  <p data-if="count.value % 2 === 0">{{count.value}} is even</p>
</div>
```

```typescript
// index.ts
import { createState, registerComponent, render } from "the-fun-framework";

function Counter() {
  let count = createState(0);

function updateCount() {
    count.value++;
  }

return {
    count,
    updateCount,
  };
}

// Register with the same name as `data-island-comp`
Counter.selector = "Counter";
registerComponent(Counter);
render();
```

### Loop Display

```html

<div data-island-comp="People">
  <h1>Names</h1>
  <ul>
    <li data-for="item of list.value" data-key="item.key">{{item.name}}</li>
  </ul>
  <button data-on-click="addPerson()">Add person</button>
</div>
```

```typescript
// index.ts
function People() {
  const list = createState([
    {
      name: "Corbin",
      key: "corbin",
    },
    {
      name: "Ade",
      key: "ade",
    },
  ]);

let personCount = 0;
  function addPerson() {
    const newList = [...list.value];
    ++personCount;
    newList.push({
      name: `Person ${personCount}`,
      key: `person_${personCount}`,
    });
    list.value = newList;
  }

return {
    list,
    addPerson,
  };
}

People.selector = "People";
registerComponent(People);
render();
```