feat: Overhaul react-examples build - #1110
Open
rkaraivanov wants to merge 14 commits into
Open
rkaraivanov wants to merge 14 commits into
rkaraivanov wants to merge 14 commits into
Conversation
The old rules forced CRLF on checkout for every text type while the index already held LF. Every working-tree file differed from the index, which confused diffs and non-Windows tooling. Use LF in both places on every OS; binaries stay untouched.
Samples carried files that no longer served a purpose: ESLint configs that disabled every rule, CodeSandbox settings, and devcontainer definitions. Nine grid samples still ran on react-scripts; move them to the Vite setup every other sample uses. Rename ReadMe.md to README.md so every sample uses one name, and point the gulp README generator at the new name until it is removed. Drop root files nothing reads: the CRA .env, a stub lockfile, .eslintignore, .gitconfig, a commented-out CODEOWNERS, the Azure pipeline (trigger: none), and the Windows cleanup script.
Replace the gulp tasks with plain Node scripts that read samples in place: version sync (update:ig), code-viewer generation, theme copying and a new-sample scaffold. The root package.json and lockfile will host the Astro samples browser next; browser/ stays in use until then. Code-viewer output keeps the gulp schema and URL, so the docs site needs no change.
igniteui-react and igniteui-react-grids 19.7.0 declare type entry points they do not ship. 19.9.0 fixes this and requires igniteui-webcomponents 7.4 and igniteui-grid-lite 0.11. Move sample tooling to TypeScript 5.9 and React 19 types. The IG packages publish types only through "exports", which older TypeScript cannot read; 5.9 still accepts the generated tsconfigs.
tree-grid/disabled-summaries imported Node's http module by accident. grid/localization imported igniteui-react-grids/grids, which the package does not export; only the old browser's aliases resolved it. geo-map/display-heat-imagery loaded its worker with webpack-only syntax; use new Worker(new URL(...)), which Vite bundles.
Mirror the igniteui-wc-examples setup: one static page per sample, built from samples/ in place, one chunk per sample and per npm package, and themes linked in <head>. This removes browser/, its copy step, generated routes, service worker and cache busting. Old URLs keep working. /samples/<slug> redirects to the canonical path with the sidebar; legacy /<group>/<component>-<name> routes redirect as well. CI and CD build from the root and publish dist/.
Vite bundles workers with their own plugin list, so the scoped resolver never ran for them. With licensed @infragistics/ packages installed, the heat-imagery worker could not resolve igniteui-react-core and the deploy build failed.
Playwright smoke tests run against the production build and guard what the Astro setup exists to prevent: shared code or CSS leaking between sample pages and samples mounting twice. They also cover the sidebar, old-URL redirects and the docs iframe contract. CI type-checks, builds with the deployed base path, runs the smoke tests and fails if sample package versions drift. Deploy swaps in the licensed packages with npm instead of rewriting sources, and keeps the artifact and igniteui-actions dispatch unchanged.
The generated READMEs pointed at a template that no longer exists, ran git checkout before entering the clone, and asked for --legacy-peer-deps, which the samples no longer need. CodeSandbox is no longer supported, so its button goes too.
Rewrite the README for the root dev server, production builds, smoke tests, sample scaffolding and version updates, replacing the gulp and browser/ steps.
19.7.0 points its "exports" types at a file it does not ship, so TypeScript cannot see the dock manager types. 19.9.0 fixes this; its bundled igniteui-dockmanager moves from 2.1 to 2.2.
Move 119 hand-written inputs, layouts, menus, notifications and scheduling samples from class components to function components with hooks and typed props. Drop the igniteui-react Module register() calls, which the package marks as no longer needed. Give these samples the strict add:sample tsconfig, so their standalone build type-checks. Rendered DOM, before and after scripted clicks, matches the previous build.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace the gulp + Vite samples browser with the Astro setup used by
igniteui-wc-examples(vnext). Samples are built in place fromsamples/, one static page per sample. The oldbrowser/app is gone.Why
gulp updateBrowsercopied every sample intobrowser/srcand regex-rewrote its source on every start and build.What changes
Samples browser
src/pages/[...slug].astroemits a page per sample; its loader imports the sample and renders its default export. A Vite plugin strips the sample's own standalone mount; the build fails if a sample does not match that contract.<head>, sample CSS is inlined: pages are styled at first paint and no sample's CSS reaches another page.browser/(gulp tasks, generated routes, service worker, cache busting),azure-pipelines/, root leftovers.URLs and docs contracts (unchanged for consumers)
/react-demos/{group}/{component}/{name}./react-demos/samples/...(README and docs links) redirects there and keeps the sidebar./react-demos/{group}/{component}-{name}redirects there./code-viewer/...path.fitContentsizing kept.Tooling
package.jsonand lockfile. Scripts:dev,build,preview,check,test:smoke,add:sample,update:ig,generate:code-viewer,copy:themes.scripts/lib/versions.js;npm run update:igapplies them to the root and every sample.CI / CD
ci.yml: version sync check,astro check, build withBASE_PATH=/react-demos, Playwright smoke tests.build-and-deploy.yml: swaps trial packages for licensed ones with npm (a resolve plugin maps imports; no source rewriting), builds without source maps. Artifact name, zip layout and theigniteui-actionsdispatch payload are unchanged.Samples
ReadMe.md→README.md; run instructions fixed; CodeSandbox links removed..eslintrc.js,sandbox.config.json,.devcontainer/. The nine react-scripts samples now use Vite.igniteui-react,-grids,-dockmanager19.9.0 (19.7.0 pointed its types at files it did not ship),igniteui-webcomponents~7.4.1,igniteui-grid-lite~0.11.0, React 19.3. Sample tooling: TypeScript 5.9, Vite 8, Vitest 5.tsconfig.json. Generator-owned samples were left alone.httpimport, an import path outsideigniteui-react-grids' exports, and a webpack-only worker import.Verification
Run locally on the branch head:
BASE_PATH=/react-demosbuild: 948 with no page or console error. The rest fail the same way standalone (grids/*/editing-lifecycle×3,grids/data-grid/pager,grids/data-grid/binding-remote-data) or are blocked by third-party hosts on localhost (dock-manager/embedding-frames,geo-map/display-esri-imagery).BASE_PATH. Mutation-checked: disabling the mount strip or the non-entry CSS handling fails it.node_modules/@infragistics/: build and smoke suite pass..scssfiles (now included).astro checkclean; standalone sample builds pass on Vite 8.Reviewing
.gitattributes(the index was already LF).package.jsonversion bumps, README edits and deleted boilerplate.astro.config.mjsandsrc/; each Vite plugin documents why it exists.Follow-ups
igniteui-xplat-examplesReact editor template, so the next generated drop does not undo this: drop.eslintrc.js,sandbox.config.json,.devcontainer/and the CodeSandbox button; matchscripts/lib/versions.js;moduleResolution: bundlerintsconfig.json; the README fixes; and fix the mount line ineditors/x-date-picker/{date-limits,editing,format},grids/data-grid/row-selectionandgrids/data-grid/column-resizing(broken standalone, fine in the browser).