https://github.com/bfncs/metalsmith-servercomponents
A Metalsmith plugin for lightweight server-side custom HTML elements.
https://github.com/bfncs/metalsmith-servercomponents
Last synced: 10 months ago
JSON representation
A Metalsmith plugin for lightweight server-side custom HTML elements.
- Host: GitHub
- URL: https://github.com/bfncs/metalsmith-servercomponents
- Owner: bfncs
- Created: 2016-09-09T12:55:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-09T16:54:24.000Z (over 9 years ago)
- Last Synced: 2025-08-09T10:49:50.119Z (10 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Metalsmith ServerComponents
A [Metalsmith](https://github.com/metalsmith/metalsmith) plugin for lightweight server-side custom HTML elements.
This plugins enables the usage of custom HTML elements – broadly following the [spec](http://w3c.github.io/webcomponents/spec/custom/) – 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](https://github.com/pimterry/server-components#api-documentation) 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.
```
Foobar
```
…is converted to…
```
Foobar
Hello world
```
You can use the whole custom component API to define components, refer to the [example components](https://github.com/pimterry/server-components/blob/master/component-examples.md) to see what is possible.
## To Do
* Handle styles per component: from unnamespaced, plain (S)CSS to automatically namespaced BEM selectors
* Handle clientside JS per component