style: Consider using a more descriptive variable name, such as mockProjectRoot

style: Consider using a logger instead of console.log for consistency

can you elaborate on why this is needed now?

It's not strictly necessary, but before the paths were relative to cwd (which might not be the project root). I've actually extracted the root directory actually only to make testing of the toImportFn simpler - but then thought that I would make sense to propagate this upwards and add a proper handling of the project root.
https://github.com/storybookjs/storybook/pull/28941/files#diff-a4ade24974a8c7f082261c73f22be07ec54ad61a3f9683b20035955a50fa1a8bR54

I'm a little concerned that this doesn't actually solve the issue, but appears to. I wouldn't be surprised if there were hundreds of other places that assumed that process.cwd() === projectRoot, that would break if anyone attempted to use a project root different from the CWD. So then they'd set this explicitly, thinking that that would solve the issue, when it would just cause breakage somewhere else.

It's just my experience with the code base that makes me slightly defensive about this. We would need to set up an actual minimal reproduction with a case where CWD is not project root and see that it worked, before I'd feel confident in this.

I do like your thinking behind this though, on the surface it makes sense.

Is this really a user-facing option? That was not my intention. I only set it once to be the parent of the config dir.
But sure, there might be other problems with not using the root as cwd.

I'm unsure about it being user-facing, it's at least readable by users, but I don't think it's writable.

Would still be great to confirm it works.

I'm not a fan of using this package for multiple reasons:

1. With our recent focus on slimming down Storybook, we're trying to ensure that every KB counts, and to me it doesn't look like this improves the code in any way. The library covers a lot of edge cases/options which I don't think is relevant to us - but maybe I'm missing something?
2. I feel like the readability suffers here, because now to understand what the code does, you need to dig into what knitwork is and does. Before it was just simple string concatenations, which you could understand by understanding basic JS.

But again, maybe this adds compatibility for edge cases that users are experiencing which I don't know about?

This library just makes it easier to create safe javascript. Under the hood it's also only string concatenation. To address your points:

With our recent focus on slimming down Storybook, we're trying to ensure that every KB counts

The package size of the builder should be the same (or actually slightly goes down since its shorter to write the code using knitwork over manual string concats). I also don't quite understand why the builder size would matter much, since it is never deployed to any server.

I feel like the readability suffers here

I would argue this is very subjective. Personally, I find genDynamicImport(path) more readable than

`async () => import('${path})`

and it is less prone to make a small mistake (i.e. don't close ' as I did above).

adds compatibility for edge cases

It mostly adds proper handling of special characters in the import path similar to https://github.com/rollup/rollup/blob/master/src/utils/escapeId.ts.

In #28798 I also use it to generate a correct variable name based on a string, which is also somewhat non-trivial.

The package size of the builder should be the same (or actually slightly goes down since its shorter to write the code using knitwork over manual string concats).

From a bundled perspective yes, but not when you take into account that the extra dependencies need to be downloaded and installed.

I also don't quite understand why the builder size would matter much, since it is never deployed to any server.

I'm sorry I didn't make this clear in the original comment, but for us it's not just about the size of the final bundle of a built Storybook, it's about the whole Storybook experience, which includes how fast it installs, how many dependencies it adds to your project, how many MBs it adds to your node_modules.
By far the biggest complaint about Storybook today is that it's "bloated" and people don't want to add the bloat to their projects.
You can very rightfully interpret that complaint however you like, but it doesn't change the fact that our users are loud and clear about caring about this, and so do we.

This is why the team has decided that every new dependency will be scrutinized.

You can read more about the ethos at https://e18e.dev/guide/cleanup.html and our perspective on it in #29038.

I would argue this is very subjective. Personally, I find genDynamicImport(path) more readable

Subjective yes. IMO genDynamicImport is only more readable if you understand what it does, which most don't.

and it is less prone to make a small mistake

I can 100% agree with that.

It doesn't make sense to me to replace `async () => import('${path}')` with a dependency.

If you really think that reducing 30kb in node_modules for developers (not production) is worth the danger of introducing bugs by manual string concatenation, may I ask you to migrate the code away from knitwork (here as well as in #28798)?

By far the biggest complaint about Storybook today is that it's "bloated" and people don't want to add the bloat to their projects. You can very rightfully interpret that complaint however you like, but it doesn't change the fact that our users are loud and clear about caring about this, and so do we.

I don't think I'm in a position to interpret that complaint in any way. But shouldn't you know (and not interpret) what most users mean when they say this? Personally, I would generally agree with the statement, but would associate it more with the fact that I have to install 5 different packages in package.json for a minimal storybook. Why is not one storybook-vue enough (that comes with the cli, the builder, the framework, the essential addons)? But reducing this "bloat" may well mean that you install a few packages by default for users which they might not need and thus actually increase a different kind of "bloat".

The node_modules folder for average-size projects seems be easily above 1GB - then I really don't care about improvements in the order of <10mb (other users might of course see this different).

similar to above, how does this improve over the current combination of Node and Vite APIs, to justify the extra dependency?

As far as I know, there is no easy way to normalize windows paths in Node to always use forward-slash, which is what vite needs to handle the import correctly.

But isn't that what we did already with normalizePath from Vite at the old line 30-32 below?

https://vitejs.dev/guide/api-plugin.html#path-normalization

Oh, I wasn't aware of the existence of that helper (at least not the active part of my brain). I still think it would make sense to just use pathe everywhere, because it makes you forget about the issue completely. Would also allow to get rid of the slash dependency, and the 2 or 3 independent implementations of path normalizing in storybook (https://github.com/search?q=repo%3Astorybookjs%2Fstorybook%20slash&type=code)

I see what you mean.
So what you're saying is that using pathe everywhere is mentally easier/safer for us than using node:path + slash everywhere?

We've sort of been going in the opposite direction recetly, eg. replacing fs-extra with node:fs and a handful of manual logic, to slim down everything and make use of the modern APIs Node gives us today.

However when prebundled, pathe vs slash is 1.68 KB vs 98 B, which is an abysmal difference TBH.

I see what you mean. So what you're saying is that using pathe everywhere is mentally easier/safer for us than using node:path + slash everywhere?

Yes. Additionally, pathe handles all kind of slashes also as input well (eg when calling resolve etc). So you don't need to worry about converting them to the correct format before calling the methods from path. slash is only this tiny bit of pathe: https://github.com/unjs/pathe/blob/main/src/_internal.ts

Just had a look at the vite implementation, and it looks like they also just replace the slash: https://github.com/vitejs/vite/blob/5cac0544dca2764f0114aac38e9922a0c13d7ef4/packages/vite/src/shared/utils.ts#L27-L29

why move slash to a dependency?

It's actually used in a few instances in the builder, eg

The point of it being a devDependency is so that it gets bundled in (and minimized, optimized, tree-shaken) automatically when we build the package for publication.
Ideally we want to do this with all our dependencies, but some are incompatible with this and some pacakges we just haven't gotten around to test if they can be bundled in, which is why some are still regular dependencies. But devDependencies is the default unless it's not possible.

I understand how that is not obvious from your point of view, because that's usually not how projects use dependencies and devDependencies. We might someday move to a more explicit version of this pattern.

Okay, I will move it back to dev dependency.

May I add that I'm not a big fan of this inline-practice (for the builder and framework - it makes completely sense for the cli and the react-based view). I don't see what dependencies you pull-in (along with their security concerns etc, I have to trust you), it makes package managers obsolete / helpless, it makes auditing & sponsoring of indirect dependencies impossible, and it might well increase the overall size of the node modules folder (definitely if everyone would follow such a practice) - and finally it artificially reduces download numbers for npm packages - and we all know that such numbers might be important to get funding for open source projects etc.

That's fair, those are all valid considerations to include when weighing the trade offs.