@wiajs/core 0.1.19 → 1.0.2

package/dist/core.cmn.js

@@ -0,0 +1,2209 @@
+/*!
+  * wia core v1.0.1
+  * (c) 2015-2023 Sibyl Yu and contributors
+  * Released under the MIT License.
+  */
+'use strict';
+
+/**
+ * promise version ajax get、post
+ * return Promise objext.
+ * get move to base.js
+ */
+
+class Ajax {
+  post(url, data) {
+    const pm = new Promise((res, rej) => {
+      const xhr = $.getXhr();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) res(xhr.responseText);
+          else rej(new Error(xhr.statusText), xhr.responseText);
+        }
+        /*
+          if ((xhr.readyState === 4) && (xhr.status === 200)) {
+            cb(xhr.responseText);
+          }
+      */
+      };
+
+      // 异步 post,回调通知
+      xhr.open('POST', url, true);
+      let param = data;
+      if (typeof data === 'object') param = objToParam(data);
+
+      // 发送 FormData 数据, 会自动设置为 multipart/form-data
+      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+      // xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=AaB03x');
+      // alert(param);
+      xhr.send(param);
+    });
+
+    return pm;
+  }
+
+  /**
+   * xmlHttpRequest POST 方法
+   * 发送 FormData 数据, 会自动设置为 multipart/form-data
+   * 其他数据,应该是 application/x-www-form-urlencoded
+   * @param url post的url地址
+   * @param data 要post的数据
+   * @param cb 回调
+   */
+  postForm(url, data) {
+    const pm = new Promise((res, rej) => {
+      const xhr = $.getXhr();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) res(null, xhr.responseText);
+          else rej(new Error(xhr.status), xhr.responseText);
+        }
+      };
+
+      // 异步 post,回调通知
+      xhr.open('POST', url, true);
+      // 发送 FormData 数据, 会自动设置为 multipart/form-data
+      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+      // xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=AaB03x');
+      xhr.send(data);
+    });
+
+    return pm;
+  }
+
+  get(url, param) {
+    return $.get(url, param);
+  }
+}
+
+function objToParam(obj) {
+  let rs = '';
+
+  const arr = [];
+  for (const k in obj) {
+    if (obj.hasOwnProperty(k)) {
+      arr.push(`${k}=${obj[k]}`);
+    }
+    // rs += `${k}=${obj[k]}&`;
+  }
+  // 排序
+  rs = arr.sort().join('&');
+  // alert(rs);
+  return rs;
+}
+
+/* eslint no-control-regex: "off" */
+
+let uniqueNumber = 1;
+
+const Utils = {
+  uniqueNumber() {
+    uniqueNumber += 1;
+    return uniqueNumber;
+  },
+  id(mask = 'xxxxxxxxxx', map = '0123456789abcdef') {
+    return $.uid(mask, map);
+  },
+  mdPreloaderContent: `
+		<span class="preloader-inner">
+			<svg viewBox="0 0 36 36">
+				<circle cx="18" cy="18" r="16"></circle>
+			</svg>
+    </span>
+  `.trim(),
+  iosPreloaderContent: `
+		<span class="preloader-inner">
+			${[0, 1, 2, 3, 4, 5, 6, 7].map(() => '<span class="preloader-inner-line"></span>').join('')}
+		</span>
+  `.trim(),
+  auroraPreloaderContent:`
+  <span class="preloader-inner">
+    <span class="preloader-inner-circle"></span>
+  </span>
+`,
+  eventNameToColonCase(eventName) {
+    let hasColon;
+    return eventName
+      .split('')
+      .map((char, index) => {
+        if (char.match(/[A-Z]/) && index !== 0 && !hasColon) {
+          hasColon = true;
+          return `:${char.toLowerCase()}`;
+        }
+        return char.toLowerCase();
+      })
+      .join('');
+  },
+  deleteProps(obj) {
+    $.deleteProps(obj);
+  },
+  nextTick(callback, delay = 0) {
+    return setTimeout(callback, delay);
+  },
+  nextFrame(cb) {
+    return $.nextFrame(cb);
+  },
+  now() {
+    return Date.now();
+  },
+  requestAnimationFrame(cb) {
+    return $.requestAnimationFrame(cb);
+  },
+  cancelAnimationFrame(id) {
+    return $.cancelAnimationFrame(id);
+  },
+  parseUrlQuery(url) {
+    return $.urlParam(url);
+  },
+  getTranslate(el, axis = 'x') {
+    return $.getTranslate(el, axis);
+  },
+  serializeObject(obj, parents = []) {
+    if (typeof obj === 'string') return obj;
+    const resultArray = [];
+    const separator = '&';
+    let newParents;
+    function varName(name) {
+      if (parents.length > 0) {
+        let parentParts = '';
+        for (let j = 0; j < parents.length; j += 1) {
+          if (j === 0) parentParts += parents[j];
+          else parentParts += `[${encodeURIComponent(parents[j])}]`;
+        }
+        return `${parentParts}[${encodeURIComponent(name)}]`;
+      }
+      return encodeURIComponent(name);
+    }
+    function varValue(value) {
+      return encodeURIComponent(value);
+    }
+    Object.keys(obj).forEach(prop => {
+      let toPush;
+      if (Array.isArray(obj[prop])) {
+        toPush = [];
+        for (let i = 0; i < obj[prop].length; i += 1) {
+          if (!Array.isArray(obj[prop][i]) && typeof obj[prop][i] === 'object') {
+            newParents = parents.slice();
+            newParents.push(prop);
+            newParents.push(String(i));
+            toPush.push(Utils.serializeObject(obj[prop][i], newParents));
+          } else {
+            toPush.push(`${varName(prop)}[]=${varValue(obj[prop][i])}`);
+          }
+        }
+        if (toPush.length > 0) resultArray.push(toPush.join(separator));
+      } else if (obj[prop] === null || obj[prop] === '') {
+        resultArray.push(`${varName(prop)}=`);
+      } else if (typeof obj[prop] === 'object') {
+        // Object, convert to named array
+        newParents = parents.slice();
+        newParents.push(prop);
+        toPush = Utils.serializeObject(obj[prop], newParents);
+        if (toPush !== '') resultArray.push(toPush);
+      } else if (typeof obj[prop] !== 'undefined' && obj[prop] !== '') {
+        // Should be string or plain value
+        resultArray.push(`${varName(prop)}=${varValue(obj[prop])}`);
+      } else if (obj[prop] === '') resultArray.push(varName(prop));
+    });
+    return resultArray.join(separator);
+  },
+  isObject(o) {
+    return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object;
+  },
+  merge(...args) {
+    return $.merge(...args);
+  },
+  extend(...args) {
+    const to = args[0];
+    args.splice(0, 1);
+    return $.assign(to, ...args);
+  },
+  // ���෽������ʵ�������������ԡ���������
+	bindMethods(instance, obj) { 
+		Object.keys(obj).forEach((key) => {
+			if (this.isObject(obj[key])) {
+				Object.keys(obj[key]).forEach((subKey) => {
+					if (typeof obj[key][subKey] === 'function') {
+						obj[key][subKey] = obj[key][subKey].bind(instance);
+					}
+				});
+			}
+			instance[key] = obj[key];
+		});
+	},	
+  colorHexToRgb(hex) {
+    const h = hex.replace(
+      /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+      (m, r, g, b) => r + r + g + g + b + b
+    );
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
+    return result ? result.slice(1).map(n => parseInt(n, 16)) : null;
+  },
+  colorRgbToHex(r, g, b) {
+    const result = [r, g, b]
+      .map(n => {
+        const hex = n.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+      })
+      .join('');
+    return `#${result}`;
+  },
+  colorRgbToHsl(r, g, b) {
+    r /= 255; // eslint-disable-line
+    g /= 255; // eslint-disable-line
+    b /= 255; // eslint-disable-line
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h;
+    if (d === 0) h = 0;
+    else if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else if (max === b) h = (r - g) / d + 4;
+    const l = (min + max) / 2;
+    const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+    if (h < 0) h = 360 / 60 + h;
+    return [h * 60, s, l];
+  },
+  colorHslToRgb(h, s, l) {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const hp = h / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    let rgb1;
+    if (Number.isNaN(h) || typeof h === 'undefined') {
+      rgb1 = [0, 0, 0];
+    } else if (hp <= 1) rgb1 = [c, x, 0];
+    else if (hp <= 2) rgb1 = [x, c, 0];
+    else if (hp <= 3) rgb1 = [0, c, x];
+    else if (hp <= 4) rgb1 = [0, x, c];
+    else if (hp <= 5) rgb1 = [x, 0, c];
+    else if (hp <= 6) rgb1 = [c, 0, x];
+    const m = l - c / 2;
+    return rgb1.map(n => Math.max(0, Math.min(255, Math.round(255 * (n + m)))));
+  },
+  colorHsbToHsl(h, s, b) {
+    const HSL = {
+      h,
+      s: 0,
+      l: 0,
+    };
+    const HSB = {h, s, b};
+
+    HSL.l = ((2 - HSB.s) * HSB.b) / 2;
+    HSL.s =
+      HSL.l && HSL.l < 1 ? (HSB.s * HSB.b) / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
+
+    return [HSL.h, HSL.s, HSL.l];
+  },
+  colorHslToHsb(h, s, l) {
+    const HSB = {
+      h,
+      s: 0,
+      b: 0,
+    };
+    const HSL = {h, s, l};
+
+    const t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l);
+    HSB.b = HSL.l + t;
+    HSB.s = HSL.l > 0 ? (2 * t) / HSB.b : HSB.s;
+
+    return [HSB.h, HSB.s, HSB.b];
+  },
+  colorThemeCSSProperties(...args) {
+    let hex;
+    let rgb;
+    if (args.length === 1) {
+      hex = args[0];
+      rgb = Utils.colorHexToRgb(hex);
+    } else if (args.length === 3) {
+      rgb = args;
+      hex = Utils.colorRgbToHex(...rgb);
+    }
+    if (!rgb) return {};
+    const hsl = Utils.colorRgbToHsl(...rgb);
+    const hslShade = [hsl[0], hsl[1], Math.max(0, hsl[2] - 0.08)];
+    const hslTint = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.08)];
+    const shade = Utils.colorRgbToHex(...Utils.colorHslToRgb(...hslShade));
+    const tint = Utils.colorRgbToHex(...Utils.colorHslToRgb(...hslTint));
+    return {
+      '--f7-theme-color': hex,
+      '--f7-theme-color-rgb': rgb.join(', '),
+      '--f7-theme-color-shade': shade,
+      '--f7-theme-color-tint': tint,
+    };
+  },
+};
+
+/**
+ * 事件类，提供对象的事件侦听、触发，只在类实例中有效。
+ * 需要支持事件的对象，可以从这个类继承，则类实例具备事件功能。
+ * Fork from Framework7，
+ */
+class Event {
+  /**
+   * 页面Page实例事件触发，f7 UI组件需要
+   * @param {Object} params 参数
+   * @param {Array} parents 事件组件的父对象，用于向上传播事件！
+   * 组件的parents 是 Page实例，Page实例的Parent是App实例
+   * @param {String} pre 向上传播前缀，避免事件重名冲突
+   * @private
+   */
+  constructor(params = {}, parents = [], pre = '') {
+    const m = this;
+    m.params = params;
+
+    if (parents) {
+      if (!Array.isArray(parents)) m.eventsParents = [parents];
+      else m.eventsParents = parents.filter(p => p);
+    } else m.eventsParents = [];
+
+    m.eventsListeners = {};
+    m.pre = pre;
+
+    // 通过 params 中的 on 加载事件响应
+    if (m.params && m.params.on) {
+      Object.keys(m.params.on).forEach(eventName => {
+        m.on(eventName, m.params.on[eventName]);
+      });
+    }
+  }
+
+  /**
+   * 添加事件响应函数
+   * @param {*} events 多个事件用空格隔开
+   * @param {*} handler 事件响应函数
+   * @param {*} priority 是否优先，缺省不优先
+   * @returns
+   */
+  on(events, handler, priority = false) {
+    const m = this;
+    if (typeof handler !== 'function') return m;
+    const method = priority ? 'unshift' : 'push';
+    events.split(' ').forEach(event => {
+      const lis = {
+        owner: '',
+        appName: '',
+        handler,
+      };
+
+      // 应用事件
+      if (event.includes('app::')) {
+        let page = null;
+        if ($.isPage(m)) page = m;
+        else if ($.isPage(m?.page)) page = m.page;
+        else if ($.isPage(m?.parent)) page = m.parent;
+
+        if (page && page.app && $.isApp(page.app)) {
+          lis.owner = page.owner;
+          lis.appName = page.appName;
+          const {app} = page;
+
+          const ev = event.replace('app::', '');
+          if (!app.eventsListeners[ev]) app.eventsListeners[ev] = [];
+          app.eventsListeners[ev][method](lis);
+        }
+      } else {
+        // 对象自身事件
+        if (!m.eventsListeners[event]) m.eventsListeners[event] = [];
+
+        m.eventsListeners[event][method](lis);
+      }
+    });
+
+    return m;
+  }
+
+  /**
+   * 调用一次后清除
+   * @param {*} events 多个事件用空格隔开
+   * @param {*} handler 事件响应函数
+   * @param {*} priority 是否优先，缺省不优先
+   * @returns
+   */
+  once(events, handler, priority = false) {
+    const m = this;
+    if (typeof handler !== 'function') return m;
+
+    // 调用一次后自动删除事件
+    function onceHandler(...args) {
+      m.off(events, onceHandler);
+      if (onceHandler.proxy) {
+        onceHandler.proxy.apply(m, args);
+        delete onceHandler.proxy;
+      }
+    }
+
+    onceHandler.proxy = handler;
+    return m.on(events, onceHandler, priority);
+  }
+
+  /**
+   * 删除事件响应函数
+   * @param {*} events 事件，多个事件空格隔开，不传则清除该对象所有事件响应函数
+   * @param {*} handler 事件响应函数
+   * @returns
+   */
+  off(events, handler) {
+    const m = this;
+    if (!m.eventsListeners) return m;
+
+    if (events) {
+      events.split(' ').forEach(event => {
+        if (typeof handler === 'undefined') m.eventsListeners[event] = [];
+        else if (m.eventsListeners[event]) {
+          const arr = m.eventsListeners[event];
+          for (let i = arr.length - 1; i >= 0; i--) {
+            const lis = arr[i];
+            if (lis.handler === handler || lis.handler?.proxy === handler)
+              arr.splice(i, 1);
+          }
+        }
+      });
+    } else m.eventsListeners = {};
+
+    return m;
+  }
+
+  /**
+   * 事件触发，应用事件只能由 Page 实例触发，才能按同页面所有者触发事件
+   * @param {*} 事件，字符串、数组或对象
+   * @param {*} 数据，传递到事件响应函数的数据
+   */
+  emit(...args) {
+    const m = this;
+    if (!m.eventsListeners) return m;
+
+    let events;
+    let data;
+    let context;
+    let eventsParents;
+
+    let pop = false;
+
+    let event = args[0]; // 事件
+    if (!event) return m;
+
+    // 原始触发事件
+    if (typeof event === 'string' || Array.isArray(event)) {
+      event = event.split(' ');
+      // 带前缀，自动添加前缀向父节点传递事件
+      if (m.pre) {
+        events = [];
+        event.forEach(ev => {
+          events.push(`.${ev}`); // 本组件事件
+          events.push(`${m.pre}${ev[0].toUpperCase()}${ev.substr(1)}`); // 向上事件
+        });
+      } else events = event;
+
+      data = args.slice(1, args.length);
+      context = m;
+      eventsParents = m.eventsParents;
+    } else {
+      // 冒泡向上传递事件，或指定对象触发事件
+      pop = event.pop;
+      events = event.events;
+      data = event.data;
+      context = event.context || m;
+      eventsParents = event.local ? [] : event.parents || m.eventsParents;
+    }
+
+    const eventsArray = Array.isArray(events) ? events : events.split(' ');
+
+    // 本对象事件
+    // ['local:event'] or ['.event']，不向父组件传递
+    const selfEvents = eventsArray.map(ev => ev.replace(/local::|^[.]/, ''));
+
+    // 非本对象事件，向上传递时，转换为对象，记录来源
+    let parentEvents = null;
+    if (pop) parentEvents = event;
+    else {
+      const popEvents = eventsArray.filter(ev => !ev.match(/^local::|^[.]/));
+      if (popEvents?.length) {
+        parentEvents = {
+          pop: true, // 冒泡事件
+          events: popEvents,
+          context: m, // 事件发起者
+          data,
+          owner: '',
+          appName: '',
+        };
+      }
+    }
+
+    // 记录page属性，标记事件来源，冒泡到app时判断是否触发本页面应用事件
+    if (parentEvents && $.isPage(m)) {
+      parentEvents.owner = m?.owner;
+      parentEvents.appName = m?.appName;
+    }
+
+    // 调用对象事件函数，父对象emit后，调用父对象事件函数
+    selfEvents.forEach(ev => {
+      if (m.eventsListeners && m.eventsListeners[ev]) {
+        const handlers = [];
+        m.eventsListeners[ev].forEach(lis => {
+          // 应用事件，需判断所有者
+          if (lis.owner && lis.appName) {
+            // 同一html页面运行多个应用页面层时，只有所有者、应用名称相同才能触发跨页面事件，避免跨应用事件安全问题。
+            // 页面冒泡到应用事件
+            if (pop && lis.owner === ev.owner && lis.appName === ev.appName)
+              handlers.push(lis.handler);
+          } else handlers.push(lis.handler);
+        });
+
+        // 由 window 对象异步调用，而不是事件对象直接调用
+        handlers.forEach(fn => {
+          // setTimeout(() => fn.apply(context, data), 0);
+          fn.apply(context, data); // this 指针为原始触发事件对象，事件函数中可引用
+        });
+      }
+    });
+
+    // 向上一级一级迭代冒泡传递后，触发父对象事件响应函数
+    if (parentEvents && eventsParents?.length > 0) {
+      eventsParents.forEach(eventsParent => eventsParent.emit(parentEvents));
+    }
+
+    return m;
+  }
+}
+
+/**
+ * 所有页面从该类继承，并必须实现 load 事件！
+ * 事件
+ *  五个个事件：load -> ready -> show / hide -> unload
+ *  load：必选，加载视图、代码，第一次加载后缓存，后续不会重复加载，动态代码也要在这里加载
+ *    参数；param
+ *    如果需要前路由数据，通过 $.lastPage.data 访问
+ *    view 还未创建，隐藏page 不存在
+ *  ready：可选，对视图中的对象事件绑定，已经缓存的视图，比如回退，不会再次触发 ready
+ *    参数；view、param
+ *    如果需要前路由数据，通过 $.lastPage.data 访问
+ *  show：可选，视图显示时触发，可以接收参数，操作视图，无论是否缓存（比如回退）都会触发
+ *    对于已经加载、绑定隐藏（缓存）的页面，重新显示时，不会触发load和ready，只会触发show
+ *    参数：view、param
+ *  hide：可选，视图卸载删除时触发，适合保存卸载页面的数据，卸载的页面从页面删除，进入缓存
+ *  unload：可选，页面从缓存中删除时触发，目前暂未实现
+ *
+ * 数据传递
+ *  每个页面都能访问当前路由，路由存在以下参数，用户跨页面数据传递
+ *  url：页面跳转时的原始网址
+ *  param：页面网址及go中传入的参数合并，保存在 param 中
+ *  data：路由中需要保存的数据
+ *  view：当前页面层，dom 对象，已经包括绑定的事件
+ *  $.page：当前页面对象
+ *  $.lastPage：前路由，可通过该参数，获取前路由的 data，在后续路由中使用
+ *
+ */
+
+
+class Page extends Event {
+  constructor(app, name, title, style) {
+    super(null, [app]);
+    this.app = app; // 应用实例
+    this.cfg = app.cfg;
+    this.name = name; // 名称，可带路径 admin/login
+    this.title = title; // 浏览器标题
+    this.style = style || `./page/${name}.css`;
+
+    // 以下变量由路由器赋值
+    this.owner = '';
+    this.appName = '';
+    this.path = '';
+    this.view = null; // 页面的div层$Dom对象，router创建实例时赋值
+    this.dom = null; // 页面的div层dom对象，router创建实例时赋值
+    this.$el = null; // $dom === view
+    this.el = null; // dom === dom
+
+    this.html = ''; // 页面html文本，router创建实例时赋值
+    this.css = ''; // 页面css样式，router创建实例时赋值
+    this.js = ''; // 页面代码，router创建实例时赋值
+    this.data = {}; // 页面数据对象
+    this.param = {}; // 页面切换传递进来的参数对象，router创建实例时赋值
+  }
+
+  /**
+   * 异步加载页面视图内容
+   * 返回Promise对象
+   * @param {*} param
+   * @param {*} cfg
+   */
+  load(param) {
+    // $.assign(this.data, param);
+    this.emit('local::load pageLoad', param);
+    this.emit('pageLoad', this);
+  }
+
+  /**
+   * 在已经加载就绪的视图上操作
+   * @param {*} view 页面层的 Dom 对象，已经使用`$(#page-name)`，做了处理
+   * @param {*} param go 函数的参数，或 网址中 url 中的参数
+   * @param {*} back 是否为回退，A->B, B->A，这种操作属于回退
+   */
+  ready(view, param, back) {
+    // $.assign(this, {page, param, back});
+    // $.assign(this.data, param);
+    // 隐藏所有模板
+    this.init();
+    this.emit('local::ready', view, param, back);
+    // 向上触发跨页面事件，存在安全问题
+    this.emit('pageReady', this);
+  }
+
+  /**
+   * 对页面进行初始化处理，或页面内容动态变更时，对局部页面容器进行初始化
+   * @param {*} v dom 容器，默认为页面实例的view
+   */
+  init(v) {
+    const {view} = this;
+    v = v ? $(v) : view;
+  }
+
+  // 显示已加载的页面
+  // view：页面Dom层，param：参数
+  show(view, param) {
+    // 隐藏所有模板
+    view.qus('[name$=-tp]').hide();
+    // 防止空链接，刷新页面
+    view.qus('a[href=""]').attr('href', 'javascript:;');
+    // this.init();
+    if (this.reset) this.reset();
+    this.emit('local::show', view, param);
+    // 向上触发跨页面事件，存在安全问题
+    this.emit('pageShow', this);
+  }
+
+  // 回退显示已加载的页面
+  // view：页面Dom层，param：参数
+  back(view, param) {
+    // 隐藏所有模板
+    view.qus('[name$=-tp]').hide();
+    // 防止空链接，刷新页面
+    view.qus('a[href=""]').attr('href', 'javascript:;');
+
+    this.emit('local::back', view, param);
+    // 向上触发跨页面事件，存在安全问题
+    this.emit('pageBack', this);
+  }
+
+  hide(view) {
+    this.emit('local::hide', view);
+    // 向上触发跨页面事件，存在安全问题
+    this.emit('pageHide', this);
+  }
+
+  unload(view) {
+    this.emit('local::unload', view);
+    // 向上触发跨页面事件，存在安全问题
+    this.emit('pageUnload', this);
+  }
+}
+
+/**
+ * Wia app、router等继承类，通过模块化扩展类功能
+ */
+
+class Module extends Event {
+  constructor(params = {}, parents = []) {
+    super(params, parents);
+  }
+
+  // eslint-disable-next-line
+  useModuleParams(module, instanceParams) {
+    if (module.params) {
+      const originalParams = {};
+      Object.keys(module.params).forEach(paramKey => {
+        if (typeof instanceParams[paramKey] === 'undefined') return;
+        originalParams[paramKey] = $.extend({}, instanceParams[paramKey]);
+      });
+      $.extend(instanceParams, module.params);
+      Object.keys(originalParams).forEach(paramKey => {
+        $.extend(instanceParams[paramKey], originalParams[paramKey]);
+      });
+    }
+  }
+
+  useModulesParams(instanceParams) {
+    const instance = this;
+    if (!instance.modules) return;
+    Object.keys(instance.modules).forEach(moduleName => {
+      const module = instance.modules[moduleName];
+      // Extend params
+      if (module.params) {
+        $.extend(instanceParams, module.params);
+      }
+    });
+  }
+
+  /**
+   * 将扩展模块的相关方法、事件加载到类实例
+   * @param {*} moduleName 扩展模块名称
+   * @param {*} moduleParams
+   */
+  useModule(moduleName = '', moduleParams = {}) {
+    const instance = this;
+    if (!instance.modules) return;
+
+    // 从原型中获得的模块类引用
+    const module =
+      typeof moduleName === 'string'
+        ? instance.modules[moduleName]
+        : moduleName;
+    if (!module) return;
+
+    // 扩展实例的方法和属性，Extend instance methods and props
+    if (module.instance) {
+      Object.keys(module.instance).forEach(modulePropName => {
+        const moduleProp = module.instance[modulePropName];
+        if (typeof moduleProp === 'function') {
+          instance[modulePropName] = moduleProp.bind(instance);
+        } else {
+          instance[modulePropName] = moduleProp;
+        }
+      });
+    }
+
+    // 将扩展模块中的on加载到实例的事件侦听中，比如 init 在实例初始化时被调用
+    if (module.on && instance.on) {
+      Object.keys(module.on).forEach(moduleEventName => {
+        instance.on(moduleEventName, module.on[moduleEventName]);
+      });
+    }
+
+    // 加载扩展模块的vnodeHooks，Add vnode hooks
+    if (module.vnode) {
+      if (!instance.vnodeHooks) instance.vnodeHooks = {};
+      Object.keys(module.vnode).forEach(vnodeId => {
+        Object.keys(module.vnode[vnodeId]).forEach(hookName => {
+          const handler = module.vnode[vnodeId][hookName];
+          if (!instance.vnodeHooks[hookName])
+            instance.vnodeHooks[hookName] = {};
+          if (!instance.vnodeHooks[hookName][vnodeId])
+            instance.vnodeHooks[hookName][vnodeId] = [];
+          instance.vnodeHooks[hookName][vnodeId].push(handler.bind(instance));
+        });
+      });
+    }
+
+    // 执行模块的create方法，模块实例化回调，Module create callback
+    if (module.create) {
+      module.create.bind(instance)(moduleParams);
+    }
+  }
+
+  /**
+   * 实例创建初始化时，执行扩展模块中定义的相关回调
+   * @param {*} modulesParams
+   */
+  useModules(modulesParams = {}) {
+    const instance = this;
+    if (!instance.modules) return;
+    Object.keys(instance.modules).forEach(moduleName => {
+      const moduleParams = modulesParams[moduleName] || {};
+      instance.useModule(moduleName, moduleParams);
+    });
+  }
+
+  static set components(components) {
+    const Class = this;
+    if (!Class.use) return;
+    Class.use(components);
+  }
+
+  /**
+   * 将模块类装配到指定类的modules属性，用于扩展类
+   * @param {*} module 模块类
+   * @param  {...any} params 参数
+   */
+  static installModule(module, ...params) {
+    const Class = this;
+    if (!Class.prototype.modules) Class.prototype.modules = {};
+    const name =
+      module.name ||
+      `${Object.keys(Class.prototype.modules).length}_${$.now()}`;
+    // 原型属性中引用该模块类，类实例
+    Class.prototype.modules[name] = module;
+    // 模块如果定义了原型，则将模块原型加载到类原型
+    if (module.proto) {
+      Object.keys(module.proto).forEach(key => {
+        Class.prototype[key] = module.proto[key];
+      });
+    }
+    // 加载静态属性
+    if (module.static) {
+      Object.keys(module.static).forEach(key => {
+        Class[key] = module.static[key];
+      });
+    }
+    // 执行加载回调函数
+    if (module.install) {
+      module.install.apply(Class, params);
+    }
+    return Class;
+  }
+
+  /**
+   * 加载类扩展模块到类
+   * @param {*} module
+   * @param  {...any} params
+   */
+  static use(module, ...params) {
+    const Class = this;
+    if (Array.isArray(module)) {
+      module.forEach(m => Class.installModule(m));
+      return Class;
+    }
+    return Class.installModule(module, ...params);
+  }
+}
+
+/**
+ * 扩展构造函数
+ * @param {*} parameters
+ */
+function Constructors (parameters = {}) {
+  const {
+    defaultSelector,
+    constructor: Constructor,
+    domProp,
+    app,
+    addMethods,
+  } = parameters;
+  const methods = {
+    create(...args) {
+      if (app) return new Constructor(app, ...args);
+      return new Constructor(...args);
+    },
+    get(el = defaultSelector) {
+      if (el instanceof Constructor) return el;
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      return $el[0][domProp];
+    },
+    destroy(el) {
+      const instance = methods.get(el);
+      if (instance && instance.destroy) return instance.destroy();
+      return undefined;
+    },
+  };
+  if (addMethods && Array.isArray(addMethods)) {
+    addMethods.forEach(methodName => {
+      methods[methodName] = (el = defaultSelector, ...args) => {
+        const instance = methods.get(el);
+        if (instance && instance[methodName])
+          return instance[methodName](...args);
+        return undefined;
+      };
+    });
+  }
+  return methods;
+}
+
+function Modals (parameters = {}) {
+  const { defaultSelector, constructor, app } = parameters;
+  const methods = $.extend(
+    Constructors({
+      defaultSelector,
+      constructor,
+      app,
+      domProp: 'f7Modal',
+    }),
+    {
+      open(el, animate) {
+        const $el = $(el);
+        let instance = $el[0].f7Modal;
+        if (!instance)
+          instance = new constructor(app, {el: $el});
+        return instance.open(animate);
+      },
+      close(el = defaultSelector, animate) {
+        const $el = $(el);
+        if ($el.length === 0)
+          return undefined;
+        let instance = $el[0].f7Modal;
+        if (!instance)
+          instance = new constructor(app, {el: $el});
+        return instance.close(animate);
+      },
+    }
+  );
+  return methods;
+}
+
+/**
+ * 动态加载扩展模块，被 App调用。
+ * 通过写入页面标签实现动态加载js、css
+ * wia base中已经实现了动态下载、加载模块功能，该模块应删除
+ */
+
+const fetchedModules = [];
+function loadModule(moduleToLoad) {
+  const App = this;
+
+  return new Promise((resolve, reject) => {
+    const app = App.instance;
+    let modulePath;
+    let moduleObj;
+    let moduleFunc;
+    if (!moduleToLoad) {
+      reject(new Error('Wia: Lazy module must be specified'));
+      return;
+    }
+
+    function install(module) {
+      App.use(module);
+
+      if (app) {
+        app.useModuleParams(module, app.params);
+        app.useModule(module);
+      }
+    }
+
+    if (typeof moduleToLoad === 'string') {
+      const matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i);
+      if (
+        moduleToLoad.indexOf('.') < 0 &&
+        matchNamePattern &&
+        matchNamePattern[0].length === moduleToLoad.length
+      ) {
+        if (!app || (app && !app.params.lazyModulesPath)) {
+          reject(
+            new Error(
+              'Wia: "lazyModulesPath" app parameter must be specified to fetch module by name'
+            )
+          );
+          return;
+        }
+        modulePath = `${app.params.lazyModulesPath}/${moduleToLoad}.js`;
+      } else {
+        modulePath = moduleToLoad;
+      }
+    } else if (typeof moduleToLoad === 'function') {
+      moduleFunc = moduleToLoad;
+    } else {
+      // considering F7-Plugin object
+      moduleObj = moduleToLoad;
+    }
+
+    if (moduleFunc) {
+      const module = moduleFunc(App, false);
+      if (!module) {
+        reject(new Error("Wia: Can't find Wia component in specified component function"));
+        return;
+      }
+      // Check if it was added
+      if (App.prototype.modules && App.prototype.modules[module.name]) {
+        resolve();
+        return;
+      }
+      // Install It
+      install(module);
+
+      resolve();
+    }
+    if (moduleObj) {
+      const module = moduleObj;
+      if (!module) {
+        reject(new Error("Wia: Can't find Wia component in specified component"));
+        return;
+      }
+      // Check if it was added
+      if (App.prototype.modules && App.prototype.modules[module.name]) {
+        resolve();
+        return;
+      }
+      // Install It
+      install(module);
+
+      resolve();
+    }
+    if (modulePath) {
+      if (fetchedModules.indexOf(modulePath) >= 0) {
+        resolve();
+        return;
+      }
+      fetchedModules.push(modulePath);
+      // 动态加载 js 脚本
+      const scriptLoad = new Promise((resolveScript, rejectScript) => {
+        App.request.get(
+          modulePath,
+          scriptContent => {
+            const id = $.id();
+            const callbackLoadName = `wia_component_loader_callback_${id}`;
+
+            const scriptEl = document.createElement('script');
+            scriptEl.innerHTML = `window.${callbackLoadName} = function (Wia, WiaAutoInstallComponent) {return ${scriptContent.trim()}}`;
+            // 动态加载 js
+            $('head').append(scriptEl);
+
+            const componentLoader = window[callbackLoadName];
+            delete window[callbackLoadName];
+            $(scriptEl).remove();
+
+            const module = componentLoader(App, false);
+
+            if (!module) {
+              rejectScript(new Error(`Wia: Can't find Wia component in ${modulePath} file`));
+              return;
+            }
+
+            // Check if it was added
+            if (App.prototype.modules && App.prototype.modules[module.name]) {
+              resolveScript();
+              return;
+            }
+
+            // Install It
+            install(module);
+
+            resolveScript();
+          },
+          (xhr, status) => {
+            rejectScript(xhr, status);
+          }
+        );
+      });
+
+      // 动态加载css样式
+      const styleLoad = new Promise(resolveStyle => {
+        App.request.get(
+          modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'),
+          styleContent => {
+            const styleEl = document.createElement('style');
+            styleEl.innerHTML = styleContent;
+            $('head').append(styleEl);
+
+            resolveStyle();
+          },
+          () => {
+            resolveStyle();
+          }
+        );
+      });
+
+      Promise.all([scriptLoad, styleLoad])
+        .then(() => {
+          resolve();
+        })
+        .catch(err => {
+          reject(err);
+        });
+    }
+  });
+}
+
+const Resize = {
+  name: 'resize',
+  instance: {
+    getSize() {
+      const app = this;
+      if (!app.root[0])
+        return {width: 0, height: 0, left: 0, top: 0};
+      const offset = app.root.offset();
+      const [width, height, left, top] = [app.root[0].offsetWidth, app.root[0].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;
+
+      // Get Size
+      app.getSize();
+
+      // Emit resize
+      window.addEventListener('resize', () => {
+        app.emit('resize');
+      }, false);
+
+      // Emit orientationchange
+      window.addEventListener('orientationchange', () => {
+        app.emit('orientationchange');
+      });
+    },
+    orientationchange() {
+      const app = this;
+      // Fix iPad weird body scroll
+      if (app.device.ipad) {
+        document.body.scrollLeft = 0;
+        setTimeout(() => {
+          document.body.scrollLeft = 0;
+        }, 0);
+      }
+    },
+    resize() {
+      const app = this;
+      app.getSize();
+    },
+  },
+};
+
+/**
+ * document 绑定click事件
+ * 支持touch则绑定touch，否则绑定click
+ * 无论touch 还是 click事件，都会触发事件响应函数
+ * @param {*} cb
+ */
+function bindClick(cb) {
+  let touchStartX;
+  let touchStartY;
+  function touchStart(ev) {
+    // ev.preventDefault();
+    touchStartX = ev.changedTouches[0].clientX;
+    touchStartY = ev.changedTouches[0].clientY;
+  }
+  function touchEnd(ev) {
+    // ev.preventDefault();
+    const x = Math.abs(ev.changedTouches[0].clientX - touchStartX);
+    const y = Math.abs(ev.changedTouches[0].clientY - touchStartY);
+    // console.log('touchEnd', {x, y});
+
+    if (x <= 5 && y <= 5) {
+      cb.call(this, ev);
+    }
+  }
+
+  // 在捕捉时触发，不影响后续冒泡阶段再次触发
+  if ($.support.touch) {
+    // console.log('bind touch');
+    document.addEventListener('touchstart', touchStart, true);
+    document.addEventListener('touchend', touchEnd, true);
+  } else {
+    // console.log('bind click');
+    document.addEventListener('click', cb, true);
+  }
+}
+
+function initClicks(app) {
+  function appClick(ev) {
+    app.emit({
+      events: 'click',
+      data: [ev],
+    });
+  }
+
+  function handleClicks(e) {
+    const $clickedEl = $(e.target);
+    const $clickedLinkEl = $clickedEl.closest('a');
+    const isLink = $clickedLinkEl.length > 0;
+    isLink && $clickedLinkEl.attr('href');
+
+    // call Modules Clicks
+    Object.keys(app.modules).forEach(moduleName => {
+      const moduleClicks = app.modules[moduleName].clicks;
+      if (!moduleClicks) return;
+      if (e.preventF7Router) return;
+      Object.keys(moduleClicks).forEach(clickSelector => {
+        const matchingClickedElement = $clickedEl.closest(clickSelector).eq(0);
+        if (matchingClickedElement.length > 0) {
+          moduleClicks[clickSelector].call(
+            app,
+            matchingClickedElement,
+            matchingClickedElement.dataset(),
+            e
+          );
+        }
+      });
+    });
+  }
+
+  // 绑定click 或 touch 事件，触发时，发射click事件
+  bindClick(appClick);
+  // click event 响应
+  app.on('click', handleClicks);
+}
+
+const Click = {
+  name: 'clicks',
+  params: {
+    clicks: {
+      // External Links
+      externalLinks: '.ext',
+    },
+  },
+  on: {
+    // app 创建时被调用
+    init() {
+      const app = this;
+      initClicks(app);
+    },
+  },
+};
+
+const SW = {
+  registrations: [],
+  register(path, scope) {
+    const app = this;
+    if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
+      return new Promise((resolve, reject) => {
+        reject(new Error('Service worker is not supported'));
+      });
+    }
+    return new Promise((resolve, reject) => {
+      app.serviceWorker.container.register(path, (scope ? { scope } : {}))
+        .then((reg) => {
+          SW.registrations.push(reg);
+          app.emit('serviceWorkerRegisterSuccess', reg);
+          resolve(reg);
+        }).catch((error) => {
+          app.emit('serviceWorkerRegisterError', error);
+          reject(error);
+        });
+    });
+  },
+  unregister(registration) {
+    const app = this;
+    if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
+      return new Promise((resolve, reject) => {
+        reject(new Error('Service worker is not supported'));
+      });
+    }
+    let registrations;
+    if (!registration)
+      registrations = SW.registrations;
+    else if (Array.isArray(registration))
+      registrations = registration;
+    else
+      registrations = [registration];
+    return Promise.all(registrations.map(reg => new Promise((resolve, reject) => {
+      reg.unregister()
+        .then(() => {
+          if (SW.registrations.indexOf(reg) >= 0) {
+            SW.registrations.splice(SW.registrations.indexOf(reg), 1);
+          }
+          app.emit('serviceWorkerUnregisterSuccess', reg);
+          resolve();
+        })
+        .catch((error) => {
+          app.emit('serviceWorkerUnregisterError', reg, error);
+          reject(error);
+        });
+    })));
+  },
+};
+
+const SW$1 = {
+  name: 'sw',
+  params: {
+    serviceWorker: {
+      path: undefined,
+      scope: undefined,
+    },
+  },
+  create() {
+    const app = this;
+    $.extend(app, {
+      serviceWorker: {
+        container: ('serviceWorker' in window.navigator) ? window.navigator.serviceWorker : undefined,
+        registrations: SW.registrations,
+        register: SW.register.bind(app),
+        unregister: SW.unregister.bind(app),
+      },
+    });
+  },
+  on: {
+    init() {
+      if (!('serviceWorker' in window.navigator))
+        return;
+      const app = this;
+      if (!app.serviceWorker.container)
+        return;
+      const paths = app.params.serviceWorker.path;
+      const scope = app.params.serviceWorker.scope;
+      if (!paths || (Array.isArray(paths) && !paths.length))
+        return;
+      const toRegister = Array.isArray(paths) ? paths : [paths];
+      toRegister.forEach((path) => {
+        app.serviceWorker.register(path, scope);
+      });
+    },
+  },
+};
+
+/**
+ * Wia App 基类，从 Module 和 Event 继承。
+ */
+// 使用 rollup打包注意
+// import $ from '@wiajs/dom'; // dom操作库，这种引用，导致 dom的压缩、非压缩 common包都会打入 core
+// const $ = require('@wiajs/dom'); // dom操作库，这种引用，导致 dom的压缩、非压缩 common包都不会打入 core，保留了 require
+
+
+const Support$1 = $.support;
+const Device$1 = $.device;
+
+/**
+ * 应用类，每个wia应用从该类继承，由 首页加载创建或者路由创建
+ */
+class App extends Module {
+  static apps = {};
+  constructor(opt) {
+    super(opt);
+
+    const passedParams = $.extend({}, opt);
+
+    const app = this;
+    app.device = Device$1;
+    app.support = Support$1;
+		console.log('App constructor', {Device: Device$1, Support: Support$1});
+
+    // Default
+    const def = {
+      version: '0.0.1',
+      root: 'body',
+      theme: 'auto',
+      language: window.navigator.language,
+      routes: [],
+      lazyModulesPath: null,
+      initOnDeviceReady: true,
+      // init: true, // 路由加载时，为 false，，为true
+      autoDarkTheme: false,
+      iosTranslucentBars: true,
+      iosTranslucentModals: true,
+      component: undefined,
+      componentUrl: undefined,
+    };
+
+    // Extend defaults with modules params
+    app.useModulesParams(def);
+
+    // Extend defaults with passed params
+    app.params = $.extend(def, opt);
+
+    const $rootEl = $(app.params.root);
+
+    // 判断Page、App实例
+    $.isPage = p => p instanceof Page;
+    $.isApp = p => p instanceof App;
+
+    $.extend(app, {
+      owner: app.params.owner,
+      name: app.params.name,
+      id: `${app.params.owner}.${app.params.name}`,
+      // App version
+      version: app.params.version,
+      // Routes
+      routes: app.params.routes,
+      // Lang
+      language: app.params.language,
+      // Root
+      root: $rootEl,
+      $el: $rootEl,
+      cfg: app.params.cfg, // app config
+      api: app.params.api, // api config
+
+      // RTL
+      rtl: $rootEl.css('direction') === 'rtl',
+      // Theme
+      theme: (function getTheme() {
+        if (app.params.theme === 'auto') {
+          if (Device$1.ios) return 'ios';
+          if (Device$1.desktop) return 'aurora';
+          return 'md';
+        }
+        return app.params.theme;
+      })(),
+      // Initially passed parameters
+      passedParams,
+      online: window.navigator.onLine,
+    });
+
+    // Save Root
+    if (app.root && app.root[0]) {
+      app.root[0].wia = app;
+    }
+
+    app.touchEvents = {
+      start: Support$1.touch
+        ? 'touchstart'
+        : Support$1.pointerEvents
+        ? 'pointerdown'
+        : 'mousedown',
+      move: Support$1.touch
+        ? 'touchmove'
+        : Support$1.pointerEvents
+        ? 'pointermove'
+        : 'mousemove',
+      end: Support$1.touch
+        ? 'touchend'
+        : Support$1.pointerEvents
+        ? 'pointerup'
+        : 'mouseup',
+    };
+
+    // 加载use插入的模块类，每个模块作为app的一个属性，合并到实例。
+    // 模块包括相关属性及方法（如：create、get、destroy）
+    // 调用每个模块的 create 方法
+    app.useModules();
+
+    // 初始化数据，Init Data & Methods
+    app.initData();
+
+    // 自动暗黑主题，Auto Dark Theme
+    const DARK = '(prefers-color-scheme: dark)';
+    const LIGHT = '(prefers-color-scheme: light)';
+    app.mq = {};
+    if (window.matchMedia) {
+      app.mq.dark = window.matchMedia(DARK);
+      app.mq.light = window.matchMedia(LIGHT);
+    }
+    app.colorSchemeListener = function ({matches, media}) {
+      if (!matches) {
+        return;
+      }
+      const html = document.querySelector('html');
+      if (media === DARK) {
+        html.classList.add('theme-dark');
+      } else if (media === LIGHT) {
+        html.classList.remove('theme-dark');
+      }
+    };
+
+    // app 初始化，Init
+    function init() {
+      if (Device$1.cordova && app.params.initOnDeviceReady) {
+        $(document).on('deviceready', () => {
+          app.init();
+        });
+      } else {
+        app.init();
+      }
+    }
+
+    // 应用初始化，路由跳转时不执行初始化
+    if (app.params.init) init();
+
+    // Return app instance
+    return app;
+  }
+
+  // 首次加载事件，全局只触发一次
+  load(param) {
+    this.emit('local::load appLoad', param);
+  }
+
+  // 从后台切换到前台显示事件
+  show(url, data) {
+    this.emit('local::show appShow', url, data);
+  }
+
+  // 从前台显示切换到后台事件
+  hide() {
+    this.emit('local::hide appHide');
+  }
+
+  // 卸载应用事件
+  unload() {
+    this.emit('local::unload appUnload');
+  }
+
+  /**
+   * 初始化数据
+   */
+  initData() {
+    const app = this;
+
+    // Data
+    app.data = {};
+    if (app.params.data && typeof app.params.data === 'function') {
+      $.extend(app.data, app.params.data.bind(app)());
+    } else if (app.params.data) {
+      $.extend(app.data, app.params.data);
+    }
+    // Methods
+    app.methods = {};
+    if (app.params.methods) {
+      Object.keys(app.params.methods).forEach(methodName => {
+        if (typeof app.params.methods[methodName] === 'function') {
+          app.methods[methodName] = app.params.methods[methodName].bind(app);
+        } else {
+          app.methods[methodName] = app.params.methods[methodName];
+        }
+      });
+    }
+  }
+
+  enableAutoDarkTheme() {
+    if (!window.matchMedia) return;
+
+    const app = this;
+    const html = document.querySelector('html');
+    if (app.mq.dark && app.mq.light) {
+      app.mq.dark.addListener(app.colorSchemeListener);
+      app.mq.light.addListener(app.colorSchemeListener);
+    }
+    if (app.mq.dark && app.mq.dark.matches) {
+      html.classList.add('theme-dark');
+    } else if (app.mq.light && app.mq.light.matches) {
+      html.classList.remove('theme-dark');
+    }
+  }
+
+  disableAutoDarkTheme() {
+    if (!window.matchMedia) return;
+
+    const app = this;
+    if (app.mq.dark) app.mq.dark.removeListener(app.colorSchemeListener);
+    if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
+  }
+
+  // 初始化，包括控制 html 样式，wia app 启动时需要执行，切换app时，不需要
+  init() {
+    const app = this;
+    if (app.initialized) return app;
+
+    $.App = App;
+
+    if (Device$1.ios && Device$1.webView) {
+      // Strange hack required for iOS 8 webview to work on inputs
+      window.addEventListener('touchstart', () => {});
+    }
+
+    app.root.addClass('framework7-initializing');
+
+    // RTL attr
+    if (app.rtl) {
+      $('html').attr('dir', 'rtl');
+    }
+
+    // Auto Dark Theme
+    if (app.params.autoDarkTheme) {
+      app.enableAutoDarkTheme();
+    }
+
+    // Watch for online/offline state
+    window.addEventListener('offline', () => {
+      app.online = false;
+      app.emit('offline');
+      app.emit('connection', false);
+    });
+
+    window.addEventListener('online', () => {
+      app.online = true;
+      app.emit('online');
+      app.emit('connection', true);
+    });
+
+    // Root class
+    app.root.addClass('framework7-root');
+
+    // Theme class
+    $('html').removeClass('ios md aurora').addClass(app.theme);
+
+    // iOS Translucent
+    if (app.params.iosTranslucentBars && app.theme === 'ios' && Device$1.ios) {
+      $('html').addClass('ios-translucent-bars');
+    }
+    if (app.params.iosTranslucentModals && app.theme === 'ios' && Device$1.ios) {
+      $('html').addClass('ios-translucent-modals');
+    }
+
+    // Init class
+    $.nextFrame(() => {
+      app.root.removeClass('framework7-initializing');
+    });
+
+    initStyle();
+
+    // Emit, init other modules
+    app.initialized = true;
+
+    // 发起init 事件，模块 on 里面有 init方法的会被触发
+    app.emit('init');
+
+    return app;
+  }
+
+  // eslint-disable-next-line
+  loadModule(m) {
+    App.loadModule(m);
+    // 模块初始化
+    if (this[m.name].init) this[m.name].init();
+  }
+
+  // eslint-disable-next-line
+  loadModules(...args) {
+    return App.loadModules(...args);
+  }
+
+  getVnodeHooks(hook, id) {
+    const app = this;
+    if (!app.vnodeHooks || !app.vnodeHooks[hook]) return [];
+    return app.vnodeHooks[hook][id] || [];
+  }
+
+  // eslint-disable-next-line
+  get $() {
+    return $;
+  }
+
+  static get Dom() {
+    return $;
+  }
+
+  static get $() {
+    return $;
+  }
+
+  static get Module() {
+    return Module;
+  }
+
+  static get Event() {
+    return Event;
+  }
+}
+
+/**
+ * 初始化html样式
+ * from device module
+ */
+function initStyle() {
+  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$1.standalone &&
+    Device$1.ios &&
+    metaStatusbar &&
+    metaStatusbar.content === 'black-translucent'
+  ) {
+    classNames.push('device-full-viewport');
+  }
+
+  // Pixel Ratio
+  classNames.push(`device-pixel-ratio-${Math.floor(Device$1.pixelRatio)}`);
+  // OS classes
+  if (Device$1.os && !Device$1.desktop) {
+    classNames.push(`device-${Device$1.os}`);
+  } else if (Device$1.desktop) {
+    classNames.push('device-desktop');
+    if (Device$1.os) {
+      classNames.push(`device-${Device$1.os}`);
+    }
+  }
+  if (Device$1.cordova || Device$1.phonegap) {
+    classNames.push('device-cordova');
+  }
+
+  // Add html classes
+  classNames.forEach(className => {
+    html.classList.add(className);
+    // console.log({className});
+  });
+}
+
+// App 类 静态方法、属性
+
+App.ModalMethods = Modals;
+App.ConstructorMethods = Constructors;
+// 动态加载模块（base里面已经内置动态加载，这个方法应该用不上）
+App.loadModule = loadModule;
+App.loadModules = function (modules) {
+  return Promise.all(modules.map(module => App.loadModule(module)));
+};
+
+// app 加载到 app实例的一些扩展模块
+App.support = Support$1;
+App.device = Device$1;
+App.utils = Utils;
+
+// 添加应用缺省模块
+App.use([
+  Resize, // 控制屏幕大小
+  Click, // 触发UI组件的点击（Click 或 Touch）事件
+  SW$1, // ServiceWorker
+
+  //INSTALL_COMPONENTS
+]);
+
+/**
+ * Released on: August 28, 2016
+ * 图片延迟加载
+ * 使用方法：
+ * import {Lazy from '@wiajs/core';
+ * const _lazy = new Lazy();
+ * _lazy.start(dv); // 注意，这个dv是滚动的层，错了无法触发加载，sui 就是内容层！
+ * setTimeout(() => {loadView()}, 1);  // krouter 里面已经做了处理，bind 时直接 加载视图即可！
+ * loadView 加载视图中（每次页面更新内容后，需调用）
+ * _lazy.update(); // 没有显示的图片，加入 待加载数组，并检查是否可视，可视则加载！
+ */
+
+// options
+const _opts = {
+  normal: 'nor', // 'data-normal' 普通图片
+  retina: 'ret', // 'data-retina',
+  srcset: 'set', // 'data-srcset', 浏览器根据宽、高和像素密度来加载相应的图片资源
+  threshold: 0,
+};
+
+let _opt;
+let _ticking;
+let _nodes;
+let _windowHeight = window.innerHeight;
+let _root;
+
+// private
+let _prevLoc = getLoc();
+
+// feature detection
+// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/img/srcset.js
+const _srcset =
+  document.body.classList.contains('srcset') ||
+  'srcset' in document.createElement('img');
+
+// 设备分辨率
+// not supported in IE10 - https://msdn.microsoft.com/en-us/library/dn265030(v=vs.85).aspx
+const _dpr =
+  window.devicePixelRatio ||
+  window.screen.deviceXDPI / window.screen.logicalXDPI;
+
+/**
+ * 输外部可调用的类
+ * 类外面的变量、函数作为模块内部私有属性、方法，外部无法调用
+ * 如果全部放入类中，属性、函数相互调用，都需要 this，非常麻烦！
+ * 也可以直接使用 export default (options = {}) => {} 输出一个函数！
+ * 函数内部反而不需要this，比较方便。
+ */
+class Lazy {
+  // 实例属性
+  constructor(opt) {
+    _opt = $.assign({}, _opts, opt);
+  }
+
+  // API
+
+  //----------------------------------------
+  // dom 就绪后 start，dom 更新后，需 update
+  /**
+   * 启动延迟加载, 加载事件, dom ready时调用!
+   * @param root 根对象, scroll的目标对象，错了无法触发scroll 事件！
+   * @returns {init}
+   */
+  start(root) {
+    // sui window scroll event invalid!!!
+    // ['scroll', 'resize'].forEach(event => window[action](event, requestScroll));
+    ['scroll', 'resize'].forEach(event =>
+      root['addEventListener'](event, requestScroll)
+    );
+    _root = root;
+    return this;
+  }
+
+  /**
+   * 停止延迟加载,卸载事件!
+   * @param root 根对象, scroll的目标对象
+   * @returns {init}
+   */
+  stop() {
+    // sui window scroll event invalid!!!
+    // ['scroll', 'resize'].forEach(event => window[action](event, requestScroll));
+    ['scroll', 'resize'].forEach(event =>
+      _root['removeEventListener'](event, requestScroll)
+    );
+    return this;
+  }
+
+  update() {
+    setTimeout(() => {
+      update();
+      check();
+    }, 1);
+  }
+}
+
+/**
+ * Y 坐标，好像一直是 0
+ */
+function getLoc() {
+  // console.log(`window.scrollY:${window.scrollY} window.pageYOffset:${window.pageYOffset}`);
+  return window.scrollY || window.pageYOffset;
+}
+
+// debounce helpers
+function requestScroll() {
+  _prevLoc = getLoc();
+  requestFrame();
+}
+
+function requestFrame() {
+  if (!_ticking) {
+    window.requestAnimationFrame(() => check());
+    _ticking = true;
+  }
+}
+
+// offset helper
+/**
+ * 节点相对视口的坐标，对于动态加载的，好像得到都是0，使用定时器延迟加载就能正确获取！
+ */
+function getOffset(node) {
+  // 元素四个位置的相对于视口的坐标
+  return node.getBoundingClientRect().top + _prevLoc;
+  // return node.offsetTop + _prevLoc;
+}
+
+/**
+ * 节点是否在可视窗口判断
+ * 通过可视窗口顶部、底部坐标来判断
+ * 顶部坐标就是页面的滚动条滚动的距离
+ * 底部坐标就是滚动条的距离加上当前可视窗口的高度
+ * dom元素中心：元素到最顶端的高度加上自身高度的一半
+ * @param {*} node
+ */
+function inViewport(node) {
+  const viewTop = _prevLoc; // 视口顶部坐标
+  const viewBot = viewTop + _windowHeight; // 视口底部坐标
+  // console.log(`viewTop:${viewTop} viewBot:${viewBot}`);
+
+  // 节点坐标
+  const nodeTop = getOffset(node);
+  const nodeBot = nodeTop + node.offsetHeight;
+  // console.log(`nodeTop:${nodeTop} nodeBot:${nodeBot}`);
+
+  const offset = (_opt.threshold / 100) * _windowHeight;
+  // 节点在可视范围内
+  const rc = nodeBot >= viewTop - offset && nodeTop <= viewBot + offset;
+  // if (rc)
+  //   console.log(`nodeBot:${nodeBot} >= view:${viewTop - offset} nodeTop:${nodeTop} <= view:${viewBot + offset}`);
+
+  return rc;
+}
+
+// source helper
+function setSource(node) {
+  $.emit('lazy:src:before', node);
+
+  // prefer srcset, fallback to pixel density
+  if (_srcset && node.hasAttribute(_opt.srcset)) {
+    node.setAttribute('srcset', node.getAttribute(_opt.srcset));
+  } else {
+    const retina = _dpr > 1 && node.getAttribute(_opt.retina);
+    const src = retina || node.getAttribute(_opt.normal);
+    node.setAttribute('src', src);
+    console.log(`set src:${src}`);
+  }
+
+  $.emit('lazy:src:after', node);
+  // 删除懒加载属性，避免重复加载
+  [_opt.normal, _opt.retina, _opt.srcset].forEach(attr =>
+    node.removeAttribute(attr)
+  );
+  update();
+}
+
+/**
+ * 检查是否可视,如果可视则更改图片src，加载图片
+ * @returns {check}
+ */
+function check() {
+  if (!_nodes) return;
+
+  _windowHeight = window.innerHeight;
+  _nodes.forEach(node => inViewport(node) && setSource(node));
+  _ticking = false;
+  return this;
+}
+
+/**
+ * 新的图片加入dom，需重新获取属性为nor的图片节点，
+ * @returns {update}
+ */
+function update(root) {
+  if (root)
+    _nodes = Array.prototype.slice.call(
+      root.querySelectorAll(`[${_opt.normal}]`)
+    );
+  else
+    _nodes = Array.prototype.slice.call(
+      document.querySelectorAll(`[${_opt.normal}]`)
+    );
+  return this;
+}
+
+const openedModals = [];
+const dialogsQueue = [];
+function clearDialogsQueue() {
+  if (dialogsQueue.length === 0) return;
+  const dialog = dialogsQueue.shift();
+  dialog.open();
+}
+class Modal extends Event {
+  constructor(app, params) {
+    super(params, [app]);
+
+    const modal = this;
+    const defaults = {};
+    modal.params = Utils.extend(defaults, params);
+    modal.opened = false;
+    return this;
+  }
+
+  onOpen() {
+    const modal = this;
+    modal.opened = true;
+    openedModals.push(modal);
+    $('html').addClass(`with-modal-${modal.type.toLowerCase()}`);
+    modal.$el.trigger(`modal:open ${modal.type.toLowerCase()}:open`);
+    modal.emit(`local::open modalOpen ${modal.type}Open`, modal);
+  }
+
+  onOpened() {
+    const modal = this;
+    modal.$el.trigger(`modal:opened ${modal.type.toLowerCase()}:opened`);
+    modal.emit(`local::opened modalOpened ${modal.type}Opened`, modal);
+  }
+
+  onClose() {
+    const modal = this;
+    modal.opened = false;
+    if (!modal.type || !modal.$el) return;
+    openedModals.splice(openedModals.indexOf(modal), 1);
+    $('html').removeClass(`with-modal-${modal.type.toLowerCase()}`);
+    modal.$el.trigger(`modal:close ${modal.type.toLowerCase()}:close`);
+    modal.emit(`local::close modalClose ${modal.type}Close`, modal);
+  }
+
+  onClosed() {
+    const modal = this;
+    if (!modal.type || !modal.$el) return;
+    modal.$el.removeClass('modal-out');
+    modal.$el.hide();
+    modal.$el.trigger(`modal:closed ${modal.type.toLowerCase()}:closed`);
+    modal.emit(`local::closed modalClosed ${modal.type}Closed`, modal);
+  }
+
+  open(animateModal) {
+    const modal = this;
+    const {app, $el, type, $backdropEl} = modal;
+    const {moveToRoot} = modal.params;
+
+    let animate = true;
+    if (typeof animateModal !== 'undefined') animate = animateModal;
+    else if (typeof modal.params.animate !== 'undefined') {
+      animate = modal.params.animate;
+    }
+
+    if (!$el || $el.hasClass('modal-in')) {
+      return modal;
+    }
+
+    if (type === 'dialog' && app.params.modal.queueDialogs) {
+      let pushToQueue;
+      if ($('.dialog.modal-in').length > 0) {
+        pushToQueue = true;
+      } else if (openedModals.length > 0) {
+        openedModals.forEach(openedModal => {
+          if (openedModal.type === 'dialog') pushToQueue = true;
+        });
+      }
+      if (pushToQueue) {
+        dialogsQueue.push(modal);
+        return modal;
+      }
+    }
+
+    const $modalParentEl = $el.parent();
+    const wasInDom = $el.parents(document).length > 0;
+    if (
+      moveToRoot &&
+      app.params.modal.moveToRoot &&
+      !$modalParentEl.is(app.root)
+    ) {
+      app.root.append($el);
+      modal.once(`${type}Closed`, () => {
+        if (wasInDom) {
+          $modalParentEl.append($el);
+        } else {
+          $el.remove();
+        }
+      });
+    }
+    // Show Modal
+    $el.show();
+
+    /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+    modal._clientLeft = $el[0].clientLeft;
+
+    // Modal
+    function transitionEnd() {
+      if ($el.hasClass('modal-out')) {
+        modal.onClosed();
+      } else if ($el.hasClass('modal-in')) {
+        modal.onOpened();
+      }
+    }
+    if (animate) {
+      if ($backdropEl) {
+        $backdropEl.removeClass('not-animated');
+        $backdropEl.addClass('backdrop-in');
+      }
+      $el.animationEnd(() => {
+        transitionEnd();
+      });
+      $el.transitionEnd(() => {
+        transitionEnd();
+      });
+      $el.removeClass('modal-out not-animated').addClass('modal-in');
+      modal.onOpen();
+    } else {
+      if ($backdropEl) {
+        $backdropEl.addClass('backdrop-in not-animated');
+      }
+      $el.removeClass('modal-out').addClass('modal-in not-animated');
+      modal.onOpen();
+      modal.onOpened();
+    }
+
+    return modal;
+  }
+
+  close(animateModal) {
+    const modal = this;
+    const $el = modal.$el;
+    const $backdropEl = modal.$backdropEl;
+
+    let animate = true;
+    if (typeof animateModal !== 'undefined') animate = animateModal;
+    else if (typeof modal.params.animate !== 'undefined') {
+      animate = modal.params.animate;
+    }
+
+    if (!$el || !$el.hasClass('modal-in')) {
+      if (dialogsQueue.indexOf(modal) >= 0) {
+        dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
+      }
+      return modal;
+    }
+
+    // backdrop
+    if ($backdropEl) {
+      let needToHideBackdrop = true;
+      if (modal.type === 'popup') {
+        modal.$el.prevAll('.popup.modal-in').each((index, popupEl) => {
+          const popupInstance = popupEl.f7Modal;
+          if (!popupInstance) return;
+          if (
+            popupInstance.params.closeByBackdropClick &&
+            popupInstance.params.backdrop &&
+            popupInstance.backdropEl === modal.backdropEl
+          ) {
+            needToHideBackdrop = false;
+          }
+        });
+      }
+      if (needToHideBackdrop) {
+        $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
+        $backdropEl.removeClass('backdrop-in');
+      }
+    }
+
+    // Modal
+    $el[animate ? 'removeClass' : 'addClass']('not-animated');
+    function transitionEnd() {
+      if ($el.hasClass('modal-out')) {
+        modal.onClosed();
+      } else if ($el.hasClass('modal-in')) {
+        modal.onOpened();
+      }
+    }
+    if (animate) {
+      $el.animationEnd(() => {
+        transitionEnd();
+      });
+      $el.transitionEnd(() => {
+        transitionEnd();
+      });
+      $el.removeClass('modal-in').addClass('modal-out');
+      // Emit close
+      modal.onClose();
+    } else {
+      $el
+        .addClass('not-animated')
+        .removeClass('modal-in')
+        .addClass('modal-out');
+      // Emit close
+      modal.onClose();
+      modal.onClosed();
+    }
+
+    if (modal.type === 'dialog') {
+      clearDialogsQueue();
+    }
+
+    return modal;
+  }
+
+  destroy() {
+    const modal = this;
+    if (modal.destroyed) return;
+    modal.emit(
+      `local::beforeDestroy modalBeforeDestroy ${modal.type}BeforeDestroy`,
+      modal
+    );
+    if (modal.$el) {
+      modal.$el.trigger(
+        `modal:beforedestroy ${modal.type.toLowerCase()}:beforedestroy`
+      );
+      if (modal.$el.length && modal.$el[0].f7Modal) {
+        delete modal.$el[0].f7Modal;
+      }
+    }
+    Utils.deleteProps(modal);
+    modal.destroyed = true;
+  }
+}
+
+// replace react, use by @babel/plugin-transform-react-jsx
+/* eslint-disable prefer-rest-params */
+function jsx(tag, props, ...args) {
+  const attrs = props || {};
+  const children = args || [];
+
+  const attrsString = Object.keys(attrs)
+    .map((attr) => {
+      if (attr[0] === '_') {
+        if (attrs[attr]) return attr.replace('_', '');
+        return '';
+      }
+      return `${attr}="${attrs[attr]}"`;
+    })
+    .filter((attr) => !!attr)
+    .join(' ');
+
+  if (['path', 'img', 'circle', 'polygon', 'line', 'input'].indexOf(tag) >= 0) {
+    return `<${tag} ${attrsString} />`.trim();
+  }
+  const childrenContent = children
+    .filter((c) => !!c)
+    .map((c) => (Array.isArray(c) ? c.join('') : c))
+    .join('');
+  return `<${tag} ${attrsString}>${childrenContent}</${tag}>`.trim();
+}
+
+// export {default as Support} from './support';
+// export {default as Device} from './device';
+const Support = $.support;
+const Device = $.device;
+
+exports.Ajax = Ajax;
+exports.App = App;
+exports.Constructors = Constructors;
+exports.Device = Device;
+exports.Event = Event;
+exports.Lazy = Lazy;
+exports.Modal = Modal;
+exports.Modals = Modals;
+exports.Module = Module;
+exports.Page = Page;
+exports.Resize = Resize;
+exports.SW = SW$1;
+exports.Support = Support;
+exports.Utils = Utils;
+exports.jsx = jsx;
+exports.loadModule = loadModule;