ESM Scripts Beta

ESM Scripts Closed Beta

We’re happy to announce we’re beginning a closed beta for the new PlayCanvas ESM Scripts system.

ESM Scripts are based on ES Modules and bring a number of advantages over the current scripting system, laying the groundwork for exciting new features. Some of the benefits include improved code organization, better performance through asynchronous loading, and enhanced scalability for larger projects.

You can learn more about the benefits of ESM Scripts in the comments below.

We are opening up the new scripting system in closed beta today and we need your help. If you’re interested in testing, please reach out on our Discord channel with a short description of what you plan to do with ESM Scripts. We’re particularly interested in projects that push the boundaries of what’s possible with PlayCanvas.

Happy Coding! :nerd_face:

6 Likes

A better way to organize code

ES Modules allow you to split your code into reusable pieces using export and import statements. This promotes better code organization and maintainability by encapsulating functionality within modules. Dependencies are explicitly declared, making it clear which modules rely on others. This improves readability and makes the codebase easier to navigate.


// math.js

export const add = (a, b) => a + b;

// app.js

import { add } from './math.js';

console.log(add(2, 3)); // Outputs: 5

Module Scope Isolation

Variables and functions defined in an ESM Script are scoped to that module and are not added to the global object. This prevents naming collisions and accidental overwriting of global variables. Modules encapsulate their internal logic, exposing only what is explicitly exported. This leads to cleaner code and reduces the risk of unintended interactions between different parts of the codebase.

Improved Performance

ES Modules are loaded asynchronously, allowing the browser to fetch and execute modules in parallel without blocking page rendering, which improves load times.

Dependency Resolution

The module loader handles the resolution and loading order of dependencies, ensuring that modules are executed in the correct sequence. This eliminates the need to manually configure the script execution order.

Strict Mode by Default

ES Modules are always executed in JavaScript’s strict mode. This mode enforces stricter parsing and error handling, helping to catch common coding mistakes and unsafe actions. With strict mode, certain silent errors throw exceptions, making debugging easier. Variables must be declared before use, preventing accidental globals.

Optimized Bundling

ESM Scripts enable our bundler to perform tree shaking—removing unused code during the build process. This results in smaller, more efficient bundles.

Improving the Code Editor experience**

ESM Scripts enable a much richer editor experience via Monaco, which can better analyze your code for type errors and provide intelligent code completions—not only for PlayCanvas APIs but across all your project code.

Final Thoughts

By adopting ESM Scripts, you unlock a range of features that enhance both the development experience and the performance of your PlayCanvas projects. We encourage you to participate in the closed beta and experience these benefits firsthand. If you have any questions or need assistance, feel free to reach out!

2 Likes