Pencil Runtime

Projects | 2019 | Links: Source

Standalone Stencil runtime. Stencil - Compiler + Extras = Pencil. Alternative explanation: SkateJS with Stencil decorator syntax.

Standalone Stencil runtime.

Stencil - Compiler + Extras = Pencil

Alternative explanation: SkateJS with Stencil decorator syntax.

Why

• Not dependent on TypeScript (only decorators are required)
• Build a single bundle using webpack/rollup
• No duplicate code (dependencies!)
• No polyfills

Example

// File: my-first-component.jsx

// Additional import of `h` is required to make `render` work.
import { h, Component, Prop } from 'pencil-runtime';

@Component({
  tag: 'my-first-component',
  shadow: true,
})
export class MyComponent {
  // Extra `type` parameter is necessary 
  // b/c it cannot be inferred at runtime.
  @Prop({ type: String, mutable: true, reflectToAttr: true }) name;

  render() {
    return (
      <p>
        Hello, {this.name}!
      </p>
    );
  }
}

Usage:

// File: main.js
import `./my-first-component.jsx`;

// my-first-component is now defined:

const mfc = document.createElement('my-first-component');
mfc.name = "World";
document.body.appendChild(mfc;)