From 3f9b3ba6452544f71ee861e48736a93ddafc70da Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sat, 12 Oct 2024 12:28:41 -0400
Subject: [PATCH] centralized fake sockets

---
 index.html                           |  7 ++-
 preactthing.tsx                      | 43 -------------------
 state-preserve/index.html            |  2 +-
 state-preserve/preact.js             | 64 +++++++++++++++++++++-------
 test_application.mjs                 |  7 ++-
 test_changer.mjs                     | 31 +++++++-------
 test_changer_other.mjs               | 21 +++++++++
 test_framework.mjs                   | 18 ++++++++
 test_rand.mjs                        |  1 -
 test_receiver.mjs                    |  2 +
 test_sockets.mjs                     | 25 +++++++++++
 transpiler/{_test.html => test.html} |  0
 transpiler/walker.html               | 62 ++++++++++++++++++++++++++-
 13 files changed, 205 insertions(+), 78 deletions(-)
 delete mode 100644 preactthing.tsx
 create mode 100644 test_changer_other.mjs
 create mode 100644 test_framework.mjs
 delete mode 100644 test_rand.mjs
 create mode 100644 test_sockets.mjs
 rename transpiler/{_test.html => test.html} (100%)
diff --git a/index.html b/index.html
index 10399b5..6cdd82c 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,11 @@
+
+<script>
+globalThis.Listen = [];
+
+</script>
 <script type="module" src="test_receiver.mjs"></script>
 
-<!--
+<!-- if test_rand.mjs exports a random number as default, there will be 4 different values if there is a cachebust on the import
 <script type="module">
     import r1 from "./test_rand.mjs?1";
     import r2 from "./test_rand.mjs?2";
diff --git a/preactthing.tsx b/preactthing.tsx
deleted file mode 100644
index 12f074a..0000000
--- a/preactthing.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useState as preactUseState, useEffect as preactUseEffect } from 'preact/hooks';
-import { useState as reactUseState, useEffect as reactUseEffect } from 'react';
-import { options as preactOptions } from 'preact';
-
-const isPreact = typeof preactUseState === 'function';
-
-const useState = isPreact ? preactUseState : reactUseState;
-const useEffect = isPreact ? preactUseEffect : reactUseEffect;
-
-function useLogger(componentName) {
-  useEffect(() => {
-    console.log(`${isPreact ? 'Preact' : 'React'}: Component ${componentName} mounted`);
-    return () => {
-      console.log(`${isPreact ? 'Preact' : 'React'}: Component ${componentName} unmounted`);
-    };
-  }, [componentName]);
-
-  useEffect(() => {
-    console.log(`${isPreact ? 'Preact' : 'React'}: Component ${componentName} rendered`);
-  });
-}
-
-if (isPreact) {
-  preactOptions.__r = (vnode) => {
-    console.log('Preact: Rendering component:', vnode);
-  };
-
-  preactOptions.diffed = (vnode) => {
-    console.log('Preact: Component diffed:', vnode);
-  };
-
-  preactOptions.unmount = (vnode) => {
-    console.log('Preact: Unmounting component:', vnode);
-  };
-}
-
-// Example component using the custom hook
-function MyComponent() {
-  useLogger('MyComponent');
-  return <div>My Component</div>;
-}
-
-export default MyComponent;
diff --git a/state-preserve/index.html b/state-preserve/index.html
index 45951ef..91932fc 100644
--- a/state-preserve/index.html
+++ b/state-preserve/index.html
@@ -2,6 +2,6 @@
 <head></head>
 <body>
     <div id="app"></div>
-    <script type="module" src="./preact.js"></script>
+    <script type="module" src="preact.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/state-preserve/preact.js b/state-preserve/preact.js
index fe3c3b8..da0288c 100644
--- a/state-preserve/preact.js
+++ b/state-preserve/preact.js
@@ -3,28 +3,62 @@ import * as Preact from "https://esm.sh/preact@10.23.1";
 import * as React from "https://esm.sh/preact@10.23.1/compat";
 const H = Preact.h;
 
-console.log(React);
 
-/** @typedef {(vnode:Preact.VNode)=>unknown} DeepHook*/
 
-/** @type {DeepHook|undefined} */
-const renderOld =Preact.options.__r;
-
-/** @type {DeepHook} */
-const renderNew =(vnode)=>
+const SPOOF =(...args)=>
 {
-    console.log("render!")
-    console.log(vnode);
-    // how to examine state context here?
-};
+    console.log("spoof state", ...args);
+
+    const [hookGet, hookSet] = React.useState(...args);
+
+    const spoofSetter = (...args)=>{
+        console.log("spoofed setter", ...args);
+        hookSet(...args);
+    }
+
+    return [
+        hookGet,
+        spoofSetter
+    ]
+}
+
+function OptionsHook(key, hookNew)
+{
+    const hookOld =Preact.options[key];
+    Preact.options[key] = hookOld ? (...args)=>{hookOld(...args); hookNew(...args);} : hookNew;
+}
+
+OptionsHook("__r", (/** @type {Preact.VNode}*/vnode)=>
+{
+    console.log("render!");
+    console.log();
+});
+
+
+OptionsHook("__h", (component_instance, hook_index, hook_state)=>
+{
+    console.log("Hook!")
+    console.log(hook_index, hook_state);
+})
+
+OptionsHook("__", (...args)=>
+{
+    console.log("unknown!")
+    console.log(...args);
+})
+
 
-Preact.options.__r = renderOld ? /**@type{DeepHook}*/((vnode)=>{renderOld(vnode); renderNew(vnode);}) : renderNew;
 
 const Component =()=>
 {
-    const [countGet, countSet] = React.useState(3);
-    return H("h1", {onClick(){countSet(countGet+1)}}, `count: ${countGet}`);
+    const [countGet, countSet] = SPOOF(12345);
+    const [textGet, textSet] = SPOOF("Count is:");
+    return H("h1", {onClick(){countSet(countGet+1)}}, `${textGet} ${countGet}`);
 }
 
 const root = document.querySelector("#app")||document.body;
-Preact.render(H(Component, {HEY:"HEY"}), root);
\ No newline at end of file
+Preact.render(
+H(Preact.Fragment, null,
+    H(Component),
+    H(Component),
+), root);
\ No newline at end of file
diff --git a/test_application.mjs b/test_application.mjs
index 676015c..b7bfc1f 100644
--- a/test_application.mjs
+++ b/test_application.mjs
@@ -1,4 +1,5 @@
-import {changing} from "./test_changer.mjs";
+import {changing, Component} from "./test_changer.mjs";
+import {Component as ComponentOther} from "./test_changer_other.mjs";
 
 const area = document.createElement("pre");
 document.body.append(area);
@@ -8,4 +9,8 @@ export function Render()
 {
     console.log("pulling changing", changing)
     area.innerHTML = changing;
+
+    console.log("compoenent render:")
+    Component();
+    ComponentOther();
 }
\ No newline at end of file
diff --git a/test_changer.mjs b/test_changer.mjs
index b638849..2fe79de 100644
--- a/test_changer.mjs
+++ b/test_changer.mjs
@@ -1,20 +1,21 @@
-export let changing = "hello!";
-
-////////////////////////////////////////////
-let ReImported = {};
+/////////////////// injected /////////////////////////
 const thisURL = new URL(import.meta.url)
 const thisFile = thisURL.pathname;
 if(!thisURL.search)
 {
-    setInterval(()=>{
-        import(thisFile+"?"+Math.random()).then(module=>{
-            ReImported = module;
-            for(let key in module)
-            {
-                const statement = `${key}=ReImported.${key}`
-                eval(statement);
-                console.log(statement);
-            }
-        })
-    }, 3000);
+    await import("./test_sockets.mjs").then(m=>m.Register(thisFile, (module)=>{
+        for(let key in module)
+        {
+            eval(`${key}=module.${key}`);
+        }       
+    }));
+}
+////////////////////////////////////////////
+
+import spoofHook from "./test_framework.mjs?changer"
+export let changing = "123.";
+
+export function Component()
+{
+    spoofHook();
 }
\ No newline at end of file
diff --git a/test_changer_other.mjs b/test_changer_other.mjs
new file mode 100644
index 0000000..e8777bc
--- /dev/null
+++ b/test_changer_other.mjs
@@ -0,0 +1,21 @@
+/////////////////// injected /////////////////////////
+const thisURL = new URL(import.meta.url)
+const thisFile = thisURL.pathname;
+if(!thisURL.search)
+{
+    await import("./test_sockets.mjs").then(m=>m.Register(thisFile, (module)=>{
+        for(let key in module)
+        {
+            eval(`${key}=module.${key}`);
+        }       
+    }));
+}
+////////////////////////////////////////////
+
+import spoofHook from "./test_framework.mjs?changer_other"
+export let changing = "456";
+
+export function Component()
+{
+    spoofHook();
+}
\ No newline at end of file
diff --git a/test_framework.mjs b/test_framework.mjs
new file mode 100644
index 0000000..eb3fe47
--- /dev/null
+++ b/test_framework.mjs
@@ -0,0 +1,18 @@
+
+const url =new URL(import.meta.url)
+let context = url.search.substring(1)
+if(context)
+{
+    console.log("context found:", context);
+}
+else
+{
+    console.log("no context:", url);
+}
+
+
+export default function(){
+    console.log("spoof hook context", context);
+    console.log("spoof hook this", this);
+
+}
\ No newline at end of file
diff --git a/test_rand.mjs b/test_rand.mjs
deleted file mode 100644
index 6661211..0000000
--- a/test_rand.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export default Math.random();
\ No newline at end of file
diff --git a/test_receiver.mjs b/test_receiver.mjs
index 62c8acf..833619a 100644
--- a/test_receiver.mjs
+++ b/test_receiver.mjs
@@ -1,5 +1,7 @@
 import * as App from "./test_application.mjs";
 
+globalThis.Listen = [];
+
 const button = document.createElement("button");
 button.innerHTML = "Reload";
 button.addEventListener("click", ()=>
diff --git a/test_sockets.mjs b/test_sockets.mjs
new file mode 100644
index 0000000..243dfbf
--- /dev/null
+++ b/test_sockets.mjs
@@ -0,0 +1,25 @@
+
+/** @type {Map<string, ()=>Promise<void>} */
+const Files = new Map();
+
+globalThis.MODULE = {};
+
+/** @type {(file:string, hnadler:()=>void)} */
+export function Register(file, handler)
+{
+    console.log("registering", file);
+    const WrapperHandler =()=> import(file+"?"+new Date().getTime()).then(handler);
+    Files.set(file, WrapperHandler);
+}
+
+const Loop =async()=>
+{
+    console.log("looping!");
+    for (const [fileName, handler] of Files.entries())
+    {
+        await handler();
+    }
+    setTimeout(Loop, 3000);
+}
+
+Loop();
\ No newline at end of file
diff --git a/transpiler/_test.html b/transpiler/test.html
similarity index 100%
rename from transpiler/_test.html
rename to transpiler/test.html
diff --git a/transpiler/walker.html b/transpiler/walker.html
index f5e24aa..a61d15c 100644
--- a/transpiler/walker.html
+++ b/transpiler/walker.html
@@ -3,6 +3,65 @@
 <body>
 <button id="open">open</button>
 <script type="module">
+import { openDB } from "https://esm.sh/idb@8.0.0";
+
+async function initDB() {
+  const db = await openDB('file-handles', 1, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains('handles')) {
+        db.createObjectStore('handles');
+      }
+    },
+  });
+  return db;
+}
+
+async function storeHandle(handle) {
+  const db = await initDB();
+  await db.put('handles', handle, 'directory');
+}
+
+async function getStoredHandle() {
+  const db = await initDB();
+  const handle = await db.get('handles', 'directory');
+  return handle;
+}
+
+async function verifyPermission(handle, readWrite) {
+  const options = {};
+  if (readWrite) {
+    options.mode = 'readwrite';
+  }
+  if ((await handle.queryPermission(options)) === 'granted') {
+    return true;
+  }
+  if ((await handle.requestPermission(options)) === 'granted') {
+    return true;
+  }
+  return false;
+}
+
+async function init() {
+  let handle = await getStoredHandle();
+  if (handle) {
+    const hasPermission = await verifyPermission(handle, true);
+    if (!hasPermission) {
+      handle = null;
+    }
+  }
+  if (!handle) {
+    handle = await globalThis.showDirectoryPicker();
+    await storeHandle(handle);
+  }
+  console.log('Directory handle:', handle);
+  return handle;
+}
+
+///////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////
+
 
 // Function to walk through the directory and update file handles
 async function updateFileHandles(dirHandle, extension, path = "", map) {
@@ -46,7 +105,8 @@ async function checkModifiedDates(map, date) {
 
 // Main function to set up the intervals
 async function main() {
-    const dirHandle = await window.showDirectoryPicker();
+    //const dirHandle = await window.showDirectoryPicker();
+    const dirHandle = await init();
     const extension = '.html'; // Change this to the desired file extension
 
     let fileHandlesMap = new Map();
