Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@chialab/dna

Package Overview
Dependencies
Maintainers
0
Versions
217
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chialab/dna

Progressive Web Components

  • 4.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
267
decreased by-17.59%
Maintainers
0
Weekly downloads
 
Created
Source

DNA logo

DNA • Progressive Web Components

NPM

Features

DNA aims to unleash the true power of Custom Elements through a declarative definition API, with builtin elements extension support and a simpler composition mechanism (yes, it does not use ShadowDOM).

Customized built-in elements

DNA simplifies and encourages the use of customized built-in elements, which inherit methods and properties from standard HTML, preserving usability and accessibility features.

Properties, states and attributes

DNA offers @property and @state decorators for adding reactivity to a component's class fields, ensuring that any changes are reflected in the component's template. These properties and states can be monitored, synchronized with attributes, and trigger change events.

Listeners and async events

DNA uses event delegation for listening to events from a component's elements or slotted contents, offering the @listen decorator to streamline the process. Events can be asynchronous and dispatched from the component's class.

Slots

DNA uses Quantum instead of ShadowDOM to render slotted children, simplifying the usage of custom elements inside forms and providing a more flexible management of slotted contents. Unlike ShadowDOM, Quantum also works for built-in elements, allowing you to use even inside buttons.

Get the library

Install via NPM:

npm i @chialab/dna
yarn add @chialab/dna

Define a Component

import { Component, customElement, listen, property } from '@chialab/dna';

@customElement('hello-world')
class HelloWorld extends Component {
    // define an observed property
    @property() name: string = '';

    render() {
        return (
            <>
                <input
                    name="firstName"
                    value={this.name}
                />
                <h1>Hello {this.name || 'World'}!</h1>
            </>
        );
    }

    // delegate an event
    @listen('change', 'input[name="firstName"]')
    private onChange(event: Event, target: HTMLInputElement) {
        this.name = target.value;
    }
}

Then use the element in your HTML:

<hello-world></hello-world>

Development

Build status codecov

Build the project

Install the dependencies and run the build script:

yarn install
yarn build

This will generate the bundles in the dist folder, as well as the declaration files.

Test the project

Run the test script:

yarn test

License

DNA is released under the MIT license.

FAQs

Package last updated on 12 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc