react-pebble 0.1.0

package/scripts/deploy.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+# Deploy a react-pebble example to the Pebble Alloy emulator.
+#
+# Uses the Vite plugin to compile + scaffold .pebble-build/, then
+# builds and installs to the emulator.
+#
+# Usage:
+#   ./scripts/deploy.sh watchface          # compile + build + install + screenshot
+#   ./scripts/deploy.sh counter --logs     # with live log streaming
+#   SETTLE_MS=200 ./scripts/deploy.sh jira-list  # with async settle delay
+
+set -e
+
+EXAMPLE="${1:?Usage: deploy.sh <example-name> [--logs]}"
+LOGS_FLAG=""
+if [ "$2" = "--logs" ]; then LOGS_FLAG="--logs"; fi
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(dirname "$SCRIPT_DIR")"
+BUILD_DIR="$PROJECT_DIR/.pebble-build"
+
+echo "=== Compiling + scaffolding $EXAMPLE ==="
+cd "$PROJECT_DIR"
+ENTRY="examples/${EXAMPLE}.tsx" npx vite build --config vite.config.plugin-test.js 2>&1 | grep "\[react-pebble\]"
+
+echo "=== Building ==="
+cd "$BUILD_DIR"
+pebble build 2>&1 | tail -5
+
+echo "=== Installing to emery emulator ==="
+pebble kill >/dev/null 2>&1 || true
+pebble wipe >/dev/null 2>&1 || true
+sleep 2
+
+if [ -n "$LOGS_FLAG" ]; then
+  pebble install --emulator emery --logs
+else
+  pebble install --emulator emery --logs > /tmp/react-pebble-emu.log 2>&1 &
+  EMU_PID=$!
+  sleep 10
+  pebble screenshot "/tmp/react-pebble-${EXAMPLE}.png" 2>&1 | tail -1
+  echo "=== Screenshot saved to /tmp/react-pebble-${EXAMPLE}.png ==="
+  pebble kill >/dev/null 2>&1 || true
+  kill $EMU_PID 2>/dev/null || true
+  wait $EMU_PID 2>/dev/null || true
+fi

package/src/compiler/index.ts

@@ -0,0 +1,114 @@
+/**
+ * src/compiler/index.ts — react-pebble compile-to-piu library API.
+ *
+ * Wraps the compile-to-piu.ts script as a programmatic API. The script
+ * runs as a subprocess (it uses module-level state that requires process
+ * isolation). A future refactoring will inline the logic as a pure function.
+ *
+ * Usage:
+ *   import { compileToPiu } from 'react-pebble/compiler';
+ *   const result = await compileToPiu({ entry: 'examples/watchface.tsx' });
+ *   console.log(result.code); // piu Application.template JS
+ */
+
+import { execSync } from 'node:child_process';
+import { resolve, dirname, basename } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export interface CompileOptions {
+  /** Path to the entry .tsx file (relative to cwd or absolute) */
+  entry: string;
+  /** Milliseconds to wait for async effects (useEffect/setTimeout) */
+  settleMs?: number;
+  /** Target platform (default: 'emery') */
+  platform?: string;
+  /** Logger for diagnostic messages */
+  logger?: (msg: string) => void;
+  /** Project root directory (default: process.cwd()) */
+  projectRoot?: string;
+}
+
+export interface CompileResult {
+  /** The compiled piu JavaScript code */
+  code: string;
+  /** Whether the component uses useButton (needs watchapp mode) */
+  hasButtons: boolean;
+  /** Message keys used by useMessage hooks */
+  messageKeys: string[];
+  /** Diagnostic messages from the compiler */
+  diagnostics: string;
+}
+
+/**
+ * Compile a Preact component to piu Application.template code.
+ *
+ * Internally runs scripts/compile-to-piu.ts as a subprocess.
+ */
+export async function compileToPiu(options: CompileOptions): Promise<CompileResult> {
+  const log = options.logger ?? (() => {});
+  const projectRoot = options.projectRoot ?? process.cwd();
+
+  // Resolve the entry to an example name (for backwards compat with the script)
+  const entryPath = resolve(projectRoot, options.entry);
+  const exampleName = basename(entryPath).replace(/\.[jt]sx?$/, '');
+
+  // Find the compiler script
+  const scriptPath = resolve(__dirname, '../../scripts/compile-to-piu.ts');
+  if (!existsSync(scriptPath)) {
+    throw new Error(`Compiler script not found at ${scriptPath}`);
+  }
+
+  log(`Compiling ${exampleName}...`);
+
+  const env: Record<string, string> = {
+    ...process.env as Record<string, string>,
+    EXAMPLE: exampleName,
+  };
+  if (options.settleMs) {
+    env.SETTLE_MS = String(options.settleMs);
+  }
+  if (options.platform) {
+    env.PEBBLE_PLATFORM = options.platform;
+  }
+
+  // Run the compiler script and capture stdout (code) + stderr (diagnostics)
+  let code: string;
+  let diagnostics: string;
+  try {
+    code = execSync(`npx tsx "${scriptPath}"`, {
+      cwd: projectRoot,
+      env,
+      encoding: 'utf-8',
+      timeout: 30000,
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    // Re-run to capture stderr separately (execSync doesn't give both easily)
+    try {
+      diagnostics = execSync(`npx tsx "${scriptPath}" 2>&1 1>/dev/null`, {
+        cwd: projectRoot,
+        env,
+        encoding: 'utf-8',
+        timeout: 30000,
+      });
+    } catch {
+      diagnostics = '';
+    }
+  } catch (err) {
+    const e = err as { stderr?: string; message?: string };
+    throw new Error(`Compilation failed for ${exampleName}: ${e.stderr ?? e.message}`);
+  }
+
+  // Parse diagnostics to extract metadata
+  const hasButtons = diagnostics.includes('Button bindings discovered:') &&
+    !diagnostics.includes('Button bindings discovered: 0');
+  const messageKeys: string[] = [];
+  const msgMatch = diagnostics.match(/useMessage detected: key="([^"]+)"/);
+  if (msgMatch?.[1]) messageKeys.push(msgMatch[1]);
+
+  log(`Compiled ${exampleName}: ${code.split('\n').length} lines, buttons=${hasButtons}, messageKeys=[${messageKeys.join(',')}]`);
+
+  return { code, hasButtons, messageKeys, diagnostics };
+}

package/src/components/index.tsx

@@ -0,0 +1,280 @@
+/**
+ * components/index.tsx — React component wrappers for Pebble primitives
+ *
+ * These provide a friendly JSX API that maps to the underlying
+ * pbl-* element types the reconciler handles.
+ */
+
+import { h } from 'preact';
+import type { ComponentChildren } from 'preact';
+import type { PebbleButtonHandler } from '../hooks/index.js';
+
+// Use Preact's `h` as a stand-in for `React.createElement` so we can keep
+// the factory-based element construction that was in the react version.
+const React = { createElement: h } as const;
+
+// Unify ReactNode with Preact's ComponentChildren so we don't have to
+// rename every prop type.
+type ReactNode = ComponentChildren;
+
+// ---------------------------------------------------------------------------
+// Shared prop types
+// ---------------------------------------------------------------------------
+
+export interface PositionProps {
+  x?: number;
+  y?: number;
+}
+
+export interface SizeProps {
+  w?: number;
+  h?: number;
+  /** Alias for `w`. */
+  width?: number;
+  /** Alias for `h`. */
+  height?: number;
+}
+
+export interface ButtonHandlerProps {
+  onUp?: PebbleButtonHandler;
+  onDown?: PebbleButtonHandler;
+  onSelect?: PebbleButtonHandler;
+  onBack?: PebbleButtonHandler;
+  onLongUp?: PebbleButtonHandler;
+  onLongDown?: PebbleButtonHandler;
+  onLongSelect?: PebbleButtonHandler;
+}
+
+export type ColorName =
+  | 'black' | 'white' | 'red' | 'green' | 'blue' | 'yellow' | 'orange'
+  | 'cyan' | 'magenta' | 'clear' | 'lightGray' | 'darkGray'
+  // Pass-through for raw GColor / hex values
+  | (string & {});
+
+export type FontName =
+  | 'gothic14' | 'gothic14Bold' | 'gothic18' | 'gothic18Bold'
+  | 'gothic24' | 'gothic24Bold' | 'gothic28' | 'gothic28Bold'
+  | 'bitham30Black' | 'bitham42Bold' | 'bitham42Light'
+  | 'bitham34MediumNumbers' | 'bitham42MediumNumbers'
+  | 'robotoCondensed21' | 'roboto21' | 'droid28'
+  | 'leco20' | 'leco26' | 'leco28' | 'leco32' | 'leco36' | 'leco38' | 'leco42'
+  | (string & {});
+
+export type Alignment = 'left' | 'center' | 'right';
+
+// ---------------------------------------------------------------------------
+// JSX intrinsic element declarations for the pbl-* tags
+// ---------------------------------------------------------------------------
+
+declare module 'preact' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'pbl-root': IntrinsicPblProps;
+      'pbl-rect': IntrinsicPblProps;
+      'pbl-circle': IntrinsicPblProps;
+      'pbl-text': IntrinsicPblProps;
+      'pbl-line': IntrinsicPblProps;
+      'pbl-image': IntrinsicPblProps;
+      'pbl-group': IntrinsicPblProps;
+      'pbl-statusbar': IntrinsicPblProps;
+      'pbl-actionbar': IntrinsicPblProps;
+    }
+  }
+}
+
+interface IntrinsicPblProps {
+  children?: ReactNode;
+  // Loose escape hatch — wrappers below provide the typed surface.
+  [key: string]: unknown;
+}
+
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+
+export interface WindowProps extends ButtonHandlerProps {
+  backgroundColor?: ColorName;
+  fullscreen?: boolean;
+  children?: ReactNode;
+}
+
+export function Window({ children, ...props }: WindowProps) {
+  return React.createElement('pbl-group', props, children);
+}
+
+export interface RectProps extends PositionProps, SizeProps {
+  fill?: ColorName;
+  stroke?: ColorName;
+  strokeWidth?: number;
+  children?: ReactNode;
+}
+
+export function Rect({ children, ...props }: RectProps) {
+  return React.createElement('pbl-rect', props, children);
+}
+
+export interface CircleProps extends PositionProps {
+  r?: number;
+  /** Alias for `r`. */
+  radius?: number;
+  fill?: ColorName;
+  stroke?: ColorName;
+  strokeWidth?: number;
+}
+
+export function Circle(props: CircleProps) {
+  return React.createElement('pbl-circle', props);
+}
+
+export interface TextProps extends PositionProps, SizeProps {
+  font?: FontName;
+  color?: ColorName;
+  align?: Alignment;
+  children?: ReactNode;
+}
+
+export function Text({ children, ...props }: TextProps) {
+  return React.createElement('pbl-text', props, children);
+}
+
+export interface LineProps extends PositionProps {
+  x2?: number;
+  y2?: number;
+  color?: ColorName;
+  strokeWidth?: number;
+}
+
+export function Line(props: LineProps) {
+  return React.createElement('pbl-line', props);
+}
+
+export interface ImageProps extends PositionProps {
+  bitmap: unknown;
+}
+
+export function Image(props: ImageProps) {
+  return React.createElement('pbl-image', props);
+}
+
+export interface GroupProps extends PositionProps {
+  children?: ReactNode;
+}
+
+export function Group({ children, ...props }: GroupProps) {
+  return React.createElement('pbl-group', props, children);
+}
+
+export interface StatusBarProps {
+  color?: ColorName;
+  backgroundColor?: ColorName;
+  separator?: 'dotted' | 'line' | 'none';
+}
+
+export function StatusBar(props: StatusBarProps) {
+  return React.createElement('pbl-statusbar', props);
+}
+
+export interface ActionBarProps {
+  upIcon?: unknown;
+  selectIcon?: unknown;
+  downIcon?: unknown;
+  backgroundColor?: ColorName;
+}
+
+export function ActionBar(props: ActionBarProps) {
+  return React.createElement('pbl-actionbar', props);
+}
+
+// ---------------------------------------------------------------------------
+// Convenience composites
+// ---------------------------------------------------------------------------
+
+export interface CardProps extends PositionProps {
+  title: ReactNode;
+  body?: ReactNode;
+  titleFont?: FontName;
+  bodyFont?: FontName;
+  w?: number;
+}
+
+export function Card({
+  title,
+  body,
+  titleFont,
+  bodyFont,
+  x = 0,
+  y = 0,
+  w = 144,
+  ...props
+}: CardProps) {
+  const titleH = 28;
+  const bodyY = titleH + 4;
+
+  return React.createElement(
+    'pbl-group',
+    { x, y, ...props },
+    React.createElement('pbl-rect', { x: 0, y: 0, w, h: titleH, fill: 'white' }),
+    React.createElement(
+      'pbl-text',
+      {
+        x: 4,
+        y: 2,
+        w: w - 8,
+        h: titleH,
+        font: titleFont ?? 'gothic18Bold',
+        color: 'black',
+      },
+      title,
+    ),
+    body
+      ? React.createElement(
+          'pbl-text',
+          {
+            x: 4,
+            y: bodyY,
+            w: w - 8,
+            h: 120,
+            font: bodyFont ?? 'gothic14',
+            color: 'white',
+          },
+          body,
+        )
+      : null,
+  );
+}
+
+export interface BadgeProps extends PositionProps {
+  r?: number;
+  color?: ColorName;
+  textColor?: ColorName;
+  children?: ReactNode;
+}
+
+export function Badge({
+  x = 0,
+  y = 0,
+  r = 12,
+  color = 'red',
+  textColor = 'white',
+  children,
+}: BadgeProps) {
+  return React.createElement(
+    'pbl-group',
+    { x, y },
+    React.createElement('pbl-circle', { x: 0, y: 0, r, fill: color }),
+    React.createElement(
+      'pbl-text',
+      {
+        x: 0,
+        y: r - 8,
+        w: r * 2,
+        h: 16,
+        font: 'gothic14Bold',
+        color: textColor,
+        align: 'center',
+      },
+      children,
+    ),
+  );
+}