https://github.com/pyrossh/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.
https://github.com/pyrossh/atoms-element

client components dom server ssg web

Last synced: 20 days ago
JSON representation

A simple web component library for defining your custom elements. It works on both client and server.

• Host: GitHub
• URL: https://github.com/pyrossh/atoms-element
• Owner: pyrossh
• Created: 2021-06-26T03:51:31.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-06-19T09:23:02.000Z (over 2 years ago)
• Last Synced: 2024-11-10T00:44:38.975Z (3 months ago)
• Topics: client, components, dom, server, ssg, web
• Language: JavaScript
• Homepage:
• Size: 191 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# atoms-element

A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react.

Data props are attributes on the custom element by default so its easier to debug and functions/handlers are attached to the element.

I initially started researching if it was possible to server render web components but found out not one framework supported it. I liked using

[haunted](https://github.com/matthewp/haunted) as it was react-like with hooks but was lost on how to implement server rendering. Libraries like

JSDOM couldn't be of use since it didn't support web components and I didn't want to use puppeteer for something like this.

After a year of thinking about it and researching it I found out this awesome framework [Tonic](https://github.com/optoolco/tonic).

That was the turning point I figured out how they implemented it using a simple html parser.

After going through all these libraries,

1. [lit-html](https://github.com/lit/lit)

2. [lit-html-server](https://github.com/popeindustries/lit-html-server)

3. [haunted](https://github.com/matthewp/haunted)

4. [Tonic](https://github.com/optoolco/tonic)

5. [Atomico](https://github.com/atomicojs/atomico)

6. [fuco](https://github.com/wtnbass/fuco)

And figuring out how each one implemented their on custom elements I came up with atoms-element. It still doesn't have proper rehydration lit-html just replaces the DOM under the server rendered web component for now. Atomico has implemented proper SSR with hydration so I might need to look into that in the future or

use it instead of lit-html. Since I made a few modifications like json attributes and attrTypes I don't know if it will easy.

## Example

```js

import { createElement, useReducer, html, renderHtml } from 'atoms-element/index.js';

const Counter = ({ name, meta }) => {

  const { count, actions } = useReducer({

    initial: {

      count: 0,

    },

    reducer: {

      increment: (state) => ({ ...state, count: state.count + 1 }),

      decrement: (state) => ({ ...state, count: state.count - 1 }),

    },

  });

  const warningClass = count > 10 ? 'text-red-500' : '';

  return html`

    


      


        Counter: ${name}

        starts at ${meta?.start}

      

      


        -

        


          
${count}

        

        +

      

    

  `;

};


createElement({ url: 'app-counter.js' }, Counter);

console.log(renderHtml(html``));

```