ESM example (#6735)

* added esm example script

* moved rotator script to examples only

* Added attribute tag to defined tags

* renamed esm to esm-script and hid example

examples/assets/scripts/misc/rotator.mjs

@@ -0,0 +1,15 @@
+import { Script } from 'playcanvas';
+
+class Rotator extends Script {
+    /**
+     * @attribute
+     */
+    angle = 0;
+
+    update(dt) {
+        this.angle += dt;
+        this.entity.setLocalEulerAngles(this.angle * 10, this.angle * 20, this.angle * 30);
+    }
+}
+
+export { Rotator };

examples/iframe/utils.mjs

@@ -68,6 +68,16 @@ export function localImport(name) {
     return import(url);
 }
 
+/**
+ * Imports an absolute file as a module.
+ *
+ * @param {string} name - The name of the absolute file.
+ * @returns {Promise<any>} - The module exports.
+ */
+export function fileImport(name) {
+    return import(name);
+}
+
 /**
  * Clears all the blob URLs.
  */

examples/package.json

@@ -28,7 +28,15 @@
       "pcx": "readonly"
     },
     "rules": {
-      "import/no-unresolved": "off"
+      "import/no-unresolved": "off",
+      "jsdoc/check-tag-names": [
+        "error",
+        {
+          "definedTags": [
+            "attribute"
+          ]
+        }
+      ]
     }
   },
   "eslintIgnore": [

examples/src/examples/misc/esm-script.example.mjs

@@ -0,0 +1,63 @@
+// @config HIDDEN
+import * as pc from 'playcanvas';
+import { deviceType, rootPath, fileImport } from 'examples/utils';
+
+const { Rotator } = await fileImport(rootPath + '/static/assets/scripts/misc/rotator.mjs');
+
+const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
+window.focus();
+
+const gfxOptions = {
+    deviceTypes: [deviceType],
+    glslangUrl: rootPath + '/static/lib/glslang/glslang.js',
+    twgslUrl: rootPath + '/static/lib/twgsl/twgsl.js'
+};
+
+const device = await pc.createGraphicsDevice(canvas, gfxOptions);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new pc.AppOptions();
+createOptions.graphicsDevice = device;
+
+createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem, pc.ScriptComponentSystem];
+createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler];
+
+const app = new pc.AppBase(canvas);
+app.init(createOptions);
+app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+// create box entity
+const box = new pc.Entity('cube');
+box.addComponent('render', {
+    type: 'box'
+});
+box.addComponent('script');
+box.script.create(Rotator);
+app.root.addChild(box);
+
+// create camera entity
+const camera = new pc.Entity('camera');
+camera.addComponent('camera', {
+    clearColor: new pc.Color(0.5, 0.6, 0.9)
+});
+app.root.addChild(camera);
+camera.setPosition(0, 0, 3);
+
+// create directional light entity
+const light = new pc.Entity('light');
+light.addComponent('light');
+app.root.addChild(light);
+light.setEulerAngles(45, 0, 0);
+
+export { app };

package.json

@@ -77,7 +77,8 @@
         "error",
         {
           "definedTags": [
-            "category"
+            "category",
+            "attribute"
           ]
         }
       ]