BabylonJS Playground multiple files with tabs, ESM npm imports

Demos and projects
41

This is excellent :+1: , precisely what the complex playground requires.

1 Like
42

This is up and working here https://playground.babylonjs.com/ and as @bghgary said
image

43

Thanks again @knervous !!! I wonder if you could help with 2 things:

  • if we delete a file from the top bar, they stay in the file explorer on the left.
  • F2 to rename a symbol shows a pretty big window
44

There is no code button at the bottom left on mobile to display the code editor

Screenshot_20250930-152954
Screenshot_20250930-1529541075×2393 98.2 KB

45

@knervous I had to revert the PR merge, could you please reopend the PR so that we could try and address those issues ?

The mobile is a blocker for us :frowning:

46

New playground does not seem to do syntax coloring for .js files?

Example: https://www.babylonjs-playground.com/#20XT9A#4

image
image1920×1080 325 KB

47

Hey, sorry about the fallout with the deployment there. I’m 99% sure this was a browser caching problem (I’ve run into these a lot at work during deployments with different layers of cache policies in the CDN/client/AZ front door etc.) and I have a PR up outlining the issue in detail and commits to ensure no more stale assets in the browser on a new request. This is especially likely since it was pointed out the new version did not show up unless a hard cache reset and reload was performed.

Nothing needs to change infrastructure-wise but it could be a good idea to check the build procedures for other apps to see if this thing doesn’t happen elsewhere in the field.

Here is the PR: Playground Editor V2: Multi-file, ES modules, NPM Support + Build output hashing by knervous · Pull Request #17216 · BabylonJS/Babylon.js · GitHub

I also squeeked in changes to the F2 rename a symbol popup. The delete from the context menu (right click - the list item in red that says Delete) should be deleting the file from the project as well, otherwise clicking the X will just close the file from the open editor. I’ve tested that to be working but let me know if that’s not the case and how you’re reproducing.

Thanks for the quick feedback all and hope this next round goes smoother. @Deltakosh CC

2 Likes
48

This was likely fallout from the previous post, browser caching, and should be fixed in the current PR that’s up. You can test that PG here to see how it’s showing up on your side

Here’s output for me:

image
image1920×1012 211 KB

3 Likes
49

Thanks a ton again for the hard work and infra fix.

1 Like
50

Can’t agree more!

1 Like
51

This change is AMAZING!!! +1 to everything said above, really appreciate all of the care put into this (both the original PR and all of the updates) and I’m excited to use the new features! I especially love the popup showing history of recent pgs :slight_smile: super cool!

1 Like
52

Great work! :smiley:

This demo loads a snippet from the playground-server. (click the button below). It would be a nice feature to import ‘old code’ into the new playground by hashnumber.

The function “readTextFile” is responsible for the load here: Source Code

1 Like
53

Appreciate everyone’s enthusiasm for the feature and team’s willingness to take on a big change–glad I got to familiarize myself with the whole monorepo and build pipelines and dependencies, will make testing things locally much easier before trying to put up a core PR :slight_smile:

@CodingCrusader that’s a nifty idea.. what do you think about syntax like

import { utilFunction, Playground as SnippetPlayground } from '#00JR7Z#137'

export class Playground extends SnippetPlayground {
 // pre-defined template. func invoke here is static anyway but just an example
}
// can use any exported functions from the entrypoint or index.ts/js

Would probably only be compatible with the new snippet version because of the ES module syntax with exports, but would be easy to convert any existing just by saving it once. Definitely easier than hosting code via npm publishes or another cdn.

2 Likes
54

It’s working great now!

2 Likes
55

Hi everyone - this was merged in and is now live! Thanks to the team for taking a careful pass in testing. Issues are bound to arise so if anything pops up, at least for now this is a good dumping ground for feedback. :partying_face:

6 Likes
56

Thank you buddy! That was an excellent contribution!

3 Likes
57

So exciting!!! Thank you!!!

(( Before hard refresh I get the below error visiting old playgrounds but as mentioned above ctrl+f5 did the trick! Just bumping that info to a more recent post since the convo is long ))

image
image3060×1317 123 KB

2 Likes
58

Interesting! I took a thorough pass at asset caching but there may have been some stragglers causing undefined behavior. At this point with the ttl set for browser caching everything should pull in from the new deploy. If anyone sees anything odd let me know!

59

Hey I found this issue while coding:

image
image780×905 62.4 KB

The help seems to overlap OUTside of its box :slight_smile:

1 Like
60

An interesting feature would be to save the current state of the editor (files open in the editor, currently selected file, and cursor position in the file). That way, when we open the PG, we would find it in exactly the same state as when we saved it.

However, I think this option should be enabled by passing a parameter to the URL and adding an option in the “Settings” menu: this way, the current behavior would not change (some users might be surprised if the current file in a PG was not the main file…).

This would be useful when writing documentation, for example if we want to point specifically to code in a specific file in a PG (we would simply need to save the PG with the correct file selected and the cursor in the appropriate location).

The next step (or perhaps it would be easier to implement it this way?) would be to transmit (via URL parameters) the list of files we want to open in the editor + the file to select + the cursor position…

2 Likes