@mortimer333/dito

v1.0.1

Published

a year ago

Lightweight library with components, template syntax, bindings and dynamic CSS.

Downloads

0High
0Medium
0Low

mortimer333

components lightweight templating dynamic css

Dito

Lightweight library with components, template syntax, bindings and dynamic CSS.

Preview

JS:

import { DitoElement } from 'src/ditoelement.js';

class PlanetElement extends DitoElement {
  init() {
    this.$.icons = ['🌎', , '🪐'];
    this.$.planets = ['earth', , 'jupiter'];
    this.$.className = 'planet-class';
  }
}

export { PlanetElement as default };

HTML:

<h1 @a:class="className" @for="3" @if="$value !== 1">Planet {{ $value + 1 }}: {{ planets[$value] }} {{ icons[$value] }}</h1>

Output:

<h1 class="planet-class">Planet 1: earth 🌎</h1>
<h1 class="planet-class">Planet 3: jupiter 🪐</h1>

Why even try?

The purpose of this library is to have dynamic, scoped and reusable FE components packed with functionality without need for any framework or dependencies which works in plain JS.

Installation

Native

Just download dito.min.js and ditoelement.min.js and require them as modules on your page:

<script type="module" src="/media/script/dist/dito.min.js" charset="utf-8"></script>

import { DitoElement } from "/media/script/dist/dito.min.js";
class CustomElement extends DitoElement {
  // [...]
}

but remember that you will have to update them by hand each time new version is released.

`npm`

npm i @mortimer333/dito

This would be it for node project, but it is not really a node module. So if you want to use npm but without webpack or gulp check this installation document.

Framework

If you are looking for a ready to go project or just example check this:

💥 Micro Front End,
💥 One-Page Application with Router,
💥 NPM configured Tailwind CSS and esbuild for Dito components with dev/prod mode,
💥 User/Permissions System,

app skeleton made with Dito 🔥.

Quick Start

Start with creating your first component, let's name it showcase-earth (must contain hyphen -):

public/ <- Website root folder
-- components/
-- -- dito.js
-- -- ditoelement.js
-- -- showcase-earth/
-- -- -- showcase-earth.js
-- -- -- showcase-earth.css
-- -- -- showcase-earth.html

We are following Angular-like naming pattern when creating our components.

Now fill your JS with:

import { DitoElement } from 'components/ditoelement.js';
class EarthElement extends DitoElement {
  init() {
    this.$.icon = '🌎';
    this.$.name = 'earth';
    this.$.className = 'earth-class';
  }
}
export { EarthElement as default };

and HTML with:

<h1 @a:class="className">Planet: {{ name }} {{ icon }}</h1>

Notice that all variables used in the HTML file are assigned to the attribute $ which works as a global scope for HTML template. Think of it as a barbaric version of variable visibility and anything set in $ is accessible in HTML.

We also need to create our index file and request just created component:

<body>
  <showcase-earth></showcase-earth>
</body>

Now create new instance of Dito (and only one) and set URL path to the folder containing your components:

const container = new Dito({
  url: 'http://localhost:80/components/',
});

There must be only one instance of Dito per website and attempt to create second will result in error. If you need to access it from different point then you can find it under window.__dito.main or just __dito.main.

Register your first component by Dito::register method which requires the name of the component and version (for cache bursting if necessary):

container.register('showcase-earth', 1);

With all our components registered we can call Dito::load method which will start searching current file for registered components and loads them asynchronously.

await container.load();

At this point our body should look like this:

<body>
  <showcase-earth></showcase-earth>
  <script type="module">
    import { Dito } from 'components/dito.js';
    const container = new Dito({
      url: 'http://localhost:80/components/',
    });
    container.register('earth-element', 1);
    await container.load();
    console.log('Top level components loaded!')
  </script>
</body>

and render into this:

<body>
  <showcase-earth dito-t="1696445746936" dito-i="1" dito-ready>
    <h1 class="earth-class">Planet: earth 🌎</h1>
  </showcase-earth>
  <script type="module">[...]</script>
</body>

We Are Done! Few steps are required and I wouldn't call it the easiest to learn library in the world. You need to understand basics, at least, to start with it but once learned it's pretty good and pleasant to use.

Advanced stuff

With the Quick Start you can't really use the library, it's only to honestly show the very basics of setup and first usage. If you want to be able to use @actions, Injectables, Dynamic CSS, Observables, In-Out Communication and understand Component's Life Cycle then have a read (from top to bottom):