@domql/element 2.5.6 → 2.5.9

package/create.js

@@ -13,7 +13,7 @@ import { applyExtend } from './extend'
 import { registry } from './mixins'
 import { addMethods } from './methods/set'
 import { assignKeyAsClassname } from './mixins/classList'
-import { throughInitialExec } from './iterate'
+import { throughInitialExec, throughInitialDefine } from './iterate'
 
 import {
   isObject,
@@ -289,49 +289,99 @@ const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref } = element
   element.tag = detectTag(element)
 
-  if (!__ref.__exec) __ref.__exec = {}
-  if (!__ref.__attr) __ref.__attr = {}
+  // if (!element.props) element.props = {}
 
-  if (!element.props) element.props = {}
+  // Copy-paste of addCaching()
+  {
+    const { __ref: ref } = element
+    const { __ref: parentRef } = parent // eslint-disable-line
+
+    // enable TRANSFORM in data
+    // TODO: do we need this at all?
+    // if (!element.transform) element.transform = {}
+
+    // enable CACHING
+    if (!ref.__cached) ref.__cached = {}
+    if (!ref.__defineCache) ref.__defineCache = {}
+
+    // enable EXEC
+    if (!ref.__exec) ref.__exec = {}
+
+    // enable CLASS CACHING
+    if (!ref.__class) ref.__class = {}
+    if (!ref.__classNames) ref.__classNames = {}
+
+    // enable CLASS CACHING
+    if (!ref.__attr) ref.__attr = {}
+
+    // enable CHANGES storing
+    if (!ref.__changes) ref.__changes = []
+
+    // enable CHANGES storing
+    if (!ref.__children) ref.__children = []
+
+    // Add __root element property
+    // const hasRoot = parent && parent.key === ':root'
+    // if (!ref.__root) ref.__root = hasRoot ? element : parentRef.__root
+  }
+
+  addMethods(element, parent)
+
+  createState(element, parent)
+
+  // Borrowed from createIfConditionFlag()
+  const ref = __ref
+  if (isFunction(element.if)) {
+    const ifPassed = element.if(element, element.state)
+    if (!ifPassed) {
+      // const ifFragment = cacheNode({ tag: 'fragment' })
+      // ref.__ifFragment = appendNode(ifFragment, parent.node)
+      delete ref.__if
+    } else ref.__if = true
+  } else ref.__if = true
+  /// ///
+
+  if (element.node && ref.__if) { parent[key || element.key] = element } // Borrowed from assignNode()
 
-  createState(element, parent, { skipApplyMethods: true, ...options })
   createProps(element, parent)
+  if (!element.props) element.props = {}
   applyVariant(element, parent)
 
-  throughInitialExec(element, options.propsExcludedFromExec)
-
-  for (const param in element) {
-    const prop = element[param]
-    if (
-      isUndefined(prop) ||
-      isMethod(param) ||
-      isObject(registry[param]) ||
-      isVariant(param)
-    ) continue
-
-    const hasDefine = element.define && element.define[param]
-    const contextHasDefine = element.context && element.context.define &&
-          element.context.define[param]
-    const optionsHasDefine = options.define && options.define[param]
-
-    if (registry[param] && !optionsHasDefine) {
-      continue
-    } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-      create(exec(prop, element), element, param, options)
+  if (element.tag !== 'string' && element.tag !== 'fragment') {
+    throughInitialDefine(element)
+    throughInitialExec(element)
+
+    for (const k in element) {
+      if (
+        isUndefined(element[k]) ||
+        isMethod(k) ||
+        isObject(registry[k]) ||
+        isVariant(k)
+      ) continue
+
+      const hasDefine = element.define && element.define[k]
+      const contextHasDefine = element.context && element.context.define &&
+            element.context.define[k]
+      const optionsHasDefine = options.define && options.define[k]
+
+      if (registry[k] && !optionsHasDefine) {
+        continue
+      } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+        create(exec(element[k], element), element, k, options)
+      }
     }
   }
 
-  parent[key || element.key] = element
+  parent[key || element.key] = element // Borrowed from assignNode()
 
   delete element.update
   delete element.__element
 
   // added by createProps
-  delete element.props.update
-  delete element.props.__element
-
-  // added by createState
-  if (!options.keepRef) delete element.__ref
+  if (element.props) {
+    delete element.props.update
+    delete element.props.__element
+  }
 
   return element
 }

package/dist/cjs/create.js

@@ -228,36 +228,67 @@ const addCaching = (element, parent) => {
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref } = element;
   element.tag = (0, import_render.detectTag)(element);
-  if (!__ref.__exec)
-    __ref.__exec = {};
-  if (!__ref.__attr)
-    __ref.__attr = {};
+  {
+    const { __ref: ref2 } = element;
+    const { __ref: parentRef } = parent;
+    if (!ref2.__cached)
+      ref2.__cached = {};
+    if (!ref2.__defineCache)
+      ref2.__defineCache = {};
+    if (!ref2.__exec)
+      ref2.__exec = {};
+    if (!ref2.__class)
+      ref2.__class = {};
+    if (!ref2.__classNames)
+      ref2.__classNames = {};
+    if (!ref2.__attr)
+      ref2.__attr = {};
+    if (!ref2.__changes)
+      ref2.__changes = [];
+    if (!ref2.__children)
+      ref2.__children = [];
+  }
+  (0, import_set.addMethods)(element, parent);
+  (0, import_state.createState)(element, parent);
+  const ref = __ref;
+  if ((0, import_utils.isFunction)(element.if)) {
+    const ifPassed = element.if(element, element.state);
+    if (!ifPassed) {
+      delete ref.__if;
+    } else
+      ref.__if = true;
+  } else
+    ref.__if = true;
+  if (element.node && ref.__if) {
+    parent[key || element.key] = element;
+  }
+  (0, import_props.createProps)(element, parent);
   if (!element.props)
     element.props = {};
-  (0, import_state.createState)(element, parent, { skipApplyMethods: true, ...options });
-  (0, import_props.createProps)(element, parent);
   (0, import_component.applyVariant)(element, parent);
-  (0, import_iterate.throughInitialExec)(element, options.propsExcludedFromExec);
-  for (const param in element) {
-    const prop = element[param];
-    if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
-      continue;
-    const hasDefine = element.define && element.define[param];
-    const contextHasDefine = element.context && element.context.define && element.context.define[param];
-    const optionsHasDefine = options.define && options.define[param];
-    if (import_mixins.registry[param] && !optionsHasDefine) {
-      continue;
-    } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-      create((0, import_utils.exec)(prop, element), element, param, options);
+  if (element.tag !== "string" && element.tag !== "fragment") {
+    (0, import_iterate.throughInitialDefine)(element);
+    (0, import_iterate.throughInitialExec)(element);
+    for (const k in element) {
+      if ((0, import_utils.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+        continue;
+      const hasDefine = element.define && element.define[k];
+      const contextHasDefine = element.context && element.context.define && element.context.define[k];
+      const optionsHasDefine = options.define && options.define[k];
+      if (import_mixins.registry[k] && !optionsHasDefine) {
+        continue;
+      } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+        create((0, import_utils.exec)(element[k], element), element, k, options);
+      }
     }
   }
   parent[key || element.key] = element;
   delete element.update;
   delete element.__element;
-  delete element.props.update;
-  delete element.props.__element;
-  if (!options.keepRef)
-    delete element.__ref;
+  if (element.props) {
+    delete element.props.update;
+    delete element.props.__element;
+  }
   return element;
 };
 const checkIfMedia = (key) => key.slice(0, 1) === "@";

package/dist/cjs/extend.js

@@ -28,17 +28,7 @@ const applyExtend = (element, parent, options = {}) => {
   if ((0, import_utils.isFunction)(element))
     element = (0, import_utils.exec)(element, parent);
   let { extend, props, context, __ref } = element;
-  const COMPONENTS = context && context.components || options.components;
-  if ((0, import_utils.isString)(extend)) {
-    if (COMPONENTS && COMPONENTS[extend]) {
-      extend = COMPONENTS[extend];
-    } else {
-      if (ENV !== "test" || ENV !== "development") {
-        console.warn("Extend is string but component was not found:", extend);
-      }
-      extend = {};
-    }
-  }
+  extend = (0, import_utils2.fallbackStringExtend)(extend, context, options);
   const extendStack = (0, import_utils2.getExtendStack)(extend);
   if (ENV !== "test" || ENV !== "development")
     delete element.extend;
@@ -77,12 +67,7 @@ const applyExtend = (element, parent, options = {}) => {
   }
   if (__ref)
     __ref.__extend = stack;
-  const findAndReplaceStrings = (0, import_utils2.replaceStringsWithComponents)(stack, COMPONENTS);
-  let mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(findAndReplaceStrings);
-  const component = (0, import_utils.exec)(element.component || mergedExtend.component, element);
-  if (component && COMPONENTS && COMPONENTS[component]) {
-    const componentExtend = (0, import_utils2.cloneAndMergeArrayExtend)((0, import_utils2.getExtendStack)(COMPONENTS[component]));
-    mergedExtend = (0, import_utils2.deepMergeExtend)(componentExtend, mergedExtend);
-  }
+  const findAndReplaceStrings = (0, import_utils2.replaceStringsWithComponents)(stack, context, options);
+  const mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(findAndReplaceStrings);
   return (0, import_utils2.deepMergeExtend)(element, mergedExtend);
 };

package/dist/cjs/mixins/registry.js

@@ -40,6 +40,7 @@ var registry_default = {
   if: {},
   define: {},
   transform: {},
+  __name: {},
   __ref: {},
   __hash: {},
   __text: {},

package/dist/cjs/onlyResolveExtends.js

@@ -0,0 +1,100 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var onlyResolveExtends_exports = {};
+__export(onlyResolveExtends_exports, {
+  onlyResolveExtends: () => onlyResolveExtends
+});
+module.exports = __toCommonJS(onlyResolveExtends_exports);
+var import_utils = require("@domql/utils");
+var import__ = require(".");
+var import_mixins = require("./mixins");
+var import_utils2 = require("./utils");
+var import_methods = require("./methods");
+var import_set = require("./methods/set");
+var import_state = require("@domql/state");
+var import_render = require("@domql/render");
+var import_props = require("./props");
+var import_iterate = require("./iterate");
+const onlyResolveExtends = (element, parent, key, options) => {
+  const { __ref } = element;
+  element.tag = (0, import_render.detectTag)(element);
+  {
+    const { __ref: ref2 } = element;
+    const { __ref: parentRef } = parent;
+    if (!ref2.__cached)
+      ref2.__cached = {};
+    if (!ref2.__defineCache)
+      ref2.__defineCache = {};
+    if (!ref2.__exec)
+      ref2.__exec = {};
+    if (!ref2.__class)
+      ref2.__class = {};
+    if (!ref2.__classNames)
+      ref2.__classNames = {};
+    if (!ref2.__attr)
+      ref2.__attr = {};
+    if (!ref2.__changes)
+      ref2.__changes = [];
+    if (!ref2.__children)
+      ref2.__children = [];
+  }
+  (0, import_set.addMethods)(element, parent);
+  (0, import_state.createState)(element, parent);
+  const ref = __ref;
+  if ((0, import_utils.isFunction)(element.if)) {
+    const ifPassed = element.if(element, element.state);
+    if (!ifPassed) {
+      delete ref.__if;
+    } else
+      ref.__if = true;
+  } else
+    ref.__if = true;
+  if (element.node && ref.__if) {
+    parent[key || element.key] = element;
+  }
+  (0, import_props.createProps)(element, parent);
+  (0, import_utils2.applyVariant)(element, parent);
+  if (element.tag !== "string" && element.tag !== "fragment") {
+    (0, import_iterate.throughInitialDefine)(element);
+    (0, import_iterate.throughInitialExec)(element);
+    for (const param in element) {
+      const prop = element[param];
+      if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_utils2.isVariant)(param))
+        continue;
+      const hasDefine = element.define && element.define[param];
+      const contextHasDefine = element.context && element.context.define && element.context.define[param];
+      const optionsHasDefine = options.define && options.define[param];
+      if (import_mixins.registry[param] && !optionsHasDefine) {
+        continue;
+      } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+        (0, import__.create)((0, import_utils.exec)(prop, element), element, param, options);
+      }
+    }
+  }
+  parent[key || element.key] = element;
+  delete element.update;
+  delete element.__element;
+  if (element.props) {
+    delete element.props.update;
+    delete element.props.__element;
+  }
+  if (!options.keepRef)
+    delete element.__ref;
+  return element;
+};

package/dist/cjs/utils/extendUtils.js

@@ -25,6 +25,7 @@ __export(extendUtils_exports, {
   extendCachedRegistry: () => extendCachedRegistry,
   extendStackRegistry: () => extendStackRegistry,
   extractArrayExtend: () => extractArrayExtend,
+  fallbackStringExtend: () => fallbackStringExtend,
   flattenExtend: () => flattenExtend,
   generateHash: () => generateHash,
   getExtendMerged: () => getExtendMerged,
@@ -37,6 +38,7 @@ __export(extendUtils_exports, {
 });
 module.exports = __toCommonJS(extendUtils_exports);
 var import_utils = require("@domql/utils");
+const ENV = "development";
 const generateHash = () => Math.random().toString(36).substring(2);
 const extendStackRegistry = {};
 const extendCachedRegistry = {};
@@ -119,13 +121,21 @@ const cloneAndMergeArrayExtend = (stack) => {
     return deepMergeExtend(a, deepCloneExtend(c));
   }, {});
 };
-const replaceStringsWithComponents = (stack, components) => {
-  return stack.map((v) => {
-    if ((0, import_utils.isString)(v))
-      return components[v];
-    else
-      return v;
-  });
+const fallbackStringExtend = (extend, context, options) => {
+  const COMPONENTS = context && context.components || options.components;
+  if ((0, import_utils.isString)(extend)) {
+    console.log("extend", extend);
+    console.log(COMPONENTS[extend]);
+    if (COMPONENTS && COMPONENTS[extend]) {
+      return COMPONENTS[extend];
+    } else {
+      if (ENV !== "test" || ENV !== "development") {
+        console.warn("Extend is string but component was not found:", extend);
+      }
+      return {};
+    }
+  }
+  return extend;
 };
 const jointStacks = (extendStack, childExtendStack) => {
   return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
@@ -142,3 +152,20 @@ const getExtendMerged = (extend) => {
   const stack = getExtendStack(extend);
   return cloneAndMergeArrayExtend(stack);
 };
+const replaceStringsWithComponents = (stack, context, options) => {
+  const COMPONENTS = context && context.components || options.components;
+  return stack.map((v) => {
+    if ((0, import_utils.isString)(v)) {
+      const component = COMPONENTS[v];
+      console.warn("v", v);
+      console.log(COMPONENTS[v]);
+      console.warn("component", component);
+      return component;
+    }
+    if ((0, import_utils.isString)(v.extend)) {
+      v.extend = COMPONENTS[v.extend];
+      return { ...getExtendMerged(v.extend), ...v };
+    }
+    return v;
+  });
+};

package/extend.js

@@ -1,12 +1,13 @@
 'use strict'
 
-import { isFunction, exec, isString } from '@domql/utils'
+import { isFunction, exec } from '@domql/utils'
 import {
   getExtendStack,
   jointStacks,
   cloneAndMergeArrayExtend,
   deepMergeExtend,
-  replaceStringsWithComponents
+  replaceStringsWithComponents,
+  fallbackStringExtend
 } from './utils'
 
 const ENV = process.env.NODE_ENV
@@ -20,17 +21,7 @@ export const applyExtend = (element, parent, options = {}) => {
 
   let { extend, props, context, __ref } = element
 
-  const COMPONENTS = (context && context.components) || options.components
-  if (isString(extend)) {
-    if (COMPONENTS && COMPONENTS[extend]) {
-      extend = COMPONENTS[extend]
-    } else {
-      if (ENV !== 'test' || ENV !== 'development') {
-        console.warn('Extend is string but component was not found:', extend)
-      }
-      extend = {}
-    }
-  }
+  extend = fallbackStringExtend(extend, context, options)
 
   const extendStack = getExtendStack(extend)
 
@@ -77,14 +68,14 @@ export const applyExtend = (element, parent, options = {}) => {
   }
 
   if (__ref) __ref.__extend = stack
-  const findAndReplaceStrings = replaceStringsWithComponents(stack, COMPONENTS)
-  let mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
-
-  const component = exec(element.component || mergedExtend.component, element)
-  if (component && COMPONENTS && COMPONENTS[component]) {
-    const componentExtend = cloneAndMergeArrayExtend(getExtendStack(COMPONENTS[component]))
-    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
-  }
+  const findAndReplaceStrings = replaceStringsWithComponents(stack, context, options)
+  const mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
+
+  // const component = exec(element.component || mergedExtend.component, element)
+  // if (component && COMPONENTS && COMPONENTS[component]) {
+  //   const componentExtend = cloneAndMergeArrayExtend(getExtendStack(COMPONENTS[component]))
+  //   mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  // }
 
   return deepMergeExtend(element, mergedExtend)
 }

package/mixins/registry.js

@@ -24,6 +24,7 @@ export default {
   if: {},
   define: {},
   transform: {},
+  __name: {},
   __ref: {},
   __hash: {},
   __text: {},

package/onlyResolveExtends.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
+import { create } from '.'
+import { registry } from './mixins'
+import { applyVariant, isVariant } from './utils'
+import { isMethod } from './methods'
+import { addMethods } from './methods/set'
+import { createState } from '@domql/state'
+import { detectTag } from '@domql/render'
+import { createProps } from './props'
+import { throughInitialDefine, throughInitialExec } from './iterate'
+
+export const onlyResolveExtends = (element, parent, key, options) => {
+  const { __ref } = element
+  element.tag = detectTag(element)
+
+  // if (!element.props) element.props = {}
+
+  // Copy-paste of addCaching()
+  {
+    const { __ref: ref } = element
+    const { __ref: parentRef } = parent
+
+    // enable TRANSFORM in data
+    // TODO: do we need this at all?
+    // if (!element.transform) element.transform = {}
+
+    // enable CACHING
+    if (!ref.__cached) ref.__cached = {}
+    if (!ref.__defineCache) ref.__defineCache = {}
+
+    // enable EXEC
+    if (!ref.__exec) ref.__exec = {}
+
+    // enable CLASS CACHING
+    if (!ref.__class) ref.__class = {}
+    if (!ref.__classNames) ref.__classNames = {}
+
+    // enable CLASS CACHING
+    if (!ref.__attr) ref.__attr = {}
+
+    // enable CHANGES storing
+    if (!ref.__changes) ref.__changes = []
+
+    // enable CHANGES storing
+    if (!ref.__children) ref.__children = []
+
+    // Add __root element property
+    // const hasRoot = parent && parent.key === ':root'
+    // if (!ref.__root) ref.__root = hasRoot ? element : parentRef.__root
+  }
+
+  addMethods(element, parent)
+
+  createState(element, parent)
+
+  // Borrowed from createIfConditionFlag()
+  const ref = __ref
+  if (isFunction(element.if)) {
+    const ifPassed = element.if(element, element.state)
+    if (!ifPassed) {
+      // const ifFragment = cacheNode({ tag: 'fragment' })
+      // ref.__ifFragment = appendNode(ifFragment, parent.node)
+      delete ref.__if
+    } else ref.__if = true
+  } else ref.__if = true
+  /// ///
+
+  if (element.node && ref.__if) { parent[key || element.key] = element } // Borrowed from assignNode()
+
+  createProps(element, parent)
+  applyVariant(element, parent)
+
+  if (element.tag !== 'string' && element.tag !== 'fragment') {
+    throughInitialDefine(element)
+    throughInitialExec(element)
+
+    for (const param in element) {
+      const prop = element[param]
+      if (
+        isUndefined(prop) ||
+        isMethod(param) ||
+        isObject(registry[param]) ||
+        isVariant(param)
+      ) continue
+
+      const hasDefine = element.define && element.define[param]
+      const contextHasDefine = element.context && element.context.define &&
+            element.context.define[param]
+      const optionsHasDefine = options.define && options.define[param]
+
+      if (registry[param] && !optionsHasDefine) {
+        continue
+      } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+        create(exec(prop, element), element, param, options)
+      }
+    }
+  }
+
+  parent[key || element.key] = element // Borrowed from assignNode()
+
+  delete element.update
+  delete element.__element
+
+  // added by createProps
+  if (element.props) {
+    delete element.props.update
+    delete element.props.__element
+  }
+
+  // added by createState
+  if (!options.keepRef) delete element.__ref
+
+  return element
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.6",
+  "version": "2.5.9",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "e05c05cdecb20e2b9e4d9ea728bb2707cb27912c",
+  "gitHead": "72ca0c34d453da80307f93c6e3b214c5cbf03a66",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/utils/extendUtils.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { isArray, isFunction, isObject, isString } from '@domql/utils'
+const ENV = process.env.NODE_ENV
 
 export const generateHash = () => Math.random().toString(36).substring(2)
 
@@ -88,11 +89,21 @@ export const cloneAndMergeArrayExtend = stack => {
   }, {})
 }
 
-export const replaceStringsWithComponents = (stack, components) => {
-  return stack.map(v => {
-    if (isString(v)) return components[v]
-    else return v
-  })
+export const fallbackStringExtend = (extend, context, options) => {
+  const COMPONENTS = (context && context.components) || options.components
+  if (isString(extend)) {
+    console.log('extend', extend)
+    console.log(COMPONENTS[extend])
+    if (COMPONENTS && COMPONENTS[extend]) {
+      return COMPONENTS[extend]
+    } else {
+      if (ENV !== 'test' || ENV !== 'development') {
+        console.warn('Extend is string but component was not found:', extend)
+      }
+      return {}
+    }
+  }
+  return extend
 }
 
 // joint stacks
@@ -116,3 +127,22 @@ export const getExtendMerged = extend => {
   const stack = getExtendStack(extend)
   return cloneAndMergeArrayExtend(stack)
 }
+
+export const replaceStringsWithComponents = (stack, context, options) => {
+  const COMPONENTS = (context && context.components) || options.components
+  return stack.map(v => {
+    // if (v === 'StatePage') debugger
+    if (isString(v)) {
+      const component = COMPONENTS[v]
+      console.warn('v', v)
+      console.log(COMPONENTS[v])
+      console.warn('component', component)
+      return component
+    }
+    if (isString(v.extend)) {
+      v.extend = COMPONENTS[v.extend]
+      return { ...getExtendMerged(v.extend), ...v }
+    }
+    return v
+  })
+}