Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Examples] Build update #5334

Merged
merged 19 commits into from Jun 1, 2023
Merged

[Examples] Build update #5334

merged 19 commits into from Jun 1, 2023

Conversation

ellthompson
Copy link
Contributor

This PR removes the need to build each individual example iframe document using a separate build process from the main example application. Developing the examples browser now only requires the use of a single build script npm run watch which builds the entire application using rollup.

The rollup configuration now contains three builds:

  • app: Builds the examples browser frontend application. This depends on a prebuilt examples manifest file to retrieve the list of categories / examples to display, as well as the TypeScript code used to run each example for the online code editor.
  • iframe: Bundles all of the dependencies necessary to run the example iframe. This needs to be able to run independently from the main frontend application. This bundle includes the PlayCanvas dependency from the local engine build directory so any edits to your local engine build will trigger a build of this iframe.
  • examples: Bundles all of the example classes. This is included on the iframe page and the required example is selected from this bundle using url query parameters.

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

@ellthompson ellthompson marked this pull request as ready for review May 22, 2023 11:36
@ellthompson ellthompson requested a review from a team May 22, 2023 11:36
@mvaligursky
Copy link
Contributor

I had a go. Overall a great improvement! It's so much easier to use with just a single command line and debug engine! Love it.

Small improvement suggestions:

  • could 'npm run watch' start he serving as well, to avoid having to start it separately?
  • when I visit 'http://localhost:5000/iframe/' I get 'Uncaught No example specified, showing a list of all examples instead!' - this should be handled / no error displayed?
  • when I modify script (for example planar-renderer.js while using reflection-planar example), the changes are reflected in the example, but nothing is printed in console window to show me something gets updated. This is a small possible improvement to log something, so I don't need to wonder if anything rebuilt. When I change example code, or engine builds, I can see dist/examples or dist/iframe is updated .. this is great, and I'd like this for scripts as well please. If all it says is 'asset copied' or whatever, that'd be great. If can even print the names of those, that'd be even better.

@GSterbrant
Copy link
Contributor

Absolutely love it!

@GSterbrant
Copy link
Contributor

@mvaligursky You can just run develop right?

@ellthompson If it is at all possible to get a time stamp of when the build was done, that would help with @mvaligursky problem of understanding if changes have been recognized by the watch 🙂

@ellthompson
Copy link
Contributor Author

I've included a timestamp for all builds:
image

Also all static directories / files are now watched and copied on change.

@ellthompson
Copy link
Contributor Author

The iframe page no longer throws errors when displaying the list of all examples.

@ellthompson ellthompson merged commit 8a8f875 into main Jun 1, 2023
7 checks passed
@ellthompson ellthompson deleted the examples-build-update branch June 1, 2023 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants