https://github.com/melhosseiny/flare

Compose user interfaces without frameworks
https://github.com/melhosseiny/flare

deno web-components

Last synced: about 2 months ago
JSON representation

Compose user interfaces without frameworks

• Host: GitHub
• URL: https://github.com/melhosseiny/flare
• Owner: melhosseiny
• License: mit
• Created: 2024-11-07T17:57:31.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-07T18:10:33.000Z (over 1 year ago)
• Last Synced: 2026-01-24T00:32:11.538Z (5 months ago)
• Topics: deno, web-components
• Language: JavaScript
• Homepage:
• Size: 271 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Flare

![](https://github.com/melhosseiny/flare/blob/772d63f73ceb8db0fd53c4de3e229b4bef860076/repo.png)

[![deno doc](https://doc.deno.land/badge.svg)](https://doc.deno.land/https://raw.githubusercontent.com/melhosseiny/flare/main/flare.js)

## Guide

1. [Functional web components](https://warm-dawn.deno.dev/composing-user-interfaces-without-frameworks-part-1)

## How to write a component

`components/hello_world.js`

    import { html, state, web_component, define_component } from "flare";

    const template = (data) => html`

      
Hello, World!

    `


    const style = `

      p { color: magenta; }

    `;

    export function hello_world(spec) {

      let { _root } = spec;

      const _web_component = web_component(spec);

      const _state = state(spec);

      const effects = () => {

        // add event listeners

      }

      // component methods

      return Object.freeze({

        ..._web_component

        effects

      })

    }

    define_component({

      name: "hello-world",

      component: hello_world,

      template,

      style,

      props: []

    );

`index.html`

    

    

      

        My app

        

          {

            "imports": {

              "sourdough": "https://busy-dog-44.deno.dev/melhosseiny/flare/main/flare.js"

            }

          }

        

      

      

        

        

          import { hello_world } from "/components/hello_world.js";