Danza NPM | npm.io

Danza

A Node script for building websites using Synergy Web Components.

Danza expects a couple of things from your project...

you will have a pages folder, containg an html file for each page in your site.
you will have a components folder, containing a folder for each Custom Element

An example project folder structure...

YourProject
|
|_components
    |
    |_ header
        |
        |- index.html
        |- header.spec.js
        |
|_ pages
|   |
|   |- index.html
|   |- about.html
|   |

components/

Danza assumes that your component...

will be described within a script within an HTML file (as an HTML fragment rather than a document)
will be self-initialising (e.g., defines itself with the Custom Elements registry)

Here's a simple component example:

<script type="module">
  import { define } from 'https://unpkg.com/synergy';

  define('x-foo', ({ title = '' }) => {
    return {
      title,
    };
  }, document.getElementById('foo'));
</script>
<template id="foo">
  <h1>{{ title }}</h1>
</template>

pages/

Each page is just a standard HTML file. Danza will inject the definitions for each of the components you use on a page just before the closing body tag so you can use any of the Custom Elements defined within your /components folder as if they were built-in elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Made with Danza</title>
  </head>
  <body>
    <x-foo title="bar"></x-foo>
  </body>
</html>

commands

danza dev - Compiles all of your pages and then servers them over HTTP using an Express server with hot reloading.
danza build - Compiles all of your pages and then saves them in the public folder.
danza test - Loads all *.spec.js files inside your component folders (components/**/*.spec.js) and compiles them into a Mocha test suite with all of your local Custom Elements registered and available to use within your tests. The tests are run in a headless Chrome instance and the output is printed at the terminal.