Merge pull request #10 from Yrobot/master

Yrobot · web-flow · commit 99256800858e · 2024-04-10T14:05:49.000+08:00
Version release
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,12 @@ docs
 
 # Generated by MacOS
 .DS_Store
+
+# yarn4
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/.npmignore b/.npmignore
@@ -27,3 +27,9 @@ CHANGELOG.md
 
 ## build
 build_website
+
+## dev files
+.yarn
+.yarnrc.yml
+postcss.config.js
+tailwind.config.js
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/package.json b/package.json
@@ -26,8 +26,12 @@
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.4.19",
+    "daisyui": "^4.10.1",
+    "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
     "vite-plugin-dts": "^3.7.0"
diff --git a/package/index.ts b/package/index.ts
@@ -1,22 +1,21 @@
 type unObserverCallback = () => void;
-
 const throttle = <R, A extends any[]>(
   fn: (...args: A) => R,
   delay: number
-): [(...args: A) => R | null, () => void] => {
-  let wait = false;
+): [(...args: A) => null, () => void] => {
+  let lastCall = -Infinity;
   let timeout: undefined | number;
   let cancelled = false;
   return [
     (...args: A) => {
       if (cancelled) return null;
-      if (wait) return null;
-      const val = fn(...args);
-      wait = true;
+      let wait = lastCall + delay - Date.now();
+      clearTimeout(timeout);
       timeout = window.setTimeout(() => {
-        wait = false;
-      }, delay);
-      return val;
+        lastCall = Date.now();
+        fn(...args);
+      }, Math.max(0, wait));
+      return null;
     },
     () => {
       cancelled = true;
@@ -50,13 +49,24 @@ export const escapeWhenUpPlugin: Plugin<{
 }> = ({ threshold = 24, throttleTime = 100 } = {}) => {
   const context: Context = {};
   let isEscape = false;
+  let lastScrollTop = -Infinity;
   const [onScroll] = throttle((evt: Event) => {
     const target = evt.target as Element;
-    const scrollUpDistance =
-      target.scrollHeight - target.scrollTop - target.clientHeight;
-    isEscape = scrollUpDistance > threshold;
+    // when isEscape=false and user scroll up, escape auto scroll
+    if (!isEscape && target.scrollTop < lastScrollTop) {
+      isEscape = true;
+    }
+    // when isEscape=true and user scroll down to $threshold, active auto scroll
+    if (
+      isEscape &&
+      target.scrollHeight - target.scrollTop - target.clientHeight <= threshold
+    ) {
+      isEscape = false;
+    }
+    lastScrollTop = target.scrollTop;
   }, throttleTime);
   context.onMount = (elm) => {
+    lastScrollTop = elm.scrollTop;
     elm.addEventListener("scroll", onScroll);
   };
   context.onUnmount = (elm) => {
@@ -72,7 +82,7 @@ export const escapeWhenUpPlugin: Plugin<{
  * @param {Object} options - The config options for the autoScroll function.
  * @param {string} options.selector - The selector for the container element. (example: '#container')
  * @param {Context[]} [options.plugins] - The plugins for the life cycle hooks of the autoScroll function. [escapeHook,onMount,onUnmount]
- * @param {number} [options.throttleTime=100] - The throttle time in milliseconds.
+ * @param {number} [options.throttleTime=100] - The throttle time in milliseconds. default is 100. 0 for no throttle.
  * @param {number} [options.offset=0] - The offset for the scroll position based on the container.scrollHeight.
  *
  * @return {function} The unObserverCallback function.
@@ -102,32 +112,45 @@ export default function autoScroll({
     .filter((result) => typeof result === "function") as OnUnmount[];
 
   // main auto down scroll hook
-  const [scrollHook] = throttle(() => {
+  const onResize = () => {
     if (!!plugins.find((plugin) => plugin?.escapeHook?.(container) === true))
       return false;
     // use requestAnimationFrame for escape ResizeObserver loop
     requestAnimationFrame(() => {
-      container.scrollTop = container.scrollHeight + offset;
+      // console.log("scrollHook", container.scrollHeight - offset);
+      container.scrollTo({
+        top: container.scrollHeight - offset,
+        // behavior: "smooth", // will effect escapeWhenUpPlugin user scroll up detection
+      });
     });
     return true;
-  }, throttleTime);
+  };
+  const [scrollHook] =
+    throttleTime > 0 ? throttle(onResize, throttleTime) : [onResize];
 
   // observers
   const resizeObserver = new ResizeObserver(() => {
+    // console.log("ResizeObserver");
     scrollHook();
   });
+
   const mutationObserver = new MutationObserver(() => {
+    // console.log("MutationObserver");
+    observeChildren(); // re-observe the children when the child is new added or removed
     scrollHook();
   });
 
   // observe the children size change
-  for (const child of container.children) {
-    resizeObserver.observe(child);
-  }
+  const observeChildren = () => {
+    resizeObserver.disconnect(); // clean the previous observer
+    for (const child of container.children) {
+      resizeObserver.observe(child);
+    }
+  };
+  observeChildren();
 
   // observe the subtree child list length change
   mutationObserver.observe(container, {
-    subtree: true,
     childList: true,
   });
 
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./website/**/*.{ts,tsx,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light"],
+  },
+};
diff --git a/website/index.css b/website/index.css
@@ -1,52 +1,37 @@
-body {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-.panel {
-  width: 400px;
-}
-.list-container {
-  box-sizing: border-box;
-  border: 1px solid #000;
-  padding: 8px;
-  width: 100%;
-  height: 600px;
-  overflow: scroll;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 16px;
-}
-.loading {
-  flex: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 64px;
-  font-size: large;
-  font-weight: 800;
-}
-.item {
-  flex: none;
-  width: 100%;
-  height: 100px;
-  border-radius: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: black;
-  color: #fff;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.grid-table {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 64px;
+@layer base {
+  body {
+    @apply flex justify-center items-start m-0 p-0;
+  }
+  h3 {
+    @apply my-4 font-bold;
+  }
 }
 
-code {
-  white-space: pre-wrap;
+@layer components {
+  .panel {
+    @apply w-[400px] flex flex-col items-center justify-start;
+  }
+  .list-container {
+    @apply overflow-scroll p-2 pt-6;
+  }
+  .item {
+    @apply flex-none w-full h-[100px] flex justify-center items-center bg-[black] text-white rounded-lg;
+  }
+  .grid-table {
+    @apply grid grid-cols-[1fr_1fr] gap-16;
+  }
+  .code-block {
+    @apply p-3 rounded-lg;
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-n, oklch(var(--n) / var(--tw-bg-opacity)));
+    --tw-text-opacity: 1;
+    color: var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity)));
+  }
+  .code-block code {
+    @apply whitespace-pre-wrap;
+  }
 }
diff --git a/website/index.tsx b/website/index.tsx
diff --git a/yarn.lock b/yarn.lock
