htm-preact-osagai
v0.1.0
Published
Define your Web component with [Osagai](http://osagai.js.org) using [htm](https://github.com/developit/htm) and [Preact](https://preactjs.com/)
Downloads
5
Readme
htm-preact-osagai ⚛️🀄️
Define your Web component with Osagai using htm and Preact
Install
You can get it on npm.
npm install htm-preact-osagaiOr 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>API
Table of Contents
define
Define a new custom element
Parameters
nameString Name for the new custom element. Note that custom element names must contain a hyphen (ex. hello-world)ComponentOsagaiComponent Function that will return a Template function that defines the layout of your custom element. ReferenceoptionsObject Configuration options from Osagai and custom elements. Reference
html
Template tag used to produce objects in the Preact format
Parameters
stringsTemplateStringsArray
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
elementOsagaiElement Instance of the osagai element.callbackFunction 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
elementOsagaiElement Instance of the osagai element.callbackFunction 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
elementOsagaiElement Instance of the osagai element.callbackFunction Function that will be runned with an object with the information of the attribute changed. (name, current, old)