posthtml-component 1.0.0-beta.4 → 1.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthtml-component",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "PostHTML Components Blade-like with slots, attributes as props and custom tag",
   "license": "MIT",
   "repository": "thewebartisan7/posthtml-components",

package/readme.md

@@ -5,7 +5,7 @@
 <div align="center">
   <img width="300" title="PostHTML" src="http://posthtml.github.io/posthtml/logo.svg">
   <h1>PostHTML Components </h1>
-  <p>HTML-friendly syntax component with slots, attributes as locals and more!</p>
+  <p>A PostHTML plugin for create components with HTML-friendly syntax inspired by Laravel Blade. Slots, stack/push, props, custom tag and much more.</p>
 </div>
 
 ## Installation

package/src/index.js

@@ -103,7 +103,7 @@ module.exports = (options = {}) => tree => {
 function processTree(options) {
   const filledSlots = {};
 
-  // let processCounter = 0;
+  let processCounter = 0;
 
   return function (tree) {
     if (options.plugins.length > 0) {
@@ -115,31 +115,21 @@ function processTree(options) {
         currentNode.attrs = {};
       }
 
-      const componentFile = currentNode.attrs[options.attribute] || findPathFromTag(currentNode.tag, options);
+      const componentPath = getComponentPath(currentNode, options);
 
-      if (!componentFile) {
+      if (!componentPath) {
         return currentNode;
       }
 
-      const componentPath = path.isAbsolute(componentFile) && !currentNode.attrs[options.attribute] ?
-        componentFile :
-        path.join(options.root, componentFile);
-
-      // Check if file exist only when not using x-tag
-      if (currentNode.attrs[options.attribute] && !existsSync(componentPath)) {
-        if (options.strict) {
-          throw new Error(`[components] The component was not found in ${componentPath}.`);
-        } else {
-          return currentNode;
-        }
-      }
+      console.log(`${++processCounter}) Processing component ${componentPath}`);
 
-      // console.log(`${++processCounter}) Processing component ${componentPath}`);
+      // log(currentNode, 'currentNode');
 
       let nextNode = parser(readFileSync(componentPath, 'utf8'));
 
       // Set filled slots
       setFilledSlots(currentNode, filledSlots, options);
+      // setFilledSlots(nextNode, filledSlots, options);
 
       // Reset previous locals with passed global and keep aware locals
       options.expressions.locals = {...options.locals, ...options.aware};
@@ -161,6 +151,8 @@ function processTree(options) {
         return currentNode.content || nextNode.content;
       });
 
+      nextNode = processTree(options)(nextNode);
+
       // Process <fill> tags
       processFillContent(nextNode, filledSlots, options);
 
@@ -190,6 +182,26 @@ function processTree(options) {
   };
 }
 
+function getComponentPath(currentNode, options) {
+  const componentFile = currentNode.attrs[options.attribute];
+
+  if (componentFile) {
+    const componentPath = path.join(options.root, componentFile);
+
+    if (!existsSync(componentPath)) {
+      if (options.strict) {
+        throw new Error(`[components] The component was not found in ${componentPath}.`);
+      } else {
+        return false;
+      }
+    }
+
+    return componentPath;
+  }
+
+  return findPathFromTag(currentNode.tag, options);
+}
+
 function applyPluginsToTree(tree, plugins) {
   return plugins.reduce((tree, plugin) => {
     tree = plugin(tree);

package/src/slots.js

@@ -21,7 +21,7 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator}) {
 
     const name = fillNode.tag.split(slotSeparator)[1];
 
-    const locals = omit(fillNode.attrs, [name, 'type', 'append', 'prepend', 'aware']);
+    const locals = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
 
     if (locals) {
       each(locals, (value, key, attrs) => {
@@ -58,10 +58,6 @@ function processFillContent(tree, filledSlots, {fill, slotSeparator}) {
   match.call(tree, {tag: fill}, fillNode => {
     const name = fillNode.tag.split(slotSeparator)[1];
 
-    if (!filledSlots[name]) {
-      filledSlots[name] = {};
-    }
-
     filledSlots[name].tag = fillNode.tag;
     filledSlots[name].attrs = fillNode.attrs;
     filledSlots[name].content = fillNode.content;
@@ -90,17 +86,21 @@ function processSlotContent(tree, filledSlots, {slot, slotSeparator}) {
 
     slotNode.tag = false;
 
-    if (filledSlots[name]?.rendered) {
+    if (!filledSlots[name]) {
+      return slotNode;
+    }
+
+    if (filledSlots[name].rendered) {
       slotNode.content = null;
-    } else if (slotNode.content && filledSlots[name]?.attrs && (typeof filledSlots[name]?.attrs.append !== 'undefined' || typeof filledSlots[name]?.attrs.prepend !== 'undefined')) {
-      slotNode.content = typeof filledSlots[name]?.attrs.append === 'undefined' ? filledSlots[name]?.content.concat(slotNode.content) : slotNode.content.concat(filledSlots[name]?.content);
+    } else if (slotNode.content && filledSlots[name].attrs && (typeof filledSlots[name].attrs.append !== 'undefined' || typeof filledSlots[name].attrs.prepend !== 'undefined')) {
+      slotNode.content = typeof filledSlots[name].attrs.append === 'undefined' ? filledSlots[name].content.concat(slotNode.content) : slotNode.content.concat(filledSlots[name].content);
     } else {
-      slotNode.content = filledSlots[name]?.content;
+      slotNode.content = filledSlots[name].content;
     }
 
     // Set rendered to true so a slot can be output only once,
     //  when not present "aware" attribute
-    if (filledSlots[name] && (!filledSlots[name]?.attrs || typeof filledSlots[name].attrs.aware === 'undefined')) {
+    if (filledSlots[name] && (!filledSlots[name].attrs || typeof filledSlots[name].attrs.aware === 'undefined')) {
       filledSlots[name].rendered = true;
     }
 

package/.c8rc

@@ -1,3 +0,0 @@
-{
-  "reporter": ["lcov", "text"]
-}

package/.clintonrc.json

@@ -1,21 +0,0 @@
-{
-  "ignores": [
-    "test/**",
-    "tmp/**",
-    "src/**",
-    "lib/**",
-    "examples/**",
-    "docs/**",
-    ".idea/**",
-    "*.{html,jpg}",
-    "cache.json"
-  ],
-  "rules": {
-    "pkg-main": "off",
-    "cli": "off",
-    "xo": "off",
-    "ava": "off",
-    "use-travis": "off",
-    "pkg-schema": "off"
-  }
-}

package/.editorconfig

@@ -1,19 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-quote_type = single
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[{package.json,*.yml,*.jade,*.pss,*.css,*.js,*.md,.*,*.ts}]
-indent_size = 2
-
-[{changelog.md,.*}]
-insert_final_newline = false
-
-[*.md]
-trim_trailing_whitespace = false

package/.huskyrc

@@ -1,7 +0,0 @@
-{
-  "hooks": {
-    "pre-push": "npm t",
-    "pre-commit": "clinton && lint-staged",
-    "commit-msg": "commitlint --extends=@commitlint/config-angular -e"
-  }
-}

package/.idea/posthtml-components.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.lintstagedrc

@@ -1,4 +0,0 @@
-{
-  "{src,test}/**/*.js": "xo",
-  "*.md": "xo"
-}

package/.nycrc

@@ -1,4 +0,0 @@
-{
-  "reporter": ["lcov", "text"],
-  "extension": [".js"]
-}

package/changelog.md

@@ -1,13 +0,0 @@
-## 1.0.0-beta.4 (2022-10-23)
-
-* Refactor with underscore.js
-* Optionally set attributes to any nodes not only the first one
-* Added more docs
-
-## 1.0.0-beta.3 (2022-10-21)
-
-* Apply additional plugins to tree
-
-## 1.0.0-beta.2 (2022-10-20)
-
-* First beta release