Support collection sources with custom cwd paths

[FrederikBN]

Environment

• nuxt-studio: 1.2.0
• @nuxt/content: 3.x
• nuxt: 4.x

Version

1.2

Reproduction

Project Structure

monorepo/
├── apps/website/
│   ├── nuxt.config.ts
│   └── content.config.ts
└── packages/content-layer/
    └── content/
        └── index.md

Configuration

// apps/website/content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { resolve } from 'path'

export default defineContentConfig({
  collections: {
    pages: defineCollection({
      type: 'page',
      source: {
        cwd: resolve(__dirname, '../../packages/content-layer/content'),
        include: '**/*.md',
      },
    }),
  },
})

Steps

1. Run dev server in apps/website
2. Open Studio and edit index.md
3. Live preview does not update

Expected

• File written to packages/content-layer/content/index.md
• watcher detects change
• preview updates

Actual

• File written to apps/website/content/index.md (?)
• watcher sees no change
• preview stale

Root Cause

1. Hardcoded storage path

src/module/module.ts - setupDevMode:

nuxt_studio_content: {
  driver: "fs",
  base: resolve(nuxt.options.rootDir, "content")  // Ignores collection cwd
}

2. Path matching ignores cwd

src/module/runtime/utils/collection.ts - getCollectionByFilePath:

    return paths.some((p) => {
      matchedSource = collection2.source.find((source) => {
        const include = minimatch(p, source.include);
        const exclude = source.exclude?.some((exclude2) => minimatch(p, exclude2));
        return include && !exclude;
      });
      return matchedSource;
    });
// source.cwd is not used in path resolution

3. Path generation ignores cwd

src/module/runtime/utils/collection.ts - generateFsPathFromId:

export function generateFsPathFromId(id, source) {
  const [_, ...rest] = id.split(/[/:]/);
  let path = rest.join("/");
  const { fixed } = parseSourceBase(source);
  const normalizedFixed = withoutTrailingSlash(fixed);
  const prefix = withoutTrailingSlash(withoutLeadingSlash(source.prefix || ""));
  if (prefix && prefix !== "/" && path.startsWith(prefix + "/")) {
    path = path.substring(prefix.length + 1);
  }
  if (normalizedFixed && path.startsWith(normalizedFixed)) {
    return path;
  }
  return join(fixed, path);
}
// Does not incorporate source.cwd

Description

nuxt-studio does not respect the cwd property in Nuxt Content v3 collection sources. In dev mode, files are written to {rootDir}/content/ regardless of the collection's configured cwd, breaking live preview for content sourced from layers or monorepo packages.

Additional context

In general i have had a hard time with incorporating nuxt studio in a context where there is an idea of layers. This seems not to be just a studio problem, but also an issue within nuxt content. I have come up with some workarounds to get nuxt content to be happy and also showcase the files within studio, but this breaks the live preview as previously mentioned.

I hope that there would come support for the usage of the CWD option, since it is supported by nuxt content and it would make it possible for me to use nuxt studio outside of a monorep context.

At the end i underline that i do appreciate nuxt studio and the efforts being made - it is a really cool product!

Logs

[FrederikBN]

Hi @larbish - thank you for going over the request and adding the feature label! Once again i appreciate all the work you guys are doing!

I am quite interested in this feature - if possible, i could fix this and submit a PR. But before i do this i would like to hear if the team has a preferred solution for this.

Best regards Frederik

[larbish]

Hey @FrederikBN, thanks for your proposal! Do you have Discord so we can dig this feature integration?

[FrederikBN]

Hi @larbish , yes of course! Do you have a discord channel for the project? I have not seen one as far as I know :D

[larbish]

You can join the discord here: https://discord.gg/sBXDm6e8SP

Let's DM once you're there 🙂

[llanas]

Any news about this feature request @larbish ?
I'm using a monorepo with multiple nuxt app inside and I struggle using nuxt studio within this monorepo.

[larbish]

@llanas There is no pending PR for it ATM but here is my reflexion about it if someone want to dig and try something (I'll be happy to discuss it on Discord if needed):

That's a first draft / idea of what I think about it. We need more info about use case and project architecture to improve it and choose the appropriate implementation though. We need a dedicated playground in the repo for a case with several cwd source.

1. One tricky part can be the dev mode with HMR, I think we need to register a separate fs storage for each cwd (need to be tested)

2. Tests will need to be updated and new ones are clearly needed, I'm mainly thinking about testing:

• getCollectionByFilePath
• generateIdFromFsPath
• generateFsPathFromId
• getCollectionSourceById
• all tree related tests need to be updated to take the cwd into account

Including a new source mock in mocks/collections.ts

3. Then to carry this cwd in the all code base to apply file system actions, preview and draft system, we have two options:

A) Add the cwd in prefix of the fsPath (which is currently the file system path relative to the content folder)
B) Carry a new cwd field in all files (tree and draft) to allow actions and find related source when needed

4. Tree structure: since tree structure is based on the fsPath currently, the root of all files is the content folder.

A) If we add cwd in the fsPath, it means we'll display all cwd at root level of the content tab. Which means current project will have a single content folder in the content tab. I'm not fan of it to be honest.

B) If we have the ability to extract all cwd defined by users, we could (but it needs also a big refactor) generate one tree by cwd and display them all as tabs. In the majority of case we should have only one cwd but at least the case with several ones could be handled.