deploy Visual Test V1

seyacat · Dec 22, 2023 · 8137548 · 8137548
1 parent b0e8920
commit 8137548
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 1 deletion.
diff --git a/favicon.ico b/favicon.ico
diff --git a/reactive.js b/reactive.js
@@ -1,9 +1,10 @@
 function Reactive(
   ob,
-  options = { prefix: "r-", subscriptionDelay: 0, const: false }
+  options = { prefix: "r-", subscriptionDelay: 0, const: false, related: null }
 ) {
   const newProxy = new Proxy(
     {
+      _rel: options.related,
       _const: options.const,
       _prefix: options.prefix,
       _subscriptionDelay: options.subscriptionDelay,
@@ -231,6 +232,7 @@ function Reactive(
           case "_prefix":
           case "_proxy":
           case "_const":
+          case "_rel":
             return target[prop];
           case "_target":
             return target;
@@ -363,8 +365,14 @@ function Reactive(
   return newProxy;
 }
 
+function Reactivate(related, ob, options) {
+  related.reactive = Reactive(ob, { ...options, related });
+  return related.reactive;
+}
+
 if (typeof module !== "undefined") {
   module.exports = {
     Reactive,
+    Reactivate,
   };
 }
diff --git a/test/main.css b/test/main.css
@@ -16,3 +16,18 @@
   display: block;
   word-wrap: break-word;
 }
+
+.button {
+  background-color: gray;
+  animation-name: breadth;
+  animation-duration: 500ms;
+}
+
+@keyframes breadth {
+  0% {
+    background-color: rgb(4, 248, 0);
+  }
+  100% {
+    background-color: gray;
+  }
+}
diff --git a/test/visualTest.html b/test/visualTest.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>test</title>
+    <link rel="stylesheet" href="main.css" />
+    <script src="../reactive.js"></script>
+  </head>
+  <body>
+    <button id="root" class="button" onclick="reactive.counter++">ROOT</button>
+    <div id="counter_root">0</div>
+    <button id="btn1" class="button" onclick="reactive.counter++">
+      REACTIVE
+    </button>
+    <div id="counter_btn1">0</div>
+    <button id="btn11" class="button" onclick="reactive.counter++">
+      REACTIVE1
+    </button>
+    <div id="counter_btn11">0</div>
+    <div id="code"></div>
+    <script>
+      root = Reactivate(document.getElementById("root"), {
+        counter: 0,
+        btn1: Reactivate(document.getElementById("btn1"), {
+          counter: 0,
+          btn11: Reactivate(document.getElementById("btn11"), { counter: 0 }),
+        }),
+      });
+      root.subscribe(null, (data) => {
+        restartAnimation(data.base._rel);
+        document.getElementById("counter_root").innerHTML = data.base.counter;
+      });
+
+      root.btn1.subscribe(null, (data) => {
+        restartAnimation(data.base._rel);
+        document.getElementById("counter_btn1").innerHTML = data.base.counter;
+      });
+
+      root.btn1.btn11.subscribe(null, (data) => {
+        restartAnimation(data.base._rel);
+        document.getElementById("counter_btn11").innerHTML = data.base.counter;
+      });
+
+      const restartAnimation = (target) => {
+        target.style.animation = "none";
+        target.offsetHeight;
+        target.style.animation = null;
+      };
+    </script>
+    <script>
+      fetch(
+        "https://raw.githubusercontent.com/seyacat/reactive/master/test/visulaTest.html"
+      )
+        .then((response) => response.text())
+        .then((data) => {
+          console.log(data);
+          document.getElementById("code").innerHTML = new Option(data).innerHTML
+            .replace(/\n/g, "<br>")
+            .replace(/\s\s/g, "&nbsp;&nbsp;");
+        });
+    </script>
+  </body>
+</html>