From b0066df98522a0b13a7c8bfe2f2fe2989cdbecde Mon Sep 17 00:00:00 2001 From: Julien Date: Sun, 18 Sep 2022 03:11:26 +0200 Subject: [PATCH] refactor: regrouping hooks files - move hook doc files to src - move hook demo files to src - update import statement when copying hooks - update hook imports - update plop config to match - fix tsconfig - update hook queries in website - update script files to match --- package-lock.json | 20 +++ package.json | 1 + plopfile.js | 52 +++----- scripts/copyHooks.ts | 118 +++++++++--------- scripts/updateReadme.ts | 17 +-- scripts/utils.ts | 5 + src/index.ts | 1 + .../useBoolean/useBoolean.demo.tsx | 2 +- .../content => src}/useBoolean/useBoolean.mdx | 0 .../useClickAnyWhere.demo.tsx | 2 +- .../useClickAnyWhere/useClickAnyWhere.mdx | 0 src/useClickAnyWhere/useClickAnyWhere.ts | 2 +- .../useCopyToClipboard.demo.tsx | 2 +- .../useCopyToClipboard/useCopyToClipboard.mdx | 0 .../useCountdown/useCountdown.demo.tsx | 2 +- .../useCountdown/useCountdown.mdx | 0 src/useCountdown/useCountdown.ts | 7 +- .../useCounter/useCounter.demo.tsx | 2 +- .../content => src}/useCounter/useCounter.mdx | 0 .../useDarkMode/useDarkMode.demo.tsx | 2 +- .../useDarkMode/useDarkMode.mdx | 0 src/useDarkMode/useDarkMode.ts | 7 +- .../useDebounce/useDebounce.demo.tsx | 2 +- .../useDebounce/useDebounce.mdx | 0 .../useEffectOnce/useEffectOnce.demo.tsx | 2 +- .../useEffectOnce/useEffectOnce.mdx | 0 .../useElementSize/useElementSize.demo.tsx | 2 +- .../useElementSize/useElementSize.mdx | 0 src/useElementSize/useElementSize.ts | 5 +- src/useEventCallback/useEventCallback.ts | 2 +- .../useEventListener.demo.tsx | 2 +- .../useEventListener/useEventListener.mdx | 0 src/useEventListener/useEventListener.ts | 3 +- .../useFetch/useFetch.demo.tsx | 2 +- .../src/content => src}/useFetch/useFetch.mdx | 0 .../useHover/useHover.demo.tsx | 2 +- .../src/content => src}/useHover/useHover.mdx | 0 src/useHover/useHover.ts | 3 +- .../useImageOnLoad/useImageOnLoad.demo.tsx | 2 +- .../useImageOnLoad/useImageOnLoad.mdx | 0 .../useIntersectionObserver.demo.tsx | 2 +- .../useIntersectionObserver.mdx | 0 .../useInterval/useInterval.demo.tsx | 2 +- .../useInterval/useInterval.mdx | 0 src/useInterval/useInterval.ts | 3 +- .../useIsClient/useIsClient.demo.tsx | 2 +- .../useIsClient/useIsClient.mdx | 0 .../useIsFirstRender.demo.tsx | 2 +- .../useIsFirstRender/useIsFirstRender.mdx | 0 .../useIsMounted/useIsMounted.demo.tsx | 2 +- .../useIsMounted/useIsMounted.mdx | 0 .../useIsomorphicLayoutEffect.demo.tsx | 2 +- .../useIsomorphicLayoutEffect.mdx | 0 .../useLocalStorage/useLocalStorage.demo.tsx | 2 +- .../useLocalStorage/useLocalStorage.mdx | 0 src/useLocalStorage/useLocalStorage.ts | 4 +- .../useLockedBody/useLockedBody.demo.tsx | 2 +- .../useLockedBody/useLockedBody.mdx | 0 src/useLockedBody/useLockedBody.ts | 3 +- .../content => src}/useMap/useMap.demo.tsx | 2 +- .../src/content => src}/useMap/useMap.mdx | 0 .../useMediaQuery/useMediaQuery.demo.tsx | 2 +- .../useMediaQuery/useMediaQuery.mdx | 0 .../useOnClickOutside.demo.tsx | 2 +- .../useOnClickOutside/useOnClickOutside.mdx | 0 src/useOnClickOutside/useOnClickOutside.ts | 2 +- .../useReadLocalStorage.demo.tsx | 2 +- .../useReadLocalStorage.mdx | 0 .../useReadLocalStorage.ts | 3 +- .../useScreen/useScreen.demo.tsx | 2 +- .../content => src}/useScreen/useScreen.mdx | 0 src/useScreen/useScreen.ts | 5 +- .../useScript/useScript.demo.tsx | 2 +- .../content => src}/useScript/useScript.mdx | 0 .../useSessionStorage.demo.tsx | 2 +- .../useSessionStorage/useSessionStorage.mdx | 0 src/useSessionStorage/useSessionStorage.ts | 4 +- .../content => src}/useSsr/useSsr.demo.tsx | 2 +- .../src/content => src}/useSsr/useSsr.mdx | 0 .../content => src}/useStep/useStep.demo.tsx | 2 +- .../src/content => src}/useStep/useStep.mdx | 0 .../useTernaryDarkMode.demo.tsx | 2 +- .../useTernaryDarkMode/useTernaryDarkMode.mdx | 0 src/useTernaryDarkMode/useTernaryDarkMode.ts | 7 +- .../useTimeout/useTimeout.demo.tsx | 2 +- .../content => src}/useTimeout/useTimeout.mdx | 0 src/useTimeout/useTimeout.ts | 3 +- .../useUpdateEffect/useUpdateEffect.demo.tsx | 2 +- .../useUpdateEffect/useUpdateEffect.mdx | 0 src/useUpdateEffect/useUpdateEffect.ts | 2 +- .../useWindowSize/useWindowSize.demo.tsx | 2 +- .../useWindowSize/useWindowSize.mdx | 0 src/useWindowSize/useWindowSize.ts | 5 +- .../plop/hooks/{website => hook}/demo.tsx.hbs | 2 +- .../plop/hooks/{lib => hook}/hook.test.ts.hbs | 0 .../plop/hooks/{lib => hook}/hook.ts.hbs | 0 .../plop/hooks/{lib => hook}/index.ts.hbs | 0 .../plop/hooks/{website => hook}/post.mdx.hbs | 0 templates/plop/hooks/website/index.ts.hbs | 1 - tsconfig.build.json | 3 +- tsconfig.json | 1 - website/gatsby-config.ts | 55 ++++---- website/src/content/index.ts | 34 ----- website/src/content/useBoolean/index.ts | 1 - website/src/content/useClickAnyWhere/index.ts | 1 - .../src/content/useCopyToClipboard/index.ts | 1 - website/src/content/useCountdown/index.ts | 1 - website/src/content/useCounter/index.ts | 1 - website/src/content/useDarkMode/index.ts | 1 - website/src/content/useDebounce/index.ts | 1 - website/src/content/useEffectOnce/index.ts | 1 - website/src/content/useElementSize/index.ts | 1 - website/src/content/useEventListener/index.ts | 1 - website/src/content/useFetch/index.ts | 1 - website/src/content/useHover/index.ts | 1 - website/src/content/useImageOnLoad/index.ts | 1 - .../content/useIntersectionObserver/index.ts | 1 - website/src/content/useInterval/index.ts | 1 - website/src/content/useIsClient/index.ts | 1 - website/src/content/useIsFirstRender/index.ts | 1 - website/src/content/useIsMounted/index.ts | 1 - .../useIsomorphicLayoutEffect/index.ts | 1 - website/src/content/useLocalStorage/index.ts | 1 - website/src/content/useLockedBody/index.ts | 1 - website/src/content/useMap/index.ts | 1 - website/src/content/useMediaQuery/index.ts | 1 - .../src/content/useOnClickOutside/index.ts | 1 - .../src/content/useReadLocalStorage/index.ts | 1 - website/src/content/useScreen/index.ts | 1 - website/src/content/useScript/index.ts | 1 - .../src/content/useSessionStorage/index.ts | 1 - website/src/content/useSsr/index.ts | 1 - website/src/content/useStep/index.ts | 1 - .../src/content/useTernaryDarkMode/index.ts | 1 - website/src/content/useTimeout/index.ts | 1 - website/src/content/useUpdateEffect/index.ts | 1 - website/src/content/useWindowSize/index.ts | 1 - website/src/gatsby/onCreateNode.ts | 2 +- website/src/templates/post.tsx | 52 +++----- 139 files changed, 216 insertions(+), 320 deletions(-) rename {website/src/content => src}/useBoolean/useBoolean.demo.tsx (93%) rename {website/src/content => src}/useBoolean/useBoolean.mdx (100%) rename {website/src/content => src}/useClickAnyWhere/useClickAnyWhere.demo.tsx (82%) rename {website/src/content => src}/useClickAnyWhere/useClickAnyWhere.mdx (100%) rename {website/src/content => src}/useCopyToClipboard/useCopyToClipboard.demo.tsx (90%) rename {website/src/content => src}/useCopyToClipboard/useCopyToClipboard.mdx (100%) rename {website/src/content => src}/useCountdown/useCountdown.demo.tsx (94%) rename {website/src/content => src}/useCountdown/useCountdown.mdx (100%) rename {website/src/content => src}/useCounter/useCounter.demo.tsx (92%) rename {website/src/content => src}/useCounter/useCounter.mdx (100%) rename {website/src/content => src}/useDarkMode/useDarkMode.demo.tsx (89%) rename {website/src/content => src}/useDarkMode/useDarkMode.mdx (100%) rename {website/src/content => src}/useDebounce/useDebounce.demo.tsx (93%) rename {website/src/content => src}/useDebounce/useDebounce.mdx (100%) rename {website/src/content => src}/useEffectOnce/useEffectOnce.demo.tsx (91%) rename {website/src/content => src}/useEffectOnce/useEffectOnce.mdx (100%) rename {website/src/content => src}/useElementSize/useElementSize.demo.tsx (94%) rename {website/src/content => src}/useElementSize/useElementSize.mdx (100%) rename {website/src/content => src}/useEventListener/useEventListener.demo.tsx (95%) rename {website/src/content => src}/useEventListener/useEventListener.mdx (100%) rename {website/src/content => src}/useFetch/useFetch.demo.tsx (90%) rename {website/src/content => src}/useFetch/useFetch.mdx (100%) rename {website/src/content => src}/useHover/useHover.demo.tsx (87%) rename {website/src/content => src}/useHover/useHover.mdx (100%) rename {website/src/content => src}/useImageOnLoad/useImageOnLoad.demo.tsx (95%) rename {website/src/content => src}/useImageOnLoad/useImageOnLoad.mdx (100%) rename {website/src/content => src}/useIntersectionObserver/useIntersectionObserver.demo.tsx (93%) rename {website/src/content => src}/useIntersectionObserver/useIntersectionObserver.mdx (100%) rename {website/src/content => src}/useInterval/useInterval.demo.tsx (95%) rename {website/src/content => src}/useInterval/useInterval.mdx (100%) rename {website/src/content => src}/useIsClient/useIsClient.demo.tsx (78%) rename {website/src/content => src}/useIsClient/useIsClient.mdx (100%) rename {website/src/content => src}/useIsFirstRender/useIsFirstRender.demo.tsx (90%) rename {website/src/content => src}/useIsFirstRender/useIsFirstRender.mdx (100%) rename {website/src/content => src}/useIsMounted/useIsMounted.demo.tsx (94%) rename {website/src/content => src}/useIsMounted/useIsMounted.mdx (100%) rename {website/src/content => src}/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx (81%) rename {website/src/content => src}/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx (100%) rename {website/src/content => src}/useLocalStorage/useLocalStorage.demo.tsx (88%) rename {website/src/content => src}/useLocalStorage/useLocalStorage.mdx (100%) rename {website/src/content => src}/useLockedBody/useLockedBody.demo.tsx (96%) rename {website/src/content => src}/useLockedBody/useLockedBody.mdx (100%) rename {website/src/content => src}/useMap/useMap.demo.tsx (95%) rename {website/src/content => src}/useMap/useMap.mdx (100%) rename {website/src/content => src}/useMediaQuery/useMediaQuery.demo.tsx (84%) rename {website/src/content => src}/useMediaQuery/useMediaQuery.mdx (100%) rename {website/src/content => src}/useOnClickOutside/useOnClickOutside.demo.tsx (91%) rename {website/src/content => src}/useOnClickOutside/useOnClickOutside.mdx (100%) rename {website/src/content => src}/useReadLocalStorage/useReadLocalStorage.demo.tsx (82%) rename {website/src/content => src}/useReadLocalStorage/useReadLocalStorage.mdx (100%) rename {website/src/content => src}/useScreen/useScreen.demo.tsx (87%) rename {website/src/content => src}/useScreen/useScreen.mdx (100%) rename {website/src/content => src}/useScript/useScript.demo.tsx (94%) rename {website/src/content => src}/useScript/useScript.mdx (100%) rename {website/src/content => src}/useSessionStorage/useSessionStorage.demo.tsx (88%) rename {website/src/content => src}/useSessionStorage/useSessionStorage.mdx (100%) rename {website/src/content => src}/useSsr/useSsr.demo.tsx (80%) rename {website/src/content => src}/useSsr/useSsr.mdx (100%) rename {website/src/content => src}/useStep/useStep.demo.tsx (94%) rename {website/src/content => src}/useStep/useStep.mdx (100%) rename {website/src/content => src}/useTernaryDarkMode/useTernaryDarkMode.demo.tsx (95%) rename {website/src/content => src}/useTernaryDarkMode/useTernaryDarkMode.mdx (100%) rename {website/src/content => src}/useTimeout/useTimeout.demo.tsx (89%) rename {website/src/content => src}/useTimeout/useTimeout.mdx (100%) rename {website/src/content => src}/useUpdateEffect/useUpdateEffect.demo.tsx (90%) rename {website/src/content => src}/useUpdateEffect/useUpdateEffect.mdx (100%) rename {website/src/content => src}/useWindowSize/useWindowSize.demo.tsx (85%) rename {website/src/content => src}/useWindowSize/useWindowSize.mdx (100%) rename templates/plop/hooks/{website => hook}/demo.tsx.hbs (73%) rename templates/plop/hooks/{lib => hook}/hook.test.ts.hbs (100%) rename templates/plop/hooks/{lib => hook}/hook.ts.hbs (100%) rename templates/plop/hooks/{lib => hook}/index.ts.hbs (100%) rename templates/plop/hooks/{website => hook}/post.mdx.hbs (100%) delete mode 100644 templates/plop/hooks/website/index.ts.hbs delete mode 100644 website/src/content/index.ts delete mode 100644 website/src/content/useBoolean/index.ts delete mode 100644 website/src/content/useClickAnyWhere/index.ts delete mode 100644 website/src/content/useCopyToClipboard/index.ts delete mode 100644 website/src/content/useCountdown/index.ts delete mode 100644 website/src/content/useCounter/index.ts delete mode 100644 website/src/content/useDarkMode/index.ts delete mode 100644 website/src/content/useDebounce/index.ts delete mode 100644 website/src/content/useEffectOnce/index.ts delete mode 100644 website/src/content/useElementSize/index.ts delete mode 100644 website/src/content/useEventListener/index.ts delete mode 100644 website/src/content/useFetch/index.ts delete mode 100644 website/src/content/useHover/index.ts delete mode 100644 website/src/content/useImageOnLoad/index.ts delete mode 100644 website/src/content/useIntersectionObserver/index.ts delete mode 100644 website/src/content/useInterval/index.ts delete mode 100644 website/src/content/useIsClient/index.ts delete mode 100644 website/src/content/useIsFirstRender/index.ts delete mode 100644 website/src/content/useIsMounted/index.ts delete mode 100644 website/src/content/useIsomorphicLayoutEffect/index.ts delete mode 100644 website/src/content/useLocalStorage/index.ts delete mode 100644 website/src/content/useLockedBody/index.ts delete mode 100644 website/src/content/useMap/index.ts delete mode 100644 website/src/content/useMediaQuery/index.ts delete mode 100644 website/src/content/useOnClickOutside/index.ts delete mode 100644 website/src/content/useReadLocalStorage/index.ts delete mode 100644 website/src/content/useScreen/index.ts delete mode 100644 website/src/content/useScript/index.ts delete mode 100644 website/src/content/useSessionStorage/index.ts delete mode 100644 website/src/content/useSsr/index.ts delete mode 100644 website/src/content/useStep/index.ts delete mode 100644 website/src/content/useTernaryDarkMode/index.ts delete mode 100644 website/src/content/useTimeout/index.ts delete mode 100644 website/src/content/useUpdateEffect/index.ts delete mode 100644 website/src/content/useWindowSize/index.ts diff --git a/package-lock.json b/package-lock.json index a63ff522..c8cd342c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@typescript-eslint/eslint-plugin": "^5.37.0", "@typescript-eslint/parser": "^5.37.0", "all-contributors-cli": "^6.20.0", + "date-fns": "^2.29.3", "eslint": "^8.9.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jest": "^27.0.4", @@ -4933,6 +4934,19 @@ "node": ">=12" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "dev": true, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -39096,6 +39110,12 @@ "whatwg-url": "^11.0.0" } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "dev": true + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 8ed44b30..2f868d30 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@typescript-eslint/eslint-plugin": "^5.37.0", "@typescript-eslint/parser": "^5.37.0", "all-contributors-cli": "^6.20.0", + "date-fns": "^2.29.3", "eslint": "^8.9.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jest": "^27.0.4", diff --git a/plopfile.js b/plopfile.js index ff696977..d48df30c 100644 --- a/plopfile.js +++ b/plopfile.js @@ -11,64 +11,48 @@ module.exports = function (plop) { }, ], actions: [ - /** - * usehooks-ts packages side - * - * - Create the hook index file (for quick export) - * - Create the hook file itself - * - Create the test file - * - Update the global hooks index file - */ + // Create the hook index file (for quick export) { type: 'add', path: 'src/{{camelCase name}}/index.ts', - templateFile: 'templates/plop/hooks/lib/index.ts.hbs', + templateFile: 'templates/plop/hooks/hook/index.ts.hbs', }, + + // Create the hook file itself { type: 'add', path: 'src/{{camelCase name}}/{{camelCase name}}.ts', - templateFile: 'templates/plop/hooks/lib/hook.ts.hbs', + templateFile: 'templates/plop/hooks/hook/hook.ts.hbs', }, + + // Create the test file { type: 'add', path: 'src/{{camelCase name}}/{{camelCase name}}.test.ts', - templateFile: 'templates/plop/hooks/lib/hook.test.ts.hbs', - }, - { - type: 'append', - path: 'src/index.ts', - templateFile: 'templates/plop/hooks/index.ts.hbs', + templateFile: 'templates/plop/hooks/hook/hook.test.ts.hbs', }, - /** - * frontend side - * - * - Create the hook index file (for quick export) - * - Create the markdown file to present the hook - * - Create the demo react component file - * - Update the global hooks index file - */ - { - type: 'add', - path: 'website/src/content/{{camelCase name}}/index.ts', - templateFile: 'templates/plop/hooks/website/index.ts.hbs', - }, + // Create the markdown file to present the hook (doc) { data: { date: format(new Date(), 'yyyy-MM-dd'), }, type: 'add', - path: 'website/src/content/{{camelCase name}}/{{camelCase name}}.mdx', - templateFile: 'templates/plop/hooks/website/post.mdx.hbs', + path: 'src/{{camelCase name}}/{{camelCase name}}.mdx', + templateFile: 'templates/plop/hooks/hook/post.mdx.hbs', }, + + // Create the demo react component file { type: 'add', - path: 'website/src/content/{{camelCase name}}/{{camelCase name}}.demo.tsx', - templateFile: 'templates/plop/hooks/website/demo.tsx.hbs', + path: 'src/{{camelCase name}}/{{camelCase name}}.demo.tsx', + templateFile: 'templates/plop/hooks/hook/demo.tsx.hbs', }, + + // Update the global hooks index file { type: 'append', - path: 'website/src/content/index.ts', + path: 'src/index.ts', templateFile: 'templates/plop/hooks/index.ts.hbs', }, ], diff --git a/scripts/copyHooks.ts b/scripts/copyHooks.ts index 3fac6a84..96fbc40a 100644 --- a/scripts/copyHooks.ts +++ b/scripts/copyHooks.ts @@ -4,7 +4,6 @@ import path from 'path' import { isHookFile, toQueryParams } from './utils' const hooksDir = path.resolve('./src') -const demosDir = path.resolve('./website/src/content') const outputDir = path.resolve('./website/generated') const sandboxTemplatePath = path.resolve('./templates/codesandbox') @@ -14,32 +13,37 @@ const sandboxTemplatePath = path.resolve('./templates/codesandbox') createDirIfNeeded(outputDir) createDirIfNeeded(`${outputDir}/hooks/`) -createDirIfNeeded(`${outputDir}/hookDemos/`) +createDirIfNeeded(`${outputDir}/demos/`) +createDirIfNeeded(`${outputDir}/posts/`) -// Copy hooks as markdown file +// Copy hooks as a markdown file fs.readdir(hooksDir, (err, files) => { if (err) throw err - files.forEach(file => { - if (isHookFile(file)) - copyHook({ - sourceFile: path.resolve(`${hooksDir}/${file}/${file}.ts`), - destFile: path.resolve(`${outputDir}/hooks/${file}.hook.md`), - }) - }) -}) -// Copy hooks's demo as markdown file -fs.readdir(demosDir, (err, files) => { - if (err) throw err - files.forEach(file => { - if (isHookFile(file)) { - copyHook({ - sourceFile: path.resolve(`${demosDir}/${file}/${file}.demo.tsx`), - destFile: path.resolve(`${outputDir}/hookDemos/${file}.demo.md`), - useSandbox: true, - }) - } - }) + for (const file of files) { + if (!isHookFile(file)) continue + + // Copy hook as a markdown file + copyFile({ + source: path.resolve(`${hooksDir}/${file}/${file}.ts`), + dest: path.resolve(`${outputDir}/hooks/${file}.hook.md`), + toMarkdown: true, + }) + + // Copy demo as a markdown file + copyFile({ + source: path.resolve(`${hooksDir}/${file}/${file}.demo.tsx`), + dest: path.resolve(`${outputDir}/demos/${file}.demo.md`), + toMarkdown: true, + useSandbox: true, + }) + + // Copy documentation file + copyFile({ + source: path.resolve(`${hooksDir}/${file}/${file}.mdx`), + dest: path.resolve(`${outputDir}/posts/${file}.post.mdx`), + }) + } }) //////////////////////////////////////////////////////////////////////// @@ -51,65 +55,65 @@ function getFileName(pathname: string): string { } function createDirIfNeeded(dir: string): void { - if (!fs.existsSync(path.resolve(dir))) { - fs.mkdirSync(dir) - } + if (!fs.existsSync(path.resolve(dir))) fs.mkdirSync(dir) } -function copyHook({ - sourceFile, - destFile, - useSandbox, -}: { - sourceFile: string - destFile: string +interface CopyFileProps { + source: string + dest: string useSandbox?: boolean -}) { + toMarkdown?: boolean +} + +function copyFile({ source, dest, useSandbox, toMarkdown }: CopyFileProps) { // Check source file - if (!fs.existsSync(sourceFile)) { - console.warn(`${getFileName(sourceFile)} doesn't exist`) + if (!fs.existsSync(source)) { + console.warn(`${getFileName(source)} doesn't exist`) return } // If destination file exists, remove it let existingFile = false - - if (fs.existsSync(destFile)) { - fs.unlinkSync(destFile) + if (fs.existsSync(dest)) { + fs.unlinkSync(dest) existingFile = true } // Read source then create markdown hook file - fs.readFile(sourceFile, 'utf8', (err, data) => { + fs.readFile(source, 'utf8', (err, data) => { if (err) { - console.error(`Cannot read ${sourceFile}`) + console.error(`Cannot read ${source}`) return } - const extension = sourceFile.split('.').reverse()[0] - - const writeStream = fs.createWriteStream(destFile) - - let preCode = '```' + extension - + const name = getFileName(dest) + const extension = source.split('.').reverse()[0] + const writeStream = fs.createWriteStream(dest) // TODO: Theses hooks don't work on CodeSandbox, make it work. - const excludedHook = [ - 'useFetch.demo.md', - 'useCopyToClipboard.demo.md', - ].includes(getFileName(destFile)) + const excludedHooks = ['useFetch.demo.md', 'useCopyToClipboard.demo.md'] + let preCode = '```' + extension - if (useSandbox && !excludedHook) { + // If CodeSandbox enabled, add needed parameter + if (useSandbox && !excludedHooks.includes(name)) { const templateOptions = toQueryParams({ entry: 'src/App.tsx' }) preCode += ' codesandbox=file:' + sandboxTemplatePath + templateOptions } - writeStream.write(preCode + '\r') + if (toMarkdown) { + // rename import from "from '..'" to "from 'usehooks-ts'" + const re = new RegExp("^import { (use[A-Z][a-zA-Z]*..)+ } from '..'$") + const transform = (line: string) => { + return line.replace(re, match => match.replace('..', 'usehooks-ts')) + } + data = data.split('\n').map(transform).join('\n') + + // wrap code into markdown code tags + data = preCode + '\r' + data + '```\r' + } + writeStream.write(data) - writeStream.write('```\r') writeStream.end() - console.log( - `${getFileName(destFile)} ${existingFile ? 'updated' : 'created'}`, - ) + console.log(`${name} ${existingFile ? 'updated' : 'created'}`) }) } diff --git a/scripts/updateReadme.ts b/scripts/updateReadme.ts index 10d657f5..a3ee50b1 100644 --- a/scripts/updateReadme.ts +++ b/scripts/updateReadme.ts @@ -1,20 +1,16 @@ import fs from 'fs' import path from 'path' -import { camelToKebabCase, isHookFile } from './utils' +import { camelToKebabCase, isDemoFile, isHookFile } from './utils' //////////////////////////////////////////////////////////////////////// // 1. Imperative script that updates the hook list in the README file. //////////////////////////////////////////////////////////////////////// -const demos = fs.readdirSync( - path.resolve(path.resolve('./website/src/content')), -) - const hooks = fs .readdirSync(path.resolve(path.resolve('./src'))) .filter(isHookFile) - .map(name => formatHook(name, demos)) + .map(formatHook) const markdown = createMarkdownList(hooks) @@ -34,8 +30,13 @@ interface MarkdownLine { markdownLine: string } -function formatHook(name: string, demos: string[]): MarkdownLine | null { - const hasDemo = demos.includes(name) +function formatHook(name: string): MarkdownLine | null { + // exclude hook from readme if it haven't demo + const hasDemo = + fs + .readdirSync(path.resolve(path.resolve(`./src/${name}`))) + .filter(isDemoFile).length === 1 + if (!hasDemo) { console.warn(`${name} haven't demo yet!`) return null diff --git a/scripts/utils.ts b/scripts/utils.ts index 11cc6a70..1da571de 100644 --- a/scripts/utils.ts +++ b/scripts/utils.ts @@ -3,6 +3,11 @@ export function isHookFile(filename: string): boolean { return hookRegex.test(filename) } +export function isDemoFile(filename: string): boolean { + const hookDemoRegex = new RegExp('^use[A-Z][a-zA-Z]*.demo.tsx$') + return hookDemoRegex.test(filename) +} + export function camelToKebabCase(str: string): string { return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`) } diff --git a/src/index.ts b/src/index.ts index ed4bf4df..26d25667 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,6 +7,7 @@ export * from './useDarkMode' export * from './useDebounce' export * from './useEffectOnce' export * from './useElementSize' +export * from './useEventCallback' export * from './useEventListener' export * from './useFetch' export * from './useHover' diff --git a/website/src/content/useBoolean/useBoolean.demo.tsx b/src/useBoolean/useBoolean.demo.tsx similarity index 93% rename from website/src/content/useBoolean/useBoolean.demo.tsx rename to src/useBoolean/useBoolean.demo.tsx index d18c9228..800ecd9d 100644 --- a/website/src/content/useBoolean/useBoolean.demo.tsx +++ b/src/useBoolean/useBoolean.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useBoolean } from 'usehooks-ts' +import { useBoolean } from '..' export default function Component() { const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false) diff --git a/website/src/content/useBoolean/useBoolean.mdx b/src/useBoolean/useBoolean.mdx similarity index 100% rename from website/src/content/useBoolean/useBoolean.mdx rename to src/useBoolean/useBoolean.mdx diff --git a/website/src/content/useClickAnyWhere/useClickAnyWhere.demo.tsx b/src/useClickAnyWhere/useClickAnyWhere.demo.tsx similarity index 82% rename from website/src/content/useClickAnyWhere/useClickAnyWhere.demo.tsx rename to src/useClickAnyWhere/useClickAnyWhere.demo.tsx index e6452592..657eb4ab 100644 --- a/website/src/content/useClickAnyWhere/useClickAnyWhere.demo.tsx +++ b/src/useClickAnyWhere/useClickAnyWhere.demo.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { useClickAnyWhere } from 'usehooks-ts' +import { useClickAnyWhere } from '..' export default function Component() { const [count, setCount] = useState(0) diff --git a/website/src/content/useClickAnyWhere/useClickAnyWhere.mdx b/src/useClickAnyWhere/useClickAnyWhere.mdx similarity index 100% rename from website/src/content/useClickAnyWhere/useClickAnyWhere.mdx rename to src/useClickAnyWhere/useClickAnyWhere.mdx diff --git a/src/useClickAnyWhere/useClickAnyWhere.ts b/src/useClickAnyWhere/useClickAnyWhere.ts index 27ef9c08..73dcb4bf 100644 --- a/src/useClickAnyWhere/useClickAnyWhere.ts +++ b/src/useClickAnyWhere/useClickAnyWhere.ts @@ -1,4 +1,4 @@ -import { useEventListener } from '../useEventListener' +import { useEventListener } from '..' type Handler = (event: MouseEvent) => void diff --git a/website/src/content/useCopyToClipboard/useCopyToClipboard.demo.tsx b/src/useCopyToClipboard/useCopyToClipboard.demo.tsx similarity index 90% rename from website/src/content/useCopyToClipboard/useCopyToClipboard.demo.tsx rename to src/useCopyToClipboard/useCopyToClipboard.demo.tsx index 582b44a2..38fae298 100644 --- a/website/src/content/useCopyToClipboard/useCopyToClipboard.demo.tsx +++ b/src/useCopyToClipboard/useCopyToClipboard.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useCopyToClipboard } from 'usehooks-ts' +import { useCopyToClipboard } from '..' export default function Component() { const [value, copy] = useCopyToClipboard() diff --git a/website/src/content/useCopyToClipboard/useCopyToClipboard.mdx b/src/useCopyToClipboard/useCopyToClipboard.mdx similarity index 100% rename from website/src/content/useCopyToClipboard/useCopyToClipboard.mdx rename to src/useCopyToClipboard/useCopyToClipboard.mdx diff --git a/website/src/content/useCountdown/useCountdown.demo.tsx b/src/useCountdown/useCountdown.demo.tsx similarity index 94% rename from website/src/content/useCountdown/useCountdown.demo.tsx rename to src/useCountdown/useCountdown.demo.tsx index cfdc408c..b63fa467 100644 --- a/website/src/content/useCountdown/useCountdown.demo.tsx +++ b/src/useCountdown/useCountdown.demo.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, useState } from 'react' -import { useCountdown } from 'usehooks-ts' +import { useCountdown } from '..' export default function Component() { const [intervalValue, setIntervalValue] = useState(1000) diff --git a/website/src/content/useCountdown/useCountdown.mdx b/src/useCountdown/useCountdown.mdx similarity index 100% rename from website/src/content/useCountdown/useCountdown.mdx rename to src/useCountdown/useCountdown.mdx diff --git a/src/useCountdown/useCountdown.ts b/src/useCountdown/useCountdown.ts index 0a411764..dd325100 100644 --- a/src/useCountdown/useCountdown.ts +++ b/src/useCountdown/useCountdown.ts @@ -1,12 +1,7 @@ // TODO: example and test import { useCallback } from 'react' -// See: https://usehooks-ts.com/react-hook/use-boolean -import { useBoolean } from '../useBoolean' -// See: https://usehooks-ts.com/react-hook/use-counter -import { useCounter } from '../useCounter' -// See: https://usehooks-ts.com/react-hook/use-interval -import { useInterval } from '../useInterval' +import { useBoolean, useCounter, useInterval } from '..' // Old interface IN & OUT interface UseCountdownType { diff --git a/website/src/content/useCounter/useCounter.demo.tsx b/src/useCounter/useCounter.demo.tsx similarity index 92% rename from website/src/content/useCounter/useCounter.demo.tsx rename to src/useCounter/useCounter.demo.tsx index 0e3c7397..0d259330 100644 --- a/website/src/content/useCounter/useCounter.demo.tsx +++ b/src/useCounter/useCounter.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useCounter } from 'usehooks-ts' +import { useCounter } from '..' export default function Component() { const { count, setCount, increment, decrement, reset } = useCounter(0) diff --git a/website/src/content/useCounter/useCounter.mdx b/src/useCounter/useCounter.mdx similarity index 100% rename from website/src/content/useCounter/useCounter.mdx rename to src/useCounter/useCounter.mdx diff --git a/website/src/content/useDarkMode/useDarkMode.demo.tsx b/src/useDarkMode/useDarkMode.demo.tsx similarity index 89% rename from website/src/content/useDarkMode/useDarkMode.demo.tsx rename to src/useDarkMode/useDarkMode.demo.tsx index a41edb5f..04df08c8 100644 --- a/website/src/content/useDarkMode/useDarkMode.demo.tsx +++ b/src/useDarkMode/useDarkMode.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useDarkMode } from 'usehooks-ts' +import { useDarkMode } from '..' export default function Component() { const { isDarkMode, toggle, enable, disable } = useDarkMode() diff --git a/website/src/content/useDarkMode/useDarkMode.mdx b/src/useDarkMode/useDarkMode.mdx similarity index 100% rename from website/src/content/useDarkMode/useDarkMode.mdx rename to src/useDarkMode/useDarkMode.mdx diff --git a/src/useDarkMode/useDarkMode.ts b/src/useDarkMode/useDarkMode.ts index 23050201..c964b8a1 100644 --- a/src/useDarkMode/useDarkMode.ts +++ b/src/useDarkMode/useDarkMode.ts @@ -1,9 +1,4 @@ -// See: https://usehooks-ts.com/react-hook/use-local-storage -import { useLocalStorage } from '../useLocalStorage' -// See: https://usehooks-ts.com/react-hook/use-media-query -import { useMediaQuery } from '../useMediaQuery' -// See: https://usehooks-ts.com/react-hook/use-update-effect -import { useUpdateEffect } from '../useUpdateEffect' +import { useLocalStorage, useMediaQuery, useUpdateEffect } from '..' const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)' diff --git a/website/src/content/useDebounce/useDebounce.demo.tsx b/src/useDebounce/useDebounce.demo.tsx similarity index 93% rename from website/src/content/useDebounce/useDebounce.demo.tsx rename to src/useDebounce/useDebounce.demo.tsx index 23854073..bb286d52 100644 --- a/website/src/content/useDebounce/useDebounce.demo.tsx +++ b/src/useDebounce/useDebounce.demo.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, useEffect, useState } from 'react' -import { useDebounce } from 'usehooks-ts' +import { useDebounce } from '..' export default function Component() { const [value, setValue] = useState('') diff --git a/website/src/content/useDebounce/useDebounce.mdx b/src/useDebounce/useDebounce.mdx similarity index 100% rename from website/src/content/useDebounce/useDebounce.mdx rename to src/useDebounce/useDebounce.mdx diff --git a/website/src/content/useEffectOnce/useEffectOnce.demo.tsx b/src/useEffectOnce/useEffectOnce.demo.tsx similarity index 91% rename from website/src/content/useEffectOnce/useEffectOnce.demo.tsx rename to src/useEffectOnce/useEffectOnce.demo.tsx index a1e6f2ed..8c61dade 100644 --- a/website/src/content/useEffectOnce/useEffectOnce.demo.tsx +++ b/src/useEffectOnce/useEffectOnce.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { useEffectOnce } from 'usehooks-ts' +import { useEffectOnce } from '..' export default function Component() { const [data, setData] = useState(0) diff --git a/website/src/content/useEffectOnce/useEffectOnce.mdx b/src/useEffectOnce/useEffectOnce.mdx similarity index 100% rename from website/src/content/useEffectOnce/useEffectOnce.mdx rename to src/useEffectOnce/useEffectOnce.mdx diff --git a/website/src/content/useElementSize/useElementSize.demo.tsx b/src/useElementSize/useElementSize.demo.tsx similarity index 94% rename from website/src/content/useElementSize/useElementSize.demo.tsx rename to src/useElementSize/useElementSize.demo.tsx index 5dac80da..419f4922 100644 --- a/website/src/content/useElementSize/useElementSize.demo.tsx +++ b/src/useElementSize/useElementSize.demo.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { useElementSize } from 'usehooks-ts' +import { useElementSize } from '..' export default function Component() { const [isVisible, setVisible] = useState(true) diff --git a/website/src/content/useElementSize/useElementSize.mdx b/src/useElementSize/useElementSize.mdx similarity index 100% rename from website/src/content/useElementSize/useElementSize.mdx rename to src/useElementSize/useElementSize.mdx diff --git a/src/useElementSize/useElementSize.ts b/src/useElementSize/useElementSize.ts index 17340d0f..41aa9794 100644 --- a/src/useElementSize/useElementSize.ts +++ b/src/useElementSize/useElementSize.ts @@ -1,9 +1,6 @@ import { useCallback, useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useEventListener, useIsomorphicLayoutEffect } from '..' interface Size { width: number diff --git a/src/useEventCallback/useEventCallback.ts b/src/useEventCallback/useEventCallback.ts index 107a918f..414c9ee3 100644 --- a/src/useEventCallback/useEventCallback.ts +++ b/src/useEventCallback/useEventCallback.ts @@ -1,6 +1,6 @@ import { useCallback, useRef } from 'react' -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useIsomorphicLayoutEffect } from '..' export default function useEventCallback( fn: (...args: Args) => R, diff --git a/website/src/content/useEventListener/useEventListener.demo.tsx b/src/useEventListener/useEventListener.demo.tsx similarity index 95% rename from website/src/content/useEventListener/useEventListener.demo.tsx rename to src/useEventListener/useEventListener.demo.tsx index 643e7ac7..cf8c7e80 100644 --- a/website/src/content/useEventListener/useEventListener.demo.tsx +++ b/src/useEventListener/useEventListener.demo.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react' -import { useEventListener } from 'usehooks-ts' +import { useEventListener } from '..' export default function Component() { // Define button ref diff --git a/website/src/content/useEventListener/useEventListener.mdx b/src/useEventListener/useEventListener.mdx similarity index 100% rename from website/src/content/useEventListener/useEventListener.mdx rename to src/useEventListener/useEventListener.mdx diff --git a/src/useEventListener/useEventListener.ts b/src/useEventListener/useEventListener.ts index 6a642ec2..607ba260 100644 --- a/src/useEventListener/useEventListener.ts +++ b/src/useEventListener/useEventListener.ts @@ -1,7 +1,6 @@ import { RefObject, useEffect, useRef } from 'react' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useIsomorphicLayoutEffect } from '..' // Window Event based useEventListener interface function useEventListener( diff --git a/website/src/content/useFetch/useFetch.demo.tsx b/src/useFetch/useFetch.demo.tsx similarity index 90% rename from website/src/content/useFetch/useFetch.demo.tsx rename to src/useFetch/useFetch.demo.tsx index f16306f2..62806d1f 100644 --- a/website/src/content/useFetch/useFetch.demo.tsx +++ b/src/useFetch/useFetch.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useFetch } from 'usehooks-ts' +import { useFetch } from '..' const url = `http://jsonplaceholder.typicode.com/posts` diff --git a/website/src/content/useFetch/useFetch.mdx b/src/useFetch/useFetch.mdx similarity index 100% rename from website/src/content/useFetch/useFetch.mdx rename to src/useFetch/useFetch.mdx diff --git a/website/src/content/useHover/useHover.demo.tsx b/src/useHover/useHover.demo.tsx similarity index 87% rename from website/src/content/useHover/useHover.demo.tsx rename to src/useHover/useHover.demo.tsx index d8bf7018..fb6536ae 100644 --- a/website/src/content/useHover/useHover.demo.tsx +++ b/src/useHover/useHover.demo.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react' -import { useHover } from 'usehooks-ts' +import { useHover } from '..' export default function Component() { const hoverRef = useRef(null) diff --git a/website/src/content/useHover/useHover.mdx b/src/useHover/useHover.mdx similarity index 100% rename from website/src/content/useHover/useHover.mdx rename to src/useHover/useHover.mdx diff --git a/src/useHover/useHover.ts b/src/useHover/useHover.ts index 3cccbbec..48ec2681 100644 --- a/src/useHover/useHover.ts +++ b/src/useHover/useHover.ts @@ -1,7 +1,6 @@ import { RefObject, useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' +import { useEventListener } from '..' function useHover( elementRef: RefObject, diff --git a/website/src/content/useImageOnLoad/useImageOnLoad.demo.tsx b/src/useImageOnLoad/useImageOnLoad.demo.tsx similarity index 95% rename from website/src/content/useImageOnLoad/useImageOnLoad.demo.tsx rename to src/useImageOnLoad/useImageOnLoad.demo.tsx index fb47e423..0daabbf9 100644 --- a/website/src/content/useImageOnLoad/useImageOnLoad.demo.tsx +++ b/src/useImageOnLoad/useImageOnLoad.demo.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties } from 'react' -import { useImageOnLoad } from 'usehooks-ts' +import { useImageOnLoad } from '..' export default function Component() { const { handleImageOnLoad, css } = useImageOnLoad() diff --git a/website/src/content/useImageOnLoad/useImageOnLoad.mdx b/src/useImageOnLoad/useImageOnLoad.mdx similarity index 100% rename from website/src/content/useImageOnLoad/useImageOnLoad.mdx rename to src/useImageOnLoad/useImageOnLoad.mdx diff --git a/website/src/content/useIntersectionObserver/useIntersectionObserver.demo.tsx b/src/useIntersectionObserver/useIntersectionObserver.demo.tsx similarity index 93% rename from website/src/content/useIntersectionObserver/useIntersectionObserver.demo.tsx rename to src/useIntersectionObserver/useIntersectionObserver.demo.tsx index 79692d6b..a393875d 100644 --- a/website/src/content/useIntersectionObserver/useIntersectionObserver.demo.tsx +++ b/src/useIntersectionObserver/useIntersectionObserver.demo.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react' -import { useIntersectionObserver } from 'usehooks-ts' +import { useIntersectionObserver } from '..' const Section = (props: { title: string }) => { const ref = useRef(null) diff --git a/website/src/content/useIntersectionObserver/useIntersectionObserver.mdx b/src/useIntersectionObserver/useIntersectionObserver.mdx similarity index 100% rename from website/src/content/useIntersectionObserver/useIntersectionObserver.mdx rename to src/useIntersectionObserver/useIntersectionObserver.mdx diff --git a/website/src/content/useInterval/useInterval.demo.tsx b/src/useInterval/useInterval.demo.tsx similarity index 95% rename from website/src/content/useInterval/useInterval.demo.tsx rename to src/useInterval/useInterval.demo.tsx index 2749bf71..9b0cb2bd 100644 --- a/website/src/content/useInterval/useInterval.demo.tsx +++ b/src/useInterval/useInterval.demo.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, useState } from 'react' -import { useInterval } from 'usehooks-ts' +import { useInterval } from '..' export default function Component() { // The counter diff --git a/website/src/content/useInterval/useInterval.mdx b/src/useInterval/useInterval.mdx similarity index 100% rename from website/src/content/useInterval/useInterval.mdx rename to src/useInterval/useInterval.mdx diff --git a/src/useInterval/useInterval.ts b/src/useInterval/useInterval.ts index bcf8080e..cf56e875 100644 --- a/src/useInterval/useInterval.ts +++ b/src/useInterval/useInterval.ts @@ -1,7 +1,6 @@ import { useEffect, useRef } from 'react' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useIsomorphicLayoutEffect } from '..' function useInterval(callback: () => void, delay: number | null) { const savedCallback = useRef(callback) diff --git a/website/src/content/useIsClient/useIsClient.demo.tsx b/src/useIsClient/useIsClient.demo.tsx similarity index 78% rename from website/src/content/useIsClient/useIsClient.demo.tsx rename to src/useIsClient/useIsClient.demo.tsx index 59371bcb..45527e67 100644 --- a/website/src/content/useIsClient/useIsClient.demo.tsx +++ b/src/useIsClient/useIsClient.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useIsClient } from 'usehooks-ts' +import { useIsClient } from '..' export default function Component() { const isClient = useIsClient() diff --git a/website/src/content/useIsClient/useIsClient.mdx b/src/useIsClient/useIsClient.mdx similarity index 100% rename from website/src/content/useIsClient/useIsClient.mdx rename to src/useIsClient/useIsClient.mdx diff --git a/website/src/content/useIsFirstRender/useIsFirstRender.demo.tsx b/src/useIsFirstRender/useIsFirstRender.demo.tsx similarity index 90% rename from website/src/content/useIsFirstRender/useIsFirstRender.demo.tsx rename to src/useIsFirstRender/useIsFirstRender.demo.tsx index 6223aead..864f0f7e 100644 --- a/website/src/content/useIsFirstRender/useIsFirstRender.demo.tsx +++ b/src/useIsFirstRender/useIsFirstRender.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { useIsFirstRender } from 'usehooks-ts' +import { useIsFirstRender } from '..' export default function Component() { const isFirst = useIsFirstRender() diff --git a/website/src/content/useIsFirstRender/useIsFirstRender.mdx b/src/useIsFirstRender/useIsFirstRender.mdx similarity index 100% rename from website/src/content/useIsFirstRender/useIsFirstRender.mdx rename to src/useIsFirstRender/useIsFirstRender.mdx diff --git a/website/src/content/useIsMounted/useIsMounted.demo.tsx b/src/useIsMounted/useIsMounted.demo.tsx similarity index 94% rename from website/src/content/useIsMounted/useIsMounted.demo.tsx rename to src/useIsMounted/useIsMounted.demo.tsx index bb20e2e5..0a7b8065 100644 --- a/website/src/content/useIsMounted/useIsMounted.demo.tsx +++ b/src/useIsMounted/useIsMounted.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { useIsMounted } from 'usehooks-ts' +import { useIsMounted } from '..' const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)) diff --git a/website/src/content/useIsMounted/useIsMounted.mdx b/src/useIsMounted/useIsMounted.mdx similarity index 100% rename from website/src/content/useIsMounted/useIsMounted.mdx rename to src/useIsMounted/useIsMounted.mdx diff --git a/website/src/content/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx b/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx similarity index 81% rename from website/src/content/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx rename to src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx index 42b91066..40717357 100644 --- a/website/src/content/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx +++ b/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useIsomorphicLayoutEffect } from 'usehooks-ts' +import { useIsomorphicLayoutEffect } from '..' export default function Component() { useIsomorphicLayoutEffect(() => { diff --git a/website/src/content/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx b/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx similarity index 100% rename from website/src/content/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx rename to src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx diff --git a/website/src/content/useLocalStorage/useLocalStorage.demo.tsx b/src/useLocalStorage/useLocalStorage.demo.tsx similarity index 88% rename from website/src/content/useLocalStorage/useLocalStorage.demo.tsx rename to src/useLocalStorage/useLocalStorage.demo.tsx index d1326047..7843d101 100644 --- a/website/src/content/useLocalStorage/useLocalStorage.demo.tsx +++ b/src/useLocalStorage/useLocalStorage.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useLocalStorage } from 'usehooks-ts' +import { useLocalStorage } from '..' // Usage export default function Component() { diff --git a/website/src/content/useLocalStorage/useLocalStorage.mdx b/src/useLocalStorage/useLocalStorage.mdx similarity index 100% rename from website/src/content/useLocalStorage/useLocalStorage.mdx rename to src/useLocalStorage/useLocalStorage.mdx diff --git a/src/useLocalStorage/useLocalStorage.ts b/src/useLocalStorage/useLocalStorage.ts index 54f852a6..2f9d1314 100644 --- a/src/useLocalStorage/useLocalStorage.ts +++ b/src/useLocalStorage/useLocalStorage.ts @@ -6,9 +6,7 @@ import { useState, } from 'react' -import { useEventCallback } from '../useEventCallback' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' +import { useEventCallback, useEventListener } from '..' declare global { interface WindowEventMap { diff --git a/website/src/content/useLockedBody/useLockedBody.demo.tsx b/src/useLockedBody/useLockedBody.demo.tsx similarity index 96% rename from website/src/content/useLockedBody/useLockedBody.demo.tsx rename to src/useLockedBody/useLockedBody.demo.tsx index 22c97831..e1100110 100644 --- a/website/src/content/useLockedBody/useLockedBody.demo.tsx +++ b/src/useLockedBody/useLockedBody.demo.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, useState } from 'react' -import { useLockedBody } from 'usehooks-ts' +import { useLockedBody } from '..' const fixedCenterStyle: CSSProperties = { position: 'fixed', diff --git a/website/src/content/useLockedBody/useLockedBody.mdx b/src/useLockedBody/useLockedBody.mdx similarity index 100% rename from website/src/content/useLockedBody/useLockedBody.mdx rename to src/useLockedBody/useLockedBody.mdx diff --git a/src/useLockedBody/useLockedBody.ts b/src/useLockedBody/useLockedBody.ts index 1636c083..ea9af4c8 100644 --- a/src/useLockedBody/useLockedBody.ts +++ b/src/useLockedBody/useLockedBody.ts @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useIsomorphicLayoutEffect } from '..' type ReturnType = [boolean, (locked: boolean) => void] diff --git a/website/src/content/useMap/useMap.demo.tsx b/src/useMap/useMap.demo.tsx similarity index 95% rename from website/src/content/useMap/useMap.demo.tsx rename to src/useMap/useMap.demo.tsx index 7038c2e4..b53354bb 100644 --- a/website/src/content/useMap/useMap.demo.tsx +++ b/src/useMap/useMap.demo.tsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react' -import { MapOrEntries, useMap } from 'usehooks-ts' +import { MapOrEntries, useMap } from '..' const initialValues: MapOrEntries = [['key', '🆕']] const otherValues: MapOrEntries = [ diff --git a/website/src/content/useMap/useMap.mdx b/src/useMap/useMap.mdx similarity index 100% rename from website/src/content/useMap/useMap.mdx rename to src/useMap/useMap.mdx diff --git a/website/src/content/useMediaQuery/useMediaQuery.demo.tsx b/src/useMediaQuery/useMediaQuery.demo.tsx similarity index 84% rename from website/src/content/useMediaQuery/useMediaQuery.demo.tsx rename to src/useMediaQuery/useMediaQuery.demo.tsx index a9846a2a..e35d42ee 100644 --- a/website/src/content/useMediaQuery/useMediaQuery.demo.tsx +++ b/src/useMediaQuery/useMediaQuery.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useMediaQuery } from 'usehooks-ts' +import { useMediaQuery } from '..' export default function Component() { const matches = useMediaQuery('(min-width: 768px)') diff --git a/website/src/content/useMediaQuery/useMediaQuery.mdx b/src/useMediaQuery/useMediaQuery.mdx similarity index 100% rename from website/src/content/useMediaQuery/useMediaQuery.mdx rename to src/useMediaQuery/useMediaQuery.mdx diff --git a/website/src/content/useOnClickOutside/useOnClickOutside.demo.tsx b/src/useOnClickOutside/useOnClickOutside.demo.tsx similarity index 91% rename from website/src/content/useOnClickOutside/useOnClickOutside.demo.tsx rename to src/useOnClickOutside/useOnClickOutside.demo.tsx index 5c8f60c9..6282d407 100644 --- a/website/src/content/useOnClickOutside/useOnClickOutside.demo.tsx +++ b/src/useOnClickOutside/useOnClickOutside.demo.tsx @@ -1,6 +1,6 @@ import React, { useRef } from 'react' -import { useOnClickOutside } from 'usehooks-ts' +import { useOnClickOutside } from '..' export default function Component() { const ref = useRef(null) diff --git a/website/src/content/useOnClickOutside/useOnClickOutside.mdx b/src/useOnClickOutside/useOnClickOutside.mdx similarity index 100% rename from website/src/content/useOnClickOutside/useOnClickOutside.mdx rename to src/useOnClickOutside/useOnClickOutside.mdx diff --git a/src/useOnClickOutside/useOnClickOutside.ts b/src/useOnClickOutside/useOnClickOutside.ts index 2bfbcdec..88f33c98 100644 --- a/src/useOnClickOutside/useOnClickOutside.ts +++ b/src/useOnClickOutside/useOnClickOutside.ts @@ -1,6 +1,6 @@ import { RefObject } from 'react' -import { useEventListener } from '../useEventListener' +import { useEventListener } from '..' type Handler = (event: MouseEvent) => void diff --git a/website/src/content/useReadLocalStorage/useReadLocalStorage.demo.tsx b/src/useReadLocalStorage/useReadLocalStorage.demo.tsx similarity index 82% rename from website/src/content/useReadLocalStorage/useReadLocalStorage.demo.tsx rename to src/useReadLocalStorage/useReadLocalStorage.demo.tsx index f842eebb..f23e6453 100644 --- a/website/src/content/useReadLocalStorage/useReadLocalStorage.demo.tsx +++ b/src/useReadLocalStorage/useReadLocalStorage.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useReadLocalStorage } from 'usehooks-ts' +import { useReadLocalStorage } from '..' export default function Component() { // Assuming a value was set in localStorage with this key diff --git a/website/src/content/useReadLocalStorage/useReadLocalStorage.mdx b/src/useReadLocalStorage/useReadLocalStorage.mdx similarity index 100% rename from website/src/content/useReadLocalStorage/useReadLocalStorage.mdx rename to src/useReadLocalStorage/useReadLocalStorage.mdx diff --git a/src/useReadLocalStorage/useReadLocalStorage.ts b/src/useReadLocalStorage/useReadLocalStorage.ts index 1d2eec24..449a6b07 100644 --- a/src/useReadLocalStorage/useReadLocalStorage.ts +++ b/src/useReadLocalStorage/useReadLocalStorage.ts @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' +import { useEventListener } from '..' type Value = T | null diff --git a/website/src/content/useScreen/useScreen.demo.tsx b/src/useScreen/useScreen.demo.tsx similarity index 87% rename from website/src/content/useScreen/useScreen.demo.tsx rename to src/useScreen/useScreen.demo.tsx index 86cfcad9..af0a7a58 100644 --- a/website/src/content/useScreen/useScreen.demo.tsx +++ b/src/useScreen/useScreen.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useScreen } from 'usehooks-ts' +import { useScreen } from '..' export default function Component() { const screen = useScreen() diff --git a/website/src/content/useScreen/useScreen.mdx b/src/useScreen/useScreen.mdx similarity index 100% rename from website/src/content/useScreen/useScreen.mdx rename to src/useScreen/useScreen.mdx diff --git a/src/useScreen/useScreen.ts b/src/useScreen/useScreen.ts index 165abf8f..19b92d53 100644 --- a/src/useScreen/useScreen.ts +++ b/src/useScreen/useScreen.ts @@ -1,9 +1,6 @@ import { useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useEventListener, useIsomorphicLayoutEffect } from '..' function useScreen() { const getScreen = () => { diff --git a/website/src/content/useScript/useScript.demo.tsx b/src/useScript/useScript.demo.tsx similarity index 94% rename from website/src/content/useScript/useScript.demo.tsx rename to src/useScript/useScript.demo.tsx index d0c652b6..fe1fd6d6 100644 --- a/website/src/content/useScript/useScript.demo.tsx +++ b/src/useScript/useScript.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react' -import { useScript } from 'usehooks-ts' +import { useScript } from '..' // it's an example, use your types instead // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/website/src/content/useScript/useScript.mdx b/src/useScript/useScript.mdx similarity index 100% rename from website/src/content/useScript/useScript.mdx rename to src/useScript/useScript.mdx diff --git a/website/src/content/useSessionStorage/useSessionStorage.demo.tsx b/src/useSessionStorage/useSessionStorage.demo.tsx similarity index 88% rename from website/src/content/useSessionStorage/useSessionStorage.demo.tsx rename to src/useSessionStorage/useSessionStorage.demo.tsx index ec5fa325..3af33f28 100644 --- a/website/src/content/useSessionStorage/useSessionStorage.demo.tsx +++ b/src/useSessionStorage/useSessionStorage.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useSessionStorage } from 'usehooks-ts' +import { useSessionStorage } from '..' export default function Component() { const [value, setValue] = useSessionStorage('test-key', 0) diff --git a/website/src/content/useSessionStorage/useSessionStorage.mdx b/src/useSessionStorage/useSessionStorage.mdx similarity index 100% rename from website/src/content/useSessionStorage/useSessionStorage.mdx rename to src/useSessionStorage/useSessionStorage.mdx diff --git a/src/useSessionStorage/useSessionStorage.ts b/src/useSessionStorage/useSessionStorage.ts index a7ec42cc..914b276e 100644 --- a/src/useSessionStorage/useSessionStorage.ts +++ b/src/useSessionStorage/useSessionStorage.ts @@ -6,9 +6,7 @@ import { useState, } from 'react' -import { useEventCallback } from '../useEventCallback' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' +import { useEventCallback, useEventListener } from '..' declare global { interface WindowEventMap { diff --git a/website/src/content/useSsr/useSsr.demo.tsx b/src/useSsr/useSsr.demo.tsx similarity index 80% rename from website/src/content/useSsr/useSsr.demo.tsx rename to src/useSsr/useSsr.demo.tsx index 5d4e404d..26fa3f12 100644 --- a/website/src/content/useSsr/useSsr.demo.tsx +++ b/src/useSsr/useSsr.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useSsr } from 'usehooks-ts' +import { useSsr } from '..' export default function Component() { const { isBrowser } = useSsr() diff --git a/website/src/content/useSsr/useSsr.mdx b/src/useSsr/useSsr.mdx similarity index 100% rename from website/src/content/useSsr/useSsr.mdx rename to src/useSsr/useSsr.mdx diff --git a/website/src/content/useStep/useStep.demo.tsx b/src/useStep/useStep.demo.tsx similarity index 94% rename from website/src/content/useStep/useStep.demo.tsx rename to src/useStep/useStep.demo.tsx index 5f4828ed..501b0d88 100644 --- a/website/src/content/useStep/useStep.demo.tsx +++ b/src/useStep/useStep.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useStep } from 'usehooks-ts' +import { useStep } from '..' export default function Component() { const [currentStep, helpers] = useStep(5) diff --git a/website/src/content/useStep/useStep.mdx b/src/useStep/useStep.mdx similarity index 100% rename from website/src/content/useStep/useStep.mdx rename to src/useStep/useStep.mdx diff --git a/website/src/content/useTernaryDarkMode/useTernaryDarkMode.demo.tsx b/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx similarity index 95% rename from website/src/content/useTernaryDarkMode/useTernaryDarkMode.demo.tsx rename to src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx index 8c6b5b6d..bf592db7 100644 --- a/website/src/content/useTernaryDarkMode/useTernaryDarkMode.demo.tsx +++ b/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useTernaryDarkMode } from 'usehooks-ts' +import { useTernaryDarkMode } from '..' export default function Component() { const { diff --git a/website/src/content/useTernaryDarkMode/useTernaryDarkMode.mdx b/src/useTernaryDarkMode/useTernaryDarkMode.mdx similarity index 100% rename from website/src/content/useTernaryDarkMode/useTernaryDarkMode.mdx rename to src/useTernaryDarkMode/useTernaryDarkMode.mdx diff --git a/src/useTernaryDarkMode/useTernaryDarkMode.ts b/src/useTernaryDarkMode/useTernaryDarkMode.ts index 0e50d451..7136d510 100644 --- a/src/useTernaryDarkMode/useTernaryDarkMode.ts +++ b/src/useTernaryDarkMode/useTernaryDarkMode.ts @@ -1,11 +1,6 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-local-storage -import { useLocalStorage } from '../useLocalStorage' -// See: https://usehooks-ts.com/react-hook/use-media-query -import { useMediaQuery } from '../useMediaQuery' -// See: https://usehooks-ts.com/react-hook/use-media-query -import { useUpdateEffect } from '../useUpdateEffect' +import { useLocalStorage, useMediaQuery, useUpdateEffect } from '..' const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)' diff --git a/website/src/content/useTimeout/useTimeout.demo.tsx b/src/useTimeout/useTimeout.demo.tsx similarity index 89% rename from website/src/content/useTimeout/useTimeout.demo.tsx rename to src/useTimeout/useTimeout.demo.tsx index c9c0d72d..97da638e 100644 --- a/website/src/content/useTimeout/useTimeout.demo.tsx +++ b/src/useTimeout/useTimeout.demo.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { useTimeout } from 'usehooks-ts' +import { useTimeout } from '..' export default function Component() { const [visible, setVisible] = useState(true) diff --git a/website/src/content/useTimeout/useTimeout.mdx b/src/useTimeout/useTimeout.mdx similarity index 100% rename from website/src/content/useTimeout/useTimeout.mdx rename to src/useTimeout/useTimeout.mdx diff --git a/src/useTimeout/useTimeout.ts b/src/useTimeout/useTimeout.ts index abf71ae7..1905df15 100644 --- a/src/useTimeout/useTimeout.ts +++ b/src/useTimeout/useTimeout.ts @@ -1,7 +1,6 @@ import { useEffect, useRef } from 'react' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useIsomorphicLayoutEffect } from '..' function useTimeout(callback: () => void, delay: number | null) { const savedCallback = useRef(callback) diff --git a/website/src/content/useUpdateEffect/useUpdateEffect.demo.tsx b/src/useUpdateEffect/useUpdateEffect.demo.tsx similarity index 90% rename from website/src/content/useUpdateEffect/useUpdateEffect.demo.tsx rename to src/useUpdateEffect/useUpdateEffect.demo.tsx index 0114fd97..794aff81 100644 --- a/website/src/content/useUpdateEffect/useUpdateEffect.demo.tsx +++ b/src/useUpdateEffect/useUpdateEffect.demo.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { useUpdateEffect } from 'usehooks-ts' +import { useUpdateEffect } from '..' export default function Component() { const [data, setData] = useState(0) diff --git a/website/src/content/useUpdateEffect/useUpdateEffect.mdx b/src/useUpdateEffect/useUpdateEffect.mdx similarity index 100% rename from website/src/content/useUpdateEffect/useUpdateEffect.mdx rename to src/useUpdateEffect/useUpdateEffect.mdx diff --git a/src/useUpdateEffect/useUpdateEffect.ts b/src/useUpdateEffect/useUpdateEffect.ts index b7e7bf0a..0db6e0f2 100644 --- a/src/useUpdateEffect/useUpdateEffect.ts +++ b/src/useUpdateEffect/useUpdateEffect.ts @@ -1,6 +1,6 @@ import { DependencyList, EffectCallback, useEffect } from 'react' -import { useIsFirstRender } from '../useIsFirstRender' +import { useIsFirstRender } from '..' function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) { const isFirst = useIsFirstRender() diff --git a/website/src/content/useWindowSize/useWindowSize.demo.tsx b/src/useWindowSize/useWindowSize.demo.tsx similarity index 85% rename from website/src/content/useWindowSize/useWindowSize.demo.tsx rename to src/useWindowSize/useWindowSize.demo.tsx index 2ae1e4da..33a6f64f 100644 --- a/website/src/content/useWindowSize/useWindowSize.demo.tsx +++ b/src/useWindowSize/useWindowSize.demo.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useWindowSize } from 'usehooks-ts' +import { useWindowSize } from '..' export default function Component() { const { width, height } = useWindowSize() diff --git a/website/src/content/useWindowSize/useWindowSize.mdx b/src/useWindowSize/useWindowSize.mdx similarity index 100% rename from website/src/content/useWindowSize/useWindowSize.mdx rename to src/useWindowSize/useWindowSize.mdx diff --git a/src/useWindowSize/useWindowSize.ts b/src/useWindowSize/useWindowSize.ts index 73cf278e..7b0258af 100644 --- a/src/useWindowSize/useWindowSize.ts +++ b/src/useWindowSize/useWindowSize.ts @@ -1,9 +1,6 @@ import { useState } from 'react' -// See: https://usehooks-ts.com/react-hook/use-event-listener -import { useEventListener } from '../useEventListener' -// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect -import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' +import { useEventListener, useIsomorphicLayoutEffect } from '..' interface WindowSize { width: number diff --git a/templates/plop/hooks/website/demo.tsx.hbs b/templates/plop/hooks/hook/demo.tsx.hbs similarity index 73% rename from templates/plop/hooks/website/demo.tsx.hbs rename to templates/plop/hooks/hook/demo.tsx.hbs index 1a753c90..800f342f 100644 --- a/templates/plop/hooks/website/demo.tsx.hbs +++ b/templates/plop/hooks/hook/demo.tsx.hbs @@ -1,6 +1,6 @@ import React from 'react' -import { {{camelCase name}} } from 'usehooks-ts' +import { {{camelCase name}} } from './index' export default function Component() { const [two] = {{camelCase name}}() diff --git a/templates/plop/hooks/lib/hook.test.ts.hbs b/templates/plop/hooks/hook/hook.test.ts.hbs similarity index 100% rename from templates/plop/hooks/lib/hook.test.ts.hbs rename to templates/plop/hooks/hook/hook.test.ts.hbs diff --git a/templates/plop/hooks/lib/hook.ts.hbs b/templates/plop/hooks/hook/hook.ts.hbs similarity index 100% rename from templates/plop/hooks/lib/hook.ts.hbs rename to templates/plop/hooks/hook/hook.ts.hbs diff --git a/templates/plop/hooks/lib/index.ts.hbs b/templates/plop/hooks/hook/index.ts.hbs similarity index 100% rename from templates/plop/hooks/lib/index.ts.hbs rename to templates/plop/hooks/hook/index.ts.hbs diff --git a/templates/plop/hooks/website/post.mdx.hbs b/templates/plop/hooks/hook/post.mdx.hbs similarity index 100% rename from templates/plop/hooks/website/post.mdx.hbs rename to templates/plop/hooks/hook/post.mdx.hbs diff --git a/templates/plop/hooks/website/index.ts.hbs b/templates/plop/hooks/website/index.ts.hbs deleted file mode 100644 index 4e8abd43..00000000 --- a/templates/plop/hooks/website/index.ts.hbs +++ /dev/null @@ -1 +0,0 @@ -export * from './{{camelCase name}}.demo' \ No newline at end of file diff --git a/tsconfig.build.json b/tsconfig.build.json index aea3f990..e766c400 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -5,10 +5,11 @@ "rootDir": "./src", "target": "esnext", "moduleResolution": "node", + "isolatedModules": true, // Needed for CommonJS modules "allowSyntheticDefaultImports": true }, "include": ["./src/**/*"], - "exclude": ["./src/**/*.test.ts"] + "exclude": ["./src/**/*.test.ts", "./src/**/*.mdx", "./src/**/*.demo.tsx"] } diff --git a/tsconfig.json b/tsconfig.json index ba592854..8d1e1c29 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,6 @@ "esModuleInterop": true, "jsx": "react", "strict": true, - "isolatedModules": true, "lib": ["ESNEXT", "DOM"] }, diff --git a/website/gatsby-config.ts b/website/gatsby-config.ts index d7a8152a..0bbb9abe 100644 --- a/website/gatsby-config.ts +++ b/website/gatsby-config.ts @@ -2,8 +2,8 @@ import dotenv from 'dotenv' import type { GatsbyConfig } from 'gatsby' import path from 'path' -import * as algolia from './src/libs/algolia' -import * as feed from './src/libs/feedSerializer' +// import * as algolia from './src/libs/algolia' +// import * as feed from './src/libs/feedSerializer' dotenv.config({ path: `.env.${process.env.NODE_ENV}` }) @@ -44,40 +44,47 @@ const config: GatsbyConfig = { { resolve: `gatsby-source-filesystem`, options: { - path: `${__dirname}/generated`, - name: `generated`, + path: `${__dirname}/generated/posts`, + name: `posts`, }, }, { resolve: `gatsby-source-filesystem`, options: { - path: `${__dirname}/src/content`, + path: `${__dirname}/generated/hooks`, name: `hooks`, }, }, { - resolve: `gatsby-plugin-algolia`, - options: { - appId: process.env.GATSBY_ALGOLIA_APP_ID, - apiKey: process.env.GATSBY_ALGOLIA_ADMIN_KEY, - queries: algolia.queries, - }, - }, - { - resolve: `gatsby-plugin-feed`, + resolve: `gatsby-source-filesystem`, options: { - feeds: [ - { - query: `${feed.query}`, - output: '/rss.xml', - title: `RSS Feed - ${siteMetadata.title}`, - description: `${siteMetadata.description}`, - serialize: ({ query }: feed.SerializeProps) => - feed.serializer({ query, siteMetadata }), - }, - ], + path: `${__dirname}/generated/demos`, + name: `demos`, }, }, + // { + // resolve: `gatsby-plugin-algolia`, + // options: { + // appId: process.env.GATSBY_ALGOLIA_APP_ID, + // apiKey: process.env.GATSBY_ALGOLIA_ADMIN_KEY, + // queries: algolia.queries, + // }, + // }, + // { + // resolve: `gatsby-plugin-feed`, + // options: { + // feeds: [ + // { + // query: `${feed.query}`, + // output: '/rss.xml', + // title: `RSS Feed - ${siteMetadata.title}`, + // description: `${siteMetadata.description}`, + // serialize: ({ query }: feed.SerializeProps) => + // feed.serializer({ query, siteMetadata }), + // }, + // ], + // }, + // }, { resolve: `gatsby-plugin-google-analytics`, options: { diff --git a/website/src/content/index.ts b/website/src/content/index.ts deleted file mode 100644 index ed4bf4df..00000000 --- a/website/src/content/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -export * from './useBoolean' -export * from './useClickAnyWhere' -export * from './useCopyToClipboard' -export * from './useCountdown' -export * from './useCounter' -export * from './useDarkMode' -export * from './useDebounce' -export * from './useEffectOnce' -export * from './useElementSize' -export * from './useEventListener' -export * from './useFetch' -export * from './useHover' -export * from './useImageOnLoad' -export * from './useIntersectionObserver' -export * from './useInterval' -export * from './useIsClient' -export * from './useIsFirstRender' -export * from './useIsMounted' -export * from './useIsomorphicLayoutEffect' -export * from './useLocalStorage' -export * from './useLockedBody' -export * from './useMap' -export * from './useMediaQuery' -export * from './useOnClickOutside' -export * from './useReadLocalStorage' -export * from './useScreen' -export * from './useScript' -export * from './useSessionStorage' -export * from './useSsr' -export * from './useStep' -export * from './useTernaryDarkMode' -export * from './useTimeout' -export * from './useUpdateEffect' -export * from './useWindowSize' diff --git a/website/src/content/useBoolean/index.ts b/website/src/content/useBoolean/index.ts deleted file mode 100644 index e68de8cc..00000000 --- a/website/src/content/useBoolean/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useBoolean.demo' diff --git a/website/src/content/useClickAnyWhere/index.ts b/website/src/content/useClickAnyWhere/index.ts deleted file mode 100644 index dfbfd380..00000000 --- a/website/src/content/useClickAnyWhere/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useClickAnyWhere.demo' diff --git a/website/src/content/useCopyToClipboard/index.ts b/website/src/content/useCopyToClipboard/index.ts deleted file mode 100644 index 3e5431ca..00000000 --- a/website/src/content/useCopyToClipboard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useCopyToClipboard.demo' diff --git a/website/src/content/useCountdown/index.ts b/website/src/content/useCountdown/index.ts deleted file mode 100644 index b51610dc..00000000 --- a/website/src/content/useCountdown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useCountdown.demo' diff --git a/website/src/content/useCounter/index.ts b/website/src/content/useCounter/index.ts deleted file mode 100644 index f06c8a1d..00000000 --- a/website/src/content/useCounter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useCounter.demo' diff --git a/website/src/content/useDarkMode/index.ts b/website/src/content/useDarkMode/index.ts deleted file mode 100644 index d54018fe..00000000 --- a/website/src/content/useDarkMode/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useDarkMode.demo' diff --git a/website/src/content/useDebounce/index.ts b/website/src/content/useDebounce/index.ts deleted file mode 100644 index cf9c2698..00000000 --- a/website/src/content/useDebounce/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useDebounce.demo' diff --git a/website/src/content/useEffectOnce/index.ts b/website/src/content/useEffectOnce/index.ts deleted file mode 100644 index 0d572bf9..00000000 --- a/website/src/content/useEffectOnce/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useEffectOnce.demo' diff --git a/website/src/content/useElementSize/index.ts b/website/src/content/useElementSize/index.ts deleted file mode 100644 index 35915dda..00000000 --- a/website/src/content/useElementSize/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useElementSize.demo' diff --git a/website/src/content/useEventListener/index.ts b/website/src/content/useEventListener/index.ts deleted file mode 100644 index 7f32fbda..00000000 --- a/website/src/content/useEventListener/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useEventListener.demo' diff --git a/website/src/content/useFetch/index.ts b/website/src/content/useFetch/index.ts deleted file mode 100644 index 6e56c3ed..00000000 --- a/website/src/content/useFetch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useFetch.demo' diff --git a/website/src/content/useHover/index.ts b/website/src/content/useHover/index.ts deleted file mode 100644 index 27dec47f..00000000 --- a/website/src/content/useHover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useHover.demo' diff --git a/website/src/content/useImageOnLoad/index.ts b/website/src/content/useImageOnLoad/index.ts deleted file mode 100644 index 36dc3fdc..00000000 --- a/website/src/content/useImageOnLoad/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useImageOnLoad.demo' diff --git a/website/src/content/useIntersectionObserver/index.ts b/website/src/content/useIntersectionObserver/index.ts deleted file mode 100644 index d5fe7ebf..00000000 --- a/website/src/content/useIntersectionObserver/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useIntersectionObserver.demo' diff --git a/website/src/content/useInterval/index.ts b/website/src/content/useInterval/index.ts deleted file mode 100644 index 592fdb1f..00000000 --- a/website/src/content/useInterval/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useInterval.demo' diff --git a/website/src/content/useIsClient/index.ts b/website/src/content/useIsClient/index.ts deleted file mode 100644 index 64a8b9ff..00000000 --- a/website/src/content/useIsClient/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useIsClient.demo' diff --git a/website/src/content/useIsFirstRender/index.ts b/website/src/content/useIsFirstRender/index.ts deleted file mode 100644 index 7a09ad0b..00000000 --- a/website/src/content/useIsFirstRender/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useIsFirstRender.demo' diff --git a/website/src/content/useIsMounted/index.ts b/website/src/content/useIsMounted/index.ts deleted file mode 100644 index 6102cada..00000000 --- a/website/src/content/useIsMounted/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useIsMounted.demo' diff --git a/website/src/content/useIsomorphicLayoutEffect/index.ts b/website/src/content/useIsomorphicLayoutEffect/index.ts deleted file mode 100644 index c5aa8814..00000000 --- a/website/src/content/useIsomorphicLayoutEffect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useIsomorphicLayoutEffect.demo' diff --git a/website/src/content/useLocalStorage/index.ts b/website/src/content/useLocalStorage/index.ts deleted file mode 100644 index 06b2bf1b..00000000 --- a/website/src/content/useLocalStorage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useLocalStorage.demo' diff --git a/website/src/content/useLockedBody/index.ts b/website/src/content/useLockedBody/index.ts deleted file mode 100644 index 7abfca75..00000000 --- a/website/src/content/useLockedBody/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useLockedBody.demo' diff --git a/website/src/content/useMap/index.ts b/website/src/content/useMap/index.ts deleted file mode 100644 index 2214c6fa..00000000 --- a/website/src/content/useMap/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useMap.demo' diff --git a/website/src/content/useMediaQuery/index.ts b/website/src/content/useMediaQuery/index.ts deleted file mode 100644 index 12be6316..00000000 --- a/website/src/content/useMediaQuery/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useMediaQuery.demo' diff --git a/website/src/content/useOnClickOutside/index.ts b/website/src/content/useOnClickOutside/index.ts deleted file mode 100644 index 93e47df3..00000000 --- a/website/src/content/useOnClickOutside/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useOnClickOutside.demo' diff --git a/website/src/content/useReadLocalStorage/index.ts b/website/src/content/useReadLocalStorage/index.ts deleted file mode 100644 index 6169a6a8..00000000 --- a/website/src/content/useReadLocalStorage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useReadLocalStorage.demo' diff --git a/website/src/content/useScreen/index.ts b/website/src/content/useScreen/index.ts deleted file mode 100644 index 257d995b..00000000 --- a/website/src/content/useScreen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useScreen.demo' diff --git a/website/src/content/useScript/index.ts b/website/src/content/useScript/index.ts deleted file mode 100644 index 1068c93a..00000000 --- a/website/src/content/useScript/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useScript.demo' diff --git a/website/src/content/useSessionStorage/index.ts b/website/src/content/useSessionStorage/index.ts deleted file mode 100644 index 829ae241..00000000 --- a/website/src/content/useSessionStorage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useSessionStorage.demo' diff --git a/website/src/content/useSsr/index.ts b/website/src/content/useSsr/index.ts deleted file mode 100644 index 9757b3ab..00000000 --- a/website/src/content/useSsr/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useSsr.demo' diff --git a/website/src/content/useStep/index.ts b/website/src/content/useStep/index.ts deleted file mode 100644 index 123fe29e..00000000 --- a/website/src/content/useStep/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useStep.demo' diff --git a/website/src/content/useTernaryDarkMode/index.ts b/website/src/content/useTernaryDarkMode/index.ts deleted file mode 100644 index 10933c3d..00000000 --- a/website/src/content/useTernaryDarkMode/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useTernaryDarkMode.demo' diff --git a/website/src/content/useTimeout/index.ts b/website/src/content/useTimeout/index.ts deleted file mode 100644 index d57d4fd5..00000000 --- a/website/src/content/useTimeout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useTimeout.demo' diff --git a/website/src/content/useUpdateEffect/index.ts b/website/src/content/useUpdateEffect/index.ts deleted file mode 100644 index ff9d2ba2..00000000 --- a/website/src/content/useUpdateEffect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useUpdateEffect.demo' diff --git a/website/src/content/useWindowSize/index.ts b/website/src/content/useWindowSize/index.ts deleted file mode 100644 index 65f1e0df..00000000 --- a/website/src/content/useWindowSize/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useWindowSize.demo' diff --git a/website/src/gatsby/onCreateNode.ts b/website/src/gatsby/onCreateNode.ts index fbf6cb42..f2679a8e 100644 --- a/website/src/gatsby/onCreateNode.ts +++ b/website/src/gatsby/onCreateNode.ts @@ -8,7 +8,7 @@ export const onCreateNode: GatsbyNode['onCreateNode'] = args => { const isHookRegex = new RegExp('^use[A-Z][a-zA-Z]*$') const file = absolutePath.split('/').reverse()[0].split('.') const filename = file[0] - const type = file.length === 3 ? file[1] : 'post' + const type = file.length === 3 ? file[1] : undefined if (isHookRegex.test(filename)) { actions.createNodeField({ diff --git a/website/src/templates/post.tsx b/website/src/templates/post.tsx index 2d579cee..0f5b52e8 100644 --- a/website/src/templates/post.tsx +++ b/website/src/templates/post.tsx @@ -1,4 +1,4 @@ -import React, { Suspense } from 'react' +import React, { FC } from 'react' import Box from '@mui/material/Box' import Container from '@mui/material/Container' @@ -56,14 +56,22 @@ export const Head = ({ data }: PostTemplateProps) => ( /> ) +const Subtitle: FC = ({ children }) => ( + + {children} + +) + function PostTemplate(props: PostTemplateProps) { const { post, hook, demo } = props.data const { body, frontmatter } = post const repoUrl = 'https://github.com/juliencrn/usehooks-ts' const editLink = `${repoUrl}/tree/master/src/${post.fields.name}` - const DemoComponent = React.lazy( - () => import(`~/content/${frontmatter.title}/${frontmatter.title}.demo`), - ) return ( @@ -78,50 +86,18 @@ function PostTemplate(props: PostTemplateProps) { {hook && ( <> - - The Hook - + The Hook )} {demo && ( <> - - Usage - + Usage )} - {/* Here the dev can play with an interactive version of the hook */} - {/* This section is hidden in production */} - {process.env.NODE_ENV !== 'production' && demo && ( - <> - - Interactive demo (only visible on dev mode) - - Loading...}> - - - - )} - See a way to make this page better?