chore(release): v1.1.1

README.md

@@ -13,18 +13,18 @@ This repository is a **[VitePress](https://vitepress.dev/)** project: guides, AP
 
 ### Core sections on docs site
 
-- `State`
-- `Elements`
-- `Browser`
-- `Sensors`
-- `Network`
-- `Animation`
-- `Component`
-- `Watch`
-- `Reactivity`
-- `Array`
-- `Time`
-- `Utilities`
+- [State](https://usereact.org/functions/state)
+- [Elements](https://usereact.org/functions/elements)
+- [Browser](https://usereact.org/functions/browser)
+- [Sensors](https://usereact.org/functions/sensors)
+- [Network](https://usereact.org/functions/network)
+- [Animation](https://usereact.org/functions/animation)
+- [Component](https://usereact.org/functions/component)
+- [Watch](https://usereact.org/functions/watch)
+- [Reactivity](https://usereact.org/functions/reactivity)
+- [Array](https://usereact.org/functions/array)
+- [Time](https://usereact.org/functions/time)
+- [Utilities](https://usereact.org/functions/utilities)
 
 ## Requirements
 

docs/.vitepress/config.mts

@@ -1,8 +1,55 @@
 import { defineConfig } from 'vitepress'
 import type { PageData } from 'vitepress'
+import path from 'node:path'
+import { existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { buildCoreFunctionsSidebarGroup } from './data/hookCatalog'
 import { transformHead as seoTransformHead } from './seo/transformHead'
+import { SOCIAL_X_URL } from './seo/social'
+
+// use-react-docs/ (this file is docs/.vitepress/config.mts)
+const DOCS_PROJECT_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', '..')
+
+// Monorepo: use sibling `../use-react` so docs don’t use a **stale** Vite prebundle of `node_modules/@dedalik/use-react`.
+const USE_REACT_DEV_ENTRY = path.resolve(DOCS_PROJECT_ROOT, '../use-react/src/index.ts')
+const USE_REACT_ALIASED = existsSync(USE_REACT_DEV_ENTRY)
+/** Resolves `import x from '@dedalik/use-react/useX'` to source files when developing against local `../use-react`. */
+const USE_REACT_HOOKS_SRC = path.resolve(DOCS_PROJECT_ROOT, '../use-react/src/hooks')
+
+// Keep paths posix-ish: Vite optimizeDeps works reliably with forward slashes in this repo.
+const REACT_DEMO_BASENAMES = [
+  'useAsyncState.basic.ts',
+  'useCounter.basic.ts',
+  'useDebouncedRefHistory.basic.ts',
+  'useDebounce.basic.ts',
+  'useEventCallback.basic.ts',
+  'useLastChanged.basic.ts',
+  'useLatest.basic.ts',
+  'useManualRefHistory.basic.ts',
+  'useOnMount.basic.ts',
+  'usePrevious.basic.ts',
+  'useRefHistory.basic.ts',
+  'useStorageAsync.basic.ts',
+  'useStorage.basic.ts',
+  'useThrottledRefHistory.basic.ts',
+  'useThrottle.basic.ts',
+  'useToggle.basic.ts',
+] as const
+
+const optimizeDepsInclude = [
+  'react',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom',
+  'react-dom/client',
+  'shikiji',
+  'shikiji/wasm',
+  'shikiji-core',
+  'tslib',
+  ...(!USE_REACT_ALIASED ? (['@dedalik/use-react'] as const) : []),
+  ...REACT_DEMO_BASENAMES.map((file) => path.posix.join('docs/.vitepress/theme/react-demos', file)),
+]
 
 function editUrlForPage(page: PageData): string {
   const m = page.relativePath.match(/^functions\/(.+)\.md$/)
@@ -29,6 +76,41 @@ export default defineConfig({
     })
   },
   plugins: [vueJsx()],
+  vite: {
+    resolve: {
+      // Prevent multiple React copies (breaks hooks when @dedalik/use-react resolves a different instance).
+      dedupe: ['react', 'react-dom', 'react-dom/client'],
+      // Hard pin React to a single on-disk module in dev (Vite prebundles can still split without this).
+      // Subpath `import from '@dedalik/use-react/useX'` must resolve before the barrel alias; order matters.
+      alias: [
+        ...(USE_REACT_ALIASED
+          ? ([
+              {
+                find: /^@dedalik\/use-react\/(.+)$/,
+                replacement: `${USE_REACT_HOOKS_SRC.replace(/\\/g, '/')}/$1.tsx`,
+              },
+              { find: '@dedalik/use-react', replacement: USE_REACT_DEV_ENTRY },
+            ] as const)
+          : []),
+        { find: 'react', replacement: path.join(DOCS_PROJECT_ROOT, 'node_modules/react') },
+        { find: 'react/jsx-runtime', replacement: path.join(DOCS_PROJECT_ROOT, 'node_modules/react/jsx-runtime.js') },
+        {
+          find: 'react/jsx-dev-runtime',
+          replacement: path.join(DOCS_PROJECT_ROOT, 'node_modules/react/jsx-dev-runtime.js'),
+        },
+        { find: 'react-dom', replacement: path.join(DOCS_PROJECT_ROOT, 'node_modules/react-dom') },
+        { find: 'react-dom/client', replacement: path.join(DOCS_PROJECT_ROOT, 'node_modules/react-dom/client.js') },
+      ],
+    },
+    ssr: {
+      noExternal: ['@dedalik/use-react'],
+    },
+    optimizeDeps: {
+      include: optimizeDepsInclude,
+      // Local `use-react` must not be served from a cached `node_modules/.vite/deps` snapshot.
+      exclude: USE_REACT_ALIASED ? (['@dedalik/use-react'] as const) : [],
+    },
+  },
   markdown: {
     image: {
       // image lazy loading is disabled by default
@@ -53,7 +135,7 @@ export default defineConfig({
       },
     ],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { name: 'twitter:creator', content: '@antfu7' }],
+    ['meta', { name: 'twitter:creator', content: SOCIAL_X_URL }],
     ['meta', { name: 'twitter:image', content: 'https://usereact.org/logo.png' }],
     [
       'meta',
@@ -86,23 +168,6 @@ export default defineConfig({
         href: 'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
       },
     ],
-
-    // Google tag (gtag.js) - G-FBEWF72TFF
-    [
-      'script',
-      {
-        async: '',
-        src: 'https://www.googletagmanager.com/gtag/js?id=G-FBEWF72TFF',
-      },
-    ],
-    [
-      'script',
-      {},
-      `window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'G-FBEWF72TFF');`,
-    ],
   ],
 
   themeConfig: {

docs/.vitepress/data/homeStateDemos.ts

@@ -0,0 +1,19 @@
+/** Live demos for the home “State” section (same order as /functions/state, plus any extra state demos with bundles). */
+export const homeStateDemos: ReadonlyArray<{ demo: string; title: string }> = [
+  { demo: 'useToggle/basic', title: 'useToggle' },
+  { demo: 'useCounter/basic', title: 'useCounter' },
+  { demo: 'useDebounce/basic', title: 'useDebounce' },
+  { demo: 'usePrevious/basic', title: 'usePrevious' },
+  { demo: 'useLatest/basic', title: 'useLatest' },
+  { demo: 'useThrottle/basic', title: 'useThrottle' },
+  { demo: 'useAsyncState/basic', title: 'useAsyncState' },
+  { demo: 'useStorage/basic', title: 'useStorage' },
+  { demo: 'useStorageAsync/basic', title: 'useStorageAsync' },
+  { demo: 'useLastChanged/basic', title: 'useLastChanged' },
+  { demo: 'useRefHistory/basic', title: 'useRefHistory' },
+  { demo: 'useManualRefHistory/basic', title: 'useManualRefHistory' },
+  { demo: 'useDebouncedRefHistory/basic', title: 'useDebouncedRefHistory' },
+  { demo: 'useThrottledRefHistory/basic', title: 'useThrottledRefHistory' },
+  { demo: 'useEventCallback/basic', title: 'useEventCallback' },
+  { demo: 'useOnMount/basic', title: 'useOnMount' },
+]

docs/.vitepress/data/hookDemoSubtitles.ts

@@ -0,0 +1,32 @@
+/**
+ * One-line copy for the HookLiveDemo block (replaces the generic “React mounts here…” line).
+ * Keys are `useX/basic` as passed to the `demo` prop.
+ */
+export const hookDemoSubtitles: Record<string, string> = {
+  'useToggle/basic':
+    'Boolean (or set) state with a flip/toggle, optional custom setters, and a stable toggler function.',
+  'useCounter/basic': 'Increment, decrement, or set a number with optional min/max so values stay in range.',
+  'useDebounce/basic': 'Debounce a value: the output updates only after the input has settled for a chosen delay.',
+  'usePrevious/basic':
+    'Read the value from the previous render - handy for diffs, animations, and simple undo of values.',
+  'useLatest/basic':
+    'A ref that always points at the latest value, so callbacks and effects can read fresh data without re-subscribing.',
+  'useThrottle/basic': 'Throttle a value so it can change at most once per interval while the input keeps moving.',
+  'useAsyncState/basic': 'Async loadable state: loading / ready / error, optional data, and cancel for stale work.',
+  'useStorage/basic': 'Sync React state with `localStorage` (or any `Storage`) with JSON and optional `remove`.',
+  'useStorageAsync/basic':
+    'Async storage: load with `getItem` after mount, then persist with a loading flag and serializers.',
+  'useLastChanged/basic':
+    'Record when a value last changed, expose a time difference, and reset the timer when needed.',
+  'useRefHistory/basic': 'Every change becomes a history snapshot: undo, redo, clear, and cap length with capacity.',
+  'useManualRefHistory/basic':
+    'Ref-based history, but you commit snapshots explicitly for frequent or batched updates.',
+  'useDebouncedRefHistory/basic':
+    'Ref history: record a new snapshot only after the value has been still for a debounce period.',
+  'useThrottledRefHistory/basic':
+    'Ref history: record at most one snapshot per throttle window while the value changes fast.',
+  'useEventCallback/basic': 'Event handler with a stable identity that always calls the latest implementation.',
+  'useOnMount/basic': 'Run a function once on mount, optionally with a returned cleanup on unmount.',
+}
+
+export const defaultHookLiveDemoFallback = 'Live preview: React mounts here and runs the hook in your browser.'

docs/.vitepress/seo/social.ts

@@ -0,0 +1,2 @@
+/** Public X (Twitter) profile URL for meta tags and JSON-LD. */
+export const SOCIAL_X_URL = 'https://x.com/KiploksEngine' as const

docs/.vitepress/seo/transformHead.ts

@@ -1,4 +1,5 @@
 import type { HeadConfig, PageData, SiteData } from 'vitepress'
+import { SOCIAL_X_URL } from './social'
 
 const SITE = (process.env.SITE_URL || 'https://usereact.org').replace(/\/$/, '')
 const AUTHOR_NAME = 'Radiks Alijevs'
@@ -31,6 +32,7 @@ function buildJsonLd(args: { canonical: string; title: string; description: stri
       '@id': `${SITE}/#organization`,
       name: PUBLISHER_NAME,
       url: `${SITE}/`,
+      sameAs: [SOCIAL_X_URL],
       logo: {
         '@type': 'ImageObject',
         url: `${SITE}/logo.png`,