Skip to content

Transformed a small subset of samples to functional components #1056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 11 commits into
base: vnext
Choose a base branch
from
Draft

Transformed a small subset of samples to functional components #1056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
be51d4a
refactor: add functional component counterparts for 7 class-based sam…
Copilot Apr 8, 2026
a7a4520
refactor: add 5 chart functional counterparts + update README (sample…
Copilot Apr 8, 2026
2456a97
fix: replace incorrect setState null guard with mountedRef pattern in…
Copilot Apr 8, 2026
b758457
docs: add FUNCTIONAL_COMPONENT_GENERATION_GUIDE.md with full construc…
Copilot Apr 9, 2026
f83493d
feat: add index.functional.template.tsx for functional component gene…
Copilot Apr 9, 2026
97e7bf3
fix: simplify section 5 ref pattern — use ref={chartRef} directly, dr…
Copilot Apr 14, 2026
e56265f
refactor: replace useEffect/addEventListener with form onInput={handl…
Copilot Apr 14, 2026
168891e
docs: update section 15 of generation guide to use onInput prop inste…
Copilot Apr 14, 2026
9e9a075
fix: remove unused renderer and related dead imports from DataPieChar…
Copilot Apr 15, 2026
55511b3
Update comment for useState in DoughnutChartLegend Sample component
gedinakova Apr 15, 2026
b26eb11
chore(*): Show the samples with functional components in the tree
gedinakova Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,038 changes: 1,038 additions & 0 deletions FUNCTIONAL_COMPONENT_GENERATION_GUIDE.md
View file
Open in desktop

Large diffs are not rendered by default.

251 changes: 251 additions & 0 deletions FUNCTIONAL_REFACTORING_README.md
View file
Open in desktop

Large diffs are not rendered by default.

157 changes: 96 additions & 61 deletions browser/tasks/Transformer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,8 @@ class Transformer {

public static process(samples: SampleInfo[]): void {

let functionalExtras: SampleInfo[] = [];

for (const info of samples) {
// console.log("Transformer processing: " + info.SampleFolderPath);

Expand Down Expand Up @@ -192,13 +194,18 @@ class Transformer {

// console.log("Transformer fileNames ...");
let fileNames = [];
let functionalFileNames = [];
let fileFound = [];
for (const filePath of info.SampleFilePaths) {
// console.log(filePath);
fileFound.push(filePath);
if (Strings.includes(filePath, igConfig.SampleFileExtension) &&
Strings.excludes(filePath, igConfig.SampleFileExclusions, true)) {
fileNames.push(filePath);
if (filePath.endsWith('Functional.tsx')) {
functionalFileNames.push(filePath);
} else {
fileNames.push(filePath);
}
}
}

Expand All @@ -212,72 +219,100 @@ class Transformer {
} else if (fileNames.length > 1) {
console.log("WARNING Transformer cannot decide which " + igConfig.SampleFileExtension + " file to use for sample name: ");
console.log(" - " + fileNames.join("\n - "));
} else { // only one .tsx file per sample
} else { // only one .tsx file per sample (excluding Functional variants)
// console.log("Transformer fileNames[0]= " + fileNames[0]);
info.SampleFilePath = fileNames[0];
info.SampleFileName = this.getFileName(info.SampleFilePath);
info.SampleFileSourcePath = "./src/" + info.SampleFileName;
info.SampleFileSourceCode = transFS.readFileSync(info.SampleFilePath, "utf8");

// let classExp = new RegExp(/(export.default.class.)(.*)(.\{)/g);
// let className = info.SampleFileSourceCode.match(classExp);
// let className = info.SampleFileSourceCode.match(classExp)[0];
// console.log("Transformer className1= " + className);
// className = className.replace(/(export.default.class.)(.*)(.extends.*)/g, '$2');
// className = className.trim();
// console.log("Transformer className= " + className);
// using folder names to make sure each sample has unique class name
let className = info.ComponentFolder + "-" + info.SampleFolderName;
className = Strings.replace(className, "/", " ");
className = Strings.replace(className, "-", " ");
className = Strings.toTitleCase(className);
className = Strings.replace(className, " ", "");
info.SampleFileSourceClass = className;

// console.log("Transformer SampleFileSourceClass=" + info.SampleFileSourceClass);

let sampleBlocks = this.getSampleBlocks(info.SampleFileSourceCode);
info.SampleImportLines = sampleBlocks.ImportLines;
info.SampleImportFiles = sampleBlocks.ImportFiles;
info.SampleImportPackages = sampleBlocks.ImportPackages;

// info.SampleImportName = info.SampleFileName.replace('.tsx','').replace('.ts','');
// info.SampleImportPath = './' + info.ComponentFolder + '/' + info.SampleFolderName + '/' + info.SampleImportName;
// info.SampleImportName = info.SampleFileSourceClass.replace('.ts', '');
// using folder names to make sure each sample has unique class name
info.SampleImportName = info.ComponentFolder + "-" + info.SampleFolderName;
info.SampleImportName = Strings.replace(info.SampleImportName, "/", " ");
info.SampleImportName = Strings.replace(info.SampleImportName, "-", " ");
info.SampleImportName = Strings.toTitleCase(info.SampleImportName);
info.SampleImportName = Strings.replace(info.SampleImportName, " ", "");

// info.SampleImportPath = './' + info.ComponentFolder + '/' + info.SampleFolderName + '/' + info.SampleImportName;
info.SampleImportPath = './' + info.ComponentFolder + '/' + info.SampleFolderName + '/index';

// console.log("Transformer SampleDisplayName ...");
info.SampleDisplayName = Strings.splitCamel(info.SampleFileSourceClass);
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, info.ComponentName, "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, igConfig.SampleFileExtension, "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Type ", "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Binding ", "Binding ");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Display ", "Display ");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Data Chart Type ", "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, info.ComponentName + " ", "");
info.SampleDisplayName = info.SampleDisplayName.trim();

// console.log("Transformer Sandbox ...");
info.SandboxUrlView = this.getSandboxUrl(info, igConfig.SandboxUrlView);
info.SandboxUrlEdit = this.getSandboxUrl(info, igConfig.SandboxUrlEdit);
info.SandboxUrlShort = this.getSandboxUrl(info, igConfig.SandboxUrlShort);

// console.log("Transformer getDocsUrl ...");
info.DocsUrl = this.getDocsUrl(info);
// console.log("SAMPLE " + info.SampleFilePath + " => " + info.SampleDisplayName);
this.processSampleFile(info, fileNames[0]);

// create additional SampleInfo entries for each Functional variant
for (const funcPath of functionalFileNames) {
let funcInfo = new SampleInfo();
funcInfo.ComponentGroup = info.ComponentGroup;
funcInfo.ComponentFolder = info.ComponentFolder;
funcInfo.ComponentName = info.ComponentName;
funcInfo.SampleFolderPath = info.SampleFolderPath;
funcInfo.SampleFolderName = info.SampleFolderName;
funcInfo.SampleFilePaths = info.SampleFilePaths;
funcInfo.SampleFileNames = info.SampleFileNames;

let funcFileName = this.getFileName(funcPath);
let funcImportName = funcFileName.replace('.tsx', '');

funcInfo.SampleFilePath = funcPath;
funcInfo.SampleFileName = funcFileName;
funcInfo.SampleFileSourcePath = "./src/" + funcFileName;
funcInfo.SampleFileSourceCode = transFS.readFileSync(funcPath, "utf8");
funcInfo.SampleFileSourceClass = funcImportName;

funcInfo.SampleImportName = funcImportName;
funcInfo.SampleImportPath = './' + info.ComponentFolder + '/' + info.SampleFolderName + '/' + funcImportName;

funcInfo.SampleRouteNew = info.SampleRouteNew + '-functional';
funcInfo.SampleRouteOld = info.SampleRouteOld + '-functional';

funcInfo.SampleDisplayName = info.SampleDisplayName + ' (Functional)';

funcInfo.SandboxUrlView = info.SandboxUrlView;
funcInfo.SandboxUrlEdit = info.SandboxUrlEdit;
funcInfo.SandboxUrlShort = info.SandboxUrlShort;
funcInfo.DocsUrl = info.DocsUrl;

functionalExtras.push(funcInfo);
}
}

// console.log(info.SampleFolderPath + " => " + info.SampleRouteNew + " => " + info.SampleDisplayName);

}

// append functional variants so they appear in routing right after their class counterparts
for (const funcInfo of functionalExtras) {
samples.push(funcInfo);
}
}

private static processSampleFile(info: SampleInfo, filePath: string): void {
info.SampleFilePath = filePath;
info.SampleFileName = this.getFileName(info.SampleFilePath);
info.SampleFileSourcePath = "./src/" + info.SampleFileName;
info.SampleFileSourceCode = transFS.readFileSync(info.SampleFilePath, "utf8");

// using folder names to make sure each sample has unique class name
let className = info.ComponentFolder + "-" + info.SampleFolderName;
className = Strings.replace(className, "/", " ");
className = Strings.replace(className, "-", " ");
className = Strings.toTitleCase(className);
className = Strings.replace(className, " ", "");
info.SampleFileSourceClass = className;

let sampleBlocks = this.getSampleBlocks(info.SampleFileSourceCode);
info.SampleImportLines = sampleBlocks.ImportLines;
info.SampleImportFiles = sampleBlocks.ImportFiles;
info.SampleImportPackages = sampleBlocks.ImportPackages;

// using folder names to make sure each sample has unique class name
info.SampleImportName = info.ComponentFolder + "-" + info.SampleFolderName;
info.SampleImportName = Strings.replace(info.SampleImportName, "/", " ");
info.SampleImportName = Strings.replace(info.SampleImportName, "-", " ");
info.SampleImportName = Strings.toTitleCase(info.SampleImportName);
info.SampleImportName = Strings.replace(info.SampleImportName, " ", "");

info.SampleImportPath = './' + info.ComponentFolder + '/' + info.SampleFolderName + '/index';

info.SampleDisplayName = Strings.splitCamel(info.SampleFileSourceClass);
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, info.ComponentName, "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, igConfig.SampleFileExtension, "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Type ", "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Binding ", "Binding ");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Map Display ", "Display ");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, "Data Chart Type ", "");
info.SampleDisplayName = Strings.replace(info.SampleDisplayName, info.ComponentName + " ", "");
info.SampleDisplayName = info.SampleDisplayName.trim();

info.SandboxUrlView = this.getSandboxUrl(info, igConfig.SandboxUrlView);
info.SandboxUrlEdit = this.getSandboxUrl(info, igConfig.SandboxUrlEdit);
info.SandboxUrlShort = this.getSandboxUrl(info, igConfig.SandboxUrlShort);

info.DocsUrl = this.getDocsUrl(info);
}

public static getSandboxUrl(sampleInfo: SampleInfo, sandboxUrlFormat: string): string {
Expand Down
88 changes: 88 additions & 0 deletions index.functional.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React, {
//insert hooksImports
//end hooksImports
} from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

//insert vmImports
//end vmImports
//insert modulesImports
//end modulesImports
//insert bindingImports
//end bindingImports
//insert descriptionImports
//end descriptionImports
//insert vmLibraryImports
//end vmLibraryImports
//insert handlersImports
//end handlersImports
//insert templateImports
//end templateImports

//ifdef webgrids
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
//endifdef webgrids
//ifdef editor
import 'igniteui-webcomponents/themes/light/bootstrap.css';
//endifdef editor

//ifdef modulesRegister
const mods: any[] = [
//insert modulesRegister
//end modulesRegister
];
mods.forEach((m) => m.register());
//endifdef modulesRegister

//ifdef moduleRegistrations
//insert moduleRegistrations
//end moduleRegistrations
//endifdef moduleRegistrations

//ifdef moduleConstants
//insert moduleConstants
//end moduleConstants
//endifdef moduleConstants

//ifdef moduleFunctions
//insert moduleFunctions
//end moduleFunctions
//endifdef moduleFunctions

export default function Sample() {

//ifdef useState
//insert useState
//end useState
//endifdef useState

//ifdef useRef
//insert useRef
//end useRef
//endifdef useRef

//ifdef useMemo
//insert useMemo
//end useMemo
//endifdef useMemo

//ifdef useEffect
//insert useEffect
//end useEffect
//endifdef useEffect

//ifdef useCallback
//insert useCallback
//end useCallback
//endifdef useCallback

return (
//insert render
//end render
);
}

// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
Loading
Loading