@gogocat/data-bind 1.12.0 → 2.0.0

package/gruntfile.js

@@ -1,92 +0,0 @@
-module.exports = function(grunt) {
-    'use strict';
-
-    // Project configuration.
-    grunt.initConfig({
-        pkg: grunt.file.readJSON('package.json'),
-
-        // create a static server for jasmine / PhantomJS
-        connect: {
-            test: {
-                options: {
-                    hostname: 'localhost',
-                    port: 8887,
-                },
-            },
-            debug: {
-                options: {
-                    hostname: 'localhost',
-                    port: 8889,
-                    keepalive: true,
-                    open: 'http://localhost:8889/_SpecRunner.html',
-                },
-            },
-        },
-
-        // this is just config for jasmine - not a grunt module
-        jasmineTestSettings: {
-            src: ['./dist/js/dataBind.min.js'],
-            host: 'http://localhost:8887',
-            specs: './test/specs/*.spec.js',
-            styles: './test/css/reporter.css',
-            vendor: ['./vendors/jquery-3.2.1.min.js', './vendors/jasmine-jquery.js'],
-            helpers: ['./test/helpers/testHelper.js'],
-        },
-
-        jasmine: {
-            test: {
-                src: '<%= jasmineTestSettings.src %>',
-                options: {
-                    'styles': '<%= jasmineTestSettings.styles %>',
-                    'host': '<%= jasmineTestSettings.host %>',
-                    'specs': '<%= jasmineTestSettings.specs %>',
-                    'vendor': '<%= jasmineTestSettings.vendor %>',
-                    'helpers': '<%= jasmineTestSettings.helpers %>',
-                    'keepRunner': true,
-                    '--web-security': 'no',
-                    '--local-to-remote-url-access': true,
-                    '--ignore-ssl-errors': true,
-                },
-            },
-            // code test coverage
-            coverage: {
-                src: '<%= jasmineTestSettings.src %>',
-                options: {
-                    'host': '<%= jasmineTestSettings.host %>',
-                    'specs': '<%= jasmineTestSettings.specs %>',
-                    'vendor': '<%= jasmineTestSettings.vendor %>',
-                    'helpers': '<%= jasmineTestSettings.helpers %>',
-                    'keepRunner': true,
-                    '--web-security': 'no',
-                    '--local-to-remote-url-access': true,
-                    '--ignore-ssl-errors': true,
-
-                    'template': require('grunt-template-jasmine-istanbul'),
-                    'templateOptions': {
-                        coverage: './coverage/coverage.json',
-                        report: [
-                            {
-                                type: 'text-summary',
-                            },
-                            {
-                                type: 'lcov',
-                                options: {
-                                    dir: './coverage/lcov',
-                                },
-                            },
-                        ],
-                    },
-                },
-            },
-        },
-    });
-
-    grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-jasmine');
-    grunt.loadNpmTasks('grunt-open');
-
-    // jasmine test via PhantomJS with 'connect' local server - for local dev and debug
-    grunt.registerTask('test', ['connect:test', 'jasmine:test', 'connect:debug']);
-    // jasmine test with coverage - this if for build server
-    grunt.registerTask('test:coverage', ['connect:test', 'jasmine:coverage']);
-};

package/gulpfile.js

@@ -1,32 +0,0 @@
-const gulp = require('gulp');
-const sourcemaps = require('gulp-sourcemaps');
-const uglify = require('gulp-uglify-es').default;
-const rename = require('gulp-rename');
-const replace = require('gulp-replace');
-
-const pkg = require('./package.json');
-const verionToken = '@version@';
-
-const distJsPath = './dist/js/';
-const bundledFile = 'dataBind.js';
-
-// set release version to source
-gulp.task('versioning', function(cb) {
-    return gulp
-        .src(`${distJsPath}${bundledFile}`)
-        .pipe(replace(verionToken, `${pkg.version}`))
-        .pipe(gulp.dest(distJsPath));
-});
-
-// uglify
-gulp.task('compress', function(cb) {
-    return gulp
-        .src(`${distJsPath}${bundledFile}`)
-        .pipe(rename({extname: '.min.js'}))
-        .pipe(sourcemaps.init())
-        .pipe(uglify())
-        .pipe(sourcemaps.write(''))
-        .pipe(gulp.dest(distJsPath));
-});
-
-gulp.task('default', gulp.series('versioning', 'compress'));

package/src/applyBindingExport.js

@@ -1,5 +0,0 @@
-// re-export applyBinding to avoid circular dependence
-import applyBinding from './applyBinding';
-
-export default applyBinding;
-

package/src/changeBinding.js

@@ -1,63 +0,0 @@
-/* eslint-disable no-invalid-this */
-import {
-    getViewModelValue,
-    setViewModelValue,
-    resolveViewModelContext,
-    resolveParamList,
-} from './util';
-import _escape from './_escape';
-
-/**
- * changeBinding
- * @description input element on change event binding. DOM -> viewModel update
- * @param {object} cache
- * @param {object} viewModel
- * @param {object} bindingAttrs
- * @param {boolean} forceRender
- */
-const changeBinding = ({
-    cache,
-    viewModel,
-    bindingAttrs,
-    forceRender,
-    type = 'change',
-}) => {
-    const handlerName = cache.dataKey;
-    let paramList = cache.parameters;
-    const modelDataKey = cache.el.getAttribute(bindingAttrs.model);
-    let newValue = '';
-    let oldValue = '';
-    let viewModelContext;
-    const APP = viewModel.APP || viewModel.$root.APP;
-
-    if (!handlerName || (!forceRender && !APP.$rootElement.contains(cache.el))) {
-        return;
-    }
-
-    const handlerFn = getViewModelValue(viewModel, handlerName);
-
-    if (typeof handlerFn === 'function') {
-        viewModelContext = resolveViewModelContext(viewModel, handlerName);
-        paramList = paramList ? resolveParamList(viewModel, paramList) : [];
-
-        function changeHandler(e) {
-            const $this = this;
-            const isCheckbox = $this.type === 'checkbox';
-            newValue = isCheckbox ? $this.checked : _escape($this.value);
-            // set data to viewModel
-            if (modelDataKey) {
-                oldValue = getViewModelValue(viewModel, modelDataKey);
-                setViewModelValue(viewModel, modelDataKey, newValue);
-            }
-            const args = [e, e.currentTarget, newValue, oldValue].concat(paramList);
-            handlerFn.apply(viewModelContext, args);
-            oldValue = newValue;
-        }
-
-        // assing on change event
-        cache.el.removeEventListener(type, changeHandler, false);
-        cache.el.addEventListener(type, changeHandler, false);
-    }
-};
-
-export default changeBinding;

package/src/config.js

@@ -1,66 +0,0 @@
-const bindingAttrs = {
-    comp: 'data-bind-comp',
-    tmp: 'data-bind-tmp',
-    text: 'data-bind-text',
-    click: 'data-bind-click',
-    dblclick: 'data-bind-dblclick',
-    blur: 'data-bind-blur',
-    focus: 'data-bind-focus',
-    hover: 'data-bind-hover',
-    input: 'data-bind-input',
-    change: 'data-bind-change',
-    submit: 'data-bind-submit',
-    model: 'data-bind-model',
-    show: 'data-bind-show',
-    css: 'data-bind-css',
-    attr: 'data-bind-attr',
-    forOf: 'data-bind-for',
-    if: 'data-bind-if',
-    switch: 'data-bind-switch',
-    case: 'data-bind-case',
-    default: 'data-bind-default',
-};
-const serverRenderedAttr = 'data-server-rendered';
-const dataIndexAttr = 'data-index';
-const commentPrefix = {
-    forOf: 'data-forOf_',
-    if: 'data-if_',
-    case: 'data-case_',
-    default: 'data-default_',
-};
-const commentSuffix = '_end';
-
-const bindingDataReference = {
-    rootDataKey: '$root',
-    currentData: '$data',
-    currentIndex: '$index',
-    mouseEnterHandlerName: 'in',
-    mouseLeaveHandlerName: 'out',
-};
-
-const bindingUpdateConditions = {
-    serverRendered: 'SERVER-RENDERED',
-    init: 'INIT',
-};
-
-// maximum string length before running regex
-const maxDatakeyLength = 250;
-
-const constants = {
-    filters: {
-        ONCE: 'once',
-    },
-    PARENT_REF: '_parent',
-};
-
-export {
-    bindingAttrs,
-    dataIndexAttr,
-    serverRenderedAttr,
-    commentPrefix,
-    commentSuffix,
-    bindingUpdateConditions,
-    bindingDataReference,
-    maxDatakeyLength,
-    constants,
-};

package/src/createEventBinding.js

@@ -1,46 +0,0 @@
-import {
-    getFormData,
-    getViewModelValue,
-    resolveViewModelContext,
-    resolveParamList,
-} from './util';
-
-const createEventBinding = ({
-    cache = {},
-    forceRender = false,
-    type = '',
-    viewModel = {},
-}) => {
-    const handlerName = cache.dataKey;
-    let paramList = cache.parameters;
-    let viewModelContext;
-    const APP = viewModel.APP || viewModel.$root.APP;
-
-    if (!type || !handlerName || (!forceRender && !APP.$rootElement.contains(cache.el))) {
-        return;
-    }
-
-    const handlerFn = getViewModelValue(viewModel, handlerName);
-
-    if (typeof handlerFn === 'function') {
-        viewModelContext = resolveViewModelContext(viewModel, handlerName);
-        paramList = paramList ? resolveParamList(viewModel, paramList) : [];
-
-        const handlerWrap = (e) => {
-            let formData;
-            let args = [];
-            if (type === 'submit') {
-                formData = getFormData(e.currentTarget);
-                args = [e, e.currentTarget, formData].concat(paramList);
-            } else {
-                args = [e, e.currentTarget].concat(paramList);
-            }
-            handlerFn.apply(viewModelContext, args);
-        };
-
-        cache.el.removeEventListener(type, handlerWrap, false);
-        cache.el.addEventListener(type, handlerWrap, false);
-    }
-};
-
-export default createEventBinding;

package/src/eventSystem.js

@@ -1,46 +0,0 @@
-// https://yiochen.github.io/blog/post/weakmap-event-system/
-// usage:
-// attach listener to button
-// eventSystem.on(button, 'click', clickHandler);
-// eventSystem.trigger(button, 'click');
-
-const eventSystem = {
-    wm: new WeakMap(),
-    on(target, event, listener) {
-        let listeners = this.wm.get(target);
-        if (listeners === undefined) {
-            listeners = {};
-        }
-        let listenersForEvent = listeners[event];
-        if (listenersForEvent === undefined) {
-            listenersForEvent = new Set();
-        }
-        listenersForEvent.add(listener);
-        listeners[event] = listenersForEvent;
-        this.wm.add(target, listeners);
-    },
-
-    off(target, event, listener) {
-        const listeners = this.wm.get(target);
-        if (!listeners) return;
-        const listenersForEvent = listeners[event];
-        if (!listenersForEvent) return;
-        listenersForEvent.delete(handler);
-    },
-
-    trigger(target, event) {
-        const listeners = this.wm.get(target);
-        if (!listeners) return;
-        const listenersForEvent = listeners[event];
-        if (!listenersForEvent) return;
-        // TODO: check what is listenersForEvent
-        // handlers should be  listeners or listenersForEvent
-        for (const handler of handlers) {
-            // we use a setTimeout here because we want event triggering to be asynchronous.
-            // setTimeout(handler, 0, event, target);
-            handler(event, target);
-        }
-    },
-};
-
-export default eventSystem;

package/src/hoverBinding.js

@@ -1,57 +0,0 @@
-/* eslint-disable no-invalid-this */
-import {bindingDataReference} from './config';
-import {
-    getViewModelValue,
-    resolveViewModelContext,
-    resolveParamList,
-} from './util';
-
-/**
- * blurBinding
- * DOM decleartive on blur event binding
- * event handler bind to viewModel method according to the DOM attribute
- * @param {object} cache
- * @param {object} viewModel
- * @param {object} bindingAttrs
- * @param {boolean} forceRender
- */
-const hoverBinding = (cache, viewModel, bindingAttrs, forceRender) => {
-    const handlerName = cache.dataKey;
-    let paramList = cache.parameters;
-    const inHandlerName = bindingDataReference.mouseEnterHandlerName;
-    const outHandlerName = bindingDataReference.mouseLeaveHandlerName;
-    let viewModelContext;
-    const APP = viewModel.APP || viewModel.$root.APP;
-
-    cache.elementData = cache.elementData || {};
-
-    // TODO: check what is APP.$rootElement.contains(cache.el)
-    if (!handlerName || (!forceRender && !APP.$rootElement.contains(cache.el))) {
-        return;
-    }
-
-    const handlers = getViewModelValue(viewModel, handlerName);
-
-    if (handlers && typeof handlers[inHandlerName] === 'function' && typeof handlers[outHandlerName] === 'function') {
-        viewModelContext = resolveViewModelContext(viewModel, handlerName);
-        paramList = paramList ? resolveParamList(viewModel, paramList) : [];
-
-        function onMouseEnterHandler(e) {
-            const args = [e, cache.el].concat(paramList);
-            handlers[inHandlerName].apply(viewModelContext, args);
-        }
-
-        function onMouseLeaveHandler(e) {
-            const args = [e, cache.el].concat(paramList);
-            handlers[outHandlerName].apply(viewModelContext, args);
-        }
-
-        cache.el.removeEventListener('mouseenter', onMouseEnterHandler, false);
-        cache.el.removeEventListener('mouseleave', onMouseLeaveHandler, false);
-
-        cache.el.addEventListener('mouseenter', onMouseEnterHandler, false);
-        cache.el.addEventListener('mouseleave', onMouseLeaveHandler, false);
-    }
-};
-
-export default hoverBinding;

package/src/index.js

@@ -1,26 +0,0 @@
-import * as config from './config';
-import {extend} from './util';
-import Binder from './binder';
-
-const isSupportPromise = typeof window['Promise'] === 'function';
-
-let bindingAttrs = config.bindingAttrs;
-
-const use = (settings = {}) => {
-    if (settings.bindingAttrs) {
-        bindingAttrs = extend({}, settings.bindingAttrs);
-    }
-};
-
-const init = ($rootElement, viewModel = null) => {
-    if (!isSupportPromise) {
-        return console.warn('Browser not support Promise');
-    }
-    return new Binder($rootElement, viewModel, bindingAttrs);
-};
-
-export default {
-    use: use,
-    init: init,
-    version: '@version@',
-};

package/src/renderTemplate.js

@@ -1,128 +0,0 @@
-import {dataIndexAttr} from './config';
-import {
-    createHtmlFragment,
-    emptyElement,
-    getViewModelPropValue,
-    parseStringToJson,
-} from './util';
-
-let $domFragment = null;
-let $templateRoot = null;
-let nestTemplatesCount = 0;
-
-/**
- * getTemplateString
- * @description get Template tag innerHTML string
- * @param {string} id
- * @return {string} rendered html string
- */
-const getTemplateString = (id) => {
-    const templateElement = document.getElementById(id);
-
-    return templateElement ? templateElement.innerHTML : '';
-};
-
-/**
- * renderTemplate
- * @description
- * get template setting from DOM attribute then call compileTemplate
- * to render and append to target DOM
- * @param {object} cache
- * @param {object} viewModel
- * @param {object} bindingAttrs
- * @param {object} elementCache
- */
-const renderTemplate = (cache, viewModel, bindingAttrs, elementCache) => {
-    const settings = typeof cache.dataKey === 'string' ? parseStringToJson(cache.dataKey) : cache.dataKey;
-    let viewData = settings.data;
-    const isAppend = settings.append;
-    const isPrepend = settings.prepend;
-    let $currentElement;
-
-    cache.dataKey = settings;
-
-    viewData = (typeof viewData === 'undefined' || viewData === '$root') ?
-        viewModel :
-        getViewModelPropValue(viewModel, {
-            dataKey: settings.data,
-            parameters: cache.parameters,
-        });
-
-    if (!viewData) {
-        return;
-    }
-
-    const $element = cache.el;
-    const $index = typeof viewModel.$index !== 'undefined' ? viewModel.$index : $element.getAttribute(dataIndexAttr);
-
-    if (typeof $index !== 'undefined') {
-        viewData.$index = $index;
-    }
-
-    $domFragment = $domFragment || document.createDocumentFragment();
-
-    $templateRoot = $templateRoot || $element;
-
-    const htmlString = getTemplateString(settings.id);
-
-    const htmlFragment = createHtmlFragment(htmlString);
-
-    // append rendered html
-    if (!$domFragment.childNodes.length) {
-        // domFragment should be empty in first run
-        $currentElement = $domFragment; // copy of $domFragment for later find nested template check
-        $domFragment.appendChild(htmlFragment);
-    } else {
-        // during recursive run keep append to current fragment
-        $currentElement = $element; // reset to current nested template element
-        if (!isAppend && !isPrepend) {
-            $currentElement = emptyElement($currentElement);
-        }
-        if (isPrepend) {
-            $currentElement.insertBefore(htmlFragment, $currentElement.firstChild);
-        } else {
-            $currentElement.appendChild(htmlFragment);
-        }
-    }
-
-    // check if there are nested template then recurisive render them
-    const $nestedTemplates = $currentElement.querySelectorAll('[' + bindingAttrs.tmp + ']');
-
-    const nestedTemplatesLength = $nestedTemplates.length;
-
-    if (nestedTemplatesLength) {
-        nestTemplatesCount += nestedTemplatesLength;
-
-        for (let i=0; i < nestedTemplatesLength; i+=1) {
-            const thisTemplateCache = {
-                el: $nestedTemplates[i],
-                dataKey: $nestedTemplates[i].getAttribute(bindingAttrs.tmp),
-            };
-            elementCache[bindingAttrs.tmp].push(thisTemplateCache);
-            // recursive template render
-            renderTemplate(thisTemplateCache, viewModel, bindingAttrs, elementCache);
-            nestTemplatesCount -= 1;
-        }
-    }
-
-    // no more nested tempalted to render, start to append $domFragment into $templateRoot
-    if (nestTemplatesCount === 0) {
-        // append to DOM once
-        if (!isAppend && !isPrepend) {
-            $templateRoot = emptyElement($templateRoot);
-        }
-        if (isPrepend) {
-            $templateRoot.insertBefore($domFragment, $templateRoot.firstChild);
-        } else {
-            $templateRoot.appendChild($domFragment);
-        }
-        // clear cached fragment
-        $domFragment = $templateRoot = null;
-        // trigger callback if provided
-        if (typeof viewModel.afterTemplateRender === 'function') {
-            viewModel.afterTemplateRender(viewData);
-        }
-    }
-};
-
-export default renderTemplate;

package/src/renderTemplatesBinding.js

@@ -1,44 +0,0 @@
-import {bindingUpdateConditions} from './config';
-import applyBinding from './applyBindingExport';
-import createBindingOption from './createBindingOption';
-import renderTemplate from './renderTemplate';
-
-const renderTemplatesBinding = ({ctx, elementCache, updateOption, bindingAttrs, viewModel}) => {
-    if (!elementCache || !bindingAttrs) {
-        return false;
-    }
-    // render and apply binding to template(s) and forOf DOM
-    if (elementCache[bindingAttrs.tmp] && elementCache[bindingAttrs.tmp].length) {
-        // when re-render call with {templateBinding: true}
-        // template and nested templates
-        if (updateOption.templateBinding) {
-            // overwrite updateOption with 'init' bindingUpdateConditions
-            updateOption = createBindingOption(bindingUpdateConditions.init);
-
-            elementCache[bindingAttrs.tmp].forEach(($element) => {
-                renderTemplate($element, viewModel, bindingAttrs, elementCache);
-            });
-            // update cache after all template(s) rendered
-            ctx.updateElementCache({
-                templateCache: true,
-                elementCache: elementCache,
-                isRenderedTemplates: true,
-            });
-        }
-        // enforce render even element is not in DOM tree
-        updateOption.forceRender = true;
-
-        // apply bindings to rendered templates element
-        elementCache[bindingAttrs.tmp].forEach((cache) => {
-            applyBinding({
-                elementCache: cache.bindingCache,
-                updateOption: updateOption,
-                bindingAttrs: bindingAttrs,
-                viewModel: viewModel,
-            });
-        });
-    }
-    return true;
-};
-
-export default renderTemplatesBinding;