refactor(igc-ts): cleanup project scripts setup

eslint.config.mjs

@@ -19,7 +19,7 @@ export default [
 		//],
 		parser: typescriptParser,
 		parserOptions: {
-        	project: '**/tsconfig.json',
+        	project: ['tsconfig.json', 'packages/ng-schematics/tsconfig.json', 'packages/igniteui-mcp/igniteui-doc-mcp/tsconfig.json'],
         	sourceType: 'module',
 		},
     },

packages/cli/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.ts

@@ -2,10 +2,12 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
+  IgcButtonComponent,
   IgcCardComponent,
+  IgcIconButtonComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcCardComponent);
+defineComponents(IgcCardComponent, IgcButtonComponent, IgcIconButtonComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {
@@ -20,7 +22,7 @@ export default class $(ClassName) extends LitElement {
       <igc-card>
         <igc-card-media style="max-height: 194px">
           <img
-            src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=180"
+            src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;q=180"
           />
         </igc-card-media>
         <igc-card-header>
@@ -46,9 +48,9 @@ export default class $(ClassName) extends LitElement {
           style="height: 1px; margin: 0 0 8px 0; background-color: rgba(0,0,0, 0.2); border: 0px"
         />
         <igc-card-actions>
-          <igc-button slot="start" variant="flat">Like</igc-button>
-          <igc-button slot="start" variant="flat">Learn More</igc-button>
-          <igc-icon slot="end" name="home" collection="default"></igc-icon>
+          <igc-button slot="start">Like</igc-button>
+          <igc-button slot="start">Learn More</igc-button>
+          <igc-icon-button slot="end" name="home" collection="default"></igc-icon-button>
         </igc-card-actions>
       </igc-card>
     `;

packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts

@@ -3,7 +3,7 @@ import { customElement, state } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcDockManagerComponent,
-  IgcDockManagerLayout,
+  type IgcDockManagerLayout,
 } from 'igniteui-dockmanager';
 
 defineComponents(IgcDockManagerComponent);

packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
+import { IgcGridComponent, type IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
 
 import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'
 

packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
-import { defineComponents, IgcButtonComponent, IgcCheckboxChangeEventArgs, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcButtonComponent, type IgcCheckboxChangeEventArgs, IgcSwitchComponent } from 'igniteui-webcomponents';
 import {
   IgcGridComponent
 } from 'igniteui-webcomponents-grids';

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/eslint.config.js

@@ -1,14 +1,16 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
+import { configs as litConfigs } from 'eslint-plugin-lit';
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,ts}'],
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,ts}'],
     extends: [
       js.configs.recommended,
+      litConfigs['flat/recommended'],
       tseslint.configs.recommended
     ],
     languageOptions: {

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/index.html

@@ -11,7 +11,7 @@
 <body class="ig-scrollbar">
   <app-root></app-root>
 
-  <script type="module" src="./dist/src/index.js"></script>
+  <script type="module" src="./src/index.ts"></script>
 </body>
 
 </html>

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json

@@ -3,43 +3,28 @@
   "version": "0.0.0",
   "private": true,
   "description": "WebComponents project for Ignite UI CLI",
-  "license": "MIT",
-  "author": "Infragistics",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
   "type": "module",
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./$(dashName).js": "./dist/src/$(dashName).js"
-  },
   "scripts": {
-    "start": "concurrently -k -r \"tsc --watch\" \"vite\"",
-    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
+    "start": "vite --open",
+    "build": "vite build",
     "start:build": "vite preview --open",
-    "lint": "eslint",
-    "test": "tsc --project tsconfig.test.json && vitest run"
+    "lint": "eslint",
+    "test": "vitest"
   },
   "dependencies": {
     "@vaadin/router": "^2.0.0",
-    "lit": "^3.3.2",
-    "typescript": "^5.9.3",
-    "igniteui-webcomponents": "~7.1.0"
+    "igniteui-webcomponents": "~7.1.0",
+    "lit": "^3.3.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@babel/preset-env": "^7.28.3",
     "@vitest/browser-playwright": "^4.1.0",
-    "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^9.2.1",
-    "deepmerge": "^4.3.1",
     "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.2.1",
     "globals": "^17.4.0",
     "igniteui-cli": "~$(cliVersion)",
     "playwright": "^1.58.2",
-    "rimraf": "^6.1.3",
-    "source-map": "^0.7.6",
-    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^7.0.0",
     "vite-plugin-pwa": "^1.2.0",

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/src/app/app-routing.ts

@@ -1,4 +1,4 @@
-import { Route } from '@vaadin/router';
+import { type Route } from '@vaadin/router';
 import './not-found/not-found.js';
 
 export const routes: Route[] = [

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json

@@ -1,34 +1,27 @@
 {
   "compilerOptions": {
-    "target": "es2021",
-    "module": "es2022",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": [
-      "es2021",
-      "dom",
-      "dom.iterable"
-    ],
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
+    "target": "ES2023",
     "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
-  "exclude": [
-    "test"
-  ],
-  "files": [
-    "src/index.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "include": ["src"]
 }

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts

@@ -1,6 +1,6 @@
-/// <reference types="vitest/config" />
-import { playwright } from '@vitest/browser-playwright'
-import { defineConfig } from 'vite'
+/// <reference types="vitest/config" />
+import { playwright } from '@vitest/browser-playwright'
+import { defineConfig } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -19,7 +19,6 @@ export default defineConfig({
     },
     target: 'es2021',
     minify: 'terser',
-    emptyOutDir: false,
     chunkSizeWarningLimit: 10 * 1024 * 1024 // 10 MB
   },
   test: {

packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html

@@ -12,7 +12,7 @@
 <body class="ig-scrollbar">
   <app-root></app-root>
 
-  <script type="module" src="./dist/src/index.js"></script>
+  <script type="module" src="./src/index.ts"></script>
 </body>
 
 </html>

packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json

@@ -3,21 +3,13 @@
   "version": "0.0.0",
   "private": true,
   "description": "WebComponents project for Ignite UI CLI",
-  "license": "MIT",
-  "author": "Infragistics",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
   "type": "module",
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./$(dashName).js": "./dist/src/$(dashName).js"
-  },
   "scripts": {
-    "start": "tsc && concurrently -k -r \"tsc --watch\" \"vite\"",
-    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
+    "start": "vite --open",
+    "build": "vite build",
     "start:build": "vite preview --open",
-    "lint": "eslint",
-    "test": "tsc --project tsconfig.test.json && vitest run"
+    "lint": "eslint",
+    "test": "vitest"
   },
   "dependencies": {
     "@vaadin/router": "^2.0.0",
@@ -30,24 +22,17 @@
     "igniteui-webcomponents-grids": "~7.0.0",
     "igniteui-webcomponents-inputs": "~7.0.0",
     "igniteui-webcomponents-layouts": "~7.0.0",
-    "lit": "^3.3.2",
-    "typescript": "^5.9.3"
+    "lit": "^3.3.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@babel/preset-env": "^7.28.3",
     "@vitest/browser-playwright": "^4.1.0",
-    "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^9.2.1",
-    "deepmerge": "^4.3.1",
     "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.2.1",
     "globals": "^17.4.0",
     "igniteui-cli": "~$(cliVersion)",
     "playwright": "^1.58.2",
-    "rimraf": "^6.1.3",
-    "source-map": "^0.7.6",
-    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^7.0.0",
     "vite-plugin-pwa": "^1.2.0",

packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/app-routing.ts

@@ -1,4 +1,4 @@
-import { Route } from '@vaadin/router';
+import { type Route } from '@vaadin/router';
 import './home/home.js';
 import './not-found/not-found.js';
 

packages/cli/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts

@@ -16,29 +16,32 @@ defineComponents(
 @customElement('app-root')
 export default class App extends LitElement {
   static styles = css`
+    :host {
+      display: flex;
+      height: 100%;
+    }
+
     router-outlet {
       height: 100%;
+      width: 100%;
       display: flex;
       text-align: center;
       flex-flow: column nowrap;
       justify-content: stretch;
       align-items: center;
-      overflow: inherit;
-    }
-
-    igc-nav-drawer {
-      float: left;
+      padding: 1rem;
+      box-sizing: border-box;
     }
   `;
 
   render() {
     return html`
-      <igc-nav-drawer open="true" position="relative">
+      <igc-nav-drawer open position="relative">
         <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
-        ${routes.filter(route => route.name).map(({path, name}) => html`
+        ${routes.filter(route => route.name).map(({path, name}) => html`
           <igc-nav-drawer-item>
             <span slot="content">
-              <a href="${path}">${name}<igc-ripple></igc-ripple></a>
+              <a href="${path}">${name}<igc-ripple></igc-ripple></a>
             </span>
           </igc-nav-drawer-item>
         `)}

spec/unit/update-spec.ts

@@ -1241,7 +1241,7 @@ export default class App extends LitElement {
 <body class="ig-scrollbar">
 	<app-root></app-root>
 
-	<script type="module" src="./dist/src/index.js"></script>
+	<script type="module" src="./src/index.ts"></script>
 </body>
 </html>
 	`,
@@ -1258,7 +1258,7 @@ export default class App extends LitElement {
 <body class="ig-scrollbar">
 	<app-root></app-root>
 
-	<script type="module" src="./dist/src/index.js"></script>
+	<script type="module" src="./src/index.ts"></script>
 </body>
 </html>
 	`