Light weight (5k) JS framework to create Web Components

In our working time, sometimes we need to create some simple, light, quick components to render to any technology stacks. For example we build a screen loader component before js bundle back to expect users' waiting. Use PHC, you will be able to create a small component quickly into a Web Component which can be used in Vue, React or any others.

What's PHC?

PHC stands for words Hypertext Component, it means developers use HTML language to write a component. So we always name the component file by using .htm as extension. PHC do not need to compile your component code, because we are using HTML, vanillajs and css to write our UI. In summary, PHC is a light weight js framework to help developers to build light weight web components.

What's the difference?

• Use Hypertext as development language, without any higher knowlege or concepts more than Web.
• Run component as quickly as possible, without any build tool chain.
• SFC: write a component with .htm file, deploy to CDN directly, no pack or compiling
• Web Components: based on customElements, rendering in shadowDOM, supports isolated styles/css, supports slot for component
• No Virtual DOM: modify DOM nodes directly
• Asnyc Demanded Loading: only load demanded component files
• Quick link: a to link a customElement quickly
• Nested component system
• Fast, vanilla.js as underlying driver
• Small and light, 5kb

How to?

To use PHC, you should load the library firstly in the entry HTML file:

<script src="https://unpkg.com/phc"></script>

And then use <phc-x> tag to bootstrap your component:

<phc-x src="./some.htm"></phc-x>

Then write the component file some.htm (or generated by server side with PHP, Python, Ruby...)

Write a component

Write a some.htm file with Hypertext

<style>
.container {
  margin: 10px;
}
</style>

<div class="container">
  <main></main>
</div>

<script>
  fetch('some_article_url').then(res => res.text()).then((text) => {
    document.querySelector('.container main').innerText = text;
  });
</script>

Attributes

<phc-x type="book" src="./some.htm"></phc-x>

<script>
  const attrs = document.rootElement.attributes; // https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap
  const type = attrs.type.value; // here `type` is the passed attribute whose value is `book`

  fetch(`some_article_url?type=${type}`).then(res => res.text()).then((text) => {
    document.querySelector('.container main').innerText = text;
  });
</script>

Sub-Components

Just continue write in a component file:

<phc-x src="./sub.htm"></phc-x>

Define Custom Element

Use <link> in your entry html file to define a custom element named react-app:

<link rel="phc" href="../react/react.htm" as="react-app">

Then you can use the custom element any where in your application:

<react-app></react-app>

Notice, you can not load a new custom element by async files or scripts any more.

define

Use define to setup a custom element at anywhere.

import { define } from 'https://unpkg.com/phc/es/index.js';
define('some-tag', '...some_url...');

Summary

PHC is a light weight js framework, It is so simple that we do not need any knowledge more than HTML5. However, developers can use it to define custom element very quickly. And it can even work with Vue, React or any other library (as dependencies inside components).

The project github address https://github.com/tangshuang/phc , if you are interested in it, give me a star on the repo page🙂