igniteui-cli 13.1.13-beta.0 → 13.1.13-beta.3

package/lib/templates/IgniteUIForReactTemplate.js

@@ -58,7 +58,7 @@ class IgniteUIForReactTemplate {
             let filePath = path.posix.join(projectPath, options.modulePath, `${lowerDashed}.tsx`);
             const routingModule = new ReactTypeScriptFileUpdate_1.ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
             if (defaultPath) {
-                routingModule.addRoute("", options.className, nameFromPath, filePath, options.routerChildren, undefined);
+                routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, undefined, defaultPath);
             }
             routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, undefined);
             if (options.hasChildren) {

package/package.json

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

package/templates/react/ReactTypeScriptFileUpdate.d.ts

@@ -18,18 +18,18 @@ export declare class ReactTypeScriptFileUpdate {
     constructor(targetPath: string);
     /** Applies accumulated transforms, saves and formats the file */
     finalize(): void;
-    addRoute(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    addRoute(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, defaultRoute?: boolean): void;
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
     protected initState(): void;
     protected loadImportsMeta(): {
         lastIndex: number;
         modulePaths: any[];
     };
-    protected addRouteModuleEntry(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
-    protected requestImport(modulePath: string, routerAlias: string, componentName: string): void;
+    protected addRouteModuleEntry(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, defaultRoute?: boolean): void;
+    protected requestImport(modulePath: string, routerAlias: string, componentName: string, namedImport?: boolean): void;
     /** Add `import` statements not previously found in the file  */
     protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string, as: string, component: string): ts.ImportDeclaration;
+    protected createIdentifierImport(importPath: string, as: string, component: string, namedImport: boolean): 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/react/ReactTypeScriptFileUpdate.js

@@ -46,8 +46,8 @@ class ReactTypeScriptFileUpdate {
         // reset state in case of further updates
         this.initState();
     }
-    addRoute(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable);
+    addRoute(path, component, name, filePath, routerChildren, importAlias, defaultRoute = false) {
+        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, defaultRoute);
     }
     //#region File state
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
@@ -82,12 +82,15 @@ class ReactTypeScriptFileUpdate {
         return meta;
     }
     //#endregion File state
-    addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        const isRouting = path.indexOf("routes") >= 0;
+    addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, defaultRoute = false) {
+        const isRouting = path.indexOf(DEFAULT_ROUTES_VARIABLE) >= 0;
         if (isRouting && this.targetSource.text.indexOf(path.slice(0, -4)) > 0) {
             return;
         }
-        if (path) {
+        if (defaultRoute) {
+            this.requestImport("react-router-dom", undefined, "redirect", true);
+        }
+        else {
             const relativePath = cli_core_1.Util.relativePath(this.targetPath, filePath, true, true);
             this.requestImport(relativePath, importAlias, component);
         }
@@ -96,7 +99,7 @@ class ReactTypeScriptFileUpdate {
             // 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(path, component, name, routerChildren);
+                    const newObject = this.createRouteEntry(path, component, name, routerChildren, defaultRoute);
                     const array = node;
                     this.createdStringLiterals.push(path, name);
                     const notFoundWildCard = ".*";
@@ -126,7 +129,7 @@ class ReactTypeScriptFileUpdate {
             if (!isRouting) {
                 visitCondition = (node) => {
                     return node.kind === ts.SyntaxKind.VariableDeclaration &&
-                        node.name.getText() === routesVariable;
+                        node.name.getText() === DEFAULT_ROUTES_VARIABLE;
                     // no type currently
                     //(node as ts.VariableDeclaration).type.getText() === "Route[]";
                 };
@@ -145,20 +148,19 @@ class ReactTypeScriptFileUpdate {
         }).transformed[0];
         this.finalize();
     }
-    requestImport(modulePath, routerAlias, componentName) {
+    requestImport(modulePath, routerAlias, componentName, namedImport = false) {
         const existing = this.requestedImports.find(x => x.from === modulePath);
+        // TODO: better check for named imports. There could be several named imports from same modulePath
         if (!existing) {
             // new imports, check if already exists in file
             this.requestedImports.push({
                 as: routerAlias,
                 from: modulePath,
                 component: componentName,
-                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
+                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1,
+                namedImport
             });
         }
-        else {
-            return;
-        }
     }
     /** Add `import` statements not previously found in the file  */
     addNewFileImports() {
@@ -168,13 +170,13 @@ class ReactTypeScriptFileUpdate {
         }
         const newStatements = ts.factory.createNodeArray([
             ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
-            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component)),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component, x.namedImport)),
             ...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, as, component) {
+    createIdentifierImport(importPath, as, component, namedImport) {
         let exportedObject;
         let exportedObjectName;
         let importClause;
@@ -186,7 +188,14 @@ class ReactTypeScriptFileUpdate {
             ]));
         }
         else {
-            importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+            if (namedImport) {
+                const importSpecifier = ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(component));
+                const imports = ts.factory.createNamedImports([importSpecifier]);
+                importClause = ts.factory.createImportClause(false, undefined, imports);
+            }
+            else {
+                importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+            }
         }
         const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath, true));
         return importDeclaration;
@@ -316,7 +325,14 @@ class ReactTypeScriptFileUpdate {
             return node;
         };
     }
-    createRouteEntry(path, component, name, routerAlias) {
+    createRouteEntry(path, component, name, routerAlias, defaultRoute = false) {
+        if (defaultRoute) {
+            // for default route in React we should generate index: true, loader: () => redirect(path)
+            const index = ts.factory.createPropertyAssignment("index", ts.factory.createTrue());
+            const loader = ts.factory.createArrowFunction(undefined, undefined, [], undefined, undefined, ts.factory.createCallExpression(ts.factory.createIdentifier("redirect"), [], [ts.factory.createStringLiteral(path, true)]));
+            const redirect = ts.factory.createPropertyAssignment("loader", loader);
+            return ts.factory.createObjectLiteralExpression([index, redirect]);
+        }
         const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(path, true));
         const jsxElement = ts.factory.createJsxSelfClosingElement(ts.factory.createIdentifier(component), [], undefined);
         const routeComponent = ts.factory.createPropertyAssignment("element", jsxElement);
@@ -325,9 +341,7 @@ class ReactTypeScriptFileUpdate {
             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]);
-        }
+        return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
     }
 }
 exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/react/igr-ts/bullet-graph/default/index.js

@@ -12,7 +12,7 @@ class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.name = "Bullet Graph";
         this.description = `allows for a linear and concise view of measures compared against a scale.`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-gauges@18.3.0"];
+        this.packages = ["igniteui-react-gauges@~18.6.0"];
     }
 }
 module.exports = new IgrTsBulletGraphTemplate();

package/templates/react/igr-ts/category-chart/default/index.js

@@ -13,7 +13,7 @@ class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForR
         this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-charts@18.3.0"];
+        this.packages = ["igniteui-react-charts@~18.6.0"];
     }
 }
 module.exports = new IgrTsCategoryChartTemplate();

package/templates/react/igr-ts/doughnut-chart/default/index.js

@@ -12,7 +12,7 @@ class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForR
         this.name = "Doughnut Chart";
         this.description = `proportionally illustrate the occurrences of variables.`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-charts@18.3.0"];
+        this.packages = ["igniteui-react-charts@~18.6.0"];
     }
 }
 module.exports = new IgrTsDoughnutChartTemplate();

package/templates/react/igr-ts/financial-chart/default/index.js

@@ -14,7 +14,7 @@ class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-charts@18.3.0"];
+        this.packages = ["igniteui-react-charts@~18.6.0"];
     }
 }
 module.exports = new IgrTsFinancialChartTemplate();

package/templates/react/igr-ts/grid/basic/index.js

@@ -15,8 +15,8 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-grids@18.3.0", "igniteui-react-inputs@18.3.0",
-            "igniteui-react-layouts@18.3.0"];
+        this.packages = ["igniteui-react-grids@~18.6.0", "igniteui-react-inputs@~18.6.0",
+            "igniteui-react-layouts@~18.6.0"];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/igr-ts/linear-gauge/default/index.js

@@ -12,7 +12,7 @@ class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.name = "Linear Gauge";
         this.description = `value compared against a scale and one or more ranges.`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-gauges@18.3.0"];
+        this.packages = ["igniteui-react-gauges@~18.6.0"];
     }
 }
 module.exports = new IgrTsLinearGaugeTemplate();

package/templates/react/igr-ts/pie-chart/default/index.js

@@ -12,7 +12,7 @@ class IgrTsPieChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.name = "Pie Chart";
         this.description = `easily illustate the proportions of data entries`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-charts@18.3.0"];
+        this.packages = ["igniteui-react-charts@~18.6.0"];
     }
 }
 module.exports = new IgrTsPieChartTemplate();

package/templates/react/igr-ts/projects/_base/files/__dot__eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off"
   },
 }

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -8,9 +8,6 @@
     "@testing-library/react": "^14.0.0",
     "element-internals-polyfill": "^1.3.10",
     "functions-have-names": "^1.2.3",
-    "igniteui-dockmanager": "^1.13.0",
-    "igniteui-react": "18.3.0",
-    "igniteui-react-core": "18.3.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^0.2.0",
     "react-dom": "^18.2.0",

package/templates/react/igr-ts/projects/_base/files/src/app/app.tsx

@@ -3,10 +3,6 @@ import { Outlet } from "react-router-dom";
 export default function App() {
 
   return (
-    <div className="app"> 
-      <div className="content">
-        <Outlet />
-      </div>
-    </div>
+    <Outlet />
   )
 }

package/templates/react/igr-ts/radial-gauge/default/index.js

@@ -13,7 +13,7 @@ class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.description = `provides a number of visual elements, like a needle, tick marks, ranges
 							and labels, in order to create a predefined shape and scale.`;
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-gauges@18.3.0"];
+        this.packages = ["igniteui-react-gauges@~18.6.0"];
     }
 }
 module.exports = new IgrTsRadialGaugeTemplate();

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ <%=yaml-default-branch%> ]
+    branches: [ $(yamlDefaultBranch) ]
   pull_request:
-    branches: [ <%=yaml-default-branch%> ]
+    branches: [ $(yamlDefaultBranch) ]
 
 jobs:
   build:

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

@@ -48,7 +48,8 @@ class BaseIgcProject {
             DefaultTheme: "",
             dot: ".",
             path: name,
-            projectTemplate: this.id
+            projectTemplate: this.id,
+            yamlDefaultBranch: this.id === "base" ? "<%=yaml-default-branch%>" : "main"
         };
         return config;
     }