0행에서 Next를 설정합니다.jus 및 Nuxtjs 내부 링크를 안전하게 얻을 수 있는 최강 프로그램 라이브러리'pathpida'

Qiita TypeScript Advent Calendar 2020 마지막 날 보도.

TypeScript제 내부 링크 가져오기 라이브러리 "pathpida"

최근에 살짝 화제가 된 개발frourio과aspida의Solufa입니다.
젠의 첫 기고를 기념해 신작고'pathpida'를 소개한다.
그렇다고 완전한 신작도 아니고 첫 발표부터 1년이 지나 월간 다운로드 수가 1천을 넘어섰다.단지 자신과 관련된 안건만 조용히 검증을 진행하였는데, 드디어 이번 주가 전면적으로 갱신되어 일반적인 상황을 알려줄 수 있게 되었다!
pathpida는 Next입니다.jus 및 Nuxt각 js의 루트 규약을 최적화했기 때문에 설정할 필요가 없고 안전하게 사용할 수 있습니다.

무슨 문제를 해결하느냐

다음과 같이 마이그레이션/post/1된 링크가 있습니다.

import Link from 'next/link'

export default () => {
  const url = `/post/${1}`
  return <Link href={url} />
}

이때 내부 링크로 적합한지 정적 검사/post/{pid}를 할 수 없습니다.pages/post/[pid].tsx 파일이 없는 경우 페이지 마이그레이션에 장애가 발생합니다.
TypeScript4.1에 추가된 Template Literal Types를 사용하려 해도 손으로 쓴 페이지의 많은 파일 경로는 어렵다.
개발 과정에서 URL이 변경됐고, 페이지 내 파일 이름을 바꿀 때 방대한 소스 코드에서 목측하는 옛 경로를 찾아 고쳐 쓰는 작업을 경험하셨겠죠.
그런 문제를 해결하는 것은pathpida다.
말하자면, 아주 똑똑한 프로그램 라이브러리는 페이지 디렉터리를 보기 위한 aspida가 쓴 내부 링크를 자동으로 생성하여 고객을 얻을 수 있다.
예를 들어 페이지 디렉터리가 다음과 같은 상태일 때

pages/[pid].tsx
pages/blog/[...slug].tsx
pages/index.tsx

다음 Type Script 파일이 자동으로 생성됩니다.
lib/$path.ts

export const pagesPath = {
  _pid: (pid: number | string) => ({
    $url: () => ({ pathname: '/[pid]', query: { pid }})
  }),
  blog: {
    _slug: (slug: string[]) => ({
      $url: () => ({ pathname: '/blog/[...slug]', query: { slug }})
    })
  },
  $url: () => ({ pathname: '/' })
}

보시다시피 페이지Path의 속성은 페이지의 파일과 대응합니다.
달러 url 방법이 되돌아오는 대상은 next/link 또는 next/router에 직접 맡길 수 있다.
구성 요소가 사용하는 인상은 이런 느낌입니다.
pages/index.tsx

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

export default () => {
  return <Link href={pagesPath.blog._slug(['a', 'b', 'c']).$url()} />
}

내부 링크를 매우 간단하고 안전하게 처리할 수 있습니다!

Next.js로 해볼게요.

Next.js+TypeScript 환경이 이미 형성되어 있음을 전제로 설명합니다.
pathpida 이외에 npm-run-all도 설치합니다.
의존 관계는 아니지만 npm-run-all이 개발 중이면 편리합니다.

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

package.json

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

dev 명령을 사용합니다.js와 함께 pathpida도 감시 모드로 시작합니다.

$ yarn dev

utils 또는 lib 디렉터리에서 자동으로 $path.ts 파일을 생성합니다.
※ 둘 다 존재하지 않을 때lib 디렉터리 자동 생성
※v0.10.0 지원src/pagessrc/lib

lib/
  $path.ts
pages/
  _app.tsx
  index.tsx

lib/$path.ts

export const pagesPath = {
  $url: () => ({ pathname: '/' })
}

그리고 페이지 디렉터리에 파일을 추가할 때마다lib/$path.ts 파일을 다시 씁니다.
※Next.js의 경우 pathpida는 페이지/api 디렉터리와 밑줄로 시작하는 파일을 무시합니다
페이지Path를 가져옵니다.예전처럼 js의 링크와router를 사용할 수 있습니다.

lib/
  $path.ts
pages/
  articles/
    [id].tsx
  users/
    [...userInfo].tsx
  _app.tsx
  index.tsx

components/ActiveLink.tsx

import Link from 'next/link'
import { useRouter } from 'next/router'
import { pagesPath } from '../lib/$path'

function ActiveLink() {
  const router = useRouter()

  const handleClick = () => {
    router.push(pagesPath.users._userInfo(['mario', 'hello', 'world!']).$url())
  }

  return <>
    <div onClick={handleClick}>Hello</div>
    <Link href={pagesPath.articles._id(1).$url()}>
      World!
    </Link>
  </>
}

export default ActiveLink

필수 질의 지정

페이지 아래의 구성 요소에서만 export Query 유형을 지정하여 질의를 지정할 수 있습니다.
예를 들어, 페이지를 만들기/user?userId={number}pages/user.tsx

export type Query = {
  userId: number
}

export default () => <div />

그냥 이렇게 썼어요.

import { pagesPath } from '../lib/$path'

pagesPath.user.$url({ query: { userId: 1 }})

조회를 이렇게 설정할 수 있습니다.

옵션 지정 질의

위에서 말한 바와 같이, 모든 속성이 선택할 수 있어도, 빈 대상을 $url에 넘겨야 합니다.
export를 통해 Optional Query 유형을 질의로 제출하여 선택 사항으로 만듭니다.
pages/user.tsx

export type OptionalQuery = {
  userId: number
}

export default () => <div />

이렇게 하면 공중에서 $url을 부를 수 있습니다.

import { pagesPath } from '../lib/$path'

pagesPath.user.$url({ query: { userId: 1 }})
pagesPath.user.$url()

해싱 지정

$url 방법의 매개 변수에 좋아하는 문자열hash 속성을 건네주었을 뿐입니다.#는 자동으로 부여됩니다.

import { pagesPath } from '../lib/$path'

pagesPath.user.$url({ query: { userId: 1 }, hash: 'hoge' })
pagesPath.user.$url({ hash: 'fuga' })

공공 디렉터리의 정적 파일 경로도 안전하게 가져옵니다

enableStatic 옵션을 pathpida 명령에 전달하면 public 디렉터리의 내용에 따라staticPath 클라이언트를 생성합니다.
package.json

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

public에 JSON과 PNG 이미지의 구상이 있습니다

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

lib/$path.ts or utils/$path.ts

staticPath 클라이언트는 $url 방법이 없고 경로 문자열을 직접 가져올 수 있습니다.
pages/index.tsx

import Link from 'next/link'
import { staticPath } from '../lib/$path'

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

export default () => <img src={staticPath.bb.cc_png} />

Nuxt.만약 js라면 Vue/Vuex 실례에 대응합니다

Nuxt.js+TypeScript에서 사용할 경우 1행의 설정만 추가하면 됩니다.(제목 사기...)
nuxt.config.js

{
  plugins: ['~/plugins/$path']
}

이렇게 하면 Vue/Vuex 인스턴스$pagesPath에서 액세스할 수 있습니다.
※ enableStatic 옵션을 사용하여$staticPathstatic의 파일 경로를 획득할 수 있습니다.
pages/index.vue

<template>
  <div>
    <nuxt-link :to="$pagesPath.post._pid(1).$url()" />
    <div @click="onclick" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  methods: {
    onclick() {
      this.$router.push(this.$pagesPath.post._pid(1).$url())
    }
  }
})
</script>

pathpida 프로젝트 경로nuxt.config.js(ts)Nuxt가 있는 경우없으면 넥스트.js로 판정합니다.
Next.jus 및 Nuxtjs에서 $path입니다.ts의 내용이 다르니 주의하세요.
※Nuxt.js의 경우 pathpida는 하이픈에서 시작하는 파일을 무시합니다
※ TS 파일에서 import Vue 파일의Query 유형, Nuxt를 사용할 수 없습니다.js에서 형식 인용이 있는Query를 지정할 수 없습니다. (자세한 내용은 Nuxt.js 환경에서 $path.ts의Query 정의 위치를 참조하십시오)

향후의 발전

연말연시 휴가에서도 사퍼(Svelte)의 패스 생성에 대응한다.
이후 샘플 코드가 완비되면create-frrourio-app에 삽입합니다.
그리고 2021년... · 자금을 극한까지 투입하고 frurio 생태계가 해외에서 펼쳐집니다!
나는 Rails가 쓰러질지 안 쓰러질지는 관심이 없지만 Type Script의 전체 쌓인 틀을 말하자면 frurio의 강력한 미래를 실현하고 싶다.
끝까지 읽어주셔서 감사합니다.
GiitHub에서 스타를 밀면 오픈소스 개발의 활력소가 된다!
https://github.com/aspida/pathpida

뒷받침

연말연시도 넷플릭스를 보면서 천천히 코드를 쓰며 보냈을 뿐이니 pathpida와 frurio의 문제나 요구에 신경 쓰지 마세요.(마녀의 여정은 좋았다.)