@lukecjohnson/dot NPM

●

Dot is a preprocessor that adds reusable components with properties and slots to standard HTML.

Components

Components are created with a standard HTML file in the components directory. Properties are defined with a basic template syntax:

<!-- components/greeting.html -->

<h1>Hello {{ name }}!</h1>

Components can then be used throughout a project with the built-in <component:component-name> element. Property values are declared via attributes:

<component:greeting name="world" />

Components can also contain child content. The <slot> element is used to specify where content should be injected:

<!-- components/page.html -->

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <main>
      <slot />
    </main>
  </body>
</html>

At build time, the <slot> element is replaced with any content inside the <component:component-name> element:

<component:page title="Home">
  <h1>Home</h1>
  <p>Page content...</p>
</component:page>

The <slot> element can contain optional fallback content that will be used if no child content for a component is provided:

<slot>Default content...</slot>

Project structure

Dot relies on a views directory containing the pages that will be compiled and output to public, and a components directory containing the components that will be used with the <component:component-name> element.

By default, Dot looks for these directories in the current working directory. However, a custom path can be specified with the --root CLI option.

CLI

To get started using Dot, simply use the dot command to process and compile your project. See dot --help for additional options:

$ dot --help

Usage: dot [options]

Options:

  -r, --root          Specify path where `views` and `components` can be found

  -o, --output        Specify output path for compiled views

  -v, --version       Displays the current version of Dot

Installation

To install Dot locally (recommended):

$ npm i -D @lukecjohnson/dot

To install Dot globally:

$ npm i -g @lukecjohnson/dot

Alternatively, Dot can be used without installing via npx:

$ npx @lukecjohnson/dot [options]

4 years ago

4 years ago

4 years ago