https://github.com/crutchcorn/the-fun-framework

🛝 An experimental homegrown JS framework.
https://github.com/crutchcorn/the-fun-framework

alpinejs framework javascript solidjs vue

Last synced: about 2 months ago
JSON representation

🛝 An experimental homegrown JS framework.

• Host: GitHub
• URL: https://github.com/crutchcorn/the-fun-framework
• Owner: crutchcorn
• License: mit
• Created: 2023-06-04T12:49:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-20T06:33:03.000Z (almost 2 years ago)
• Last Synced: 2024-12-20T07:48:06.974Z (6 months ago)
• Topics: alpinejs, framework, javascript, solidjs, vue
• Language: TypeScript
• Homepage: https://crutchcorn.github.io/the-fun-framework/
• Size: 802 KB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


The Fun Framework




  



An experimental homegrown JS framework.






[![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)](./LICENSE.md)



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



  
{{message}}



```


```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



  Count

  
Count: {{count.value}}

  
{{count.value}} is even



```


```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



  
Names

  


    
{{item.name}}

  

  Add person



```


```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();

```