Skip to content

Conversation

Copy link

Copilot AI commented Nov 17, 2025

Implements a new samples browser using Vite in browser-vite/, eliminating Gulp dependency and simplifying the build pipeline.

Implementation

Copy Process

  • Single Node.js script (scripts/copy-samples.js) replaces Gulp tasks
  • Scans /samples for package.json files to identify 936 samples
  • Extracts HTML structure from each sample's index.html
  • Generates unified metadata JSON for navigation

Browser Architecture

  • Vite 7.2.2 with TypeScript configuration
  • Client-side routing supporting both browser view (/) and direct sample URLs (/charts/category-chart/overview)
  • Collapsible navigation tree organized by component group → category → sample
  • Dynamic sample loading via ES module imports

Sample Compatibility

  • Zero modifications required to existing sample source
  • HTML content extracted via regex from <div id="root"> to </body>
  • Sample TypeScript files copied as-is from src/ directories

Structure

browser-vite/
├── scripts/copy-samples.js      # Replaces gulp pipeline
├── src/
│   ├── main.ts                  # Router + navigation logic
│   ├── samples/                 # Copied from /samples (generated)
│   └── samples-metadata.json    # Navigation data (generated)
├── index.html                   # Navigation UI
└── vite.config.js               # Build configuration

Usage

cd browser-vite
npm install
npm run dev      # Copies samples + starts dev server
npm run build    # Production bundle

Screenshots

Navigation interface with collapsible categories:

Browser UI

Sample categories expanded:

Navigation

Original prompt

This section details on the original issue you should resolve

<issue_title>Create a new vite-based samples browser</issue_title>
<issue_description>Create a new samples browser with vite. Add it as a separate folder called browser-vite.

  • It needs to follow the same structure where samples come from the /samples folder and are copied before the browser is run similar to how it's done at the moment with the gulp scripts. However, don't use gulp and have the copy process be as simple as possible. Sample source should be the same or at worse require very small changes .
  • The samples should be browsable with a navigation list but also viewable separately with a different path (similar to how routing works for the current browser)</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Create new vite-based samples browser Add Vite-based samples browser with simplified build process Nov 17, 2025
Copilot finished work on behalf of ChronosSF November 17, 2025 15:01
Copilot AI requested a review from ChronosSF November 17, 2025 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create a new vite-based samples browser

2 participants