Merge pull request #31 from cossssmin/feat/parser-options

thewebartisan7 · web-flow · commit f894a9b5e54b · 2023-03-17T09:55:56.000+01:00
Add support for customizing posthtml-parser
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14, 16, 18]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true
diff --git a/readme.md b/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>
diff --git a/src/index.js b/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);
diff --git a/test/test-x-tag.js b/test/test-x-tag.js
@@ -67,3 +67,13 @@ test(`Must process component with namespace's custom path using index file`, asy
 
   t.is(html, expected);
 });
+
+test('Must process self-closing component x-tag', async t => {
+  const actual = `<p>first</p><x-modal /><p>last</p>`;
+  const expected = `<p>first</p><div>Modal</div><p>last</p>`;
+
+  const html = await posthtml([plugin({root: './test/templates', folders: 'components'})])
+    .process(actual, {recognizeSelfClosing: true}).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
