Should be typescript configuration for preview file be node based or DOM based?

[khats]

Is storySort function executes on server, right?
But preview is file originated for client side according documentation
I am confused that in this file is mix of client side and server side setup, so i cannot define base typescript sconfig for this file - Node based with access to path/filesystem or window/DOM.
So maybe storySort should be not in preview, but in main or separate file?

My use case is following:
I have predefined Record<string, string> of top used stories and able to provide shortcut from command line argument and push this story to top of sorted stories to force this story be 1st on startup.

Example, that is more complex in production:

const preview: Preview = {
    parameters: {
        layout: "fullscreen",
        options: {
           storySort: (prevStory, nextStory) => {
              const map = {
                 "btn": "components-buttons-button",                  
              };
              const definition = process.argv.slice(-1);
              const matcher = definition[0].match(/def=(.*)/);

             if (map[matcher[1]] === nextStory.id) {
                 return 1;
             }
           }
        }

yarn storybook --def=btn

[Marklb]

I think you are mostly correct and the documentation should probably be more clear. It has been a while since I looked at the code that handles storySort, but I think it is one of the few properties that is unique in how it gets handled.

From what I remember, the preview file is now statically analyzed to retrieve that function then it gets executed in an isolated context (I don't remember how it is executed exactly, but I think the idea is that you should consider it being run in an isolated purely javascript context. So, I don't think you should think of it as being in nodejs or a browser, but I am not 100% sure about that.)

The change to how it is handled happened in v7 and the migration notes have a list of the limitations that should probably be mentioned in the documentation, also. Here is a link to the migration notes on the storySort function: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort

[khats]

yeah, i can define in special TS config types: ["node", ] and other to satisfy builder. My main point here is that other developers in my company technically will be able to add code that will satisfy builder and they can be less experience and not familiar that storySort will be executed in isolated context. So following will be possible:

preview.ts

const oneOfProcessFlags = process.argv.slice(-1);
const urlParameters = window.location.search.split("&");

const preview: Preview = {
    parameters: {
        layout: "fullscreen",
        options: {
              storySort: (prevStory, nextStory) => { 
                 const oneOfProcessFlags = process.argv.slice(-1);
                 const urlParameters = window.location.search.split("&");
              }
        }

And typescript compiler will be silent. Anyway it's not big problem, because such code will break storybook during testing
Thank you for response, i was glad to discuss this issu