manzt / anywidget

reusable widgets made easy
https://anywidget.dev
MIT License
488 stars 38 forks source link

Best Practice for folder layout #228

Closed kolibril13 closed 1 year ago

kolibril13 commented 1 year ago

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 commented 1 year ago

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:

image

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 commented 1 year ago

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.

manzt commented 1 year ago

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

kolibril13 commented 1 year ago

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 commented 1 year ago

yes!

manzt commented 1 year ago

Will make PR now.