posthtml-component 2.0.0 → 2.1.0-beta.1

package/README.md

@@ -58,7 +58,7 @@ Init PostHTML:
 ```js
 // index.js
 const posthtml = require('posthtml')
-const components = require('posthtml-components')
+const components = require('posthtml-component')
 const { readFileSync, writeFileSync } = require('node:fs')
 
 posthtml([
@@ -117,37 +117,37 @@ You can clone this repo and run `npm run build` to compile them.
 
 ## Options
 
-| Name                     | Type              | Default                                      | Description                                                                             |
-|--------------------------|-------------------|----------------------------------------------|-----------------------------------------------------------------------------------------|
-| **root**                 | `String`          | `'./'`                                       | Root path for components lookup.                                                        |
-| **folders**              | `String[]`        | `['']`                                       | Array of paths relative to `options.root` or defined namespaces.                        |
-| **tagPrefix**            | `String`          | `'x-'`                                       | Tag prefix.                                                                             |
-| **tag**                  | `String\|Boolean` | `false`                                      | Component tag. Use with `options.attribute`. Boolean only `false`.                      |
-| **attribute**            | `String`          | `'src'`                                      | Component attribute for setting path.                                                   |
-| **namespaces**           | `String[]`        | `[]`                                         | Array of namespace root paths, fallback paths, and custom override paths.               |
-| **namespaceSeparator**   | `String`          | `'::'`                                       | Namespace separator for tag names.                                                      |
-| **fileExtension**        | `String`          | `'html'`                                     | File extension for component files.                                                     |
-| **yield**                | `String`          | `'yield'`                                    | Tag name for injecting main component content.                                          |
-| **slot**                 | `String`          | `'slot'`                                     | Tag name for slots.                                                                     |
-| **fill**                 | `String`          | `'fill'`                                     | Tag name for filling slots.                                                             |
-| **slotSeparator**        | `String`          | `':'`                                        | Name separator for `<slot>` and `<fill>` tags.                                          |
-| **push**                 | `String`          | `'push'`                                     | Tag name for `<push>`.                                                                  |
-| **stack**                | `String`          | `'stack'`                                    | Tag name for `<stack>`.                                                                 |
-| **propsScriptAttribute** | `String`          | `'props'`                                    | Attribute in `<script props>` for retrieving component props.                           |
-| **propsContext**         | `String`          | `'props'`                                    | Name of the object inside the script for processing props.                              |
-| **propsAttribute**       | `String`          | `'props'`                                    | Attribute to define props as JSON.                                                      |
-| **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.                                    |
-| **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.                                                              |
-| **mergeCustomizer**      | `Function`        | `function`                                   | Callback for lodash `mergeWith` to merge `options.expressions.locals` and props.        |
-| **utilities**            | `Object`          | `{merge: _.mergeWith, template: _.template}` | Utility methods passed to `<script props>`. |
-| **elementAttributes**    | `Object`          | `{}`                                         | Object with tag names and function modifiers of `valid-attributes.js`.                  |
-| **safelistAttributes**   | `String[]`        | `['data-*']`                                 | Array of attribute names to add to default valid attributes.                            |
-| **blocklistAttributes**  | `String[]`        | `[]`                                         | Array of attribute names to remove from default valid attributes.                       |
+| Name                     | Type               | Default                                      | Description                                                                      |
+|--------------------------|--------------------|----------------------------------------------|----------------------------------------------------------------------------------|
+| **root**                 | `String`           | `'./'`                                       | Root path where to look for components.                                          |
+| **folders**              | `String[]`         | `['']`                                       | Array of paths relative to `options.root` or defined namespaces.                 |
+| **fileExtension**        | `String\|String[]` | `'html'`                                     | Component file extensions to look for.                                           |
+| **tagPrefix**            | `String`           | `'x-'`                                       | Tag prefix.                                                                      |
+| **tag**                  | `String\|Boolean`  | `false`                                      | Component tag. Use with `options.attribute`. Boolean only `false`.               |
+| **attribute**            | `String`           | `'src'`                                      | Attribute to use for defining path to component file.                            |
+| **namespaces**           | `String[]`         | `[]`                                         | Array of namespace root paths, fallback paths, and custom override paths.        |
+| **namespaceSeparator**   | `String`           | `'::'`                                       | Namespace separator for tag names.                                               |
+| **yield**                | `String`           | `'yield'`                                    | Tag name for injecting main component content.                                   |
+| **slot**                 | `String`           | `'slot'`                                     | Tag name for [slots](#slots)                                                     |
+| **fill**                 | `String`           | `'fill'`                                     | Tag name for filling slots.                                                      |
+| **slotSeparator**        | `String`           | `':'`                                        | Name separator for `<slot>` and `<fill>` tags.                                   |
+| **stack**                | `String`           | `'stack'`                                    | Tag name for [`<stack>`](#stacks).                                               |
+| **push**                 | `String`           | `'push'`                                     | Tag name for `<push>`.                                                           |
+| **propsScriptAttribute** | `String`           | `'props'`                                    | Attribute in `<script props>` for retrieving [component props](#props).          |
+| **propsContext**         | `String`           | `'props'`                                    | Name of the object inside the script for processing props.                       |
+| **propsAttribute**       | `String`           | `'props'`                                    | Attribute name to define props as JSON on a component tag.                       |
+| **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.                             |
+| **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.                                                       |
+| **mergeCustomizer**      | `Function`         | `function`                                   | Callback for lodash `mergeWith` to merge `options.expressions.locals` and props. |
+| **utilities**            | `Object`           | `{merge: _.mergeWith, template: _.template}` | Utility methods passed to `<script props>`.                                      |
+| **elementAttributes**    | `Object`           | `{}`                                         | Object with tag names and function modifiers of `valid-attributes.js`.           |
+| **safelistAttributes**   | `String[]`         | `['data-*']`                                 | Array of attribute names to add to default valid attributes.                     |
+| **blocklistAttributes**  | `String[]`         | `[]`                                         | Array of attribute names to remove from default valid attributes.                |
 
 ## Features
 
@@ -155,9 +155,9 @@ You can clone this repo and run `npm run build` to compile them.
 
 You can use the components in multiple ways, or also a combination of them.
 
-If you to use components as 'includes', you may define a tag and src attribute name.
+If you want to use components as 'includes', you can define tag and `src` attribute names.
 
-Using our previous button component example, we can define the tag and attribute names and then use it in this way:
+Using our previous button component example, we can define the tag and attribute names and then use it like this:
 
 ```hbs
 <!-- src/index.html -->
@@ -174,7 +174,7 @@ Init PostHTML:
 // index.js
 
 require('posthtml')(
-  require('posthtml-components')({ 
+  require('posthtml-component')({ 
     root: './src', 
     tag: 'component', 
     attribute: 'src' 
@@ -183,16 +183,20 @@ require('posthtml')(
   .then(/* ... */)
 ```
 
-If you need more control over tag matching, you can pass an array of matcher or single object via `options.matcher` like this:
+If you need more control over tag matching, you may pass an array of matcher or single object via `options.matcher`:
 
 ```js
 // index.js
 const options = { 
   root: './src', 
-  matcher: [{tag: 'a-tag'}, {tag: 'another-one'}, {tag: new RegExp(`^app-`, 'i')}] 
+  matcher: [
+    {tag: 'a-tag'}, 
+    {tag: 'another-one'}, 
+    {tag: new RegExp(`^app-`, 'i')},
+  ] 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -208,7 +212,7 @@ const options = {
   tagPrefix: 'x-'
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -254,12 +258,13 @@ const options = {
   parserOptions: { decodeEntities: true } 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(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`.
+> [!IMPORTANT]
+> The `parserOptions` that 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
 
@@ -267,7 +272,7 @@ The plugin supports self-closing tags by default, but you need to make sure to e
 
 ```js
 // index.js
-require('posthtml')(require('posthtml-components')({root: './src'}))
+require('posthtml')(require('posthtml-component')({root: './src'}))
   .process('your HTML...', {recognizeSelfClosing: true})
   .then(/* ... */)
 ```
@@ -287,7 +292,7 @@ const options = {
   folders: ['components', 'layouts'] 
 };
 
-require('posthtml')(require('posthtml-components')(options))
+require('posthtml')(require('posthtml-component')(options))
   .process(/* ... */)
   .then(/* ... */)
 ```
@@ -826,7 +831,7 @@ If default configurations for valid attributes are not right for you, you may co
 const { readFileSync, writeFileSync } = require('fs')
 
 const posthtml = require('posthtml')
-const components = require('posthtml-components')
+const components = require('posthtml-component')
 
 const options = {
   root: './src',  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthtml-component",
-  "version": "2.0.0",
+  "version": "2.1.0-beta.1",
   "description": "Laravel Blade-inspired components for PostHTML with slots, attributes as props, custom tags and more.",
   "license": "MIT",
   "repository": "posthtml/posthtml-components",
@@ -39,7 +39,7 @@
     "style-to-object": "^1.0.6"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.4",
     "@vitest/coverage-v8": "^2.0.4",
     "conventional-changelog-cli": "^5.0.0",
     "highlight.js": "^11.6.0",

package/src/find-path.js

@@ -13,16 +13,20 @@ const folderSeparator = '.';
  * @return {String|boolean} Full path or boolean false
  */
 module.exports = (tag, options) => {
-  const fileNameFromTag = tag
-    .replace(options.tagPrefix, '')
-    .split(folderSeparator)
-    .join(path.sep)
-    .concat(folderSeparator, options.fileExtension);
+  const extensions = Array.isArray(options.fileExtension) ? options.fileExtension : [options.fileExtension];
+
+  const fileNamesFromTag = extensions.map(ext =>
+    tag
+      .replace(options.tagPrefix, '')
+      .split(folderSeparator)
+      .join(path.sep)
+      .concat(folderSeparator, ext)
+  )
 
   try {
-    return tag.includes(options.namespaceSeparator) ?
-      searchInNamespaces(tag, fileNameFromTag.split(options.namespaceSeparator), options) :
-      searchInFolders(tag, fileNameFromTag, options);
+    return tag.includes(options.namespaceSeparator)
+      ? searchInNamespaces(tag, fileNamesFromTag, options)
+      : searchInFolders(tag, fileNamesFromTag, options);
   } catch (error) {
     if (options.strict) {
       throw new Error(error.message);
@@ -36,15 +40,17 @@ module.exports = (tag, options) => {
  * Search component file in root
  *
  * @param  {String} tag [tag name]
- * @param  {String} fileNameFromTag [filename converted from tag name]
+ * @param  {Array} fileNamesFromTag [filename converted from tag name]
  * @param  {Object} options [posthtml options]
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function searchInFolders(tag, fileNameFromTag, options) {
-  const componentPath = search(options.root, options.folders, fileNameFromTag, options.fileExtension);
+function searchInFolders(tag, fileNamesFromTag, options) {
+  const componentPath = search(options.root, options.folders, fileNamesFromTag, options.fileExtension);
 
   if (!componentPath) {
-    throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined root paths (${options.folders.join(', ')})`);
+    throw new Error(
+      `[components] <${tag}> could not find ${fileNamesFromTag} in the defined root paths (${options.folders.join(', ')})`
+    );
   }
 
   return componentPath;
@@ -54,65 +60,89 @@ function searchInFolders(tag, fileNameFromTag, options) {
  * Search component file within all defined namespaces
  *
  * @param  {String} tag [tag name with namespace]
- * @param  {String} namespace [tag's namespace]
- * @param  {String} fileNameFromTag [filename converted from tag name]
+ * @param  {Array} namespaceAndFileNames Array of [namespace]::[filename]
  * @param  {Object} options [posthtml options]
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function searchInNamespaces(tag, [namespace, fileNameFromTag], options) {
-  const namespaceOption = options.namespaces.find(n => n.name === namespace.replace(options.tagPrefix, ''));
+function searchInNamespaces(tag, namespaceAndFileNames, options) {
+  let result = '';
 
-  if (!namespaceOption) {
-    throw new Error(`[components] Unknown component namespace: ${namespace}.`);
-  }
+  for (const namespaceAndFileName of namespaceAndFileNames) {
+    const [namespace, fileNameFromTag] = namespaceAndFileName.split('::');
 
-  let componentPath;
+    const namespaceOption = options.namespaces.find(n => n.name === namespace.replace(options.tagPrefix, ''));
 
-  // 1) Check in custom root
-  if (namespaceOption.custom) {
-    componentPath = search(namespaceOption.custom, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    if (!namespaceOption) {
+      throw new Error(`[components] Unknown component namespace: ${namespace}.`);
+    }
 
-  // 2) Check in base root
-  if (!componentPath) {
-    componentPath = search(namespaceOption.root, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    let componentPath;
 
-  // 3) Check in fallback root
-  if (!componentPath && namespaceOption.fallback) {
-    componentPath = search(namespaceOption.fallback, options.folders, fileNameFromTag, options.fileExtension);
-  }
+    // 1) Check in custom root
+    if (namespaceOption.custom) {
+      componentPath = search(namespaceOption.custom, options.folders, fileNameFromTag, options.fileExtension);
+    }
+
+    // 2) Check in base root
+    if (!componentPath) {
+      componentPath = search(namespaceOption.root, options.folders, fileNameFromTag, options.fileExtension);
+    }
+
+    // 3) Check in fallback root
+    if (!componentPath && namespaceOption.fallback) {
+      componentPath = search(namespaceOption.fallback, options.folders, fileNameFromTag, options.fileExtension);
+    }
 
-  if (!componentPath && options.strict) {
-    throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined namespace base path ${namespaceOption.root}`);
+    if (!componentPath) {
+      throw new Error(`[components] <${tag}> could not find ${fileNameFromTag} in the defined namespace paths.`);
+    }
+
+    result = componentPath;
   }
 
-  return componentPath;
+  return result;
 }
 
 /**
- * Main search component file function
+ * Main component file search function
  *
- * @param  {String} root Base root or namespace root from options
- * @param  {Array} folders Folders from options
- * @param  {String} fileName Filename converted from tag name
- * @param  {String} extension File extension from options
+ * @param  {String} root Base root or namespace root from `options`
+ * @param  {Array} folders Folders to search in from `options`
+ * @param  {Array} fileNames Filenames converted from tag name
+ * @param  {Array} extensions File extension(s) from `options`
  * @return {String|boolean} [custom tag root where the module is found]
  */
-function search(root, folders, fileName, extension) {
+function search(root, folders, fileNames, extensions) {
   let componentPath;
+  let componentFound = false;
 
-  let componentFound = folders.some(folder => {
-    componentPath = path.join(path.resolve(root, folder), fileName);
-    return existsSync(componentPath);
-  });
+  fileNames = Array.isArray(fileNames) ? fileNames : [fileNames];
 
-  if (!componentFound) {
-    fileName = fileName.replace(`.${extension}`, `${path.sep}index.${extension}`);
+  for (const fileName of fileNames) {
     componentFound = folders.some(folder => {
       componentPath = path.join(path.resolve(root, folder), fileName);
+
       return existsSync(componentPath);
     });
+
+    if (componentFound) break;
+  }
+
+  if (!componentFound) {
+    for (const extension of extensions) {
+      for (const fileName of fileNames) {
+        const newFileName = fileName.replace(`.${extension}`, `${path.sep}index.${extension}`);
+
+        componentFound = folders.some(folder => {
+          componentPath = path.join(path.resolve(root, folder), newFileName);
+          return existsSync(componentPath);
+        });
+
+        if (componentFound) break;
+      }
+
+      if (componentFound) break;
+    }
   }
 
   return componentFound ? componentPath : false;

package/src/index.js

@@ -74,17 +74,26 @@ module.exports = (options = {}) => tree => {
     uniqueId,
     isEnabled: prop => prop === true || prop === ''
   };
-  // Additional element attributes, in case already exist in valid-attributes.js it will replace all attributes
-  // It should be an object with key as tag name and as value a function modifier which receive
-  // the default attributes and return an array of attributes. Example:
-  // { TAG: (attributes) => { attributes[] = 'attribute-name'; return attributes; } }
+
+  /**
+   * Additional element attributes. If they already exist in valid-attributes.js,
+   * it will replace all attributes. It should be an object with tag name as
+   * the key and a function modifier as the value, which will receive the
+   * default attributes and return an array of attributes.
+   *
+   * Example:
+   * { TAG: (attributes) => { attributes[] = 'attribute-name'; return attributes; } }
+   */
   options.elementAttributes = isPlainObject(options.elementAttributes) ? options.elementAttributes : {};
   options.safelistAttributes = Array.isArray(options.safelistAttributes) ? options.safelistAttributes : [];
   options.blocklistAttributes = Array.isArray(options.blocklistAttributes) ? options.blocklistAttributes : [];
 
-  // Merge customizer callback passed to lodash mergeWith
-  //  for merge attribute `props` and all attributes starting with `merge:`
-  //  @see https://lodash.com/docs/4.17.15#mergeWith
+  /**
+   * Merge customizer callback passed to `lodash.mergeWith` for merging
+   * attribute `props` and all attributes starting with `merge:`.
+   *
+   * @see {@link https://lodash.com/docs/4.17.15#mergeWith|Lodash}
+   */
   options.mergeCustomizer = options.mergeCustomizer || ((objectValue, sourceValue) => {
     if (Array.isArray(objectValue)) {
       return objectValue.concat(sourceValue);
@@ -105,6 +114,7 @@ module.exports = (options = {}) => tree => {
 
   if (!Array.isArray(options.matcher)) {
     options.matcher = [];
+
     if (options.tagPrefix) {
       options.matcher.push({tag: options.tagPrefix});
     }
@@ -116,8 +126,10 @@ module.exports = (options = {}) => tree => {
 
   options.folders = Array.isArray(options.folders) ? options.folders : [options.folders];
   options.namespaces = Array.isArray(options.namespaces) ? options.namespaces : [options.namespaces];
+
   options.namespaces.forEach((namespace, index) => {
     options.namespaces[index].root = path.resolve(namespace.root);
+
     if (namespace.fallback) {
       options.namespaces[index].fallback = path.resolve(namespace.fallback);
     }
@@ -148,14 +160,13 @@ module.exports = (options = {}) => tree => {
 };
 /* eslint-enable complexity */
 
-// Used for reset aware props
+// Used to reset aware props
 let processCounter = 0;
 
 /**
  * @param  {Object} options Plugin options
  * @return {Object} PostHTML tree
  */
-
 function processTree(options) {
   const filledSlots = {};
 
@@ -227,15 +238,18 @@ function processTree(options) {
 
       processAttributes(currentNode, attributes, props, options, aware);
 
-      // Remove attributes when value is 'null' or 'undefined'
-      //  so we can conditionally add an attribute by setting value to 'undefined' or 'null'.
+      /**
+       * Remove attributes when value is 'null' or 'undefined' so we can
+       * conditionally add an attribute by setting the value to
+       * 'undefined' or 'null'.
+       */
       walk.call(currentNode, node => {
         if (node && node.attrs) {
-          each(node.attrs, (value, key) => {
-            if (['undefined', 'null'].includes(value)) {
+          for (const key in node.attrs) {
+            if (node.attrs[key] === 'undefined' || node.attrs[key] === 'null') {
               delete node.attrs[key];
             }
-          });
+          }
         }
 
         return node;

package/src/process-attributes.js

@@ -8,7 +8,6 @@ const keys = require('lodash/keys');
 const union = require('lodash/union');
 const pick = require('lodash/pick');
 const difference = require('lodash/difference');
-const each = require('lodash/each');
 const has = require('lodash/has');
 const extend = require('lodash/extend');
 const isString = require('lodash/isString');
@@ -52,15 +51,16 @@ module.exports = (currentNode, attributes, props, options, aware) => {
 
   // Merge or override elementAttributes from options provided
   if (!isEmpty(options.elementAttributes)) {
-    each(options.elementAttributes, (modifier, tagName) => {
+    for (const tagName in options.elementAttributes) {
+      const modifier = options.elementAttributes[tagName];
       if (typeof modifier === 'function' && isString(tagName)) {
-        tagName = tagName.toUpperCase();
-        const attributes = modifier(validAttributes.elementAttributes[tagName]);
+        const upperTagName = tagName.toUpperCase();
+        const attributes = modifier(validAttributes.elementAttributes[upperTagName]);
         if (Array.isArray(attributes)) {
-          validAttributes.elementAttributes[tagName] = attributes;
+          validAttributes.elementAttributes[upperTagName] = attributes;
         }
       }
-    });
+    }
   }
 
   // Attributes to be excluded
@@ -76,15 +76,18 @@ module.exports = (currentNode, attributes, props, options, aware) => {
   const mainNodeAttributes = pick(attributes, validElementAttributes);
 
   // Get additional specified attributes
-  each(attributes, (value, attr) => {
-    each(validAttributes.safelistAttributes, additionalAttr => {
-      if (additionalAttr === attr || (additionalAttr.endsWith('*') && attr.startsWith(additionalAttr.replace('*', '')))) {
-        mainNodeAttributes[attr] = value;
+  for (const attr in attributes) {
+    for (const additionalAttr of validAttributes.safelistAttributes) {
+      if (
+        additionalAttr === attr
+        || (additionalAttr.endsWith('*') && attr.startsWith(additionalAttr.replace('*', '')))
+      ) {
+        mainNodeAttributes[attr] = attributes[attr];
       }
-    });
-  });
+    }
+  }
 
-  each(mainNodeAttributes, (value, key) => {
+  for (const key in mainNodeAttributes) {
     if (['class', 'style'].includes(key)) {
       if (!has(nodeAttrs, key)) {
         nodeAttrs[key] = key === 'class' ? [] : {};
@@ -100,16 +103,16 @@ module.exports = (currentNode, attributes, props, options, aware) => {
     }
 
     delete attributes[key];
-  });
+  }
 
   // The plugin posthtml-attrs-parser compose() method expects a string,
   //  but since we are JSON parsing, values like "-1" become number -1.
   //  So below we convert non string values to string.
-  each(nodeAttrs, (value, key) => {
+  for (const key in nodeAttrs) {
     if (key !== 'compose' && !isObject(nodeAttrs[key]) && !isString(nodeAttrs[key])) {
       nodeAttrs[key] = nodeAttrs[key].toString();
     }
-  });
+  }
 
   mainNode.attrs = nodeAttrs.compose();
 };

package/src/process-props.js

@@ -1,10 +1,9 @@
 'use strict';
 
-const processScript = require('./process-script');
 const pick = require('lodash/pick');
-const each = require('lodash/each');
 const assign = require('lodash/assign');
 const mergeWith = require('lodash/mergeWith');
+const processScript = require('./process-script');
 
 const attributeTypes = ['aware', 'merge'];
 
@@ -23,31 +22,31 @@ module.exports = (currentNode, nextNode, filledSlots, options, componentPath, pr
   let attributes = {...currentNode.attrs};
 
   const attributesByTypeName = {};
-  each(attributeTypes, type => {
+  for (const type of attributeTypes) {
     attributesByTypeName[type] = [];
-  });
+  }
 
-  each(attributes, (value, key, attrs) => {
+  for (const key in attributes) {
     let newKey = key;
-    each(attributeTypes, type => {
+    for (const type of attributeTypes) {
       if (key.startsWith(`${type}:`)) {
         newKey = newKey.replace(`${type}:`, '');
         attributesByTypeName[type].push(newKey);
       }
-    });
+    }
 
     if (newKey !== key) {
-      attrs[newKey] = value;
-      delete attrs[key];
+      attributes[newKey] = attributes[key];
+      delete attributes[key];
     }
-  });
+  }
 
   // Parse JSON attributes
-  each(attributes, (value, key, attrs) => {
+  for (const key in attributes) {
     try {
-      attrs[key] = JSON.parse(value);
+      attributes[key] = JSON.parse(attributes[key]);
     } catch {}
-  });
+  }
 
   // Merge or extend attribute props
   if (attributes[options.propsAttribute]) {
@@ -65,7 +64,17 @@ module.exports = (currentNode, nextNode, filledSlots, options, componentPath, pr
   attributes = mergeWith({}, options.expressions.locals, attributes, options.mergeCustomizer);
 
   // Process props from <script props>
-  const {props} = processScript(nextNode, {props: {...attributes}, $slots: filledSlots, propsScriptAttribute: options.propsScriptAttribute, propsContext: options.propsContext, utilities: options.utilities}, componentPath.replace(`.${options.fileExtension}`, '.js'));
+  const {props} = processScript(
+    nextNode,
+    {
+      props: {...attributes},
+      $slots: filledSlots,
+      propsScriptAttribute: options.propsScriptAttribute,
+      propsContext: options.propsContext,
+      utilities: options.utilities
+    },
+    componentPath.replace(`.${options.fileExtension}`, '.js')
+  );
 
   if (props) {
     assign(attributes, props);

package/src/process-slots.js

@@ -2,7 +2,6 @@
 
 const {match} = require('posthtml/lib/api');
 const {render} = require('posthtml-render');
-const each = require('lodash/each');
 const omit = require('lodash/omit');
 
 /**
@@ -25,11 +24,13 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator, propsSlo
     const props = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
 
     if (props) {
-      each(props, (value, key, attrs) => {
-        try {
-          attrs[key] = JSON.parse(value);
-        } catch {}
-      });
+      for (const key in props) {
+        if (props.hasOwnProperty(key)) {
+          try {
+        props[key] = JSON.parse(props[key]);
+          } catch {}
+        }
+      }
     }
 
     filledSlots[name] = {