Best Practice for folder layout

[kolibril13]

Hi @manzt!
I'm diving into some more anywidget ideas, and right now considering how to structure the folder layout.
Version A has a src/ipymafs/ layout, while version B has a src/ipymafs/static layout.
Also, should it be static or _static?

Is there a convention we can follow?
It would be great if we could even come up with a Best Practice that can be promoted over the whole anywidget ecosystem.
By promoting a specific structure, we could potentially minimize confusion and bugs, enhancing coherence among all anywidget projects.

A

📁 Project Root (ipymafs)
┣━━ 📂 .venv
┃   ┗━━ ... (content of .venv folder)
┣━━ 📂 node_modules
┃   ┗━━ ... (content of node_modules folder)
┣━━ 📂 js
┃   ┗━━ 📄 bezier.jsx
┃       📄 ellipse.jsx
┃       📄 line.jsx
┣━━ 📂 src
┃   ┗━━ 📂 ipymafs
┃       ┣━━ 📄 __init__.py
┃       ┣━━ 📄 bezier.css
┃       ┣━━ 📄 bezier.js
┃       ┣━━ 📄 ellipse.css
┃       ┣━━ 📄 line.js
┃       ┣━━ 📄 ellipse.js
┃       ┗━━ 📄 line.css
┣━━ 📄 README.md
┣━━ 📄 pyproject.toml
┣━━ 📄 package.json
┣━━ 📄 package-lock.json
┣━━ 📄 example_ellipse.ipynb
┣━━ 📄 example_bezier.ipynb
┗━━ 📄 example_line.ipynb

B)

📁 Project Root (ipymafs)
┣━━ 📂 .venv
┃   ┗━━ ... (content of .venv folder)
┣━━ 📂 node_modules
┃   ┗━━ ... (content of node_modules folder)
┣━━ 📂 js
┃   ┗━━ 📄 bezier.jsx
┃       📄 ellipse.jsx
┃       📄 line.jsx
┣━━ 📂 src
┃   ┗━━ 📂 ipymafs
┃       ┣━━ 📄 __init__.py
┃       ┗━━ 📂 static
┃           ┣━━ 📄 bezier.css
┃           ┣━━ 📄 bezier.js
┃           ┣━━ 📄 ellipse.css
┃           ┣━━ 📄 line.js
┃           ┣━━ 📄 ellipse.js
┃           ┗━━ 📄 line.css
┣━━ 📄 README.md
┣━━ 📄 pyproject.toml
┣━━ 📄 package.json
┣━━ 📄 package-lock.json
┣━━ 📄 example_ellipse.ipynb
┣━━ 📄 example_bezier.ipynb
┗━━ 📄 example_line.ipynb

[kolibril13]

While working a bit more on juypter-tldraw I came to realize that the static folder is a good idea as the project grows in size:

Also, I've adjusted my
.gitignore like this:

src/**/*.js
src/**/*.css
src/**/*.woff
src/**/*.woff2

and accordingly the pyproject file

[tool.hatch.build]
artifacts = [
    "src/tldraw/static/*.js",
    "src/tldraw/static/*.css",
    "src/tldraw/static/*.woff",
    "src/tldraw/static/*.woff2",
]

[manzt]

Thanks for opening the issue! Originally I saw anywidget's lack of opinion on this topic to be a strength, but I understand why it could be confusing for new comers. Personally I prefer the static/* path as you've seemed to stumble upon yourself. FWIW, the bundling documentation suggests using static: https://anywidget.dev/en/bundling/

I think beyond that, if I can find the time, working on the create-anywidget package to bootstrap a project with more opinionated configuration could be useful.

EDIT (2023-0-18): The recommended approach now (if using a bundler) is to use one of our project templates, which puts things in static/*

npm create anywidget@latest

[manzt]

Should we move the artifacts from js into static in our templates?

[kolibril13]

yes, that's a good idea!
I think you mean moving the artefacts from src/my_widget to src/my_widget/static, right?
Because in js, there are no artefacts.

[manzt]

yes!

[manzt]

Will make PR now.