@gogocat/data-bind 1.11.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/binder.js

@@ -1,422 +0,0 @@
-import * as config from './config';
-import {
-    debounceRaf,
-    each,
-    throwErrorMessage,
-} from './util';
-import renderTemplate from './renderTemplate';
-import hoverBinding from './hoverBinding';
-import changeBinding from './changeBinding';
-import modelBinding from './modelBinding';
-import textBinding from './textBinding';
-import showBinding from './showBinding';
-import cssBinding from './cssBinding';
-import attrBinding from './attrBinding';
-import forOfBinding from './forOfBinding';
-import ifBinding from './ifBinding';
-import switchBinding from './switchBinding';
-import createBindingCache from './domWalker';
-import createEventBinding from './createEventBinding';
-import createBindingOption from './createBindingOption';
-import * as pubSub from './pubSub';
-
-let compIdIndex = 0;
-
-class Binder {
-    constructor($rootElement, viewModel, bindingAttrs) {
-        if (!$rootElement || $rootElement.nodeType !== 1 || viewModel === null || typeof viewModel !== 'object') {
-            throw new TypeError('$rootElement or viewModel is invalid');
-        }
-
-        this.initRendered = false;
-
-        this.compId = compIdIndex += 1;
-
-        this.$rootElement = $rootElement;
-
-        this.viewModel = viewModel;
-
-        this.bindingAttrs = bindingAttrs;
-
-        this.render = debounceRaf(this.render, this);
-
-        this.isServerRendered = this.$rootElement.getAttribute(config.serverRenderedAttr) !== null;
-
-        // inject instance into viewModel
-        this.viewModel.APP = this;
-
-        // add $root pointer to viewModel so binding can be refer as $root.something
-        this.viewModel.$root = this.viewModel;
-
-        // 1st step
-        // parsView walk the DOM and create binding cache that holds each element's binding details
-        // this binding cache is like AST for render and update
-        this.parseView();
-
-        // for jquery user set viewModel referece to $rootElement for easy debug
-        // otherwise use Expando to attach viewModel to $rootElement
-        this.$rootElement[config.bindingDataReference.rootDataKey] = this.viewModel;
-
-        return this;
-    }
-
-    /**
-     * parseView
-     * @description
-     * @return {this}
-     * traver from $rootElement to find each data-bind-* element
-     * then apply data binding
-     */
-    parseView() {
-        this.elementCache = createBindingCache({
-            rootNode: this.$rootElement,
-            bindingAttrs: this.bindingAttrs,
-        });
-
-        // updateElementCache if server rendered on init
-        if (this.isServerRendered && !this.initRendered) {
-            this.updateElementCache({
-                templateCache: true,
-            });
-        }
-        return this;
-    }
-
-    /**
-     * updateElementCache
-     * @param {object} opt
-     * @description call createBindingCache to parse view and generate bindingCache
-     */
-    updateElementCache(opt = {}) {
-        const elementCache = opt.elementCache || this.elementCache;
-
-        if (opt.allCache) {
-            // walk dom from root element to regenerate elementCache
-            this.elementCache = createBindingCache({
-                rootNode: this.$rootElement,
-                bindingAttrs: this.bindingAttrs,
-            });
-        }
-        // walk from first rendered template node to create/update child bindingCache
-        if (opt.allCache || opt.templateCache) {
-            if (elementCache[this.bindingAttrs.tmp] && elementCache[this.bindingAttrs.tmp].length) {
-                elementCache[this.bindingAttrs.tmp].forEach((cache) => {
-                    // set skipCheck as skipForOfParseFn whenever an node has
-                    // both template and forOf bindings
-                    // then the template bindingCache should be an empty object
-                    let skipForOfParseFn = null;
-                    if (cache.el.hasAttribute(this.bindingAttrs.forOf)) {
-                        skipForOfParseFn = () => {
-                            return true;
-                        };
-                    }
-                    cache.bindingCache = createBindingCache({
-                        rootNode: cache.el,
-                        bindingAttrs: this.bindingAttrs,
-                        skipCheck: skipForOfParseFn,
-                        isRenderedTemplate: opt.isRenderedTemplates,
-                    });
-                });
-            }
-        }
-    }
-
-    render(opt = {}) {
-        let updateOption = {};
-
-        if (!this.initRendered) {
-            // only update eventsBinding if server rendered
-            if (this.isServerRendered) {
-                this.$rootElement.removeAttribute(config.serverRenderedAttr);
-                updateOption = createBindingOption(config.bindingUpdateConditions.serverRendered, opt);
-            } else {
-                updateOption = createBindingOption(config.bindingUpdateConditions.init, opt);
-            }
-        } else {
-            // when called again only update visualBinding options
-            updateOption = createBindingOption('', opt);
-        }
-
-        // create postProcessQueue before start rendering
-        this.postProcessQueue = [];
-
-        const renderBindingOption = {
-            ctx: this,
-            elementCache: this.elementCache,
-            updateOption: updateOption,
-            bindingAttrs: this.bindingAttrs,
-            viewModel: this.viewModel,
-        };
-
-        // always render template binding first
-        // render and apply binding to template(s)
-        // this is an share function therefore passing 'this' context
-        renderTemplatesBinding(renderBindingOption);
-
-        // apply bindings to rest of the DOM
-        Binder.applyBinding(renderBindingOption);
-
-        // trigger postProcess
-        Binder.postProcess(this.postProcessQueue);
-        // clear postProcessQueue
-        this.postProcessQueue.length = 0;
-        delete this.postProcessQueue;
-
-        this.initRendered = true;
-    }
-
-    static applyBinding({ctx, elementCache, updateOption, bindingAttrs, viewModel}) {
-        if (!elementCache || !updateOption) {
-            return;
-        }
-
-        // the follow binding should be in order for better efficiency
-
-        // apply forOf Binding
-        if (updateOption.forOfBinding && elementCache[bindingAttrs.forOf] && elementCache[bindingAttrs.forOf].length) {
-            elementCache[bindingAttrs.forOf].forEach((cache) => {
-                forOfBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply attr Binding
-        if (updateOption.attrBinding && elementCache[bindingAttrs.attr] && elementCache[bindingAttrs.attr].length) {
-            elementCache[bindingAttrs.attr].forEach((cache) => {
-                attrBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply if Binding
-        if (updateOption.ifBinding && elementCache[bindingAttrs.if] && elementCache[bindingAttrs.if].length) {
-            elementCache[bindingAttrs.if].forEach((cache) => {
-                ifBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply show Binding
-        if (updateOption.showBinding && elementCache[bindingAttrs.show] && elementCache[bindingAttrs.show].length) {
-            elementCache[bindingAttrs.show].forEach((cache) => {
-                showBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply switch Binding
-        if (updateOption.switchBinding && elementCache[bindingAttrs.switch] && elementCache[bindingAttrs.switch].length) {
-            elementCache[bindingAttrs.switch].forEach((cache) => {
-                switchBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply text binding
-        if (updateOption.textBinding && elementCache[bindingAttrs.text] && elementCache[bindingAttrs.text].length) {
-            elementCache[bindingAttrs.text].forEach((cache) => {
-                textBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply cssBinding
-        if (updateOption.cssBinding && elementCache[bindingAttrs.css] && elementCache[bindingAttrs.css].length) {
-            elementCache[bindingAttrs.css].forEach((cache) => {
-                cssBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply model binding
-        if (updateOption.modelBinding && elementCache[bindingAttrs.model] && elementCache[bindingAttrs.model].length) {
-            elementCache[bindingAttrs.model].forEach((cache) => {
-                modelBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply change binding
-        if (updateOption.changeBinding && elementCache[bindingAttrs.change] && elementCache[bindingAttrs.change].length) {
-            elementCache[bindingAttrs.change].forEach((cache) => {
-                changeBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-
-        // apply submit binding
-        if (updateOption.submitBinding && elementCache[bindingAttrs.submit] && elementCache[bindingAttrs.submit].length) {
-            elementCache[bindingAttrs.submit].forEach((cache) => {
-                createEventBinding({
-                    cache,
-                    forceRender: updateOption.forceRender,
-                    type: 'submit',
-                    viewModel,
-                });
-            });
-        }
-
-        // apply click binding
-        if (updateOption.clickBinding && elementCache[bindingAttrs.click] && elementCache[bindingAttrs.click].length) {
-            elementCache[bindingAttrs.click].forEach((cache) => {
-                createEventBinding({
-                    cache,
-                    forceRender: updateOption.forceRender,
-                    type: 'click',
-                    viewModel,
-                });
-            });
-        }
-
-        // apply double click binding
-        if (updateOption.dblclickBinding && elementCache[bindingAttrs.dblclick] && elementCache[bindingAttrs.dblclick].length) {
-            elementCache[bindingAttrs.dblclick].forEach((cache) => {
-                createEventBinding({
-                    cache,
-                    forceRender: updateOption.forceRender,
-                    type: 'dblclick',
-                    viewModel,
-                });
-            });
-        }
-
-        // apply blur binding
-        if (updateOption.blurBinding && elementCache[bindingAttrs.blur] && elementCache[bindingAttrs.blur].length) {
-            elementCache[bindingAttrs.blur].forEach((cache) => {
-                createEventBinding({
-                    cache,
-                    forceRender: updateOption.forceRender,
-                    type: 'blur',
-                    viewModel,
-                });
-            });
-        }
-
-        // apply focus binding
-        if (updateOption.focusBinding && elementCache[bindingAttrs.focus] && elementCache[bindingAttrs.focus].length) {
-            elementCache[bindingAttrs.focus].forEach((cache) => {
-                createEventBinding({
-                    cache,
-                    forceRender: updateOption.forceRender,
-                    type: 'focus',
-                    viewModel,
-                });
-            });
-        }
-
-        // apply hover binding
-        if (updateOption.hoverBinding && elementCache[bindingAttrs.hover] && elementCache[bindingAttrs.hover].length) {
-            elementCache[bindingAttrs.hover].forEach((cache) => {
-                hoverBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
-            });
-        }
-    }
-
-    static postProcess(tasks) {
-        if (!tasks || !tasks.length) {
-            return;
-        }
-        each(tasks, (index, task) => {
-            if (typeof task === 'function') {
-                try {
-                    task();
-                } catch (err) {
-                    throwErrorMessage(err, 'Error postProcess: ' + String(task));
-                }
-            }
-        });
-    }
-
-    subscribe(eventName = '', fn) {
-        pubSub.subscribeEvent(this, eventName, fn);
-        return this;
-    }
-
-    subscribeOnce(eventName = '', fn) {
-        pubSub.subscribeEventOnce(this, eventName, fn);
-        return this;
-    }
-
-    unsubscribe(eventName = '') {
-        pubSub.unsubscribeEvent(this.compId, eventName);
-        return this;
-    }
-
-    unsubscribeAll() {
-        pubSub.unsubscribeAllEvent(this.compId);
-        return this;
-    }
-
-    publish(eventName = '', ...args) {
-        pubSub.publishEvent(eventName, ...args);
-        return this;
-    }
-}
-
-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(config.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) => {
-            Binder.applyBinding({
-                elementCache: cache.bindingCache,
-                updateOption: updateOption,
-                bindingAttrs: bindingAttrs,
-                viewModel: viewModel,
-            });
-        });
-    }
-    return true;
-};
-
-
-/**
- * renderIteration
- * @param {object} opt
- * @description
- * render element's binding by supplied elementCache
- * This function is desidned for FoOf, If, switch bindings
- */
-const renderIteration = ({elementCache, iterationVm, bindingAttrs, isRegenerate}) => {
-    const bindingUpdateOption = isRegenerate ? createBindingOption(config.bindingUpdateConditions.init) : createBindingOption();
-
-    // enforce render even element is not in DOM tree
-    bindingUpdateOption.forceRender = true;
-
-    // render and apply binding to template(s)
-    // this is an share function therefore passing current APP 'this' context
-    // viewModel is a dynamic generated iterationVm
-    renderTemplatesBinding({
-        ctx: iterationVm.$root ? iterationVm.$root.APP : iterationVm.APP,
-        elementCache: elementCache,
-        updateOption: bindingUpdateOption,
-        bindingAttrs: bindingAttrs,
-        viewModel: iterationVm,
-    });
-
-    Binder.applyBinding({
-        elementCache: elementCache,
-        updateOption: bindingUpdateOption,
-        bindingAttrs: bindingAttrs,
-        viewModel: iterationVm,
-    });
-};
-
-export {
-    Binder,
-    renderTemplatesBinding,
-    renderIteration,
-};

package/src/changeBinding.js

@@ -1,57 +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) => {
-    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('change', changeHandler, false);
-        cache.el.addEventListener('change', changeHandler, false);
-    }
-};
-
-export default changeBinding;

package/src/config.js

@@ -1,65 +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',
-    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,
-};