pathpida

Pathpida

TypeScript Friendly Pages dan Statis Path Generator untuk Next.js.

Memecahkan perubahan ️

2024/12/14

Sejak pathpida> = 0.23.0 , dukungan Nuxt yang dihapus.

2022/11/25

Sejak Pathpida> = 0.20.0 , Dukungan Sapper yang Dihapus.

Fitur

• Ketik keamanan . Secara otomatis menghasilkan file definisi jenis untuk memanipulasi tautan internal di Next.js.
• Konfigurasi Nol . Tidak ada konfigurasi yang diperlukan dapat digunakan segera setelah instalasi.
• Nol runtime . Ringan karena kode runtime tidak termasuk dalam bundel.
• Dukungan untuk file statis . File statis di depan umum/ juga didukung, sehingga aset statis dapat direferensikan dengan aman.
• Dukungan untuk AppDir dari Next.js 13 tata letak .

Daftar isi

• Memasang
• Opsi Antarmuka Baris Perintah
• Pengaturan
• Penggunaan
• Tentukan kueri
• Menghasilkan jalur file statis
• Lisensi

Memasang

• Menggunakan NPM:

  $ npm install pathpida npm-run-all --save-dev

• Menggunakan benang:

  $ yarn add pathpida npm-run-all --dev

Opsi Antarmuka Baris Perintah

Pilihan	Jenis	Keterangan
--enableStatic -s		Hasilkan jalur file statis di $path.ts
--ignorePath -p	string	Tentukan jalur file Pola Abaikan.
--output -o	string	Tentukan direktori output untuk $path.ts
--watch -w		Aktifkan mode jam tangan. Regenerate $path.ts
--version -v		Cetak versi Pathpida.

Pengaturan

package.json

{
  "scripts" : {
    "dev" : " run-p dev:* " ,
    "dev:next" : " next dev " ,
    "dev:path" : " pathpida --ignorePath .gitignore --watch " ,
    "build" : " pathpida --ignorePath .gitignore && next build "
  }
}

Penggunaan

 pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx

lib/$path.ts or utils/$path.ts // Generated automatically by pathpida

atau

 src/pages/index.tsx
src/pages/post/create.tsx
src/pages/post/[pid].tsx
src/pages/post/[...slug].tsx

src/lib/$path.ts or src/utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

 import Link from "next/link" ;
import { pagesPath } from "../lib/$path" ;

console . log ( pagesPath . post . create . $url ( ) ) ; // { pathname: '/post/create' }
console . log ( pagesPath . post . _pid ( 1 ) . $url ( ) ) ; // { pathname: '/post/[pid]', query: { pid: 1 }}
console . log ( pagesPath . post . _slug ( [ "a" , "b" , "c" ] ) . $url ( ) ) ; // { pathname: '/post//[...slug]', query: { slug: ['a', 'b', 'c'] }}

export default ( ) => {
  const onClick = useCallback ( ( ) => {
    router . push ( pagesPath . post . _pid ( 1 ) . $url ( ) ) ;
  } , [ ] ) ;

  return (
    < >
      < Link href = { pagesPath . post . _slug ( [ "a" , "b" , "c" ] ) . $url ( ) } />
      < div onClick = { onClick } />
    </ >
  ) ;
} ; 

Tentukan kueri

pages/post/create.tsx

 export type Query = {
  userId : number ;
  name ?: string ;
} ;

export default ( ) => < div /> ;

pages/post/[pid].tsx

 export type OptionalQuery = {
  limit : number ;
  label ?: string ;
} ;

export default ( ) => < div /> ;

pages/index.tsx

 import Link from "next/link" ;
import { pagesPath } from "../lib/$path" ;

console . log ( pagesPath . post . create . $url ( { query : { userId : 1 } } ) ) ; // { pathname: '/post/create', query: { userId: 1 }}
console . log ( pagesPath . post . create . $url ( ) ) ; // type error
console . log ( pagesPath . post . _pid ( 1 ) . $url ( ) ) ; // { pathname: '/post/[pid]', query: { pid: 1 }}
console . log ( pagesPath . post . _pid ( 1 ) . $url ( { query : { limit : 10 } , hash : "sample" } ) ) ; // { pathname: '/post/[pid]', query: { pid: 1, limit: 10 }, hash: 'sample' }

export default ( ) => {
  const onClick = useCallback ( ( ) => {
    router . push ( pagesPath . post . _pid ( 1 ) . $url ( ) ) ;
  } , [ ] ) ;

  return (
    < >
      < Link href = { pagesPath . post . _slug ( [ "a" , "b" , "c" ] ) . $url ( ) } />
      < div onClick = { onClick } />
    </ >
  ) ;
} ; 

Menghasilkan jalur file statis

package.json

{
  "scripts" : {
    "dev" : " run-p dev:* " ,
    "dev:next" : " next dev " ,
    "dev:path" : " pathpida --enableStatic --watch " ,
    "build" : " pathpida --enableStatic && next build "
  }
}

 pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx

public/aa.json
public/bb/cc.png

lib/$path.ts or utils/$path.ts // Generated automatically by pathpida

atau

 src/pages/index.tsx
src/pages/post/create.tsx
src/pages/post/[pid].tsx
src/pages/post/[...slug].tsx

public/aa.json
public/bb/cc.png

src/lib/$path.ts or src/utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

 import Link from "next/link" ;
import { pagesPath , staticPath } from "../lib/$path" ;

console . log ( staticPath . aa_json ) ; // /aa.json

export default ( ) => {
  return (
    < >
      < Link href = { pagesPath . post . _slug ( [ "a" , "b" , "c" ] ) . $url ( ) } />
      < img src = { staticPath . bb . cc_png } />
    </ >
  ) ;
} ; 

Lisensi

Pathpida dilisensikan di bawah lisensi MIT.