posthtml-component 1.0.0-beta.1

package/src/attributes.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const parseAttrs = require('posthtml-attrs-parser');
+const styleToObject = require('style-to-object');
+
+/**
+ * Map component attributes that it's not defined as locals to first element of node
+ *
+ * @param {Object} currentNode
+ * @param {Object} attributes
+ * @param {Object} locals
+ * @param {Object} options
+ * @return {void}
+ */
+module.exports = (currentNode, attributes, locals, options) => {
+  // Find by attribute 'attributes' ??
+  const index = currentNode.content.findIndex(content => typeof content === 'object');
+
+  if (index === -1) {
+    return;
+  }
+
+  const nodeAttrs = parseAttrs(currentNode.content[index].attrs, options.attrsParserRules);
+
+  Object.keys(attributes).forEach(attr => {
+    if (typeof locals[attr] === 'undefined' && !attr.startsWith('$') && attr !== options.attribute && !Object.keys(options.aware).includes(attr) && !Object.keys(options.locals).includes(attr)) {
+      if (['class'].includes(attr)) {
+        if (typeof nodeAttrs.class === 'undefined') {
+          nodeAttrs.class = [];
+        }
+
+        nodeAttrs.class.push(attributes.class);
+        delete attributes.class;
+      } else if (['override:class'].includes(attr)) {
+        nodeAttrs.class = attributes['override:class'];
+        delete attributes['override:class'];
+      } else if (['style'].includes(attr)) {
+        if (typeof nodeAttrs.style === 'undefined') {
+          nodeAttrs.style = {};
+        }
+
+        nodeAttrs.style = Object.assign(nodeAttrs.style, styleToObject(attributes.style));
+        delete attributes.style;
+      } else if (['override:style'].includes(attr)) {
+        nodeAttrs.style = attributes['override:style'];
+        delete attributes['override:style'];
+      } else {
+        nodeAttrs[attr] = attributes[attr];
+        delete attributes[attr];
+      }
+    }
+  });
+
+  currentNode.content[index].attrs = nodeAttrs.compose();
+};

package/src/find-path.js

@@ -0,0 +1,119 @@
+'use strict';
+
+const path = require('path');
+const {existsSync} = require('fs');
+
+const folderSeparator = '.';
+
+/**
+ * Find component path from tag name
+ *
+ * @param  {String} tag Tag name
+ * @param  {Object} options Plugin options
+ * @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);
+
+  try {
+    return tag.includes(options.namespaceSeparator) ?
+      searchInNamespaces(tag, fileNameFromTag.split(options.namespaceSeparator), options) :
+      searchInFolders(tag, fileNameFromTag, options);
+  } catch (error) {
+    if (options.strict) {
+      throw new Error(error.message);
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Search component file in root
+ *
+ * @param  {String} tag [tag name]
+ * @param  {String} fileNameFromTag [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);
+
+  if (!componentPath) {
+    throw new Error(`[components] For the tag ${tag} was not found any template in defined root path ${options.folders.join(', ')}`);
+  }
+
+  return componentPath;
+}
+
+/**
+ * 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  {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, ''));
+
+  if (!namespaceOption) {
+    throw new Error(`[components] Unknown component namespace ${namespace}.`);
+  }
+
+  let componentPath;
+
+  // 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] For the tag ${tag} was not found any template in the defined namespace's base path ${namespaceOption.root}.`);
+  }
+
+  return componentPath;
+}
+
+/**
+ * Main search component file 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
+ * @return {String|boolean} [custom tag root where the module is found]
+ */
+function search(root, folders, fileName, extension) {
+  let componentPath;
+
+  let componentFound = folders.some(folder => {
+    componentPath = path.join(path.resolve(root, folder), fileName);
+    return existsSync(componentPath);
+  });
+
+  if (!componentFound) {
+    fileName = fileName.replace(`.${extension}`, `${path.sep}index.${extension}`);
+    componentFound = folders.some(folder => {
+      componentPath = path.join(path.resolve(root, folder), fileName);
+      return existsSync(componentPath);
+    });
+  }
+
+  return componentFound ? componentPath : false;
+}

package/src/index.js

@@ -0,0 +1,185 @@
+'use strict';
+
+const {readFileSync} = require('fs');
+const path = require('path');
+// const {inspect} = require('util');
+const {parser} = require('posthtml-parser');
+const {match} = require('posthtml/lib/api');
+const expressions = require('posthtml-expressions');
+const findPathFromTag = require('./find-path');
+const processLocals = require('./locals');
+const processAttributes = require('./attributes');
+const {processPushes, processStacks} = require('./stacks');
+const {setFilledSlots, processSlotContent, processFillContent} = require('./slots');
+
+// const debug = true;
+//
+// const log = (object, what, method) => {
+//   if (debug === true || method === debug) {
+//     console.log(what, inspect(object, false, null, true));
+//   }
+// };
+
+/* eslint-disable complexity */
+module.exports = (options = {}) => tree => {
+  options.root = path.resolve(options.root || './');
+  options.folders = options.folders || [''];
+  options.tagPrefix = options.tagPrefix || 'x-';
+  options.tag = options.tag || false;
+  options.attribute = options.attribute || 'src';
+  options.namespaces = options.namespaces || [];
+  options.namespaceSeparator = options.namespaceSeparator || '::';
+  options.fileExtension = options.fileExtension || 'html';
+  options.yield = options.yield || 'yield';
+  options.slot = options.slot || 'slot';
+  options.fill = options.fill || 'fill';
+  options.push = options.push || 'push';
+  options.stack = options.stack || 'stack';
+  options.localsAttr = options.localsAttr || 'props';
+  options.expressions = options.expressions || {};
+  options.plugins = options.plugins || [];
+  options.attrsParserRules = options.attrsParserRules || {};
+  options.strict = typeof options.strict === 'undefined' ? true : options.strict;
+
+  if (!(options.slot instanceof RegExp)) {
+    options.slot = new RegExp(`^${options.slot}:`, 'i');
+  }
+
+  if (!(options.fill instanceof RegExp)) {
+    options.fill = new RegExp(`^${options.fill}:`, 'i');
+  }
+
+  if (!(options.tagPrefix instanceof RegExp)) {
+    options.tagPrefix = new RegExp(`^${options.tagPrefix}`, 'i');
+  }
+
+  if (!Array.isArray(options.matcher)) {
+    options.matcher = [];
+    if (options.tagPrefix) {
+      options.matcher.push({tag: options.tagPrefix});
+    }
+
+    if (options.tag) {
+      options.matcher.push({tag: options.tag});
+    }
+  }
+
+  options.roots = Array.isArray(options.folders) ? options.folders : [options.folders];
+  // options.roots.forEach((root, index) => {
+  //   options.roots[index] = path.resolve(options.root, root);
+  // });
+  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);
+    }
+
+    if (namespace.custom) {
+      options.namespaces[index].custom = path.resolve(namespace.custom);
+    }
+  });
+
+  options.locals = {...options.expressions.locals};
+  options.aware = {};
+
+  const pushedContent = {};
+
+  return processStacks(
+    processPushes(
+      processTree(options)(
+        expressions(options.expressions)(tree)
+      ),
+      pushedContent,
+      options.push
+    ),
+    pushedContent,
+    options.stack
+  );
+};
+/* eslint-enable complexity */
+
+/**
+ * @param  {Object} options Plugin options
+ * @return {Object} PostHTML tree
+ */
+function processTree(options) {
+  const filledSlots = {};
+
+  let processCounter = 0;
+
+  return function (tree) {
+    match.call(tree, options.matcher, currentNode => {
+      if (!currentNode.attrs) {
+        currentNode.attrs = {};
+      }
+
+      if (!currentNode.attrs[options.attribute]) {
+        console.log(currentNode.tag);
+      }
+
+      const componentFile = currentNode.attrs[options.attribute] || findPathFromTag(currentNode.tag, options);
+
+      if (!componentFile) {
+        return currentNode;
+      }
+
+      const componentPath = path.isAbsolute(componentFile) && componentFile !== currentNode.attrs[options.attribute] ?
+        componentFile :
+        path.join(options.root, componentFile);
+
+      if (!componentPath) {
+        return currentNode;
+      }
+
+      console.log(`${++processCounter}) Processing component ${componentPath}`);
+
+      let nextNode = parser(readFileSync(componentPath, 'utf8'));
+
+      // Set filled slots
+      setFilledSlots(currentNode, filledSlots, options);
+
+      // Reset previous locals with passed global and keep aware locals
+      options.expressions.locals = {...options.locals, ...options.aware};
+
+      const {attributes, locals} = processLocals(currentNode, nextNode, filledSlots, options);
+
+      options.expressions.locals = attributes;
+      options.expressions.locals.$slots = filledSlots;
+      // const plugins = [...options.plugins, expressions(options.expressions)];
+      nextNode = expressions(options.expressions)(nextNode);
+
+      // Process <yield> tag
+      const content = match.call(nextNode, {tag: options.yield}, nextNode => {
+        // Fill <yield> with current node content or default <yield> content or empty
+        return currentNode.content || nextNode.content || '';
+      });
+
+      // Process <fill> tags
+      processFillContent(nextNode, filledSlots, options);
+
+      // Process <slot> tags
+      processSlotContent(nextNode, filledSlots, options);
+
+      // Remove component tag and replace content with <yield>
+      currentNode.tag = false;
+      currentNode.content = content;
+
+      processAttributes(currentNode, attributes, locals, options);
+
+      // log(currentNode, 'currentNode', 'currentNode')
+      // currentNode.attrs.counter = processCounter;
+      // currentNode.attrs.data = JSON.stringify({ attributes, locals });
+
+      // messages.push({
+      //   type: 'dependency',
+      //   file: componentPath,
+      //   from: options.root
+      // });
+
+      return currentNode;
+    });
+
+    return tree;
+  };
+}

package/src/locals.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const merge = require('deepmerge');
+const scriptDataLocals = require('posthtml-expressions/lib/locals');
+
+/**
+ * Parse locals from attributes, globals and via script
+ *
+ * @param {Object} currentNode - PostHTML tree
+ * @param {Array} nextNode - PostHTML tree
+ * @param {Object} slotContent - Slot locals
+ * @param {Object} options - Plugin options
+ * @return {Object} - Attribute locals and script locals
+ */
+module.exports = (currentNode, nextNode, slotContent, options) => {
+  let attributes = {...currentNode.attrs};
+
+  const merged = [];
+  const computed = [];
+  const aware = [];
+
+  Object.keys(attributes).forEach(attributeName => {
+    const newAttributeName = attributeName
+      .replace('merge:', '')
+      .replace('computed:', '')
+      .replace('aware:', '');
+
+    switch (true) {
+      case attributeName.startsWith('merge:'):
+        attributes[newAttributeName] = attributes[attributeName];
+        delete attributes[attributeName];
+        merged.push(newAttributeName);
+        break;
+
+      case attributeName.startsWith('computed:'):
+        attributes[newAttributeName] = attributes[attributeName];
+        delete attributes[attributeName];
+        computed.push(newAttributeName);
+        break;
+
+      case attributeName.startsWith('aware:'):
+        attributes[newAttributeName] = attributes[attributeName];
+        delete attributes[attributeName];
+        aware.push(newAttributeName);
+        break;
+
+      default: break;
+    }
+  });
+
+  // Parse JSON attributes
+  Object.keys(attributes).forEach(attributeName => {
+    try {
+      const parsed = JSON.parse(attributes[attributeName]);
+      if (attributeName === 'locals') {
+        if (merged.includes(attributeName)) {
+          attributes = merge(attributes, parsed);
+          merged.splice(merged.indexOf('locals'), 1);
+        } else {
+          // Override with merge see https://www.npmjs.com/package/deepmerge#arraymerge-example-overwrite-target-array
+          Object.assign(attributes, parsed);
+        }
+      } else {
+        attributes[attributeName] = parsed;
+      }
+    } catch {}
+  });
+
+  delete attributes.locals;
+
+  // Merge with global
+  attributes = merge(options.expressions.locals, attributes);
+
+  // Retrieve default locals from <script props> and merge with attributes
+  const {locals} = scriptDataLocals(nextNode, {localsAttr: options.localsAttr, removeScriptLocals: true, locals: {...attributes, $slots: slotContent}});
+
+  // Merge default locals and attributes or overrides props with attributes
+  if (locals) {
+    if (merged.length > 0) {
+      /** @var {Object} mergedAttributes */
+      const mergedAttributes = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => merged.includes(attribute)));
+      /** @var {Object} mergedAttributes */
+      const mergedLocals = Object.fromEntries(Object.entries(locals).filter(([local]) => merged.includes(local)));
+
+      if (Object.keys(mergedLocals).length > 0) {
+        merged.forEach(attributeName => {
+          attributes[attributeName] = merge(mergedLocals[attributeName], mergedAttributes[attributeName]);
+        });
+      }
+    }
+
+    // Override attributes with props when is computed or attribute is not defined
+    Object.keys(locals).forEach(attributeName => {
+      if (computed.includes(attributeName) || typeof attributes[attributeName] === 'undefined') {
+        attributes[attributeName] = locals[attributeName];
+      }
+    });
+  }
+
+  if (aware.length > 0) {
+    options.aware = Object.fromEntries(Object.entries(attributes).filter(([attributeName]) => aware.includes(attributeName)));
+  }
+
+  return {attributes, locals};
+};

package/src/slots.js

@@ -0,0 +1,112 @@
+'use strict';
+
+const {match} = require('posthtml/lib/api');
+const {render} = require('posthtml-render');
+
+/**
+ * Set filled slots
+ *
+ * @param  {Object} currentNode PostHTML tree
+ * @param  {Object} filledSlots
+ * @param  {Object} options Plugin options
+ * @return {void}
+ */
+function setFilledSlots(currentNode, filledSlots, {fill}) {
+  match.call(currentNode, {tag: fill}, fillNode => {
+    if (!fillNode.attrs) {
+      fillNode.attrs = {};
+    }
+
+    const name = fillNode.tag.split(':')[1];
+
+    /** @var {Object} locals - NOT YET TESTED */
+    const locals = Object.fromEntries(Object.entries(fillNode.attrs).filter(([attributeName]) => ![name, 'type'].includes(attributeName)));
+
+    if (locals) {
+      Object.keys(locals).forEach(local => {
+        try {
+          locals[local] = JSON.parse(locals[local]);
+        } catch {}
+      });
+    }
+
+    filledSlots[name] = {
+      filled: true,
+      rendered: false,
+      tag: fillNode.tag,
+      attrs: fillNode.attrs,
+      content: fillNode.content,
+      source: render(fillNode.content),
+      locals
+    };
+
+    return fillNode;
+  });
+}
+
+/**
+ * Process <fill> tag
+ *
+ * @param  {Object} tree PostHTML tree
+ * @param  {Object} filledSlots Filled slots content
+ * @param  {Object} options Plugin options
+ * @return {void}
+ */
+function processFillContent(tree, filledSlots, {fill}) {
+  match.call(tree, {tag: fill}, fillNode => {
+    const name = fillNode.tag.split(':')[1];
+
+    if (!filledSlots[name]) {
+      filledSlots[name] = {};
+    }
+
+    filledSlots[name].tag = fillNode.tag;
+    filledSlots[name].attrs = fillNode.attrs;
+    filledSlots[name].content = fillNode.content;
+    filledSlots[name].source = render(fillNode.content);
+    filledSlots[name].rendered = false;
+
+    fillNode.tag = false;
+    fillNode.content = null;
+
+    return fillNode;
+  });
+}
+
+/**
+ * Process <slot> tag
+ *
+ * @param  {Object} tree PostHTML tree
+ * @param  {Object} filledSlots Filled slots content
+ * @param  {Object} options Plugin options
+ * @return {void}
+ */
+function processSlotContent(tree, filledSlots, {slot}) {
+  match.call(tree, {tag: slot}, slotNode => {
+    const name = slotNode.tag.split(':')[1];
+
+    slotNode.tag = false;
+
+    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 {
+      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')) {
+      filledSlots[name].rendered = true;
+    }
+
+    return slotNode;
+  });
+}
+
+module.exports = {
+  setFilledSlots,
+  processFillContent,
+  processSlotContent
+};

package/src/stacks.js

@@ -0,0 +1,64 @@
+'use strict';
+
+const {match} = require('posthtml/lib/api');
+const {render} = require('posthtml-render');
+
+/**
+ * Process <push> tag
+ *
+ * @param  {Object} tree PostHTML tree
+ * @param  {Object} content Content pushed by stack name
+ * @param  {String} push Push tag name
+ * @return {Object} tree
+ */
+function processPushes(tree, content, push) {
+  match.call(tree, {tag: push}, pushNode => {
+    if (!pushNode.attrs || !pushNode.attrs.name) {
+      throw new Error(`[components] Push <${push}> tag must have an attribute "name".`);
+    }
+
+    if (!content[pushNode.attrs.name]) {
+      content[pushNode.attrs.name] = [];
+    }
+
+    const pushContent = render(pushNode.content);
+
+    if (typeof pushNode.attrs.once === 'undefined' || !content[pushNode.attrs.name].includes(pushContent)) {
+      if (typeof pushNode.attrs.prepend === 'undefined') {
+        content[pushNode.attrs.name].push(pushContent);
+      } else {
+        content[pushNode.attrs.name].unshift(pushContent);
+      }
+    }
+
+    pushNode.tag = false;
+    pushNode.content = null;
+
+    return pushNode;
+  });
+
+  return tree;
+}
+
+/**
+ * Process <stack> tag
+ *
+ * @param  {Object} tree PostHTML tree
+ * @param  {Object} content Content pushed by stack name
+ * @param  {String} stack Stack tag name
+ * @return {Object} tree
+ */
+function processStacks(tree, content, stack) {
+  match.call(tree, {tag: stack}, stackNode => {
+    stackNode.tag = false;
+    stackNode.content = content[stackNode.attrs.name];
+    return stackNode;
+  });
+
+  return tree;
+}
+
+module.exports = {
+  processPushes,
+  processStacks
+};

package/test/templates/components/child.html

@@ -0,0 +1,41 @@
+<script props>
+  module.exports = {
+    aBoolean: true,
+    aString: 'My String Child',
+    aString2: locals.aString2 === 'yes' ? 'I am string 2' : 'I am not string 2',
+    anArray: ['one', 'two', 'three'],
+    anArray2: ['one2', 'two2', 'three2'],
+    anObject: { one: 'One', two: 'Two', three: 'Three'},
+    anObject2: { one: 'One2', two: 'Two2', three: 'Three2'}
+  };
+</script>
+CHILD:
+<div>
+  aBoolean
+  value: {{ aBoolean }}
+  type: {{ typeof aBoolean }}
+
+  aString
+  value: {{ aString }}
+  type: {{ typeof aString }}
+
+  aString2
+  value: {{ aString2 }}
+  type: {{ typeof aString2 }}
+
+  anArray
+  value: {{ anArray }}
+  type: {{ typeof anArray }}
+
+  anObject
+  value: {{ anObject }}
+  type: {{ typeof anObject }}
+
+  anArray2
+  value: {{ anArray2 }}
+  type: {{ typeof anArray2 }}
+
+  anObject2
+  value: {{ anObject2 }}
+  type: {{ typeof anObject2 }}
+</div>

package/test/templates/components/component-append-prepend.html

@@ -0,0 +1 @@
+<div><slot:title>Title</slot:title></div><div><slot:body>Body</slot:body></div>