posthtml-component 2.2.2 → 2.3.0

package/README.md

@@ -55,7 +55,7 @@ If you are familiar with Blade, React, Vue or similar, you will find the syntax
 | **propsSlot**            | `String`           | `'props'`                                    | Used to retrieve props passed to slot via `$slots.slotName.props`.               |
 | **parserOptions**        | `Object`           | `{recognizeSelfClosing: true}`               | Pass options to `posthtml-parser`.                                               |
 | **expressions**          | `Object`           | `{}`                                         | Pass options to `posthtml-expressions`.                                          |
-| **plugins**              | `Array`            | `[]`                                         | PostHTML plugins to apply to every parsed component.                             |
+| **plugins**              | `Array\|Object`    | `[]`                                         | PostHTML plugins to [apply](#plugins) to every parsed component.                 |
 | **matcher**              | `Object`           | `[{tag: options.tagPrefix}]`                 | Array of objects used to match tags.                                             |
 | **attrsParserRules**     | `Object`           | `{}`                                         | Additional rules for attributes parser plugin.                                   |
 | **strict**               | `Boolean`          | `true`                                       | Toggle exception throwing.                                                       |
@@ -842,6 +842,30 @@ Result:
 
 You can add custom rules to define how attributes are parsed - we use [posthtml-attrs-parser](https://github.com/posthtml/posthtml-attrs-parser) to handle them.
 
+
+### Plugins
+
+Use the `plugins` option to apply your own PostHTML plugins to the components.
+
+This can be an array of plugins, or an object with `before` and `after` properties to apply plugins before or after the `posthtml-expressions` plugin runs.
+
+```js
+// As array
+const options = { 
+  plugins: [/* ... */]
+};
+
+// As object with `before` and `after`
+const options = { 
+  plugins: {
+    before: [/* ... */],
+    after: [/* ... */],
+  } 
+};
+```
+
+When using `plugins` as an array, the plugins will be applied after `posthtml-expressions`.
+
 ### Advanced attributes configurations
 
 If default configurations for valid attributes are not right for you, you may configure them as explained below.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "posthtml-component",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "Laravel Blade-inspired components for PostHTML with slots, attributes as props, custom tags and more.",
   "license": "MIT",
   "repository": "posthtml/posthtml-components",
   "author": "Damir Grgic <damir@tuta.io> (https://github.com/thewebartisan7)",
-  "main": "src",
+  "main": "src/index.js",
   "types": "src/index.d.ts",
   "files": [
     "src"
@@ -39,8 +39,8 @@
     "style-to-object": "^1.0.6"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.2",
-    "@vitest/coverage-v8": "^3.0.4",
+    "@biomejs/biome": "2.3.11",
+    "@vitest/coverage-v8": "3.2.4",
     "conventional-changelog-cli": "^5.0.0",
     "highlight.js": "^11.6.0",
     "markdown-it-anchor": "^9.0.1",
@@ -49,6 +49,6 @@
     "posthtml-beautify": "^0.7.0",
     "posthtml-include": "^2.0.1",
     "posthtml-markdownit": "^3.1.0",
-    "vitest": "^3.0.4"
+    "vitest": "3.2.4"
   }
 }

package/src/index.d.ts

@@ -154,7 +154,7 @@ export type PostHTMLComponents = {
    *
    * @default []
    */
-  plugins?: Array<() => void>;
+  plugins?: Array<() => void>|Record<'before','after', Array<() => void>>;
 
   /**
    * Array of objects used to match tags.

package/src/index.js

@@ -140,10 +140,21 @@ module.exports = (options = {}) => tree => {
   options.props = {...options.expressions.locals};
   options.aware = {};
 
+  if (Array.isArray(options.plugins)) {
+    options.plugins = {
+      before: [],
+      after: options.plugins
+    };
+  }
+
   const pushedContent = {};
 
   log('Start of processing..', 'init', 'success');
 
+  if (options.plugins.before.length > 0) {
+      tree = applyPluginsToTree(tree, options.plugins.before);
+  }
+
   return processStacks(
     processPushes(
       processTree(options)(
@@ -169,8 +180,8 @@ function processTree(options) {
   return (tree, messages) => {
     log(`Processing tree number ${processCounter}..`, 'processTree');
 
-    if (options.plugins.length > 0) {
-      tree = applyPluginsToTree(tree, options.plugins);
+    if (options.plugins.after.length > 0) {
+      tree = applyPluginsToTree(tree, options.plugins.after);
     }
 
     match.call(tree, options.matcher, currentNode => {
@@ -217,10 +228,15 @@ function processTree(options) {
       options.expressions.locals = attributes;
       options.expressions.locals.$slots = filledSlots;
       // const plugins = [...options.plugins, expressions(options.expressions)];
+
+      if (options.plugins.before.length > 0) {
+        nextNode = applyPluginsToTree(nextNode, options.plugins.before);
+      }
+
       nextNode = expressions(options.expressions)(nextNode);
 
-      if (options.plugins.length > 0) {
-        nextNode = applyPluginsToTree(nextNode, options.plugins);
+      if (options.plugins.after.length > 0) {
+        nextNode = applyPluginsToTree(nextNode, options.plugins.after);
       }
 
       // Process <yield> tag