mix tessera.gen.gallery (Noizu.Tessera v0.2.0)

Copy Markdown View Source

Scaffolds the tessera component gallery for a package in the current Mix project:

mix tessera.gen.gallery
mix tessera.gen.gallery --package PersonaKit --out gallery

Every use Noizu.Tessera.Package includes gallery support by default (it exposes cem/0); this task turns that into a runnable, FRAMEWORK- AGNOSTIC gallery — a static HTML page plus the package's own component bundles, no framework involved:

  • gallery/index.html — the static page;
  • gallery/src/main.mjs — esbuild entry importing the package's component .mjs modules (their load-bearing register() defines the elements) and the tessera gallery runtime (priv/gallery/gallery.mjs);
  • gallery/custom-elements.json — the package's CEM, which the runtime reads to render, per component: a live demo, typed attribute/property editors, slot-content editors, CSS custom-property editors and an event log (event name + camelCase detail);
  • gallery/package.json + gallery/serve.mjs — esbuild build and a dependency-free static server (http://localhost:5588, PORT overridable).

Then:

npm install        # in the PACKAGE root — esbuild resolves the
                   # components' bare imports (lit, @noizu/tessera-core)
                   # from the component files' own directory chain
cd gallery && npm install && npm run build && npm run serve

Re-run the task after changing the package's components to refresh the entry + manifest. Compiles the project first.