react-supervisor - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

dist/cjs/index.js

@@ -60,12 +60,137 @@ 'use strict';
 
-function ReactSupervisor() {
+/**
+ * @param value
+ * @return {string}
+ */
+var lowercaseFirstLetter = function lowercaseFirstLetter(value) {
+  return value.charAt(0).toLowerCase() + value.substr(1);
+};
+
+/**
+ * {[object]}
+ */
+
+var castResolvers = [{
+  name: "castNumber",
+  handler: function handler(value) {
+    return parseInt(value);
+  }
+}, {
+  name: "castFloat",
+  handler: function handler(value) {
+    return parseFloat(value);
+  }
+}, {
+  name: "castJson",
+  handler: function handler(value) {
+    if (value === "") {
+      return null;
+    } else {
+      return JSON.parse(value);
+    }
+  }
+}, {
+  name: "castBoolean",
+  handler: function handler(value) {
+    if (value === "") {
+      return null;
+    } else if (["true", "false"].includes(value.toString())) {
+      return value.toString() === "true";
+    } else if (["1", "0"].includes(value.toString())) {
+      return value.toString() === "1";
+    } else {
+      return null;
+    }
+  }
+}, {
+  name: "castString",
+  handler: function handler(value) {
+    return value;
+  }
+}];
+/**
+ * @param key {string}
+ * @param value {any}
+ * @constructor
+ */
+
+function CastDto(key, value) {
+  this.key = key;
+  this.value = value;
+}
+/**
+ * @param key {string}
+ * @param value {string}
+ * @return {CastDto}
+ */
+
+
+var cast = function cast(key, value) {
+  var castResolver = null;
+
+  for (var i = 0; i < castResolvers.length; i++) {
+    if (castResolvers[i].name === key.substr(0, castResolvers[i].name.length)) {
+      castResolver = castResolvers[i];
+      break;
+    }
+  }
+
+  if (!castResolver) {
+    throw new Error("[ReactSupervisor] cast resolver not found.");
+  }
+
+  var newKey = lowercaseFirstLetter(key.substr(castResolver.name.length));
+
+  if (newKey === "") {
+    throw new Error("[ReactSupervisor] missing property name.");
+  }
+
+  var newValue = castResolver.handler(value);
+  return new CastDto(newKey, newValue);
+};
+/**
+ * @param key
+ * @return {boolean}
+ */
+
+
+var isCastable = function isCastable(key) {
+  return key.substr(0, 4) === "cast";
+};
+
+/**
+ * @param element {HTMLElement}
+ * @return {Object}
+ */
+
+var extractProps = function extractProps(element) {
+  var result = {};
+
+  for (var key in element.dataset) {
+    if (element.dataset.hasOwnProperty(key)) {
+      if (isCastable(key)) {
+        var castedDto = cast(key, element.dataset[key]);
+        result[castedDto.key] = castedDto.value;
+      } else {
+        result[key] = element.dataset[key];
+      }
+    }
+  }
+
+  return result;
+};
+
+function ReactSupervisor$1() {
   var _this = this;
 
   /**
-   *
+   * @type {boolean}
+   */
+  var isInitialized = false;
+  /**
    * @type {ReactSlot[]}
    */
+
   var slots = [];
   /**
-   *
    * @type {ReactComponent[]}
@@ -76,5 +201,11 @@ */
   /**
-   * @return void
+   * @type {*}
    */
 
+  /**
+  * @type {null|number}
+  */
+
+  var watchInterval = null;
+
   var watch = function watch() {
@@ -90,11 +221,3 @@ for (var i = 0; i < components.length; i++) {
   };
-  /**
-   * @param element {HTMLElement}
-   */
 
-
-  var extractPropsFromDataset = function extractPropsFromDataset(element) {
-    return element.dataset;
-  };
-
   var renderReactSlot = function renderReactSlot(element, reactComponent) {
@@ -105,3 +228,3 @@ var slot = new ReactSlot(element, reactComponent);
     try {
-      var props = extractPropsFromDataset(element);
+      var props = extractProps(element);
 
@@ -127,6 +250,12 @@ if (slot.reactComponent.isCustomRender) {
   this.initialize = function () {
-    _this.forceRender();
+    if (isInitialized) {
+      console.warn("[ReactSupervisor] ReactSupervisor is already initialized.");
+    } else {
+      isInitialized = true;
 
-    setInterval(watch, 5000);
-    console.info("[ReactSupervisor] ReactSupervisor has been initialized.");
+      _this.forceRender();
+
+      watchInterval = setInterval(watch, 5000);
+      console.info("[ReactSupervisor] ReactSupervisor has been initialized.");
+    }
   };
@@ -178,7 +307,39 @@
   };
+  /**
+   * @return {boolean}
+   */
+
+
+  this.getIsInitialized = function () {
+    return isInitialized;
+  };
+  /**
+   * @return {ReactSlot[]}
+   */
+
+
+  this.getSlots = function () {
+    return slots;
+  };
+  /**
+   * @return {ReactComponent[]}
+   */
+
+
+  this.getComponents = function () {
+    return components;
+  };
+  /**
+   * @return {null|number}
+   */
+
+
+  this.getWatchInterval = function () {
+    return watchInterval;
+  };
 }
 
-var ReactSupervisor$1 = new ReactSupervisor();
+var ReactSupervisor = new ReactSupervisor$1();
 
-exports.ReactSupervisor = ReactSupervisor$1;
+exports.ReactSupervisor = ReactSupervisor;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -31,12 +31,137 @@ import React from 'react';
 
-function ReactSupervisor() {
+/**
+ * @param value
+ * @return {string}
+ */
+var lowercaseFirstLetter = function lowercaseFirstLetter(value) {
+  return value.charAt(0).toLowerCase() + value.substr(1);
+};
+
+/**
+ * {[object]}
+ */
+
+var castResolvers = [{
+  name: "castNumber",
+  handler: function handler(value) {
+    return parseInt(value);
+  }
+}, {
+  name: "castFloat",
+  handler: function handler(value) {
+    return parseFloat(value);
+  }
+}, {
+  name: "castJson",
+  handler: function handler(value) {
+    if (value === "") {
+      return null;
+    } else {
+      return JSON.parse(value);
+    }
+  }
+}, {
+  name: "castBoolean",
+  handler: function handler(value) {
+    if (value === "") {
+      return null;
+    } else if (["true", "false"].includes(value.toString())) {
+      return value.toString() === "true";
+    } else if (["1", "0"].includes(value.toString())) {
+      return value.toString() === "1";
+    } else {
+      return null;
+    }
+  }
+}, {
+  name: "castString",
+  handler: function handler(value) {
+    return value;
+  }
+}];
+/**
+ * @param key {string}
+ * @param value {any}
+ * @constructor
+ */
+
+function CastDto(key, value) {
+  this.key = key;
+  this.value = value;
+}
+/**
+ * @param key {string}
+ * @param value {string}
+ * @return {CastDto}
+ */
+
+
+var cast = function cast(key, value) {
+  var castResolver = null;
+
+  for (var i = 0; i < castResolvers.length; i++) {
+    if (castResolvers[i].name === key.substr(0, castResolvers[i].name.length)) {
+      castResolver = castResolvers[i];
+      break;
+    }
+  }
+
+  if (!castResolver) {
+    throw new Error("[ReactSupervisor] cast resolver not found.");
+  }
+
+  var newKey = lowercaseFirstLetter(key.substr(castResolver.name.length));
+
+  if (newKey === "") {
+    throw new Error("[ReactSupervisor] missing property name.");
+  }
+
+  var newValue = castResolver.handler(value);
+  return new CastDto(newKey, newValue);
+};
+/**
+ * @param key
+ * @return {boolean}
+ */
+
+
+var isCastable = function isCastable(key) {
+  return key.substr(0, 4) === "cast";
+};
+
+/**
+ * @param element {HTMLElement}
+ * @return {Object}
+ */
+
+var extractProps = function extractProps(element) {
+  var result = {};
+
+  for (var key in element.dataset) {
+    if (element.dataset.hasOwnProperty(key)) {
+      if (isCastable(key)) {
+        var castedDto = cast(key, element.dataset[key]);
+        result[castedDto.key] = castedDto.value;
+      } else {
+        result[key] = element.dataset[key];
+      }
+    }
+  }
+
+  return result;
+};
+
+function ReactSupervisor$1() {
   var _this = this;
 
   /**
-   *
+   * @type {boolean}
+   */
+  var isInitialized = false;
+  /**
    * @type {ReactSlot[]}
    */
+
   var slots = [];
   /**
-   *
    * @type {ReactComponent[]}
@@ -47,5 +172,11 @@ */
   /**
-   * @return void
+   * @type {*}
    */
 
+  /**
+  * @type {null|number}
+  */
+
+  var watchInterval = null;
+
   var watch = function watch() {
@@ -61,11 +192,3 @@ for (var i = 0; i < components.length; i++) {
   };
-  /**
-   * @param element {HTMLElement}
-   */
 
-
-  var extractPropsFromDataset = function extractPropsFromDataset(element) {
-    return element.dataset;
-  };
-
   var renderReactSlot = function renderReactSlot(element, reactComponent) {
@@ -76,3 +199,3 @@ var slot = new ReactSlot(element, reactComponent);
     try {
-      var props = extractPropsFromDataset(element);
+      var props = extractProps(element);
 
@@ -98,6 +221,12 @@ if (slot.reactComponent.isCustomRender) {
   this.initialize = function () {
-    _this.forceRender();
+    if (isInitialized) {
+      console.warn("[ReactSupervisor] ReactSupervisor is already initialized.");
+    } else {
+      isInitialized = true;
 
-    setInterval(watch, 5000);
-    console.info("[ReactSupervisor] ReactSupervisor has been initialized.");
+      _this.forceRender();
+
+      watchInterval = setInterval(watch, 5000);
+      console.info("[ReactSupervisor] ReactSupervisor has been initialized.");
+    }
   };
@@ -149,7 +278,39 @@
   };
+  /**
+   * @return {boolean}
+   */
+
+
+  this.getIsInitialized = function () {
+    return isInitialized;
+  };
+  /**
+   * @return {ReactSlot[]}
+   */
+
+
+  this.getSlots = function () {
+    return slots;
+  };
+  /**
+   * @return {ReactComponent[]}
+   */
+
+
+  this.getComponents = function () {
+    return components;
+  };
+  /**
+   * @return {null|number}
+   */
+
+
+  this.getWatchInterval = function () {
+    return watchInterval;
+  };
 }
 
-var ReactSupervisor$1 = new ReactSupervisor();
+var ReactSupervisor = new ReactSupervisor$1();
 
-export { ReactSupervisor$1 as ReactSupervisor };
+export { ReactSupervisor };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-supervisor",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
@@ -29,3 +29,3 @@ "author": {
     "build:prod": "rollup src/index.js -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
@@ -40,6 +40,10 @@ "peerDependencies": {
     "babel-loader": "^8.2.2",
+    "jest": "^27.0.4",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
-    "webpack-cli": "^4.7.2"
+    "webpack": "^5.39.1",
+    "webpack-cli": "^4.7.2",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   }
 }

README.md

 # react-supervisor
 
+<p>
+    <a target="_blank" rel="noopener noreferrer" href="https://github.com/michaldoda/react-supervisor/actions/workflows/release.yml/badge.svg"><img src="https://github.com/michaldoda/react-supervisor/actions/workflows/release.yml/badge.svg" alt="release workflow result" style="max-width:100%;"></a>
+    <a target="_blank" href="https://www.npmjs.com/package/react-supervisor"><img src="https://flat.badgen.net/npm/dt/react-supervisor" alt="react-supervisor total downloads" /></a>
+    <a target="_blank" href="https://www.npmjs.com/package/react-supervisor"><img src="https://flat.badgen.net/npm/v/react-supervisor" alt="react-supervisor version" /></a>
+    <a target="_blank" href="https://www.npmjs.com/package/react-supervisor"><img src="https://flat.badgen.net/npm/license/react-supervisor" alt="react-supervisor license" /></a>
+</p>
+
 **react-supervisor** is a very simple npm library (<= **4kb**) for dealing with react components in templates (standard MVC way). If you ever worked with mid/big enterprise software with multiple technologies you probably know how difficult it is to maintain various technologies in one or multiple projects. You will find it very useful to create new components with React and append them in your website in organised way. Hope it will help you!  
@@ -11,3 +18,3 @@
 ```bash
-npm install react-supervisor
+npm i react-supervisor
 # or 
@@ -34,5 +41,13 @@ yarn add react-supervisor
 * scans the DOM and renders registered components
-* takes all **data** attributes from container and passes them as props to component
+* takes all **data-** attributes from container and passes them as props to component
 * watches for changes to the DOM and renders new components into selectors that match
 * the parent of a correctly rendered component will be marked with the **rendered** class
+* convert, parse all castable **data-** attributes with specified type.
+* supported types for castable attributes (*string* as a default):
+    * **number** - `data-cast-number-field-name="123"`
+    * **float** - `data-cast-float-field-name="3.14"`
+    * **json** - `data-cast-number-field-name='{ "first_name": "Joe", "last_name": "Doe" }'`
+    * **boolean** - `data-cast-float-field-name="true"`
+    * **string** - `data-cast-float-field-name="3.14"`
+    
 
@@ -46,2 +61,15 @@ ## What it doesn't do?
 
+## Castable data attributes table
+
+| attribute | key in props | value |
+| :---                                      |     :---  |          ---:       |
+| `data-cast-number-age="3.14"`             | `age`     | `3`                 |
+| `data-cast-float-pi-value="3.14"`         | `piValue` | `3.14`              |
+| `data-cast-json-data='{"piValue": 3.14}'` | `data`    | `{ piValue: 3.14 }` |
+| `data-cast-boolean-is-active="true"`      | `isActive`| `true`              |
+| `data-cast-boolean-is-active="0"`         | `isActive`| `false`             |
+| `data-cast-string-index="0001"`           | `index`   |  `"0001"`           |
+
+*In js/html logic the default type is **string**, if that works for you then there is no need to use `data-cast-type` convention, but its really helpful if you have to pass json objects into components* 
+
 ## Examples
@@ -93,3 +121,3 @@
 
-ReactSupervisor.registerComponentWithCustomRender(".my-component", CallMeModalComponent);
+ReactSupervisor.registerComponent(".call-me-modal", CallMeModalComponent);
 // no export needed, but you have to import that file in your entrypoint
@@ -100,3 +128,3 @@ ```
 <!-- ./page.html -->
-<div class="my-component"></div>
+<div class="call-me-modal"></div>
 ```
@@ -112,3 +140,3 @@
 
-ReactSupervisor.registerComponentWithCustomRender(".fluent-ui-textarea", TextField);
+ReactSupervisor.registerComponent(".fluent-ui-textarea", TextField);
 ``` 
@@ -118,5 +146,18 @@
 <!-- ./page.html -->
-<div class="fluent-ui-textarea" data-label="Description" data-name="description"></div>
+<div class="fluent-ui-textarea" data-label="Description" data-name="description" data-rows="3"></div>
 ```
 
+#### # Use castable data attributes to pass any data type you want, e.g. json object
+
+```html
+<div class="user-details" data-cast-json-user-details='{ "first_name": "Joe", "age": 256 }'></div>
+```
+This syntax will inject a `userDetails` object in component's `props`. 
+```javascript
+const UserDetailsComponent = (props) => {
+    return (<>${props.userDetails?.first_name}</>); // Joe
+}
+```
+
+
 ## Contributing
@@ -123,0 +164,0 @@ Any help would be much appreciated. For major changes, please open an issue first to discuss what you would like to change.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55521

increased by73.36%

Lines of code

536

increased by100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

160

increased by34.45%

Worsened metrics

Dev dependency count

10

increased by66.67%

No dependency changes