Must Know: Initialization
Correct initialization is the baseline for every Diwa integration. Styles, loader setup, and readiness checks must be deterministic.
Prerequisites
- - Root layout control for head/body bootstrapping.
- - Diwa package installation in the consumer app.
- - A documented startup sequence for client-rendered routes.
Step 1: Install required packages
Install the core package and framework adapters when needed.
npm install @diwacopilot/components
# optional framework wrappers:
# npm install @diwacopilot/components-react
# npm install @diwacopilot/components-angular
# npm install @diwacopilot/components-vueStep 2: Load styles and register custom elements
Load Diwa CSS tokens and register custom elements once in the app shell.
<link rel="stylesheet" href="/stencil/diwa-components.css" />
<Script src="/stencil/diwa-components.esm.js" type="module" strategy="beforeInteractive" />Step 3: Gate tests with readiness helpers
Use readiness checks before interaction assertions in automation.
await customElements.whenDefined('diwa-button');
const node = document.querySelector('diwa-button');
await node?.componentOnReady?.();Implementation Notes
- - Initialization should be idempotent and run from one source.
- - Document startup ownership in code comments or docs to prevent regressions.
- - Coordinate loader setup with SSR/client boundaries in framework guides.
Troubleshooting
- - If events do not fire, check whether component registration happened before listeners were attached.
- - If components render unstyled, confirm stylesheet path and loading order.
- - If tests are flaky, add readiness waits before assertions and interactions.