@ribajs/core - npm Package Compare versions

Comparing version 1.9.0-alpha.2 to 1.9.0-alpha.10

package.json

 {
   "name": "@ribajs/core",
   "description": "Core module of Riba.js",
-  "version": "1.9.0-alpha.2",
+  "version": "1.9.0-alpha.10",
   "author": "Pascal Garber <[e-mail]>",
@@ -41,33 +41,33 @@ "contributors": [
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-export-default-from": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.10.5",
-    "@babel/runtime-corejs3": "^7.10.5",
-    "@ribajs/eslint-config": "1.9.0-alpha.2",
-    "@ribajs/tsconfig": "1.9.0-alpha.2",
+    "@babel/runtime": "^7.11.2",
+    "@babel/runtime-corejs3": "^7.11.2",
+    "@ribajs/eslint-config": "1.9.0-alpha.10",
+    "@ribajs/tsconfig": "1.9.0-alpha.10",
     "@ribajs/types": "1.8.3",
     "@types/core-js": "^2.5.3",
-    "@types/jest": "^26.0.4",
-    "@types/node": "^14.0.23",
-    "babel-jest": "^26.1.0",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.6.4",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-array-includes": "^2.0.3",
     "core-js": "^3.6.5",
-    "eslint": "^7.4.0",
+    "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "jest": "^26.1.0",
-    "jest-config": "^26.1.0",
+    "jest": "^26.4.2",
+    "jest-config": "^26.4.2",
     "jest-extended": "^0.11.5",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
     "source-map-support": "^0.5.19",
-    "ts-jest": "^26.1.3",
-    "typescript": "^3.9.7",
+    "ts-jest": "^26.3.0",
+    "typescript": "^4.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
@@ -86,4 +86,4 @@ "webpack": "^5.0.0-beta.22",
   "dependencies": {
-    "@ribajs/utils": "1.9.0-alpha.2"
+    "@ribajs/utils": "1.9.0-alpha.10"
   }
 }

README.md

@@ -14,9 +14,10 @@ # Core Module
 ```ts
-import { Riba, Utils, coreModule } from '@ribajs/core';
+import { Riba, coreModule } from '@ribajs/core';
+import { ready } from '@ribajs/utils/src/dom';
 const riba = new Riba();
 const model = {};
 riba.module.regist(coreModule);
-Utils.domIsReady(() => {
+ready(() => {
   riba.bind(document.body, model);
 });
 ```

src/adapters/adapter.spec.ts

@@ -1,2 +0,3 @@
-import { Riba, Adapter } from "../index";
+import { Riba } from "../riba";
+import { Adapter, ObserverSyncCallback } from "../interfaces";
 
@@ -28,12 +29,12 @@ import { dotAdapter } from "../adapters/dot.adapter";
       name: ":",
-      observe: (obj, keypath, callback) => {
+      observe: (obj: any, keypath: string, callback: ObserverSyncCallback) => {
         obj.on(keypath, callback);
       },
-      unobserve: (obj, keypath, callback) => {
+      unobserve: (obj: any, keypath: string, callback: ObserverSyncCallback) => {
         obj.off(keypath, callback);
       },
-      get: (obj, keypath) => {
+      get: (obj:any, keypath: string) => {
         return obj.get(keypath);
       },
-      set: (obj, keypath, value) => {
+      set: (obj: any, keypath: string, value: any) => {
         const attributes: { [keypath: string]: any } = {};
@@ -40,0 +41,0 @@ attributes[keypath] = value;

src/binders/block.binder.spec.ts

@@ -1,2 +0,2 @@
-import { Riba } from "../index";
+import { Riba } from "../riba";
 import { blockBinder } from "./block.binder";
@@ -3,0 +3,0 @@ import { dotAdapter } from "../adapters/dot.adapter";

src/binders/on-event.binder.spec.ts

@@ -15,3 +15,2 @@ import { Riba } from "../riba";
   let element: HTMLInputElement;
-  let fragment: DocumentFragment;
   let model: any = {};
@@ -21,12 +20,11 @@
     const tmp = document.createElement("input");
-    fragment.appendChild(tmp);
+    document.body.appendChild(tmp);
     tmp.focus();
-    fragment.removeChild(tmp);
+    document.body.removeChild(tmp);
   };
 
   beforeEach(() => {
-    fragment = document.createDocumentFragment();
     element = document.createElement("input");
     element.setAttribute("type", "text");
-    fragment.appendChild(element);
+    document.body.appendChild(element);
 
@@ -41,3 +39,3 @@ model = {};
       element.setAttribute("rv-on-click", "onClick");
-      riba.bind(fragment, model);
+      riba.bind(document.body, model);
 
@@ -60,3 +58,3 @@ // Simulates the click
 
-      riba.bind(fragment, model);
+      riba.bind(document.body, model);
 
@@ -63,0 +61,0 @@ // Trigger the change event

src/binders/srcset-size.binder.spec.ts

@@ -1,2 +0,2 @@
-import { Riba } from "../index";
+import { Riba } from "../riba";
 
@@ -3,0 +3,0 @@ import { dotAdapter } from "../adapters/dot.adapter";

src/binding.spec.ts

 import "jest-extended";
 
-import { Riba, View, Binding } from "./index";
+import { Riba } from "./riba";
+import { Binding } from "./binding";
+import { View } from "./view";
 
@@ -542,3 +544,3 @@ import { Data } from "../spec/lib/moch.data";
         name: "awesome",
-        read(value) {
+        read(value: string) {
           return "awesome " + value;
@@ -586,3 +588,3 @@ },
           name: "totally",
-          read(value, prefix) {
+          read(value: string, prefix: string) {
             return prefix + " totally " + value;
@@ -616,3 +618,3 @@ },
     it("binder.getValue() should have access to passed element", () => {
-      binding.binder.getValue = (_el) => {
+      binding.binder.getValue = (_el: HTMLElement) => {
         return _el.dataset.foo;
@@ -619,0 +621,0 @@ };

src/binding.ts

@@ -10,3 +10,2 @@ import { PRIMITIVE, KEYPATH, parseType } from "./parsers";
 import { View } from "./view";
-import { isNumber } from "@ribajs/utils/src/type";
 import { getInputValue } from "@ribajs/utils/src/dom";
@@ -393,47 +392,7 @@
 
-  private getStarArguments(identifier: string, type: string) {
-    const args = new Array<string | number>();
-    const regexp = new RegExp(`^${identifier.replace(/\*/g, ".+")}$`);
-    if (
-      !(regexp.test(type) && type.split("-")[0] === identifier.split("-")[0])
-    ) {
-      if (identifier !== "*") {
-        // console.error("Nodename not matchs the identifier,", identifier, type);
-      }
-    }
-
-    const splittedIdentifier = identifier.split("*");
-    // splittedIdentifier.pop();
-    if (splittedIdentifier.length > 0) {
-      // how many stars has the identifier?
-      const starCount = splittedIdentifier.length - 1;
-      if (starCount <= 1) {
-        args.push(type.slice(identifier.length - 1));
-      } else {
-        /**
-         * On more than one star this is a multi star binder
-         * We split the identifier on each star and use the identifier pieces as a serperator
-         */
-        const subIdentifier = splittedIdentifier[0];
-        let argsString = type.slice(subIdentifier.length);
-        splittedIdentifier.forEach((separator, index) => {
-          if (index > 0) {
-            let arg: string | number = argsString.split(separator)[0];
-            // the rest of the string
-            if (index === splittedIdentifier.length - 1) {
-              arg = argsString;
-            }
-            if (isNumber(arg)) {
-              arg = Number(arg);
-            }
-            argsString = argsString.substring(
-              argsString.indexOf(separator) + 1
-            );
-            args.push(arg);
-          }
-        });
-      }
-    }
-    return args;
+  private getStarArguments(identifier: string, type: string): string[] {
+    const regexp = new RegExp(`^${identifier.replace(/\*/g, "(.+)")}$`);
+    const match = type.match(regexp);
+    return (match && match.slice(1)) || [];
   }
 }

src/component/component.ts

@@ -18,3 +18,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */
 
-export type TemplateFunction = () => Promise<string | null> | string | null;
+export type TemplateFunction = () =>
+  | Promise<HTMLElement | string | null>
+  | HTMLElement
+  | string
+  | null;
 
@@ -57,3 +61,3 @@ export interface ObservedAttributeToCheck {
   /**
-   * If true the component will automatically bind the component to riba if all required attributes are setted
+   * If true the component will automatically bind the component to riba if all required attributes are set.
    */
@@ -104,3 +108,7 @@ protected autobind = true;
 
-  protected abstract template(): Promise<string | null> | string | null;
+  protected abstract template():
+    | HTMLElement
+    | string
+    | null
+    | Promise<HTMLElement | string | null>;
 
@@ -172,3 +180,3 @@ protected debug(...args: unknown[]) {
   /**
-   * Check if the attribute (e.g. `src`) is passed to this custom element also checks if the attribute was passed with riba (e.g. `rv-src`)
+   * Check if the attribute (e.g. `src`) is passed to this custom element
    * @param observedAttribute
@@ -185,11 +193,13 @@ */
   protected getPassedObservedAttributes(observedAttributes: string[]) {
+    const oa2c = this.observedAttributesToCheck;
     for (const observedAttribute of observedAttributes) {
-      this.observedAttributesToCheck[observedAttribute] =
-        this.observedAttributesToCheck[observedAttribute] || {};
-      const passed =
-        this.observedAttributesToCheck[observedAttribute].passed ||
-        this.attributeIsPassed(observedAttribute);
-      this.observedAttributesToCheck[observedAttribute].passed = passed;
-      this.observedAttributesToCheck[observedAttribute].initialized = !!this
-        .observedAttributesToCheck[observedAttribute].initialized;
+      if (!oa2c[observedAttribute]) {
+        oa2c[observedAttribute] = { passed: false, initialized: false };
+      } else {
+        if (!oa2c[observedAttribute].passed) {
+          oa2c[observedAttribute].passed = this.attributeIsPassed(
+            observedAttribute
+          );
+        }
+      }
     }
@@ -202,13 +212,7 @@ }
   protected allPassedObservedAttributesAreInitialized() {
-    let allInitialized = true;
-    for (const key in this.observedAttributesToCheck) {
-      if (this.observedAttributesToCheck[key]) {
-        if (this.observedAttributesToCheck[key].passed) {
-          allInitialized =
-            allInitialized && this.observedAttributesToCheck[key].initialized;
-        }
-      }
-    }
-    // this.debug("observedAttributesToCheck", this.observedAttributesToCheck);
-    return allInitialized;
+    return Object.keys(this.observedAttributesToCheck).every(
+      (key) =>
+        !this.observedAttributesToCheck[key]?.passed ||
+        this.observedAttributesToCheck[key]?.initialized
+    );
   }
@@ -224,18 +228,6 @@
   protected checkRequiredAttributes() {
-    let allDefined = true;
-    const requiredAttributes = this.requiredAttributes();
-    requiredAttributes.forEach((requiredAttribute: string) => {
-      if (!this.scope[requiredAttribute] || !this.scope[requiredAttribute]) {
-        // this.debug(
-        //   `Attribute ${requiredAttribute} not set: ${this.scope[requiredAttribute]}`
-        // );
-        allDefined = false;
-      } else {
-        // this.debug(
-        //   `Attribute ${requiredAttribute} is defined: `,
-        //   this.scope[requiredAttribute]
-        // );
-      }
-    });
-    return allDefined;
+    return this.requiredAttributes().every(
+      // eslint-disable-next-line no-prototype-builtins
+      (requiredAttribute) => this.scope.hasOwnProperty(requiredAttribute)
+    );
   }
@@ -284,3 +276,3 @@
   /**
-   * Returns an event handler for the bindings (most on-*) insite this component.
+   * Returns an event handler for the bindings (most on-*) inside this component.
    */
@@ -380,3 +372,3 @@ protected eventHandler(self: Component): EventHandler {
    * Default custom Element method
-   * Invoked when the custom element is moved to a new document.
+   * Invoked when one of the custom element's attributes is added, removed, or changed.
    * @param attributeName
@@ -450,3 +442,3 @@ * @param oldValue
 
-  protected async loadTemplate(): Promise<string | null> {
+  protected async loadTemplate(): Promise<HTMLElement | string | null> {
     if (this.templateLoaded === true) {
@@ -467,5 +459,9 @@ // this.debug("template already loaded");
       .then((template) => {
-        if (template !== null) {
-          this.el.innerHTML = template;
+        if (template instanceof HTMLElement) {
+          this.el.innerHTML = "";
+          this.el.appendChild(template as HTMLElement);
+        } else if (template !== null) {
+          this.el.innerHTML = template as string;
         }
+
         return template;
@@ -476,3 +472,3 @@ })
         this.templateLoaded = false;
-        return error;
+        return null;
       });
@@ -483,3 +479,3 @@ }
     if (this.bound === true) {
-      // this.debug("component already bounded");
+      // this.debug("component already bound");
       return this.view;
@@ -558,3 +554,5 @@ }
 
-  protected async afterTemplate(template: string | null): Promise<any> {
+  protected async afterTemplate(
+    template: HTMLElement | string | null
+  ): Promise<any> {
     // this.debug('afterTemplate', template);
@@ -561,0 +559,0 @@ }

src/component/fake-html-element.ts

 /**
- * This fake html element makes it possible to use custom elements with prodotype classes for backward compatibility on old browsers
+ * This fake html element makes it possible to use custom elements with prototype classes for backward compatibility on old browsers
  */
@@ -4,0 +4,0 @@ class FakeHTMLElement /*implements HTMLElement*/ {

src/components/index.ts

@@ -0,1 +1,2 @@
+// Do not export abstract components: export { TemplatesComponent } from "./templates/templates.component";
 export { VideoComponent } from "./video/video.component";

src/components/video/video.component.ts

@@ -32,3 +32,4 @@ import { Component } from "../../component/component";
   protected autobind = true;
-  private alreadyStartedPlaying = false;
+  protected alreadyStartedPlaying = false;
+  protected wasPaused = false;
 
@@ -126,4 +127,4 @@ static get observedAttributes() {
     videoSrc: undefined,
-    autoplayOnMinBuffer: undefined,
-    autoplayMediaQuery: undefined,
+    autoplayOnMinBuffer: 0,
+    autoplayMediaQuery: "",
     /**
@@ -188,8 +189,8 @@ * @readonly
 
-  protected afterBind() {
-    super.afterBind();
+  protected async afterBind() {
+    await super.afterBind();
 
     //video-src attribute
     if (this.scope.videoSrc) {
-      let sourceElement = this.video.querySelector("source")[0];
+      let sourceElement = this.video.querySelector("source");
       if (!sourceElement) {
@@ -196,0 +197,0 @@ sourceElement = document.createElement("source");

src/formatters/math/index.ts

 // math formatters
 export { plusFormatter } from "./plus.formatter";
 export { minusFormatter } from "./minus.formatter";
-export { numberFormatter } from "./number.formatter";
 export { timesFormatter } from "./times.formatter";
@@ -6,0 +5,0 @@ export { dividedByFormatter } from "./divided-by.formatter";

src/formatters/math/plus.formatter.spec.ts

@@ -1,2 +0,2 @@
-import { Riba } from "../../index";
+import { Riba } from "../../riba";
 
@@ -3,0 +3,0 @@ import { dotAdapter } from "../../adapters/dot.adapter";

src/formatters/special/call.formatters.spec.ts

@@ -1,2 +0,2 @@
-import { Riba } from "../../index";
+import { Riba } from "../../riba";
 
@@ -3,0 +3,0 @@ import { dotAdapter } from "../../adapters/dot.adapter";

src/formatters/special/debug.formatter.ts

@@ -1,2 +0,4 @@
-export const debugFormatter = {
+import { Formatter } from "@ribajs/core";
+
+export const debugFormatter: Formatter = {
   name: "debug",
@@ -3,0 +5,0 @@ read(

src/formatters/special/index.ts

@@ -6,1 +6,2 @@ // special helper formatters
 export { callFormatter } from "./call.formatter";
+export { MapFormatter } from "./map.formatter";

src/formatters/string/append.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Appends characters to a string.
  */
-export const appendFormatter = {
+export const appendFormatter: Formatter = {
   name: "append",
@@ -8,0 +10,0 @@ read(a: string, b: string) {

src/formatters/string/downcase.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Converts a string into lowercase.
  */
-export const downcaseFormatter = {
+export const downcaseFormatter: Formatter = {
   name: "downcase",
@@ -8,0 +10,0 @@ read(str: string) {

src/formatters/string/filled.formatter.ts

@@ -0,1 +1,2 @@
+import { Formatter } from "../../interfaces";
 import { emptyFormatter } from "../array/empty.formatter";
@@ -7,3 +8,3 @@ import { isString } from "@ribajs/utils/src/type";
  */
-export const filledFormatter = {
+export const filledFormatter: Formatter = {
   name: "filled",
@@ -10,0 +11,0 @@ read(str: string) {

src/formatters/string/handleize.formatter.ts

@@ -0,4 +1,8 @@
+import { Formatter, FormatterFn } from "../../interfaces";
 import { stripFormatter } from "./strip.formatter";
 import { downcaseFormatter } from "./downcase.formatter";
 
+const strip = stripFormatter.read as FormatterFn;
+const downcase = downcaseFormatter.read as FormatterFn;
+
 /**
@@ -8,10 +12,10 @@ * Formats a string into a handle.
  */
-export const handleizeFormatter = {
+export const handleizeFormatter: Formatter = {
   name: "handleize",
   read(str: string) {
-    str = stripFormatter.read(str);
+    str = strip(str);
     str = str.replace(/[^\w\s]/gi, ""); // http://stackoverflow.com/a/4374890
-    str = downcaseFormatter.read(str);
+    str = downcase(str);
     return str.replace(/ /g, "-");
   },
 };

src/formatters/string/index.ts

@@ -7,2 +7,5 @@ // string formatters
 export { matchFormatter } from "./match.formatter";
+export { padStartFormatter } from "./pad-start.formatter";
+export { padEndFormatter } from "./pad-end.formatter";
+export { numberFormatFormatter } from "./number-format.formatter";
 export { pluralizeFormatter } from "./pluralize.formatter";
@@ -9,0 +12,0 @@ export { prependFormatter } from "./prepend.formatter";

src/formatters/string/match.formatter.ts

@@ -1,2 +0,4 @@
-export const matchFormatter = {
+import { Formatter } from "../../interfaces";
+
+export const matchFormatter: Formatter = {
   name: "match",
@@ -3,0 +5,0 @@ read(a: string, regexp: string, flags?: string) {

src/formatters/string/pluralize.formatter.ts

@@ -0,4 +1,5 @@
+import { Formatter } from "../../interfaces";
 import { isArray } from "@ribajs/utils/src/type";
 
-export const pluralizeFormatter = {
+export const pluralizeFormatter: Formatter = {
   name: "pluralize",
@@ -5,0 +6,0 @@ read(input: any, singular: string, plural: string) {

src/formatters/string/prepend.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Prepends characters to a string.
  */
-export const prependFormatter = {
+export const prependFormatter: Formatter = {
   name: "prepend",
@@ -8,0 +10,0 @@ read(a: string, b: string) {

src/formatters/string/replace-first.formatter.ts

 /* tslint:disable:variable-name */
+import { Formatter } from "../../interfaces";
 
@@ -7,3 +8,3 @@ /**
  */
-export const replaceFirstFormatter = {
+export const replaceFirstFormatter: Formatter = {
   name: "replaceFirst",
@@ -10,0 +11,0 @@ read(str: string, value: string, replaceValue: string) {

src/formatters/string/replace.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Replaces all occurrences of a string with a substring.
  */
-export const replaceFormatter = {
+export const replaceFormatter: Formatter = {
   name: "replace",
@@ -8,0 +10,0 @@ read(str: string, value: string, replaceValue: string) {

src/formatters/string/slice.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -7,3 +9,3 @@ * The `slice` formatter returns a substring, starting at the specified index.
  */
-export const sliceFormatter = {
+export const sliceFormatter: Formatter = {
   name: "slice",
@@ -10,0 +12,0 @@ read(value: any, start: number, end: number) {

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

@@ -0,1 +1,2 @@
+import { Formatter } from "../../interfaces";
 import { stripHtml } from "@ribajs/utils/src/type";
@@ -7,3 +8,3 @@
  */
-export const stripHtmlFormatter = {
+export const stripHtmlFormatter: Formatter = {
   name: "stripHtml",
@@ -10,0 +11,0 @@ read(html: string) {

src/formatters/string/strip.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string.
  */
-export const stripFormatter = {
+export const stripFormatter: Formatter = {
   name: "strip",
@@ -8,0 +10,0 @@ read(str: string) {

src/formatters/string/upcase.formatter.ts

@@ -0,1 +1,3 @@
+import { Formatter } from "../../interfaces";
+
 /**
@@ -5,3 +7,3 @@ * Converts a string into uppercase.
  */
-export const upcaseFormatter = {
+export const upcaseFormatter: Formatter = {
   name: "upcase",
@@ -8,0 +10,0 @@ read(str: string) {

src/formatters/type/index.ts

@@ -6,2 +6,3 @@ // property / object formatters
 export { isDefinedFormatter } from "./is-defined.formatter";
+export { isIntegerFormatter } from "./is-integer.formatter";
 export { isNumberFormatter } from "./is-number.formatter";
@@ -14,1 +15,6 @@ export { isObjectFormatter } from "./is-object.formatter";
 export { stringFormatter } from "./string.formatter";
+export { toStringFormatter } from "./to-string.formatter";
+export { toDecimalFormatter } from "./to-decimal.formatter";
+export { toFloatFormatter } from "./to-float.formatter";
+export { toIntegerFormatter } from "./to-integer.formatter";
+export { toNumberFormatter } from "../type/to-number.formatter";

src/formatters/type/parse.formatter.ts

@@ -1,7 +0,2 @@
-import {
-  isString,
-  parseJsonString,
-  isObject,
-  isArray,
-} from "@ribajs/utils/src/type";
+import { isString, parseJsonString, isObject } from "@ribajs/utils/src/type";
 
@@ -17,3 +12,6 @@ /**
       return parseJsonString(jsonString);
-    } else if (isObject(jsonString as any) || isArray(jsonString as any)) {
+    } else if (
+      isObject(jsonString as any) ||
+      Array.isArray(jsonString as any)
+    ) {
       console.warn(
@@ -20,0 +18,0 @@ "[parseFormatter] You do not need to parse the value because since it already been parsed"

src/formatters/type/string.formatter.ts

@@ -1,33 +0,15 @@
-import { isArray, isObject, getString } from "@ribajs/utils/src/type";
+import { toStringFormatter } from "./to-string.formatter";
 
-/**
- * Parses a value to string
- * @param value The value you want to parse to string
- * @param def Default value if value is undefined
- */
 export const stringFormatter = {
   name: "string",
   read(value: any, def: string) {
-    // If value is an array convert each value in array to string
-    if (isArray(value)) {
-      for (const i in value as Array<any>) {
-        if (value[i]) {
-          value[i] = getString(value[i]);
-        }
-      }
-    } else if (isObject(value)) {
-      for (const key in value) {
-        value[key] = getString(value[key]);
-      }
+    if (!toStringFormatter || toStringFormatter.read) {
+      throw new Error("toStringFormatter.read not defined!");
     } else {
-      value = getString(value);
+      console.warn(
+        "The string formatter is depricated, please use toString instead!"
+      );
+      return (toStringFormatter as any).read(value, def);
     }
-
-    // If default value is set return the default value if num is 0, null or undefined
-    if (def) {
-      return value ? value : def;
-    }
-
-    return value;
   },
 };

src/observer.ts

@@ -10,3 +10,3 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 } from "./interfaces";
-import { isObject, concat } from "@ribajs/utils/src/type";
+import { isObject } from "@ribajs/utils/src/type";
 
@@ -24,3 +24,3 @@ export class Observer {
     if (options.adapters) {
-      Observer.adapters = concat(false, Observer.adapters, options.adapters);
+      Observer.adapters = { ...Observer.adapters, ...options.adapters };
       Observer.interfaces = Object.keys(Observer.adapters);
@@ -27,0 +27,0 @@ }

src/parsers.ts

 import { parseJsonString } from "@ribajs/utils/src/type";
 
-import { DataElement, View, TBlock } from "./view";
+import { DataElement, View } from "./view";
 
@@ -97,3 +97,3 @@ /**
       if (index < 0) {
-        const substring = template.slice(lastIndex - close.length);
+        const substring = template.slice(lastIndex - open.length);
         const lastToken = tokens[tokens.length - 1];
@@ -133,7 +133,6 @@
   /** If true stop / block the parseNode  recursion */
-  let block: TBlock = false;
+  let blockRecursion = false;
 
   node = node as DataElement;
-  // if node.nodeType === 3 === Node.TEXT_NODE
-  if (node.nodeType === 3) {
+  if (node.nodeType === Node.TEXT_NODE) {
     let tokens = null;
@@ -153,3 +152,3 @@
         }
-        if (token.type === 1) {
+        if (token.type === BINDING) {
           // TODO fix any
@@ -169,10 +168,8 @@ view.buildBinding(
     }
-    block = true;
-    // if node.nodeType === 1 === Node.ELEMENT_NODE
-  } else if (node.nodeType === 1) {
+    blockRecursion = true;
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
     // traverse binds attributes
-    block = view.traverse(node);
+    blockRecursion = view.traverse(node);
   }
-
-  if (!block) {
+  if (!blockRecursion) {
     if (node.childNodes && node.childNodes.length > 0) {
@@ -179,0 +176,0 @@ for (let i = 0; i < node.childNodes.length; i++) {

src/riba.ts

@@ -9,3 +9,2 @@ import {
 } from "./interfaces";
-import { concat } from "@ribajs/utils/src/type";
 import { parseTemplate, parseType } from "./parsers";
@@ -130,16 +129,15 @@ import { Binding } from "./binding";
 
-    Object.keys(options).forEach((option) => {
-      const value = (options as any)[option];
+    for (const [option, value] of Object.entries(options)) {
       switch (option) {
         case "binders":
-          this.binders = concat(false, this.binders, value);
+          this.binders = { ...this.binders, ...value };
           break;
         case "formatters":
-          this.formatters = concat(false, this.formatters, value);
+          this.formatters = { ...this.formatters, ...value };
           break;
         case "components":
-          this.components = concat(false, this.components, value);
+          this.components = { ...this.components, ...value };
           break;
         case "adapters":
-          this.adapters = concat(false, this.adapters, value);
+          this.adapters = { ...this.adapters, ...value };
           break;
@@ -174,3 +172,3 @@ case "prefix":
       }
-    });
+    }
   }
@@ -196,34 +194,25 @@
     if (options) {
-      viewOptions.binders = concat(false, viewOptions.binders, options.binders);
-      viewOptions.formatters = concat(
-        false,
-        viewOptions.formatters,
-        options.formatters
-      );
-      viewOptions.components = concat(
-        false,
-        viewOptions.components,
-        options.components
-      );
-      viewOptions.adapters = concat(
-        false,
-        viewOptions.adapters,
-        options.adapters
-      );
+      viewOptions.binders = { ...viewOptions.binders, ...options.binders };
+      viewOptions.formatters = {
+        ...viewOptions.formatters,
+        ...options.formatters,
+      };
+      viewOptions.components = {
+        ...viewOptions.components,
+        ...options.components,
+      };
+      viewOptions.adapters = {
+        ...viewOptions.adapters,
+        ...options.adapters,
+      };
     }
 
-    viewOptions.prefix =
-      options && options.prefix ? options.prefix : this.prefix;
-    viewOptions.fullPrefix = viewOptions.prefix
-      ? viewOptions.prefix + "-"
-      : this.fullPrefix;
+    viewOptions.prefix = (options && options.prefix) || this.prefix;
+    viewOptions.fullPrefix =
+      (viewOptions.prefix && viewOptions.prefix + "-") || this.fullPrefix;
 
     viewOptions.templateDelimiters =
-      options && options.templateDelimiters
-        ? options.templateDelimiters
-        : this.templateDelimiters;
+      (options && options.templateDelimiters) || this.templateDelimiters;
     viewOptions.rootInterface =
-      options && options.rootInterface
-        ? options.rootInterface
-        : this.rootInterface;
+      (options && options.rootInterface) || this.rootInterface;
     viewOptions.removeBinderAttributes =
@@ -234,5 +223,3 @@ options && typeof options.removeBinderAttributes === "boolean"
     viewOptions.blockNodeNames =
-      options && options.blockNodeNames
-        ? options.blockNodeNames
-        : this.blockNodeNames;
+      (options && options.blockNodeNames) || this.blockNodeNames;
     viewOptions.preloadData =
@@ -246,4 +233,3 @@ options && typeof options.preloadData === "boolean"
         : this.forceComponentFallback;
-    viewOptions.handler =
-      options && options.handler ? options.handler : Riba.handler;
+    viewOptions.handler = (options && options.handler) || Riba.handler;
 
@@ -257,14 +243,6 @@ // WORKAROUND for FakeHTMLElement
     // merge extensions
-    viewOptions.binders = concat(false, this.binders, viewOptions.binders);
-    viewOptions.formatters = concat(
-      false,
-      this.formatters,
-      viewOptions.formatters
-    );
-    viewOptions.components = concat(
-      false,
-      this.components,
-      viewOptions.components
-    );
-    viewOptions.adapters = concat(false, this.adapters, viewOptions.adapters);
+    viewOptions.binders = { ...this.binders, ...viewOptions.binders };
+    viewOptions.formatters = { ...this.formatters, ...viewOptions.formatters };
+    viewOptions.components = { ...this.components, ...viewOptions.components };
+    viewOptions.adapters = { ...this.adapters, ...viewOptions.adapters };
 
@@ -274,5 +252,3 @@ // get all attributeBinders from available binders
       viewOptions.attributeBinders = Object.keys(viewOptions.binders).filter(
-        (key) => {
-          return key.indexOf("*") >= 1; // Should start with *
-        }
+        (key) => key.indexOf("*") >= 1 // Should contain, but not start with, *
       );
@@ -294,3 +270,3 @@ }
 
-    models = models || new Object(null);
+    models = models || Object.create(null);
     Observer.updateOptions(viewOptions);
@@ -297,0 +273,0 @@

src/services/module.service.ts

@@ -22,2 +22,5 @@ import {
    * @param binders;
+   * @param components;
+   * @param formatters;
+   * @param adapters;
    */
@@ -36,7 +39,6 @@ constructor(
 
-  /**
-   * Regist a set of binders
-   * @param binders
-   */
   public regist(module: RibaModule) {
+    if (!module) {
+      throw new Error("The Riba module is falsy!");
+    }
     if (module.binders) {
@@ -43,0 +45,0 @@ this.binder.regists(module.binders);

src/services/utils.ts

 import { ready } from "@ribajs/utils/src/dom";
 
 /**
- * Just an Class with some helpful functions
+ * Just a class with some helpful functions
  *
@@ -17,3 +17,3 @@ * @export
     console.warn(
-      "Utils.domIsReady is depricated, use import { ready } from '@ribajs/utils/src/dom' instead"
+      "Utils.domIsReady is deprecated, use import { ready } from '@ribajs/utils/src/dom' instead"
     );
@@ -20,0 +20,0 @@ return ready(callback);

src/types/templates.ts

 /** Type definition for html-loader */
 declare module "*.html" {
   const content: string;
-  export default content;
+  export default htmlContent;
 }
@@ -9,3 +9,3 @@ /** Type definition for pug-loader: https://github.com/pugjs/pug-loader */
   const pug: (locals?: any) => string;
-  export default pug;
+  export default pugContent;
 }
@@ -15,3 +15,3 @@
   const svg: string;
-  export default svg;
+  export default svgContent;
 }

src/view.ts

@@ -12,4 +12,2 @@ import { Riba } from "./riba";
 
-export type TBlock = boolean;
-
 /**
@@ -26,4 +24,2 @@ * TODO Check if there is an official interface which fits better here
 export class View {
-  public static DECLARATION_SPLIT = /((?:'[^']*')*(?:(?:[^|']*(?:'[^']*')+[^|']*)+|[^|]+))|^$/g;
-
   /**
@@ -40,8 +36,4 @@ * Binder for mustache style `{model.property}` text Binders
   public static bindingComparator = (a: Binding, b: Binding) => {
-    const aPriority = (a as Binding).binder
-      ? ((a as Binding).binder as Binder<any>).priority || 0
-      : 0;
-    const bPriority = (b as Binding).binder
-      ? ((b as Binding).binder as Binder<any>).priority || 0
-      : 0;
+    const aPriority = a.binder?.priority || 0;
+    const bPriority = b.binder?.priority || 0;
     return bPriority - aPriority;
@@ -51,3 +43,3 @@ };
   /**
-   * Helper function to Create a new view insite of a binding
+   * Helper function to create a new view inside of a binding
    * @param bindin
@@ -63,5 +55,5 @@ * @param models
     const template = binding.el.cloneNode(true);
-    const view = new View(template as Node, models, binding.view.options);
+    const view = new View(template, models, binding.view.options);
     view.bind();
-    if (!binding || !binding.marker || binding.marker.parentNode === null) {
+    if (!binding?.marker?.parentNode) {
       console.warn("[View]: No parent node for binding!");
@@ -177,7 +169,3 @@ } else {
     this.bindings.forEach((binding) => {
-      if (
-        (binding as Binding).binder &&
-        binding.publish &&
-        ((binding as Binding).binder as Binder<any>).publishes
-      ) {
+      if (binding.binder && binding.publish && binding.binder.publishes) {
         binding.publish();
@@ -197,7 +185,7 @@ }
 
-    this.bindings.forEach((binding) => {
+    for (const binding of this.bindings) {
       // if ((binding as Binding).update) {
-      (binding as Binding).update(models);
+      binding.update(models);
       // }
-    });
+    }
   }
@@ -231,3 +219,3 @@
 
-  public traverse(node: BindableElement): TBlock {
+  public traverse(node: BindableElement): boolean {
     let bindingPrefix;
@@ -287,3 +275,2 @@ if (this.options.fullPrefix) {
           }
-
           // if block is set, do not bind its childs (this means the binder bound it by itself)
@@ -325,10 +312,6 @@ // and build binding directly (do not push it to bindInfos array)
     // bind components
-    if (!block) {
+    if (!block && !node._bound && this.options.components) {
       const nodeName = node.nodeName.toLowerCase();
-      if (
-        this.options.components &&
-        this.options.components[nodeName] &&
-        !node._bound
-      ) {
-        const COMPONENT = this.options.components[nodeName];
+      const COMPONENT = this.options.components[nodeName];
+      if (COMPONENT) {
         this.registComponentWithFallback(node, COMPONENT, nodeName);
@@ -352,3 +335,3 @@ block = true;
     this.bindings.push(
-      new Binding(this as View, node, type, keypath, binder, pipes, identifier)
+      new Binding(this, node, type, keypath, binder, pipes, identifier)
     );
@@ -355,0 +338,0 @@ }

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

273268

increased by4.56%

Number of package files

195

increased by5.98%

Lines of code

8446

increased by3.59%

Number of lines in readme file

23

increased by4.55%

Dependency changes

• + Added@ribajs/utils@1.9.0-alpha.10(transitive)

• - Removed@ribajs/utils@1.9.0-alpha.2(transitive)

• Updated@ribajs/utils@1.9.0-alpha.10