posthtml-component 1.0.0-RC.1

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,287 @@
+'use strict';
+
+const {readFileSync, existsSync} = require('fs');
+const path = require('path');
+const {parser} = require('posthtml-parser');
+const {match, walk} = require('posthtml/lib/api');
+const expressions = require('posthtml-expressions');
+const findPathFromTag = require('./find-path');
+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 => {
+  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.slotSeparator = options.slotSeparator || ':';
+  options.push = options.push || 'push';
+  options.stack = options.stack || 'stack';
+  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: (attrsibutes) => { 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 `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)) {
+      return objectValue.concat(sourceValue);
+    }
+  });
+
+  if (!(options.slot instanceof RegExp)) {
+    options.slot = new RegExp(`^${options.slot}${options.slotSeparator}`, 'i');
+  }
+
+  if (!(options.fill instanceof RegExp)) {
+    options.fill = new RegExp(`^${options.fill}${options.slotSeparator}`, '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.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);
+    }
+
+    if (namespace.custom) {
+      options.namespaces[index].custom = path.resolve(namespace.custom);
+    }
+  });
+
+  options.props = {...options.expressions.locals};
+  options.aware = {};
+
+  const pushedContent = {};
+
+  log('Start of processing..', 'init', 'success');
+
+  return processStacks(
+    processPushes(
+      processTree(options)(
+        expressions(options.expressions)(tree)
+      ),
+      pushedContent,
+      options.push
+    ),
+    pushedContent,
+    options.stack
+  );
+};
+/* 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 = {};
+
+  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 = {};
+      }
+
+      const componentPath = getComponentPath(currentNode, options);
+
+      if (!componentPath) {
+        return currentNode;
+      }
+
+      log(`${++processCounter}) Processing "${currentNode.tag}" from "${componentPath}"`, 'processTree');
+
+      let nextNode = parser(readFileSync(componentPath, 'utf8'));
+
+      // Set filled slots
+      setFilledSlots(currentNode, filledSlots, options);
+
+      const aware = transform(options.aware, (result, value) => {
+        assign(result, value);
+      }, {});
+
+      // 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;
+      // const plugins = [...options.plugins, expressions(options.expressions)];
+      nextNode = expressions(options.expressions)(nextNode);
+
+      if (options.plugins.length > 0) {
+        nextNode = applyPluginsToTree(nextNode, options.plugins);
+      }
+
+      // Process <yield> tag
+      const content = match.call(nextNode, {tag: options.yield}, nextNode => {
+        // Fill <yield> with current node content or default <yield>
+        return currentNode.content || nextNode.content;
+      });
+
+      nextNode = processTree(options)(nextNode);
+
+      // 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, 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');
+
+      // Reset options.aware for current processCounter
+      delete options.aware[processCounter];
+
+      // Decrement counter
+      processCounter--;
+
+      return currentNode;
+    });
+
+    if (processCounter === 0) {
+      log('End of processing', 'processTree', 'success');
+    }
+
+    return tree;
+  };
+}
+
+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;
+      }
+    }
+
+    // Delete attribute used as path
+    delete currentNode.attrs[options.attribute];
+
+    return componentPath;
+  }
+
+  return findPathFromTag(currentNode.tag, options);
+}
+
+function applyPluginsToTree(tree, plugins) {
+  return plugins.reduce((tree, plugin) => {
+    tree = plugin(tree);
+    return tree;
+  }, tree);
+}

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, (tagName, modifier) => {
+      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
+  };
+};