feat(isRef, isReactive static methods)

Author: Ajit Kumar

dist/Ref.js

@@ -56,6 +56,7 @@ const message = Reactive('Hello');
 | Method    | Description                                     |
 |-----------|-------------------------------------------------|
 | `toString()` | Returns string representation of the value   |
+| `static isReactive(value)` | Check if a value is a reactive instance |
 
 ## Complete Example
 

dist/reactive.js

@@ -60,6 +60,7 @@ const element = myRef.el;
 |--------------|--------------------------------------|
 | `get()`      | Query child elements                 |
 | `getAll()`   | Query all matching child elements    |
+| `static isRef(value)` | Check if a value is a reference instance |
 
 ```js
 const btn = myRef.get('#submit-btn');

docs/reactive.md

@@ -27,6 +27,8 @@ <h1>HTML-TAG-JS</h1>
       console.log(p);
     });
 
+    console.log('p isRef:', Ref.isRef(p));
+
     dynamic.content = [
       (() => {
         return new Promise((resolve) => {
@@ -138,6 +140,10 @@ <h1>HTML-TAG-JS</h1>
 
     const text = Reactive('This is a reactive text');
     const count = Reactive(0);
+
+    console.log('text isReactive:', Reactive.isReactive(text));
+    console.log('count isReactive:', Reactive.isReactive(count));
+
     app.append(
       tag('hr'),
       tag('p', {

docs/ref.md

@@ -81,7 +81,7 @@
     }
   },
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --mode production",
     "test": "jest ./test",
     "dev": "nodemon --exec 'jest ./test/dev.test.js' --watch ./test --watch ./jsx"
   },
@@ -114,4 +114,4 @@
     "webpack-cli": "^6.0.1"
   },
   "browserslist": "cover 100%,not android < 5"
-}
+}

examples/index.html

@@ -1,5 +1,5 @@
 
-class Reactive extends Text {
+class ReactiveClass extends Text {
   /** @type {(value:string)=>void} */
   onChange = null;
 
@@ -44,4 +44,8 @@ class Reactive extends Text {
  * @param {number|string} value - The initial value of the text node
  * @returns {Text}
  */
-export default (value) => new Reactive(value);
+export default function Reactive(value) {
+  return new ReactiveClass(value);
+}
+
+Reactive.isReactive = (value) => value instanceof ReactiveClass;

package.json

@@ -1,6 +1,6 @@
 import { addChildren } from './tag';
 
-class Ref {
+class RefClass {
   instanceOfRef = true;
   /**@type {HTMLElement} */
   #el;
@@ -426,4 +426,8 @@ class CSSStyle {
   }
 }
 
-export default (onref) => new Ref(onref);
+export default function Ref(onref) {
+  return new RefClass(onref);
+}
+
+Ref.isRef = (value) => value instanceof RefClass;