diff --git a/CLAUDE.md b/CLAUDE.md index d1d35caa5..aaa77fb40 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -145,7 +145,7 @@ Utilities in `tests/utils.py`: `get_json()`, `get_html()`, `get_sections_types() ## WebComponents -React 18 + Webpack 5 app in `src/imio/smartweb/core/webcomponents/`. Single entry point (`src/index.jsx`) builds **5 custom HTML elements**: +React 18 + Vite app in `src/imio/smartweb/core/webcomponents/`. Single entry point (`src/index.jsx`) builds **5 custom HTML elements**: | Element | Component | Purpose | |---------|-----------|---------| @@ -157,6 +157,9 @@ React 18 + Webpack 5 app in `src/imio/smartweb/core/webcomponents/`. Single entr Each component follows the same structure: main component, Card, Content, List sub-components, and Filter. -Output: `build/js/smartweb-webcomponents-compiled.js` + code-split chunks. +Output: `build/js/smartweb-webcomponents-compiled.js` (ES module) + code-split chunks, loaded via +`type="module"` by the `imio.smartweb.webcomponents.js` viewlet (`viewlets/webcomponents.py`), not through +the resource registry (which can't render a `type` attribute). Set `VITE_DEV_URL=http://localhost:2000` to +load the bundle from `npm run watch` (Vite dev server) instead of the built production bundle. Key deps: React Router DOM, React Bootstrap, Leaflet/React-Leaflet (maps), Axios, React-Select, React-DatePicker, date-fns. diff --git a/src/imio/smartweb/core/config.py b/src/imio/smartweb/core/config.py index 48310e07d..026b736e7 100644 --- a/src/imio/smartweb/core/config.py +++ b/src/imio/smartweb/core/config.py @@ -3,3 +3,7 @@ DIRECTORY_URL = os.environ.get("DIRECTORY_URL", "https://annuaire.enwallonie.be") EVENTS_URL = os.environ.get("EVENTS_URL", "https://agenda.enwallonie.be") NEWS_URL = os.environ.get("NEWS_URL", "https://actualites.enwallonie.be") +# Set to the Vite dev server URL (e.g. http://localhost:2000) to load the +# webcomponents bundle from `npm run watch` instead of the built production +# bundle. Leave empty in production. +VITE_DEV_URL = os.environ.get("VITE_DEV_URL", "") diff --git a/src/imio/smartweb/core/profiles/default/metadata.xml b/src/imio/smartweb/core/profiles/default/metadata.xml index 843deed57..e51fb4e19 100644 --- a/src/imio/smartweb/core/profiles/default/metadata.xml +++ b/src/imio/smartweb/core/profiles/default/metadata.xml @@ -1,6 +1,6 @@ - 1080 + 1081 profile-plone.app.dexterity:default profile-plone.app.discussion:default diff --git a/src/imio/smartweb/core/profiles/default/registry/bundles.xml b/src/imio/smartweb/core/profiles/default/registry/bundles.xml index 647f76fa3..1bb539576 100644 --- a/src/imio/smartweb/core/profiles/default/registry/bundles.xml +++ b/src/imio/smartweb/core/profiles/default/registry/bundles.xml @@ -27,8 +27,11 @@ + True - ++plone++imio.smartweb.webcomponents/js/smartweb-webcomponents-compiled.js ++plone++imio.smartweb.webcomponents/css/smartweb-webcomponents-compiled.css plone False diff --git a/src/imio/smartweb/core/upgrades/configure.zcml b/src/imio/smartweb/core/upgrades/configure.zcml index 1e8ab0622..d5c08cb17 100644 --- a/src/imio/smartweb/core/upgrades/configure.zcml +++ b/src/imio/smartweb/core/upgrades/configure.zcml @@ -394,6 +394,14 @@ provides="Products.GenericSetup.interfaces.EXTENSION" /> + + + + + + diff --git a/src/imio/smartweb/core/upgrades/profiles/1080_to_1081/registry.xml b/src/imio/smartweb/core/upgrades/profiles/1080_to_1081/registry.xml new file mode 100644 index 000000000..4f98d47ce --- /dev/null +++ b/src/imio/smartweb/core/upgrades/profiles/1080_to_1081/registry.xml @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/src/imio/smartweb/core/viewlets/configure.zcml b/src/imio/smartweb/core/viewlets/configure.zcml index 7039bbe4e..3fbda4c65 100644 --- a/src/imio/smartweb/core/viewlets/configure.zcml +++ b/src/imio/smartweb/core/viewlets/configure.zcml @@ -15,6 +15,16 @@ /> + + + + + + + + + + + + diff --git a/src/imio/smartweb/core/webcomponents/CLAUDE.md b/src/imio/smartweb/core/webcomponents/CLAUDE.md index 142074661..2050dafd7 100644 --- a/src/imio/smartweb/core/webcomponents/CLAUDE.md +++ b/src/imio/smartweb/core/webcomponents/CLAUDE.md @@ -7,11 +7,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ```bash npm run build # Production build → build/js/smartweb-webcomponents-compiled.js npm run build-dev # Dev build (source maps, no minification) -npm run watch # Dev server on port 2000 (proxies API to localhost:8080) +npm run watch # Vite dev server on port 2000 (proxies everything to localhost:8080 except its own module graph) npm run lint # ESLint (zero warnings tolerance) npm run prettier # Check formatting (4-space tabs, 100-char width, trailing comma es5) ``` +To actually see `npm run watch` changes reflected in Plone, run `make dev` from the buildout root +(`buildout.smartweb/`) instead of `make start` — it starts the instance with `VITE_DEV_URL=http://localhost:2000` +and this Vite dev server together. Plain `bin/instance`/`make start` never set `VITE_DEV_URL`, so they always +serve the built prod bundle — see "Build output" below. + ## Architecture ### Entry point & custom element registration @@ -78,7 +83,24 @@ Text filter debounce: only triggers fetch when input length > 2 characters. Firs ### Build output -Webpack 5 produces `build/js/smartweb-webcomponents-compiled.js` plus auto-split chunks. Dev server proxies `localhost:2000 → localhost:8080` (Plone). Performance budget: 2 MB assets / 750 KB entrypoint. +Vite (library mode, ES module output) produces `build/js/smartweb-webcomponents-compiled.js` — a thin entry +that imports lazy-loaded chunks (`build/js/chunks/*.js`, one per `@loadable/component`-wrapped widget) — +plus `build/css/smartweb-webcomponents-compiled.css`. These two fixed filenames are the only ones referenced +outside this package (`configure.zcml`, `profiles/default/registry/bundles.xml` in the parent +`imio.smartweb.core` package); chunk filenames are free to change since the browser resolves them itself via +relative ES module imports. + +Because Rollup only supports code-splitting for ES module output, the bundle is loaded as +`