我可以通过自定义元素使用Preact组件吗?

时间:2017-02-19 14:08:21

标签: custom-element preact

我想创建一个Preact组件,让人们使用它,即使他们没有构建Preact应用程序。

示例:我想在Preact中构建一个<MyTooltip>组件,将其捆绑(与Preact运行时一起),并让人们将其作为脚本标记加载,纯粹以声明方式使用它,或许像:

<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">

<my-tooltip content="Tooltip content">Hover here</my-tooltip>

有没有办法捆绑一个组件,使其包含Preact运行时,我的库代码和挂钩到<my-tooltip>元素?

换句话说,我可以将我的Preact组件作为自定义元素进行互操作,类似于ReactiveElements吗?

5 个答案:

答案 0 :(得分:5)

有一个很棒的库为你做这个叫做preact-custom-element:

https://github.com/bspaulding/preact-custom-element

class SearchBox extends Component {
  render() {
    // ...
  }
}
registerComponent(SearchBox, 'search-box');

答案 1 :(得分:1)

尽管@Jason Miller的回答对我有很大帮助,但我在编写基本的工作示例时仍然遇到困难,因此这是我从头到尾解决此问题的方法:

我的基本html文档,包括捆绑脚本dummy.js,其中包含我的虚拟Web组件的实际代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
    <script async src="./dummy.js" type="text/javascript"></script>

    <dummy-view name="Test"></dummy-view>
</div>
</body>
</html>

我的虚拟Web组件:

import {div} from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';

const DummyView = ({ name = "World" }) => (
    div({}, `Hello, ${name}!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);

我的webpack配置:

const path = require('path');

module.exports = {
    entry: {
        dummy: './lib/dummy/dummy-view.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'webcomponent/')
    }
};

更多详细信息:

  • 我像preact-custom-element一样安装了npm i preact-custom-element
  • 捆绑是使用webpack完成的,例如:npx webpack
  • index.html将在/webcomponent下投放(例如http://localhost:3000/webcomponent/)。
  • 在浏览器中访问上述URL时,结果将如下所示:
<div>Hello, Test!</div>

附录:

答案 2 :(得分:0)

PreactJS本身就有一个库可以做到这一点

https://github.com/preactjs/preact-custom-element

答案 3 :(得分:0)

如果您不想使用其他库来保持苗条,可以执行以下操作:

h("lottie-player", {
    src: "/lf30_editor_mjfhn8gt.json",
    background: "transparent",
    speed: 1,
    style: {
        width: 300,
        height: 300,
    },
    loop: true,
    autoplay: true,
})
while(i<PalabraA.length() && i<PalabraB.length() && PalabraA.charAt(i) == PalabraB.charAt(i)){    
    i++;
}

答案 4 :(得分:0)

除了已经提到的其他软件包,还有:

https://github.com/jhukdev/preactement

它以类似的方式工作,但允许您在需要时动态导入组件文件,从而减少您的前期 javascript:

import { define } from 'preactement';

define('my-tooltip', () => import('./myTooltip'));

披露:我是作者:)