Web Components
Features
- Testable
- Readable
- High performance
Why sever side web components is more cool？
- Change you how to write template
- Everything is component
Usage
components/x-pic.html
<web-component name="x-pic" attributes="src">
<style>
:host {
display: inline-block;
border: 1px solid #eee;
}
</style>
<template>
<img src="{{src}}.webp">
</template>
</web-component>
components/x-hello.html
<web-component name="x-hello" attributes="name">
<style>
:host {
display: block;
border: 1px solid #ccc;
}
:host:hover {
border-color: red;
}
</style>
<template type="xtpl">
<web-resource url="http://m.weather.com.cn/data/101210101.html"></web-resource>
Hello {{name}}, Hello {{project}}, Hello {{ weatherinfo.city }}
<content select="x-pic"></content>
</template>
</web-component>
index.html
<x-hello name="World">
<x-pic src="foo.png"></x-pic>
</x-hello>
index_rendered.html
<x-hello name="World">
<style>
x-hello {
display: block;
border: 1px solid #ccc;
}
x-hello:hover {
border-color: red;
}
</style>
Hello World, Hello WebComponents, Hello 杭州
<x-pic>
<style>
x-pic {
display: inline-block;
border: 1px solid #eee;
}
</style>
<img src="foo.png.webp">
</x-pic>
</x-hello>
var WebComponents = require('webcomponents');
WebComponents.load('/components/**/*.html');
WebComponents.render('index.html', {project: 'WebComponents'}).then(
function(rendered){
fs.writeFileSync('index_rendered.html', rendered)
}
);
API
- WebComponents.load(globExpr)
- WebComponents.engine(type, fn)
- WebComponents.register(name, prototype)
- WebComponents.render(path|content, commonData)
Every components in file receive commonData.
Template Note You Must Know
First DOM parse, then template render, so do not break the DOM.
<img src="{{#if ("true")}}{{src}}{{/if}}">
DOM parse above string as:
<img src="{{#if (" true")}}{{src}}{{="" if}}"="">
You should write like:
<img src="{{#if ('true')}}{{src}}{{/if}}">
Author