how to kebabCase page url about vite-plugin-react-pages HOT 15 CLOSED

@yunsii I have created a PR for you: yunsii/starter-vite-react-library#1

from vite-plugin-react-pages.

By the way, I just published a new version to fix some issues. You should upgrade.

from vite-plugin-react-pages.

I understand you. But I can't figure out a way to support that. I have to keep the default filesystem routing strategy(DefaultPageStrategy) as simple/intuitive as possible~

from vite-plugin-react-pages.

Rename your page file to button$.tsx or /button/index$.tsx

from vite-plugin-react-pages.

Rename your page file to button$.tsx or /button/index$.tsx

But the page directory will export as part of library structure, this approach is not suitable.

from vite-plugin-react-pages.

I can support a new static data notation to define a page path explicitly. For example, this is your /components/Button/index$.tsx:

/**
 * @pagePath /components/button
 */

// export your page component ...

The downside is, you need add do this static data notation to every page files that you want to change page path.

Or you can use pageStrategy API to define your own filesystem routing rules. Checkout the first example in the doc. In your case the getPagePublicPath need to be like this:

/**
 * turn `components/Button/index$.tsx` into `/components/button`
 */
function getPagePublicPath(relativePageFilePath: string) {
  let pagePublicPath = relativePageFilePath.replace(
    /\$\.(md|mdx|js|jsx|ts|tsx)$/,
    ''
  )
  pagePublicPath = pagePublicPath.replace(/index$/, '')
  // remove trailing slash
  pagePublicPath = pagePublicPath.replace(/\/$/, '')
  // ensure starting slash
  pagePublicPath = pagePublicPath.replace(/^\//, '')
  pagePublicPath = `/${pagePublicPath}`
  
  // turn it to kebabCase here !!!!! 
  // impelement the logic here

  // turn [id] into :id
  // so that react-router can recognize it as url params
  pagePublicPath = pagePublicPath.replace(
    /\[(.*?)\]/g,
    (_, paramName) => `:${paramName}`
  )

  return pagePublicPath
}

from vite-plugin-react-pages.

I'm try to apply this approach to DefaultPageStrategy https://github.com/yunsii/starter-vite-react-library/blob/kebab-case-page-url/vite.docs.config.ts

It looks like effectless, what happens?

from vite-plugin-react-pages.

I think pagePublicPath = `/${kebabCase(pagePublicPath)}` may be wrong. You can console.log(pagePublicPath) to check if it output right like /components/button

from vite-plugin-react-pages.

I think pagePublicPath = /${kebabCase(pagePublicPath)} may be wrong. You can console.log(pagePublicPath) to check if it output right like /components/button

Print like this:

Only print once, is it normal?

from vite-plugin-react-pages.

@yunsii I have created a PR for you: yunsii/starter-vite-react-library#1

Awesome! i found that ahooks still kabab case hooks name, so i will do like that. BTY, still need a nice page strategy. It looks like so complicated for now 😂

from vite-plugin-react-pages.

Oh no, still awkward 😦

from vite-plugin-react-pages.

Oh no, still awkward 😦

That can be overwrited by staticData.title

from vite-plugin-react-pages.

That can be overwrited by staticData.title

I think file name as page title, kebab case file name as page url is a good practice 👀

from vite-plugin-react-pages.

I think file name as page title, kebab case file name as page url is a good practice

That is reasonable for component documentation, but not for general filesystem routing (for example, next.js's filesystem routing also don't do that). I want to keep the default filesystem routing strategy(DefaultPageStrategy) as simple/intuitive as possible. Maybe I can provide a optional KebabCaseStrategy to do that.

from vite-plugin-react-pages.

That is reasonable for component documentation

I think so, on the other hand, I'm alse a heavy user of next.js in my work. I always create kebab case file name in Next.js pages directory, and custom page title with NextSeo.

from vite-plugin-react-pages.