framework7 6.3.4 → 7.0.0-beta.3

package/modules/component/parse-component.js

@@ -0,0 +1,80 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7';
+import { id } from '../../shared/utils';
+
+function parseComponent(componentString) {
+  const window = getWindow();
+  const document = getDocument();
+  const componentId = id();
+  const callbackCreateName = `f7_component_create_callback_${componentId}`; // Template
+
+  let template;
+  const hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/);
+
+  if (hasTemplate) {
+    template = componentString.split(/<template[ ]?[a-z0-9-]*>/).filter((item, index) => index > 0).join('<template>').split('</template>').filter((item, index, arr) => index < arr.length - 1).join('</template>').replace(/{{#raw}}([ \n]*)<template/g, '{{#raw}}<template').replace(/\/template>([ \n]*){{\/raw}}/g, '/template>{{/raw}}').replace(/([ \n])<template/g, '$1{{#raw}}<template').replace(/\/template>([ \n])/g, '/template>{{/raw}}$1');
+  } // Parse Styles
+
+
+  let style = null;
+
+  if (componentString.indexOf('<style>') >= 0) {
+    style = componentString.split('<style>')[1].split('</style>')[0];
+  }
+
+  if (componentString.indexOf('<style scoped>') >= 0) {
+    style = componentString.split('<style scoped>')[1].split('</style>')[0];
+  } // Parse Script
+
+
+  let scriptContent;
+
+  if (componentString.indexOf('<script>') >= 0) {
+    const scripts = componentString.split('<script>');
+    scriptContent = scripts[scripts.length - 1].split('</script>')[0].trim();
+  } else {
+    scriptContent = 'return () => {return $render}';
+  }
+
+  if (!scriptContent || !scriptContent.trim()) scriptContent = 'return () => {return $render}'; // Parse Template
+
+  if (template) {
+    scriptContent = scriptContent.replace('$render', `function ($$ctx) {
+          var $ = $$ctx.$$;
+          var $h = $$ctx.$h;
+          var $root = $$ctx.$root;
+          var $f7 = $$ctx.$f7;
+          var $f7route = $$ctx.$f7route;
+          var $f7router = $$ctx.$f7router;
+          var $theme = $$ctx.$theme;
+          var $update = $$ctx.$update;
+          var $store = $$ctx.$store;
+          var $ref = $$ctx.$ref;
+
+          return $h\`${template}\`
+        }
+        `).replace(/export default/g, 'return');
+  } // Execute Script
+
+
+  scriptContent = `window.${callbackCreateName} = function () {${scriptContent}}`; // Insert Script El
+
+  const scriptEl = document.createElement('script');
+  scriptEl.innerHTML = scriptContent;
+  $('head').append(scriptEl);
+  const component = window[callbackCreateName](); // Remove Script El
+
+  $(scriptEl).remove();
+  window[callbackCreateName] = null;
+  delete window[callbackCreateName]; // Assign Style
+
+  if (style) {
+    component.style = style;
+  } // Component ID
+
+
+  component.id = componentId;
+  return component;
+}
+
+export default parseComponent;

package/{esm/modules → modules}/component/patch.js

@@ -4,5 +4,5 @@ import attributesModule from './snabbdom/modules/attributes';
 import propsModule from './snabbdom/modules/props';
 import styleModule from './snabbdom/modules/style';
 import eventListenersModule from './eventslisteners';
-var patch = init([attributesModule, propsModule, styleModule, eventListenersModule]);
+const patch = init([attributesModule, propsModule, styleModule, eventListenersModule]);
 export default patch;

package/{esm/modules → modules}/component/snabbdom/modules/hero.js

@@ -1,6 +1,6 @@
 var raf = typeof window !== 'undefined' && window.requestAnimationFrame || setTimeout;
 
-var nextFrame = function nextFrame(fn) {
+var nextFrame = function (fn) {
   raf(function () {
     raf(fn);
   });

package/{esm/modules → modules}/component/snabbdom/modules/style.js

@@ -1,6 +1,6 @@
 var raf = typeof window !== 'undefined' && window.requestAnimationFrame || setTimeout;
 
-var nextFrame = function nextFrame(fn) {
+var nextFrame = function (fn) {
   raf(function () {
     raf(fn);
   });

package/{esm/modules → modules}/component/snabbdom/snabbdom.js

@@ -105,9 +105,7 @@ export function init(modules, domApi) {
       if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot));
       if (dotIdx > 0) elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' '));
 
-      for (i = 0; i < cbs.create.length; ++i) {
-        cbs.create[i](emptyNode, vnode);
-      }
+      for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
 
       if (is.array(children)) {
         for (i = 0; i < children.length; ++i) {
@@ -152,9 +150,7 @@ export function init(modules, domApi) {
     if (data !== undefined) {
       if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode);
 
-      for (i = 0; i < cbs.destroy.length; ++i) {
-        cbs.destroy[i](vnode);
-      }
+      for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
 
       if (vnode.children !== undefined) {
         for (j = 0; j < vnode.children.length; ++j) {
@@ -181,9 +177,7 @@ export function init(modules, domApi) {
           listeners = cbs.remove.length + 1;
           rm = createRmCb(ch.elm, listeners);
 
-          for (i_1 = 0; i_1 < cbs.remove.length; ++i_1) {
-            cbs.remove[i_1](ch, rm);
-          }
+          for (i_1 = 0; i_1 < cbs.remove.length; ++i_1) cbs.remove[i_1](ch, rm);
 
           if (isDef(i_1 = ch.data) && isDef(i_1 = i_1.hook) && isDef(i_1 = i_1.remove)) {
             i_1(ch, rm);
@@ -287,9 +281,7 @@ export function init(modules, domApi) {
     if (oldVnode === vnode) return;
 
     if (vnode.data !== undefined) {
-      for (i = 0; i < cbs.update.length; ++i) {
-        cbs.update[i](oldVnode, vnode);
-      }
+      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
 
       i = vnode.data.hook;
       if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
@@ -319,9 +311,7 @@ export function init(modules, domApi) {
     var i, elm, parent;
     var insertedVnodeQueue = [];
 
-    for (i = 0; i < cbs.pre.length; ++i) {
-      cbs.pre[i]();
-    }
+    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
 
     if (!isVnode(oldVnode)) {
       oldVnode = emptyNodeAt(oldVnode);
@@ -344,9 +334,7 @@ export function init(modules, domApi) {
       insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
     }
 
-    for (i = 0; i < cbs.post.length; ++i) {
-      cbs.post[i]();
-    }
+    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
 
     return vnode;
   };

package/{esm/modules → modules}/component/vdom.js

@@ -1,57 +1,47 @@
-function _readOnlyError(name) { throw new TypeError("\"" + name + "\" is read-only"); }
-
 /* eslint no-use-before-define: "off" */
 
 /* eslint import/no-named-as-default: "off" */
 import h from './snabbdom/h';
 import customComponents from './custom-components';
 import { isObject, eventNameToColonCase } from '../../shared/utils';
-var SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
-var PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
-var BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');
+const SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
+const PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
+const BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');
 
-var getTagName = function getTagName(treeNode) {
+const getTagName = treeNode => {
   return typeof treeNode.type === 'function' ? treeNode.type.name || 'CustomComponent' : treeNode.type;
 };
 
-var toCamelCase = function toCamelCase(name) {
-  return name.split('-').map(function (word, index) {
+const toCamelCase = name => {
+  return name.split('-').map((word, index) => {
     if (index === 0) return word.toLowerCase();
     return word[0].toUpperCase() + word.substr(1);
   }).join('');
 };
 
-var propsFromAttrs = function propsFromAttrs() {
-  var context = {};
-
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  args.forEach(function (obj) {
-    if (obj === void 0) {
-      obj = {};
-    }
-
-    Object.keys(obj).forEach(function (key) {
+const propsFromAttrs = (...args) => {
+  const context = {};
+  args.forEach((obj = {}) => {
+    Object.keys(obj).forEach(key => {
       context[toCamelCase(key)] = obj[key];
     });
   });
   return context;
 };
 
-var createCustomComponent = function createCustomComponent(_ref) {
-  var f7 = _ref.f7,
-      treeNode = _ref.treeNode,
-      vnode = _ref.vnode,
-      data = _ref.data;
-  var component = typeof treeNode.type === 'function' ? treeNode.type : customComponents[treeNode.type];
+const createCustomComponent = ({
+  f7,
+  treeNode,
+  vnode,
+  data
+}) => {
+  const component = typeof treeNode.type === 'function' ? treeNode.type : customComponents[treeNode.type];
   f7.component.create(component, propsFromAttrs(data.attrs || {}, data.props || {}), {
     el: vnode.elm,
     children: treeNode.children
-  }).then(function (c) {
+  }).then(c => {
     if (vnode.data && vnode.data.on && c && c.$el) {
-      Object.keys(vnode.data.on).forEach(function (eventName) {
+      Object.keys(vnode.data.on).forEach(eventName => {
         c.$el.on(eventName, vnode.data.on[eventName]);
       });
     } // eslint-disable-next-line
@@ -61,26 +51,28 @@ var createCustomComponent = function createCustomComponent(_ref) {
   });
 };
 
-var updateCustomComponent = function updateCustomComponent(vnode) {
+const updateCustomComponent = vnode => {
   // eslint-disable-next-line
-  var component = vnode && vnode.elm && vnode.elm.__component__;
+  const component = vnode && vnode.elm && vnode.elm.__component__;
   if (!component) return;
-  var newProps = propsFromAttrs(vnode.data.attrs || {}, vnode.data.props || {});
+  const newProps = propsFromAttrs(vnode.data.attrs || {}, vnode.data.props || {});
   component.children = vnode.data.treeNode.children;
   Object.assign(component.props, newProps);
   component.update();
 };
 
-var destroyCustomComponent = function destroyCustomComponent(vnode) {
+const destroyCustomComponent = vnode => {
   // eslint-disable-next-line
-  var component = vnode && vnode.elm && vnode.elm.__component__;
+  const component = vnode && vnode.elm && vnode.elm.__component__;
 
   if (component) {
-    var el = component.el,
-        $el = component.$el;
+    const {
+      el,
+      $el
+    } = component;
 
     if (vnode.data && vnode.data.on && $el) {
-      Object.keys(vnode.data.on).forEach(function (eventName) {
+      Object.keys(vnode.data.on).forEach(eventName => {
         $el.off(eventName, vnode.data.on[eventName]);
       });
     }
@@ -91,63 +83,62 @@ var destroyCustomComponent = function destroyCustomComponent(vnode) {
   }
 };
 
-var isCustomComponent = function isCustomComponent(treeNodeType) {
+const isCustomComponent = treeNodeType => {
   return typeof treeNodeType === 'function' || treeNodeType && treeNodeType.indexOf('-') > 0 && customComponents[treeNodeType];
 };
 
 function getHooks(treeNode, data, f7, initial, isRoot) {
-  var hooks = {};
-  var insert = [];
-  var destroy = [];
-  var update = [];
-  var postpatch = [];
-  var isFakeElement = false;
-  var tagName = getTagName(treeNode);
+  const hooks = {};
+  const insert = [];
+  const destroy = [];
+  const update = [];
+  const postpatch = [];
+  let isFakeElement = false;
+  let tagName = getTagName(treeNode);
 
   if (data && data.attrs && data.attrs.component) {
-    // eslint-disable-next-line
-    data.attrs.component, _readOnlyError("tagName");
+    tagName = data.attrs.component;
     delete data.attrs.component;
     isFakeElement = true;
   }
 
-  var isCustom = isCustomComponent(treeNode.type);
+  const isCustom = isCustomComponent(treeNode.type);
 
   if (isCustom) {
-    insert.push(function (vnode) {
+    insert.push(vnode => {
       if (vnode.sel !== tagName && !isFakeElement) return;
       createCustomComponent({
-        f7: f7,
-        treeNode: treeNode,
-        vnode: vnode,
-        data: data
+        f7,
+        treeNode,
+        vnode,
+        data
       });
     });
-    destroy.push(function (vnode) {
+    destroy.push(vnode => {
       destroyCustomComponent(vnode);
     });
-    update.push(function (oldVnode, vnode) {
+    update.push((oldVnode, vnode) => {
       updateCustomComponent(vnode);
     });
   }
 
   if (!isCustom) {
     if (!data || !data.attrs || !data.attrs.class) return hooks;
-    var classNames = data.attrs.class;
-    classNames.split(' ').forEach(function (className) {
+    const classNames = data.attrs.class;
+    classNames.split(' ').forEach(className => {
       if (!initial) {
-        insert.push.apply(insert, f7.getVnodeHooks('insert', className));
+        insert.push(...f7.getVnodeHooks('insert', className));
       }
 
-      destroy.push.apply(destroy, f7.getVnodeHooks('destroy', className));
-      update.push.apply(update, f7.getVnodeHooks('update', className));
-      postpatch.push.apply(postpatch, f7.getVnodeHooks('postpatch', className));
+      destroy.push(...f7.getVnodeHooks('destroy', className));
+      update.push(...f7.getVnodeHooks('update', className));
+      postpatch.push(...f7.getVnodeHooks('postpatch', className));
     });
   }
 
   if (isRoot && !initial) {
-    postpatch.push(function (oldVnode, vnode) {
-      var vn = vnode || oldVnode;
+    postpatch.push((oldVnode, vnode) => {
+      const vn = vnode || oldVnode;
       if (!vn) return;
 
       if (vn.data && vn.data.component) {
@@ -161,68 +152,59 @@ function getHooks(treeNode, data, f7, initial, isRoot) {
   }
 
   if (insert.length) {
-    hooks.insert = function (vnode) {
-      insert.forEach(function (f) {
-        return f(vnode);
-      });
+    hooks.insert = vnode => {
+      insert.forEach(f => f(vnode));
     };
   }
 
   if (destroy.length) {
-    hooks.destroy = function (vnode) {
-      destroy.forEach(function (f) {
-        return f(vnode);
-      });
+    hooks.destroy = vnode => {
+      destroy.forEach(f => f(vnode));
     };
   }
 
   if (update.length) {
-    hooks.update = function (oldVnode, vnode) {
-      update.forEach(function (f) {
-        return f(oldVnode, vnode);
-      });
+    hooks.update = (oldVnode, vnode) => {
+      update.forEach(f => f(oldVnode, vnode));
     };
   }
 
   if (postpatch.length) {
-    hooks.postpatch = function (oldVnode, vnode) {
-      postpatch.forEach(function (f) {
-        return f(oldVnode, vnode);
-      });
+    hooks.postpatch = (oldVnode, vnode) => {
+      postpatch.forEach(f => f(oldVnode, vnode));
     };
   }
 
   return hooks;
 }
 
-var getEventHandler = function getEventHandler(eventHandler, _temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp,
-      stop = _ref2.stop,
-      prevent = _ref2.prevent,
-      once = _ref2.once;
-
-  var fired = false;
+const getEventHandler = (eventHandler, {
+  stop,
+  prevent,
+  once
+} = {}) => {
+  let fired = false;
 
-  function handler() {
-    var e = arguments.length <= 0 ? undefined : arguments[0];
+  function handler(...args) {
+    const e = args[0];
     if (once && fired) return;
     if (stop) e.stopPropagation();
     if (prevent) e.preventDefault();
     fired = true;
-    eventHandler.apply(void 0, arguments);
+    eventHandler(...args);
   }
 
   return handler;
 };
 
-var getData = function getData(treeNode, component, f7, initial, isRoot) {
-  var data = {
-    component: component,
-    treeNode: treeNode
+const getData = (treeNode, component, f7, initial, isRoot) => {
+  const data = {
+    component,
+    treeNode
   };
-  var tagName = getTagName(treeNode);
-  Object.keys(treeNode.props).forEach(function (attrName) {
-    var attrValue = treeNode.props[attrName];
+  const tagName = getTagName(treeNode);
+  Object.keys(treeNode.props).forEach(attrName => {
+    const attrValue = treeNode.props[attrName];
     if (typeof attrValue === 'undefined') return;
 
     if (PROPS_ATTRS.indexOf(attrName) >= 0) {
@@ -256,13 +238,13 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
     } else if (attrName.indexOf('@') === 0 || attrName.indexOf('on') === 0 && attrName.length > 2) {
       // Events
       if (!data.on) data.on = {};
-      var eventName = attrName.indexOf('@') === 0 ? attrName.substr(1) : eventNameToColonCase(attrName.substr(2));
-      var stop = false;
-      var prevent = false;
-      var once = false;
+      let eventName = attrName.indexOf('@') === 0 ? attrName.substr(1) : eventNameToColonCase(attrName.substr(2));
+      let stop = false;
+      let prevent = false;
+      let once = false;
 
       if (eventName.indexOf('.') >= 0) {
-        eventName.split('.').forEach(function (eventNamePart, eventNameIndex) {
+        eventName.split('.').forEach((eventNamePart, eventNameIndex) => {
           if (eventNameIndex === 0) eventName = eventNamePart;else {
             if (eventNamePart === 'stop') stop = true;
             if (eventNamePart === 'prevent') prevent = true;
@@ -272,9 +254,9 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
       }
 
       data.on[eventName] = getEventHandler(attrValue, {
-        stop: stop,
-        prevent: prevent,
-        once: once
+        stop,
+        prevent,
+        once
       });
     } else if (attrName === 'style') {
       // Style
@@ -294,13 +276,13 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
       }
     }
   });
-  var hooks = getHooks(treeNode, data, f7, initial, isRoot);
+  const hooks = getHooks(treeNode, data, f7, initial, isRoot);
 
-  hooks.prepatch = function (oldVnode, vnode) {
+  hooks.prepatch = (oldVnode, vnode) => {
     if (!oldVnode || !vnode) return;
 
     if (oldVnode && oldVnode.data && oldVnode.data.props) {
-      Object.keys(oldVnode.data.props).forEach(function (key) {
+      Object.keys(oldVnode.data.props).forEach(key => {
         if (BOOLEAN_PROPS.indexOf(key) < 0) return;
         if (!vnode.data) vnode.data = {};
         if (!vnode.data.props) vnode.data.props = {};
@@ -316,20 +298,20 @@ var getData = function getData(treeNode, component, f7, initial, isRoot) {
   return data;
 };
 
-var getChildren = function getChildren(treeNode, component, f7, initial) {
+const getChildren = (treeNode, component, f7, initial) => {
   if (treeNode && treeNode.type && SELF_CLOSING.indexOf(treeNode.type) >= 0) {
     return [];
   }
 
-  var children = [];
-  var nodes = treeNode.children;
+  const children = [];
+  const nodes = treeNode.children;
 
-  for (var i = 0; i < nodes.length; i += 1) {
-    var childNode = nodes[i];
-    var child = treeNodeToVNode(childNode, component, f7, initial, false);
+  for (let i = 0; i < nodes.length; i += 1) {
+    const childNode = nodes[i];
+    const child = treeNodeToVNode(childNode, component, f7, initial, false);
 
     if (Array.isArray(child)) {
-      children.push.apply(children, child);
+      children.push(...child);
     } else if (child) {
       children.push(child);
     }
@@ -338,10 +320,10 @@ var getChildren = function getChildren(treeNode, component, f7, initial) {
   return children;
 };
 
-var getSlots = function getSlots(treeNode, component, f7, initial) {
-  var slotName = treeNode.props.name || 'default';
-  var slotNodes = (component.children || []).filter(function (childTreeNode) {
-    var childSlotName = 'default';
+const getSlots = (treeNode, component, f7, initial) => {
+  const slotName = treeNode.props.name || 'default';
+  const slotNodes = (component.children || []).filter(childTreeNode => {
+    let childSlotName = 'default';
 
     if (childTreeNode.props) {
       childSlotName = childTreeNode.props.slot || 'default';
@@ -354,16 +336,14 @@ var getSlots = function getSlots(treeNode, component, f7, initial) {
     return getChildren(treeNode, component, f7, initial);
   }
 
-  return slotNodes.map(function (subTreeNode) {
-    return treeNodeToVNode(subTreeNode, component, f7, initial);
-  });
+  return slotNodes.map(subTreeNode => treeNodeToVNode(subTreeNode, component, f7, initial));
 };
 
-var isTreeNode = function isTreeNode(treeNode) {
+const isTreeNode = treeNode => {
   return isObject(treeNode) && 'props' in treeNode && 'type' in treeNode && 'children' in treeNode;
 };
 
-var treeNodeToVNode = function treeNodeToVNode(treeNode, component, f7, initial, isRoot) {
+const treeNodeToVNode = (treeNode, component, f7, initial, isRoot) => {
   if (!isTreeNode(treeNode)) {
     return String(treeNode);
   }
@@ -372,15 +352,11 @@ var treeNodeToVNode = function treeNodeToVNode(treeNode, component, f7, initial,
     return getSlots(treeNode, component, f7, initial);
   }
 
-  var data = getData(treeNode, component, f7, initial, isRoot);
-  var children = isCustomComponent(treeNode.type) ? [] : getChildren(treeNode, component, f7, initial);
+  const data = getData(treeNode, component, f7, initial, isRoot);
+  const children = isCustomComponent(treeNode.type) ? [] : getChildren(treeNode, component, f7, initial);
   return h(getTagName(treeNode), data, children);
 };
 
-export default function vdom(tree, component, initial) {
-  if (tree === void 0) {
-    tree = {};
-  }
-
+export default function vdom(tree = {}, component, initial) {
   return treeNodeToVNode(tree, component, component.f7, initial, true);
 }