@xenknight/framework7 0.0.2

package/modules/component/component.d.ts

@@ -0,0 +1,111 @@
+import Framework7, {
+  Framework7EventsClass,
+  Framework7Plugin,
+  CSSSelector,
+} from '../../components/app/app-class.js';
+import { Dom7, Dom7Array } from 'dom7';
+import { Router } from '../../modules/router/router.js';
+import { StoreObject as Store } from '../../modules/store/store.js';
+
+interface ComponentRender extends Function {}
+
+export interface ComponentContext {
+  /** Component ID */
+  $id: string | number;
+  /** Dom7 library */
+  $: Dom7;
+  /** Current route. Contains object with route query, hash, params, path and url */
+  $f7route: Router.Route;
+  /** Router instance */
+  $f7router: Router.Router;
+  /** Framework7 app instance */
+  $f7: Framework7;
+  /** Object with `md` and `ios` boolean properties which indicating current theme.  */
+  $theme: {
+    ios: boolean;
+    md: boolean;
+  };
+  /** Main app store */
+  $store: Store;
+  /** Object where `value` contains Dom7 instance with component HTML element */
+  $el: {
+    value: Dom7Array;
+  };
+  /** 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  */
+  $update: (callback?: () => void) => Promise<any>;
+  /** Emits DOM event on component element */
+  $emit: (name: string, data: any) => void;
+  /** Tagged template literal */
+  $h: any;
+  /** Render function */
+  $render: ComponentRender;
+  /** Attach event handler to component root DOM element */
+  $on: (eventName: string, handler: () => void) => void;
+  /** Attach event handler to component root DOM element that will be executed only once */
+  $once: (eventName: string, handler: () => void) => void;
+  /** Hook called right before component will be added to DOM */
+  $onBeforeMount: (callback: () => void) => void;
+  /** Hook called right after component has been added to DOM */
+  $onMounted: (callback: () => void) => void;
+  /** Hook called right before component VDOM will be patched */
+  $onBeforeUpdate: (callback: () => void) => void;
+  /** Hook called right after component VDOM has been patched */
+  $onUpdated: (callback: () => void) => void;
+  /** Hook called right before component will be destoyed */
+  $onBeforeUnmount: (callback: () => void) => void;
+  /** Hook called when component destroyed */
+  $onUnmounted: (callback: () => void) => void;
+}
+export interface ComponentFunction {
+  (props: any, ctx: ComponentContext): ComponentRender | any;
+}
+export class ComponentClass {
+  constructor(app: Framework7, component: ComponentFunction, props?: object, context?: object);
+}
+
+export namespace Component {
+  interface AppMethods {
+    /** Object with router/view cache data */
+    component: {
+      /** Create and init component */
+      create(
+        component: ComponentFunction,
+        props?: object,
+        context?: object,
+      ): Promise<ComponentClass>;
+      /** Parse component from single file component-style string */
+      parse(componentString: string): ComponentFunction;
+      /** Register custom component */
+      registerComponent(tagName: string, component: ComponentFunction): void;
+      /** Unregister custom component */
+      unregisterComponent(tagName: string): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const ComponentModule: Framework7Plugin;
+
+export default ComponentModule;

package/modules/component/component.js

@@ -0,0 +1,44 @@
+import Component from './component-class.js';
+import parseComponent from './parse-component.js';
+import customComponents from './custom-components.js';
+import $jsx from './$jsx.js';
+function registerComponent(tagName, component) {
+  customComponents[tagName] = component;
+}
+function unregisterComponent(tagName) {
+  delete customComponents[tagName];
+}
+export { Component, $jsx };
+export default {
+  name: 'component',
+  static: {
+    Component,
+    parseComponent,
+    registerComponent,
+    unregisterComponent
+  },
+  create() {
+    const app = this;
+    app.component = {
+      registerComponent,
+      unregisterComponent,
+      parse(componentString) {
+        return parseComponent(componentString);
+      },
+      create(component, props, _ref) {
+        let {
+          root,
+          el,
+          context,
+          children
+        } = _ref;
+        return new Component(app, component, props, {
+          root,
+          el,
+          context,
+          children
+        });
+      }
+    };
+  }
+};

package/modules/component/custom-components.js

@@ -0,0 +1 @@
+export default {};

package/modules/component/eventslisteners.js

@@ -0,0 +1,74 @@
+import $ from '../../shared/dom7.js';
+function invokeHandler(handler, event, args) {
+  if (typeof handler === 'function') {
+    // call function handler
+    handler(event, ...args);
+  }
+}
+function handleEvent(event, args, vnode) {
+  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);
+  }
+}
+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];
+    }
+    handleEvent(event, args, handler.vnode);
+  };
+}
+function updateEvents(oldVnode, vnode) {
+  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;
+  }
+  // remove existing listeners which no longer used
+  if (oldOn && oldListener) {
+    // if element changed or deleted we remove all existing listeners unconditionally
+    if (!on) {
+      Object.keys(oldOn).forEach(name => {
+        $(oldElm).off(name, oldListener);
+      });
+    } else {
+      Object.keys(oldOn).forEach(name => {
+        if (!on[name]) {
+          $(oldElm).off(name, oldListener);
+        }
+      });
+    }
+  }
+  // add new listeners which has not already attached
+  if (on) {
+    // reuse existing listener or create new
+    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(name => {
+        $(elm).on(name, listener);
+      });
+    } else {
+      Object.keys(on).forEach(name => {
+        if (!oldOn[name]) {
+          $(elm).on(name, listener);
+        }
+      });
+    }
+  }
+}
+export default {
+  create: updateEvents,
+  update: updateEvents,
+  destroy: updateEvents
+};

package/modules/component/parse-component.js

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

package/modules/component/patch.js

@@ -0,0 +1,8 @@
+/* eslint import/no-named-as-default: off */
+import { init } from './snabbdom/snabbdom.js';
+import attributesModule from './snabbdom/modules/attributes.js';
+import propsModule from './snabbdom/modules/props.js';
+import styleModule from './snabbdom/modules/style.js';
+import eventListenersModule from './eventslisteners.js';
+const patch = init([attributesModule, propsModule, styleModule, eventListenersModule]);
+export default patch;

package/modules/component/snabbdom/h.d.ts

@@ -0,0 +1,10 @@
+import { VNode, VNodeData } from './vnode.js';
+export declare type VNodes = Array<VNode>;
+export declare type VNodesSparse = VNode | Array<VNode | undefined | null>;
+export declare function h (sel: string): VNode;
+export declare function h (sel: string, data: VNodeData): VNode;
+export declare function h (sel: string, text: string): VNode;
+export declare function h (sel: string, children: VNodesSparse): VNode;
+export declare function h (sel: string, data: VNodeData, text: string): VNode;
+export declare function h (sel: string, data: VNodeData, children: VNodesSparse): VNode;
+export default h;

package/modules/component/snabbdom/h.js

@@ -0,0 +1,50 @@
+import { vnode } from './vnode.js';
+import * as is from './is.js';
+function addNS(data, children, sel) {
+  data.ns = 'http://www.w3.org/2000/svg';
+  if (sel !== 'foreignObject' && children !== undefined) {
+    for (var i = 0; i < children.length; ++i) {
+      var childData = children[i].data;
+      if (childData !== undefined) {
+        addNS(childData, children[i].children, children[i].sel);
+      }
+    }
+  }
+}
+export function h(sel, b, c) {
+  var data = {},
+    children,
+    text,
+    i;
+  if (c !== undefined) {
+    data = b;
+    if (is.array(c)) {
+      children = c;
+    } else if (is.primitive(c)) {
+      text = c;
+    } else if (c && c.sel) {
+      children = [c];
+    }
+  } else if (b !== undefined) {
+    if (is.array(b)) {
+      children = b;
+    } else if (is.primitive(b)) {
+      text = b;
+    } else if (b && b.sel) {
+      children = [b];
+    } else {
+      data = b;
+    }
+  }
+  if (is.array(children)) {
+    for (i = 0; i < children.length; ++i) {
+      if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
+    }
+  }
+  if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' && (sel.length === 3 || sel[3] === '.' || sel[3] === '#')) {
+    addNS(data, children, sel);
+  }
+  return vnode(sel, data, children, text, undefined);
+}
+;
+export default h;

package/modules/component/snabbdom/helpers/attachto.d.ts

@@ -0,0 +1,9 @@
+import { VNode } from '../vnode.js';
+export interface AttachData {
+  [key: string]: any;
+  [i: number]: any;
+  placeholder?: any;
+  real?: Node;
+}
+export declare function attachTo (target: Element, vnode: VNode): VNode;
+export default attachTo;

package/modules/component/snabbdom/helpers/attachto.js

@@ -0,0 +1,49 @@
+function pre(vnode, newVnode) {
+  var attachData = vnode.data.attachData;
+  // Copy created placeholder and real element from old vnode
+  newVnode.data.attachData.placeholder = attachData.placeholder;
+  newVnode.data.attachData.real = attachData.real;
+  // Mount real element in vnode so the patch process operates on it
+  vnode.elm = vnode.data.attachData.real;
+}
+function post(_, vnode) {
+  // Mount dummy placeholder in vnode so potential reorders use it
+  vnode.elm = vnode.data.attachData.placeholder;
+}
+function destroy(vnode) {
+  // Remove placeholder
+  if (vnode.elm !== undefined) {
+    vnode.elm.parentNode.removeChild(vnode.elm);
+  }
+  // Remove real element from where it was inserted
+  vnode.elm = vnode.data.attachData.real;
+}
+function create(_, vnode) {
+  var real = vnode.elm,
+    attachData = vnode.data.attachData;
+  var placeholder = document.createElement('span');
+  // Replace actual element with dummy placeholder
+  // Snabbdom will then insert placeholder instead
+  vnode.elm = placeholder;
+  attachData.target.appendChild(real);
+  attachData.real = real;
+  attachData.placeholder = placeholder;
+}
+export function attachTo(target, vnode) {
+  if (vnode.data === undefined) vnode.data = {};
+  if (vnode.data.hook === undefined) vnode.data.hook = {};
+  var data = vnode.data;
+  var hook = vnode.data.hook;
+  data.attachData = {
+    target: target,
+    placeholder: undefined,
+    real: undefined
+  };
+  hook.create = create;
+  hook.prepatch = pre;
+  hook.postpatch = post;
+  hook.destroy = destroy;
+  return vnode;
+}
+;
+export default attachTo;

package/modules/component/snabbdom/hooks.d.ts

@@ -0,0 +1,23 @@
+import { VNode } from './vnode.js';
+export declare type PreHook = () => any;
+export declare type InitHook = (vNode: VNode) => any;
+export declare type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
+export declare type InsertHook = (vNode: VNode) => any;
+export declare type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export declare type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
+export declare type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export declare type DestroyHook = (vNode: VNode) => any;
+export declare type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
+export declare type PostHook = () => any;
+export interface Hooks {
+  pre?: PreHook;
+  init?: InitHook;
+  create?: CreateHook;
+  insert?: InsertHook;
+  prepatch?: PrePatchHook;
+  update?: UpdateHook;
+  postpatch?: PostPatchHook;
+  destroy?: DestroyHook;
+  remove?: RemoveHook;
+  post?: PostHook;
+}

package/modules/component/snabbdom/htmldomapi.d.ts

@@ -0,0 +1,19 @@
+export interface DOMAPI {
+    createElement: (tagName: any) => HTMLElement;
+    createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
+    createTextNode: (text: string) => Text;
+    createComment: (text: string) => Comment;
+    insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
+    removeChild: (node: Node, child: Node) => void;
+    appendChild: (node: Node, child: Node) => void;
+    parentNode: (node: Node) => Node;
+    nextSibling: (node: Node) => Node;
+    tagName: (elm: Element) => string;
+    setTextContent: (node: Node, text: string | null) => void;
+    getTextContent: (node: Node) => string | null;
+    isElement: (node: Node) => node is Element;
+    isText: (node: Node) => node is Text;
+    isComment: (node: Node) => node is Comment;
+}
+export declare const htmlDomApi: DOMAPI;
+export default htmlDomApi;

package/modules/component/snabbdom/htmldomapi.js

@@ -0,0 +1,67 @@
+function createElement(tagName) {
+  return document.createElement(tagName);
+}
+function createElementNS(namespaceURI, qualifiedName) {
+  return document.createElementNS(namespaceURI, qualifiedName);
+}
+function createTextNode(text) {
+  return document.createTextNode(text);
+}
+function createComment(text) {
+  return document.createComment(text);
+}
+function insertBefore(parentNode, newNode, referenceNode) {
+  if (referenceNode && referenceNode.parentNode !== parentNode) {
+    if (referenceNode.__component__) referenceNode = referenceNode.__component__.el;
+  }
+  parentNode.insertBefore(newNode, referenceNode);
+}
+function removeChild(node, child) {
+  if (!node) return;
+  node.removeChild(child);
+}
+function appendChild(node, child) {
+  node.appendChild(child);
+}
+function parentNode(node) {
+  return node.parentNode;
+}
+function nextSibling(node) {
+  return node.nextSibling;
+}
+function tagName(elm) {
+  return elm.tagName;
+}
+function setTextContent(node, text) {
+  node.textContent = text;
+}
+function getTextContent(node) {
+  return node.textContent;
+}
+function isElement(node) {
+  return node.nodeType === 1;
+}
+function isText(node) {
+  return node.nodeType === 3;
+}
+function isComment(node) {
+  return node.nodeType === 8;
+}
+export var htmlDomApi = {
+  createElement: createElement,
+  createElementNS: createElementNS,
+  createTextNode: createTextNode,
+  createComment: createComment,
+  insertBefore: insertBefore,
+  removeChild: removeChild,
+  appendChild: appendChild,
+  parentNode: parentNode,
+  nextSibling: nextSibling,
+  tagName: tagName,
+  setTextContent: setTextContent,
+  getTextContent: getTextContent,
+  isElement: isElement,
+  isText: isText,
+  isComment: isComment
+};
+export default htmlDomApi;

package/modules/component/snabbdom/is.d.ts

@@ -0,0 +1,2 @@
+export declare const array: (arg: any) => arg is any[];
+export declare function primitive(s: any): s is (string | number);

package/modules/component/snabbdom/is.js

@@ -0,0 +1,4 @@
+export var array = Array.isArray;
+export function primitive(s) {
+  return typeof s === 'string' || typeof s === 'number';
+}

package/modules/component/snabbdom/modules/attributes.d.ts

@@ -0,0 +1,4 @@
+import { Module } from './module.js';
+export declare type Attrs = Record<string, string | number | boolean>;
+export declare const attributesModule: Module;
+export default attributesModule;

package/modules/component/snabbdom/modules/attributes.js

@@ -0,0 +1,51 @@
+var xlinkNS = 'http://www.w3.org/1999/xlink';
+var xmlNS = 'http://www.w3.org/XML/1998/namespace';
+var colonChar = 58;
+var xChar = 120;
+function updateAttrs(oldVnode, vnode) {
+  var key,
+    elm = vnode.elm,
+    oldAttrs = oldVnode.data.attrs,
+    attrs = vnode.data.attrs;
+  if (!oldAttrs && !attrs) return;
+  if (oldAttrs === attrs) return;
+  oldAttrs = oldAttrs || {};
+  attrs = attrs || {};
+  // update modified attributes, add new attributes
+  for (key in attrs) {
+    var cur = attrs[key];
+    var old = oldAttrs[key];
+    if (old !== cur) {
+      if (cur === true) {
+        elm.setAttribute(key, "");
+      } else if (cur === false) {
+        elm.removeAttribute(key);
+      } else {
+        if (key.charCodeAt(0) !== xChar) {
+          elm.setAttribute(key, cur);
+        } else if (key.charCodeAt(3) === colonChar) {
+          // Assume xml namespace
+          elm.setAttributeNS(xmlNS, key, cur);
+        } else if (key.charCodeAt(5) === colonChar) {
+          // Assume xlink namespace
+          elm.setAttributeNS(xlinkNS, key, cur);
+        } else {
+          elm.setAttribute(key, cur);
+        }
+      }
+    }
+  }
+  // remove removed attributes
+  // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
+  // the other option is to remove all attributes with value == undefined
+  for (key in oldAttrs) {
+    if (!(key in attrs)) {
+      elm.removeAttribute(key);
+    }
+  }
+}
+export var attributesModule = {
+  create: updateAttrs,
+  update: updateAttrs
+};
+export default attributesModule;

package/modules/component/snabbdom/modules/class.d.ts

@@ -0,0 +1,4 @@
+import { Module } from './module.js';
+export declare type Classes = Record<string, boolean>;
+export declare const classModule: Module;
+export default classModule;

package/modules/component/snabbdom/modules/class.js

@@ -0,0 +1,27 @@
+function updateClass(oldVnode, vnode) {
+  var cur,
+    name,
+    elm = vnode.elm,
+    oldClass = oldVnode.data.class,
+    klass = vnode.data.class;
+  if (!oldClass && !klass) return;
+  if (oldClass === klass) return;
+  oldClass = oldClass || {};
+  klass = klass || {};
+  for (name in oldClass) {
+    if (!klass[name]) {
+      elm.classList.remove(name);
+    }
+  }
+  for (name in klass) {
+    cur = klass[name];
+    if (cur !== oldClass[name]) {
+      elm.classList[cur ? 'add' : 'remove'](name);
+    }
+  }
+}
+export var classModule = {
+  create: updateClass,
+  update: updateClass
+};
+export default classModule;

package/modules/component/snabbdom/modules/dataset.d.ts

@@ -0,0 +1,4 @@
+import { Module } from './module.js';
+export declare type Dataset = Record<string, string>;
+export declare const datasetModule: Module;
+export default datasetModule;