Hide component files

[TommySorensen]

Nice project 🎉

One thing though is that there should be a checkbox or something like that to hide folder/files that are not route relevant.

As you can see here, i have a folder named fonts which is just a file with some const. Right now it shows up in the visualizer as a route, which i guess it should not?

Edit: Just saw that you don't intent to resolve issues. Fully understand that. I will let this issue stay here, maybe someone will resolve it.

[DiiiaZoTe]

From my understanding of it, if the folder is in the app directory, it is route... I wouldn't put my fonts folder in my app directory personally. It is technically browsable. I should be able to make the request work. However, it will require quite of bit of client side computation to make this work since we need to recalculate the positions of all the nodes. I'll see what I can do.

[TommySorensen]

Well in the app folder you can put anything which people is starting to do with Next 13. So it's not only a fonts issue. Its also components with multiple folders etc. Everything can be co-located in the app folder

[TommySorensen]

Basically only these files should be part of the flow chart, unless "show all" is enabled :)

layout.js
template.js
error.js
loading.js
not-found.js
page.js

Check more here: https://beta.nextjs.org/docs/routing/fundamentals#colocation

[DiiiaZoTe]

I totally understand what you're saying, and I actually only look for those files. You can have other files as part of the collocation just like the navbar example in the docs. However if it's a folder, it is technically part of the route tree and people can access it via the path. I wouldn't put anything as such in the app directory. Next.js doesn't provide a way to completely opt out from it being a route. There are groups, but they are also used as part of the layout tree.

[TommySorensen]

Not that you are wrong, but only static files will be part of the route. Eg. app/[locale]/(shop)/product-list/test.tsx will not be visible on http://localhost:3000/product-list/test since its not a static file and not a page file.

[DiiiaZoTe]

Yes that's correct. The question is mostly quid the folders. If you added a page.tsx to your fonts folder then it would make it viewable like any other page. What I could do though is automatically filter out any subtree that doesn't contain a single next file. Up to a sibling only, edge case where the sibling is a route but the parent doesn't have a next file so it doesn't get deleted. In your case it would remove the fonts folder and stop since [locale] has a layout, or because basket and visualiser are routes

[TommySorensen]

Sounds like a good solution 👍 I guess you could use their playground app as test folder from here: https://github.com/vercel/app-playground/tree/main/app

[DiiiaZoTe]

The playground could be fun to visualize actually!! I was actually wondering why you decided to put the fonts folder in the app directory and not in the public folder or a specific fonts folder outside the app dir. Because unless you want it to part of the layout tree, I wouldn't put these folders that have no next files in the app dir. Just wondering 🤔 Take the playground for instance, not a single subtree doesn't contain less than 1 next file.

[TommySorensen]

I do it because its way more easy to have the components together with the route. Finally there is no need to put components outside of the app folder (was previous using pages folder). Its actually also a selling point mentioned here: https://nextjs.org/blog/next-13#layouts The key is to put all your stuff in the app folder, but only if its not a reusable component.

Reusable components should be places somewhere outside of app folder, maybe as UI component in a monorepo setup.

Actually they do have components in app folder, but not that many. Some of them in folder like this: https://github.com/vercel/app-playground/tree/main/app/streaming/_components

[DiiiaZoTe]

Oh yeah I see them now... And yeah I get what you mean. I just saw a tweet on this. I'll give the solution I said above a try during the week 👍 I could make it a prop for the visualizer.

[DiiiaZoTe]

I published v1.0.2 with the new displayColocating prop 👍