react-pebble 0.1.0 → 0.2.0

package/src/plugin/index.ts

@@ -41,6 +41,12 @@ export interface PebblePiuOptions {
   settleMs?: number;
   /** Target platform — sets screen dimensions (default: 'emery') */
   platform?: string;
+  /**
+   * Target platforms for multi-platform builds (e.g. ['emery', 'gabbro']).
+   * When set, builds once per platform into `{buildDir}-{platform}/`.
+   * Overrides the `platform` option.
+   */
+  targetPlatforms?: string[];
   /** Directory for the generated Pebble project (default: '.pebble-build') */
   buildDir?: string;
   /** Auto-run pebble build + install after compilation */
@@ -63,51 +69,60 @@ export function pebblePiu(options: PebblePiuOptions): Plugin {
     async closeBundle() {
       const log = (msg: string) => console.log(`[react-pebble] ${msg}`);
 
-      // 1. Compile JSX → piu
-      log(`Compiling ${options.entry}...`);
-      const result = await compileToPiu({
-        entry: options.entry,
-        settleMs: options.settleMs,
-        platform: options.platform,
-        logger: log,
-      });
-
-      // 2. Scaffold pebble project
-      log(`Scaffolding pebble project in ${buildDir}...`);
-      scaffoldPebbleProject(buildDir, {
-        watchface: !result.hasButtons,
-        messageKeys: result.messageKeys,
-      });
-
-      // 3. Write compiled output
-      const outputPath = join(buildDir, 'src', 'embeddedjs', 'main.js');
-      mkdirSync(dirname(outputPath), { recursive: true });
-      writeFileSync(outputPath, result.code);
-      log(`Wrote ${result.code.split('\n').length} lines to ${outputPath}`);
-
-      // 4. Optionally build + deploy
-      if (options.deploy) {
-        const emu = options.emulator ?? options.platform ?? 'emery';
-        log('Running pebble build...');
-        try {
-          execSync('pebble build', { cwd: buildDir, stdio: 'inherit' });
-          log(`Installing to ${emu} emulator...`);
-          execSync('pebble kill 2>/dev/null; pebble wipe 2>/dev/null; sleep 2', {
-            cwd: buildDir,
-            stdio: 'ignore',
-          });
-        execSync(`pebble install --emulator ${emu}`, {
-            cwd: buildDir,
-            stdio: 'inherit',
-            timeout: 30000,
-          });
-          log(`Deployed to ${emu}. Run 'cd ${buildDir} && pebble logs' for live output.`);
-        } catch (err) {
-          log('Deploy failed — is the Pebble SDK installed? (pebble --version)');
-          throw err;
+      const platforms = options.targetPlatforms ?? [options.platform ?? 'emery'];
+
+      for (const platform of platforms) {
+        const platBuildDir = platforms.length > 1
+          ? resolve(`${options.buildDir ?? '.pebble-build'}-${platform}`)
+          : buildDir;
+
+        // 1. Compile JSX → piu
+        log(`Compiling ${options.entry} for ${platform}...`);
+        const result = await compileToPiu({
+          entry: options.entry,
+          settleMs: options.settleMs,
+          platform,
+          logger: log,
+        });
+
+        // 2. Scaffold pebble project
+        log(`Scaffolding pebble project in ${platBuildDir}...`);
+        scaffoldPebbleProject(platBuildDir, {
+          watchface: !result.hasButtons,
+          messageKeys: result.messageKeys,
+          mockDataSource: result.mockDataSource,
+        });
+
+        // 3. Write compiled output
+        const outputPath = join(platBuildDir, 'src', 'embeddedjs', 'main.js');
+        mkdirSync(dirname(outputPath), { recursive: true });
+        writeFileSync(outputPath, result.code);
+        log(`Wrote ${result.code.split('\n').length} lines to ${outputPath}`);
+
+        // 4. Optionally build + deploy
+        if (options.deploy) {
+          const emu = options.emulator ?? platform;
+          log(`Running pebble build for ${platform}...`);
+          try {
+            execSync('pebble build', { cwd: platBuildDir, stdio: 'inherit' });
+            log(`Installing to ${emu} emulator...`);
+            execSync('pebble kill 2>/dev/null; pebble wipe 2>/dev/null; sleep 2', {
+              cwd: platBuildDir,
+              stdio: 'ignore',
+            });
+            execSync(`pebble install --emulator ${emu}`, {
+              cwd: platBuildDir,
+              stdio: 'inherit',
+              timeout: 30000,
+            });
+            log(`Deployed to ${emu}. Run 'cd ${platBuildDir} && pebble logs' for live output.`);
+          } catch (err) {
+            log(`Deploy failed for ${platform} — is the Pebble SDK installed? (pebble --version)`);
+            throw err;
+          }
+        } else {
+          log(`Done (${platform}). To deploy:\n  cd ${platBuildDir} && pebble build && pebble install --emulator ${platform}`);
         }
-      } else {
-        log(`Done. To deploy:\n  cd ${buildDir} && pebble build && pebble install --emulator emery`);
       }
     },
   };
@@ -120,6 +135,8 @@ export function pebblePiu(options: PebblePiuOptions): Plugin {
 interface ScaffoldOptions {
   watchface: boolean;
   messageKeys: string[];
+  /** TypeScript source of mock data (for generating phone-side JS) */
+  mockDataSource?: string | null;
 }
 
 function scaffoldPebbleProject(dir: string, options: ScaffoldOptions): void {
@@ -207,17 +224,52 @@ int main(void) {
   // Phone-side JS
   const pkjsPath = join(dir, 'src', 'pkjs', 'index.js');
   if (options.messageKeys.length > 0 && options.messageKeys[0] !== 'dummy') {
-    writeFileSync(
-      pkjsPath,
-      `// Phone-side PebbleKit JS — sends data to watch via AppMessage.
+    const key = options.messageKeys[0]!;
+    const mockSrc = options.mockDataSource;
+    if (mockSrc) {
+      // Generate working phone-side JS that sends the mock data
+      // Strip TypeScript type annotations from the mock data source
+      const cleanMockSrc = mockSrc
+        .replace(/as\s+const/g, '')
+        .replace(/:\s*\w+(\[\])?/g, '')
+        .replace(/<[^>]+>/g, '');
+      writeFileSync(
+        pkjsPath,
+        `// Phone-side PebbleKit JS — sends mock data to watch via AppMessage.
 // Replace the mock data below with a real API fetch.
 
+Pebble.addEventListener("ready", function () {
+  console.log("Phone JS ready — sending data to watch...");
+
+  // Mock data (from example). Replace with fetch() for real data.
+  var data = ${cleanMockSrc};
+
+  // Send to watch after a short delay (wait for Message subscription)
+  setTimeout(function() {
+    Pebble.sendAppMessage(
+      { "${key}": JSON.stringify(data) },
+      function() { console.log("Data sent to watch successfully."); },
+      function(e) { console.log("Send failed: " + JSON.stringify(e)); }
+    );
+  }, 2000);
+});
+`,
+      );
+    } else {
+      writeFileSync(
+        pkjsPath,
+        `// Phone-side PebbleKit JS — sends data to watch via AppMessage.
+// Replace the placeholder below with a real API fetch.
+
 Pebble.addEventListener("ready", function () {
   console.log("Phone JS ready.");
-  // TODO: fetch real data and send via Pebble.sendAppMessage({ ${options.messageKeys[0]}: jsonString });
+  // Example: fetch data and send to watch
+  // var data = { key: "value" };
+  // Pebble.sendAppMessage({ "${key}": JSON.stringify(data) });
 });
 `,
-    );
+      );
+    }
   } else if (!existsSync(pkjsPath)) {
     writeFileSync(
       pkjsPath,

package/src/types/moddable.d.ts

@@ -44,13 +44,20 @@ interface WatchButtonPayload {
   [key: string]: unknown;
 }
 
+interface WatchConnected {
+  /** Whether the Pebble companion app is connected. */
+  app: boolean;
+  /** Whether PebbleKit JS is available. */
+  pebblekit: boolean;
+}
+
 interface ModdableWatch {
-  addEventListener(event: WatchEvent, handler: (payload?: WatchButtonPayload) => void): void;
-  removeEventListener(event: WatchEvent, handler: (payload?: WatchButtonPayload) => void): void;
+  addEventListener(event: WatchEvent, handler: (...args: any[]) => void): void;
+  removeEventListener(event: WatchEvent, handler: (...args: any[]) => void): void;
   /** Unexplained method on the prototype — possibly the internal dispatch path. */
   do?: (...args: unknown[]) => unknown;
-  /** Connection / pairing state — unexplored. */
-  connected?: unknown;
+  /** Connection / pairing state. */
+  connected?: WatchConnected;
 }
 
 declare const watch: ModdableWatch | undefined;
@@ -148,6 +155,21 @@ declare module 'commodetto/PocoCore' {
   export { default } from 'commodetto/Poco';
 }
 
+// ---------------------------------------------------------------------------
+// Battery — Alloy provides static properties on a Battery object.
+// ---------------------------------------------------------------------------
+
+interface PebbleBattery {
+  /** Battery percentage (0–100). */
+  readonly percent: number;
+  /** Whether the watch is currently charging. */
+  readonly charging: boolean;
+  /** Whether the watch is plugged in. */
+  readonly plugged: boolean;
+}
+
+declare const Battery: PebbleBattery | undefined;
+
 // Outline extension module — adds blendOutline / blendPolygon to Poco.prototype.
 // Importing this module has the side-effect of installing those methods.
 declare module 'commodetto/outline/PocoOutline' {