igniteui-wc-integrate-with-framework

# Integrate with Framework This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference. ## Before You Answer - Choose the package first, then load the framework reference. - Do not assume every setup flow uses `igniteui-webcomponents`. - If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid. ### Package Routing | Component family | Package | |---|---| | General UI components | `igniteui-webcomponents` | | Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) | | Grid Lite | `igniteui-grid-lite` | | Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) | | Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) | If the request only says "grid", infer the package from the requested features: - Use `igniteui-webcomponents-grids` for editing, paging, sorting, filtering, summaries, grouping, hierarchical data, or pivot features. - Use `igniteui-grid-lite` for lightweight tabular data. ## Example Usage - "How do I use igniteui-webcomponents in my React app?" - "Integrate the button component in Angular" - "Set up igniteui-webcomponents in Vue 3" - "Help me add web components to my vanilla JS project" ## Related Skills - [igniteui-wc-optimize-bundle-size](../igniteui-wc-optimize-bundle-size/SKILL.md) - Reduce bundle size after integration - [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Style components after setup ## When to Use - User wants to add igniteui-webcomponents to a framework project - User is experiencing framework-specific integration issues - User needs help with component imports and registration - User asks about React, Angular, Vue, or vanilla JS setup --- ## Framework Detection Before loading a reference, identify the target framework from the project context. Check the following signals in order: ### 1. Detect React **Evidence to look for:** - `package.json` contains `"react"` or `"react-dom"` in `dependencies` or `devDependencies` - Files with `.tsx` or `.jsx` extensions exist in `src/` - Entry point imports `ReactDOM` or `createRoot` - `vite.config.ts` uses `@vitejs/plugin-react` or `@vitejs/plugin-react-swc` → **Load:** [react.md](./references/react.md) --- ### 2. Detect Angular **Evidence to look for:** - `package.json` contains `"@angular/core"` in `dependencies` - `angular.json` file exists in the workspace root - Files with `.component.ts`, `.module.ts`, or `.component.html` patterns exist - Entry point calls `bootstrapApplication` or `platformBrowserDynamic` → **Load:** [angular.md](./references/angular.md) --- ### 3. Detect Vue 3 **Evidence to look for:** - `package.json` contains `"vue"` in `dependencies` or `devDependencies` - Files with `.vue` extensions exist in `src/` - `vite.config.ts` uses `@vitejs/plugin-vue` - Entry point calls `createApp` → **Load:** [vue.md](./references/vue.md) --- ### 4. Vanilla JavaScript / HTML (fallback) **Evidence to look for:** - No major framework found in `package.json` - Plain `.html` files reference a `<script type="module">` - Entry point is a plain `.js` or `.ts` file with no framework imports - User explicitly asks for vanilla JS or HTML integration → **Load:** [vanilla-js.md](./references/vanilla-js.md) --- ## If the Framework Cannot Be Determined Ask the user directly: > "What framework or platform are you using? (React, Angular, Vue 3, or Vanilla JS / HTML)" Then load the matching reference from the options above. --- ## Framework Reference Files | Framework / Platform | Reference | |----------------------|-----------| | React | [react.md](./references/react.md) | | Angular | [angular.md](./references/angular.md) | | Vue 3 | [vue.md](./references/vue.md) | | Vanilla JS / HTML | [vanilla-js.md](./references/vanilla-js.md) | Each reference covers: - Installation - Theme import (required for styling) - Component registration - Usage examples - TypeScript support - Platform-specific considerations - Common issues and solutions