This repository has been archived by the owner. It is now read-only.
SkateJS renderer for Preact.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
src
test
.editorconfig
.gitignore
.nvmrc
.travis.yml
LICENSE
README.md
conartist.js
package-lock.json
package.json
rollup.config.js

README.md

This has been moved to the skatejs monorepo!

skatejs/renderer-preact

SkateJS renderer for Preact.

Install

npm install @skatejs/renderer-preact preact skatejs

Usage

The simple use case is if you're using Preact as a rendering layer.

import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import Preact from 'preact';

class WcHello extends withComponent(withPreact()) {
  static props = {
    yell: props.boolean
  }
  renderCallback({ name }) {
    return <div>Hello, {yell ? <strong>{children}</strong> : children}!</div>;
  }
}

customElements.define('wc-hello', WcHello);

A more complex use case is if you have an existing Preact component that you want to wrap in a web component.

import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h, Component } from 'preact';

// Preact component we want to wrap in the web component.
class PreactHello extends Component {
  render() {
    const { children, yell } = this.props;
    return (
      <div>Hello, {yell ? <strong>{children}</strong> : children}!</div>
    );
  }
}

// Web component that renders using Preact. This is all you need
// to do to wrap the Preact component. All props can be passed
// down and {children} becomes <slot />.
class WcHello extends withComponent(withPreact()) {
  static props = {
    // Unfortunately we need to declare props on the custom element
    // because it needs to be able to link between observed attributes
    // and properties.
    //
    // You could write a Babel plugin to transform Flow types to
    // property definitions, but we haven't done that yet.
    yell: props.boolean
  }
  renderCallback({ props }) {
    return (
      <PreactHello {...props} />
    );
  }
}

customElements.define('wc-hello', WcHello);

For either example, you can now just write HTML:

<wc-hello yell>World</wc-hello>