Download posthtml components - Unduh Kode Sumber posthtml components

Komponen posttml

Komponen Laravel Blade yang Diilhami untuk Posthtml

Instalasi

npm i -D posthtml-component

Perkenalan

Plugin POSTHTML ini menyediakan sintaksis ramah-HTML untuk menggunakan komponen dalam templat HTML Anda. Jika Anda terbiasa dengan blade, bereaksi, vue atau yang serupa, Anda akan menemukan sintaksnya terbiasa, karena plugin ini terinspirasi oleh mereka.

Lihat juga UI Bootstrap PosthTML pertama menggunakan plugin ini dan periksa juga templat starter di sini.

Opsi

Nama	Jenis	Bawaan	Keterangan
akar	`String`	`'./'`	Jalur root di mana untuk mencari komponen.
folder	`String[]`	`['']`	Array jalur relatif terhadap `options.root` atau ruang nama yang ditentukan.
fileextension	`String\|String[]`	`'html'`	Ekstensi file komponen yang harus dicari.
tagprefix	`String`	`'x-'`	Awalan tag.
menandai	`String\|Boolean`	`false`	Tag Komponen. Gunakan dengan `options.attribute` . Boolean hanya `false` .
atribut	`String`	`'src'`	Atribut yang akan digunakan untuk mendefinisikan file ke file komponen.
ruang nama	`String[]`	`[]`	Array jalur root namespace, jalur fallback, dan jalur override khusus.
namespaceseparator	`String`	`'::'`	Pemisah Namespace untuk nama tag.
menghasilkan	`String`	`'yield'`	Nama tag untuk menyuntikkan konten komponen utama.
slot	`String`	`'slot'`	Nama tag untuk slot
mengisi	`String`	`'fill'`	Nama tag untuk mengisi slot.
slotseparator	`String`	`':'`	Name Separator untuk Tag `<slot>` dan `<fill>` .
tumpukan	`String`	`'stack'`	Nama tag untuk `<stack>` .
dorongan	`String`	`'push'`	Nama tag untuk `<push>` .
PropsScriptattribute	`String`	`'props'`	Atribut dalam `<script props>` untuk mengambil alat peraga komponen.
Propscontext	`String`	`'props'`	Nama objek di dalam skrip untuk memproses alat peraga.
PropSattribute	`String`	`'props'`	Nama atribut untuk mendefinisikan alat peraga sebagai json pada tag komponen.
Propsslot	`String`	`'props'`	Digunakan untuk mengambil alat peraga yang diteruskan ke slot melalui `$slots.slotName.props` .
Parseropsi	`Object`	`{recognizeSelfClosing: true}`	Lulus opsi ke `posthtml-parser` .
ekspresi	`Object`	`{}`	Lulus opsi ke `posthtml-expressions` .
plugin	`Array`	`[]`	Plugin POSTHTML untuk diterapkan ke setiap komponen yang diuraikan.
pencocokan	`Object`	`[{tag: options.tagPrefix}]`	Array objek yang digunakan untuk mencocokkan tag.
attrsarserrules	`Object`	`{}`	Aturan tambahan untuk plugin parser atribut.
ketat	`Boolean`	`true`	Toggle Exception Throwing.
mergecustomizer	`Function`	`function`	Callback untuk lodash `mergeWith` untuk menggabungkan `options.expressions.locals` dan Props.
utilitas	`Object`	`{merge: _.mergeWith, template: _.template}`	Metode utilitas diteruskan ke `<script props>` .
Elementattributes	`Object`	`{}`	Objek dengan nama tag dan pengubah fungsi `valid-attributes.js` .
SafeListattributes	`String[]`	`['data-*']`	Array nama atribut untuk ditambahkan ke atribut valid default.
blocklistattributes	`String[]`	`[]`	Array nama atribut untuk dihapus dari atribut valid default.

Contoh Dasar

Buat komponen:

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

Gunakan itu:

 <!-- 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' ) )

Hasil:

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

Anda mungkin telah memperhatikan bahwa komponen src/button.html berisi type atribut dan class , dan bahwa kami juga melewati atribut tersebut ketika kami menggunakannya di src/index.html .

Hasilnya adalah type itu ditimpa, dan class digabungkan.

Secara default, atribut class dan style digabungkan, sementara semua atribut lainnya ditimpa. Anda juga dapat mengganti atribut class dan style dengan mengesampingkan override: ke atribut kelas.

Misalnya:

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

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

Semua atribut yang Anda lewati ke komponen akan ditambahkan ke simpul pertama komponen Anda atau ke simpul dengan atribut bernama attributes , hanya jika mereka tidak didefinisikan sebagai props melalui <script props> atau jika mereka bukan "atribut yang diketahui" (lihat valid-attributes.js).

Anda juga dapat menentukan atribut mana yang dianggap valid, melalui opsi plugin.

Rincian lebih lanjut tentang ini di bagian atribut.

menghasilkan

Tag <yield> adalah tempat konten yang Anda lewati ke komponen akan disuntikkan.

Plugin mengkonfigurasi parser posthtml untuk mengenali tag yang menutup sendiri, sehingga Anda juga bisa menulis adalah sebagai <yield /> .

Untuk singkatnya, kami akan menggunakan tag self-closing dalam contoh.

fileextension

Secara default, plugin mencari komponen dengan ekstensi .html . Anda dapat mengubah ini dengan melewati berbagai ekstensi ke opsi fileExtension .

Saat menggunakan array, jika dua file dengan nama yang sama cocok dengan kedua ekstensi, file yang cocok dengan ekstensi pertama dalam array akan digunakan.

 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

Lebih banyak contoh

Lihat juga folder docs-src di mana Anda dapat menemukan lebih banyak contoh.

Anda dapat mengkloning repo ini dan menjalankan npm run build untuk mengkompilasinya.

Fitur

Nama tag dan x-tag

Anda dapat menggunakan komponen dalam berbagai cara, atau juga kombinasi dari mereka.

Jika Anda ingin menggunakan komponen sebagai 'termasuk', Anda dapat mendefinisikan nama atribut tag dan src .

Menggunakan contoh komponen tombol kami sebelumnya, kami dapat menentukan nama tag dan atribut dan kemudian menggunakannya seperti ini:

 <!-- 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 ( /* ... */ )

Jika Anda memerlukan lebih banyak kontrol atas pencocokan tag, Anda dapat melewati array objek yang cocok atau tunggal melalui options.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 ( /* ... */ )

Dengan posthtml-components Anda tidak perlu menentukan nama jalur saat Anda menggunakan sintaks x-tag-name .

Pengaturan POSTHTML:

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

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

Menggunakan:

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

Jika komponen Anda berada di subfolder maka Anda dapat menggunakan dot untuk mengaksesnya:

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

Jika komponen Anda berada di sub-folder dengan beberapa file, maka untuk menghindari menulis nama file utama Anda dapat menggunakan index.html tanpa menentukannya.

Inilah contohnya:

 <!-- 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 >

Opsi parser

Anda dapat memberikan opsi ke posthtml-parser melalui options.parserOptions .

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

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

Penting

parserOptions yang Anda lewati ke plugin juga harus dilewati dalam metode process dalam kode Anda, jika tidak, PosthTML build Anda akan menggunakan default posthtml-parser dan akan mengganti apa pun yang telah Anda lewati ke posthtml-component .

Tag self-closing

Plugin mendukung tag self-closing secara default, tetapi Anda perlu memastikan untuk memungkinkannya dalam metode process dalam kode Anda juga, dengan memberikan recognizeSelfClosing: true di objek opsi:

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

Jika Anda tidak menambahkan ini untuk process , POSTHTML akan menggunakan default posthtml-parser dan tidak akan mendukung tag komponen yang menutup sendiri. Ini akan menghasilkan segalanya setelah tag yang menutup sendiri tidak menjadi output.

Beberapa folder

Anda memiliki kontrol penuh atas di mana file komponen Anda ada. Setelah Anda mengatur jalur akar dasar komponen Anda, Anda kemudian dapat mengatur beberapa folder.

Misalnya jika root Anda ./src dan kemudian Anda memiliki beberapa folder di mana Anda memiliki komponen, misalnya ./src/components dan ./src/layouts , Anda dapat mengatur plugin seperti di bawah ini:

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

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

Ruang nama

Dengan ruang nama, Anda dapat menentukan jalur akar tingkat atas ke komponen Anda.

Ini dapat berguna untuk menangani tema khusus, di mana Anda mendefinisikan root tingkat atas tertentu dengan root fallback untuk saat komponen tidak ditemukan, dan root khusus untuk mengesampingkan.

Ini memungkinkan untuk membuat struktur folder seperti ini:

src (folder root)
- components (folder untuk komponen seperti modal, tombol, dll.)
- layouts (folder untuk komponen tata letak seperti tata letak dasar, header, footer, dll.)
- theme-dark (folder namespace untuk tema-gelap)
  - components (folder untuk komponen untuk tema gelap)
  - layouts (folder untuk komponen tata letak untuk tema gelap)
- theme-light (folder namespace untuk cahaya tema)
  - components (Folder untuk Komponen untuk Tema Cahaya)
  - layouts (folder untuk komponen tata letak untuk tema gelap)
- custom (folder khusus untuk menimpa tema namespace Anda)
  - theme-dark (Folder Kustom Untuk Tema Gelap override)
    - components (folder untuk override komponen tema gelap)
    - layouts (folder untuk override tata letak komponen tema gelap)
  - theme-light (Folder Kustom Untuk Tema Lampu override)
    - components (folder untuk override komponen tema gelap)
    - layouts (folder untuk override tata letak komponen tema gelap)

Dan opsinya akan seperti:

 // 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'
  } , {
    /* ... */
  } ]
} ;

Gunakan namespace komponen:

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

Slot

Komponen dapat mendefinisikan slot yang dapat diisi dengan konten saat digunakan.

Misalnya:

 <!-- 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 >

Gunakan komponen:

 <!-- 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 >

Hasil:

 <!-- 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 >

Secara default, konten slot diganti, tetapi Anda juga dapat mempersiapkan atau menambahkan konten, atau menjaga konten default dengan tidak mengisi slot.

Tambahkan beberapa konten default di komponen:

 <!-- 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 >

Hasil:

 <!-- 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 >

Tumpukan

Anda dapat mendorong konten ke tumpukan bernama yang dapat diberikan di tempat lain, seperti di komponen lain. Ini dapat sangat berguna untuk menentukan JavaScript atau CSS yang diperlukan oleh komponen Anda.

Pertama, tambahkan tag <stack> ke html Anda:

<!-- 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>

Kemudian, dalam komponen modal atau komponen anak lainnya, Anda dapat mendorong konten ke tumpukan ini:

 <!-- 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 >

Outputnya akan:

 <!-- 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 >

Atribut once memungkinkan Anda untuk mendorong konten hanya sekali per siklus rendering.

Misalnya, jika Anda merender komponen yang diberikan dalam satu loop, Anda mungkin hanya ingin mendorong JavaScript dan CSS saat pertama kali komponen diberikan.

Contoh.

 <!-- 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 >

Secara default, konten didorong di tumpukan dalam urutan yang diberikan. Jika Anda ingin menyiapkan konten ke awal tumpukan, Anda dapat menggunakan atribut prepend :

 < 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 >

Alat peraga

props dapat diteruskan ke komponen dalam atribut HTML. Untuk menggunakannya dalam komponen, mereka harus ditentukan dalam tag <script props> komponen.

Misalnya:

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

Menggunakan:

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

Outputnya akan:

 < div >
  Hello world!
</ div >

Jika tidak ada atribut title yang diteruskan ke komponen, nilai default akan digunakan.

 < x-my-alert />

Outputnya akan:

 < div >
  Default title
</ div >

Di dalam <script props> Anda memiliki akses ke alat peraga yang dilewati melalui objek bernama props .

Berikut adalah contoh dari apa yang dapat Anda lakukan dengan itu:

 <!-- 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 >

Menggunakan:

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

Outputnya akan:

 < 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 >

Perhatikan bagaimana atribut class yang kami lewati ke komponen digabungkan dengan nilai atribut class dari simpul pertama di dalamnya.

Anda dapat mengubah bagaimana atribut digabungkan dengan alat peraga global yang ditentukan melalui opsi, dengan melewati fungsi panggilan balik.

Secara default, semua alat peraga tersambung ke komponen, dan tidak tersedia untuk komponen bersarang. Namun Anda dapat mengubah ini sesuai dengan kebutuhan Anda.

Buat komponen:

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

Buat komponen <x-parent> yang menggunakan <x-child> :

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

Gunakan itu:

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

Outputnya akan:

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

Seperti yang Anda lihat, title komponen <x-child> membuat nilai default dan bukan satu set melalui <x-parent> .

Untuk mengubah ini, kita harus prepend aware: ke nama atribut untuk meneruskan alat peraga ke komponen bersarang.

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

Output sekarang akan menjadi:

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

Atribut

Anda dapat meneruskan atribut apa pun ke komponen Anda dan mereka akan ditambahkan ke simpul pertama komponen Anda, atau ke node dengan atribut bernama attributes .

Jika Anda terbiasa dengan Vue.js, ini sama dengan apa yang disebut atribut Fallthrough. Atau, dengan Laravel Blade, itu adalah atribut komponen.

Secara default, class dan style digabungkan dengan atribut class dan style yang ada. Semua atribut lainnya ditimpa secara default.

Jika Anda melewati atribut yang didefinisikan sebagai prop , itu tidak akan ditambahkan ke simpul komponen.

Inilah contohnya:

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

Gunakan komponen:

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

Hasil:

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

Jika Anda perlu mengganti nilai -nilai atribut class dan style (alih -alih menggabungkannya), cukup override: ke nama atribut:

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

Hasil:

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

Jika Anda ingin atribut diteruskan ke node tertentu, gunakan atribut attributes :

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

Gunakan komponen:

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

Hasil:

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

Anda dapat menambahkan aturan khusus untuk menentukan bagaimana atribut diuraikan-kami menggunakan postml-attrs-parser untuk menanganinya.

Konfigurasi Atribut Lanjutan

Jika konfigurasi default untuk atribut yang valid tidak tepat untuk Anda, Anda dapat mengonfigurasinya seperti yang dijelaskan di bawah ini.

 // 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' ) )

Contoh

Anda dapat bekerja dengan <slot> dan <fill> atau Anda dapat membuat komponen untuk setiap blok komponen Anda, dan Anda juga dapat mendukung keduanya.

Anda dapat menemukan contoh dari ini di dalam docs-src/components/modal . Berikut ini adalah penjelasan singkat dari kedua pendekatan.

Menggunakan slot

Misalkan kita ingin membuat komponen untuk modal bootstrap.

Kode yang diperlukan adalah:

 <!-- 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 >

Ada hampir tiga blok kode: header, tubuh dan footer.

Jadi kita bisa membuat komponen dengan tiga slot:

<!-- 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>

Kami kemudian dapat menggunakannya seperti ini:

 < 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 >

Komponen pemisahan dalam komponen kecil

Pendekatan lain adalah membagi komponen dalam komponen yang lebih kecil, memberikan atribut untuk masing -masing.

Jadi kami membuat komponen utama dan kemudian tiga komponen kecil yang berbeda:

 <!-- 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 >

Dan kemudian Anda dapat menggunakannya seperti ini:

 < 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 >

Seperti yang dikatakan dengan cara ini Anda dapat memberikan atribut kepada masing -masing, tanpa mendefinisikan alat peraga.

Gabungkan slot dan komponen kecil

Anda juga dapat menggabungkan kedua pendekatan, dan kemudian menggunakannya dengan slot atau dengan komponen kecil:

 <!-- 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 -->

Sekarang Anda dapat menggunakan komponen Anda dengan slot atau dengan komponen kecil.

Seperti yang mungkin Anda perhatikan, dengan menggunakan slot, Anda sudah dapat menggunakan juga komponen kecil Anda, sehingga Anda juga dapat melewati alat peraga melalui $slots yang memiliki semua props yang dilewatkan melalui slot, dan juga memeriksa apakah slot diisi.

Migrasi

Jika Anda bermigrasi dari posthtml-modules posthtml-extend dan/atau postml, silakan mengikuti pembaruan di sini: Posthtml-Components/Issues/16.

Berkontribusi

Lihat Pedoman PosthTML dan Panduan Kontribusi.

Kredit

Terima kasih kepada semua kontributor POSTHTML dan khususnya untuk kontributor posthtml-extend dan posthtml-modules , sebagai bagian dari kode adalah ~~dicuri~~ Terinspirasi dari plugin ini. Terima kasih juga untuk mesin template Blade Laravel.

Memperluas