igniteui-cli 14.9.2 → 14.10.0-alpha.1

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

@@ -4,11 +4,10 @@ const cli_core_1 = require("@igniteui/cli-core");
 class IgrTsReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
     constructor() {
         super(__dirname);
-        this.name = "Ignite UI for React TS";
+        this.name = "Ignite UI for React";
         this.projectType = "igr-ts";
         this.themes = ["default"];
         const groups = require("./groups.json");
-        // tslint:disable-next-line:forin
         for (const key in groups) {
             this.groupDescriptions.set(key, groups[key]);
         }

package/templates/react/igr-ts/projects/_base/files/AGENTS.md

@@ -0,0 +1,111 @@
+You are an expert in building front-end web applications with React with deep knowledge of modern hooks, TypeScript, and cutting-edge frontend architecture. You are familiar with the igniteui-react library. You prioritize performance optimizations and accessibility best practices in your work.
+
+## Your Expertise
+
+- **React 19.2 Features**: Expert in `<Activity>` component, `useEffectEvent()`, and React Performance Tracks
+- **React 19 Core Features**: Mastery of `use()` hook, `useFormStatus`, `useOptimistic`, `useActionState`, and Actions API
+- **Concurrent Rendering**: Expert knowledge of concurrent rendering patterns, transitions, and Suspense boundaries
+- **Modern Hooks**: Deep knowledge of all React hooks including new ones and advanced composition patterns
+- **TypeScript Integration**: Advanced TypeScript patterns with improved React 19 type inference and type safety
+- **Form Handling**: Expert in modern form patterns with Actions API, validation, and optimistic updates
+- **State Management**: Mastery of React Context, Zustand, Redux Toolkit, and choosing the right solution
+- **Performance Optimization**: Expert in React.memo, useMemo, useCallback, code splitting, lazy loading, and Core Web Vitals
+- **Testing Strategies**: Comprehensive testing with Vitest, React Testing Library, and Playwright/Cypress
+- **Accessibility**: WCAG compliance, semantic HTML, ARIA attributes, and keyboard navigation
+- **Vite**: Configuration, plugins, environment variables, and build optimization
+- **Design Systems**: Material UI, Shadcn/ui, and custom design system architecture
+
+## Your Approach
+
+- **React 19.2 First**: Leverage the latest features including `<Activity>`, `useEffectEvent()`, and Performance Tracks
+- **Modern Hooks**: Use `use()`, `useFormStatus`, `useOptimistic`, and `useActionState` for cutting-edge patterns
+- **Actions for Forms**: Use Actions API for client-side form handling
+- **Concurrent by Default**: Leverage concurrent rendering with `startTransition` and `useDeferredValue`
+- **TypeScript Throughout**: Use comprehensive type safety with React 19's improved type inference
+- **Performance-First**: Optimize rendering, bundle size, and runtime performance
+- **Accessibility by Default**: Build inclusive interfaces following WCAG 2.1 AA standards
+- **Test-Driven**: Write tests alongside components using Vitest and React Testing Library best practices
+- **Modern Development**: Use Vite, ESLint, Prettier, and modern tooling for optimal DX
+
+## Guidelines
+
+- Always use functional components with hooks - class components are legacy
+- Leverage React 19.2 features: `<Activity>`, `useEffectEvent()`, Performance Tracks
+- Use the `use()` hook for promise handling and async data fetching
+- Implement forms with Actions API and `useFormStatus` for loading states
+- Use `useOptimistic` for optimistic UI updates during async operations
+- Use `useActionState` for managing action state and form submissions
+- Leverage `useEffectEvent()` to extract non-reactive logic from effects (React 19.2)
+- Use `<Activity>` component to manage UI visibility and state preservation (React 19.2)
+- **Ref as Prop** (React 19): Pass `ref` directly as prop - no need for `forwardRef` anymore
+- **Context without Provider** (React 19): Render context directly instead of `Context.Provider`
+- Use `startTransition` for non-urgent updates to keep the UI responsive
+- Leverage Suspense boundaries for async data fetching and code splitting
+- No need to import React in every file - new JSX transform handles it
+- Use strict TypeScript with proper interface design and discriminated unions
+- Implement proper error boundaries for graceful error handling
+- Use semantic HTML elements (`<button>`, `<nav>`, `<main>`, etc.) for accessibility
+- Ensure all interactive elements are keyboard accessible
+- Optimize images with lazy loading and modern formats (WebP, AVIF)
+- Use React DevTools Performance panel with React 19.2 Performance Tracks
+- Implement code splitting with `React.lazy()` and dynamic imports
+- Use proper dependency arrays in `useEffect`, `useMemo`, and `useCallback`
+- Ref callbacks can now return cleanup functions for easier cleanup management
+- Use Vite's `import.meta.env` for environment variables
+
+## Common Scenarios You Excel At
+
+- **Building Modern React Apps**: Setting up projects with Vite, TypeScript, React 19.2, and modern tooling
+- **Implementing New Hooks**: Using `use()`, `useFormStatus`, `useOptimistic`, `useActionState`, `useEffectEvent()`
+- **React 19 Quality-of-Life Features**: Ref as prop, context without provider, ref callback cleanup, document metadata
+- **Form Handling**: Creating forms with Actions API, validation, and optimistic updates
+- **State Management**: Choosing and implementing the right state solution (Context, Zustand, Redux Toolkit)
+- **Async Data Fetching**: Using `use()` hook, Suspense, and error boundaries for data loading
+- **Performance Optimization**: Analyzing bundle size, implementing code splitting, optimizing re-renders
+- **Component Visibility**: Implementing `<Activity>` component for state preservation across navigation
+- **Accessibility Implementation**: Building WCAG-compliant interfaces with proper ARIA and keyboard support
+- **Complex UI Patterns**: Implementing modals, dropdowns, tabs, accordions, and data tables
+- **Animation**: Using React Spring, Framer Motion, or CSS transitions for smooth animations
+- **Testing**: Writing comprehensive unit, integration, and e2e tests
+- **TypeScript Patterns**: Advanced typing for hooks, HOCs, render props, and generic components
+- **Vite Configuration**: Configuring plugins, aliases, proxies, and build output
+
+## Response Style
+
+- Provide complete, working React 19.2 code following modern best practices
+- Include all necessary imports (no React import needed thanks to new JSX transform)
+- Add inline comments explaining React 19 patterns and why specific approaches are used
+- Show proper TypeScript types for all props, state, and return values
+- Demonstrate when to use new hooks like `use()`, `useFormStatus`, `useOptimistic`, `useEffectEvent()`
+- Show proper error handling with error boundaries
+- Include accessibility attributes (ARIA labels, roles, etc.)
+- Provide testing examples when creating components
+- Highlight performance implications and optimization opportunities
+- Show both basic and production-ready implementations
+- Mention React 19.2 features when they provide value
+
+## Advanced Capabilities You Know
+
+- **`use()` Hook Patterns**: Advanced promise handling, resource reading, and context consumption
+- **`<Activity>` Component**: UI visibility and state preservation patterns (React 19.2)
+- **`useEffectEvent()` Hook**: Extracting non-reactive logic for cleaner effects (React 19.2)
+- **Actions API**: Client-side form actions and progressive enhancement patterns
+- **Optimistic Updates**: Complex optimistic UI patterns with `useOptimistic`
+- **Concurrent Rendering**: Advanced `startTransition`, `useDeferredValue`, and priority patterns
+- **Suspense Patterns**: Nested suspense boundaries, batched reveals, and error handling
+- **Ref as Prop (React 19)**: Using refs without `forwardRef` for cleaner component APIs
+- **Context Without Provider (React 19)**: Rendering context directly for simpler code
+- **Ref Callbacks with Cleanup (React 19)**: Returning cleanup functions from ref callbacks
+- **Document Metadata (React 19)**: Placing `<title>`, `<meta>`, `<link>` directly in components
+- **useDeferredValue Initial Value (React 19)**: Providing initial values for better UX
+- **Custom Hooks**: Advanced hook composition, generic hooks, and reusable logic extraction
+- **Render Optimization**: Understanding React's rendering cycle and preventing unnecessary re-renders
+- **Context Optimization**: Context splitting, selector patterns, and preventing context re-render issues
+- **Portal Patterns**: Using portals for modals, tooltips, and z-index management
+- **Error Boundaries**: Advanced error handling with fallback UIs and error recovery
+- **Performance Profiling**: Using React DevTools Profiler and Performance Tracks (React 19.2)
+- **Bundle Analysis**: Analyzing and optimizing bundle size with Vite's build output and rollup-plugin-visualizer
+
+## UI Components
+
+- Use `igniteui-react`.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/CLAUDE.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

package/templates/react/igr-ts/projects/_base/files/__dot__github/copilot-instructions.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

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

@@ -0,0 +1,12 @@
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli-mcp"]
+    },
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}

package/templates/react/index.js

@@ -4,8 +4,6 @@ class ReactFramework {
         this.id = "react";
         this.name = "React";
         this.projectLibraries = [];
-        this.projectLibraries.push(require("./es6"));
-        this.projectLibraries.push(require("./igr-es6"));
         this.projectLibraries.push(require("./igr-ts"));
     }
 }

package/templates/webcomponents/igc-ts/projects/_base/files/AGENTS.md

@@ -0,0 +1,33 @@
+You are an expert in building front-end web applications. You have a strong understanding of modern web standards, including custom elements, Shadow DOM, and CSS custom properties. You are proficient in TypeScript and follow best practices for writing clean, maintainable code. You have experience with the Lit framework and are familiar with the igniteui-webcomponents library. You prioritize performance optimizations and accessibility best practices in your work.
+
+## Coding Standards
+
+- Use standard ESM imports.
+- TypeScript imports end with `.js` extension.
+- Focuses on native, modern browser features, including custom elements, Shadow DOM and CSS custom properties.
+- Follows latest ECMAScript standards and best practices.
+- Avoids heavy reliance on third-party libraries unless absolutely necessary.
+- Prioritizes performance optimizations and accessibility best practices.
+- Writes clean, maintainable, and well-documented code.
+- Includes unit tests for components to ensure reliability and ease of maintenance.
+
+## TypeScript Best Practices
+
+- Use strict type checking.
+- Avoid using `any` type; use `unknown` when type is uncertain.
+- Decorators are used, but other non-standard TypeScript features are avoided.
+
+## Styling Guidelines
+
+- Component styles are written in external SCSS files, transpiled to TS files using Lit's `css` function and imported into the component.
+- Internal parts of components are styled using part selectors.
+- The project uses the igniteui-theming package for consistent theming across components.
+
+## State Management
+
+- Use Lit's reactive properties for state management within components.
+- If state needs to be shared across multiple components, consider using the Lit context API.
+
+## UI Components
+
+- Use `igniteui-webcomponents`.

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/CLAUDE.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/copilot-instructions.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

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

@@ -0,0 +1,12 @@
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli-mcp"]
+    },
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}

package/lib/templates/AngularTemplate.d.ts

@@ -1,39 +0,0 @@
-import { AddTemplateArgs, Config, ControlExtraConfiguration, FsFileSystem, Template } from "@igniteui/cli-core";
-export declare class AngularTemplate implements Template {
-    private rootPath;
-    components: string[];
-    controlGroup: string;
-    listInComponentTemplates: boolean;
-    listInCustomTemplates: boolean;
-    id: string;
-    name: string;
-    description: string;
-    dependencies: Array<string | object>;
-    framework: string;
-    projectType: string;
-    hasExtraConfiguration: boolean;
-    packages: any[];
-    delimiters: import("@igniteui/cli-core").TemplateDelimiters;
-    protected widget: string;
-    protected fileSystem: FsFileSystem;
-    /**
-     * Creates a new AngularTemplate for a root path (pass in __dirname)
-     */
-    constructor(rootPath: string);
-    get templatePaths(): string[];
-    generateConfig(name: string, options: {}): {
-        [key: string]: any;
-    };
-    registerInProject(projectPath: string, name: string, options?: AddTemplateArgs): void;
-    getExtraConfiguration(): ControlExtraConfiguration[];
-    setExtraConfiguration(extraConfigKeys: {}): void;
-    protected getBaseVariables(name: string): {};
-    protected ensureSourceFiles(projectPath: string): void;
-    /**
-     * Register igniteui-angular-wrappers(ig-ts) resources under the project"s angular.json scripts and styles collections,
-     * so these are picked by Angular"s internal webpack to build and serve
-     */
-    protected registerSourceFiles(config: Config, projectPath: string): void;
-    protected folderName(pathName: string): string;
-    protected fileName(pathName: string): string;
-}

package/lib/templates/AngularTemplate.js

@@ -1,207 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AngularTemplate = void 0;
-const cli_core_1 = require("@igniteui/cli-core");
-const path = __importStar(require("path"));
-class AngularTemplate {
-    /**
-     * Creates a new AngularTemplate for a root path (pass in __dirname)
-     */
-    constructor(rootPath) {
-        this.rootPath = rootPath;
-        this.listInComponentTemplates = true;
-        this.listInCustomTemplates = false;
-        this.dependencies = [];
-        this.framework = "angular";
-        this.hasExtraConfiguration = false;
-        this.packages = [];
-        this.delimiters = cli_core_1.defaultDelimiters;
-        this.fileSystem = new cli_core_1.FsFileSystem();
-    }
-    get templatePaths() {
-        return [path.join(this.rootPath, "files")];
-    }
-    generateConfig(name, options) {
-        if (options["modulePath"] && !cli_core_1.Util.fileExists(path.join(process.cwd(), `src\\app`, options["modulePath"]))) {
-            cli_core_1.Util.error(`Wrong module path provided: ${options["modulePath"]}. No components were added!`);
-            return Promise.resolve(false);
-        }
-        const config = Object.assign({}, options["extraConfig"], this.getBaseVariables(name));
-        return config;
-    }
-    registerInProject(projectPath, name, options) {
-        let modulePath = "app.module.ts";
-        if (options && options.modulePath) {
-            modulePath = options.modulePath;
-        }
-        // D.P. Don't use the top-level import as that chains import of typescript
-        // which slows down execution of the entire component noticeably (template loading)
-        // https://www.typescriptlang.org/docs/handbook/modules.html#dynamic-module-loading-in-nodejs
-        // tslint:disable-next-line:variable-name
-        const TsUpdate = 
-        // tslint:disable-next-line:no-submodule-imports
-        require("@igniteui/angular-templates").AngularTypeScriptFileUpdate;
-        const componentPath = path.join(projectPath, `src/app/components/${this.folderName(name)}/${this.fileName(name)}.component.ts`);
-        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}Component`;
-        if (!(options && options.skipRoute)) {
-            //1) import the component class name,
-            //2) and populate the Routes array with the path and component
-            //for example: { path: "combo", component: ComboComponent }
-            const routingModulePath = path.join(projectPath, "src/app/app-routing.module.ts");
-            const routingModule = new TsUpdate(routingModulePath, false, { singleQuotes: false });
-            routingModule.addRoute({
-                path: this.folderName(name),
-                identifierName: className,
-                modulePath: cli_core_1.Util.relativePath(routingModulePath, componentPath, true, true),
-                data: { text: cli_core_1.Util.nameFromPath(name) }
-            });
-            routingModule.finalize();
-        }
-        //3) add an import of the component class from its file location.
-        //4) populate the declarations portion of the @NgModule with the component class name.
-        const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
-        const relativePath = cli_core_1.Util.relativePath(mainModulePath, componentPath, true, true);
-        const mainModule = new TsUpdate(mainModulePath, false, { singleQuotes: false });
-        mainModule.addNgModuleMeta({
-            declare: [className],
-            from: relativePath,
-            export: modulePath !== "app.module.ts" ? [className] : []
-        });
-        mainModule.finalize();
-        this.ensureSourceFiles(projectPath);
-    }
-    getExtraConfiguration() {
-        return [];
-    }
-    setExtraConfiguration(extraConfigKeys) { }
-    getBaseVariables(name) {
-        const config = {};
-        config["name"] = cli_core_1.Util.nameFromPath(name);
-        config["ClassName"] = cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name));
-        config["path"] = this.folderName(name);
-        config["filePrefix"] = this.fileName(name);
-        config["description"] = this.description;
-        config["cliVersion"] = cli_core_1.Util.version();
-        config["camelCaseName"] = cli_core_1.Util.camelCase(name);
-        if (this.widget) {
-            config["widget"] = this.widget;
-        }
-        if (this.name) {
-            config["nameMerged"] = this.name.replace(/ /g, "");
-        }
-        return config;
-    }
-    ensureSourceFiles(projectPath) {
-        // tslint:disable-next-line:no-submodule-imports
-        const components = require("@igniteui/cli-core/packages/components");
-        const config = cli_core_1.ProjectConfig.getConfig();
-        const files = config.project.sourceFiles;
-        const dvDependencies = this.dependencies.filter(x => components.dv.indexOf(x) !== -1);
-        if (dvDependencies.length && files.indexOf("infragistics.dv.js") === -1) {
-            files.push("infragistics.dv.js");
-            cli_core_1.ProjectConfig.setConfig(config);
-        }
-        if (this.dependencies.indexOf("igExcel") !== -1 && files.indexOf("infragistics.excel-bundled.js") === -1) {
-            files.push("infragistics.excel-bundled.js");
-            cli_core_1.ProjectConfig.setConfig(config);
-        }
-        if (this.dependencies.indexOf("igGridExcelExporter") !== -1
-            && files.indexOf("modules/infragistics.gridexcelexporter.js") === -1) {
-            files.push("modules/infragistics.gridexcelexporter.js");
-            cli_core_1.ProjectConfig.setConfig(config);
-        }
-        // ensure ig-ts resource files registration
-        if (this.projectType === "ig-ts") {
-            this.registerSourceFiles(config, projectPath);
-        }
-    }
-    /**
-     * Register igniteui-angular-wrappers(ig-ts) resources under the project"s angular.json scripts and styles collections,
-     * so these are picked by Angular"s internal webpack to build and serve
-     */
-    registerSourceFiles(config, projectPath) {
-        const fs = cli_core_1.App.container.get(cli_core_1.FS_TOKEN);
-        const sourceFiles = config.project.sourceFiles;
-        const igniteuiSource = config.project.igniteuiSource;
-        const themeCSS = "css/themes/infragistics/infragistics.theme.css";
-        const infragisticsCSS = "css/structure/infragistics.css";
-        let workspaceConfigObj;
-        let updateFile = false;
-        const workspacePath = path.join(projectPath, "angular.json");
-        if (this.fileSystem.fileExists(workspacePath)) {
-            workspaceConfigObj = JSON.parse(this.fileSystem.readFile(workspacePath));
-            const scripts = workspaceConfigObj.projects[Object.keys(workspaceConfigObj.projects)[0]].architect.build.options.scripts;
-            let styles = workspaceConfigObj.projects[Object.keys(workspaceConfigObj.projects)[0]].architect.build.options.styles;
-            if (!styles.find(x => { var _a; return (_a = x.input) === null || _a === void 0 ? void 0 : _a.includes(themeCSS); }) || !styles.find(x => { var _a; return (_a = x.input) === null || _a === void 0 ? void 0 : _a.includes(infragisticsCSS); })) {
-                styles = igniteuiSource === "@infragistics/ignite-ui-full/en/" ?
-                    styles.push({ input: `${"@infragistics/ignite-ui-full/en/" + themeCSS}` }, { input: `${"@infragistics/ignite-ui-full/en/" + infragisticsCSS}` }) :
-                    styles.push({ input: `${"ignite-ui/" + themeCSS}` }, { input: `${"ignite-ui/" + infragisticsCSS}` });
-                updateFile = true;
-            }
-            for (const fileName of sourceFiles) {
-                if (!scripts.find(x => x.bundleName === fileName)) {
-                    scripts.push({
-                        bundleName: fileName,
-                        input: `${igniteuiSource + "/js/" + fileName}`
-                    });
-                    updateFile = true;
-                }
-            }
-            if (updateFile) {
-                fs.writeFile(workspacePath, cli_core_1.Util.formatAngularJsonOptions(workspaceConfigObj));
-            }
-        }
-        else {
-            cli_core_1.Util.log(`No angular.json file found! May have to manually add igniteui-angular-wrappers styles and scripts
-							(infragistics.core.js, infragistics.lob.js, etc.) to the corresponding angular.json styles and scripts collections`);
-        }
-    }
-    folderName(pathName) {
-        //TODO: should remove the spaces
-        const parts = path.parse(pathName);
-        let folderName = pathName;
-        if (parts.dir) {
-            folderName = path.join(parts.dir, parts.name);
-            folderName = folderName.replace(/\\/g, "/");
-            // TODO: config-based "src/app"?
-            const relative = path.join(process.cwd(), "src/app", folderName);
-            // path.join will also resolve any ".." segments
-            // so if relative result doesn't start with CWD it's out of project root
-            if (!relative.startsWith(process.cwd())) {
-                cli_core_1.Util.error(`Path ${"src/app/" + folderName} is not valid!`, "red");
-                process.exit(1);
-            }
-            //clean up potential leading spaces in folder names (`path/	name`):
-            folderName = folderName.replace(/\/\s+/g, "/");
-        }
-        return cli_core_1.Util.lowerDashed(folderName);
-    }
-    fileName(pathName) {
-        const name = cli_core_1.Util.nameFromPath(pathName);
-        return cli_core_1.Util.lowerDashed(name);
-    }
-}
-exports.AngularTemplate = AngularTemplate;

package/lib/templates/ReactTemplate.d.ts

@@ -1,36 +0,0 @@
-import { AddTemplateArgs, ControlExtraConfiguration, Template } from "@igniteui/cli-core";
-export declare class ReactTemplate implements Template {
-    private rootPath;
-    components: string[];
-    controlGroup: string;
-    listInComponentTemplates: boolean;
-    listInCustomTemplates: boolean;
-    id: string;
-    name: string;
-    description: string;
-    dependencies: string[];
-    framework: string;
-    projectType: string;
-    hasExtraConfiguration: boolean;
-    packages: any[];
-    delimiters: import("@igniteui/cli-core").TemplateDelimiters;
-    protected widget: string;
-    private appRoutsPath;
-    private igniteResources;
-    /**
-     * Base ReactTemplate constructor
-     * @param rootPath The template folder path. Pass in `__dirname`
-     */
-    constructor(rootPath: string);
-    get templatePaths(): string[];
-    generateConfig(name: string, options: {}): {
-        [key: string]: any;
-    };
-    registerInProject(projectPath: string, name: string, options?: AddTemplateArgs): void;
-    getExtraConfiguration(): ControlExtraConfiguration[];
-    setExtraConfiguration(extraConfigKeys: {}): void;
-    protected folderName(pathName: string): string;
-    protected getViewLink(name: string): string;
-    protected registerSourceFiles(projectPath: string): void;
-    protected getNavText(name: string): string;
-}

package/lib/templates/ReactTemplate.js

@@ -1,149 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactTemplate = void 0;
-const cli_core_1 = require("@igniteui/cli-core");
-const fs = __importStar(require("fs"));
-const path = __importStar(require("path"));
-class ReactTemplate {
-    /**
-     * Base ReactTemplate constructor
-     * @param rootPath The template folder path. Pass in `__dirname`
-     */
-    constructor(rootPath) {
-        this.rootPath = rootPath;
-        this.listInComponentTemplates = true;
-        this.listInCustomTemplates = false;
-        this.dependencies = [];
-        this.framework = "react";
-        this.hasExtraConfiguration = false;
-        this.packages = [];
-        this.delimiters = cli_core_1.defaultDelimiters;
-        this.appRoutsPath = "./src/routes.json";
-        this.igniteResources = "src/igniteuiResources.js";
-    }
-    get templatePaths() {
-        return [path.join(this.rootPath, "files")];
-    }
-    generateConfig(name, options) {
-        let config = {};
-        if (options["extraConfig"]) {
-            config = options["extraConfig"];
-        }
-        config["path"] = this.folderName(name); //folder name allowed spaces, any casing
-        config["name"] = cli_core_1.Util.nameFromPath(name); // this name should not have restrictions
-        config["ClassName"] = cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name)); //first letter capital, no spaces and no dashes,
-        config["cliVersion"] = cli_core_1.Util.version();
-        if (this.widget) {
-            config["widget"] = this.widget;
-            config["Control"] = cli_core_1.Util.className(this.widget);
-        }
-        if (this.description) {
-            config["description"] = this.description;
-        }
-        return config;
-    }
-    registerInProject(projectPath, name, options) {
-        if (options && options.skipRoute) {
-            return;
-        }
-        // add Routing config for each added component
-        const appRoutsFile = fs.readFileSync(path.join(projectPath, this.appRoutsPath), "utf8");
-        const viewsArr = JSON.parse(appRoutsFile);
-        viewsArr.push({
-            // tslint:disable:object-literal-sort-keys
-            path: "/" + this.folderName(cli_core_1.Util.nameFromPath(name)),
-            componentPath: this.getViewLink(name),
-            text: this.getNavText(name)
-        });
-        fs.writeFileSync(path.join(projectPath, this.appRoutsPath), JSON.stringify(viewsArr, null, 4));
-        this.registerSourceFiles(projectPath);
-    }
-    getExtraConfiguration() {
-        throw new Error("Method not implemented.");
-    }
-    setExtraConfiguration(extraConfigKeys) {
-        throw new Error("Method not implemented.");
-    }
-    folderName(pathName) {
-        //TODO: should remove the spaces
-        const parts = path.parse(pathName);
-        let folderName = pathName;
-        if (parts.dir) {
-            folderName = path.join(parts.dir, parts.name);
-            folderName = folderName.replace(/\\/g, "/");
-            // TODO: config-based "src/app"?
-            const relative = path.join(process.cwd(), "components", folderName);
-            // path.join will also resolve any '..' segments
-            // so if relative result doesn't start with CWD it's out of project root
-            if (!relative.startsWith(process.cwd())) {
-                cli_core_1.Util.error(`Path ${"components/" + folderName} is not valid!`, "red");
-                process.exit(1);
-            }
-            //clean up potential leading spaces in folder names (`path/    name`):
-            folderName = folderName.replace(/\/\s+/g, "/");
-        }
-        return cli_core_1.Util.lowerDashed(folderName);
-    }
-    getViewLink(name) {
-        return "./components/" + this.folderName(name);
-    }
-    registerSourceFiles(projectPath) {
-        // tslint:disable:no-submodule-imports
-        const components = require("@igniteui/cli-core/packages/components");
-        const igResPath = path.join(projectPath, this.igniteResources);
-        try {
-            const fd = fs.openSync(igResPath, fs.constants.O_RDWR | fs.constants.O_CREAT);
-            let igniteuiResFile = fs.readFileSync(fd, "utf8");
-            const freeVersionPath = "ignite-ui/";
-            const fullVersionPath = "@infragistics/ignite-ui-full/en/";
-            const dvPath = "@infragistics/ignite-ui-full/en/js/infragistics.dv.js";
-            const dvDep = this.dependencies.filter(x => components.dv.indexOf(x) !== -1).length !== 0;
-            const fullDep = this.dependencies.filter(x => components.full.indexOf(x) !== -1).length !== 0;
-            if (fullDep) {
-                while (igniteuiResFile.includes(freeVersionPath)) {
-                    igniteuiResFile = igniteuiResFile.replace(freeVersionPath, fullVersionPath);
-                    igniteuiResFile = igniteuiResFile.replace("-lite", "");
-                }
-                fs.ftruncateSync(fd, 0);
-                fs.writeSync(fd, igniteuiResFile, 0);
-            }
-            if (dvDep && !igniteuiResFile.includes(dvPath)) {
-                const endPos = fs.fstatSync(fd).size;
-                fs.writeSync(fd, `\r\n// Ignite UI Charts Required JavaScript File\r\nimport "${dvPath}";\r\n`, endPos);
-            }
-            fs.closeSync(fd);
-        }
-        catch (err) {
-            cli_core_1.Util.error(`Error while updating igniteuiResources.js: ${err.message}`);
-            throw err;
-        }
-    }
-    getNavText(name) {
-        name = cli_core_1.Util.nameFromPath(name);
-        return name.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-    }
-}
-exports.ReactTemplate = ReactTemplate;