@ribajs/core - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

lib/src/binders/assign.binder.d.ts

@@ -7,5 +7,8 @@ import { IBinder } from '../interfaces';
 /**
- * Assign a value in your model, value must be a object
- * experimental, please TESTME
+ * assign
+ * Assign a value in your model.
+ * The value you want to assign must be an object and will be concatenate with your model.
+ * @example
+ * <div rv-assign='{"newValue": "hello", "anotherNewValue": "world"}'>{newValue} {anotherNewValue}!</div>
  */
 export declare const assignBinder: IBinder<IAssign>;

lib/src/binders/assign.binder.js

@@ -5,10 +5,16 @@ "use strict";
 /**
- * Assign a value in your model, value must be a object
- * experimental, please TESTME
+ * assign
+ * Assign a value in your model.
+ * The value you want to assign must be an object and will be concatenate with your model.
+ * @example
+ * <div rv-assign='{"newValue": "hello", "anotherNewValue": "world"}'>{newValue} {anotherNewValue}!</div>
  */
 exports.assignBinder = {
     name: 'assign',
-    routine(el, obj) {
-        utils_1.Utils.extend(false, this.view.models, obj);
+    routine(el, value) {
+        if (typeof (value) === 'object') {
+            return utils_1.Utils.extend(false, this.view.models, value);
+        }
+        console.warn('Value must be an object or propertyName is required');
     },
 };

lib/src/binders/block.binder.d.ts

@@ -7,4 +7,12 @@ import { IBinder } from '../interfaces';
 /**
- * Blocks the binding for the current element and his childs
+ * block
+ * Blocks the binding for the current element and his childs.
+ * @note Please note that `<script></script>`, `<style type="text/css"></style>`, `<template></template>` and `<code></code>` tags are blocked by default.
+ * You can change this by setting the `blockNodeNames` option.
+ * @example
+ * <div rv-block="">
+ *  <!-- After binding you should see `{ value }` because the binding is blocked here -->
+ *  { value }
+ * </div>
  */
 export declare const blockBinder: IBinder<IAssign>;

lib/src/binders/block.binder.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Blocks the binding for the current element and his childs
+ * block
+ * Blocks the binding for the current element and his childs.
+ * @note Please note that `<script></script>`, `<style type="text/css"></style>`, `<template></template>` and `<code></code>` tags are blocked by default.
+ * You can change this by setting the `blockNodeNames` option.
+ * @example
+ * <div rv-block="">
+ *  <!-- After binding you should see `{ value }` because the binding is blocked here -->
+ *  { value }
+ * </div>
  */
@@ -6,0 +14,0 @@ exports.blockBinder = {

lib/src/binders/checked.binder.js

@@ -14,13 +14,6 @@ "use strict";
     bind(el) {
-        const self = this;
-        this.customData = {};
-        if (!this.customData.callback) {
-            this.customData.callback = () => {
-                self.publish();
-            };
-        }
-        el.addEventListener('change', this.customData.callback);
+        el.addEventListener('change', this.publish);
     },
     unbind(el) {
-        el.removeEventListener('change', this.customData.callback);
+        el.removeEventListener('change', this.publish);
     },
@@ -27,0 +20,0 @@ routine(el, value) {

lib/src/binders/class-name.binder.d.ts

@@ -9,3 +9,5 @@ import { IBinder } from '../interfaces';
  * evaluates to false.
+ * @example
+ * <li rv-class-completed="todo.done">{ todo.name }</li>
  */
 export declare const classStarBinder: IBinder<boolean>;

lib/src/binders/class-name.binder.js

@@ -10,2 +10,4 @@ "use strict";
  * evaluates to false.
+ * @example
+ * <li rv-class-completed="todo.done">{ todo.name }</li>
  */
@@ -12,0 +14,0 @@ exports.classStarBinder = {

lib/src/binders/index.d.ts

 export { animateStarBinder } from './animate-classname.binder';
 export { assignBinder } from './assign.binder';
 export { blockBinder } from './block.binder';
-export { classBinder } from './class.binder';
+export { addClassBinder } from './add-class.binder';
 export { checkedBinder } from './checked.binder';
@@ -6,0 +6,0 @@ export { classStarBinder } from './class-name.binder';

lib/src/binders/index.js

@@ -9,4 +9,4 @@ "use strict";
 exports.blockBinder = block_binder_1.blockBinder;
-var class_binder_1 = require("./class.binder");
-exports.classBinder = class_binder_1.classBinder;
+var add_class_binder_1 = require("./add-class.binder");
+exports.addClassBinder = add_class_binder_1.addClassBinder;
 var checked_binder_1 = require("./checked.binder");
@@ -13,0 +13,0 @@ exports.checkedBinder = checked_binder_1.checkedBinder;

lib/src/binders/remove-class.binder.d.ts

 import { IBinder } from '../interfaces';
 /**
  * remove-class
+ * Removes the given class string the class attibute.
+ * Instead of `class-[classname]` the classname is removed by the
+ * given attribute and not by the star value,
+ * @example
+ * <img class="loading" rv-src="img.src" rv-remove-class="loadingClass">
  */
 export declare const removeClassBinder: IBinder<string>;

lib/src/binders/remove-class.binder.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const jquery_module_1 = require("../vendors/jquery.module");
 /**
  * remove-class
+ * Removes the given class string the class attibute.
+ * Instead of `class-[classname]` the classname is removed by the
+ * given attribute and not by the star value,
+ * @example
+ * <img class="loading" rv-src="img.src" rv-remove-class="loadingClass">
  */
 exports.removeClassBinder = {
     name: 'remove-class',
+    bind(el) {
+        this.customData = {
+            staticClassesString: el.className,
+        };
+    },
     routine(el, value) {
-        const $el = jquery_module_1.JQuery(el);
-        if (value) {
-            $el.removeClass(value);
-        }
-        return value;
+        const regex = new RegExp(`\\b${value}\\b`, 'g');
+        el.className = this.customData.staticClassesString.replace(regex, '').trim();
     },
 };

lib/src/components/fake-html-element.js

@@ -15,6 +15,11 @@ "use strict";
 if (window.customElements) {
-    FakeHTMLElement.prototype = Object.create(HTMLElement.prototype, {
-        constructor: { value: HTMLElement, configurable: true, writable: true },
-    });
+    try {
+        FakeHTMLElement.prototype = Object.create(HTMLElement.prototype, {
+            constructor: { value: HTMLElement, configurable: true, writable: true },
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
     Object.setPrototypeOf(FakeHTMLElement, HTMLElement);
 }

lib/src/formatters/math/even.formatter.d.ts

 /**
- * Prüft ob eine Zahl gerade ist oder nicht
  * Check if a number is even or not
@@ -4,0 +3,0 @@ */

lib/src/formatters/math/even.formatter.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Prüft ob eine Zahl gerade ist oder nicht
  * Check if a number is even or not
@@ -6,0 +5,0 @@ */

lib/src/formatters/math/random.formatter.d.ts

 /**
  * Get a back random value of array
- * @example <div rv-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
+ * @example <div rv-add-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
  */
@@ -5,0 +5,0 @@ export declare const random: {

lib/src/formatters/math/random.formatter.js

@@ -6,3 +6,3 @@ "use strict";
  * Get a back random value of array
- * @example <div rv-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
+ * @example <div rv-add-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
  */
@@ -9,0 +9,0 @@ exports.random = {

lib/src/formatters/property/parse.formatter.d.ts

 /**
  * parse json string to object
- * @example <div rv-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
+ * @example <div rv-add-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
  */
@@ -5,0 +5,0 @@ export declare const parse: {

lib/src/formatters/property/parse.formatter.js

@@ -6,3 +6,3 @@ "use strict";
  * parse json string to object
- * @example <div rv-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
+ * @example <div rv-add-class='"["col-2", "col-3", "col-4", "col-5", "col-6"]" | parse | random'>
  */
@@ -9,0 +9,0 @@ exports.parse = {

lib/src/interfaces/riba.d.ts

@@ -25,2 +25,3 @@ import { IFormatters, IBinders, IAdapters, IComponents } from '../interfaces';
     starBinders?: any;
+    /** Removes binder attribute after the binder was bound */
     removeBinderAttributes?: boolean;
@@ -27,0 +28,0 @@ /** Stop binding on this node types */

lib/src/services/utils.d.ts

@@ -237,2 +237,3 @@ export interface IDeferred {
     };
+    static escapeHtml(str: string): string;
     /**
@@ -239,0 +240,0 @@ * Header name value pair to send on each request

lib/src/services/utils.js

@@ -465,2 +465,12 @@ "use strict";
     }
+    static escapeHtml(str) {
+        const tagsToReplace = {
+            '&': '&',
+            '<': '&lt;',
+            '>': '&gt;',
+        };
+        return str.replace(/[&<>]/g, (tag) => {
+            return tagsToReplace[tag] || tag;
+        });
+    }
 }
@@ -474,3 +484,3 @@ exports.Utils = Utils;
 Utils.camelCase = (str) => {
-    return str.replace(/-([a-z])/g, (grouped) => {
+    return str.replace(/-([a-z0-9])/g, (grouped) => {
         return grouped[1].toUpperCase();
@@ -477,0 +487,0 @@ });

lib/src/vendors/_jquery-touch-events.js

@@ -33,2 +33,6 @@ "use strict";
 exports.default = ($) => {
+    if (!$) {
+        console.error('JQuery is required for touch events!');
+        return;
+    }
     'use strict';
@@ -35,0 +39,0 @@ $.attrFn = $.attrFn || {};

package.json

 {
   "name": "@ribajs/core",
   "description": "Core module of Riba.js",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "author": "Pascal Garber <[e-mail]>",
@@ -37,15 +37,15 @@ "private": false,
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^24.0.18",
     "@types/jquery": "^3.3.31",
-    "@types/node": "^12.7.5",
+    "@types/node": "^12.7.8",
     "babel-loader": "^8.0.6",
     "babel-plugin-array-includes": "^2.0.3",
-    "husky": "^3.0.5",
+    "husky": "^3.0.7",
     "jest": "^24.9.0",
@@ -58,3 +58,3 @@ "jest-extended": "^0.11.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.40.2",
+    "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
@@ -64,3 +64,3 @@ "webpack-glob-entry": "^2.1.1"
   "dependencies": {
-    "@babel/runtime-corejs2": "^7.6.0",
+    "@babel/runtime-corejs2": "^7.6.2",
     "@types/core-js": "^2.5.2",
@@ -67,0 +67,0 @@ "@types/debug": "^4.1.5",

src/binding.ts

@@ -216,3 +216,8 @@ import { PRIMITIVE, KEYPATH, parseType } from './parsers';
 
-    value = this.formattedValue(value);
+    try {
+      value = this.formattedValue(value);
+    } catch (error) {
+      console.error(error);
+      return value;
+    }
 
@@ -219,0 +224,0 @@ if (this.binder && typeof(this.binder.routine) === 'function') {

src/components/abstract-riba-component.ts

@@ -8,3 +8,3 @@ /**
 import { Debug, IDebugger } from '../vendors';
-import { EventHandler } from '../interfaces';
+import { EventHandler, IFormatter } from '../interfaces';
 import { View } from '../view';
@@ -41,4 +41,2 @@ import { Riba } from '../riba';
 
-  // protected $el: JQuery<HTMLUnknownElement>;
-
   protected abstract scope: any;
@@ -207,13 +205,16 @@
    */
-  protected argsFormatterHandler(self: this): any {
+  protected argsFormatterHandler(self: this): IFormatter {
     this.debug('argsFormatterHandler', self);
-    return (fn: (...args: any[]) => any, ...fnArgs: any[]): any => {
-      return (event: Event, scope: any, el: HTMLElement, binding: any) => {
-        // append the event handler args to passed args
-        fnArgs.push(event);
-        fnArgs.push(scope);
-        fnArgs.push(el);
-        fnArgs.push(binding);
-        return fn.apply(self, fnArgs);
-      };
+    return {
+      name: 'args',
+      read: (fn: (...args: any[]) => any, ...fnArgs: any[]) => {
+        return (event: Event, scope: any, el: HTMLElement, binding: any) => {
+          // append the event handler args to passed args
+          fnArgs.push(event);
+          fnArgs.push(scope);
+          fnArgs.push(el);
+          fnArgs.push(binding);
+          return fn.apply(self, fnArgs);
+        };
+      },
     };
@@ -220,0 +221,0 @@ }

src/formatters/math/even.formatter.ts

 /**
- * Prüft ob eine Zahl gerade ist oder nicht
  * Check if a number is even or not
@@ -4,0 +3,0 @@ */

src/formatters/special/args.formatter.ts

 import { IFormatter } from '../../interfaces';
 import { IFormatterFuntionParam } from './call.formatter';
+import { Binding } from '../../binding';
 
@@ -15,3 +16,3 @@ /**
   read(fn: IFormatterFuntionParam, ...fnArgs: any[]) {
-    return (event: Event, scope: any, el: HTMLElement, binding: any) => {
+    return (event: Event, scope: any, el: HTMLElement, binding: Binding) => {
       // append the event handler args to passed args
@@ -18,0 +19,0 @@ fnArgs.push(event);

src/formatters/string/strip-html.formatter.ts

@@ -8,3 +8,3 @@ /* tslint:disable:variable-name */
 export const stripHtml = {
-  name: 'stripHtml',
+  name: 'strip_html',
   read(html: string) {
@@ -11,0 +11,0 @@ const tmp = document.createElement('DIV');

src/services/utils.ts

@@ -198,3 +198,3 @@ import { JQuery } from '../vendors';
   public static camelCase = (str: string) => {
-    return str.replace(/-([a-z])/g, (grouped) => {
+    return str.replace(/-([a-z0-9])/g, (grouped) => {
       return grouped[1].toUpperCase();
@@ -559,2 +559,14 @@ });
 
+  public static escapeHtml(str: string) {
+    const tagsToReplace = {
+      '&': '&',
+      '<': '&lt;',
+      '>': '&gt;',
+    };
+
+    return str.replace(/[&<>]/g, (tag) => {
+      return tagsToReplace[tag as '&' | '<' | '>'] || tag;
+    });
+  }
+
   /**
@@ -561,0 +573,0 @@ * Header name value pair to send on each request

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

952951

increased by77.52%

Number of package files

690

increased by69.95%

Lines of code

25616

increased by72.3%

Dependency changes

• Updated@babel/runtime-corejs2@^7.6.2