@xenknight/framework7 0.0.2

package/modules/component/vdom.js

@@ -0,0 +1,319 @@
+/* eslint no-use-before-define: "off" */
+/* eslint import/no-named-as-default: "off" */
+import h from './snabbdom/h.js';
+import customComponents from './custom-components.js';
+import { isObject, eventNameToColonCase } from '../../shared/utils.js';
+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(' ');
+const getTagName = treeNode => {
+  return typeof treeNode.type === 'function' ? treeNode.type.name || 'CustomComponent' : treeNode.type;
+};
+const toCamelCase = name => {
+  return name.split('-').map((word, index) => {
+    if (index === 0) return word.toLowerCase();
+    return word[0].toUpperCase() + word.substr(1);
+  }).join('');
+};
+const propsFromAttrs = function () {
+  const 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(key => {
+      context[toCamelCase(key)] = obj[key];
+    });
+  });
+  return context;
+};
+const createCustomComponent = _ref => {
+  let {
+    f7,
+    treeNode,
+    vnode,
+    data
+  } = _ref;
+  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(c => {
+    if (vnode.data && vnode.data.on && c && c.$el) {
+      Object.keys(vnode.data.on).forEach(eventName => {
+        c.$el.on(eventName, vnode.data.on[eventName]);
+      });
+    }
+    // eslint-disable-next-line
+    vnode.elm.__component__ = c;
+  });
+};
+const updateCustomComponent = vnode => {
+  // eslint-disable-next-line
+  const component = vnode && vnode.elm && vnode.elm.__component__;
+  if (!component) return;
+  const newProps = propsFromAttrs(vnode.data.attrs || {}, vnode.data.props || {});
+  component.children = vnode.data.treeNode.children;
+  Object.assign(component.props, newProps);
+  component.update();
+};
+const destroyCustomComponent = vnode => {
+  // eslint-disable-next-line
+  const component = vnode && vnode.elm && vnode.elm.__component__;
+  if (component) {
+    const {
+      el,
+      $el
+    } = component;
+    if (vnode.data && vnode.data.on && $el) {
+      Object.keys(vnode.data.on).forEach(eventName => {
+        $el.off(eventName, vnode.data.on[eventName]);
+      });
+    }
+    if (component.destroy) component.destroy();
+    if (el && el.parentNode) el.parentNode.removeChild(el);
+    delete vnode.elm.__component__; // eslint-disable-line
+  }
+};
+
+const isCustomComponent = treeNodeType => {
+  return typeof treeNodeType === 'function' || treeNodeType && treeNodeType.indexOf('-') > 0 && customComponents[treeNodeType];
+};
+function getHooks(treeNode, data, f7, initial, isRoot) {
+  const hooks = {};
+  const insert = [];
+  const destroy = [];
+  const update = [];
+  const postpatch = [];
+  let isFakeElement = false;
+  let tagName = getTagName(treeNode);
+  if (data && data.attrs && data.attrs.component) {
+    tagName = data.attrs.component;
+    delete data.attrs.component;
+    isFakeElement = true;
+  }
+  const isCustom = isCustomComponent(treeNode.type);
+  if (isCustom) {
+    insert.push(vnode => {
+      if (vnode.sel !== tagName && !isFakeElement) return;
+      createCustomComponent({
+        f7,
+        treeNode,
+        vnode,
+        data
+      });
+    });
+    destroy.push(vnode => {
+      destroyCustomComponent(vnode);
+    });
+    update.push((oldVnode, vnode) => {
+      updateCustomComponent(vnode);
+    });
+  }
+  if (!isCustom) {
+    if (!data || !data.attrs || !data.attrs.class) return hooks;
+    const classNames = data.attrs.class;
+    classNames.split(' ').forEach(className => {
+      if (!initial) {
+        insert.push(...f7.getVnodeHooks('insert', className));
+      }
+      destroy.push(...f7.getVnodeHooks('destroy', className));
+      update.push(...f7.getVnodeHooks('update', className));
+      postpatch.push(...f7.getVnodeHooks('postpatch', className));
+    });
+  }
+  if (isRoot && !initial) {
+    postpatch.push((oldVnode, vnode) => {
+      const vn = vnode || oldVnode;
+      if (!vn) return;
+      if (vn.data && vn.data.component) {
+        vn.data.component.hook('onUpdated');
+      }
+    });
+  }
+  if (insert.length === 0 && destroy.length === 0 && update.length === 0 && postpatch.length === 0) {
+    return hooks;
+  }
+  if (insert.length) {
+    hooks.insert = vnode => {
+      insert.forEach(f => f(vnode));
+    };
+  }
+  if (destroy.length) {
+    hooks.destroy = vnode => {
+      destroy.forEach(f => f(vnode));
+    };
+  }
+  if (update.length) {
+    hooks.update = (oldVnode, vnode) => {
+      update.forEach(f => f(oldVnode, vnode));
+    };
+  }
+  if (postpatch.length) {
+    hooks.postpatch = (oldVnode, vnode) => {
+      postpatch.forEach(f => f(oldVnode, vnode));
+    };
+  }
+  return hooks;
+}
+const getEventHandler = function (eventHandler, _temp) {
+  let {
+    stop,
+    prevent,
+    once
+  } = _temp === void 0 ? {} : _temp;
+  let fired = false;
+  function handler() {
+    const e = arguments.length <= 0 ? undefined : arguments[0];
+    if (once && fired) return;
+    if (stop) e.stopPropagation();
+    if (prevent) e.preventDefault();
+    fired = true;
+    eventHandler(...arguments);
+  }
+  return handler;
+};
+const getData = (treeNode, component, f7, initial, isRoot) => {
+  const data = {
+    component,
+    treeNode
+  };
+  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) {
+      // Props
+      if (!data.props) data.props = {};
+      if (attrName === 'readonly') {
+        // eslint-disable-next-line
+        attrName = 'readOnly';
+      }
+      if (attrName === 'routeProps') {
+        // eslint-disable-next-line
+        attrName = 'f7RouteProps';
+      }
+      if (tagName === 'option' && attrName === 'value') {
+        if (!data.attrs) data.attrs = {};
+        data.attrs.value = attrValue;
+      }
+      if (BOOLEAN_PROPS.indexOf(attrName) >= 0) {
+        // eslint-disable-next-line
+        data.props[attrName] = attrValue === false ? false : true;
+      } else {
+        data.props[attrName] = attrValue;
+      }
+    } else if (attrName === 'key') {
+      // Key
+      data.key = attrValue;
+    } else if (attrName.indexOf('@') === 0 || attrName.indexOf('on') === 0 && attrName.length > 2) {
+      // Events
+      if (!data.on) data.on = {};
+      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((eventNamePart, eventNameIndex) => {
+          if (eventNameIndex === 0) eventName = eventNamePart;else {
+            if (eventNamePart === 'stop') stop = true;
+            if (eventNamePart === 'prevent') prevent = true;
+            if (eventNamePart === 'once') once = true;
+          }
+        });
+      }
+      data.on[eventName] = getEventHandler(attrValue, {
+        stop,
+        prevent,
+        once
+      });
+    } else if (attrName === 'style') {
+      // Style
+      if (typeof attrValue !== 'string') {
+        data.style = attrValue;
+      } else {
+        if (!data.attrs) data.attrs = {};
+        data.attrs.style = attrValue;
+      }
+    } else {
+      // Rest of attribures
+      if (!data.attrs) data.attrs = {};
+      data.attrs[attrName] = attrValue;
+
+      // ID -> Key
+      if (attrName === 'id' && !data.key && !isRoot) {
+        data.key = attrValue;
+      }
+    }
+  });
+  const hooks = getHooks(treeNode, data, f7, initial, isRoot);
+  hooks.prepatch = (oldVnode, vnode) => {
+    if (!oldVnode || !vnode) return;
+    if (oldVnode && oldVnode.data && oldVnode.data.props) {
+      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 = {};
+        if (oldVnode.data.props[key] === true && !(key in vnode.data.props)) {
+          vnode.data.props[key] = false;
+        }
+      });
+    }
+  };
+  data.hook = hooks;
+  return data;
+};
+const getChildren = (treeNode, component, f7, initial) => {
+  if (treeNode && treeNode.type && SELF_CLOSING.indexOf(treeNode.type) >= 0) {
+    return [];
+  }
+  const children = [];
+  const nodes = treeNode.children;
+  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(...child);
+    } else if (child) {
+      children.push(child);
+    }
+  }
+  return children;
+};
+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';
+    }
+    return childSlotName === slotName;
+  });
+  if (slotNodes.length === 0) {
+    return getChildren(treeNode, component, f7, initial);
+  }
+  return slotNodes.map(subTreeNode => treeNodeToVNode(subTreeNode, component, f7, initial));
+};
+const isTreeNode = treeNode => {
+  return isObject(treeNode) && 'props' in treeNode && 'type' in treeNode && 'children' in treeNode;
+};
+const treeNodeToVNode = (treeNode, component, f7, initial, isRoot) => {
+  if (!isTreeNode(treeNode)) {
+    return String(treeNode);
+  }
+  if (treeNode.type === 'slot') {
+    return getSlots(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 = {};
+  }
+  return treeNodeToVNode(tree, component, component.f7, initial, true);
+}

package/modules/demo-module.js

@@ -0,0 +1,44 @@
+export default {
+  // Module Name
+  name: 'demo-module',
+  install(params) {
+    const Class = this;
+    console.log(Class, params);
+  },
+  create(instance) {
+    console.log('init', instance);
+  },
+  // App Params related to module
+  params: {
+    a: 1,
+    b: 2,
+    c: 3
+  },
+  // Extend Prototype
+  proto: {
+    demo() {
+      return 'demo-module-proto-method';
+    },
+    demoStatic: 'demo-module-proto-static'
+  },
+  // Extend Class, e.g. Class.myMethod
+  static: {
+    demo() {
+      return 'demo-module-class-method';
+    },
+    demoStatic: 'demo-module-class-static'
+  },
+  // Initialized instance Props & Methods
+  instance: {
+    demoProp: true,
+    demoMethod() {
+      return 'demo-method';
+    }
+  },
+  // Add Event Listeners
+  on: {
+    demoEvent(a, b) {
+      console.log('demo-event', a, b);
+    }
+  }
+};

package/modules/device/device.d.ts

@@ -0,0 +1,14 @@
+import { Device } from '../../shared/get-device.js';
+import Framework7, { Framework7Plugin } from '../../components/app/app-class.js';
+
+export namespace Device {
+  interface AppMethods {
+    /** Object with properties about device */
+    device: Device;
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+declare const DeviceModule: Framework7Plugin;
+
+export default DeviceModule;

package/modules/device/device.js

@@ -0,0 +1,44 @@
+import { getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device.js';
+export default {
+  name: 'device',
+  static: {
+    getDevice
+  },
+  on: {
+    init() {
+      const document = getDocument();
+      const device = getDevice();
+      const classNames = [];
+      const html = document.querySelector('html');
+      const metaStatusbar = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
+      if (!html) return;
+      if (device.standalone && device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') {
+        classNames.push('device-full-viewport');
+      }
+
+      // Pixel Ratio
+      classNames.push(`device-pixel-ratio-${Math.floor(device.pixelRatio)}`);
+      // OS classes
+      if (device.os && !device.desktop) {
+        classNames.push(`device-${device.os}`);
+      } else if (device.desktop) {
+        classNames.push('device-desktop');
+        if (device.os) {
+          classNames.push(`device-${device.os}`);
+        }
+      }
+      if (device.cordova) {
+        classNames.push('device-cordova');
+      }
+      if (device.capacitor) {
+        classNames.push('device-capacitor');
+      }
+
+      // Add html classes
+      classNames.forEach(className => {
+        html.classList.add(className);
+      });
+    }
+  }
+};

package/modules/history/history.js

@@ -0,0 +1,12 @@
+import History from '../../shared/history.js';
+export default {
+  name: 'history',
+  static: {
+    history: History
+  },
+  on: {
+    init() {
+      History.init(this);
+    }
+  }
+};

package/modules/resize/resize.d.ts

@@ -0,0 +1,25 @@
+import Framework7, { Framework7Plugin } from '../../components/app/app-class.js';
+
+export namespace Resize {
+  interface AppMethods {
+    /** App width in px */
+    width: number;
+    /** App height in px */
+    height: number;
+    /** App left offset in px */
+    left: number;
+    /** App top offset in px */
+    top: number;
+  }
+  interface AppParams {}
+  interface AppEvents {
+    /** Event will be fired on app resize (window resize). */
+    resize: () => void;
+    /** Event will be fired on app orientation change (window orientantion change). */
+    orientationchange: () => void;
+  }
+}
+
+declare const ResizeModule: Framework7Plugin;
+
+export default ResizeModule;

package/modules/resize/resize.js

@@ -0,0 +1,62 @@
+import { getWindow, getDocument } from 'ssr-window';
+import { getDevice } from '../../shared/get-device.js';
+export default {
+  name: 'resize',
+  create() {
+    const app = this;
+    app.getSize = () => {
+      if (!app.el) return {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0
+      };
+      const offset = app.$el.offset();
+      const [width, height, left, top] = [app.el.offsetWidth, app.el.offsetHeight, offset.left, offset.top];
+      app.width = width;
+      app.height = height;
+      app.left = left;
+      app.top = top;
+      return {
+        width,
+        height,
+        left,
+        top
+      };
+    };
+  },
+  on: {
+    init() {
+      const app = this;
+      const window = getWindow();
+
+      // Get Size
+      app.getSize();
+
+      // Emit resize
+      window.addEventListener('resize', () => {
+        app.emit('resize');
+      }, false);
+
+      // Emit orientationchange
+      window.addEventListener('orientationchange', () => {
+        app.emit('orientationchange');
+      });
+    },
+    orientationchange() {
+      const document = getDocument();
+      const device = getDevice();
+      // Fix iPad weird body scroll
+      if (device.ipad) {
+        document.body.scrollLeft = 0;
+        setTimeout(() => {
+          document.body.scrollLeft = 0;
+        }, 0);
+      }
+    },
+    resize() {
+      const app = this;
+      app.getSize();
+    }
+  }
+};

package/modules/router/app-router-check.js

@@ -0,0 +1,5 @@
+export default function appRouterCheck(router, method) {
+  if (!router.view) {
+    throw new Error(`Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router.${method}(...)`);
+  }
+}

package/modules/router/async-component.js

@@ -0,0 +1,27 @@
+export default function asyncComponent(router, component, resolve, reject) {
+  function resolvePromise(componentPromise) {
+    componentPromise.then(c => {
+      // eslint-disable-next-line
+      resolve({
+        component: c.default || c._default || c
+      });
+    }).catch(err => {
+      reject();
+      throw new Error(err, {
+        cause: err
+      });
+    });
+  }
+  if (component instanceof Promise) {
+    resolvePromise(component);
+    return;
+  }
+  const asyncComponentResult = component.call(router);
+  if (asyncComponentResult instanceof Promise) {
+    resolvePromise(asyncComponentResult);
+  } else {
+    resolve({
+      component: asyncComponentResult
+    });
+  }
+}