posthtml-component 1.0.0-beta.9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/readme.md +153 -115
- package/src/find-path.js +3 -3
- package/src/index.js +107 -35
- package/src/log.js +27 -0
- package/src/process-attributes.js +115 -0
- package/src/process-props.js +83 -0
- package/src/process-script.js +49 -0
- package/src/{slots.js → process-slots.js} +5 -5
- package/src/{stacks.js → process-stacks.js} +6 -1
- package/src/valid-attributes.js +3560 -0
- package/src/attributes.js +0 -64
- package/src/locals.js +0 -99
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "posthtml-component",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "PostHTML Components Blade-like with slots, attributes as props and custom tag",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "thewebartisan7/posthtml-components",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"version": "conventional-changelog -i changelog.md -s -r 0 && git add changelog.md",
|
|
14
14
|
"test": "c8 ava",
|
|
15
15
|
"pretest": "clinton && xo",
|
|
16
|
-
"build
|
|
16
|
+
"build": "node ./docs-src"
|
|
17
17
|
},
|
|
18
18
|
"keywords": [
|
|
19
19
|
"posthtml",
|
package/readme.md
CHANGED
|
@@ -17,10 +17,10 @@ npm i -D posthtml-component
|
|
|
17
17
|
## Introduction
|
|
18
18
|
|
|
19
19
|
This PostHTML plugin provides an HTML-friendly syntax for write components in your templates.
|
|
20
|
-
If you are familiar with Blade, you will find
|
|
20
|
+
If you are familiar with Blade, React, Vue or similar, you will find familiar syntax as this plugin is inspired by them.
|
|
21
21
|
See below a basic example, as code is worth a thousand words.
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
**See also the first [PostHTML Bootstrap UI](https://github.com/thewebartisan7/posthtml-bootstrap-ui) using this plugin and check also the [starter template here](https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter).**
|
|
24
24
|
|
|
25
25
|
## Basic example
|
|
26
26
|
|
|
@@ -69,13 +69,11 @@ Result:
|
|
|
69
69
|
</html>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
You may
|
|
72
|
+
You may notice that the `src/button.html` component has a `type` and `class` attribute, and when we use the component in `src/index.html` we pass `type` and `class` attribute.
|
|
73
|
+
The result is that `type` is override, and `class` is merged.
|
|
73
74
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
First you may notice that our `src/button.html` component has a `type` and `class` attribute, and when we use the component in `src/index.html` we add type and class attribute. The result is that `type` is override, and `class` is merged.
|
|
77
|
-
|
|
78
|
-
By default `class` and `style` attributes are merged, while all others attribute are override. You can also override class and style attribute by prepending `override:` to the class attribute. Example:
|
|
75
|
+
By default `class` and `style` attributes are merged, while all others attribute are override.
|
|
76
|
+
You can also override `class` and `style` attributes by prepending `override:` to the class attribute. Example:
|
|
79
77
|
|
|
80
78
|
```html
|
|
81
79
|
<x-button override:class="btn-custom">Submit</x-button>
|
|
@@ -84,41 +82,51 @@ By default `class` and `style` attributes are merged, while all others attribute
|
|
|
84
82
|
<button type="button" class="btn-custom">Submit</button>
|
|
85
83
|
```
|
|
86
84
|
|
|
87
|
-
All attributes you pass to the component will be added to the first
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
All attributes you pass to the component will be added to the first node of your component or to the node with an attribute names `attributes`,
|
|
86
|
+
and only if they are not defined as `props` via `<script props>` or if they are not in the following file
|
|
87
|
+
[valid-attributes.js](https://github.com/thewebartisan7/posthtml-components/blob/main/src/valid-attributes.js).
|
|
88
|
+
You can also manage valid attributes via options.
|
|
89
|
+
More details on this in [Attributes](#attributes) section.
|
|
92
90
|
|
|
93
|
-
|
|
91
|
+
The `<yield>` tag is where your content will be injected.
|
|
92
|
+
In next section you can find all available options and then examples for each feature.
|
|
94
93
|
|
|
95
|
-
See also the `
|
|
94
|
+
See also the `docs-src` folder where you can find more examples.
|
|
95
|
+
You can run `npm run build` to compile them.
|
|
96
96
|
|
|
97
97
|
## Options
|
|
98
98
|
|
|
99
|
-
|
|
|
100
|
-
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
| **
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
99
|
+
| Option | Default | Description |
|
|
100
|
+
|:------------------------:|:---------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------|
|
|
101
|
+
| **root** | `'./'` | String value as root path for components lookup. |
|
|
102
|
+
| **folders** | `['']` | Array of additional multi folders path from `options.root` or any defined namespaces root, fallback or custom. |
|
|
103
|
+
| **tagPrefix** | `x-` | String for tag prefix. The plugin will use RegExp with this string. |
|
|
104
|
+
| **tag** | `false` | String or boolean value for component tag. Use this with `options.attribute`. Boolean only false. |
|
|
105
|
+
| **attribute** | `src` | String value for component attribute for set path. |
|
|
106
|
+
| **namespaces** | `[]` | Array of namespace's root path, fallback path and custom path for override. |
|
|
107
|
+
| **namespaceSeparator** | `::` | String value for namespace separator to be used with tag name. Example `<x-namespace::button>` |
|
|
108
|
+
| **fileExtension** | `html` | String value for file extension of the components used for retrieve x-tag file. |
|
|
109
|
+
| **yield** | `yield` | String value for `<yield>` tag name. Where main content of component is injected. |
|
|
110
|
+
| **slot** | `slot` | String value for `<slot>` tag name. Used with RegExp by appending `:` (example `<slot:slot-name>`). |
|
|
111
|
+
| **fill** | `fill` | String value for `<fill>` tag name. Used with RegExp by appending `:` (example `<fill:slot-name>`). |
|
|
112
|
+
| **slotSeparator** | `:` | String value used for separate `<slot>` and `<fill>` tag from their names. |
|
|
113
|
+
| **push** | `push` | String value for `<push>` tag name. |
|
|
114
|
+
| **stack** | `stack` | String value for `<stack>` tag name. |
|
|
115
|
+
| **propsScriptAttribute** | `props` | String value used as attribute in `<script props>` parsed by the plugin to retrieve props of the component. |
|
|
116
|
+
| **propsContext** | `props` | String value used as object name inside the script to process process before passed to the component. |
|
|
117
|
+
| **propsAttribute** | `props` | String value for props attribute to define props as JSON. |
|
|
118
|
+
| **propsSlot** | `props` | String value used to retrieve the props passed to slot via `$slots.slotName.props`. |
|
|
119
|
+
| **parserOptions** | `{recognizeSelfClosing: true}` | Object to configure `posthtml-parser`. By default, it enables support for self-closing component tags. |
|
|
120
|
+
| **expressions** | `{}` | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example. |
|
|
121
|
+
| **plugins** | `[]` | PostHTML plugins to apply for every parsed components. |
|
|
122
|
+
| **matcher** | `[{tag: options.tagPrefix}]` | Array of object used to match the tags. |
|
|
123
|
+
| **attrsParserRules** | `{}` | Additional rules for attributes parser plugin. |
|
|
124
|
+
| **strict** | `true` | Boolean value for enable or disable throw an exception. |
|
|
125
|
+
| **mergeCustomizer** | `function` | Function callback passed to lodash `mergeWith` for merge `options.expressions.locals` and props passed via attribute `props`. |
|
|
126
|
+
| **utilities** | `{merge: _.mergeWith, template: _.template}` | Object of utilities methods to be passed to `<script props>`. By default lodash `mergeWith` and `template`. |
|
|
127
|
+
| **elementAttributes** | `{}` | An object with tag name and a function modifier of valid-attributes.js. |
|
|
128
|
+
| **safelistAttributes** | `['data-*']` | An array of attributes name to be added to default valid attributes. |
|
|
129
|
+
| **blacklistAttributes** | `[]` | An array of attributes name to be removed from default valid attributes. |
|
|
122
130
|
|
|
123
131
|
## Features
|
|
124
132
|
|
|
@@ -209,11 +217,42 @@ Please see below example to understand better.
|
|
|
209
217
|
<x-modal>Submit</x-modal>
|
|
210
218
|
```
|
|
211
219
|
|
|
220
|
+
#### Parser options
|
|
221
|
+
|
|
222
|
+
You may pass options to `posthtml-parser` via `options.parserOptions`.
|
|
223
|
+
|
|
224
|
+
```js
|
|
225
|
+
// index.js
|
|
226
|
+
const options = {
|
|
227
|
+
root: './src',
|
|
228
|
+
parserOptions: { decodeEntities: true }
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
require('posthtml')(require('posthtml-components')(options))
|
|
232
|
+
.process('some HTML', options.parserOptions)
|
|
233
|
+
.then(/* ... */)
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
Important: as you can see, whatever `parserOptions` you pass to the plugin, must also be passed in the `process` method in your code, otherwise your PostHTML build will use `posthtml-parser` defaults and will override anything you've passed to `posthtml-component`.
|
|
237
|
+
|
|
238
|
+
#### Self-closing tags
|
|
239
|
+
|
|
240
|
+
The plugin supports self-closing tags by default, but you need to make sure to enable them in the `process` method in your code too, by passing `recognizeSelfClosing: true` in the options object:
|
|
241
|
+
|
|
242
|
+
```js
|
|
243
|
+
// index.js
|
|
244
|
+
require('posthtml')(require('posthtml-components')({root: './src'}))
|
|
245
|
+
.process('your HTML...', {recognizeSelfClosing: true})
|
|
246
|
+
.then(/* ... */)
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
If you don't add this to `process`, PostHTML will use `posthtml-parser` defaults and will not support self-closing component tags. This will result in everything after a self-closing tag not being output.
|
|
250
|
+
|
|
212
251
|
### Multiple folders
|
|
213
252
|
|
|
214
253
|
You have full control where to place your components. Once you set the base root path of your components, you can then set multiple folders.
|
|
215
254
|
For example let's suppose your main root is `./src` and then you have several folders where you have your components, for example `./src/components` and `./src/layouts`.
|
|
216
|
-
You can
|
|
255
|
+
You can set up the plugin like below:
|
|
217
256
|
|
|
218
257
|
```js
|
|
219
258
|
// index.js
|
|
@@ -229,7 +268,7 @@ require('posthtml')(require('posthtml-components')(options))
|
|
|
229
268
|
|
|
230
269
|
### Namespaces
|
|
231
270
|
|
|
232
|
-
With namespaces you can define a top level root path to your components like shown in below example.
|
|
271
|
+
With namespaces, you can define a top level root path to your components like shown in below example.
|
|
233
272
|
It can be useful for handle custom theme, where you define a specific top level root, with fallback root when component it's not found,
|
|
234
273
|
and a custom root for override, something like a child theme.
|
|
235
274
|
|
|
@@ -284,7 +323,7 @@ const options = {
|
|
|
284
323
|
|
|
285
324
|
Use the component namespace:
|
|
286
325
|
|
|
287
|
-
```
|
|
326
|
+
```html
|
|
288
327
|
<!-- src/index.html -->
|
|
289
328
|
<html>
|
|
290
329
|
<body>
|
|
@@ -346,7 +385,7 @@ Result:
|
|
|
346
385
|
</div>
|
|
347
386
|
```
|
|
348
387
|
|
|
349
|
-
By default the content is replaced, but you can also prepend or append the content, or keep the default content by not filling the slot.
|
|
388
|
+
By default, the content is replaced, but you can also prepend or append the content, or keep the default content by not filling the slot.
|
|
350
389
|
|
|
351
390
|
Add some default content in the component:
|
|
352
391
|
|
|
@@ -486,7 +525,7 @@ Example.
|
|
|
486
525
|
</push>
|
|
487
526
|
```
|
|
488
527
|
|
|
489
|
-
By default the content is pushed in the stack in the given order.
|
|
528
|
+
By default, the content is pushed in the stack in the given order.
|
|
490
529
|
If you would like to prepend content onto the beginning of a stack, you should use the `prepend` attribute:
|
|
491
530
|
|
|
492
531
|
```html
|
|
@@ -505,7 +544,7 @@ If you would like to prepend content onto the beginning of a stack, you should u
|
|
|
505
544
|
|
|
506
545
|
### Props
|
|
507
546
|
|
|
508
|
-
Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes
|
|
547
|
+
Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes and manipulate them via `<script props>`.
|
|
509
548
|
|
|
510
549
|
Let's see how it works with a few examples starting with a basic one.
|
|
511
550
|
|
|
@@ -515,7 +554,7 @@ Create the component:
|
|
|
515
554
|
<!-- src/my-component.html -->
|
|
516
555
|
<script props>
|
|
517
556
|
module.exports = {
|
|
518
|
-
prop: 'Default prop value'
|
|
557
|
+
prop: props.prop || 'Default prop value'
|
|
519
558
|
}
|
|
520
559
|
</script>
|
|
521
560
|
<div>
|
|
@@ -553,11 +592,7 @@ The output will be:
|
|
|
553
592
|
</div>
|
|
554
593
|
```
|
|
555
594
|
|
|
556
|
-
|
|
557
|
-
More details on this in the next section.
|
|
558
|
-
|
|
559
|
-
So by default `<script props>` act as default value, like the `@props` you define with Laravel Blade.
|
|
560
|
-
You can change this behaviour by prepending `computed` or `merge` to the attribute name like shown below.
|
|
595
|
+
In the `<script props>` you have access to passed props via object `props`, and you can add any logic you need inside it.
|
|
561
596
|
|
|
562
597
|
Create the component:
|
|
563
598
|
|
|
@@ -565,9 +600,9 @@ Create the component:
|
|
|
565
600
|
<!-- src/modal.html -->
|
|
566
601
|
<script props>
|
|
567
602
|
module.exports = {
|
|
568
|
-
title: 'Default title',
|
|
569
|
-
size:
|
|
570
|
-
items: ['first', 'second']
|
|
603
|
+
title: props.title || 'Default title',
|
|
604
|
+
size: props.size ? `modal-${props.size}` : '',
|
|
605
|
+
items: Array.isArray(props.items) ? props.items.concat(['first', 'second']) : ['first', 'second']
|
|
571
606
|
}
|
|
572
607
|
</script>
|
|
573
608
|
<div class="modal {{ size }}">
|
|
@@ -583,7 +618,7 @@ Create the component:
|
|
|
583
618
|
Use:
|
|
584
619
|
|
|
585
620
|
```html
|
|
586
|
-
<x-modal
|
|
621
|
+
<x-modal size="xl" title="My modal title" items='["third", "fourth"]' class="modal-custom"></x-modal>
|
|
587
622
|
```
|
|
588
623
|
|
|
589
624
|
The output will be:
|
|
@@ -602,12 +637,9 @@ The output will be:
|
|
|
602
637
|
</div>
|
|
603
638
|
```
|
|
604
639
|
|
|
605
|
-
|
|
606
|
-
And the prop `items` is merged and not override.
|
|
607
|
-
You can also notice how the `class` attribute is merged with `class` attribute of the first node. Let's see in next section more about this.
|
|
640
|
+
You can also notice how the `class` attribute is merged with `class` attribute of the first node. In the next section you will know more about this.
|
|
608
641
|
|
|
609
|
-
You can change how attributes are merged
|
|
610
|
-
By default, it's used to concat array.
|
|
642
|
+
You can change how attributes are merged with global props defined via options by passing a callback function used by lodash method [mergeWith](https://lodash.com/docs/4.17.15#mergeWith).
|
|
611
643
|
|
|
612
644
|
By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
|
|
613
645
|
Let's see below example.
|
|
@@ -618,7 +650,7 @@ Create a component:
|
|
|
618
650
|
<!-- src/child.html -->
|
|
619
651
|
<script props>
|
|
620
652
|
module.exports = {
|
|
621
|
-
prop: 'Default prop value'
|
|
653
|
+
prop: props.prop || 'Default prop value'
|
|
622
654
|
}
|
|
623
655
|
</script>
|
|
624
656
|
<div>
|
|
@@ -633,7 +665,7 @@ Create another component that use the first one:
|
|
|
633
665
|
<!-- src/parent.html -->
|
|
634
666
|
<script props>
|
|
635
667
|
module.exports = {
|
|
636
|
-
prop: 'Default prop value'
|
|
668
|
+
prop: props.prop || 'Default prop value'
|
|
637
669
|
}
|
|
638
670
|
</script>
|
|
639
671
|
<div>
|
|
@@ -679,10 +711,15 @@ The output now will be:
|
|
|
679
711
|
|
|
680
712
|
### Attributes
|
|
681
713
|
|
|
682
|
-
|
|
714
|
+
You can pass any attributes to your components and this will be added to the first node of your component,
|
|
715
|
+
or to the node with an attribute named `attributes`. If you are familiar with VueJS this is the same as so called
|
|
716
|
+
[fallthrough attribute](https://vuejs.org/guide/components/attrs.html), or with Laravel Blade is
|
|
717
|
+
[component-attributes](https://laravel.com/docs/10.x/blade#component-attributes).
|
|
718
|
+
|
|
683
719
|
By default `class` and `style` are merged with existing `class` and `style` attribute.
|
|
684
720
|
All others attributes are override by default.
|
|
685
|
-
Only
|
|
721
|
+
Only attributes defined in [valid-attributes.js](https://github.com/thewebartisan7/posthtml-components/blob/main/src/valid-attributes.js)
|
|
722
|
+
or not defined as `props` in the `<script props>`.
|
|
686
723
|
|
|
687
724
|
As already seen in basic example:
|
|
688
725
|
|
|
@@ -690,7 +727,7 @@ As already seen in basic example:
|
|
|
690
727
|
<!-- src/button.html -->
|
|
691
728
|
<script props>
|
|
692
729
|
module.exports = {
|
|
693
|
-
label: 'A button'
|
|
730
|
+
label: props.label || 'A button'
|
|
694
731
|
}
|
|
695
732
|
</script>
|
|
696
733
|
<button type="button" class="btn">
|
|
@@ -714,8 +751,6 @@ Result:
|
|
|
714
751
|
|
|
715
752
|
As you may notice the `label` attribute is not added as attribute, since it's defined as a `props`.
|
|
716
753
|
|
|
717
|
-
If you are familiar with Laravel Blade, this is also how Blade handle this.
|
|
718
|
-
|
|
719
754
|
As said early, `class` and `style` are merged by default, if you want to override them, just prepend `override:` to the attribute name:
|
|
720
755
|
|
|
721
756
|
```html
|
|
@@ -730,7 +765,7 @@ Result:
|
|
|
730
765
|
<button type="submit" class="btn-custom">My button</button>
|
|
731
766
|
```
|
|
732
767
|
|
|
733
|
-
If you want to use another node
|
|
768
|
+
If you want to use another node and not the first one, then you can add the attribute `attributes` like shown below.
|
|
734
769
|
|
|
735
770
|
```html
|
|
736
771
|
<!-- src/my-component.html -->
|
|
@@ -761,10 +796,57 @@ Result:
|
|
|
761
796
|
|
|
762
797
|
You can add custom rules how attributes are parsed, as behind the scene it's used [posthtml-attrs-parser](https://github.com/posthtml/posthtml-attrs-parser) plugin.
|
|
763
798
|
|
|
799
|
+
### Advanced attributes configurations
|
|
800
|
+
|
|
801
|
+
If default configurations for valid attributes are not right for you, then you can configure them as explained below.
|
|
802
|
+
|
|
803
|
+
```js
|
|
804
|
+
// index.js
|
|
805
|
+
const { readFileSync, writeFileSync } = require('fs')
|
|
806
|
+
|
|
807
|
+
const posthtml = require('posthtml')
|
|
808
|
+
const components = require('posthtml-components')
|
|
809
|
+
|
|
810
|
+
const options = {
|
|
811
|
+
root: './src',
|
|
812
|
+
|
|
813
|
+
// Add attributes to specific tag or override defaults
|
|
814
|
+
elementAttributes: {
|
|
815
|
+
DIV: (defaultAttributes) => {
|
|
816
|
+
/* Add new one */
|
|
817
|
+
defaultAttributes.push('custom-attribute-name');
|
|
818
|
+
|
|
819
|
+
return defaultAttributes;
|
|
820
|
+
},
|
|
821
|
+
DIV: (defaultAttributes) => {
|
|
822
|
+
/* Override all */
|
|
823
|
+
defaultAttributes = ['custom-attribute-name', 'another-one'];
|
|
824
|
+
|
|
825
|
+
return defaultAttributes;
|
|
826
|
+
},
|
|
827
|
+
},
|
|
828
|
+
|
|
829
|
+
// Add attributes to all tags, use '*' as wildcard for attribute name that starts with
|
|
830
|
+
safelistAttributes: [
|
|
831
|
+
'custom-attribute-name',
|
|
832
|
+
'attribute-name-start-with-*'
|
|
833
|
+
],
|
|
834
|
+
|
|
835
|
+
// Remove attributes from all tags that support it
|
|
836
|
+
blacklistAttributes: [
|
|
837
|
+
'role'
|
|
838
|
+
]
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
posthtml(components(options))
|
|
842
|
+
.process(readFileSync('src/index.html', 'utf8'))
|
|
843
|
+
.then((result) => writeFileSync('dist/index.html', result.html, 'utf8'))
|
|
844
|
+
```
|
|
845
|
+
|
|
764
846
|
## Examples
|
|
765
847
|
|
|
766
|
-
You can work with `<slot>` and `<fill>` or you can create component for each
|
|
767
|
-
You can find an example of this inside `
|
|
848
|
+
You can work with `<slot>` and `<fill>` or you can create component for each block of your component, and you can also support both of them.
|
|
849
|
+
You can find an example of this inside `docs-src/components/modal`. Below is a short explanation about the both approach.
|
|
768
850
|
|
|
769
851
|
### Using slots
|
|
770
852
|
|
|
@@ -923,7 +1005,7 @@ You can also combine both way, and then use them with slots or with small compon
|
|
|
923
1005
|
</x-modal.body>
|
|
924
1006
|
</if>
|
|
925
1007
|
<if condition="$slots.footer?.filled">
|
|
926
|
-
<x-modal.footer close="{{ $slots.footer?.
|
|
1008
|
+
<x-modal.footer close="{{ $slots.footer?.props.close }}">
|
|
927
1009
|
<slot:footer></slot:footer>
|
|
928
1010
|
</x-modal.footer>
|
|
929
1011
|
</if>
|
|
@@ -939,53 +1021,9 @@ via `$slots` which has all the `props` passed via slot, and as well check if slo
|
|
|
939
1021
|
|
|
940
1022
|
## Migration
|
|
941
1023
|
|
|
942
|
-
If you are migrating from `posthtml-extend` and/or `posthtml-modules`
|
|
943
|
-
For continue to use current code with this plugin without changing it, see below examples. Any more updates on this will be added in this issue:
|
|
1024
|
+
If you are migrating from `posthtml-extend` and/or `posthtml-modules` please to follow updates here:
|
|
944
1025
|
[posthtml-components/issues/16](https://github.com/thewebartisan7/posthtml-components/issues/16).
|
|
945
1026
|
|
|
946
|
-
### PostHTML Include
|
|
947
|
-
|
|
948
|
-
PostHTML Include plugin can work when passed via `options.plugins` like below example:
|
|
949
|
-
|
|
950
|
-
```js
|
|
951
|
-
require("posthtml-component")({
|
|
952
|
-
root: "./src",
|
|
953
|
-
folders: ["components", "layouts"],
|
|
954
|
-
plugins: [
|
|
955
|
-
require("posthtml-include")({
|
|
956
|
-
encoding: "utf8",
|
|
957
|
-
root: "./src"
|
|
958
|
-
}),
|
|
959
|
-
]
|
|
960
|
-
})
|
|
961
|
-
```
|
|
962
|
-
|
|
963
|
-
### PostHTML Modules
|
|
964
|
-
|
|
965
|
-
At the moment doesn't work when nested inside PostHTML Components plugin since it use `tree.match` and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:
|
|
966
|
-
|
|
967
|
-
```js
|
|
968
|
-
require("posthtml-component")({
|
|
969
|
-
root: "./src",
|
|
970
|
-
folders: ["components", "layouts"],
|
|
971
|
-
tag: 'module',
|
|
972
|
-
attribute: 'href',
|
|
973
|
-
yield: 'content',
|
|
974
|
-
plugins: [
|
|
975
|
-
require("posthtml-include")({
|
|
976
|
-
encoding: "utf8",
|
|
977
|
-
root: "./src/www/posthtml-templates/"
|
|
978
|
-
}),
|
|
979
|
-
]
|
|
980
|
-
})
|
|
981
|
-
```
|
|
982
|
-
|
|
983
|
-
NOTE: If you change `<yield>` tag to `<content>` to support your existing code, then you need to use it always. Maybe you can just replace all `<content>` with `<yield>` and it should works fine.
|
|
984
|
-
|
|
985
|
-
### PostHTML Extends
|
|
986
|
-
|
|
987
|
-
So far it works fine together with `posthtml-components` plugin.
|
|
988
|
-
|
|
989
1027
|
## Contributing
|
|
990
1028
|
|
|
991
1029
|
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
|
package/src/find-path.js
CHANGED
|
@@ -44,7 +44,7 @@ function searchInFolders(tag, fileNameFromTag, options) {
|
|
|
44
44
|
const componentPath = search(options.root, options.folders, fileNameFromTag, options.fileExtension);
|
|
45
45
|
|
|
46
46
|
if (!componentPath) {
|
|
47
|
-
throw new Error(`[components]
|
|
47
|
+
throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined root paths (${options.folders.join(', ')})`);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
return componentPath;
|
|
@@ -63,7 +63,7 @@ function searchInNamespaces(tag, [namespace, fileNameFromTag], options) {
|
|
|
63
63
|
const namespaceOption = options.namespaces.find(n => n.name === namespace.replace(options.tagPrefix, ''));
|
|
64
64
|
|
|
65
65
|
if (!namespaceOption) {
|
|
66
|
-
throw new Error(`[components] Unknown component namespace ${namespace}.`);
|
|
66
|
+
throw new Error(`[components] Unknown component namespace: ${namespace}.`);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
let componentPath;
|
|
@@ -84,7 +84,7 @@ function searchInNamespaces(tag, [namespace, fileNameFromTag], options) {
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
if (!componentPath && options.strict) {
|
|
87
|
-
throw new Error(`[components]
|
|
87
|
+
throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined namespace base path ${namespaceOption.root}`);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
return componentPath;
|