igniteui-cli 10.0.5 → 10.1.0-alpha.1

package/lib/templates/IgniteUIForWebComponentsTemplate.d.ts

@@ -19,7 +19,7 @@ export declare class IgniteUIForWebComponentsTemplate implements Template {
     generateConfig(name: string, options: {}): {
         [key: string]: any;
     };
-    registerInProject(projectPath: string, fullName: string, options?: AddTemplateArgs): void;
+    registerInProject(projectPath: string, fullName: string, options?: AddTemplateArgs, defaultPath?: boolean): void;
     getExtraConfiguration(): ControlExtraConfiguration[];
     setExtraConfiguration(extraConfigKeys: {}): void;
     protected getBaseVariables(name: string): {

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -27,11 +27,22 @@ class IgniteUIForWebComponentsTemplate {
         }
         return Object.assign({}, options["extraConfig"], this.getBaseVariables(name));
     }
-    registerInProject(projectPath, fullName, options) {
+    registerInProject(projectPath, fullName, options, defaultPath = false) {
+        cli_core_1.App.initialize(); // remove after POC
+        if (!options.parentName) {
+            return;
+        }
+        const routeModulePath = options.parentRoutingModulePath;
+        const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, routeModulePath));
         if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN)
-            .fileExists("src/app/app-routing.ts")) {
-            const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, "src/app/app-routing.ts"));
-            routingModule.addRoute(path.join(projectPath, `src/app/${this.folderName(fullName)}/${this.fileName(fullName)}.component.ts`), this.fileName(fullName), cli_core_1.Util.nameFromPath(fullName));
+            .fileExists(routeModulePath)) {
+            if (defaultPath) {
+                routingModule.addRoute("", options.selector, cli_core_1.Util.nameFromPath(fullName), options.routerChildren, undefined);
+            }
+            routingModule.addRoute(this.fileName(fullName), options.selector, cli_core_1.Util.nameFromPath(fullName), options.routerChildren, undefined);
+            if (options.hasChildren) {
+                routingModule.addRoute(this.fileName(`${options.modulePath}-routing.ts`), options.selector, cli_core_1.Util.nameFromPath(`${options.modulePath}-routing.ts`), options.routerChildren, options.importAlias);
+            }
         }
     }
     getExtraConfiguration() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "10.0.5",
+  "version": "10.1.0-alpha.1",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~14.1.1005",
-    "@igniteui/cli-core": "~10.0.5",
+    "@igniteui/angular-templates": "~14.1.1010-alpha.1",
+    "@igniteui/cli-core": "~10.1.0-alpha.1",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

package/templates/webcomponents/TypeScriptFileUpdate.d.ts

@@ -18,18 +18,18 @@ export declare class TypeScriptFileUpdate {
     constructor(targetPath: string);
     /** Applies accumulated transforms, saves and formats the file */
     finalize(): void;
-    addRoute(filePath: string, linkPath: string, linkText: string, routesVariable?: string): void;
+    addRoute(path: string, component: string, name: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
     protected initState(): void;
     protected loadImportsMeta(): {
         lastIndex: number;
         modulePaths: any[];
     };
-    protected addRouteModuleEntry(targetPath: string, filePath: string, linkText: string, linkPath: string, routesVariable?: string, parentRoutePath?: string): void;
-    protected requestImport(modulePath: string): void;
+    protected addRouteModuleEntry(path: string, component: string, name: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    protected requestImport(modulePath: string, routerAlias: string): void;
     /** Add `import` statements not previously found in the file  */
     protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string): ts.ImportDeclaration;
+    protected createIdentifierImport(importPath: string, as: string): ts.ImportDeclaration;
     /** Transformation to apply edits to existing named import declarations */
     protected importsTransformer: ts.TransformerFactory<ts.Node>;
     /** Format a TS source file, very TBD */

package/templates/webcomponents/TypeScriptFileUpdate.js

@@ -46,8 +46,8 @@ class TypeScriptFileUpdate {
         // reset state in case of further updates
         this.initState();
     }
-    addRoute(filePath, linkPath, linkText, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        this.addRouteModuleEntry(filePath, linkPath, linkText, routesVariable);
+    addRoute(path, component, name, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        this.addRouteModuleEntry(path, component, name, routerChildren, importAlias, routesVariable);
     }
     //#region File state
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
@@ -82,19 +82,25 @@ class TypeScriptFileUpdate {
         return meta;
     }
     //#endregion File state
-    addRouteModuleEntry(targetPath, filePath, linkText, linkPath, routesVariable = DEFAULT_ROUTES_VARIABLE, parentRoutePath) {
-        let className;
-        const relativePath = "./" + filePath + "/" + filePath;
-        className = "app-" + filePath;
-        this.requestImport(relativePath);
+    addRouteModuleEntry(path, component, name, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        const isRouting = path.indexOf("routing") >= 0;
+        if (isRouting && this.targetSource.text.indexOf(path.slice(0, -3)) > 0) {
+            return;
+        }
+        const moduleName = path.substring(0, path.indexOf("-routing"));
+        if (path) {
+            const relativePath = isRouting ?
+                "./" + moduleName + "/" + path.slice(0, -3) : "./" + path + "/" + path;
+            this.requestImport(relativePath, importAlias);
+        }
         // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
         const transformer = (context) => (rootNode) => {
             // the visitor that should be used when adding routes to the main route array
             const conditionalVisitor = (node) => {
                 if (node.kind === ts.SyntaxKind.ArrayLiteralExpression) {
-                    const newObject = this.createRouteEntry(filePath, className, linkText);
+                    const newObject = this.createRouteEntry(path, component, name, routerChildren);
                     const array = node;
-                    this.createdStringLiterals.push(filePath, linkText);
+                    this.createdStringLiterals.push(path, name);
                     const notFoundWildCard = ".*";
                     const nodes = ts.visitNodes(array.elements, visitor);
                     const errorRouteNode = nodes.filter(element => element.getText().includes(notFoundWildCard))[0];
@@ -118,11 +124,19 @@ class TypeScriptFileUpdate {
                     return ts.visitEachChild(node, conditionalVisitor, context);
                 }
             };
-            const visitCondition = (node) => {
-                return node.kind === ts.SyntaxKind.VariableDeclaration &&
-                    node.name.getText() === routesVariable &&
-                    node.type.getText() === "Route[]";
-            };
+            let visitCondition;
+            if (!isRouting) {
+                visitCondition = (node) => {
+                    return node.kind === ts.SyntaxKind.VariableDeclaration &&
+                        node.name.getText() === routesVariable &&
+                        node.type.getText() === "Route[]";
+                };
+            }
+            else {
+                visitCondition = (node) => {
+                    return undefined;
+                };
+            }
             const visitor = this.createVisitor(conditionalVisitor, visitCondition, context);
             context.enableSubstitution(ts.SyntaxKind.ClassDeclaration);
             return ts.visitNode(rootNode, visitor);
@@ -132,11 +146,12 @@ class TypeScriptFileUpdate {
         }).transformed[0];
         this.finalize();
     }
-    requestImport(modulePath) {
+    requestImport(modulePath, routerAlias) {
         const existing = this.requestedImports.find(x => x.from === modulePath);
         if (!existing) {
             // new imports, check if already exists in file
             this.requestedImports.push({
+                as: routerAlias,
                 from: modulePath,
                 edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
             });
@@ -153,14 +168,27 @@ class TypeScriptFileUpdate {
         }
         const newStatements = ts.factory.createNodeArray([
             ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
-            ...newImports.map(x => this.createIdentifierImport(x.from)),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as)),
             ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
         ]);
         newImports.forEach(x => this.createdStringLiterals.push(x.from));
         this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
     }
-    createIdentifierImport(importPath) {
-        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, undefined, ts.factory.createStringLiteral(importPath));
+    createIdentifierImport(importPath, as) {
+        let exportedObject;
+        let exportedObjectName;
+        let importClause;
+        if (as) {
+            exportedObject = "routes";
+            exportedObjectName = as.replace(/\s/g, "");
+            importClause = ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+                ts.factory.createImportSpecifier(false, ts.factory.createIdentifier(exportedObject), ts.factory.createIdentifier(exportedObjectName))
+            ]));
+        }
+        else {
+            importClause = undefined;
+        }
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath));
         return importDeclaration;
     }
     //#endregion ts.TransformerFactory
@@ -297,11 +325,17 @@ class TypeScriptFileUpdate {
             return node;
         };
     }
-    createRouteEntry(filePath, className, linkText) {
+    createRouteEntry(filePath, className, linkText, routerAlias) {
         const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(filePath));
         const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createStringLiteral(className));
         const routeData = ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(linkText));
-        return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+        if (routerAlias) {
+            const childrenData = ts.factory.createPropertyAssignment("children", ts.factory.createIdentifier(routerAlias));
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData, childrenData]);
+        }
+        else {
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+        }
     }
 }
 exports.TypeScriptFileUpdate = TypeScriptFileUpdate;

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

@@ -5,7 +5,6 @@
   <meta charset="utf-8">
   <base href="/">
   <title>Ignite UI for Web Components</title>
-  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
   <link rel="stylesheet" href="./styles.css">
 </head>
 
@@ -14,4 +13,5 @@
 
   <script type="module" src="./dist/src/index.js"></script>
 </body>
+
 </html>

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

@@ -21,43 +21,34 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "~3.4.0",
-    "igniteui-webcomponents-grids": "~3.2.1",
-    "igniteui-webcomponents-core": "~3.2.1",
-    "igniteui-webcomponents-layouts": "~3.2.1",
-    "igniteui-webcomponents-inputs": "~3.2.1",
-    "igniteui-webcomponents-charts": "~3.2.1",
-    "igniteui-webcomponents-gauges": "~3.2.1",
-    "igniteui-dockmanager": "~1.8.0",
-    "@igniteui/material-icons-extended": "^2.11.0",
     "lit": "^2.0.2",
     "typescript": "^4.5.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.4",
-    "@open-wc/testing": "^2.5.33",
     "@open-wc/building-rollup": "^2.0.1",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "rollup-plugin-copy-assets": "^2.0.3",
-    "@open-wc/eslint-config": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "@web/dev-server": "^0.1.22",
     "@web/rollup-plugin-html": "^1.10.1",
     "@web/rollup-plugin-import-meta-assets": "^1.0.7",
-    "babel-plugin-template-html-minifier": "^4.1.0",
     "@web/test-runner": "next",
-    "igniteui-cli": "~$(cliVersion)",
+    "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^6.3.0",
     "deepmerge": "^4.2.2",
+    "eslint": "^7.32.0",
+    "igniteui-cli": "~10.0.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.0",
+    "rollup-plugin-copy-assets": "^2.0.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-workbox": "^6.2.0",
-    "eslint": "^7.32.0",
-    "tslib": "^2.3.1",
-    "source-map": "^0.7.3"
+    "source-map": "^0.7.3",
+    "tslib": "^2.3.1"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -68,20 +59,9 @@
       "@typescript-eslint"
     ],
     "rules": {
-      "linebreak-style": "off",
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-extraneous-dependencies": "off",
       "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
+      "linebreak-style": "off"
     }
   }
 }

package/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs

@@ -1,11 +1,11 @@
-import nodeResolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import copy from 'rollup-plugin-copy-assets';
+import nodeResolve from '@rollup/plugin-node-resolve';
 import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
+import path from 'path';
+import copy from 'rollup-plugin-copy-assets';
 import { terser } from 'rollup-plugin-terser';
 import { generateSW } from 'rollup-plugin-workbox';
-import path from 'path';
 
 export default {
   input: 'index.html',

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

@@ -1,11 +1,7 @@
-import {
-  Route
-} from '@vaadin/router';
-import './home/home.js';
+import { Route } from '@vaadin/router';
 import './not-found/not-found.js';
 
 export const routes: Route[] = [
-  { path: '/', component: 'app-home', name: 'Home' },
   // The fallback route should always be after other alternatives.
   { path: '(.*)', component: 'app-not-found' },
 ];

package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.ts

@@ -1,6 +1,6 @@
-import { html, css, LitElement } from 'lit';
+import { Router } from '@vaadin/router';
+import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { Router, } from '@vaadin/router';
 import { routes } from './app-routing.js';
 
 @customElement('app-root')

package/templates/webcomponents/igc-ts/projects/_base/files/styles.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
   margin: 0px;
   background: #fafafa;

package/templates/webcomponents/igc-ts/projects/_base/files/web-dev-server.config.mjs

@@ -4,24 +4,24 @@
 const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-	open: '/',
-	/** Use regular watch mode if HMR is not enabled. */
-	watch: !hmr,
-	/** Resolve bare module imports */
-	nodeResolve: {
-		exportConditions: ['browser', 'development'],
-	},
+  open: '/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
 
-	/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-	// esbuildTarget: 'auto'
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
 
-	/** Set appIndex to enable SPA routing */
-	appIndex: './index.html',
+  /** Set appIndex to enable SPA routing */
+  appIndex: './index.html',
 
-	plugins: [
-		/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-		// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-	],
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
 
-	// See documentation for all available options
+  // See documentation for all available options
 });

package/templates/webcomponents/igc-ts/projects/_base/files/web-test-runner.config.mjs

@@ -3,39 +3,39 @@
 const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-	/** Test files to run */
-	files: 'dist/src/app/**/*.test.js',
-
-	/** Resolve bare module imports */
-	nodeResolve: {
-		exportConditions: ['browser', 'development'],
-	},
-
-	/** Filter out lit dev mode logs */
-	filterBrowserLogs(log) {
-		for (const arg of log.args) {
-			if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-				return false;
-			}
-		}
-		return true;
-	},
-
-	/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-	// esbuildTarget: 'auto',
-
-	/** Amount of browsers to run concurrently */
-	// concurrentBrowsers: 2,
-
-	/** Amount of test files per browser to test concurrently */
-	// concurrency: 1,
-
-	/** Browsers to run tests on */
-	// browsers: [
-	//   playwrightLauncher({ product: 'chromium' }),
-	//   playwrightLauncher({ product: 'firefox' }),
-	//   playwrightLauncher({ product: 'webkit' }),
-	// ],
-
-	// See documentation for all available options
-});
+  /** Test files to run */
+  files: 'dist/src/app/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});

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

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+  <title>Ignite UI for Web Components</title>
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+  <app-root></app-root>
+
+  <script type="module" src="./dist/src/index.js"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,75 @@
+{
+  "name": "$(dashName)",
+  "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\" \"wds\"",
+    "build": "rimraf dist && tsc && rollup -c rollup.config.mjs",
+    "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
+    "lint": "eslint --ext .js,.ts,.html . --ignore-path .gitignore",
+    "test": "tsc && wtr"
+  },
+  "dependencies": {
+    "@vaadin/router": "^1.7.4",
+    "@igniteui/material-icons-extended": "^2.11.0",
+    "igniteui-dockmanager": "~1.8.0",
+    "igniteui-webcomponents": "~3.4.0",
+    "igniteui-webcomponents-charts": "~3.2.1",
+    "igniteui-webcomponents-core": "~3.2.1",
+    "igniteui-webcomponents-gauges": "~3.2.1",
+    "igniteui-webcomponents-grids": "~3.2.1",
+    "igniteui-webcomponents-inputs": "~3.2.1",
+    "igniteui-webcomponents-layouts": "~3.2.1",
+    "lit": "^2.0.2",
+    "typescript": "^4.5.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.4",
+    "@open-wc/building-rollup": "^2.0.1",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "@web/dev-server": "^0.1.22",
+    "@web/rollup-plugin-html": "^1.10.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "@web/test-runner": "next",
+    "babel-plugin-template-html-minifier": "^4.1.0",
+    "concurrently": "^6.3.0",
+    "deepmerge": "^4.2.2",
+    "eslint": "^7.32.0",
+    "igniteui-cli": "~10.0.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-copy-assets": "^2.0.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-workbox": "^6.2.0",
+    "source-map": "^0.7.3",
+    "tslib": "^2.3.1"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "import/no-unresolved": "off"
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Route } from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export const routes: Route[] = [
+  { path: '/', component: 'app-home', name: 'Home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.d.ts

@@ -0,0 +1,8 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgcProject } from "../_base";
+export declare class BaseWithHomeIgcProject extends BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    get templatePaths(): string[];
+}

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseWithHomeIgcProject = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class BaseWithHomeIgcProject extends _base_1.BaseIgcProject {
+    constructor() {
+        super(...arguments);
+        this.id = "base with home";
+        this.name = "Base With Home";
+        this.description = "Empty project layout structure for Ignite UI for Web Components";
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.BaseWithHomeIgcProject = BaseWithHomeIgcProject;

package/templates/webcomponents/igc-ts/projects/base/index.d.ts

@@ -0,0 +1,14 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgcProject } from "../_base";
+export declare class BasePageTemplate extends BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    framework: string;
+    projectType: string;
+    dependencies: string[];
+    hasExtraConfiguration: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: BasePageTemplate;
+export default _default;

package/templates/webcomponents/igc-ts/projects/base/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePageTemplate = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class BasePageTemplate extends _base_1.BaseIgcProject {
+    constructor() {
+        super(...arguments);
+        this.id = "base";
+        this.name = "Base Project";
+        this.description = "Project structure with routing";
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.BasePageTemplate = BasePageTemplate;
+exports.default = new BasePageTemplate();

package/templates/webcomponents/igc-ts/projects/empty/index.d.ts

@@ -1,6 +1,6 @@
 import { ProjectTemplate } from "@igniteui/cli-core";
-import { BaseIgcProject } from "../_base";
-export declare class EmptyPageTemplate extends BaseIgcProject implements ProjectTemplate {
+import { BaseWithHomeIgcProject } from "../_base_with_home";
+export declare class EmptyPageTemplate extends BaseWithHomeIgcProject implements ProjectTemplate {
     id: string;
     name: string;
     description: string;

package/templates/webcomponents/igc-ts/projects/empty/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyPageTemplate = void 0;
 const path = require("path");
-const _base_1 = require("../_base");
-class EmptyPageTemplate extends _base_1.BaseIgcProject {
+const _base_with_home_1 = require("../_base_with_home");
+class EmptyPageTemplate extends _base_with_home_1.BaseWithHomeIgcProject {
     constructor() {
         super(...arguments);
         this.id = "empty";

package/templates/webcomponents/igc-ts/projects/side-nav/index.d.ts

@@ -1,6 +1,6 @@
 import { ProjectTemplate } from "@igniteui/cli-core";
-import { BaseIgcProject } from "../_base";
-export declare class SideNavProject extends BaseIgcProject implements ProjectTemplate {
+import { BaseWithHomeIgcProject } from "../_base_with_home";
+export declare class SideNavProject extends BaseWithHomeIgcProject implements ProjectTemplate {
     id: string;
     name: string;
     description: string;

package/templates/webcomponents/igc-ts/projects/side-nav/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideNavProject = void 0;
 const path = require("path");
-const _base_1 = require("../_base");
-class SideNavProject extends _base_1.BaseIgcProject {
+const _base_with_home_1 = require("../_base_with_home");
+class SideNavProject extends _base_with_home_1.BaseWithHomeIgcProject {
     constructor() {
         super(...arguments);
         this.id = "side-nav";