Vanilla JS: Getting Started

Prerequisites

• - Node.js 20+ and npm/pnpm/yarn.
• - A project scaffold for your framework (Vite, Next.js, Angular CLI, or Vue tooling).
• - Basic familiarity with custom-element event handling.

Step 1: Install Packages

Install the required package set for this framework integration.

npm install @diwacopilot/components

Step 2: Register and Initialize

Register components once at app startup so every page can render Diwa elements correctly.

// main.ts
import { defineCustomElements } from '@diwacopilot/components/loader';

defineCustomElements();

Step 3: Render Your First Component

Start with a simple action component to verify styling, registration, and framework rendering.

<diwa-button variant="primary">Save</diwa-button>

Step 4: Handle Events

Wire event handling early to validate data flow and interaction behavior in your app.

const button = document.querySelector('diwa-button');

button?.addEventListener('click', () => {
  console.log('Save clicked');
});

SSR and Testing Notes

• - On server-rendered HTML, Diwa elements upgrade after the loader runs in the browser.
• - For unit tests in jsdom, wait for element definition before asserting behavior.
• - For interaction fidelity, prefer browser-based tests for complex keyboard and focus behavior.

Troubleshooting

• - If a component renders as plain markup only, confirm defineCustomElements() runs once at startup.
• - If tokens look missing, ensure your app includes Diwa global styles or equivalent token definitions.
• - If custom events appear missing, attach listeners after the element is in the DOM.

Next Actions