pathpida

pathpida

Páginas amigáveis de texto datilografado e gerador de caminho estático para o próximo.js.

Breaking Change ️

2024/12/14

Desde Pathpida> = 0.23.0 , removeu o suporte do NUXT.

2022/11/25

Desde Pathpida> = 0.20.0 , removeu suporte para Sapper.

Características

• Tipo de segurança . Gere automaticamente os arquivos de definição de tipo de tipo para manipular links internos em Next.JS.
• Configuração zero . Nenhuma configuração necessária pode ser usada imediatamente após a instalação.
• Zero tempo de execução . Leve porque o código de tempo de execução não está incluído no pacote.
• Suporte para arquivos estáticos . Arquivos estáticos em público/ também são suportados, para que os ativos estáticos possam ser referenciados com segurança.
• Suporte ao AppDir do Next.JS 13 Layout .

Índice

• Instalar
• Opções de interface da linha de comando
• Configurar
• Uso
• Defina consulta
• Gerar caminho de arquivos estáticos
• Licença

Instalar

• Usando NPM:

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

• Usando o fio:

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

Opções de interface da linha de comando

Opção	Tipo	Descrição
--enableStatic -s		Gerar caminho de arquivos estáticos em $path.ts
--ignorePath -p	string	Especifique o caminho do arquivo de padrões de ignorar.
--output -o	string	Especifique o diretório de saída para $path.ts
--watch -w		Ativar modo de relógio. Regenerar $path.ts
--version -v		Imprimir versão Pathpida.

Configurar

package.json

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

Uso

 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

ou

 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 } />
    </ >
  ) ;
} ; 

Defina consulta

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 } />
    </ >
  ) ;
} ; 

Gerar caminho de arquivos estáticos

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

ou

 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 } />
    </ >
  ) ;
} ; 

Licença

O PATHPIDA é licenciado sob uma licença do MIT.