From 57cbfd450f300238969d580d1a2912eb9b71975a Mon Sep 17 00:00:00 2001
From: KPal <48248865+kpal81xd@users.noreply.github.com>
Date: Fri, 21 Jun 2024 12:46:15 +0100
Subject: [PATCH] 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      | 15 +++++
 examples/iframe/utils.mjs                     | 10 +++
 examples/package.json                         | 10 ++-
 .../src/examples/misc/esm-script.example.mjs  | 63 +++++++++++++++++++
 package.json                                  |  3 +-
 5 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 examples/assets/scripts/misc/rotator.mjs
 create mode 100644 examples/src/examples/misc/esm-script.example.mjs

diff --git a/examples/assets/scripts/misc/rotator.mjs b/examples/assets/scripts/misc/rotator.mjs
new file mode 100644
index 00000000000..98acb605b25
--- /dev/null
+++ b/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 };
diff --git a/examples/iframe/utils.mjs b/examples/iframe/utils.mjs
index a3f7a9e3e0f..2ff5ec7171b 100644
--- a/examples/iframe/utils.mjs
+++ b/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.
  */
diff --git a/examples/package.json b/examples/package.json
index 4fc2e135633..3f41be3ffab 100644
--- a/examples/package.json
+++ b/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": [
diff --git a/examples/src/examples/misc/esm-script.example.mjs b/examples/src/examples/misc/esm-script.example.mjs
new file mode 100644
index 00000000000..83b2206499c
--- /dev/null
+++ b/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 };
diff --git a/package.json b/package.json
index e83d81c9c79..42f544dec02 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,8 @@
         "error",
         {
           "definedTags": [
-            "category"
+            "category",
+            "attribute"
           ]
         }
       ]