main 🧊 add use latest, use const, add usages in view

Author: debabin

docs/functions/hooks/[name].md

@@ -3,6 +3,7 @@ import Meta from '../../src/components/meta.vue'
 import Api from '../../src/components/api.vue'
 import Demo from '../../src/components/demo.vue'
 import Contributors from '../../src/components/contributors.vue'
+import Code from '../../src/components/code.vue'
 </script>
 
 # {{ $params.name }}
@@ -11,15 +12,11 @@ import Contributors from '../../src/components/contributors.vue'
 
 {{ $params.description }}
 
-```typescript-vue
-import { {{ $params.name }} } from '@siberiacancode/reactuse';
-```
+<Code :code="$params.example" lang="typescript" />
 
 ## Usage
 
-```typescript-vue
-{{ $params.usage }}
-```
+<Code :code="$params.usage" lang="typescript" />
 
 ## Demo
 

docs/functions/hooks/[name].paths.ts renamed to docs/functions/hooks/[name].paths.mts

@@ -1,3 +1,5 @@
+import { codeToHtml } from 'shiki'
+
 import { getHookFile, getHooks, matchJsdoc, parseHookJsdoc } from '../../src/utils';
 
 export default {
@@ -16,19 +18,48 @@ export default {
 
         const jsdoc = parseHookJsdoc(jsdocMatch);
 
-        if (!jsdoc.description || !jsdoc.usage) {
+        if (!jsdoc.description || !jsdoc.usages.length) {
           console.error(`No content found for ${hook}`);
           return null;
         }
 
+        const usages = jsdoc.usages.reduce((acc, usage, index) => {
+          if (index !== jsdoc.usages.length - 1) {
+            acc += `${usage.description}\n// or\n`;
+          } else {
+            acc += usage.description;
+          }
+          return acc;
+        }, '')
+
+        const usage = await codeToHtml(usages, {
+          lang: 'typescript',
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark'
+          },
+          defaultColor: false
+        });
+
+
+        const example = await codeToHtml(`import { ${hook} } from '@siberiacancode/reactuse';`, {
+          lang: 'typescript',
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark'
+          },
+          defaultColor: false
+        });
+
         return {
           params: {
             id: hook,
             name: hook,
+            example,
             description: jsdoc.description.description,
             category: jsdoc.category?.name,
             lastModified: stats.mtime.getTime(),
-            usage: jsdoc.usage.description,
+            usage,
             apiParameters: jsdoc.apiParameters
           }
         };
@@ -46,3 +77,4 @@ export default {
     return params.filter(Boolean);
   }
 };
+

docs/src/components/code.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+  code: String,
+  lang: String
+});
+
+const container = ref(null);
+onMounted(() => {
+  if (container.value) {
+    container.value.innerHTML += props.code;
+  }
+});
+</script>
+
+<template>
+  <div ref="container" :class="`language-${props.lang} vp-adaptive-theme vp-code`">
+    <button title="Copy code" class="copy" />
+    <span class="lang">{{ props.lang }}</span>
+  </div>
+</template>

docs/src/utils/hooks/getHookItems.ts

@@ -26,7 +26,7 @@ export const getHookItems = async (): Promise<HookItem[]> => {
 
       const jsdoc = parseHookJsdoc(match[0].trim());
 
-      if (!jsdoc.description || !jsdoc.usage) {
+      if (!jsdoc.description || !jsdoc.usages.length) {
         console.error(`No content found for ${hook}`);
         return null;
       }

docs/src/utils/parseHookJsdoc.ts

@@ -3,12 +3,12 @@ import { parse } from 'comment-parser';
 export const parseHookJsdoc = (file: string) => {
   const jsdoc = parse(file)[0];
   const description = jsdoc.tags.find(({ tag }) => tag === 'description');
-  const usage = jsdoc.tags.find(({ tag }) => tag === 'example');
+  const usages = jsdoc.tags.filter(({ tag }) => tag === 'example');
   const deprecated = jsdoc.tags.find(({ tag }) => tag === 'deprecated');
   const category = jsdoc.tags.find(({ tag }) => tag === 'category');
   const apiParameters = jsdoc.tags.filter(
     ({ tag }) => tag === 'param' || tag === 'overload' || tag === 'returns'
   );
 
-  return { description, usage, apiParameters, deprecated, category };
+  return { description, usages, apiParameters, deprecated, category };
 };

package.json

@@ -13,7 +13,7 @@
     }
   ],
   "license": "MIT",
-  "homepage": "https://github.com/siberiacancode/reactuse",
+  "homepage": "https://siberiacancode.github.io/reactuse/",
   "repository": {
     "type": "git",
     "url": "https://github.com/siberiacancode/reactuse.git"

src/hooks/index.ts

@@ -6,6 +6,7 @@ export * from './useBreakpoints/useBreakpoints';
 export * from './useBrowserLanguage/useBrowserLanguage';
 export * from './useClickOutside/useClickOutside';
 export * from './useClipboard/useClipboard';
+export * from './useConst/useConst';
 export * from './useCounter/useCounter';
 export * from './useCssVar/useCssVar';
 export * from './useDebounceCallback/useDebounceCallback';

src/hooks/useConst/useConst.demo.tsx

@@ -0,0 +1,15 @@
+import { useConst } from './useConst';
+
+const Demo = () => {
+    const mountTime = useConst(() => new Date().toTimeString())
+    const obj = useConst({ a: Math.random() })
+
+    return (
+        <div>
+            <p>Mount time: <code>{mountTime}</code></p>
+            <p>Value from constant object: <code>{obj.a}</code></p>
+        </div>
+    )
+};
+
+export default Demo;

src/hooks/useConst/useConst.test.ts

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react';
+
+import { useConst } from './useConst';
+
+it('Should use const', () => {
+  const { result } = renderHook(() => useConst('value'));
+
+  expect(result.current).toBe('value');
+});
+
+it('should return the same constant value', () => {
+  const { result, rerender } = renderHook(() => useConst('value'));
+  expect(result.current).toBe('value');
+
+  rerender();
+
+  expect(result.current).toBe('value');
+});
+
+it('Should call initializer function', () => {
+  const init = vitest.fn(() => 99);
+  const { result } = renderHook(() => useConst(init));
+
+  expect(result.current).toBe(99);
+  expect(init).toHaveBeenCalledTimes(1);
+});

src/hooks/useConst/useConst.ts

@@ -0,0 +1,16 @@
+import { useRef } from 'react';
+
+/**
+ * @name useConst
+ * @description - Hook that returns the constant value
+ * @category Utilities
+ *
+ * @template Value The type of the value
+ * @param {(() => Value) | Value} initialValue The initial value of the constant
+ * @returns {Value} The constant value
+ *
+ * @example
+ * const value = useConst('value');
+ */
+export const useConst = <Value>(initialValue: (() => Value) | Value) =>
+  useRef<Value>(initialValue instanceof Function ? initialValue() : initialValue).current;