https://github.com/melhosseiny/sourdough

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

deno esm web-components

Last synced: 4 months ago
JSON representation

Compose user interfaces without frameworks

• Host: GitHub
• URL: https://github.com/melhosseiny/sourdough
• Owner: melhosseiny
• Created: 2020-11-17T01:29:55.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-11-05T13:49:31.000Z (over 1 year ago)
• Last Synced: 2025-10-08T04:54:26.580Z (8 months ago)
• Topics: deno, esm, web-components
• Language: JavaScript
• Homepage:
• Size: 6.35 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
# Flare

![](https://github.com/melhosseiny/sourdough/blob/3d0a00c0de64b37cd2de4f72311e3ea4a348bb80/repo.png)

[![deno doc](https://doc.deno.land/badge.svg)](https://doc.deno.land/https://raw.githubusercontent.com/melhosseiny/sourdough/main/sourdough.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 "sourdough";

    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/sourdough/main/sourdough.js"

            }

          }

        

      

      

        

        

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