posthtml-component 1.0.0-beta.9 → 1.0.0

package/src/index.js

@@ -3,21 +3,32 @@
 const {readFileSync, existsSync} = require('fs');
 const path = require('path');
 const {parser} = require('posthtml-parser');
-const {match} = require('posthtml/lib/api');
+const {match, walk} = 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 {inspect} = require('util');
-// const debug = true;
-// const log = (object, what, method) => {
-//   if (debug === true || method === debug) {
-//     console.log(what, inspect(object, false, null, true));
-//   }
-// };
+const processProps = require('./process-props');
+const processAttributes = require('./process-attributes');
+const {processPushes, processStacks} = require('./process-stacks');
+const {setFilledSlots, processSlotContent, processFillContent} = require('./process-slots');
+const log = require('./log');
+const each = require('lodash/each');
+const defaults = require('lodash/defaults');
+const assignWith = require('lodash/assignWith');
+const mergeWith = require('lodash/mergeWith');
+const template = require('lodash/template');
+const get = require('lodash/get');
+const has = require('lodash/has');
+const isObjectLike = require('lodash/isObjectLike');
+const isArray = require('lodash/isArray');
+const isEmpty = require('lodash/isEmpty');
+const isBoolean = require('lodash/isBoolean');
+const isUndefined = require('lodash/isUndefined'); // value === undefined
+const isNull = require('lodash/isNull'); // value === null
+const isNil = require('lodash/isNil'); // value == null
+const uniqueId = require('lodash/uniqueId');
+const transform = require('lodash/transform');
+const assign = require('lodash/assign');
+const isPlainObject = require('lodash/isPlainObject');
 
 /* eslint-disable complexity */
 module.exports = (options = {}) => tree => {
@@ -35,14 +46,43 @@ module.exports = (options = {}) => tree => {
   options.slotSeparator = options.slotSeparator || ':';
   options.push = options.push || 'push';
   options.stack = options.stack || 'stack';
-  options.localsAttr = options.localsAttr || 'props';
+  options.propsScriptAttribute = options.propsScriptAttribute || 'props';
+  options.propsContext = options.propsContext || 'props';
+  options.propsAttribute = options.propsAttribute || 'props';
+  options.propsSlot = options.propsSlot || 'props';
   options.expressions = options.expressions || {};
   options.plugins = options.plugins || [];
   options.attrsParserRules = options.attrsParserRules || {};
   options.strict = typeof options.strict === 'undefined' ? true : options.strict;
+  options.utilities = options.utilities || {
+    each,
+    defaults,
+    assign: assignWith,
+    merge: mergeWith,
+    template,
+    get,
+    has,
+    isPlainObject,
+    isObject: isObjectLike,
+    isArray,
+    isEmpty,
+    isBoolean,
+    isUndefined,
+    isNull,
+    isNil,
+    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; } }
+  options.elementAttributes = isPlainObject(options.elementAttributes) ? options.elementAttributes : {};
+  options.safelistAttributes = Array.isArray(options.safelistAttributes) ? options.safelistAttributes : [];
+  options.blacklistAttributes = Array.isArray(options.blacklistAttributes) ? options.blacklistAttributes : [];
 
   // Merge customizer callback passed to lodash mergeWith
-  //  for merge attribute `locals` and all attributes starting with `merge:`
+  //  for merge attribute `props` and all attributes starting with `merge:`
   //  @see https://lodash.com/docs/4.17.15#mergeWith
   options.mergeCustomizer = options.mergeCustomizer || ((objectValue, sourceValue) => {
     if (Array.isArray(objectValue)) {
@@ -86,11 +126,13 @@ module.exports = (options = {}) => tree => {
     }
   });
 
-  options.locals = {...options.expressions.locals};
+  options.props = {...options.expressions.locals};
   options.aware = {};
 
   const pushedContent = {};
 
+  log('Start of processing..', 'init', 'success');
+
   return processStacks(
     processPushes(
       processTree(options)(
@@ -105,21 +147,27 @@ module.exports = (options = {}) => tree => {
 };
 /* eslint-enable complexity */
 
+// Used for reset aware props
+let processCounter = 0;
+
 /**
  * @param  {Object} options Plugin options
  * @return {Object} PostHTML tree
  */
+
 function processTree(options) {
   const filledSlots = {};
 
-  // let processCounter = 0;
-
   return function (tree) {
+    log(`Processing tree number ${processCounter}..`, 'processTree');
+
     if (options.plugins.length > 0) {
       tree = applyPluginsToTree(tree, options.plugins);
     }
 
     match.call(tree, options.matcher, currentNode => {
+      log(`Match found for tag "${currentNode.tag}"..`, 'processTree');
+
       if (!currentNode.attrs) {
         currentNode.attrs = {};
       }
@@ -130,20 +178,21 @@ function processTree(options) {
         return currentNode;
       }
 
-      // console.log(`${++processCounter}) Processing component ${componentPath}`);
-
-      // log(currentNode, 'currentNode');
+      log(`${++processCounter}) Processing "${currentNode.tag}" from "${componentPath}"`, 'processTree');
 
       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};
+      const aware = transform(options.aware, (result, value) => {
+        assign(result, value);
+      }, {});
 
-      const {attributes, locals} = processLocals(currentNode, nextNode, filledSlots, options);
+      // Reset options.expressions.locals and keep aware locals
+      options.expressions.locals = {...options.props, ...aware};
+
+      const {attributes, props} = processProps(currentNode, nextNode, filledSlots, options, componentPath, processCounter);
 
       options.expressions.locals = attributes;
       options.expressions.locals.$slots = filledSlots;
@@ -172,21 +221,37 @@ function processTree(options) {
       currentNode.tag = false;
       currentNode.content = content;
 
-      processAttributes(currentNode, attributes, locals, 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'.
+      walk.call(currentNode, node => {
+        if (node && node.attrs) {
+          each(node.attrs, (value, key) => {
+            if (['undefined', 'null'].includes(value)) {
+              delete node.attrs[key];
+            }
+          });
+        }
+
+        return node;
+      });
+
+      log(`Done processing number ${processCounter}.`, 'processTree', 'success');
 
-      // log(currentNode, 'currentNode', 'currentNode')
-      // currentNode.attrs.counter = processCounter;
-      // currentNode.attrs.data = JSON.stringify({ attributes, locals });
+      // Reset options.aware for current processCounter
+      delete options.aware[processCounter];
 
-      // messages.push({
-      //   type: 'dependency',
-      //   file: componentPath,
-      //   from: options.root
-      // });
+      // Decrement counter
+      processCounter--;
 
       return currentNode;
     });
 
+    if (processCounter === 0) {
+      log('End of processing', 'processTree', 'success');
+    }
+
     return tree;
   };
 }
@@ -205,6 +270,9 @@ function getComponentPath(currentNode, options) {
       }
     }
 
+    // Delete attribute used as path
+    delete currentNode.attrs[options.attribute];
+
     return componentPath;
   }
 

package/src/log.js

@@ -0,0 +1,27 @@
+const {inspect} = require('util');
+
+const debug = false;
+
+// Colors
+const colors = {
+  reset: '\u001B[0m',
+  error: '\u001B[31m',
+  success: '\u001B[32m',
+  warning: '\u001B[33m',
+
+  errorHighlight: '\u001B[41m',
+  successHighlight: '\u001B[42m',
+  warningHighlight: '\u001B[43m',
+
+  highlighted: '\u001B[45m'
+};
+
+module.exports = (message, method, level = 'reset', object = null) => {
+  if (debug === true || method === debug) {
+    if (object) {
+      console.log(`[${colors.highlighted}x-components ${method}()${colors.reset}]`, colors[level] || 'reset', message, inspect(object, false, null, true), colors.reset);
+    } else {
+      console.log(`[${colors.highlighted}x-components ${method}()${colors.reset}]`, colors[level] || 'reset', message, colors.reset);
+    }
+  }
+};

package/src/process-attributes.js

@@ -0,0 +1,115 @@
+'use strict';
+
+const {match} = require('posthtml/lib/api');
+const parseAttrs = require('posthtml-attrs-parser');
+const styleToObject = require('style-to-object');
+const validAttributes = require('./valid-attributes');
+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');
+const isObject = require('lodash/isObject');
+const isEmpty = require('lodash/isEmpty');
+
+/**
+ * Map component attributes that it's not defined as props to first element of node
+ *
+ * @param {Object} currentNode
+ * @param {Object} attributes
+ * @param {Object} props
+ * @param {Object} options
+ * @param {Object} aware
+ * @return {void}
+ */
+module.exports = (currentNode, attributes, props, options, aware) => {
+  let mainNode;
+  match.call(currentNode, {attrs: {attributes: ''}}, node => {
+    delete node.attrs.attributes;
+    mainNode = node;
+
+    return node;
+  });
+
+  if (!mainNode) {
+    const index = currentNode.content.findIndex(content => typeof content === 'object');
+
+    if (index === -1) {
+      return;
+    }
+
+    mainNode = currentNode.content[index];
+  }
+
+  const nodeAttrs = parseAttrs(mainNode.attrs, options.attrsParserRules);
+
+  // Merge elementAttributes and blacklistAttributes with options provided
+  validAttributes.blacklistAttributes = union(validAttributes.blacklistAttributes, options.blacklistAttributes);
+  validAttributes.safelistAttributes = union(validAttributes.safelistAttributes, options.safelistAttributes);
+
+  // Merge or override elementAttributes from options provided
+  if (!isEmpty(options.elementAttributes)) {
+    each(options.elementAttributes, (modifier, tagName) => {
+      if (typeof modifier === 'function' && isString(tagName)) {
+        tagName = tagName.toUpperCase();
+        const attributes = modifier(validAttributes.elementAttributes[tagName]);
+        if (Array.isArray(attributes)) {
+          validAttributes.elementAttributes[tagName] = attributes;
+        }
+      }
+    });
+  }
+
+  // Attributes to be excluded
+  const excludeAttributes = union(validAttributes.blacklistAttributes, keys(props), keys(aware), keys(options.props), ['$slots']);
+  // All valid HTML attributes for the main element
+  const allValidElementAttributes = isString(mainNode.tag) && has(validAttributes.elementAttributes, mainNode.tag.toUpperCase()) ? validAttributes.elementAttributes[mainNode.tag.toUpperCase()] : [];
+  // Valid HTML attributes without the excluded
+  const validElementAttributes = difference(allValidElementAttributes, excludeAttributes);
+  // Add override attributes
+  validElementAttributes.push('override:style');
+  validElementAttributes.push('override:class');
+  // Pick valid attributes from passed
+  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;
+      }
+    });
+  });
+
+  each(mainNodeAttributes, (value, key) => {
+    if (['class', 'style'].includes(key)) {
+      if (!has(nodeAttrs, key)) {
+        nodeAttrs[key] = key === 'class' ? [] : {};
+      }
+
+      if (key === 'class') {
+        nodeAttrs.class.push(attributes.class);
+      } else {
+        nodeAttrs.style = extend(nodeAttrs.style, styleToObject(attributes.style));
+      }
+    } else {
+      nodeAttrs[key.replace('override:', '')] = attributes[key];
+    }
+
+    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) => {
+    if (key !== 'compose' && !isObject(nodeAttrs[key]) && !isString(nodeAttrs[key])) {
+      nodeAttrs[key] = nodeAttrs[key].toString();
+    }
+  });
+
+  mainNode.attrs = nodeAttrs.compose();
+};

package/src/process-props.js

@@ -0,0 +1,83 @@
+'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 attributeTypes = ['aware', 'merge'];
+
+/**
+ * Parse props from attributes, globals and via script
+ *
+ * @param {Object} currentNode - PostHTML tree
+ * @param {Array} nextNode - PostHTML tree
+ * @param {Object} filledSlots - Filled slots
+ * @param {Object} options - Plugin options
+ * @param {string} componentPath - Component path
+ * @param {number} processCounter
+ * @return {Object} - Attribute props and script props
+ */
+module.exports = (currentNode, nextNode, filledSlots, options, componentPath, processCounter) => {
+  let attributes = {...currentNode.attrs};
+
+  const attributesByTypeName = {};
+  each(attributeTypes, type => {
+    attributesByTypeName[type] = [];
+  });
+
+  each(attributes, (value, key, attrs) => {
+    let newKey = key;
+    each(attributeTypes, type => {
+      if (key.startsWith(`${type}:`)) {
+        newKey = newKey.replace(`${type}:`, '');
+        attributesByTypeName[type].push(newKey);
+      }
+    });
+
+    if (newKey !== key) {
+      attrs[newKey] = value;
+      delete attrs[key];
+    }
+  });
+
+  // Parse JSON attributes
+  each(attributes, (value, key, attrs) => {
+    try {
+      attrs[key] = JSON.parse(value);
+    } catch {}
+  });
+
+  // Merge or extend attribute props
+  if (attributes[options.propsAttribute]) {
+    if (attributesByTypeName.merge.includes(options.propsAttribute)) {
+      attributesByTypeName.merge.splice(attributesByTypeName.merge.indexOf(options.propsAttribute), 1);
+      mergeWith(attributes, attributes[options.propsAttribute], options.mergeCustomizer);
+    } else {
+      assign(attributes, attributes[options.propsAttribute]);
+    }
+
+    delete attributes[options.propsAttribute];
+  }
+
+  // Merge with global
+  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'));
+
+  if (props) {
+    assign(attributes, props);
+    // if (attributesByTypeName.merge.length > 0) {
+    //   assign(attributes, mergeWith(pick(locals, attributesByTypeName.merge), pick(attributes, attributesByTypeName.merge), options.mergeCustomizer));
+    // }
+  }
+
+  // Set aware attributes
+  if (attributesByTypeName.aware.length > 0) {
+    options.aware[processCounter] = pick(attributes, attributesByTypeName.aware);
+  }
+
+  return {attributes, props};
+};

package/src/process-script.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const vm = require('vm');
+const {existsSync, readFileSync} = require('fs');
+const {render} = require('posthtml-render');
+const {match} = require('posthtml/lib/api');
+
+const ctx = vm.createContext({module, require});
+
+/**
+ * Get the script tag with props from a node list and return process props.
+ * Custom posthtml-expressions/lib/locals.
+ *
+ * @param {Array} tree Nodes
+ * @param {Object} options Options
+ * @param {string} scriptPath - Component path
+ * @return {Object} {} Locals
+ */
+module.exports = (tree, options, scriptPath) => {
+  const props = {};
+  const propsContext = options.props;
+  const utilities = {...options.utilities};
+  const context = {...utilities, ...ctx, [options.propsContext]: propsContext, $slots: options.$slots};
+
+  const runInContext = code => {
+    try {
+      const parsedContext = vm.createContext(context);
+      const parsedProps = vm.runInContext(code, parsedContext);
+
+      Object.assign(props, parsedProps);
+    } catch {}
+  };
+
+  if (existsSync(scriptPath)) {
+    runInContext(readFileSync(scriptPath, 'utf8'));
+  }
+
+  match.call(tree, {tag: 'script', attrs: {[options.propsScriptAttribute]: ''}}, node => {
+    if (node.content) {
+      runInContext(render(node.content));
+    }
+
+    return '';
+  });
+
+  return {
+    props
+  };
+};

package/src/{slots.js → process-slots.js}

@@ -14,7 +14,7 @@ const omit = require('lodash/omit');
  * @param  {String} slotSeparator Slot separator
  * @return {void}
  */
-function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator}) {
+function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator, propsSlot}) {
   match.call(currentNode, {tag: fill}, fillNode => {
     if (!fillNode.attrs) {
       fillNode.attrs = {};
@@ -22,10 +22,10 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator}) {
 
     const name = fillNode.tag.split(slotSeparator)[1];
 
-    const locals = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
+    const props = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
 
-    if (locals) {
-      each(locals, (value, key, attrs) => {
+    if (props) {
+      each(props, (value, key, attrs) => {
         try {
           attrs[key] = JSON.parse(value);
         } catch {}
@@ -39,7 +39,7 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator}) {
       attrs: fillNode.attrs,
       content: fillNode.content,
       source: render(fillNode.content),
-      locals
+      [propsSlot]: props
     };
 
     return fillNode;

package/src/{stacks.js → process-stacks.js}

@@ -2,6 +2,7 @@
 
 const {match} = require('posthtml/lib/api');
 const {render} = require('posthtml-render');
+const get = require('lodash/get');
 
 /**
  * Process <push> tag
@@ -13,8 +14,12 @@ const {render} = require('posthtml-render');
  */
 function processPushes(tree, content, push) {
   match.call(tree, {tag: push}, pushNode => {
+    if (get(pushNode, 'attrs.name') === '') {
+      throw new Error(`[components] <${push}> tag requires a value for the "name" attribute.`);
+    }
+
     if (!pushNode.attrs || !pushNode.attrs.name) {
-      throw new Error(`[components] Push <${push}> tag must have an attribute "name".`);
+      throw new Error(`[components] <${push}> tag requires a "name" attribute.`);
     }
 
     if (!content[pushNode.attrs.name]) {