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

• 元彦