Merge pull request #5 from AR-js-org/copilot/replace-static-device-profiles

Replace static device profiles with runtime capability-based profiling

Author: kalwalt

.gitattributes

@@ -0,0 +1,22 @@
+# Enforce LF for source and text files across platforms
+*.js text eol=lf
+*.mjs text eol=lf
+*.cjs text eol=lf
+*.ts text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.css text eol=lf
+*.html text eol=lf
+
+# Keep binary files untouched
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.webp binary
+*.mp4 binary
+*.mp3 binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.otf binary

.github/workflows/ci.yml

@@ -2,18 +2,18 @@ name: CI
 
 on:
   push:
-    branches: ["**"]
+    branches: ['**']
     paths:
-      - "src/**"
-      - "plugins/**"
-      - "examples/**"
-      - "tests/**"
-      - "package.json"
-      - "vite.config.js"
-      - "vitest.config.js"
-      - ".github/workflows/**"
+      - 'src/**'
+      - 'plugins/**'
+      - 'examples/**'
+      - 'tests/**'
+      - 'package.json'
+      - 'vite.config.js'
+      - 'vitest.config.js'
+      - '.github/workflows/**'
   pull_request:
-    branches: ["**"]
+    branches: ['**']
 
 concurrency:
   group: ci-${{ github.ref }}
@@ -26,7 +26,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [20.x] # stick to Node 20 LTS for CI stability
+        node-version: [22.x] # stick to Node 22 LTS for CI stability
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -74,10 +74,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node.js 20
+      - name: Setup Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: npm
 
       - name: Install dependencies
@@ -101,4 +101,4 @@ jobs:
         run: npm run build:vite
         env:
           # Ask rollup to use JS fallback if native optional dep is still missing
-          ROLLUP_SKIP_NODEJS_NATIVE: "1"
+          ROLLUP_SKIP_NODEJS_NATIVE: '1'

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -14,9 +14,9 @@ AR.js Core now includes a modern Entity-Component-System (ECS) architecture with
 ### Quick Start with ECS
 
 ```javascript
-import { Engine, CaptureSystem, SOURCE_TYPES } from "ar.js-core";
-import { webcamPlugin } from "./plugins/source/webcam.js";
-import { defaultProfilePlugin } from "./plugins/profile/default-policy.js";
+import { Engine, CaptureSystem, SOURCE_TYPES } from 'ar.js-core';
+import { webcamPlugin } from './plugins/source/webcam.js';
+import { defaultProfilePlugin } from './plugins/profile/default-policy.js';
 
 // Create engine and register plugins
 const engine = new Engine();
@@ -94,7 +94,7 @@ If the camera doesn’t start automatically, click or tap once to allow autoplay
 The original Source and Profile classes are still available and fully supported:
 
 ```javascript
-import { Source, Profile } from "ar.js-core";
+import { Source, Profile } from 'arjs-core';
 ```
 
-See existing documentation for legacy API usage.
+See existing documentation for legacy API usage.

docs/ECS_ARCHITECTURE.md

@@ -19,7 +19,7 @@ The Engine orchestrates the entire system, managing:
 **Usage:**
 
 ```javascript
-import { Engine } from "ar.js-core";
+import { Engine } from 'ar.js-core';
 
 const engine = new Engine();
 engine.start(); // Start the game loop
@@ -38,8 +38,8 @@ Minimal Entity-Component-System implementation:
 
 ```javascript
 const entityId = engine.ecs.createEntity();
-engine.ecs.setComponent(entityId, "Transform", { x: 0, y: 0, z: 0 });
-engine.ecs.setResource("ProcessingConfig", { threshold: 0.5 });
+engine.ecs.setComponent(entityId, 'Transform', { x: 0, y: 0, z: 0 });
+engine.ecs.setResource('ProcessingConfig', { threshold: 0.5 });
 ```
 
 ### Event Bus (`src/core/event-bus.js`)
@@ -50,12 +50,12 @@ Lightweight publish-subscribe system for loose coupling:
 
 ```javascript
 // Subscribe to events
-engine.eventBus.on("capture:ready", (data) => {
-  console.log("Capture ready:", data);
+engine.eventBus.on('capture:ready', (data) => {
+  console.log('Capture ready:', data);
 });
 
 // Emit events
-engine.eventBus.emit("custom:event", { message: "Hello" });
+engine.eventBus.emit('custom:event', { message: 'Hello' });
 ```
 
 ### Plugin Manager (`src/core/plugin-manager.js`)
@@ -66,20 +66,20 @@ Manages plugin registration, enabling, and disabling:
 
 ```javascript
 // Register a plugin
-engine.pluginManager.register("my-plugin", {
+engine.pluginManager.register('my-plugin', {
   async init(context) {
-    console.log("Plugin initialized");
+    console.log('Plugin initialized');
   },
   async dispose() {
-    console.log("Plugin disposed");
+    console.log('Plugin disposed');
   },
   update(deltaTime, context) {
     // Called each frame
   },
 });
 
 // Enable the plugin
-await engine.pluginManager.enable("my-plugin", engine.getContext());
+await engine.pluginManager.enable('my-plugin', engine.getContext());
 ```
 
 ## Systems
@@ -91,7 +91,7 @@ Manages video/image capture from various sources:
 **Usage:**
 
 ```javascript
-import { CaptureSystem, SOURCE_TYPES } from "ar.js-core";
+import { CaptureSystem, SOURCE_TYPES } from 'ar.js-core';
 
 await CaptureSystem.initialize(
   {
@@ -154,21 +154,21 @@ Profiles:
 **Usage:**
 
 ```javascript
-import { defaultProfilePlugin } from "./plugins/profile/default-policy.js";
+import { defaultProfilePlugin } from './plugins/profile/default-policy.js';
 
 engine.pluginManager.register(defaultProfilePlugin.id, defaultProfilePlugin);
 await engine.pluginManager.enable(defaultProfilePlugin.id, engine.getContext());
 
 const profile = engine.ecs.getResource(RESOURCES.DEVICE_PROFILE);
-console.log("Device profile:", profile.label);
+console.log('Device profile:', profile.label);
 ```
 
 ## Component and Resource Keys
 
 Standardized keys are defined in `src/core/components.js`:
 
 ```javascript
-import { COMPONENTS, RESOURCES, EVENTS } from "ar.js-core";
+import { COMPONENTS, RESOURCES, EVENTS } from 'ar.js-core';
 
 // Component keys (entity-specific)
 COMPONENTS.TRACKING_TARGET;
@@ -193,9 +193,9 @@ Plugins are simple objects with lifecycle methods:
 
 ```javascript
 const myPlugin = {
-  id: "my-plugin",
-  name: "My Custom Plugin",
-  type: "custom",
+  id: 'my-plugin',
+  name: 'My Custom Plugin',
+  type: 'custom',
 
   // Called when plugin is enabled
   async init(context) {
@@ -227,10 +227,10 @@ function mySystem(deltaTime, context) {
   const { ecs, eventBus } = context;
 
   // Query entities with specific components
-  const entities = ecs.query("Transform", "Visible");
+  const entities = ecs.query('Transform', 'Visible');
 
   for (const entityId of entities) {
-    const transform = ecs.getComponent(entityId, "Transform");
+    const transform = ecs.getComponent(entityId, 'Transform');
     // Process entity
   }
 }
@@ -294,10 +294,10 @@ The legacy `Source` and `Profile` classes remain unchanged and continue to work
 
 ```javascript
 // Legacy API (still works)
-import { Source, Profile } from "ar.js-core";
+import { Source, Profile } from 'ar.js-core';
 
 // New ECS API
-import { Engine, CaptureSystem } from "ar.js-core";
+import { Engine, CaptureSystem } from 'ar.js-core';
 ```
 
 Future versions may add adapters that allow the legacy classes to use the new ECS internals while maintaining the same external API.
@@ -309,39 +309,39 @@ Future versions may add adapters that allow the legacy classes to use the new EC
 **Before:**
 
 ```javascript
-import { Source } from "ar.js-core";
+import { Source } from 'ar.js-core';
 
 const source = new Source({
-  sourceType: "webcam",
+  sourceType: 'webcam',
   sourceWidth: 640,
   sourceHeight: 480,
 });
 
 source.init(
   () => {
-    console.log("Source ready");
+    console.log('Source ready');
   },
   (error) => {
-    console.error("Source error:", error);
+    console.error('Source error:', error);
   },
 );
 ```
 
 **After:**
 
 ```javascript
-import { Engine, CaptureSystem, SOURCE_TYPES } from "ar.js-core";
-import { webcamPlugin } from "./plugins/source/webcam.js";
+import { Engine, CaptureSystem, SOURCE_TYPES } from 'ar.js-core';
+import { webcamPlugin } from './plugins/source/webcam.js';
 
 const engine = new Engine();
 engine.pluginManager.register(webcamPlugin.id, webcamPlugin);
 
-engine.eventBus.on("capture:ready", () => {
-  console.log("Source ready");
+engine.eventBus.on('capture:ready', () => {
+  console.log('Source ready');
 });
 
-engine.eventBus.on("capture:init:error", ({ error }) => {
-  console.error("Source error:", error);
+engine.eventBus.on('capture:init:error', ({ error }) => {
+  console.error('Source error:', error);
 });
 
 await CaptureSystem.initialize(

examples/basic-ecs/image-example.html

@@ -2,10 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>AR.js-core ECS - Image Source Example</title>
     <style>
       html,
@@ -98,13 +95,13 @@
     </div>
 
     <script type="module">
-      import { Engine } from "../../src/core/engine.js";
-      import { imagePlugin } from "../../plugins/source/image.js";
+      import { Engine } from '../../src/core/engine.js';
+      import { imagePlugin } from '../../plugins/source/image.js';
 
-      const statusEl = document.getElementById("status");
-      const urlEl = document.getElementById("url");
-      const loadBtn = document.getElementById("load");
-      const clearBtn = document.getElementById("clear");
+      const statusEl = document.getElementById('status');
+      const urlEl = document.getElementById('url');
+      const loadBtn = document.getElementById('load');
+      const clearBtn = document.getElementById('clear');
 
       // Initialize engine (provides eventBus and context)
       const engine = new Engine();
@@ -115,18 +112,18 @@
 
       function setStatus(msg, ok = true) {
         statusEl.textContent = msg;
-        statusEl.className = ok ? "status-ok" : "status-bad";
+        statusEl.className = ok ? 'status-ok' : 'status-bad';
       }
 
       function removeExisting() {
-        const el = document.getElementById("arjs-video");
+        const el = document.getElementById('arjs-video');
         if (el && el.parentNode) el.parentNode.removeChild(el);
       }
 
       async function loadImage(url) {
         if (!url) return;
         try {
-          setStatus("Loading image...", true);
+          setStatus('Loading image...', true);
           // Remove any previous image first
           removeExisting();
 
@@ -147,22 +144,22 @@
             document.body.appendChild(frame.element);
           }
 
-          setStatus("Image loaded", true);
+          setStatus('Image loaded', true);
         } catch (e) {
           console.error(e);
-          setStatus("Failed to load image. Check the URL and CORS.", false);
+          setStatus('Failed to load image. Check the URL and CORS.', false);
         }
       }
 
       // Wire up UI
-      loadBtn.addEventListener("click", () => {
-        const url = (urlEl.value || "").trim();
+      loadBtn.addEventListener('click', () => {
+        const url = (urlEl.value || '').trim();
         loadImage(url);
       });
 
-      clearBtn.addEventListener("click", () => {
+      clearBtn.addEventListener('click', () => {
         removeExisting();
-        setStatus("Cleared", true);
+        setStatus('Cleared', true);
       });
 
       // Auto-load the initial URL