Generate ESM boilerplate (#67)

* Generate ESM boilerplate * feedback updates * Update src/assets/createScript.js Co-authored-by: Will Eastcott <[email protected]> * feedback * Fixes tests --------- Co-authored-by: Will Eastcott <[email protected]>
playcanvas · Feb 14, 2024 · c40325d · c40325d
1 parent 0450a29
commit c40325d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/src/assets/createScript.js b/src/assets/createScript.js
@@ -1,7 +1,8 @@
 const VALID_FILENAME = /^([^0-9.#<>$+%!`&='{}@\\/:*?"<>|\n])([^#<>$+%!`&='{}@\\/:*?"<>|\n])*$/i;
 
 /**
- * Creates filename and script content from provided arguments.
+ * Creates filename and script content from provided arguments. If the provide filename contains a '.mjs'
+ * suffix, it will generate an ESM based class syntax.
  *
  * @param {string} filename - The desired filename.
  * @param {string} text - The desired contents of the script. If not provided boilerplate code will be used.
@@ -50,8 +51,9 @@ function createScript(filename, text) {
     if (!/.js$/i.test(filename)) {
         filename += '.js';
     }
-
-    const content = text || createBoilerplate(className, scriptName);
+    const isEsm = filename.endsWith('.mjs');
+    const boilerPlateGenerator = isEsm ? createEsmBoilerplate : createBoilerplate;
+    const content = text || boilerPlateGenerator(className, scriptName);
 
     return {
         filename,
@@ -73,13 +75,38 @@ ${className}.prototype.update = function(dt) {
 
 };
 
-// swap method called for script hot-reloading
-// inherit your script state here
+// uncomment the swap method to enable hot-reloading for this script
+// update the method body to copy state from the old instance
 // ${className}.prototype.swap = function(old) { };
 
-// to learn more about script anatomy, please read:
-// https://developer.playcanvas.com/en/user-manual/scripting/
+// learn more about scripting here:
+// https://developer.playcanvas.com/user-manual/scripting/
+    `.trim();
+}
+
+function createEsmBoilerplate(className, scriptName) {
+    return `
+export class ${className} extends pc.ScriptType {
+
+    static name = '${scriptName}';
+
+    initialize() {
+
+    }
+
+    update() {
+
+    }
+
+    // uncomment the swap method to enable hot-reloading for this script
+    // update the method body to copy state from the old instance
+    // swap(old) { };
+}
+
+// learn more about scripting here:
+// https://developer.playcanvas.com/user-manual/scripting/
     `.trim();
+
 }
 
 export { createScript };
diff --git a/test/api/test-assets.js b/test/api/test-assets.js
@@ -32,12 +32,12 @@ ${className}.prototype.update = function(dt) {
 
 };
 
-// swap method called for script hot-reloading
-// inherit your script state here
+// uncomment the swap method to enable hot-reloading for this script
+// update the method body to copy state from the old instance
 // ${className}.prototype.swap = function(old) { };
 
-// to learn more about script anatomy, please read:
-// https://developer.playcanvas.com/en/user-manual/scripting/
+// learn more about scripting here:
+// https://developer.playcanvas.com/user-manual/scripting/
         `.trim();
     }