A Node script for building websites using Synergy Web Components.
Danza expects a couple of things from your project...
- you will have a
pagesfolder, containg an html file for each page in your site. - you will have a
componentsfolder, 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
| |
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>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>-
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 thepublicfolder. -
danza test- Loads all*.spec.jsfiles 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.