framework7 6.3.4 → 7.0.0-beta.3

package/less/mixins.less

@@ -53,8 +53,8 @@
 }
 .dark-vars(@ruleset) {
   & when (@includeDarkTheme) {
-    .theme-dark,
-    &.theme-dark {
+    .dark,
+    &.dark {
       @ruleset();
     }
   }

package/{esm/modules → modules}/clicks/clicks.js

@@ -4,16 +4,16 @@ import ViewClass from '../../components/view/view-class';
 
 function initClicks(app) {
   function handleClicks(e) {
-    var window = getWindow();
-    var $clickedEl = $(e.target);
-    var $clickedLinkEl = $clickedEl.closest('a');
-    var isLink = $clickedLinkEl.length > 0;
-    var url = isLink && $clickedLinkEl.attr('href'); // Check if link is external
+    const window = getWindow();
+    const $clickedEl = $(e.target);
+    const $clickedLinkEl = $clickedEl.closest('a');
+    const isLink = $clickedLinkEl.length > 0;
+    const url = isLink && $clickedLinkEl.attr('href'); // Check if link is external
 
     if (isLink) {
       if ($clickedLinkEl.is(app.params.clicks.externalLinks) || // eslint-disable-next-line
       url && url.indexOf('javascript:') >= 0) {
-        var target = $clickedLinkEl.attr('target');
+        const target = $clickedLinkEl.attr('target');
 
         if (url && window.cordova && window.cordova.InAppBrowser && (target === '_system' || target === '_blank')) {
           e.preventDefault();
@@ -21,7 +21,7 @@ function initClicks(app) {
         } else if (url && window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.Browser && (target === '_system' || target === '_blank')) {
           e.preventDefault();
           window.Capacitor.Plugins.Browser.open({
-            url: url
+            url
           });
         }
 
@@ -30,12 +30,12 @@ function initClicks(app) {
     } // Modules Clicks
 
 
-    Object.keys(app.modules).forEach(function (moduleName) {
-      var moduleClicks = app.modules[moduleName].clicks;
+    Object.keys(app.modules).forEach(moduleName => {
+      const moduleClicks = app.modules[moduleName].clicks;
       if (!moduleClicks) return;
       if (e.preventF7Router) return;
-      Object.keys(moduleClicks).forEach(function (clickSelector) {
-        var matchingClickedElement = $clickedEl.closest(clickSelector).eq(0);
+      Object.keys(moduleClicks).forEach(clickSelector => {
+        const matchingClickedElement = $clickedEl.closest(clickSelector).eq(0);
 
         if (matchingClickedElement.length > 0) {
           moduleClicks[clickSelector].call(app, matchingClickedElement, matchingClickedElement.dataset(), e);
@@ -43,7 +43,7 @@ function initClicks(app) {
       });
     }); // Load Page
 
-    var clickedLinkData = {};
+    let clickedLinkData = {};
 
     if (isLink) {
       e.preventDefault();
@@ -54,10 +54,10 @@ function initClicks(app) {
 
     if (e.preventF7Router) return;
     if ($clickedLinkEl.hasClass('prevent-router') || $clickedLinkEl.hasClass('router-prevent')) return;
-    var validUrl = url && url.length > 0 && url[0] !== '#';
+    const validUrl = url && url.length > 0 && url[0] !== '#';
 
     if (validUrl || $clickedLinkEl.hasClass('back')) {
-      var view;
+      let view;
 
       if (clickedLinkData.view && clickedLinkData.view === 'current') {
         view = app.views.current;
@@ -97,9 +97,10 @@ export default {
     }
   },
   on: {
-    init: function init() {
-      var app = this;
+    init() {
+      const app = this;
       initClicks(app);
     }
+
   }
 };

package/modules/component/$h.js

@@ -0,0 +1,14 @@
+import htm from 'htm';
+import { flattenArray } from '../../shared/utils';
+const ignoreChildren = [false, null, '', undefined];
+
+const h = (type, props, ...children) => {
+  return {
+    type,
+    props: props || {},
+    children: flattenArray(children.filter(child => ignoreChildren.indexOf(child) < 0))
+  };
+};
+
+const $h = htm.bind(h);
+export default $h;

package/modules/component/$jsx.js

@@ -0,0 +1,18 @@
+import { flattenArray } from '../../shared/utils';
+const ignoreChildren = [false, null, '', undefined];
+
+const $jsx = (type, props, ...children) => {
+  const flatChildren = flattenArray((children || []).filter(child => ignoreChildren.indexOf(child) < 0));
+
+  if (type === 'Fragment') {
+    return flatChildren;
+  }
+
+  return {
+    type,
+    props: props || {},
+    children: flatChildren
+  };
+};
+
+export default $jsx;

package/modules/component/component-class.js

@@ -0,0 +1,382 @@
+/* eslint no-underscore-dangle: "off" */
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7';
+import $h from './$h';
+import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils';
+import vdom from './vdom';
+import patch from './patch';
+
+class Component {
+  constructor(app, component, props = {}, {
+    el,
+    context,
+    children
+  } = {}) {
+    const document = getDocument();
+    merge(this, {
+      f7: app,
+      props: props || {},
+      context: context || {},
+      id: component.id || generateId(),
+      children: children || [],
+      theme: {
+        ios: app.theme === 'ios',
+        md: app.theme === 'md',
+        aurora: app.theme === 'aurora'
+      },
+      style: component.style,
+      __updateQueue: [],
+      __eventHandlers: [],
+      __onceEventHandlers: [],
+      __onBeforeMount: [],
+      __onMounted: [],
+      __onBeforeUpdate: [],
+      __onUpdated: [],
+      __onBeforeUnmount: [],
+      __onUnmounted: []
+    });
+
+    const createComponent = () => {
+      return component(this.props, this.getComponentContext(true));
+    };
+
+    const getRenderFuncion = componentResult => new Promise((resolve, reject) => {
+      if (typeof componentResult === 'function') {
+        resolve(componentResult);
+      } else if (componentResult instanceof Promise) {
+        componentResult.then(render => {
+          resolve(render);
+        }).catch(err => {
+          reject(err);
+        });
+      } else {
+        reject(new Error('Framework7: Component render function is not a "function" type. Didn\'t you forget to "return $render"?'));
+      }
+    });
+
+    return new Promise((resolve, reject) => {
+      const componentResult = createComponent();
+      getRenderFuncion(componentResult).then(render => {
+        this.renderFunction = render;
+        const tree = this.render();
+
+        if (el) {
+          this.vnode = vdom(tree, this, true);
+
+          if (this.style) {
+            this.styleEl = document.createElement('style');
+            this.styleEl.innerHTML = this.style;
+          }
+
+          this.el = el;
+          patch(this.el, this.vnode);
+          this.el = this.vnode.elm;
+          this.$el = $(this.el);
+          this.attachEvents();
+          this.el.f7Component = this;
+          this.mount();
+          resolve(this);
+          return;
+        } // Make Dom
+
+
+        if (tree) {
+          this.vnode = vdom(tree, this, true);
+          this.el = document.createElement(this.vnode.sel || 'div');
+          patch(this.el, this.vnode);
+          this.$el = $(this.el);
+        }
+
+        if (this.style) {
+          this.styleEl = document.createElement('style');
+          this.styleEl.innerHTML = this.style;
+        }
+
+        this.attachEvents();
+
+        if (this.el) {
+          this.el.f7Component = this;
+        }
+
+        resolve(this);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+
+  on(eventName, handler) {
+    if (!this.__eventHandlers) return;
+
+    this.__eventHandlers.push({
+      eventName,
+      handler
+    });
+  }
+
+  once(eventName, handler) {
+    if (!this.__eventHandlers) return;
+
+    this.__onceEventHandlers.push({
+      eventName,
+      handler
+    });
+  }
+
+  getComponentRef() {
+    const self = this;
+    return initialValue => {
+      let value = initialValue;
+      const obj = {};
+      Object.defineProperty(obj, 'value', {
+        get() {
+          return value;
+        },
+
+        set(v) {
+          value = v;
+          self.update();
+        }
+
+      });
+      return obj;
+    };
+  }
+
+  getComponentStore() {
+    const {
+      state,
+      _gettersPlain,
+      dispatch
+    } = this.f7.store;
+    const $store = {
+      state,
+      dispatch
+    };
+    $store.getters = new Proxy(_gettersPlain, {
+      get: (target, prop) => {
+        const obj = target[prop];
+
+        const callback = v => {
+          obj.value = v;
+          this.update();
+        };
+
+        obj.onUpdated(callback);
+        return obj;
+      }
+    });
+    return $store;
+  }
+
+  getComponentContext(includeHooks) {
+    const ctx = {
+      $f7route: this.context.f7route,
+      $f7router: this.context.f7router,
+      $h,
+      $,
+      $id: this.id,
+      $f7: this.f7,
+      $f7ready: this.f7ready.bind(this),
+      $theme: this.theme,
+      $tick: this.tick.bind(this),
+      $update: this.update.bind(this),
+      $emit: this.emit.bind(this),
+      $store: this.getComponentStore(),
+      $ref: this.getComponentRef(),
+      $el: {}
+    };
+    Object.defineProperty(ctx.$el, 'value', {
+      get: () => {
+        return this.$el;
+      }
+    });
+    if (includeHooks) Object.assign(ctx, {
+      $on: this.on.bind(this),
+      $once: this.once.bind(this),
+      $onBeforeMount: handler => this.__onBeforeMount.push(handler),
+      $onMounted: handler => this.__onMounted.push(handler),
+      $onBeforeUpdate: handler => this.__onBeforeUpdate.push(handler),
+      $onUpdated: handler => this.__onUpdated.push(handler),
+      $onBeforeUnmount: handler => this.__onBeforeUnmount.push(handler),
+      $onUnmounted: handler => this.__onUnmounted.push(handler)
+    });
+    return ctx;
+  }
+
+  render() {
+    return this.renderFunction(this.getComponentContext());
+  }
+
+  emit(name, data) {
+    if (!this.el) return;
+    this.$el.trigger(name, data);
+  }
+
+  attachEvents() {
+    const {
+      $el
+    } = this;
+    if (!this.__eventHandlers) return;
+
+    this.__eventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
+      $el.on(eventNameToColonCase(eventName), handler);
+    });
+
+    this.__onceEventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
+      $el.once(eventNameToColonCase(eventName), handler);
+    });
+  }
+
+  detachEvents() {
+    const {
+      $el
+    } = this;
+    if (!this.__eventHandlers) return;
+
+    this.__eventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
+      $el.on(eventNameToColonCase(eventName), handler);
+    });
+
+    this.__onceEventHandlers.forEach(({
+      eventName,
+      handler
+    }) => {
+      $el.once(eventNameToColonCase(eventName), handler);
+    });
+  }
+
+  startUpdateQueue() {
+    const window = getWindow();
+    if (this.__requestAnimationFrameId) return;
+
+    const update = () => {
+      this.hook('onBeforeUpdate');
+      const tree = this.render(); // Make Dom
+
+      if (tree) {
+        const newVNode = vdom(tree, this, false);
+        this.vnode = patch(this.vnode, newVNode);
+      }
+    };
+
+    this.__requestAnimationFrameId = window.requestAnimationFrame(() => {
+      if (this.__updateIsPending) update();
+      let resolvers = [...this.__updateQueue];
+      this.__updateQueue = [];
+      this.__updateIsPending = false;
+      window.cancelAnimationFrame(this.__requestAnimationFrameId);
+      delete this.__requestAnimationFrameId;
+      delete this.__updateIsPending;
+      resolvers.forEach(resolver => resolver());
+      resolvers = [];
+    });
+  }
+
+  tick(callback) {
+    return new Promise(resolve => {
+      function resolver() {
+        resolve();
+        if (callback) callback();
+      }
+
+      this.__updateQueue.push(resolver);
+
+      this.startUpdateQueue();
+    });
+  }
+
+  update(callback) {
+    if (this.__destroyed) return new Promise(() => {});
+    return new Promise(resolve => {
+      const resolver = () => {
+        resolve();
+        if (callback) callback();
+      };
+
+      this.__updateIsPending = true;
+
+      this.__updateQueue.push(resolver);
+
+      this.startUpdateQueue();
+    });
+  }
+
+  setState(callback) {
+    return this.update(callback);
+  }
+
+  f7ready(callback) {
+    if (this.f7.initialized) {
+      callback(this.f7);
+      return;
+    }
+
+    this.f7.once('init', () => {
+      callback(this.f7);
+    });
+  }
+
+  mount(mountMethod) {
+    this.hook('onBeforeMount', this.$el);
+    if (this.styleEl) $('head').append(this.styleEl);
+    if (mountMethod) mountMethod(this.el);
+    this.hook('onMounted', this.$el);
+  }
+
+  destroy() {
+    if (this.__destroyed) return;
+    const window = getWindow();
+    this.hook('onBeforeUnmount');
+    if (this.styleEl) $(this.styleEl).remove();
+    this.detachEvents();
+    this.hook('onUnmounted'); // Delete component instance
+
+    if (this.el && this.el.f7Component) {
+      this.el.f7Component = null;
+      delete this.el.f7Component;
+    } // Patch with empty node
+
+
+    if (this.vnode) {
+      this.vnode = patch(this.vnode, {
+        sel: this.vnode.sel,
+        data: {}
+      });
+    } // Clear update queue
+
+
+    window.cancelAnimationFrame(this.__requestAnimationFrameId);
+    this.__updateQueue = [];
+    this.__eventHandlers = [];
+    this.__onceEventHandlers = [];
+    this.__onBeforeMount = [];
+    this.__onMounted = [];
+    this.__onBeforeUpdate = [];
+    this.__onUpdated = [];
+    this.__onBeforeUnmount = [];
+    this.__onUnmounted = []; // Delete all props
+
+    deleteProps(this);
+    this.__destroyed = true;
+  }
+
+  hook(name, ...args) {
+    if (this.__destroyed) return;
+    this[`__${name}`].forEach(handler => {
+      handler(...args);
+    });
+  }
+
+}
+
+export default Component;

package/modules/component/component.d.ts

@@ -32,6 +32,8 @@ export interface ComponentContext {
   $el: {
     value: Dom7Array;
   };
+  /** Create reactive variable */
+  $ref: (initialValue: any) => { value: any };
 
   /** Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.  */
   $tick: (callback?: () => void) => Promise<any>;

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

@@ -15,30 +15,36 @@ export { Component, $jsx };
 export default {
   name: 'component',
   static: {
-    Component: Component,
-    registerComponent: registerComponent,
-    unregisterComponent: unregisterComponent
+    Component,
+    registerComponent,
+    unregisterComponent
   },
-  create: function create() {
-    var app = this;
+
+  create() {
+    const app = this;
     app.component = {
-      registerComponent: registerComponent,
-      unregisterComponent: unregisterComponent,
-      parse: function parse(componentString) {
+      registerComponent,
+      unregisterComponent,
+
+      parse(componentString) {
         return parseComponent(componentString);
       },
-      create: function create(component, props, _ref) {
-        var root = _ref.root,
-            el = _ref.el,
-            context = _ref.context,
-            children = _ref.children;
+
+      create(component, props, {
+        root,
+        el,
+        context,
+        children
+      }) {
         return new Component(app, component, props, {
-          root: root,
-          el: el,
-          context: context,
-          children: children
+          root,
+          el,
+          context,
+          children
         });
       }
+
     };
   }
+
 };

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

@@ -3,13 +3,13 @@ import $ from '../../shared/dom7';
 function invokeHandler(handler, event, args) {
   if (typeof handler === 'function') {
     // call function handler
-    handler.apply(void 0, [event].concat(args));
+    handler(event, ...args);
   }
 }
 
 function handleEvent(event, args, vnode) {
-  var name = event.type;
-  var on = vnode.data.on; // call event handler(s) if exists
+  const name = event.type;
+  const on = vnode.data.on; // call event handler(s) if exists
 
   if (on && on[name]) {
     invokeHandler(on[name], event, args, vnode);
@@ -17,21 +17,17 @@ function handleEvent(event, args, vnode) {
 }
 
 function createListener() {
-  return function handler(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
+  return function handler(event, ...args) {
     handleEvent(event, args, handler.vnode);
   };
 }
 
 function updateEvents(oldVnode, vnode) {
-  var oldOn = oldVnode.data.on;
-  var oldListener = oldVnode.listener;
-  var oldElm = oldVnode.elm;
-  var on = vnode && vnode.data.on;
-  var elm = vnode && vnode.elm; // optimization for reused immutable handlers
+  const oldOn = oldVnode.data.on;
+  const oldListener = oldVnode.listener;
+  const oldElm = oldVnode.elm;
+  const on = vnode && vnode.data.on;
+  const elm = vnode && vnode.elm; // optimization for reused immutable handlers
 
   if (oldOn === on) {
     return;
@@ -41,11 +37,11 @@ function updateEvents(oldVnode, vnode) {
   if (oldOn && oldListener) {
     // if element changed or deleted we remove all existing listeners unconditionally
     if (!on) {
-      Object.keys(oldOn).forEach(function (name) {
+      Object.keys(oldOn).forEach(name => {
         $(oldElm).off(name, oldListener);
       });
     } else {
-      Object.keys(oldOn).forEach(function (name) {
+      Object.keys(oldOn).forEach(name => {
         if (!on[name]) {
           $(oldElm).off(name, oldListener);
         }
@@ -56,17 +52,17 @@ function updateEvents(oldVnode, vnode) {
 
   if (on) {
     // reuse existing listener or create new
-    var listener = oldVnode.listener || createListener();
+    const listener = oldVnode.listener || createListener();
     vnode.listener = listener; // update vnode for listener
 
     listener.vnode = vnode; // if element changed or added we add all needed listeners unconditionally
 
     if (!oldOn) {
-      Object.keys(on).forEach(function (name) {
+      Object.keys(on).forEach(name => {
         $(elm).on(name, listener);
       });
     } else {
-      Object.keys(on).forEach(function (name) {
+      Object.keys(on).forEach(name => {
         if (!oldOn[name]) {
           $(elm).on(name, listener);
         }