posthtml-component 1.0.0 → 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 +1 -1
- package/readme.md +33 -1
- package/src/index.js +5 -1
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -116,6 +116,7 @@ You can run `npm run build` to compile them.
|
|
|
116
116
|
| **propsContext** | `props` | String value used as object name inside the script to process process before passed to the component. |
|
|
117
117
|
| **propsAttribute** | `props` | String value for props attribute to define props as JSON. |
|
|
118
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. |
|
|
119
120
|
| **expressions** | `{}` | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example. |
|
|
120
121
|
| **plugins** | `[]` | PostHTML plugins to apply for every parsed components. |
|
|
121
122
|
| **matcher** | `[{tag: options.tagPrefix}]` | Array of object used to match the tags. |
|
|
@@ -216,6 +217,37 @@ Please see below example to understand better.
|
|
|
216
217
|
<x-modal>Submit</x-modal>
|
|
217
218
|
```
|
|
218
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
|
+
|
|
219
251
|
### Multiple folders
|
|
220
252
|
|
|
221
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.
|
|
@@ -291,7 +323,7 @@ const options = {
|
|
|
291
323
|
|
|
292
324
|
Use the component namespace:
|
|
293
325
|
|
|
294
|
-
```
|
|
326
|
+
```html
|
|
295
327
|
<!-- src/index.html -->
|
|
296
328
|
<html>
|
|
297
329
|
<body>
|
package/src/index.js
CHANGED
|
@@ -50,6 +50,7 @@ module.exports = (options = {}) => tree => {
|
|
|
50
50
|
options.propsContext = options.propsContext || 'props';
|
|
51
51
|
options.propsAttribute = options.propsAttribute || 'props';
|
|
52
52
|
options.propsSlot = options.propsSlot || 'props';
|
|
53
|
+
options.parserOptions = options.parserOptions || {recognizeSelfClosing: true};
|
|
53
54
|
options.expressions = options.expressions || {};
|
|
54
55
|
options.plugins = options.plugins || [];
|
|
55
56
|
options.attrsParserRules = options.attrsParserRules || {};
|
|
@@ -180,7 +181,10 @@ function processTree(options) {
|
|
|
180
181
|
|
|
181
182
|
log(`${++processCounter}) Processing "${currentNode.tag}" from "${componentPath}"`, 'processTree');
|
|
182
183
|
|
|
183
|
-
let nextNode = parser(
|
|
184
|
+
let nextNode = parser(
|
|
185
|
+
readFileSync(componentPath, 'utf8'),
|
|
186
|
+
mergeWith({recognizeSelfClosing: true}, options.parserOptions)
|
|
187
|
+
);
|
|
184
188
|
|
|
185
189
|
// Set filled slots
|
|
186
190
|
setFilledSlots(currentNode, filledSlots, options);
|