Add sample projects to code editor test page #1294
Open
+244
−40
Conversation
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
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
5864a9c to
aaae63b
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
aaae63b to
b632bf6
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
zetter-rpf
changed the title
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
b632bf6 to
68a3f53
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
I want to use add more demos to the web-component.html page, but it would be easier if we could load a project directly by providing JSON rather than providing an identifier that has to be loaded through an API. If this was just react I would pass in a loadProject function, but it's harder to pass in behaviour like that to web components. This is only intended to be set when the component is loaded and not changed during the lifecycle of the component.
It's handle to be able to quickly try out different projects, and later when we introduce scratch it would be useful to be able to get a scratch project from the test page without a dependnecy on another app. I've set up json files for the projects and used AI to generate interesting multi-file html and python projects
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
68a3f53 to
0a08227
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
dda89a7 to
47b4bb1
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
On this branch this test consistently fails. I'm not sure why this test is failing as there are other similar tests. Try seting test isolation in case other tests are interfering
zetter-rpf
force-pushed
the
improve-code-editor-test-page
branch
from
47b4bb1 to
73a494e
Compare
zetter-rpf
temporarily deployed
to
previews/1294/merge
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds sample project loading functionality to the code editor test page, enabling quick testing of different project types without external dependencies. It introduces a new initial_project web component attribute that accepts JSON project data, along with a UI bar containing links to load predefined sample projects (blank and "cool" examples for both HTML and Python).
Changes:
- Added
initial_projectattribute support to the web component for loading projects from JSON - Created sample project JSON files with starter templates and demonstration projects
- Updated webpack configuration to serve project files from
src/projectsdirectory - Modified test page HTML to include a project selector bar and improved layout structure
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Added static file serving and copy patterns for project JSON files |
| src/web-component.js | Added initial_project to observed attributes list |
| src/web-component.html | Added sample projects bar UI and fetch logic to load projects dynamically |
| src/projects/*.json | Four sample project files (blank starters and demo projects for HTML/Python) |
| src/hooks/useProject.js | Added logic to parse and load initialProject parameter with priority handling |
| src/hooks/useProject.test.js | Added test coverage for initialProject feature |
| src/containers/WebComponentLoader.jsx | Added initialProject prop forwarding |
| src/containers/WebComponentLoader.test.js | Updated test expectations to include initialProject parameter |
| package.json | Removed JSON files from eslint configuration (appropriate change) |
| cypress.config.mjs | Enabled testIsolation (standard Cypress configuration) |
| CHANGELOG.md | Added entry for this feature |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
jamiebenstead
approved these changes
Jan 29, 2026
Contributor
Author
|
Grr, I'm having some problems with an intermittently failing test - it's mostly failing in CI, and occasionally failing locally. I think I must have made some change that makes the failure more likely but I'm not sure what it is. Will look on Monday. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
It's handy to be able to quickly try out different projects, and later when we introduce scratch it would be useful to be able to get a scratch project from the test page without a dependency on another app.
To do this, allow an initialProject to be set in the web component.
I've set up json files for sample projects and used AI to generate interesting multi-file HTML and Python projects.
New project bar at the top: