webcomponents
Server side web components.
Last updated 4 years ago by yuanyan .
ISC · Original npm · Tarball · package.json
$ cnpm install webcomponents 
SYNC missed versions from official npm registry.

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

  • 元彦

Current Tags

  • 0.1.4                                ...           latest (4 years ago)

11 Versions

  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
  • 0.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 24
Last Day 0
Last Week 11
Last Month 1
Dependencies (6)
Dev Dependencies (2)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |