@skatejs/renderer-preact

A SkateJS renderer for Preact.

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
  };
  render({ props }) {
    return <PreactHello {...props} />;
  }
}

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

For either example, you can now just write HTML:

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

上一篇:fg-loadjs
下一篇:@reach/visually-hidden

相关推荐

  • 「Preact」逐行解析hooks源码

    前言 Preact 是什么?React 的 3kb 轻量化方案,拥有同样的 ES6API 虽然 Preact 和 React 有着相同的 API, 但是其内部实现机制的差异依然是巨大。

    1 年前
  • zeta-renderer

    undefined zeta-renderer@0.0.13 安装 $ npm install -g zeta-renderer使用 在编译后的工程根目录下执行: $ renderer -p 8083...

    1 年前
  • wl-preact-cli

    Start building a Preact Progressive Web App in seconds. preact-cli Start building a Preact Progr...

    1 年前
  • vue-server-renderer

    server renderer for Vue 2.0 vue-server-renderer This package is auto-generated. For pull requests p...

    2 年前
  • unexpected-htmllike-testrenderer-adapter

    Adapter for unexpected-htmllike for react-test-renderer unexpected-htmllike-testrenderer-adapter Thi...

    2 年前
  • rws-compile-preact

    Deprecated Package This package is no longer supported and has been deprecated. To avoid malicious u...

    1 年前
  • react-video-renderer

    undefined react-video-renderer Build custom video players effortless Render props, get all video...

    21 天前
  • react-test-renderer

    React package for snapshot testing. react-test-renderer This package provides an experimental React ...

    2 年前
  • react-syntax-highlighter-virtualized-renderer

    a virtualized custom renderer for react syntax highlighter React Syntax Highlighter Virtualized Rend...

    2 年前
  • rax-test-renderer

    Rax renderer for snapshot testing. rax-test-renderer Rax renderer for snapshot testing. Install...

    2 年前

官方社区

扫码加入 JavaScript 社区