From 4e8b2fcf16e4d0938eb8879ed56c9d33d6b6bf24 Mon Sep 17 00:00:00 2001
From: Waleed Khaled <waleed1kh@outlook.com>
Date: Tue, 27 Aug 2024 21:13:55 +0400
Subject: [PATCH] docs: add debounce demo

---
 docs/src/plugins/moduleDocTransform.ts        |  18 +-
 docs/tsconfig.json                            |   6 +-
 .../utilix/src/function/debounce/demo.vue     | 170 ++++++++++++++++++
 .../utilix/src/function/debounce/index.md     |   8 +
 4 files changed, 191 insertions(+), 11 deletions(-)
 create mode 100644 packages/utilix/src/function/debounce/demo.vue

diff --git a/docs/src/plugins/moduleDocTransform.ts b/docs/src/plugins/moduleDocTransform.ts
index 2b5f405..4126baf 100644
--- a/docs/src/plugins/moduleDocTransform.ts
+++ b/docs/src/plugins/moduleDocTransform.ts
@@ -15,21 +15,21 @@ export function moduleDocTransform(): Plugin<DocTransformPluginAPI> {
 	let exporter: um.DocExporterPluginAPI;
 
 	function transform(code: string, module: string, watchModule?: string) {
-		let mainMd = '', usageMd = '', extMd = '';
+		let mainMd = '', subMd = '', extMd = '';
 
 		const codeIndex = code.indexOf('## ');
 		if (codeIndex >= 0) {
 			mainMd =  code.slice(0, codeIndex);
 			extMd = code.slice(codeIndex);
 
-			const usageIdx = extMd.indexOf("## Usage");
-			if (usageIdx >= 0) {
-				const usageLastIdx = extMd.indexOf("\n## ", usageIdx + 1);
-				if (usageLastIdx >= 0) {
-					usageMd = extMd.slice(0, usageLastIdx);
-					extMd = extMd.slice(usageLastIdx);
+			const subIdx = Math.max(extMd.indexOf("## Usage"), extMd.indexOf("## Demo"));
+			if (subIdx >= 0) {
+				const subLastIdx = extMd.indexOf("\n## ", subIdx + 1);
+				if (subLastIdx >= 0) {
+					subMd = extMd.slice(0, subLastIdx);
+					extMd = extMd.slice(subLastIdx);
 				} else {
-					usageMd = extMd;
+					subMd = extMd;
 					extMd = '';
 				}
 			}
@@ -38,7 +38,7 @@ export function moduleDocTransform(): Plugin<DocTransformPluginAPI> {
 		}
 
 		const md = mdExports(exporter.getExports(module, watchModule), module.slice(module.indexOf('/') + 1));
-		return mainMd + usageMd + md + extMd;
+		return mainMd + subMd + md + extMd;
 	}
 
 	return {
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index b01ee81..cd8533c 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -4,6 +4,7 @@
 		"types": ["node"],
 
 		"outDir": ".vitepress/dist",
+		"rootDir": "../",
 		"composite": true,
 
 		"paths": {
@@ -13,8 +14,9 @@
 		}
 	},
 	"include": [
-		"**/*",
-		".vitepress/**/*"
+		"src",
+		".vitepress/**/*",
+		"../packages/**/*.vue"
 	],
 	"references": [
 		{
diff --git a/packages/utilix/src/function/debounce/demo.vue b/packages/utilix/src/function/debounce/demo.vue
new file mode 100644
index 0000000..bbc54d7
--- /dev/null
+++ b/packages/utilix/src/function/debounce/demo.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref, shallowRef, reactive } from "vue";
+import { debounce, Interval } from "utilix";
+
+interface DemoCtx {
+	draw(): void;
+	debounced(): void;
+	reset(): void;
+}
+
+const ctx = shallowRef<DemoCtx | null>(null);
+const frequency = ref(5);
+const leading = ref(false);
+const trailing = ref(true);
+const rawTicks: number[] = reactive(Array(50).fill(0));
+const debounceTicks: number[] = reactive(Array(50).fill(0));
+
+function start() {
+	if (ctx.value)
+		return;
+
+	let color = 1,
+		rawColor = 0,
+		debounceColor = 0;
+
+	const debounced = debounce(() => {
+		debounceColor = color;
+	}, {
+		timeout: frequency.value * 100,
+		leading: leading.value,
+		trailing: trailing.value
+	});
+
+	const colorSwitch = debounce(() => {
+		color = (color % 10) + 1;
+	}, frequency.value * 100);
+
+	const timer = new Interval(() => {
+		if (rawColor || debounceColor || debounced.isPending) {
+			rawTicks.push(rawColor);
+			rawTicks.shift();
+			debounceTicks.push(debounceColor);
+			debounceTicks.shift();
+			rawColor = 0;
+			debounceColor = 0;
+		}
+	}, 100);
+
+	ctx.value = {
+		draw() {
+			rawColor = color;
+		},
+		debounced() {
+			debounced();
+			colorSwitch();
+		},
+		reset() {
+			timer.pause();
+			rawTicks.fill(0);
+			debounceTicks.fill(0);
+		}
+	};
+}
+
+function reset() {
+	if (ctx.value) {
+		ctx.value.reset();
+		ctx.value = null;
+	}
+}
+
+function mousemove() {
+	start();
+
+	if (ctx.value) {
+		ctx.value.draw();
+		ctx.value.debounced();
+	}
+}
+</script>
+
+<template>
+	<div class="grid gap-6">
+		<div class="controls text-sm">
+			<div>
+				<label for="frequency" class="mr-3">Frequency</label>
+				<input v-model="frequency" type="number" id="frequency" class="form-input w-22 text-sm" :disabled="!!ctx" />
+			</div>
+			<label>
+				<input v-model="leading" type="checkbox" class="form-checkbox" :disabled="!!ctx" />
+				<span>Leading</span>
+			</label>
+			<label>
+				<input v-model="trailing" type="checkbox" class="form-checkbox" :disabled="!!ctx" />
+				<span>Trailing</span>
+			</label>
+			<button v-if="ctx" @click="reset" class="px-3 py-1 rounded-md bg-[--vp-c-brand-2] hover:bg-[--vp-c-brand-3]">Reset</button>
+		</div>
+		<div @mousemove="mousemove" class="flex flex-col h-32 items-center justify-center b-dashed b-1 b-violet rounded-md" :class="{ 'bg-violet/10': !!ctx }">
+			<span>Trigger area</span>
+			<span class="text-xs c-black/50 .dark:c-white/30">Move the mouse to {{ ctx ? 'trigger the event' : 'start' }}</span>
+		</div>
+		<div class="grid gap-6">
+			<div>
+				<h5 class="mb-2">Raw events over time</h5>
+				<div class="flex gap-1 justify-center">
+					<div v-for="(tick, i) in rawTicks" :key="i" :class="'w-2 h-4 rounded color' + tick"></div>
+				</div>
+			</div>
+			<div>
+				<h5 class="mb-2">Debounced events</h5>
+				<div class="flex gap-1 justify-center">
+					<div v-for="(tick, i) in debounceTicks" :key="i" :class="'w-2 h-4 rounded color' + tick"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style scoped>
+.controls {
+	@apply
+		flex items-center justify-start gap-3
+		rounded bg-violet/5 mt-5 px-4 py-2;
+}
+
+
+.color0 {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+.color1 {
+	background-color: #FFE589
+}
+
+.color2 {
+	background-color: #B9C6FF
+}
+
+.color3 {
+	background-color: #99FF7E
+}
+
+.color4 {
+	background-color: #FFB38A
+}
+
+.color5 {
+	background-color: #A5FCFF
+}
+
+.color6 {
+	background-color: #FF8E9B
+}
+
+.color7 {
+	background-color: #E3FF7E
+}
+
+.color8 {
+	background-color: #FFA3D8
+}
+
+.color9 {
+	background-color: #5ca6ff
+}
+
+.color10 {
+	background-color: #9BFFBB
+}
+</style>
diff --git a/packages/utilix/src/function/debounce/index.md b/packages/utilix/src/function/debounce/index.md
index 49c648c..f176335 100644
--- a/packages/utilix/src/function/debounce/index.md
+++ b/packages/utilix/src/function/debounce/index.md
@@ -1,3 +1,11 @@
+<script setup>
+import Demo from './demo.vue';
+</script>
+
 # debounce
 
 Limit the frequency of a function call by delaying its execution until a certain amount of time has passed since the last invocation. It is commonly used in scenarios where you want to prevent a function from being called too frequently, such as handling user input or event listeners.
+
+## Demo
+
+<Demo />