DEV Community

Boris Siscanu
Boris Siscanu

Posted on • Edited on

Recycle your HTML code

The basic mantra of software development "don't repeat yourself" was hardly achievable in the process of HTML layout creation, template engines smoothed the flow, but it kept to be an ocean of pain and divs for a long period of time.

Gladly, everything changed with the introduction of web components, a set of web platform APIs used to produce encapsulated HTML tags. It reduces development span considerably, improves code quality and makes HTML code scalable ad infinitum.

Apparently, it's a game changer and to persuade you to adopt web components as early as possible, we started the Domy project, a package manager for web components.

GitHub logo teamdomy / domy

Custom Elements Storage

Custom Elements storage

License Issues

Utilization

Sign up by using your username, password and email:

domy signup
Enter fullscreen mode Exit fullscreen mode

Log in to the system from another computer or using another account:

domy login
Enter fullscreen mode Exit fullscreen mode

Compile the project using Stencil and after publish it, submitting the whole directory:

domy publish --version 0.1.0
Enter fullscreen mode Exit fullscreen mode

Execute the command in the root (base) directory of your project
The version is optional. Non-versioned components will be sent to the master branch

It's possible to publish just one component by passing its class name

domy publish MyComponent --version 0.1.0
Enter fullscreen mode Exit fullscreen mode

Install the component in another project using its class name:

domy install MyComponent --version 0.1.0
Enter fullscreen mode Exit fullscreen mode

Installed components will be tracked in package.json webcomponents compartment

To install all components listed in package.json webcomponents compartment, drop the class name:

domy install
Enter fullscreen mode Exit fullscreen mode

Components are installed in the node_modules/@ directory and could be reused in another Stencil application:

// master is a non-versioned
Enter fullscreen mode Exit fullscreen mode

It detects and publishes every single web component used in a Stencil project, no configuration required. The compiled code represents mostly an "intermediate" set of instructions generated by Stencil for distribution purpose. It means that on the last mile, Stencil compiler should be used to bundle everything together. In the registry, components are stored in deeply nested collections, where the root is the current user name

Currently, only Stencil-like generated components are supported, the integration of LitElement base class is coming next.

We would be thrilled to hear your opinion on the matter. Submission of a feature or a bug would be even better. Thanks!

Top comments (0)