Add browser-based WASM playground for fancy-regex with enhanced configurability and proper flag handling #181

Copilot · 2025-08-17T13:32:42Z

This PR introduces a comprehensive browser-based playground for the fancy-regex crate, compiled to WebAssembly (WASM). The playground provides an interactive interface for testing and exploring advanced regex features like backreferences and lookaround assertions.

Features

🎯 Interactive Regex Testing

Real-time regex pattern testing with immediate visual feedback
Support for all fancy-regex features including backreferences, named capture groups, and lookaround assertions
Visual highlighting of matches and capture groups in the test text
Configurable regex flags (case-insensitive, multi-line, dot-matches-newline, ignore-whitespace)

🔍 Advanced Analysis Tools

Parse tree visualization showing the internal AST structure of regex patterns with proper flag consideration
Detailed analysis output displaying compilation information and optimization details with flag-aware processing
Clear error messages for invalid patterns, compilation errors, and runtime issues

⚡ Performance & UX

Configurable debounce delay (100ms-2000ms) to customize real-time update responsiveness
Responsive design that works well on desktop and mobile devices
Loading states and smooth transitions for better user experience
Clean CSS organization with proper styling separation

Technical Implementation

WASM Module (playground/src/lib.rs)

Rust wrapper exposing fancy-regex functionality to JavaScript via wasm-bindgen
Key functions: find_matches, find_captures, parse_regex, analyze_regex, is_match
Flag-aware parsing and analysis functions that respect regex configuration using parse_tree_with_flags
Proper named capture group resolution using regex's capture_names() method
Uses flag constants exported from main crate's internals module to avoid code duplication
Optimized build configuration with size optimization and LTO

Frontend (playground/web/)

Modern HTML5/CSS3/JavaScript interface with no external dependencies
Structured as a two-panel layout with input controls and results display
Enhanced UI with configurable settings and clean footer design
Comprehensive error handling and user feedback
Preserves line breaks in highlighted text output

Development & Deployment

Local development server with CORS headers for WASM (serve.py)
Automated build script (build.sh) with version injection from main Cargo.toml
GitHub Actions workflow for automatic deployment to GitHub Pages
Complete documentation and usage instructions

Example Usage

The playground demonstrates fancy-regex capabilities with examples like:

h(?=ello)           # Positive lookahead
(?<word>\w+)\s+\k<word>  # Named backreferences  
(\w+)\s+\1          # Numbered backreferences
\w+(?=\s+world)     # Word boundary with lookahead

Code Quality Improvements

Clean architecture: Removed unused functions and consolidated common patterns
Proper flag handling: Flag constants exported from main crate to ensure consistency
Enhanced capture groups: Named capture group resolution shows actual group names
UI improvements: Fixed scrolling issues, organized CSS, and improved visual layout
Automated versioning: Build script automatically extracts version from main Cargo.toml

Deployment

The playground can be deployed to GitHub Pages automatically via the included GitHub Actions workflow, making it accessible at https://fancy-regex.github.io/fancy-regex/.

This addition significantly enhances the accessibility of fancy-regex by providing an interactive way for users to learn and experiment with advanced regex features without requiring local Rust installation.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: keith-hall <[email protected]>

keith-hall

Nice, looks good! A few things to fix and improve but this is a great start! 🎉

playground/Cargo.toml

playground/src/lib.rs

playground/web/app.js

playground/web/index.html

… new features Co-authored-by: keith-hall <[email protected]>

keith-hall

A few more changes needed. In particular it makes sense to promote code-reuse where possible and ensure that documentation is up-to-date.

playground/web/index.html

playground/src/lib.rs

playground/README.md

…e footer info, automate version Co-authored-by: keith-hall <[email protected]>

keith-hall

A few more small comments, keep up the good work!

playground/src/lib.rs

playground/web/index.html

playground/src/lib.rs

playground/web/index.html

…, improve capture names Co-authored-by: keith-hall <[email protected]>

…ptures

for better transparency of what is deployed

robinst

I've done a quick pass and added some comments. Haven't looked through the JS and HTML in detail yet.

robinst · 2025-08-30T12:56:37Z

.github/workflows/deploy-playground.yml

+        uses: actions/checkout@v5
+
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1


This one is no longer maintained, we should use e.g. https://github.com/dtolnay/rust-toolchain instead.

thanks, updated

robinst · 2025-08-30T12:56:51Z

.github/workflows/deploy-playground.yml

+          wasm-pack build --target web --out-dir pkg --release
+          cp -r pkg/ web/
+          touch web/.nojekyll
+          rm web/pkg/.gitignore


Why is this needed? Maybe it should be excluded somewhere else?

The GitHub Action for deploying to GitHub Pages respects .gitignore, but we don't want to commit the compiled WASM stuff to git normally - just for the gh-pages branch. So this was the easiest solution I could think of, maybe there is a better way...

I was still confused why the .gitignore is there in the first place, but now ran this locally. Even other files like README.md are there:

❯ ls -a web/pkg/ ./ fancy_regex_playground_bg.wasm.d.ts package.json ../ fancy_regex_playground.d.ts README.md .gitignore fancy_regex_playground.js fancy_regex_playground_bg.wasm LICENSE

Maybe instead of doing cp -r pkg/ web/ we could just do cp -r pkg/fancy_regex* web/pkg/? Ah but then pkg would need to be not ignored 🤔. Maybe it's fine the way it is.

.github/workflows/deploy-playground.yml

robinst · 2025-08-30T12:58:09Z

.github/workflows/deploy-playground.yml

Let's rename this to gh-pages, as it deploys the whole page (clean: true).

playground/src/lib.rs

robinst · 2025-08-30T13:13:06Z

playground/Cargo.toml

Is this crate going to be published when we run cargo publish in the root of the repository? If yes, can we exclude it?

good question 🙂 I did a cargo publish --dry-run on the root of the repository and it only wanted to publish fancy-regex, not the playground 👍

playground/README.md

robinst · 2025-08-30T13:16:34Z

playground/build.sh

Not sure what this is for. If for local development, we don't need the version stuff.. And if so, maybe the README should just defer to this one.. Or maybe we just leave the stuff in the readme and get rid of this?

it's for local development, and I updated CI/CD to re-use it too, to make it easier to maintain and be confident that the GitHub Actions work as expected. I therefore removed the manual instructions in the readme.

README.md

playground/src/lib.rs

both the readme and CI/CD now use build.sh for consistency

don't require callers to analyze to do the logic of determining the start group

robinst

Some more comments. Still some things we could improve with the styling and UI, but I think it's good enough to merge once comments are addressed!

robinst · 2025-09-10T12:12:30Z

playground/README.md

+  - Named capture groups (`(?<name>...)` and `\k<name>`)
+  - Lookahead and lookbehind assertions
+  - All other fancy-regex features
+- **Real-time Highlighting**: Visual highlighting of matches and capture groups in the test text


Having tried it out, it doesn't actually highlight capture groups, only matches?

indeed, I have now corrected the readme

robinst · 2025-09-10T12:18:54Z

playground/web/index.html

+                            <input type="checkbox" id="flag-ignore-whitespace">
+                            <label for="flag-ignore-whitespace">Ignore whitespace</label>
+                        </div>
+                        <div class="flag-group" style="display: none;">


display: none; is one way to remove this 😆.. Can you clean this and the corresponding code up?

robinst · 2025-09-10T12:23:48Z

playground/web/index.html

+                </div>
+
+                <div class="input-group">
+                    <label for="debounce-delay">Update Delay (ms):</label>


Not sure this really needs to be configurable in the UI? I would probably remove.

robinst · 2025-09-10T12:28:17Z

playground/web/index.html

+            padding: 1rem;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            font-family: 'Courier New', monospace;


Not sure why they have a different monospace font here. In general the fonts are bit all over the place currently (e.g. the blue buttons have a different font from the rest). I think we should have:

Set a generic non-monospace font for all the UI stuff (including the buttons)

Only use monospace for the input and result text boxes

robinst · 2025-09-10T12:30:01Z

playground/web/index.html

+            <div class="panel-header">Input</div>
+            <div class="panel-content">
+                <div class="input-group">
+                    <label for="regex-input">Regular Expression:</label>


Let's not use "Title Case" anywhere, but instead just "Sentence case", so e.g. "Regular expression:", "Case insensitive" etc.

robinst · 2025-09-10T12:39:11Z

playground/web/index.html

+</head>
+<body>
+    <div class="header">
+        <h1>🎯 fancy-regex Playground</h1>


I don't like the emoji personally.. Was wondering if we could use something that reminds us of regexes. Maybe /fancy-regex playground/?

great idea, done :)

change playground page heading and title

change from title case to sentence case in the playground html

move styles to separate stylesheet

- Set a generic non-monospace font for all the UI stuff (including the buttons) - Only use monospace for the input and result text boxes (and parse tree/analysis output)

Make readme more accurate with regards to current features of the playground

remove debounce delay input

remove hidden unicode flag

…390d-3d28-4341-9de0-237db53e7177

Initial plan

6e40d24

Copilot AI assigned Copilot and keith-hall Aug 17, 2025

Copilot started work on behalf of keith-hall August 17, 2025 13:32 View session

Complete WASM playground implementation with full functionality

7ca4cdc

Co-authored-by: keith-hall <[email protected]>

Copilot AI changed the title ~~[WIP] Add browser-based interactive playground for fancy-regex using WASM~~ Add browser-based WASM playground for fancy-regex with advanced features Aug 17, 2025

Copilot AI requested a review from keith-hall August 17, 2025 14:02

Copilot finished work on behalf of keith-hall August 17, 2025 14:02

keith-hall requested changes Aug 17, 2025

View reviewed changes

Copilot started work on behalf of keith-hall August 17, 2025 19:59 View session

Fix playground Cargo.toml, update Rust functions, and enhance UI with…

443d8bb

… new features Co-authored-by: keith-hall <[email protected]>

Copilot AI changed the title ~~Add browser-based WASM playground for fancy-regex with advanced features~~ Add browser-based WASM playground for fancy-regex with enhanced configurability and proper flag handling Aug 17, 2025

Copilot AI requested a review from keith-hall August 17, 2025 20:16

Copilot finished work on behalf of keith-hall August 17, 2025 20:16

keith-hall requested changes Aug 17, 2025

View reviewed changes

Copilot started work on behalf of keith-hall August 17, 2025 20:53 View session

Refactor WASM playground: extract common code, fix flag handling, mov…

98ea712

…e footer info, automate version Co-authored-by: keith-hall <[email protected]>

Copilot AI requested a review from keith-hall August 17, 2025 21:06

Copilot finished work on behalf of keith-hall August 17, 2025 21:06

keith-hall requested changes Aug 18, 2025

View reviewed changes

Copilot started work on behalf of keith-hall August 18, 2025 11:05 View session

Address PR feedback: remove unused create_regex, export flags, fix UI…

541acc8

…, improve capture names Co-authored-by: keith-hall <[email protected]>

Copilot AI requested a review from keith-hall August 18, 2025 11:19

Copilot finished work on behalf of keith-hall August 18, 2025 11:19

keith-hall mentioned this pull request Aug 18, 2025

interactive playground #176

Open

keith-hall added 5 commits August 18, 2025 20:03

show capture group names

853917e

cargo fmt

8940083

add license to playground, update title to match project name

c18fc95

fix path to javascript file

a875595

enable wasm optimizations in release mode

a182586

keith-hall marked this pull request as ready for review August 19, 2025 02:57

keith-hall approved these changes Aug 19, 2025

View reviewed changes

keith-hall added 3 commits August 19, 2025 20:04

fix analysis of optimized parse tree

8eab954

Remove find_matches function and update JS to extract matches from ca…

92a2c0a

…ptures

Commit to gh-pages branch when deploying playground

6e07be8

for better transparency of what is deployed

keith-hall requested a review from robinst August 29, 2025 05:19

robinst reviewed Aug 30, 2025

View reviewed changes

keith-hall added 5 commits August 30, 2025 21:22

improvements to CI playground deployment from PR review

fb94a8c

improvements to CI playground deployment from PR review

8b68a45

reuse build script instead of reinventing the wheel

7df6e85

both the readme and CI/CD now use build.sh for consistency

improvements from PR review

f096899

improvements from PR review

4f3c98b

don't require callers to analyze to do the logic of determining the start group

keith-hall mentioned this pull request Aug 31, 2025

Fix analyzer start group in optimized patterns in toy example #183

Closed

Replace JsValue with String as error type in playground WASM functions

be529f8

robinst reviewed Sep 10, 2025

View reviewed changes

keith-hall added 9 commits September 11, 2025 20:16

improvements from PR review

cbd94cd

change playground page heading and title

improvements from PR review

490221f

change from title case to sentence case in the playground html

improvements from PR review

9811dc2

move styles to separate stylesheet

improvements from PR review

97194a0

- Set a generic non-monospace font for all the UI stuff (including the buttons) - Only use monospace for the input and result text boxes (and parse tree/analysis output)

improvements from PR review

57e55a6

Make readme more accurate with regards to current features of the playground

improvements from PR review

7f4b106

remove debounce delay input

improvements from PR review

7f7e257

remove hidden unicode flag

Merge remote-tracking branch 'fancy-regex/main' into copilot/fix-075d…

2c199f1

…390d-3d28-4341-9de0-237db53e7177

fixes after merging from main branch

3f8fb71

keith-hall merged commit 0f6f611 into main Sep 12, 2025
9 checks passed

Uh oh!

Add browser-based WASM playground for fancy-regex with enhanced configurability and proper flag handling #181

Add browser-based WASM playground for fancy-regex with enhanced configurability and proper flag handling #181

Uh oh!

Conversation

Copilot AI commented Aug 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Technical Implementation

Example Usage

Code Quality Improvements

Deployment

Uh oh!

keith-hall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keith-hall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keith-hall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

robinst left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

keith-hall Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

robinst left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Aug 17, 2025 •

edited

Loading

keith-hall Aug 31, 2025 •

edited

Loading