In findPages, users can't overwrite exist data set by other file about vite-plugin-react-pages HOT 8 CLOSED

Another option is to add a getPageData helper so the strategy can decide whether to guard against overwriting. The page data object would be created if no page data exists yet.

const data = helpers.getPageData(pageId)
// overwrite
data.title = 'hello world'
// guard
data.title ||= 'hello world'

from vite-plugin-react-pages.

But If we let user to mutate the page data directly, the logic inside addPageData will be bypassed. We need addPageData to track which page data comes from which file.

from vite-plugin-react-pages.

We can use a Proxy for that.

from vite-plugin-react-pages.

I want to keep it react setState style instead of the vue proxy style. 🤣

from vite-plugin-react-pages.

Imperative APIs are more flexible and just as understandable. No point in boxing yourself in with a rigid API like setState, unless you have a really good reason for it. React's core team came up with setState because they wanted renders to use immutable data for "time slicing" purposes. We have no need for such complexity.

from vite-plugin-react-pages.

You have a point. The fileHandler API can be used like this:

function fileHandler(file, pagesData) {
  // ...
  const proxy = pagesData['page1'];

  proxy.runtimeData.main = filePath1;
  proxy.runtimeData.dataKey2 = filePath2;
  // Equivalent to proxy.runtimeData.main = filePath1
  proxy.runtimeData = filePath1;

  proxy.staticData.dataKey3 = 'staticData3';
  proxy.staticData.title = 'title1';
  // can read and overwrite
  if (proxy.staticData.title) {
    proxy.staticData.title = 'title1';
  }
  // Forbidden. Throw error
  proxy.staticData = 'data';
}

A edgeCase: If handler of file1 do proxy.staticData.dataKey1 = {} and then handler of file2 do
proxy.staticData.dataKey1.dataKey2 = 'data'. We should treat the whole proxy.staticData.dataKey1 is owned by file1.
In other words, we don't do deep tracking to keep it simple.

I can implement this.

from vite-plugin-react-pages.

While we could pass a pagesData object for every file, it seems inefficient, since not every file has its own page data. So I think helpers.getPageData makes more sense.

Maybe splitting them up into getRuntimeData and getStaticData is a better approach? Less proxy.runtimeData or proxy.staticData being repeated everywhere.

findPages: (root, { watchFiles, getRuntimeData, getStaticData }) =>
  watchFiles(root, globs, (file) => {
    const data = getRuntimeData(file) // Pass a file or pageId
    const staticData = getStaticData('pageId')

    // Edit to your heart's content.
    data.contributorList = ['...']
    staticData.title ||= 'Default title'
  })

Though, I suppose you can always destructure...

const { data, staticData } = getPageData('id')

from vite-plugin-react-pages.

Fixed by #19

from vite-plugin-react-pages.