Skip to content

Latest commit

 

History

History
151 lines (108 loc) · 4.52 KB

README.md

File metadata and controls

151 lines (108 loc) · 4.52 KB
Raw

htm-preact-osagai ⚛️🀄️

Define your Web component with Osagai using htm and Preact

Install

You can get it on npm.

npm install htm-preact-osagai

Or import from unpkg

import {
  define,
  html
} from "https://unpkg.com/htm-preact-osagai/dist/htm-preact-osagai.mjs";

Example

<!DOCTYPE html>
<html lang="en">
  <todo-list></todo-list>

  <script type="module">
    import {
      define,
      html,
      Component
    } from "https://unpkg.com/htm-preact-osagai/dist/htm-preact-osagai.mjs";

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(
                todo => html`
                  <li>${todo}</li>
                `
              )}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
          </div>
        `;
      }
    }

    const Header = ({ name }) =>
      html`
        <h1>${name} List</h1>
      `;

    function TodoList() {
      return () =>
        html`
          <${App} page="All" />
        `;
    }
    define("todo-list", TodoList);
  </script>
</html>

Try this on CodeSandbox

API

Table of Contents

define

Define a new custom element

Parameters

  • name String Name for the new custom element. Note that custom element names must contain a hyphen (ex. hello-world)
  • Component OsagaiComponent Function that will return a Template function that defines the layout of your custom element. Reference
  • options Object Configuration options from Osagai and custom elements. Reference

html

Template tag used to produce objects in the Preact format

Parameters

  • strings TemplateStringsArray

Returns TemplateResult

Component

Component is a base class that you will usually subclass to create stateful Preact components. Preact API reference

attachShadow

Attach a shadow dom in the element. More at Osagai docs

onConnected

Add a callback to be performed when the element is connected in the document. Osagai docs

Parameters

  • element OsagaiElement Instance of the osagai element.
  • callback Function Function that will be perfomed when the element is connected.

onDisconnected

Add a callback to be performed when the element is disconnected from the document. Osagai docs

Parameters

  • element OsagaiElement Instance of the osagai element.
  • callback Function Function that will be perfomed when the element is disconnected.

onAttributeChanged

Add a callback to be performed when one of the attribute from the observedAttributeslist is added, changed or removed. Osagai docs

Parameters

  • element OsagaiElement Instance of the osagai element.
  • callback Function Function that will be runned with an object with the information of the attribute changed. (name, current, old)