Erstellen Sie steckbare Komponente in Preact

Question

Ich habe begonnen, mit Preact zu arbeiten, um eine PWA mit einer kleineren Grundfläche zu erstellen. Bis jetzt läuft alles gut und die App ist fast fertig als modulare Komponente.

Das Problem im Paradies trat auf, als ich versuchte, diese Komponente in eine andere Web-App zu verbinden. Die Präaktkomponente rendert einfach auf das Wort los. Während ich diese Komponente in meiner eigenen Ansichtshierarchie instanziieren möchte.

Etwas wie:

<div className={'abcd'}> 
    <PreactComponent /> 
</div> 

Aber sobald ich die bundle.js von pReact Build enthalten versuchen, macht es zu body alles andere weggewischt.

Gibt es etwas, das mir fehlt?

Dies ist der Preactindex.js

import { h, render, Component } from 'preact'; 
import './style'; 
import App from './components/app'; 

export default class Player extends Component { 
    render() { 
    let bucketId = this.props.bucketId 
    let videoId = this.props.videoId 
    return <App pluggedIn={true} /> 
    } 
} 

Idealerweise das mir gegeben <Player/> eine Komponente haben sollte, aber es ist auf seiner eigenen zu machen. Ich verwende nicht einmal Preact.render()

Answer 1

Haben Sie Ihre bundle.js mit preact-cli erstellt? Im Moment ist preact-cli hauptsächlich darauf ausgerichtet, Progressive Web Apps zu erstellen, nicht für die Verwendung in anderen Codebasen (es ist kein Allzweck-Bundler). Sie rufen preact.render() nicht auf, aber die CLI umschließt tatsächlich Ihre Komponente in einem Renderaufruf und einige andere Dinge wie Polyfüllungen, um die Erfahrung zu verbessern und die Standardwerte zu reduzieren.

Ich glaube, wenn man wirklich Vorgriffs-cli benutzen will von einer anderen App ein Bündel für den Verbrauch zu bauen (wenn auch nicht wahrscheinlich reagieren, denn das ist nicht wirklich möglich ist, überhaupt jetzt), könnten Sie ein preact.config.js schaffen, das dies tut:

export default config => { 
    config.output.library = 'myLibName'; 
    config.output.libraryTarget = 'umd'; 
} 

Aber ehrlich gesagt würde ich es nicht empfehlen. Die CLI ist ganz speziell für die Erstellung von PWAs konzipiert, was hier nicht der Fall ist.

Hoffe, dass hilft!