BJSPM: Babylon.js Package Manager & Asset Repo + Modular ES6 Playground

Announcements
1

BJSPM

BJSPM is an npm-like package manager made specially for Babylon.js. Its development started over a year ago with the goal of having a way for us to more easily share code and assets. Instead of having to go through npm, GitHub, playgrounds, the forum, etc., we can now get and share ready-to-go packages with just a few search queries and CLI commands!

Features:

  • No login requied;
  • Unlimited public packages;
  • Unlimited private packages, with the ability to manage user permissions;
  • Not just code – any asset allowed;
  • You can upload individual files, no need to make a package.json file or anything;
  • Packages and their files are available on the website, no CORS restrictions;
  • Packages can be used in the ES6 Playground;
  • Packages of up to 1 GiB in size.

Documentation

ES6 Playground

The ES6 Playground is a derivative of the Babylon.js Playground, made to complement BJSPM. It uses Babylon.js’ ES6 modules instead of the global BABYLON object, so you can import package modules.

Features:

  • Auto-adds missing class imports on run (i.e. you can leave out the BABYLON prefix);
  • Converts BABYLON code to ES6 code on run;
  • Catches Babylon.js errors to detect missing side effect imports, automatically patches the code (but cannot catch errors in async code);
  • Import any BJSPM package, IntelliSense enabled (checks for a corresponding .d.ts file for every imported .js module).

Important differences:

  • Playgrounds get executed in an iframe with their own window object, this is to prevent old imports to persist, which would allow missing imports in the editor to go unnoticed;
  • The “latest” Babylon.js version on the ES6 Playground will lag behind the actual latest as seen on the Babylon.js Playground, because it has to be updated manually;
  • There is no way to search for ES6 playground in the database.

Demo:
https://playground.croncle.com/#CEGIX2

Please use the Babylon.js Playground if you don’t use a BJSPM package or have no need for ES6 modules, so as to keep things in one place.

Onwards!

Now let’s add some packages! Whether you have a whole extension or just a code snippet, please do share!

Please be aware that there are bound to be some bugs; if you find them, please send me a message. Any feedback is welcome.

10 Likes
2

This is pretty epic.

1 Like
3

Woot! I’m genuinely impressed this is dope!!!

1 Like
4

This is so great! Far better than I could have produced in this time. Well done and thanks @Gijs ! So this is in beta at the moment whilst we put it through its paces?

5

@ajp
Thanks, and yes the real test will be actually using it; I found a bug when adding / using the TextureCanvas and LowPolyBuilder packages, and some more around the launch (fixed).

1 Like
6

Great ok good to know. I won’t be able to do anything for the next two weekends but I have created an account and will eagerly try it out later in the month.

1 Like
7

groetjes @Gijs this is absolutely incredible!

I was wondering if you would be keen to share more on what you have built - in terms of something that could be run locally and modified. I have sometimes thought about adding support for JSX/TSX to our babylon playground, but the way your playground works looks like it would be a lot easier. I end up using CodeSandbox usually to publicly reproduce issues that I come across, since I can use NPM and imports as per usual development…

anyway, congratulations on the great idea and it works fantastic.

1 Like
8

Thanks @brianzinn , the way it works to fully set it up right now is hacky and not user-friendly unfortunately. Also it cannot just import any NPM module, it loads BJS modules of which the module URLs have been rewritten first, and the Playground has a list of import-to-file URL mappings, so it can’t even tell which files exist on the file system. I do want to polish it up though, then I could make it available, and maybe this goes somewhere as well to make it easier:

1 Like
10

Hey, is this still alive?
*croncle.com is not working anymore.

11

Bump. @Gijs no worries if this is not live anymore but was hoping to upload an asset :slight_smile: