I want to deploy the docs to the GitLab Page。I found that the files in dir: public could not be opened statically.
These are my steps：
1、npm init vite-pages library-demo --template lib

2、vite output dir: 'public' (Let the output directory be 'public ')

3、 npm run build:page

 "scripts": {
    "build:page": "rm -rf public && vite build --config ./vite.config.ts",
  },

4、select the file:'public/index.html' to run in the browser

Can you give me some advice? thx.

Consider the following case:

type Variant = "primary" | "secondary";

type Size = "sm" | "md" | "lg";

type Dimension = {
  w?: number;
  h?: number;
}

interface AsProp {
  as?: any;
}

interface BaseProps {
  size?: Size;
  wh?: Dimension;
}

interface ButtonProps extends BaseProps, AsProp {
  variant?: Variant | "link";
}

The TsInfo should show following output:

What I am getting:

Suggested improvements:

1. expand type references
2. expand heritage clauses
3. allow to skip certain heritage types

Examples:

1. <TsInfo src="./Button.tsx" name="ButtonProps"/> should expand ButtonProps only no heritage types
2. ` should expand inherited props too
3. <TsInfo src="./Button.tsx" name="ButtonProps" heritage="AsProp"/> should expand inherited props from AsProp and not all (can be comma separated names).

And the jsx api should be like:

import _TsInfo0 from './types.ts?tsInfo=ButtonProps'

import _TsInfo0 from './types.ts?tsInfo=ButtonProps&heritage=true'

import _TsInfo0 from './types.ts?tsInfo=ButtonProps&heritage=AsProp'

Will use Playwright Test.

loading状态dev时候可以，打包后显示不出来。
骨架屏组件自身的loading 没问题

Hello!

First, BIG THANKS for all your hard work on this great project! I think it deserves applause for a competitive solution in the React world!

Just caught it up in the previous version of the doc-site code that a useHashRouter: true is exposed in the vite-plugin-react-pages configs, like:

// vite.config.ts, modified from "basic" demo.

import { defineConfig } from 'vite'
import * as path from 'path'
import reactRefresh from '@vitejs/plugin-react-refresh'
import mdx from 'vite-plugin-mdx'
import pages from 'vite-plugin-react-pages'

module.exports = defineConfig({
  plugins: [
    reactRefresh(),
    mdx(),
    pages({
      useHashRouter: true, // <--- here it is
      pagesDir: path.join(__dirname, 'pages'),
    }),
  ],
})

Question:

1. Is it ready to use?
2. If so, will it affect the pageStrategy?

(I've found that when changed, my inter-links within markdown files will have to use something like [another-page](#/another-page) with a # in there.)

Hi @csr632,

What are your plans with vite-plugin-mdx? I'm the author of https://github.com/brillout/vite-plugin-mdx.

For the sake of Vite's ecosystem, it would be nice to have only one vite-plugin-mdx.

I don't mind giving my version away to someone willing to maintain a plugin that is view framework agnostic, i.e. that works with React, Vue, Preact, etc.

Hi,

this command doesn't work for me:

npm init @csr632/vite-app my-app --template react-pages-app

It shows this error:

I don't understand so much to the npm-init command but it's probably caused by the linking to the main repo with create-vite-app, isn't it?

Why does this name need to start with an underscore? By default, github pages ignores such files, making it necessary to add an .nojekyll. So I think this should be changed to another name?

This is a bug of [email protected] : vitejs/vite#10031

I create this issue to help people who get this error when using vite-plugin-mdx:
downgrade to [email protected] and wait for vite (or vite-plugin-mdx) to resolve the above issue.

Hello!

Firstly, BIG THANKS to all of you working on this great project, which is very promising in combination with vite + react setup. I'm actually integrating this as my doc site. I followed the advanced FS routing to apply my own pageStrategy. Now I want to add images to my markdown files.

Suppose my project structure is (I tried to simplify):

- docs/
|-- _theme.tsx
|-- index.html
|-- README.md <-- this page requires the diagram.png
|               .. something like ![my-diagram](./static/images/diagram.png)
`-- static
    `-- images
        `-- diagram.png
- output/
`-- docs/   <-- this is the expected outDir
- package.json
- tsconfig.json
- vite.config.ts

and my vite.config.ts is like:

import { defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
import mdx from 'vite-plugin-mdx';
import pages, {
  PageStrategy,
  FileHandler,
  extractStaticData,
} from 'vite-plugin-react-pages';

export default defineConfig({
  plugins: [
    react(), // this is my adoption, hopefully not related to this question
    mdx(),
    pages({
      pagesDir: resolve(__dirname, 'docs'),
      pageStrategy: new PageStrategy(function findPages(pagesDir, helpers) {
        helpers.watchFiles(
          pagesDir,
          '**/*.md',
          fileHandler
        );
      })
    }),
  ],
  root: 'docs',
  base: '/help/',  // to be served from 'http://my-server/help/'
  build: {
    outDir: '../output/docs',
    emptyOutDir: true
  }
});

const fileHandler: FileHandler = async (file, fileHandlerAPI) => {
  const pagePublicPath = getPagePublicPath(file.relative);
  fileHandlerAPI.addPageData({
    pageId: pagePublicPath,
    dataPath: file.path,
    staticData: await extractStaticData(file),
  });
};

/**
 * turn `sub-path/page2/welcome.md` into `/sub-path/page2/welcome`,
 * and `sub-path/page2/README.md` into `/sub-path/page2`
 */
function getPagePublicPath(relativePageFilePath: string) {
  let pagePublicPath = relativePageFilePath.replace(
    /(README)?\.md$/,
    ''
  );
  // remove ending slash
  pagePublicPath = pagePublicPath.replace(/\/$/, '');
  // add starting slash
  pagePublicPath = `/${pagePublicPath}`;
  console.log(`find new page: [${relativePageFilePath}] -> ${pagePublicPath}`);
  return pagePublicPath;
}

and I use vite build to build the docs. What I found is there's no images inside output/docs.

Question:

1. How to config so that I can see images copied to the outDir?
2. Is the path to the image (![my-diagram](./static/images/diagram.png)) in correct format?

Description

In the current alpha release , vite v4 alpha and rollup v3 are not specified as dependencies ( still v3 and v2 instead ) , and then version conflict is caused ( related PR ).

Should vite-pages's alpha release be in sync with vite ? Maybe vite-ecosystem-ci will help automate this process.

export interface ButtonProps<T> {
  /**
   * the type of button
   * @defaultValue 'default'
   */
  type?: 'primary' | 'default' | 'text'
}

报错：

UnhandledPromiseRejectionWarning: Error: unexpected declaration type in interface. name: T, kind: undefined

I'm looking to implement a route such as /posts/:id. Is this supported, and is there an example of how to access the id parameter within the page?

Whether consider support React 18?

vite-plugin-react-pages currently use mdx v1:

And vite-plugin-mdx also only support mdx v1, currently.

I am looking to use this plugin for a library documentation site and its going great. This is a very great plugin for that, so thank you.

We have a few spots in our library that we have objects with comments and would like to quickly display them with <TsInfo /> or something similar. Any thoughts there?

It would be something like this:

export const styles = (theme) => {
    return {
        /** Style for the button */
        button: {},
        /** @private */
        private: {}
    }
}

export const testIds = {
    /** Test id for the root container */
    ROOT: 'root-test-id'
}

Then I would want to pass the styles or testIds object to TsInfo (or something new?) to display a table with the name and comment, with the ones with no comments or @private being hidden optionally.

I am happy to submit a PR for this for the V4 work, if you have any suggestions on where to start.

I use plugin @rollup/plugin-typescript, and get warning like below:

So, I think bundle of theme-doc should install antd, @ant-design/icons and so on as non-dev deps, and exclude them after bundle.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"@mdx-js/mdx": "^1.6.22",
"vite": "^3.0.8",
"@mdx-js/react": "^1.6.22",
"vite-pages-theme-doc": "^3.1.4",
"vite-plugin-mdx": "^3.5.6",
"vite-plugin-react-pages": "^3.3.1"

Hey @csr632, vite-plugin-react-pages is failing on Vite. See here. We are planning to request testing for beta.1 and then try to release it before Vue.js Amsterdam. If you can check if this is a regression, that would be really helpful. Thanks!

cc @dominikg

PS: Are you in https://chat.vitejs.dev? It would be easier to discuss these issues there.

Demos render order not stable after I update demo trigger hmr under development env

Hi,

I don't know where to search for this bug but it looks like that vite-plugin-react-pages doesn't support paths on Windows systems.

If I have time I will look into that.

Small problem for windows paths breaking when using directory/index page routes due to trailing slashes.

Using the example here:
https://github.com/vitejs/vite-plugin-react-pages/blob/master/packages/playground/custom-find-pages2

will cause this error

Note: Its breaks like this by default in all the examples, not just the custom find pages demo.

Changing the config to replace \ with / fixes it. Just need to do it before pagePublicPath.replace(/\/$/, '')

/**
 * turn `sub-path/page2/index.tsx` into `/sub-path/page2`
 */
function getPagePublicPath(relativePageFilePath: string) {
  console.log('getPagePublicPath', relativePageFilePath)
  let pagePublicPath = relativePageFilePath
  .replace(/\\/g, '/') // <-- [FIX HERE] replace all the \ with / for windows paths
  .replace(/index\.(md|mdx|js|jsx|ts|tsx)$/,'')
  // remove ending slash 
  pagePublicPath = pagePublicPath.replace(/\/$/, '')
  // add starting slash
  pagePublicPath = `/${pagePublicPath}`
  return pagePublicPath
}

pretty easy to fix thanks to the excellent docs! But, it'd be nice to have in the default config too

While trying to reproduce #37 I stumbled upon this one. Here is the reproduction for it https://github.com/khalibloo/vite-pages-esbuild-bug
In both issues, I used the same commands on 2 different machines at the same time, and got different project scaffolding. Comparing the package.json alone shows they're very different. The machine on #37 is on node v14.17.4 and npm v6.14.14, while the one for this issue is on node v14.17.1 and npm v6.14.13. No significant version differences.

Steps (use pnpm or npm, both give the same error)

1. Create a new vite-pages project pnpm init vite-pages app-demo --template app
2. Install dependencies pnpm i
3. Start dev server pnpm dev

Error message

> pnpm dev

> [email protected] dev D:\Workspace\Web\Playground\vite-pages-demo
> vite serve

(!) "alias" option is deprecated. Use "resolve.alias" instead.
Pre-bundling dependencies:
  react
  react-dom
  react-router-dom
(this will be run only when your dependencies or config have changed)

  vite v2.5.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1044ms.

23:47:29 [vite] new dependencies found: vite-pages-theme-basic, updating...
23:47:29 [vite] ✨ dependencies updated, reloading page...
23:47:30 [vite] Internal server error: esbuild_1.startService is not a function
  Plugin: vite-plugin-mdx
  File: D:/Workspace/Web/Playground/vite-pages-demo/pages/$.mdx
      at D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:47:34
      at Generator.next (<anonymous>)
      at D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:8:71      at new Promise (<anonymous>)
      at __awaiter (D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:4:12)
      at ensureEsbuildService (D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:45:12)
      at Object.<anonymous> (D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:25:31)
      at Generator.next (<anonymous>)
      at fulfilled (D:\Workspace\Web\Playground\vite-pages-demo\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\vite-plugin-mdx\dist\transform.js:5:58)

In this line:

Page data of /404 is not loaded yet, so Comp404 is always undefined. vite-pages should provide an api to let themes pull page data manually.

When I set use HashRouter: true, when I click on the right navigation, the route matching error, please take a look

If I use theme doc to develop ui library, antd global css will also apply to my custom ui components. I have to override style mannually, how to make a workaround to the situation?

Maybe create a new theme without global css?

Why not the usage: https://github.com/yunsii/starter-vite-react-library/blob/master/vite.config.ts#L32 not work, no demos page data loaded in https://github.com/yunsii/starter-vite-react-library/blob/master/docs/pages/_theme.tsx#L12

I would like to add a filebased routing implementation to my starter pack https://github.com/thelinuxlich/react-modern-starter

Virtule modules should re-render and do hmr if upstream files is updated.

Currently we only support hmr of page modules. We need a general fs-watching machanism to support hmr of all virtule modules. Demo import and tsInfo import will benefit from it.

Whether consider support React Router 6?

Use vite-pages-theme-doc, it will render blank area when loadState.type === 'loading', obviously not a good UX.

Support render and custom loading component is a great feature.

demo里面被 markdown的样式给覆盖了，写起来要处理很麻烦。往往出现在各种 ul li img 等等标签上

demo-box 我理解起来应该是干净无污染的

It looks like some packages are being used as dependencies within this project, but not included in the package.json. Pnpm produces the error Failed to resolve force included dependency for jotai and react-router-dom. The @mdx-js/mdx and @mdx-js/react produced similar errors, but I'm not sure if you'd want to include those as dependencies in the package.json given that the mdx features are can probably be disabled if one is only interested in tsx/jsx.

源码：
cd packages/create-project/template-lib-monorepo/packages/demos
npm i
npm run build
报错：
[vite]: Rollup failed to resolve import "react" from "../button/README.md".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
error during build:
Error: [vite]: Rollup failed to resolve import "react" from "../button/README.md".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

node 版本 v12.13.0
npm 版本 6.14.16

// index.html
<script type="module" src="/@pages-infra/main.js"></script>

克隆模板之后能用，但是在自己的项目内照着模板搞就找不到这个资源导致页面出不来。另外建议文档写个已有的项目怎么接入。

As a coder with OCD, is there a method to avoid the warning? 😂

This is a regression.

Right now it crashes with

error when starting dev server:
Error: Build failed with 1 error:
../../.pnp.js:7897:23: error: [vite:dep-scan] ENOENT: no such file or directory, open '/home/user/p/y2/.yarn/$virtual/vite-plugin-react-pages-virtual-9054c16448/0/cache/vite-plugin-react-pages-npm-2.1.0-8052dc04d7-2ba766afad.zip/node_modules/vite-plugin-react-pages/dist/client/main.js'

I get the above error in the browser console when I try to run a basic vite-react-pages app. The page crashes and nothing is displayed.

Steps to Reproduce

1. Create a new app pnpm init vite-pages app-demo --template app
2. Install dependencies. Install jotai because it's not included in this project's dependencies pnpm add jotai
3. Start the app and open it in the browser.

Followed the integration guide of Vite, import 'virtual:windi.css' imported Windi CSS variables and can't get the Windi className to be involved in the page's stylesheet.

For example, the code looks like this:

<Switch>
  <Route path="/:id" />
  <Route path="/a" />
</Switch>

The /a will never be hit.

So I think the code in src/client/state.ts should like this:

function sortPagePaths(a: string, b: string) {
  if (a.includes('/:')) return 1;
  if (b.includes('/:')) return -1;
  if (a > b) return 1;
  if (a === b) return 0;
  if (a < b) return -1;
}
// ...
const pagePathsAtom = atom(initialPagePaths.sort(sortPagePaths));
// ...
const newPagePaths = Object.keys(newPages).sort(sortPagePaths);

In this line, I want to set page's title. But since a page is composed by multiple files. This title may have been set when another file was been processed. So this line will throw addPageData conflict: staticData with key "title" already exists.

So I am considering removing the conflict check and allow overwriting. The conflict check was added before PageStrategy API. I think it doesn't fit any more.

/cc @aleclarson