feat!: support basepath config for staticPath

__tests__/index.spec.ts

@@ -21,20 +21,23 @@ describe('cli test', () => {
     for (const dir of fs.readdirSync('projects')) {
       resetCache()
 
-      const basePath = path.join(process.cwd(), 'projects', dir)
+      const workingDir = path.join(process.cwd(), 'projects', dir)
       const { type, input, staticDir, output, trailingSlash } = await getConfig(
         dir !== 'nuxtjs-no-slash',
-        basePath
+        workingDir
       )
 
       const result = fs.readFileSync(`${output}/$path.ts`, 'utf8')
-      const { filePath, text } = build({ type, input, staticDir, output, trailingSlash })
+      const basepath = /-basepath$/.test(dir) ? '/foo/bar' : undefined
+      const { filePath, text } = build({ type, input, staticDir, output, trailingSlash, basepath })
 
       expect(filePath).toBe(`${output}/$path.ts`)
       expect(
         text.replace(
           new RegExp(
-            `${/\\/.test(basePath) ? `${basePath.replace(/\\/g, '\\\\')}(/src)?` : basePath}/`,
+            `${
+              /\\/.test(workingDir) ? `${workingDir.replace(/\\/g, '\\\\')}(/src)?` : workingDir
+            }/`,
             'g'
           ),
           ''

package.json

@@ -7,7 +7,7 @@
   "types": "dist/cli.d.ts",
   "bin": "bin/index.js",
   "scripts": {
-    "dev": "npm run build && cd projects/nextjs && node ../../bin/index.js -s && cd ../nextjs-src && node ../../bin/index.js -s && cd ../nuxtjs && node ../../bin/index.js --enableStatic && cd ../nuxtjs-src && node ../../bin/index.js --enableStatic && cd ../nuxtjs-no-slash && node ../../bin/index.js",
+    "dev": "npm run build && cd projects/nextjs && node ../../bin/index.js -s && cd ../nextjs-src && node ../../bin/index.js -s && cd ../nuxtjs && node ../../bin/index.js --enableStatic && cd ../nuxtjs-src && node ../../bin/index.js --enableStatic && cd ../nuxtjs-no-slash && node ../../bin/index.js && cd ../nextjs-basepath && node ../../bin/index.js -s && cd ../nuxtjs-basepath && node ../../bin/index.js -s",
     "build": "npm run rimraf && tsc",
     "rimraf": "node -e \"require('fs').rmdirSync('dist', { recursive: true })\"",
     "release": "standard-version --skip.tag",
@@ -87,7 +87,8 @@
   "dependencies": {
     "@nuxt/config": "^2.14.12",
     "chokidar": "^3.4.3",
-    "minimist": "^1.2.5"
+    "minimist": "^1.2.5",
+    "next": "^10.0.5"
   },
   "devDependencies": {
     "@types/jest": "^26.0.19",

projects/nextjs-basepath/lib/$path.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { Query as Query0 } from '../pages'
+import { OptionalQuery as OptionalQuery1 } from '../pages/[pid]'
+import { Query as Query2 } from '../pages/blog/[...slug]'
+
+export const pagesPath = {
+  _pid: (pid: string | number) => ({
+    $url: (url?: { query?: OptionalQuery1, hash?: string }) => ({ pathname: '/[pid]' as const, query: { pid, ...url?.query }, hash: url?.hash })
+  }),
+  aaa: {
+    _bbb: (bbb: string[]) => ({
+      ccc: {
+        $url: (url?: { hash?: string }) => ({ pathname: '/aaa/[...bbb]/ccc' as const, query: { bbb }, hash: url?.hash })
+      }
+    }),
+    api: {
+      samples: {
+        $url: (url?: { hash?: string }) => ({ pathname: '/aaa/api/samples' as const, hash: url?.hash })
+      }
+    }
+  },
+  blog: {
+    _slug: (slug: string[]) => ({
+      $url: (url: { query: Query2, hash?: string }) => ({ pathname: '/blog/[...slug]' as const, query: { slug, ...url.query }, hash: url.hash })
+    }),
+    hoge: {
+      _fuga: (fuga?: string[]) => ({
+        $url: (url?: { hash?: string }) => ({ pathname: '/blog/hoge/[[...fuga]]' as const, query: { fuga }, hash: url?.hash })
+      })
+    }
+  },
+  $url: (url: { query: Query0, hash?: string }) => ({ pathname: '/' as const, query: url.query, hash: url.hash })
+}
+
+export type PagesPath = typeof pagesPath
+
+export const staticPath = {
+  aa_json: '/foo/bar/aa.json',
+  bb: {
+    cc_png: '/foo/bar/bb/cc.png'
+  }
+} as const
+
+export type StaticPath = typeof staticPath

projects/nextjs-basepath/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  basePath: '/foo/bar'
+}

projects/nextjs-basepath/pages/[pid].tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export type OptionalQuery = { hoge: string }
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      Click Me
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home

projects/nextjs-basepath/pages/_app.tsx

@@ -0,0 +1,8 @@
+import { AppProps } from 'next/app'
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

projects/nextjs-basepath/pages/blog/[...slug].tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export type Query = { hoge: string }
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      Click Me
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home

projects/nextjs-basepath/pages/index.tsx

@@ -0,0 +1,94 @@
+import Head from 'next/head'
+import { useCallback, useState, FormEvent, ChangeEvent } from 'react'
+import useAspidaSWR from '@aspida/swr'
+import styles from '~/styles/Home.module.css'
+import { apiClient } from '~/utils/apiClient'
+import { Task } from '<%= orm === "prisma" ? "$prisma/client" : "$/types" %>'
+import UserBanner from '~/components/UserBanner'
+
+export type Query = { hoge: string }
+
+const Home = () => {
+  const { data: tasks, error, revalidate } = useAspidaSWR(apiClient.tasks)
+  const [label, setLabel] = useState('')
+  const inputLabel = useCallback((e: ChangeEvent<HTMLInputElement>) => setLabel(e.target.value), [])
+
+  const createTask = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (!label) return
+
+      await apiClient.tasks.post({ body: { label } })
+      setLabel('')
+      revalidate()
+    },
+    [label]
+  )
+
+  const toggleDone = useCallback(async (task: Task) => {
+    await apiClient.tasks._taskId(task.id).patch({ body: { done: !task.done } })
+    revalidate()
+  }, [])
+
+  const deleteTask = useCallback(async (task: Task) => {
+    await apiClient.tasks._taskId(task.id).delete()
+    revalidate()
+  }, [])
+
+  if (error) return <div>failed to load</div>
+  if (!tasks) return <div>loading...</div>
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>frourio-todo-app</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <main className={styles.main}>
+        <UserBanner />
+
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>frourio-todo-app</p>
+
+        <div>
+          <form style={{ textAlign: 'center' }} onSubmit={createTask}>
+            <input value={label} type="text" onChange={inputLabel} />
+            <input type="submit" value="ADD" />
+          </form>
+          <ul className={styles.tasks}>
+            {tasks.map(task => (
+              <li key={task.id}>
+                <label>
+                  <input type="checkbox" checked={task.done} onChange={() => toggleDone(task)} />
+                  <span>{task.label}</span>
+                </label>
+                <input
+                  type="button"
+                  value="DELETE"
+                  style={{ float: 'right' }}
+                  onClick={() => deleteTask(task)}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
+        </a>
+      </footer>
+    </div>
+  )
+}
+
+export default Home

projects/nuxtjs-basepath/nuxt.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  router: {
+    trailingSlash: true,
+    base: '/foo/bar'
+  }
+}

projects/nuxtjs-basepath/pages/_pid.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export type OptionalQuery = { hoge: string }
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      Click Me
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home

projects/nuxtjs-basepath/pages/blog/_slug.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export type Query = { hoge: string }
+
+// `onClick`, `href`, and `ref` need to be passed to the DOM element
+// for proper handling
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      Click Me
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home

projects/nuxtjs-basepath/pages/index.tsx

@@ -0,0 +1,94 @@
+import Head from 'next/head'
+import { useCallback, useState, FormEvent, ChangeEvent } from 'react'
+import useAspidaSWR from '@aspida/swr'
+import styles from '~/styles/Home.module.css'
+import { apiClient } from '~/utils/apiClient'
+import { Task } from '<%= orm === "prisma" ? "$prisma/client" : "$/types" %>'
+import UserBanner from '~/components/UserBanner'
+
+export type Query = { hoge: string }
+
+const Home = () => {
+  const { data: tasks, error, revalidate } = useAspidaSWR(apiClient.tasks)
+  const [label, setLabel] = useState('')
+  const inputLabel = useCallback((e: ChangeEvent<HTMLInputElement>) => setLabel(e.target.value), [])
+
+  const createTask = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (!label) return
+
+      await apiClient.tasks.post({ body: { label } })
+      setLabel('')
+      revalidate()
+    },
+    [label]
+  )
+
+  const toggleDone = useCallback(async (task: Task) => {
+    await apiClient.tasks._taskId(task.id).patch({ body: { done: !task.done } })
+    revalidate()
+  }, [])
+
+  const deleteTask = useCallback(async (task: Task) => {
+    await apiClient.tasks._taskId(task.id).delete()
+    revalidate()
+  }, [])
+
+  if (error) return <div>failed to load</div>
+  if (!tasks) return <div>loading...</div>
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>frourio-todo-app</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <main className={styles.main}>
+        <UserBanner />
+
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>frourio-todo-app</p>
+
+        <div>
+          <form style={{ textAlign: 'center' }} onSubmit={createTask}>
+            <input value={label} type="text" onChange={inputLabel} />
+            <input type="submit" value="ADD" />
+          </form>
+          <ul className={styles.tasks}>
+            {tasks.map(task => (
+              <li key={task.id}>
+                <label>
+                  <input type="checkbox" checked={task.done} onChange={() => toggleDone(task)} />
+                  <span>{task.label}</span>
+                </label>
+                <input
+                  type="button"
+                  value="DELETE"
+                  style={{ float: 'right' }}
+                  onClick={() => deleteTask(task)}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
+        </a>
+      </footer>
+    </div>
+  )
+}
+
+export default Home