posthtml components Download - posthtml components Quellcode Download

Posthtml -Komponenten

Laravel Blade-inspirierte Komponenten für posthtml

Installation

npm i -D posthtml-component

Einführung

Dieses PosthtML-Plugin bietet eine HTML-freundliche Syntax für die Verwendung von Komponenten in Ihren HTML-Vorlagen. Wenn Sie mit Blade, React, Vue oder ähnlichem vertraut sind, werden Sie feststellen, dass die Syntax vertraut ist, da dieses Plugin von ihnen inspiriert ist.

Siehe auch die erste Posthtml -Bootstrap -Benutzeroberfläche mit diesem Plugin und überprüfen Sie hier auch die Starter -Vorlage.

Optionen

Name	Typ	Standard	Beschreibung
Wurzel	`String`	`'./'`	Wurzelpfad, wo nach Komponenten gesucht werden muss.
Ordner	`String[]`	`['']`	Array von Pfaden relativ zu `options.root` oder definierte Namespaces.
FileExtesion	`String\|String[]`	`'html'`	Die zu achtenden Komponentendatei -Erweiterungen.
TagPrefix	`String`	`'x-'`	Tag -Präfix.
Etikett	`String\|Boolean`	`false`	Komponenten -Tag. Verwendung mit `options.attribute` . Boolean nur `false` .
Attribut	`String`	`'src'`	Attribut zum Definieren des Pfades zur Komponentendatei.
Namespaces	`String[]`	`[]`	Array von Namespace Root -Pfaden, Fallback -Pfaden und benutzerdefinierten Überschreibungspfaden.
NamespaceParator	`String`	`'::'`	Namespace -Separator für Tagamen.
Ertrag	`String`	`'yield'`	Tagenname zum Injektieren von Hauptkomponenteninhalten.
Slot	`String`	`'slot'`	Tagenname für Slots
füllen	`String`	`'fill'`	Tag -Name zum Ausfüllen von Slots.
Slotseparator	`String`	`':'`	Nennen Sie Separator für `<slot>` und `<fill>` Tags.
Stapel	`String`	`'stack'`	Tag -Name für `<stack>` .
drücken	`String`	`'push'`	Tag -Name für `<push>` .
PropsScriptAttribute	`String`	`'props'`	Attribut in `<script props>` zum Abrufen von Komponenten -Requisiten.
Propscontext	`String`	`'props'`	Name des Objekts im Skript zur Verarbeitung von Requisiten.
PropsAttribute	`String`	`'props'`	Attributname, um Requisiten als JSON auf einem Komponenten -Tag zu definieren.
Requisionslot	`String`	`'props'`	Wird verwendet, um Requisiten abzurufen, die über `$slots.slotName.props` an Slot übergeben wurden.
Parseroptionen	`Object`	`{recognizeSelfClosing: true}`	Übergeben Sie Optionen an `posthtml-parser` .
Ausdrücke	`Object`	`{}`	Übergeben Sie Optionen an `posthtml-expressions` .
Plugins	`Array`	`[]`	PostHTML -Plugins für jede analysierte Komponente angewendet.
Match	`Object`	`[{tag: options.tagPrefix}]`	Array von Objekten, die zur Übereinstimmung mit Tags verwendet werden.
Attrsparrules	`Object`	`{}`	Zusätzliche Regeln für Attribute Parser Plugin.
strikt	`Boolean`	`true`	Ausnahme werfen.
Mergecustomizer	`Function`	`function`	Rückruf für Lodash `mergeWith` um `options.expressions.locals` zu merge.expressions.locals und Requisiten.
Versorgungsunternehmen	`Object`	`{merge: _.mergeWith, template: _.template}`	Versorgungsmethoden übergeben an `<script props>` .
ElementAttributes	`Object`	`{}`	Objekt mit Tag-Namen und Funktionsmodifikatoren von `valid-attributes.js` .
Safelistattributes	`String[]`	`['data-*']`	Array von Attributnamen, die zu Standard -gültigen Attributen hinzugefügt werden sollen.
Blocklistattributes	`String[]`	`[]`	Array von Attributnamen, die aus Standard -gültigen Attributen entfernen sollen.

Grundlegendes Beispiel

Erstellen Sie die Komponente:

 <!-- src/button.html -->
< button type =" button " class =" btn " >
  < yield > </ yield >
</ button >

Verwenden Sie es:

 <!-- src/index.html -->
< html >
< body >
  < x-button type =" submit " class =" btn-primary " > Submit </ x-button >
</ body >
</ html >

Init posthtml:

 // index.js
const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )
const { readFileSync , writeFileSync } = require ( 'node:fs' )

posthtml ( [
  components ( { root : './src' } )
] )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

Ergebnis:

 <!-- dist/index.html -->
< html >
< body >
  < button type =" submit " class =" btn btn-primary " > Submit </ button >
</ body >
</ html >

Möglicherweise haben Sie festgestellt, dass die src/button.html -Komponente type und class enthält und dass wir diese Attribute auch übergeben haben, als wir sie in src/index.html verwendet haben.

Das Ergebnis ist, dass der type überschrieben wurde und class zusammengeführt wurde.

Standardmäßig werden class und style zusammengeführt, während alle anderen Attribut überschrieben werden. Sie können auch class und style überschreiben, indem Sie override: auf das Klassenattribut vorbereiten.

Zum Beispiel:

 < x-button override:class =" btn-custom " > Submit </ x-button >

<!-- Output -->
< button type =" button " class =" btn-custom " > Submit </ button >

Alle Attribute, die Sie an die Komponente übergeben, werden dem ersten Knoten Ihrer Komponente oder dem Knoten mit einem Attribut mit dem Namen attributes hinzugefügt, nur wenn sie nicht als props über <script props> definiert sind oder wenn sie keine "bekannten Attribute" sind (siehe valte Attributes.js).

Sie können auch definieren, welche Attribute über die Optionen des Plugins als gültig angesehen werden.

Weitere Einzelheiten zu diesem Abschnitt Attribute.

Ertrag

Das <yield> -Tag wird in den Inhalt, den Sie an eine Komponente übergeben, injiziert.

Das Plugin konfiguriert den postHTML-Parser, um selbstklingende Tags zu erkennen, sodass Sie auch nur als <yield /> schreiben können.

Für die Kürze werden wir in den Beispielen selbstschließende Tags verwenden.

FileExtesion

Standardmäßig sucht das Plugin nach Komponenten mit der .html -Erweiterung. Sie können dies ändern, indem Sie eine Reihe von Erweiterungen an die Option fileExtension weitergeben.

Wenn ein Array verwendet wird, wird bei zwei Dateien mit demselben Namen beide Erweiterungen übereinstimmen, die Datei, die mit der ersten Erweiterung im Array entspricht, verwendet.

 const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

posthtml ( [
  components ( { 
    root : './src' , // contains layout.html and layout.md
    fileExtension : [ 'html' , 'md' ]
  } )
] )
  . process ( `<x-layout />` )
  . then ( result => console . log ( result . html ) ) // layout.html content

Weitere Beispiele

Siehe auch den Ordner docs-src in dem Sie weitere Beispiele finden können.

Sie können dieses Repo klonen und npm run build ausführen, um sie zu kompilieren.

Merkmale

Tag-Namen und X-Tags

Sie können die Komponenten auf verschiedene Arten oder auch eine Kombination von ihnen verwenden.

Wenn Sie Komponenten als "Include" verwenden möchten, können Sie Tag- und src -Attributnamen definieren.

Mit unserem vorherigen Button -Komponenten -Beispiel können wir das Tag- und Attributnamen definieren und es dann so verwenden:

 <!-- src/index.html -->
< html >
  < body >
    < component src = " button.html " >Submit</ component >
  </ body >
</ html >

Init posthtml:

 // index.js

require ( 'posthtml' ) (
  require ( 'posthtml-component' ) ( { 
    root : './src' , 
    tag : 'component' , 
    attribute : 'src' 
  } ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Wenn Sie mehr Kontrolle über das Tag -Matching benötigen, können Sie über options.matcher ein Array von Matchern oder einzelnem Objekt übergeben.Matcher:

 // index.js
const options = { 
  root : './src' , 
  matcher : [
    { tag : 'a-tag' } , 
    { tag : 'another-one' } , 
    { tag : new RegExp ( `^app-` , 'i' ) } ,
  ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Mit posthtml-components müssen Sie den Pfadnamen nicht angeben, wenn Sie x-tag-name Syntax verwenden.

Setup posthtml:

 // index.js
const options = { 
  root : './src' , 
  tagPrefix : 'x-'
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Verwenden:

 <!-- src/index.html -->
< html >
< body >
  < x-button > Submit </ x-button >
</ body >
</ html >

Wenn sich Ihre Komponenten in einem Unterordner befinden, können Sie dot verwenden, um darauf zuzugreifen:

 <!-- src/components/forms/button.html -->
< x-forms .button > Submit </ x-forms .button >

Wenn sich Ihre Komponenten in einem Unterordner mit mehreren Dateien befinden, können Sie den index.html nicht angeben, ohne ihn anzugeben.

Hier ist ein Beispiel:

 <!-- src/components/modals/index.html -->
< x-modal .index > Submit </ x-modal .index >

<!-- You may omit "index" part since the file is named "index.html" -->
< x-modal > Submit </ x-modal >

Parser -Optionen

Sie können Optionen über options.parserOptions an posthtml-parser übergeben.

 // index.js
const options = { 
  root : './src' , 
  parserOptions : { decodeEntities : true } 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( 'some HTML' , options . parserOptions )
  . then ( /* ... */ )

Wichtig

Die parserOptions , die Sie an das Plugin übergeben, müssen auch in der process in Ihrem Code übergeben werden. Andernfalls verwendet Ihr Posthtml-Build posthtml-parser Standardeinstellungen und überschreiben alles, was Sie an posthtml-component übergeben haben.

Selbstklammende Tags

Das Plugin unterstützt standardmäßig selbstschließende Tags. Sie müssen jedoch auch in der process in Ihrem Code aktiviert werden, indem Sie recognizeSelfClosing: true :

 // index.js
require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( { root : './src' } ) )
  . process ( 'your HTML...' , { recognizeSelfClosing : true } )
  . then ( /* ... */ )

Wenn Sie dies nicht zur process hinzufügen, verwendet PosthtML posthtml-parser Standardeinstellungen und unterstützt keine selbstklammerenden Komponenten-Tags. Dies führt zu allem, nachdem ein selbstklammeriger Tag nicht ausgegeben wird.

Mehrere Ordner

Sie haben die volle Kontrolle darüber, wo Ihre Komponentendateien vorhanden sind. Sobald Sie den Basis -Root -Pfad Ihrer Komponenten festgelegt haben, können Sie mehrere Ordner einstellen.

Wenn Ihr Root beispielsweise ./src und dann mehrere Ordner haben, ./src/layouts denen Sie Ihre Komponenten haben, z ./src/components

 // index.js
const options = { 
  root : './src' , 
  folders : [ 'components' , 'layouts' ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Namespaces

Mit Namespaces können Sie einen Wurzelpfad auf der obersten Ebene zu Ihren Komponenten definieren.

Es kann nützlich sein, um benutzerdefinierte Themen zu handhaben, bei denen Sie eine bestimmte Wurzel der obersten Ebene mit einem Fallback -Wurzel definieren, wenn eine Komponente nicht gefunden wird, und eine benutzerdefinierte Stammwurzel für Überschreibungen.

Dies ermöglicht es, Ordnerstrukturen wie folgt zu erstellen:

src (Root -Ordner)
- components (Ordner für Komponenten wie Modal, Taste usw.)
- layouts (Ordner für Layoutkomponenten wie Basislayout, Header, Fußzeile usw.)
- theme-dark (Namespace-Ordner für Themen-Dark)
  - components (Ordner für Komponenten für das Thema Dunkel)
  - layouts (Ordner für Layoutkomponenten für dunkles Thema)
- theme-light (Namespace-Ordner für Themenlicht)
  - components (Ordner für Komponenten für Lichtthema)
  - layouts (Ordner für Layoutkomponenten für dunkles Thema)
- custom (benutzerdefinierter Ordner zum Überschreiben Ihrer Namespace -Themen)
  - theme-dark (benutzerdefinierter Ordner für Override Dark Thema)
    - components (Ordner für Überschreibungskomponenten des Themas Dunkel)
    - layouts (Ordner für Override -Layoutkomponenten des dunklen Themas)
  - theme-light (benutzerdefinierter Ordner für Override Light-Thema)
    - components (Ordner für Überschreibungskomponenten des Themas Dunkel)
    - layouts (Ordner für Override -Layoutkomponenten des dunklen Themas)

Und die Optionen wären wie:

 // index.js
const options = {
  // Root for component without namespace
  root : './src' ,
  // Folders is always appended in 'root' or any defined namespace's folders (base, fallback or custom)
  folders : [ 'components' , 'layouts' ] ,
  namespaces : [ {
    // Namespace name will be prepended to tag name (example <x-theme-dark::button>)
    name : 'theme-dark' ,
    // Root of the namespace
    root : './src/theme-dark' ,
    // Fallback root when a component is not found in namespace
    fallback : './src' ,
    // Custom root for overriding, the lookup happens here first
    custom : './src/custom/theme-dark'
  } , {
    // Light theme
    name : 'theme-light' ,
    root : './src/theme-light' ,
    fallback : './src' ,
    custom : './src/custom/theme-light'
  } , {
    /* ... */
  } ]
} ;

Verwenden Sie den Komponenten -Namespace:

 <!-- src/index.html -->
< html >
< body >
  < x-theme-dark : :button >Submit</ theme-dark : :button >
  < x-theme-light : :button >Submit</ theme-light : :button >
</ body >
</ html >

Slots

Komponenten können Slots definieren, die bei Verwendung mit Inhalten gefüllt werden können.

Zum Beispiel:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

Verwenden Sie die Komponente:

 <!-- src/index.html -->
< x-modal >
  < fill : header >Header content</ fill : header >
  < fill : body >Body content</ fill : body >
  < fill : footer >Footer content</ fill : footer >
</ x-modal >

Ergebnis:

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

Standardmäßig wird der Slot -Inhalt ersetzt, können jedoch auch den Inhalt vorbereiten oder anhängen oder den Standardinhalt aufbewahren, indem Sie den Steckplatz nicht füllen.

Fügen Sie in der Komponente einige Standardinhalte hinzu:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header >Default header</ slot : header >
  </ div >
  < div class = " modal-body " >
    < slot : body >content</ slot : body >
  </ div >
  < div class = " modal-footer " >
    < slot : footer >Footer</ slot : footer >
  </ div >
</ div >

 <!-- src/index.html -->
< x-modal >
  < fill : body prepend>Prepend body</ fill : body >
  < fill : footer append>content</ fill : footer >
</ x-modal >

Ergebnis:

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Default header
  </ div >
  < div class =" modal-body " >
    Prepend body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

Stapel

Sie können Inhalte in genannte Stacks weitergeben, die wie in einer anderen Komponente woanders gerendert werden können. Dies kann besonders nützlich sein, um JavaScript oder CSS anzugeben, die von Ihren Komponenten erforderlich sind.

Fügen Sie zuerst ein <stack> Tag zu Ihrem HTML hinzu:

<!-- src/index.html -->
<html>
  <head>
+    <stack name="styles" />
  </head>
<body>
  <x-modal>
    <fill:header>Header content</fill:header>
    <fill:body>Body content</fill:body>
    <fill:footer>Footer content</fill:footer>
  </x-modal>
  
+  <stack name="scripts" />
</body>
</html>

Dann können Sie in modalen Komponenten oder anderen untergeordneten Komponenten den Inhalt in diesen Stapel verschieben:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

< push name = " styles " >
  < link href = " https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel = " stylesheet " >
</ push >

< push name = " scripts " >
  < script src = " https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " ></ script >
</ push >

Die Ausgabe wird sein:

 <!-- dist/index.html -->
< html >
< head >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ head >
< body >
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ body >
</ html >

Mit dem once -Attribut können Sie den Inhalt nur einmal pro Rendering -Zyklus überschreiten.

Wenn Sie beispielsweise eine bestimmte Komponente in einer Schleife rendern, möchten Sie möglicherweise nur das JavaScript und das CSS beim ersten Mal auf den Markt bringen.

Beispiel.

 <!-- src/modal.html -->
< div class =" modal " >
  <!-- ... -->
</ div >

<!-- The push content will be pushed only once in the stack -->

< push name =" styles " once >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ push >

< push name =" scripts " once >
  < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ push >

Standardmäßig wird der Inhalt in der angegebenen Reihenfolge in den Stapel gedrückt. Wenn Sie Inhalte auf den Beginn eines Stapels vorbereiten möchten, können Sie das prepend Attribut verwenden:

 < push name =" scripts " >
  <!-- This will be second -->
  < script src =" /example.js " > </ script >
</ push >

<!-- Later... -->
< push name =" scripts " prepend >
  <!-- This will be first -->
  < script src =" /example-2.js " > </ script >
</ push >

Requisiten

props können in HTML -Attributen an Komponenten übergeben werden. Um sie in einer Komponente zu verwenden, müssen sie im <script props> -Tag der Komponente definiert werden.

Zum Beispiel:

 <!-- src/alert.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  {{ title }}
</ div >

Verwenden:

 < x-alert title =" Hello world! " />

Die Ausgabe wird sein:

 < div >
  Hello world!
</ div >

Wenn kein title an die Komponente übergeben wird, wird der Standardwert verwendet.

 < x-my-alert />

Die Ausgabe wird sein:

 < div >
  Default title
</ div >

In <script props> haben Sie über ein Objekt mit dem Namen props zugreifen.

Hier ist ein Beispiel dafür, was Sie damit machen können:

 <!-- src/modal.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title' , 
    size : props . size ? `modal- ${ props . size } ` : '' , 
    items : Array . isArray ( props . items ) ? props . items . concat ( [ 'first' , 'second' ] ) : [ 'first' , 'second' ]
  }
</ script >
< div class =" modal {{ size }} " >
  < div class =" modal-header " >
    {{ title }}
  </ div >
  < div class =" modal-body " >
    < each loop =" item in items " > < span > {{ item }} </ span > </ each >
  </ div >
</ div >

Verwenden:

 < x-modal 
  size =" xl " 
  title =" My modal title " 
  items =' ["third", "fourth"] ' 
  class =" modal-custom " 
/>

Die Ausgabe wird sein:

 < div class =" modal modal-custom modal-xl " >
  < div class =" modal-header " >
    My modal title
  </ div >
  < div class =" modal-body " >
    < span > first </ span >
    < span > second </ span >
    < span > third </ span >
    < span > fourth </ span >
  </ div >
</ div >

Beachten Sie, wie das class , das wir an die Komponente übergeben haben, mit dem class des ersten Knotens darin zusammengeführt wird.

Sie können ändern, wie Attribute mit globalen Requisiten, die über Optionen definiert sind, durch die Übergabe einer Rückruffunktion verschmolzen werden.

Standardmäßig werden alle Requisiten an die Komponente gescopt und stehen verschachtelte Komponenten nicht zur Verfügung. Sie können dies jedoch entsprechend Ihren Bedürfnissen ändern.

Erstellen Sie eine Komponente:

 <!-- src/child.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in child: {{ title }}
</ div >

Erstellen Sie eine <x-parent> -Komponente, die <x-child> verwendet:

 <!-- src/parent.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in parent: {{ title }}
  < x-child />
</ div >

Verwenden Sie es:

 < x-parent title =" My title " />

Die Ausgabe wird sein:

 < div >
  Prop in parent: My title
  < div >
    Prop in child: Default title
  </ div >
</ div >

Wie Sie sehen können, rendert title in <x-child> -Komponente den Standardwert und nicht den einen über <x-parent> festgelegten.

Um dies zu ändern, müssen wir uns aware: auf den Attributnamen, um die Requisiten an verschachtelte Komponenten zu übergeben.

 < x-parent aware:title =" My title " />

Die Ausgabe wird jetzt sein:

 < div >
  Prop in parent: My title
  < div >
    Prop in child: My title
  </ div >
</ div >

Attribute

Sie können alle Attribute an Ihre Komponenten weitergeben und sie werden zum ersten Knoten Ihrer Komponente oder zum Knoten mit einem Attribut mit dem Namen attributes hinzugefügt.

Wenn Sie mit Vue.js vertraut sind, entspricht dies das gleiche wie das sogenannte Herkunftsattribut. Oder mit Laravel Blade sind es Komponenten-Attributes.

Standardmäßig werden class und style mit vorhandenem class und style verschmolzen. Alle anderen Attribute werden standardmäßig überschrieben.

Wenn Sie ein Attribut übergeben, das als prop definiert ist, wird es nicht zum Knoten der Komponente hinzugefügt.

Hier ist ein Beispiel:

 <!-- src/button.html -->
< script props >
  module . exports = {
    label : props . label || 'A button'
  }
</ script >
< button type =" button " class =" btn " >
  {{ label }}
</ button >

Verwenden Sie die Komponente:

 <!-- src/index.html -->
< x-button type =" submit " class =" btn-primary " label =" My button " />

Ergebnis:

 <!-- dist/index.html -->
< button type =" submit " class =" btn btn-primary " > My button </ button >

Wenn Sie class und style -Attributwerte überschreiben müssen (anstatt sie zu verschmelzen), bereiten Sie einfach override: auf den Attributnamen:

 <!-- src/index.html -->
< x-button type =" submit " override:class =" btn-custom " label =" My button " />

Ergebnis:

 <!-- dist/index.html -->
< button type =" submit " class =" btn-custom " > My button </ button >

Wenn Sie möchten, dass die Attribute an einen bestimmten Knoten übergeben werden, verwenden Sie das attributes :

 <!-- src/my-component.html -->
< div class =" first-node " >
  < div class =" second-node " attributes >
    Hello world!
  </ div >
</ div >

Verwenden Sie die Komponente:

 <!-- src/index.html -->
< x-my-component class =" my-class " />

Ergebnis:

 <!-- dist/index.html -->
< div class =" first-node " >
  < div class =" second-node my-class " >
    Hello world!
  </ div >
</ div >

Sie können benutzerdefinierte Regeln hinzufügen, um zu definieren, wie Attribute analysiert werden. Wir verwenden posthtml-attrs-parser, um sie zu verarbeiten.

Erweiterte Attribute Konfigurationen

Wenn Standardkonfigurationen für gültige Attribute für Sie nicht geeignet sind, können Sie sie wie unten erläutert konfigurieren.

 // index.js
const { readFileSync , writeFileSync } = require ( 'fs' )

const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

const options = {
  root : './src' ,  
  // Add attributes to specific tag or override defaults
  elementAttributes : {
    DIV : ( defaultAttributes ) => {
      /* Add new one */
      defaultAttributes . push ( 'custom-attribute-name' ) ;

      return defaultAttributes ;
    } ,
    DIV : ( defaultAttributes ) => {
      /* Override all */
      defaultAttributes = [ 'custom-attribute-name' , 'another-one' ] ;

      return defaultAttributes ;
    } ,
  } ,
  
  // Add attributes to all tags, use '*' as wildcard for attribute name that starts with
  safelistAttributes : [
    'custom-attribute-name' ,
    'attribute-name-start-with-*'
  ] ,

  // Remove attributes from all tags that support it
  blocklistAttributes : [
    'role'
  ]
}

posthtml ( components ( options ) )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

Beispiele

Sie können mit <slot> und <fill> arbeiten oder Komponenten für jeden Block Ihrer Komponente erstellen, und Sie können auch beide unterstützen.

Sie können ein Beispiel dafür in docs-src/components/modal finden. Im Folgenden finden Sie eine kurze Erklärung beider Ansätze.

Slots verwenden

Nehmen wir an, wir möchten eine Komponente für Bootstrap -Modal erstellen.

Der erforderliche Code ist:

 <!-- Modal HTML -->
< div class =" modal fade " id =" exampleModal " tabindex =" -1 " aria-labelledby =" exampleModalLabel " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < div class =" modal-header " >
        < h1 class =" modal-title fs-5 " id =" exampleModalLabel " > Modal title </ h1 >
        < button type =" button " class =" btn-close " data-bs-dismiss =" modal " aria-label =" Close " > </ button >
      </ div >
      < div class =" modal-body " >
        ...
      </ div >
      < div class =" modal-footer " >
        < button type =" button " class =" btn btn-secondary " data-bs-dismiss =" modal " > Close </ button >
        < button type =" button " class =" btn btn-primary " > Save changes </ button >
      </ div >
    </ div >
  </ div >
</ div >

Es gibt fast drei Codeblocke: den Header, den Körper und die Fußzeile.

So konnten wir eine Komponente mit drei Slots erstellen:

<!-- Modal component -->
<div class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+        <slot:header />
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
+        <slot:body />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <slot:footer />
-        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Wir können es dann so verwenden:

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < slot:header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ slot:header >

  < slot:body >
    Modal body content goes here...
  </ slot:body >

  < slot:footer close =" false " >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ slot:footer >
</ x-modal >

Spaltkomponente in kleinen Komponenten

Ein anderer Ansatz besteht darin, die Komponente in kleineren Komponenten zu teilen und Attribute zu übergeben.

Wir erstellen also eine Hauptkomponente und dann drei verschiedene kleinere Komponenten:

 <!-- Main modal component -->
< div class =" modal fade " tabindex =" -1 " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < yield />
    </ div >
  </ div >
</ div >

 <!-- Header modal component -->
< div class =" modal-header " >
  < yield />
</ div >

 <!-- Body modal component -->
< div class =" modal-body " >
  < yield />
</ div >

 <!-- Footer modal component -->
< div class =" modal-footer " >
  < yield />
</ div >

Und dann können Sie es so verwenden:

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < x-modal .header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ x-modal .header >

  < x-modal .body >
    Modal body content goes here...
  </ x-modal .body >

  < x-modal .footer >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ x-modal .footer >
</ x-modal >

Wie gesagt, können Sie an jeden von ihnen Attribute weitergeben, ohne Requisiten zu definieren.

Kombinieren Sie Slots und kleine Komponenten

Sie können auch beide Ansätze kombinieren und dann mit Slots oder kleinen Komponenten verwenden:

 <!-- Modal -->
< div
  class =" modal fade "
  tabindex =" -1 "
  aria-hidden =" true "
  aria-modal =" true "
  role =" dialog "
>
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < if condition =" $slots.header?.filled " >
          < x-modal .header >
            < slot:header />
          </ x-modal .header >
      </ if >
      < if condition =" $slots.body?.filled " >
          < x-modal .body >
              < slot:body />
          </ x-modal .body >
      </ if >
      < if condition =" $slots.footer?.filled " >
          < x-modal .footer close =" {{ $slots.footer?.props.close }} " >
              < slot:footer />
          </ x-modal .footer >
      </ if >
      < yield />
    </ div >
  </ div > <!-- /.modal-dialog -->
</ div > <!-- /.modal -->

Jetzt können Sie Ihre Komponente mit Slots oder mit kleinen Komponenten verwenden.

Wie Sie vielleicht bemerken, können Sie durch die Verwendung von Slots bereits Ihre kleinen Komponenten verwenden, sodass Sie auch Requisiten über $slots übergeben können, bei denen alle props über Slot übergeben sind, und auch überprüfen, ob der Schlitz gefüllt ist.

Migration

Wenn Sie von posthtml-extend und/oder posthtml-modules migrieren, folgen Sie bitte den Updates hier: postHTML-Komponenten/Ausgaben/16.

Beitragen

Siehe POPHTML -Richtlinien und Beitragsleitfaden.

Credits

Vielen Dank an alle posthtml-Mitwirkenden und insbesondere an posthtml-extend und posthtml-modules Mitwirkende als Teil von Code ist ~~gestohlen~~ von diesen Plugins inspiriert. Vielen Dank auch an Laravel Blade Template Engine.

Expandieren