posthtml-web-component

PostHTML plugin for Server Side Web Component Render.

Feature

Base Web Component Server Side Rending
Component as a Sevice

Advantage

Explanation

Web Component

Must mention that Web Components supported by posthtml-web-component don't completely follow the Web Components draft.

A typical posthtml web component looks as following:

<!-- clock.html -->
<style>
  .clock {
    display: inline-flex;
    justify-content: space-around;
    background: white;
    font-size: 8rem;
    box-shadow: 2px 2px 4px -1px grey;
    border: 1px solid green;
    font-family: Helvetica, sans-serif;
    width: 100%;
  }
  .clock .hour,
  .clock .minute,
  .clock .second {
    color: orange;
    padding: 1.5rem;
    text-shadow: 0px 2px black;
  }
</style>
<template>  
  <div class="clock">
    <div class="hour">HH</div>
    <div class="minute">MM</div>
    <div class="second">SS</div>
  </div>
</template>
<script>
(function() {
  Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
    var hourElement = clock.querySelector('.hour'),
      minuteElement = clock.querySelector('.minute'),
      secondElement = clock.querySelector('.second');
    window.setInterval(function() {
      var date = new Date();
      hourElement.innerText = date.getHours();
      minuteElement.innerText = date.getMinutes();
      secondElement.innerText = date.getSeconds();
    }, 1000);
  })
})()
</script>

This is a runnable component itself. Consider there is a index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="import" href="./clock.html">
  </head>
  <body>
    <clock></clock>
    <clock></clock>
  </body>
</html>

After posthtml-web-component's transforming:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="import" href="./clock.html">
    <style>
      .clock {
        display: inline-flex;
        justify-content: space-around;
        background: white;
        font-size: 8rem;
        box-shadow: 2px 2px 4px -1px grey;
        border: 1px solid green;
        font-family: Helvetica, sans-serif;
        width: 100%;
      }
      .clock .hour,
      .clock .minute,
      .clock .second {
        color: orange;
        padding: 1.5rem;
        text-shadow: 0px 2px black;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="hour">HH</div>
      <div class="minute">MM</div>
      <div class="second">SS</div>
    </div>
    <div class="clock">
      <div class="hour">HH</div>
      <div class="minute">MM</div>
      <div class="second">SS</div>
    </div>
    <script>
    (function() {
      Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
        var hourElement = clock.querySelector('.hour'),
          minuteElement = clock.querySelector('.minute'),
          secondElement = clock.querySelector('.second');
        window.setInterval(function() {
          var date = new Date();
          hourElement.innerText = date.getHours();
          minuteElement.innerText = date.getMinutes();
          secondElement.innerText = date.getSeconds();
        }, 1000);
      })
    })()
    </script>
  </body>
</html>

Work fine!

LinkImport

We have two types of LinkImport, local and remote.

<!-- local LinkImport -->
<link rel="import" href="hello-world.html">
<!-- remote LinkImport -->
<link rel="import" href="https://example.com/hello-world.html">

The difference of these two types is that remote LinkImport could call a remote service, this is to say remote LinkImport could be dynamic.

Name		Name	Last commit message	Last commit date
Latest commit History 42 Commits
example		example
gulp-test		gulp-test
src		src
test		test
.gitignore		.gitignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

posthtml-web-component

Feature

Advantage

Explanation

Web Component

LinkImport

About

Uh oh!

Releases

Packages

Uh oh!

Contributors 8

Uh oh!

Languages

License

posthtml/posthtml-web-component

Folders and files

Latest commit

History

Repository files navigation

posthtml-web-component

Feature

Advantage

Explanation

Web Component

LinkImport

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 8

Uh oh!

Languages

Packages