Skip to content

Commit 64eac99

Browse files
committed
chore(starters): add agents files
Signed-off-by: Cory Rylan <crylan@nvidia.com>
1 parent efb89f7 commit 64eac99

16 files changed

Lines changed: 416 additions & 0 deletions

File tree

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Elements Angular Starter
2+
3+
This file only covers how this starter wires Elements into Angular. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Register used Elements in the Angular component file that owns the template, as in `src/app/app.ts`.
8+
- Add `CUSTOM_ELEMENTS_SCHEMA` to the standalone component metadata before using `nve-*` tags in `app.html`.
9+
- Keep theme and utility CSS imports in `src/styles.css`; Angular component styles should stay local to component layout refinements.
10+
- Keep `nve-theme` and `nve-transition` on `src/index.html`.
11+
12+
## Angular Syntax
13+
14+
- Use normal Angular template syntax with custom elements: `[property]` for JavaScript properties, `[attr.name]` for attributes, and `(event)` for custom events.
15+
- Boolean attributes on custom elements usually need `[attr.hidden]="condition ? '' : null"` when the attribute semantics matter.
16+
- Use Angular router primitives outside or inside Elements slots normally; Elements do not own Angular state.
17+
18+
## Forms
19+
20+
- Use Elements form wrappers around native inputs so Angular forms keep owning value and validation state.
21+
- Bind Angular reactive forms to the nested native control, not to the `nve-*` wrapper.
22+
- Put Angular conditional rendering for validation messages on `nve-control-message` or around it, depending on the control state.
23+
24+
## Verification
25+
26+
- Run `pnpm run build` in `projects/starters/angular` after schema, import, or template changes.
27+
- Run `pnpm run lint` when editing TypeScript, HTML templates, or CSS.
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Elements Bundles Starter
2+
3+
This file only covers how this starter wires Elements into a static bundle page. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Load pre-built CSS bundles from `@nvidia-elements/styles`, `@nvidia-elements/themes`, and any optional package bundle in `src/index.html`.
8+
- Load pre-built JavaScript bundles with module scripts in `src/index.html`.
9+
- Keep bundle paths rooted through the Vite alias for `./node_modules` from `vite.config.ts`.
10+
- Use this starter only when loading all registered components is acceptable; it trades tree-shaking for drop-in integration.
11+
12+
## Optional Package Bundles
13+
14+
- Include an optional package bundle only when the page uses that package. The current starter includes Monaco because it renders `nve-monaco-input`.
15+
- Pair optional package JavaScript and CSS bundles when the package ships both.
16+
17+
## DOM Events
18+
19+
- Attach listeners with script code, not inline event handler attributes.
20+
- Query typed Elements only after the bundle import has run.
21+
22+
## Verification
23+
24+
- Run `pnpm run build` in `projects/starters/bundles` after changing bundle paths or static HTML.
25+
- Run `pnpm run dev` only when visual browser verification is needed.
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Elements Eleventy SSR Starter
2+
3+
This file only covers how this starter wires Elements into Eleventy with Lit SSR. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Configure Lit SSR in `eleventy.config.js` through `@lit-labs/eleventy-plugin-lit`.
8+
- Keep `mode: 'worker'` for SSR isolation unless the build requirement changes.
9+
- Provide server-renderable Elements through `componentModules`; include `@nvidia-elements/core/dist/icon/server.js` before component `define.js` entrypoints when icons can render server-side.
10+
- Use metadata to generate broad component entrypoint lists only for SSR demos that intentionally exercise many Elements.
11+
12+
## Hydration
13+
14+
- Import `@lit-labs/ssr-client/lit-element-hydrate-support.js` in the client module script before importing client-side `define.js` modules.
15+
- Match server `componentModules` and client `define.js` imports for components rendered in the HTML.
16+
17+
## Template Constraints
18+
19+
- Keep raw generated examples filtered away from components that are not SSR-safe for this starter.
20+
- If transforming example templates, keep the transforms local and explicit in `src/index.11ty.js`.
21+
22+
## Verification
23+
24+
- Run `pnpm run build` in `projects/starters/eleventy-ssr` after SSR config, metadata filtering, or template changes.
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Elements Eleventy Starter
2+
3+
This file only covers how this starter wires Elements into Eleventy. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Keep global Elements CSS in `src/_layouts/index.css`.
8+
- Register Elements used by layout or markdown content in `src/_layouts/index.ts`.
9+
- Keep shared page shell markup in `src/_layouts/index.11ty.js`; page files should supply content.
10+
- Use `@11ty/eleventy-plugin-vite` for bundling the layout entrypoint.
11+
12+
## Markdown Rendering
13+
14+
- Add `nve-text` and `nve-layout` attributes through the markdown-it renderer in `eleventy.config.js` when markdown should receive Elements typography.
15+
- Keep renderer mappings constrained to token types that markdown-it exposes predictably: headings, paragraphs, links, and lists.
16+
- Let raw `nve-*` HTML pass through markdown only when the page intentionally owns that markup.
17+
18+
## Routing
19+
20+
- Keep the `<base>` URL and Vite `base` aligned with `PAGES_BASE_URL`.
21+
- Use relative links in generated tab markup so static output works under the starter base path.
22+
23+
## Verification
24+
25+
- Run `pnpm run build` in `projects/starters/eleventy` after layout, renderer, or asset pipeline changes.
26+
- Run `pnpm run lint` when editing Eleventy config or layout TypeScript.

projects/starters/go/AGENTS.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Elements Go Starter
2+
3+
This file only covers how this starter wires Elements into Go templates. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Render Elements markup through `html/template` in `src/index.html`.
8+
- Keep dynamic values in the Go `PageData` shape and pass them into the template; do not concatenate HTML strings in handlers.
9+
- Use static bundles or a separate frontend build pipeline. This starter is the static-bundle path.
10+
11+
## Static Assets
12+
13+
- Treat the current CDN comments in `src/index.html` as placeholders until a real Elements CDN path exists.
14+
- If serving local bundles instead, add explicit static file handling in `main.go` and point CSS and module imports at that route.
15+
- Keep theme attributes on the root HTML template, not in Go handler code.
16+
17+
## Go Template Constraints
18+
19+
- Use escaped template output for data values.
20+
- Only use trusted template HTML for checked Elements markup.
21+
- Keep routing and rendering small; move repeated page shell code into templates before adding more routes.
22+
23+
## Verification
24+
25+
- Run `pnpm run build` in `projects/starters/go` after Go or template changes.
26+
- Run `pnpm run dev` for local rendering checks on `http://localhost:8080`.

projects/starters/hugo/AGENTS.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Elements Hugo Starter
2+
3+
This file only covers how this starter wires Elements into Hugo. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Mount Elements package `dist` folders in `hugo.toml` before referencing package assets from templates.
8+
- Keep static bundle CSS and module script loading in `layouts/baseof.html`.
9+
- Allow raw HTML through Goldmark only when content authors are trusted to write checked Elements markup.
10+
- Keep the Elements page shell in `layouts/baseof.html` and page-specific content in blocks or partials.
11+
12+
## Render Hooks
13+
14+
- Use Hugo render hooks to map markdown features onto Elements:
15+
- headings: add `nve-text` based on heading level.
16+
- links: add `nve-text="link"` and external-link attributes.
17+
- tables: render `nve-grid`, `nve-grid-header`, `nve-grid-row`, and cells.
18+
- code blocks: render `nve-codeblock`.
19+
- Register the package bundle for any component introduced by a render hook.
20+
21+
## Base URLs
22+
23+
- Keep local and hosted base URL handling in `baseof.html`.
24+
- Use relative links in tabs and partials so static output works under the hosted starter path.
25+
26+
## Verification
27+
28+
- Run `pnpm run build` in `projects/starters/hugo` after config, template, or render-hook changes.
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Elements Import Maps Starter
2+
3+
This file only covers how this starter wires Elements through browser import maps. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Keep the import map in `src/index.html` aligned with the packages copied by `build.js`.
8+
- Map both bare package names and trailing-slash subpaths for Lit packages and `@nvidia-elements/core`.
9+
- Import individual `define.js` files from the mapped `@nvidia-elements/core/` prefix.
10+
- Load CSS with normal `<link>` tags because there is no bundler to process CSS imports.
11+
12+
## Static Copy Script
13+
14+
- Update `build.js` whenever the import map references a new package that must exist in `dist/node_modules`.
15+
- Copy package `dist` folders for Elements packages; copy full dependency folders only when browser subpath imports require them.
16+
- Keep the copy list explicit.
17+
18+
## Constraints
19+
20+
- Use this starter for no-build prototypes and browser-native module loading.
21+
- Prefer a Vite starter when tree-shaking, TypeScript transforms, or production bundling matter.
22+
23+
## Verification
24+
25+
- Run `pnpm run build` in `projects/starters/importmaps` after import map or copy script changes.
26+
- Use `pnpm run dev` to catch browser import resolution errors.
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Elements Lit Library Starter
2+
3+
This file only covers how this starter wires Elements into reusable Lit components. For component APIs, use the Elements CLI/MCP documentation. For production core components, use repository component guidance; this starter is for reusable domain components outside `@nvidia-elements/core`.
4+
5+
## Integration Points
6+
7+
- Export side-effect-free classes from feature `index.ts` files.
8+
- Put custom element registration in sibling `define.ts` files.
9+
- Add every public deep import to `package.json#exports` and `typesVersions`.
10+
- Keep `./**/define.js` in `sideEffects` so bundlers preserve registration entrypoints.
11+
12+
## Composing Elements
13+
14+
- Import Elements classes from side-effect-free entrypoints when using a scoped registry.
15+
- Define composed Elements in the same registry used by `static shadowRootOptions.customElementRegistry`.
16+
- Use `define.js` entrypoints only for global registration tests or consuming app examples.
17+
18+
## Component Authoring
19+
20+
- Keep public props primitive unless an ADR or local requirement justifies the exception.
21+
- Emit standard DOM events with `bubbles: true` and `composed: true` when crossing the shadow root.
22+
- Prefer form-associated custom elements when the domain component behaves as one form control.
23+
24+
## Verification
25+
26+
- Run `pnpm run build`, `pnpm run test`, and `pnpm run lint` in `projects/starters/lit-library` after component, export, or package changes.

projects/starters/mpa/AGENTS.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Elements MPA Starter
2+
3+
This file only covers how this starter wires Elements into a Vite multi-page app. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Keep shared Elements CSS in `src/common/index.css`.
8+
- Keep shared Elements registrations in `src/common/index.ts`.
9+
- Import `./common/index.js` from each page entrypoint before page-specific code.
10+
- Add new HTML pages to `vite.config.ts` `build.rolldownOptions.input`.
11+
12+
## Page Structure
13+
14+
- Each page owns its `<title>`, metadata, stylesheet link, and module script.
15+
- Keep selected navigation state local to each page's static HTML.
16+
- Use root-relative dev paths in source HTML when Vite owns serving; verify build output after adding nested pages.
17+
18+
## View Transitions
19+
20+
- Keep `nve-transition` on the root HTML for global transitions.
21+
- Add component-level transition attributes only to pages that need them.
22+
23+
## Verification
24+
25+
- Run `pnpm run build` in `projects/starters/mpa` after adding pages or changing shared entries.
26+
- Run `pnpm run lint` after TypeScript or config changes.

projects/starters/nextjs/AGENTS.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Elements NextJS Starter
2+
3+
This file only covers how this starter wires Elements into Next.js. For component APIs, template validation, and project setup commands, use the Elements CLI/MCP documentation instead.
4+
5+
## Integration Points
6+
7+
- Use the React custom elements type augmentation in `src/global.d.ts`.
8+
- Keep global theme attributes on `src/pages/_document.tsx`.
9+
- Keep global CSS imports in `src/styles/globals.css`.
10+
- Register Elements in the page or component module that renders them.
11+
12+
## Next.js Runtime
13+
14+
- This starter uses the pages router and `output: 'export'`.
15+
- Keep `basePath`, `output`, and `distDir` aligned in `next.config.ts` for static starter output.
16+
- Import server-specific modules, such as `@nvidia-elements/core/icon/server.js`, only when a component needs server render support.
17+
18+
## SSR Status
19+
20+
- Treat `@lit-labs/nextjs` integration as experimental in this starter. Do not enable it casually; the current config leaves it commented with the upstream issue.
21+
- If enabling Lit SSR, import or configure it before any Elements registration imports and run a full build.
22+
23+
## JSX Syntax
24+
25+
- Use React custom element event naming such as `onclose` for a `close` event.
26+
- Use primitive JSX props for custom element properties and strings for attributes when the Elements API expects attributes.
27+
28+
## Verification
29+
30+
- Run `pnpm run build` in `projects/starters/nextjs` after React, config, SSR, or type changes.
31+
- Run `pnpm run lint` after TSX or config edits.

0 commit comments

Comments
 (0)