@enzoaicardi/webcomponent v2.3.1
Webcomponent.js
A customElements abstraction layer to create web components that can be rendered on both client and server sides
What is a web-component
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. (source: MDN)
In pure javascript, web components are generally written using custom elements and possibly shadow DOM.
Why WebComponent ?
Web-components are part of the user interface. They provide lifecycle methods once instantiated, but have no rendering method that can be executed on both client and server.
The WebComponent library is designed to solve these problems. Unlike most reactive component frameworks / libraries, WebComponent is just a small layer on top of customElements written in typescript (only 1.7kb) that doesn't take you out of the scope of traditional javascript development, doesn't use JSX, and doesn't require a transpiler.
To learn how to use it, check the wiki !
List of all exports
Installations
The WebComponent layer is available as ESModule / IIFE / Commonjs.
NPM Package
npm install @enzoaicardi/webcomponentimport { WebComponent } from "@enzoaicardi/webcomponent/client"; // client es module
import { WebComponent } from "@enzoaicardi/webcomponent/server"; // server es module
const WebComponent = require("@enzoaicardi/webcomponent/client"); // client commonjs modules
const WebComponent = require("@enzoaicardi/webcomponent/server"); // server commonjs modulesCDN import
// client es module
import { WebComponent } from "https://cdn.jsdelivr.net/npm/@enzoaicardi/webcomponent@latest/esm/client.js";
// server es module
import { WebComponent } from "https://cdn.jsdelivr.net/npm/@enzoaicardi/webcomponent@latest/esm/server.js";<!-- iife function execution -->
<script src="https://cdn.jsdelivr.net/npm/@enzoaicardi/webcomponent@latest/iife/client.js"></script>
<script>
// global object
WebComponent;
</script>