Migrate from webpack/gulp to Astro (#1195)

Author: dobromirts

.github/CODEOWNERS

@@ -0,0 +1,123 @@
+
+#
+# Prerequisites – igniteui-actions repo:
+#   - A workflow that handles event_type 'wc-samples-cd' (add one, or confirm the correct event name).
+
+name: Build and Deploy - WC Samples EN
+permissions:
+  contents: read
+
+on:
+  push:
+    branches:
+      - vnext
+      - master
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to build and deploy (e.g. vnext)'
+        required: true
+
+env:
+  BRANCH_REF: ${{ github.event.inputs.branch && format('refs/heads/{0}', github.event.inputs.branch) || github.ref }}
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy - WC Samples EN
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ env.BRANCH_REF }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: Create .npmrc file
+        run: |
+          if [ -f ".npmrc" ]; then
+            rm .npmrc
+          fi
+          touch .npmrc
+
+      - name: Configure licensed @infragistics registry
+        run: |
+          echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> .npmrc
+          echo "//packages.infragistics.com/npm/js-licensed/:username=${{ secrets.INFRAGISTICS_NPM_USER }}" >> .npmrc
+          echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.INFRAGISTICS_NPM_TOKEN }}" >> .npmrc
+
+      - name: npm install --legacy-peer-deps
+        run: npm install --legacy-peer-deps
+
+      # "Uninstall all IG trial packages & re-install their licensed versions"
+      - name: Replace trial IG packages with licensed versions
+        shell: pwsh
+        run: |
+          Get-Content -Path ./.npmrc
+          $packageJson = Get-Content -Raw ./package.json | ConvertFrom-Json
+          $npmUninstallPackages = "npm uninstall --save "
+          $npmInstallPackages = "npm install --legacy-peer-deps "
+          $packageJson.dependencies.PSObject.Properties | `
+              Where-Object {
+                  $_.Name.StartsWith("igniteui-webcomponents-") -or $_.Name.StartsWith("igniteui-dockmanager")
+              } | `
+              ForEach-Object {
+                  $npmUninstallPackages += $_.Name + " "
+                  $npmInstallPackages += "@infragistics/" + $_.Name + "@" + $_.Value + " "
+              }
+          Write-Host $npmUninstallPackages
+          Write-Host $npmInstallPackages
+          Invoke-Expression -Command "$npmUninstallPackages"
+          Invoke-Expression -Command "$npmInstallPackages"
+
+      - name: npm run build
+        run: npm run build
+        env:
+          BASE_PATH: /webcomponents-demos
+
+      # Package the contents of dist folder as a zip artifact
+      - name: Create zip artifact
+        run: |
+          cd dist
+          zip -r ${{ github.workspace }}/WebComponentsSamples.zip ./
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: WebComponentsSamplesBrowser
+          path: WebComponentsSamples.zip
+          retention-days: 1
+
+      - name: Get app token
+        id: app-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.IGNITEUI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.IGNITEUI_GITHUB_APP_PRIVATE_KEY }}
+          owner: IgniteUI
+          repositories: igniteui-actions
+
+      - name: Trigger Deploy Workflow in IgniteUI Actions
+        uses: actions/github-script@v8
+        with:
+          github-token: ${{ steps.app-token.outputs.token }}
+          script: |
+            await github.rest.repos.createDispatchEvent({
+              owner: 'IgniteUI',
+              repo: 'igniteui-actions',
+              event_type: 'wc-samples-cd',
+              client_payload: {
+                calling_branch: "${{ env.BRANCH_REF }}",
+                repository: "${{ github.repository }}",
+                run_id: "${{ github.run_id }}",
+                artifact_name: "WebComponentsSamplesBrowser",
+                ref: "${{ github.ref }}",
+                sha: "${{ github.sha }}",
+                branch: "${{ github.ref_name }}",
+              }
+            });

.github/workflows/build-and-deploy.yml

@@ -12,6 +12,11 @@
 /tmp/
 /tests/
 
+# Astro / Vite build output:
+/.astro
+/dist
+/public/assets/code-viewer
+
 # browser auto-generated files:
 /browser/node_modules
 /browser/src/samples

.gitignore

@@ -7,7 +7,7 @@
 
 [![Node.js CI](https://github.com/IgniteUI/igniteui-wc-examples/actions/workflows/node.js.yml/badge.svg)](https://github.com/IgniteUI/igniteui-wc-examples/actions/workflows/node.js.yml)
 
-This repository contains over 300 examples on how to use [Ignite UI for Web ](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html) components:
+This repository contains over 300 examples on how to use [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html):
 
 - Charts:
 [Area](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/types/area-chart),
@@ -44,165 +44,115 @@ This repository contains over 300 examples on how to use [Ignite UI for Web ](ht
 
 ## Branches
 
-> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-wc-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+> **_NOTE:_** Use the [master](https://github.com/IgniteUI/igniteui-wc-examples/tree/master) branch to run samples locally. Use the [vnext](https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext) branch only when contributing new samples.
 
 ## Preview
 
-You can preview and browse all samples in this repository by opening our [Web Components Browser](https://www.infragistics.com/webcomponents-demos/samples/index). Alternatively, you you can view these samples with detailed information in our [Web Component Documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
+You can preview and browse all samples by opening our [Web Components Browser](https://www.infragistics.com/webcomponents-demos/samples/index). Alternatively, view samples with detailed documentation in the [Web Components Documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
 
-In addition, you can run each sample project individually from the [./samples](./samples) folder or you can run from the [./browser](./browser) folder to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the **Edit Sandbox** button in a readme file of sample project, e.g.
+In addition, you can run each sample project individually from the [./samples](./samples) folder or you can run project containing all samples `npm run dev` to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the **Edit Sandbox** button in a readme file of sample project, e.g.
 
 [./samples/charts/category-chart/overview/README.md](./samples/charts/category-chart/overview/README.md)
 
 
 ## Setup
 
-To set up this project locally, clone this repository:
-```
+Clone the repository and install dependencies:
+
+```bash
 git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+cd igniteui-wc-examples
 git checkout master
+npm install
 ```
 
-## Running Individual Sample
-
-Follow these instructions to run a single sample on your computer:
-
-- in VS Code, open a folder with existing sample, e.g.
-
-[./samples/charts/category-chart/overview](./samples/charts/category-chart/overview)
-
-- type `npm install --legacy-peer-deps` command in terminal window
-
-- type `npm run start` command in terminal window
-
-- Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser.
-
-At this point, you should see a website hosted example of [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html)
-
+## Running All Samples (Dev Server)
 
-## Running All Samples
+Start the Astro development server:
 
-Follow these instructions to run all samples locally in a browser application.
-
-- open VS Code
-
-- select **View** - **Terminal** menu item
+```bash
+npm run dev
+```
 
-- type `npm install --legacy-peer-deps` command in terminal window
+Open [http://localhost:4200](http://localhost:4200) in your browser. You will see a navigation sidebar listing all samples. The dev server compiles samples on demand — no full build required.
 
-This will install required packages and [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html) packages from npm website:
+## Building for Production
 
-- [igniteui-webcomponents-core](https://www.npmjs.com/package/igniteui-webcomponents-core)
-- [igniteui-webcomponents-core](https://www.npmjs.com/package/igniteui-webcomponents-dashboards)
-- [igniteui-webcomponents-charts](https://www.npmjs.com/package/igniteui-webcomponents-charts)
-- [igniteui-webcomponents-excel](https://www.npmjs.com/package/igniteui-webcomponents-excel)
-- [igniteui-webcomponents-gauges](https://www.npmjs.com/package/igniteui-webcomponents-gauges)
-- [igniteui-webcomponents-grids](https://www.npmjs.com/package/igniteui-webcomponents-grids)
-- [igniteui-webcomponents-maps](https://www.npmjs.com/package/igniteui-webcomponents-maps)
-- [igniteui-webcomponents-spreadsheet](https://www.npmjs.com/package/igniteui-webcomponents-spreadsheet)
-- [igniteui-webcomponents-datasources](https://www.npmjs.com/package/igniteui-webcomponents-datasources)
+```bash
+npm run build
+```
 
-Next, follow these steps:
+This runs two steps automatically:
+1. **`prebuild`** — generates `public/assets/code-viewer/**/*.json` files used by the docs site to display sample source code tabs
+2. **`astro build`** — compiles all ~900+ samples into static HTML + JS in `dist/`
 
-- type `npm run start` command in terminal window to start the browser application locally
+To preview the production build locally:
 
-- Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser. You should see a website with navigation menu for browning all samples in this repository.
+```bash
+npm run preview
+```
 
-![Samples Browser Preview](./browser/public/images/preview.PNG)
+Opens [http://localhost:4200](http://localhost:4200) serving the `dist/` output exactly as it would be deployed.
 
-## Adding New Sample
+## Adding a New Sample
 
-- create a new branch from the `vnext` branch
+1. Create a new branch from `vnext`
 
-- open a folder with existing sample, e.g.
+2. Copy an existing sample folder as a starting point, e.g.:
 ```
-./samples/charts/category-chart/axis-options/
+./samples/charts/category-chart/axis-options/  →  ./samples/charts/category-chart/axis-types/
 ```
-- copy the sample and rename the new folder, e.g.
-```
-./samples/charts/category-chart/axis-types/
-```
-- open the newly created folder in VS Code
 
-- rename the .ts file in src folder, using this naming convention:
+3. The folder structure must be exactly **`samples/{group}/{component}/{name}/`** with:
+   - `index.html` — sample markup (only the content inside `<body>`, wrapped in `<div id="root">`)
+   - `src/index.ts` — sample TypeScript entry point, exporting a class (e.g. `export class Sample { ... }`)
+   - `package.json` — with `"main": "src/index.ts"` (used by Astro to discover the sample)
 
-`ControlNameSampleName.ts`
+4. Implement your sample in `src/index.ts`. Export the class but **do not** instantiate it at the module level — the browser app calls `new Sample()` automatically when the page loads.
 
+5. Start the dev server and verify:
+```bash
+npm run dev
 ```
-./samples/charts/category-chart/axis-types/src/CategoryChartAxisTypes.ts
-```
-
-- open the .ts file
-
-- rename class to the name of .tsx file
+   - The new sample appears in the navigation sidebar
+   - It loads without errors in the browser console
 
-- type `npm install --legacy-peer-deps` command in terminal window
-
-- type `npm run start` command in terminal window
-
-- implement the new sample in the .tsx file
-
-- close the new sample project in VS Code
-
-- delete `node_modules` folder in the new sample project
-
-- follow instructions in the next section
-
-## Verify New Sample
-
-- type `npm run start` command in terminal window
-
-- open [http://localhost:4200](http://localhost:4200) in your browser
-
-- verify that the new sample is listed in the navigation menu
-
-- verify that the new sample loads by clicking navigation link
-
-- verify that there are no errors in DEV console
-
-- take a screenshot of the new sample with navigation menu
-
-- commit your changes
-
-- create a pull request and target the `vnext` branch
+6. Regenerate the code-viewer JSON files:
+```bash
+npm run generate:code-viewer
+```
 
-- paste the screenshot in you pull request
+7. Commit, push, and open a pull request targeting `vnext`. Include a screenshot of the running sample.
 
-- submit your pull request
+## Updating Ignite UI Package Versions
 
+Do **not** manually edit version strings in `package.json` files.
 
-## Updating Packages in Samples
+- Open [./scripts/update-ig.js](./scripts/update-ig.js)
+- Update the version in the `packageUpgrades` array
+- Run from the repo root:
+```bash
+npm run update:ig
+npm install
+```
+- Create and merge a pull request with the updated `package.json` files
 
-NOTE Do NOT find replace version of packages in package.json files. 
+## Scripts Reference
 
-- open this repo in VS Code
-- open [./browser/tasks/gulp-samples.js](./browser/tasks/gulp-samples.js) file
-- navigate to the `updateIG` function
-- update version of packages in `packageUpgrades` array
-- open terminal window
-- run `cd browser` command
-- run the `gulp updateIG` command
-- run `npm install --legacy-peer-deps` command
-- create AND merge a pull request with changes in all package.json files in this repository
-- create 2nd pull request with similar changes in `/editor-templates/WebComponents/main-template/package.json` of the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repository.
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start Astro dev server on port 4200 |
+| `npm run build` | Generate code-viewer JSONs then build static site to `dist/` |
+| `npm run preview` | Serve the `dist/` production build on port 4200 |
+| `npm run generate:code-viewer` | Regenerate `public/assets/code-viewer/**/*.json` |
+| `npm run update:ig` | Update Ignite UI package versions across all sample `package.json` files |
+| `npm run check` | Run Astro TypeScript type-checking |
 
 ## Learn More
 
-To learn more about **Ignite UI for Web Components** components, check out the [Web Components documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html).
-
-
-# Updating Version of IgniteUI Packages
-
-Perform these steps to update version of **Ignite UI for WebComponent** packages in all samples. NOTE that the order of these steps is very important.
-
-- open this repo in VS Code
-- open [gulp-samples.js](./browser/tasks/gulp-samples.js) file
-- navigate to the `updateIG` function
-- change version of **Ignite UI for WebComponent** packages in the `packageUpgrades` array
-- open terminal window
-- run `gulp updateIG` command
-- run `npm install --legacy-peer-deps` command
-- create pull request with your changes
-- open the [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo in VS Code
-- update version of **Ignite UI for WebComponent** packages in [WC template](https://github.com/IgniteUI/igniteui-xplat-examples/blob/23.2.x/editor-templates/WebComponents/main-template/package.json)
-- create pull request with your changes in [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html).
+- run `npm install --legacy-peer-deps`
+- create a pull request with your changes
+- open the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repo in VS Code
+- update the version of **Ignite UI for WebComponent** packages in the [WC template](https://github.com/IgniteUI/igniteui-xplat-examples/blob/23.2.x/editor-templates/WebComponents/main-template/package.json)
+- create a pull request with your changes in the [igniteui-xplat-examples](https://github.com/IgniteUI/igniteui-xplat-examples) repo