posthtml-component 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthtml-component",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "PostHTML Components Blade-like with slots, attributes as props and custom tag",
   "license": "MIT",
   "repository": "thewebartisan7/posthtml-components",
@@ -24,26 +24,26 @@
   ],
   "dependencies": {
     "lodash": "^4.17.21",
+    "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^0.1.1",
     "posthtml-expressions": "^1.9.0",
-    "posthtml-parser": "^0.11.0",
+    "posthtml-parser": "^0.12.0",
     "posthtml-render": "^3.0.0",
-    "style-to-object": "^0.3.0"
+    "style-to-object": "^1.0.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-angular": "^12.0.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-angular": "^18.4.3",
     "ava": "^3.15.0",
-    "c8": "^7.6.0",
+    "c8": "^9.0.0",
     "clinton": "^0.14.0",
-    "conventional-changelog-cli": "^2.1.1",
+    "conventional-changelog-cli": "^4.1.0",
     "highlight.js": "^11.6.0",
-    "husky": "^5.1.3",
-    "lint-staged": "^10.5.4",
+    "husky": "^9.0.7",
+    "lint-staged": "^15.2.0",
     "markdown-it-anchor": "^8.6.5",
     "markdown-it-include": "^2.0.0",
     "markdown-it-toc-done-right": "^4.2.0",
-    "posthtml": "^0.16.6",
     "posthtml-beautify": "^0.7.0",
     "posthtml-include": "^1.7.4",
     "posthtml-markdownit": "^1.3.0",

package/readme.md

@@ -116,6 +116,7 @@ You can run `npm run build` to compile them.
 |     **propsContext**     |                    `props`                    | String value used as object name inside the script to process process before passed to the component.                         |
 |    **propsAttribute**    |                    `props`                    | String value for props attribute to define props as JSON.                                                                     |
 |      **propsSlot**       |                    `props`                    | String value used to retrieve the props passed to slot via `$slots.slotName.props`.                                           |
+|     **parserOptions**    |        `{recognizeSelfClosing: true}`         | Object to configure `posthtml-parser`. By default, it enables support for self-closing component tags.                        |
 |     **expressions**      |                     `{}`                      | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example.                   |
 |       **plugins**        |                     `[]`                      | PostHTML plugins to apply for every parsed components.                                                                        |
 |       **matcher**        |         `[{tag: options.tagPrefix}]`          | Array of object used to match the tags.                                                                                       |
@@ -216,6 +217,37 @@ Please see below example to understand better.
 <x-modal>Submit</x-modal>
 ```
 
+#### Parser options
+
+You may pass options to `posthtml-parser` via `options.parserOptions`.
+
+```js
+// index.js
+const options = { 
+  root: './src', 
+  parserOptions: { decodeEntities: true } 
+};
+
+require('posthtml')(require('posthtml-components')(options))
+  .process('some HTML', options.parserOptions)
+  .then(/* ... */)
+```
+
+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`.
+
+#### Self-closing tags
+
+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:
+
+```js
+// index.js
+require('posthtml')(require('posthtml-components')({root: './src'}))
+  .process('your HTML...', {recognizeSelfClosing: true})
+  .then(/* ... */)
+```
+
+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.
+
 ### Multiple folders
 
 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 = {
 
 Use the component namespace:
 
-``` html
+```html
 <!-- src/index.html -->
 <html>
 <body>

package/src/index.js

@@ -50,6 +50,7 @@ module.exports = (options = {}) => tree => {
   options.propsContext = options.propsContext || 'props';
   options.propsAttribute = options.propsAttribute || 'props';
   options.propsSlot = options.propsSlot || 'props';
+  options.parserOptions = options.parserOptions || {recognizeSelfClosing: true};
   options.expressions = options.expressions || {};
   options.plugins = options.plugins || [];
   options.attrsParserRules = options.attrsParserRules || {};
@@ -180,7 +181,10 @@ function processTree(options) {
 
       log(`${++processCounter}) Processing "${currentNode.tag}" from "${componentPath}"`, 'processTree');
 
-      let nextNode = parser(readFileSync(componentPath, 'utf8'));
+      let nextNode = parser(
+        readFileSync(componentPath, 'utf8'),
+        mergeWith({recognizeSelfClosing: true}, options.parserOptions)
+      );
 
       // Set filled slots
       setFilledSlots(currentNode, filledSlots, options);

package/src/process-attributes.js

@@ -2,7 +2,7 @@
 
 const {match} = require('posthtml/lib/api');
 const parseAttrs = require('posthtml-attrs-parser');
-const styleToObject = require('style-to-object');
+const styleToObject = require('style-to-object').default;
 const validAttributes = require('./valid-attributes');
 const keys = require('lodash/keys');
 const union = require('lodash/union');