metalsmith-servercomponents's Introduction

Metalsmith ServerComponents

A Metalsmith plugin for lightweight server-side custom HTML elements.

This plugins enables the usage of custom HTML elements – broadly following the spec – in Metalsmith projects.

Installation

Install in your metalsmith project using:

npm install metalsmith-servercomponents

Usage

To use it, add a custom components defined with the ServerComponents-API to your projects components folder.

// File: components/hello-world.js
module.exports = function(components) {
	var StaticElement = components.newElement();
	StaticElement.createdCallback = function () {
		this.innerHTML = "Hello world";
	};
	components.registerElement("hello-world", { prototype: StaticElement });
};

In your Metalsmith build script add the ServerComponents plugin.

// File: build.js
var Metalsmith = require('metalsmith');
var components = require('metalsmith-servercomponents');

Metalsmith(__dirname)
  .source('./src')
  .destination('./build')
  .clean(false)
  .use(components())
  .build(function(err, files) {
    if (err) { throw err; }
  });

Every occurence of the custom components you defined in your source files will be replaced by an instantiated entity.

<!-- File src/index.html -->
<!doctype html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<title>Foobar</title>
</head>
<body>
	<hello-world />
</body>
</html>

…is converted to…

<!-- File src/index.html -->
<!doctype html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<title>Foobar</title>
</head>
<body>
	<hello-world>Hello world</hello-world>
</body>
</html>

You can use the whole custom component API to define components, refer to the example components to see what is possible.