framework7 8.0.0-beta.7 → 8.0.0-beta.8

package/framework7-lite-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7-lite.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7-rtl.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7-rtl.min.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7.less

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/framework7.min.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.7
+ * Framework7 8.0.0-beta.8
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *

package/modules/component/component-class.js

@@ -6,6 +6,118 @@ import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../.
 import vdom from './vdom.js';
 import patch from './patch.js';
 import $jsx from './$jsx.js';
+
+/* eslint-disable no-shadow */
+/* eslint-disable no-return-assign */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-sequences */
+const types = [{
+  name: 'array',
+  init: i => i,
+  type: i => [i].find(Array.isArray),
+  update: (i, o) => [o].filter(Array.isArray).find(() => (i.length = 0, i.push(...o))),
+  insert: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), 0, ...[o].flat());
+  },
+  replace: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), Math.min(++x, 1), ...[o].flat());
+  },
+  append: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.push(...[o].flat());
+  },
+  prepend: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.unshift(...[o].flat());
+  },
+  swap: (i, a, b) => {
+    [i[a], i[b]] = [i[b], i[a]];
+  },
+  fromTo: function (i, a, b) {
+    if (b === void 0) {
+      b = a;
+    }
+    return i.splice(Math.max(b, 0), 0, ...i.splice(Math.max(a, 0), 1));
+  },
+  remove: function (i, o, a) {
+    if (a === void 0) {
+      a = i.map((_, x) => x);
+    }
+    return [o].flat().filter(i => a.includes(i)).sort((a, b) => b - a).forEach(x => i.splice(x, 1));
+  },
+  clear: i => i.length = 0
+}, {
+  name: 'object',
+  init: i => i,
+  type: i => [i].filter(i => [i !== null, i !== undefined].every(i => i)).find(i => Object.getPrototypeOf(i) === Object.prototype),
+  update: (i, o) => Object.assign(i, o),
+  insert: () => {},
+  replace: () => {},
+  append: () => {},
+  prepend: () => {},
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: (i, o) => [o].flat().forEach(k => delete i[k]),
+  clear: i => Object.keys(i).forEach(k => delete i[k])
+}, {
+  name: 'atoms',
+  type: () => true,
+  init: function (i, o) {
+    if (o === void 0) {
+      o = {};
+    }
+    return Object.defineProperty(o, 'value', {
+      get: () => i,
+      set: v => {
+        // eslint-disable-next-line
+        i = v;
+      }
+    }), o;
+  },
+  update: function (i, v) {
+    if (v === void 0) {
+      v = i.value;
+    }
+    i.value = v;
+  },
+  insert: () => ({}),
+  // N/A
+  replace: () => ({}),
+  // N/A
+  append: () => ({}),
+  // N/A
+  prepend: () => ({}),
+  // N/A
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: () => ({}),
+  // N/A
+  clear: i => {
+    i.value = undefined;
+  }
+}];
+
+/* eslint-enable no-shadow */
+/* eslint-enable no-return-assign */
+/* eslint-enable no-plusplus */
+/* eslint-enable no-param-reassign */
+/* eslint-enable no-sequences */
+
 class Component {
   constructor(app, component, props, _temp) {
     if (props === void 0) {
@@ -150,6 +262,84 @@ class Component {
     });
     return $store;
   }
+
+  /* eslint-disable no-sequences */
+  getUseState() {
+    var _this = this;
+    return o => [o].reduce(function (t, _i, _x, _a, i) {
+      if (i === void 0) {
+        i = t.init(_i);
+      }
+      return {
+        state: i,
+        update: v => (t.update(i, v), _this.update()),
+        remove: v => (t.remove(i, v), _this.update()),
+        clear: () => (t.clear(i), _this.update()),
+        insert: (x, v) => (t.insert(i, x, v), _this.update()),
+        replace: (x, v) => (t.replace(i, x, v), _this.update()),
+        append: v => (t.append(i, v), _this.update()),
+        prepend: v => (t.prepend(i, v), _this.update()),
+        swap: (a, b) => (t.swap(i, a, b), _this.update()),
+        fromTo: (a, b) => (t.fromTo(i, a, b), _this.update()),
+        method: function (f) {
+          if (f === void 0) {
+            f = () => ({});
+          }
+          return f(i), _this.update();
+        },
+        async: function (f) {
+          if (f === void 0) {
+            f = () => Promise.reject(i);
+          }
+          return f(i).then(() => _this.update());
+        }
+      };
+    }, types.find(i => i.type(o)));
+  }
+  _getUseState() {
+    var _this2 = this;
+    return o => [o].reduce(function (t, _i, _x, _a, i) {
+      if (i === void 0) {
+        i = t.init(_i);
+      }
+      return [i,
+      // state
+      v => (t.update(i, v), _this2.update()),
+      // update
+      v => (t.remove(i, v), _this2.update()),
+      // remove
+      () => (t.clear(i), _this2.update()),
+      // clear
+      (x, v) => (t.insert(i, x, v), _this2.update()),
+      // insert
+      (x, v) => (t.replace(i, x, v), _this2.update()),
+      // replace
+      v => (t.append(i, v), _this2.update()),
+      // append
+      v => (t.prepend(i, v), _this2.update()),
+      // prepend
+      (a, b) => (t.swap(i, a, b), _this2.update()),
+      // swap
+      (a, b) => (t.fromTo(i, a, b), _this2.update()),
+      // fromTo
+      function (f) {
+        if (f === void 0) {
+          f = () => ({});
+        }
+        return f(i), _this2.update();
+      },
+      // method
+      function (f) {
+        if (f === void 0) {
+          f = () => Promise.reject(i);
+        }
+        return f(i).then(() => _this2.update());
+      } // async
+      ];
+    }, types.find(i => i.type(o)));
+  }
+  /* eslint-enable no-sequences */
+
   getComponentContext(includeHooks) {
     const ctx = {
       $f7route: this.context.f7route,
@@ -165,7 +355,9 @@ class Component {
       $emit: this.emit.bind(this),
       $store: this.getComponentStore(),
       $ref: this.getComponentRef(),
-      $el: {}
+      $el: {},
+      $useState: this.getUseState(),
+      $_useState: this._getUseState()
     };
     Object.defineProperty(ctx.$el, 'value', {
       get: () => {

package/modules/component/component.d.ts

@@ -34,6 +34,22 @@ export interface ComponentContext {
   /** Create reactive variable */
   $ref: (initialValue: any) => { value: any };
 
+  /** Create reactive state */
+  $useState: (initialValue: any) => {
+    state: any;
+    update: (value: any) => void;
+    remove: (pos: any) => void;
+    clear: () => void;
+    insert: (pos: any, value: any) => void;
+    replace: (pos: any, value: any) => void;
+    append: (value: any) => void;
+    prepend: (value: any) => void;
+    swap: (a: any, b: any) => void;
+    fromTo: (a: any, b: any) => void;
+    method: (f: any) => void;
+    async: (f: any) => void;
+  };
+
   /** 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>;
   /** Update/rerender component when state/data changed  */

package/modules/component/parse-component.js

@@ -46,6 +46,7 @@ function parseComponent(componentString) {
           var $update = $$ctx.$update;
           var $store = $$ctx.$store;
           var $ref = $$ctx.$ref;
+          var $useState = $$ctx.$useState;
 
           return $h\`${template}\`
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "8.0.0-beta.7",
+  "version": "8.0.0-beta.8",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "type": "module",
   "exports": {