chore: use prettier to format code (#82)

* chore: introduce prettier

* chore: use husky to run pre-commit format

* ci: add format

* chore: ignore missing lib

* format should ignore copied files

* reset workflow

Co-authored-by: csr632 <[email protected]>

Author: cijiugechu

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm format

.prettierignore

@@ -0,0 +1,12 @@
+packages/**/node_modules
+packages/**/dist
+packages/**/lib
+packages/playground-temp
+
+packages/react-pages/src/client/jotai/index.js
+packages/react-pages/src/client/jotai/utils.js
+
+doc-site/dist
+doc-site/node_modules
+
+playground-report

doc-site/pages/_theme.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { createTheme, defaultSideNavs } from 'vite-pages-theme-doc'
 
-import Component404 from "./404";
+import Component404 from './404'
 
 export default createTheme({
   topNavs: [

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
+    "format": "prettier --write ./**/*.{js,ts,tsx}",
     "ver": "pnpm recursive --filter create-vite-pages --filter vite-plugin-react-pages --filter vite-pages-theme-basic --filter vite-pages-theme-doc exec -- npm version",
     "ver:p": "npm run ver -- patch",
     "ver:mi": "npm run ver -- minor",
@@ -19,7 +20,8 @@
     "test-debug": "pnpm test -- --debug",
     "build:docs": "pnpm --filter doc-site run ssr-for-deploy",
     "postinstall": "node ./scripts/linkBins.js",
-    "install-test-deps": "playwright install --with-deps chromium"
+    "install-test-deps": "playwright install --with-deps chromium",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@playwright/test": "~1.23.4",
@@ -30,6 +32,8 @@
     "cross-env": "^7.0.3",
     "execa": "^5.1.1",
     "get-port": "^5.1.1",
+    "husky": "^8.0.1",
+    "prettier": "^2.7.1",
     "sirv": "^2.0.2",
     "slash": "^3.0.0",
     "typescript": "^4.7.4",

packages/playground/custom-find-pages/vite.config.ts

@@ -28,8 +28,7 @@ module.exports = {
               runtimeDataPaths[demoPath] = absolute
               const staticData = api.getStaticData(pageId)
               staticData[demoPath] = await helpers.extractStaticData(file)
-              if (!staticData.title)
-                staticData.title = `${componentName} Title`
+              if (!staticData.title) staticData.title = `${componentName} Title`
             }
           )
 

packages/playground/custom-find-pages2/pages/sub-path/index.tsx

@@ -3,15 +3,14 @@
  * @sort 2
  */
 
- import React from 'react'
+import React from 'react'
 
- const Page = () => {
-   return (
-     <div>
-       <h1>sub-path</h1>
-     </div>
-   )
- }
- 
- export default Page
- 
+const Page = () => {
+  return (
+    <div>
+      <h1>sub-path</h1>
+    </div>
+  )
+}
+
+export default Page

packages/playground/lib-monorepo/packages/demos/vite.demos.ts

@@ -28,8 +28,7 @@ module.exports = {
               runtimeDataPaths[demoPath] = absolute
               const staticData = api.getStaticData(pageId)
               staticData[demoPath] = await helpers.extractStaticData(file)
-              if (!staticData.title)
-                staticData.title = `${componentName} Title`
+              if (!staticData.title) staticData.title = `${componentName} Title`
             }
           )
 

packages/react-pages/client.ts

@@ -10,7 +10,9 @@ import type { UseStaticData } from './clientTypes'
 
 // access globalThis['__vite_pages_use_static_data'] lazily
 export const useStaticData: UseStaticData = (...params: any[]) => {
-  const actualUseStaticData = (globalThis as any)['__vite_pages_use_static_data']
+  const actualUseStaticData = (globalThis as any)[
+    '__vite_pages_use_static_data'
+  ]
   return actualUseStaticData(...params)
 }
 

packages/react-pages/src/client/PageLoader.tsx

@@ -12,12 +12,7 @@ const PageLoader = React.memo(({ routePath }: Props) => {
   const loadState = useAppState(routePath)
   const dataCache = useContext(dataCacheCtx)
 
-  return (
-    <Theme
-      loadState={loadState}
-      loadedData={dataCache}
-    />
-  )
+  return <Theme loadState={loadState} loadedData={dataCache} />
 })
 
 export default PageLoader

packages/react-pages/src/node/utils/virtual-module/utils/File.ts

@@ -1,20 +1,20 @@
-import fs from 'fs-extra';
-import * as path from 'path';
+import fs from 'fs-extra'
+import * as path from 'path'
 
 export class File {
-  content: Promise<string> | null = null;
+  content: Promise<string> | null = null
 
-  constructor(readonly path: string, readonly base: string) { }
+  constructor(readonly path: string, readonly base: string) {}
 
   get relative() {
-    return path.posix.relative(this.base, this.path);
+    return path.posix.relative(this.base, this.path)
   }
 
   get extname() {
-    return path.posix.extname(this.path).slice(1);
+    return path.posix.extname(this.path).slice(1)
   }
 
   read() {
-    return this.content || (this.content = fs.readFile(this.path, 'utf-8'));
+    return this.content || (this.content = fs.readFile(this.path, 'utf-8'))
   }
 }

packages/theme-basic/src/layout/search.tsx

@@ -25,16 +25,19 @@ const SiteSearch = ({ pagesStaticData }: Props) => {
     setFilteredData(search(pagesStaticData, ''))
   }, [pagesStaticData])
 
-  const onChange = useCallback((value, type, _) => {
-    if (type === 'itemClick' || type === 'enter') {
-      // user confirm search result
-      history.push(value)
-    } else if (type === 'change') {
-      // user input search text
-      setFilteredData(search(pagesStaticData, value))
-      setSearchVal(value)
-    }
-  }, [pagesStaticData])
+  const onChange = useCallback(
+    (value, type, _) => {
+      if (type === 'itemClick' || type === 'enter') {
+        // user confirm search result
+        history.push(value)
+      } else if (type === 'change') {
+        // user input search text
+        setFilteredData(search(pagesStaticData, value))
+        setSearchVal(value)
+      }
+    },
+    [pagesStaticData]
+  )
 
   return (
     <Search

packages/theme-doc/src/Layout/TsInfo/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { TsInterfaceInfo } from 'vite-plugin-react-pages/clientTypes'
 
-import s from "./index.module.css";
+import s from './index.module.css'
 
 interface Props {
   data: TsInterfaceInfo

packages/theme-doc/src/Layout/renderMenu.tsx

@@ -43,7 +43,7 @@ export const renderMenuHelper = (isTopNav: boolean) =>
               {item.label}
               {rightIcon}
             </a>
-          )
+          ),
         }
       }
 
@@ -58,7 +58,7 @@ export const renderMenuHelper = (isTopNav: boolean) =>
               {item.label}
               {rightIcon}
             </Link>
-          )
+          ),
         }
       }
 

pnpm-lock.yaml

@@ -2,4 +2,5 @@ module.exports = {
   trailingComma: 'es5',
   semi: false,
   singleQuote: true,
+  endOfLine: 'lf',
 }

prettier.config.js

@@ -27,7 +27,7 @@ export async function setupActualTestPlayground(
       return !file.includes('__tests__')
     },
   })
-  return {playgroundPath: copyTo, restore}
+  return { playgroundPath: copyTo, restore }
 
   async function restore(subPath: string = 'pages') {
     await fs.copy(