etuc v1.0.0

ETUC: Ease-To-Use web Components

Getting started

Install ETUC using: npm i etuc
Write this in a new .etuc file:

<script>
    defineComponent({
        name: 'Test Component',     // Optional
        tagName: 'test-component',  // Optional
        className: 'TestComponent', // Optional
        props: [ 'propName' ],      // Optional
        methods: {                  // Optional
            customMethod: () => console.log(`${this} is an ETUC component`),
            innerHTMLChanged: (oldInnerHTML, newInnerHTML) => console.log(newInnerHTML),
            propChanged: (prop, oldValue, newValue) => console.log(`${prop} changed from ${oldValue} to ${newValue}`)
        }
    })
</script>

<scss>
    :host {
        display: block;
        h1 {
            color: fuchsia;
            font-family: sans-serif;
        } 
    }
</scss>

<h1>It's working!</h1>

Understanding the ETUC philosophy

ETUC components are .etuc files written in an HTML-like structure, they're then compiled into a JavaScript file containing the Web Component using the shadowDOM API, and therefore, the styles appiled to your component won't affect the rest of the page.

Syntax

<script> tags

Script tags with an src or etuc-ignore attributes will be ignored and bundled into the component's shadowDOM's innerHTML

• defineComponent(data: object) Used to define the component (there should only be one component per file): data: object: It must contain name, or tagName and className: name?: string: The name (It can contain spaces, used internally). tagName?: string: The tag name (It must contain a hyphen). className?: string: The name used for the class that will contain the component (It mustn't contain spaces). props?: string[]: The name of the attributes and properties that the component will have. methods?: { [key: string]: Function }: The methods (functions) that the component will have: innerHTMLChanged?: (old: string, new: string): Method that will fire whenever the component's lightDOM's innerHTML changes. propChanged?: (prop: string, oldValue: unknown, newValue: unknown): Method that will fire whenever a prop changes.

<scss> tags

They're treated differently from every other tag, they're compiled using the sass npm package using the path as the .etuc file and then bundled into the component's shadowDOM's innerHTML.

Every other HTML tag

They're ignored, no special treatment performed.