@embeddables/cli 0.1.0

package/README.md

@@ -0,0 +1,116 @@
+# Embeddables CLI
+
+A CLI for authoring and managing Embeddables locally using TypeScript/TSX.
+
+## Features
+
+- **Pull** existing Embeddables from the cloud and reverse-compile to TSX
+- **Build** TSX pages into the canonical Embeddable JSON format
+- **Dev** mode with hot reload and proxy to a live Engine instance
+- Full **TypeScript support** with autocomplete for all component primitives
+
+## Installation
+
+```bash
+npm install @embeddables/cli
+```
+
+## Quick Start
+
+```bash
+# Login to your Embeddables account
+npx embeddables login
+
+# Pull an existing embeddable
+npx embeddables pull --id <embeddable-id>
+
+# Start dev server with hot reload
+npx embeddables dev --id <embeddable-id>
+```
+
+This creates the following structure in your repo:
+
+```
+embeddables/
+  <embeddable-id>/
+    pages/           # TSX page files
+    styles/          # CSS styles
+    computed-fields/ # Custom computed field logic
+    actions/         # Data output actions
+    config.json      # Embeddable configuration
+    .generated/      # Compiled JSON output
+```
+
+## Commands
+
+### `embeddables login`
+Authenticate with your Embeddables account.
+
+### `embeddables logout`
+Clear stored authentication.
+
+### `embeddables pull --id <id>`
+Fetch an embeddable from the cloud and reverse-compile it into local TSX files.
+
+Options:
+- `--id <id>` (required): Embeddable ID to pull
+- `--branch <branch_id>`: Pull a specific branch version
+- `--fix`: Remove components with missing required props instead of erroring
+
+### `embeddables build --id <id>`
+Compile TSX pages into the canonical JSON format.
+
+Options:
+- `--id <id>` (required): Embeddable ID
+- `--pages <glob>`: Custom pages glob pattern
+- `--out <path>`: Custom output path
+
+### `embeddables dev`
+Start a dev server with hot reload.
+
+Options:
+- `--id <id>`: Embeddable ID (will prompt if not provided)
+- `--engine <url>`: Engine origin (default: `http://localhost:8787`)
+- `--remote`: Use production engine (`https://engine.embeddables.com`)
+- `--port <n>`: Dev proxy port (default: `3000`)
+
+## Authoring with TypeScript
+
+Import component primitives for full autocomplete:
+
+```tsx
+import { Container, InputBox, PlainText, CustomButton } from '@embeddables/cli/components'
+
+export default function MyPage() {
+  return (
+    <Container id="main" key="main">
+      <PlainText id="title" key="title" text="Welcome!" />
+      <InputBox
+        id="email"
+        key="email"
+        input_type="email"
+        label="Email"
+        placeholder="you@example.com"
+        isRequired
+      />
+      <CustomButton id="submit" key="submit" text="Continue" action="next-page" />
+    </Container>
+  )
+}
+```
+
+## Development (Contributing)
+
+```bash
+# Install dependencies
+npm install
+
+# Build the CLI
+npm run build
+
+# Link for local testing
+npm link
+
+# Run tests
+npm test
+```

package/bin/embeddables.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/cli.js'

package/dist/auth/index.d.ts

@@ -0,0 +1,43 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+export declare const SUPABASE_URL = "https://ierxexdtyashuotcsjyo.supabase.co";
+export declare const SUPABASE_ANON_KEY = "sb_publishable_Vt8-msWNtn2hhOY3AA6RsQ_ueTx79Vo";
+export interface AuthConfig {
+    access_token: string;
+    refresh_token: string;
+    expires_at: number;
+    supabase_url: string;
+    supabase_anon_key: string;
+}
+/**
+ * Get the path to the auth config file
+ */
+export declare function getAuthFilePath(): string;
+/**
+ * Read auth config from file
+ */
+export declare function readAuthConfig(): AuthConfig | null;
+/**
+ * Write auth config to file
+ */
+export declare function writeAuthConfig(config: AuthConfig): void;
+/**
+ * Delete auth config file (logout)
+ */
+export declare function deleteAuthConfig(): void;
+/**
+ * Check if user is logged in (has valid auth config)
+ */
+export declare function isLoggedIn(): boolean;
+/**
+ * Get Supabase client instance
+ */
+export declare function getSupabaseClient(): SupabaseClient;
+/**
+ * Get authenticated Supabase client (with stored session)
+ */
+export declare function getAuthenticatedSupabaseClient(): SupabaseClient | null;
+/**
+ * Get access token for authenticated requests
+ */
+export declare function getAccessToken(): string | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAGpE,eAAO,MAAM,YAAY,6CAA6C,CAAA;AACtE,eAAO,MAAM,iBAAiB,mDAAmD,CAAA;AAEjF,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAKD;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,UAAU,GAAG,IAAI,CAUlD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAGxD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAcpC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,cAAc,CAWlD;AAED;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,cAAc,GAAG,IAAI,CActE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,GAAG,IAAI,CAM9C"}

package/dist/auth/index.js

@@ -0,0 +1,100 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createClient } from '@supabase/supabase-js';
+// TODO: Move to environment variables
+export const SUPABASE_URL = 'https://ierxexdtyashuotcsjyo.supabase.co'; // Replace with actual Supabase URL
+export const SUPABASE_ANON_KEY = 'sb_publishable_Vt8-msWNtn2hhOY3AA6RsQ_ueTx79Vo'; // Replace with actual Supabase anon key
+const AUTH_DIR = path.join(process.cwd(), '.auth');
+const AUTH_FILE = path.join(AUTH_DIR, 'auth.json');
+/**
+ * Get the path to the auth config file
+ */
+export function getAuthFilePath() {
+    return AUTH_FILE;
+}
+/**
+ * Read auth config from file
+ */
+export function readAuthConfig() {
+    try {
+        if (!fs.existsSync(AUTH_FILE)) {
+            return null;
+        }
+        const content = fs.readFileSync(AUTH_FILE, 'utf8');
+        return JSON.parse(content);
+    }
+    catch (error) {
+        return null;
+    }
+}
+/**
+ * Write auth config to file
+ */
+export function writeAuthConfig(config) {
+    fs.mkdirSync(AUTH_DIR, { recursive: true });
+    fs.writeFileSync(AUTH_FILE, JSON.stringify(config, null, 2), 'utf8');
+}
+/**
+ * Delete auth config file (logout)
+ */
+export function deleteAuthConfig() {
+    if (fs.existsSync(AUTH_FILE)) {
+        fs.unlinkSync(AUTH_FILE);
+    }
+}
+/**
+ * Check if user is logged in (has valid auth config)
+ */
+export function isLoggedIn() {
+    const config = readAuthConfig();
+    if (!config) {
+        return false;
+    }
+    // Check if token is expired (with 5 minute buffer)
+    const now = Math.floor(Date.now() / 1000);
+    const expiresAt = config.expires_at;
+    if (expiresAt && expiresAt < now + 300) {
+        return false;
+    }
+    return !!config.access_token;
+}
+/**
+ * Get Supabase client instance
+ */
+export function getSupabaseClient() {
+    const config = readAuthConfig();
+    const url = config?.supabase_url || SUPABASE_URL;
+    const anonKey = config?.supabase_anon_key || SUPABASE_ANON_KEY;
+    return createClient(url, anonKey, {
+        auth: {
+            persistSession: false, // We handle session persistence ourselves
+            autoRefreshToken: false, // No auto refresh for now
+        },
+    });
+}
+/**
+ * Get authenticated Supabase client (with stored session)
+ */
+export function getAuthenticatedSupabaseClient() {
+    const config = readAuthConfig();
+    if (!config || !isLoggedIn()) {
+        return null;
+    }
+    const client = getSupabaseClient();
+    // Set the session manually
+    client.auth.setSession({
+        access_token: config.access_token,
+        refresh_token: config.refresh_token,
+    });
+    return client;
+}
+/**
+ * Get access token for authenticated requests
+ */
+export function getAccessToken() {
+    const config = readAuthConfig();
+    if (!config || !isLoggedIn()) {
+        return null;
+    }
+    return config.access_token;
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,75 @@
+import { Command } from 'commander';
+import pc from 'picocolors';
+import { runBuild } from './commands/build.js';
+import { runBuildWorkbench } from './commands/build-workbench.js';
+import { runDev } from './commands/dev.js';
+import { runLogin } from './commands/login.js';
+import { runLogout } from './commands/logout.js';
+import { runPull } from './commands/pull.js';
+// Make all console.warn output yellow
+const originalWarn = console.warn.bind(console);
+console.warn = (...args) => {
+    originalWarn(...args.map((arg) => typeof arg === 'string' ? `${pc.bold(pc.bgYellow(' WARN '))} ${pc.yellow(arg)}` : arg));
+};
+const originalError = console.error.bind(console);
+console.error = (...args) => {
+    originalError(...args.map((arg) => typeof arg === 'string' ? `${pc.bold(pc.bgRed(' ERROR '))} ${pc.red(arg)}` : arg));
+};
+const program = new Command();
+program.name('embeddables').description('Embeddables CLI').version('0.1.0');
+program
+    .command('build')
+    .requiredOption('--id <id>', 'Embeddable ID')
+    .option('--pages <glob>', 'Pages glob')
+    .option('--out <path>', 'Output json path')
+    .option('--pageKeyFrom <mode>', 'filename|export', 'filename')
+    .action(async (opts) => {
+    await runBuild(opts);
+});
+program
+    .command('dev')
+    .option('--id <id>', 'Embeddable ID (will prompt if not provided)')
+    .option('--pages <glob>', 'Pages glob')
+    .option('--out <path>', 'Output json path')
+    .option('--remote', 'Use remote engine (https://engine.embeddables.com)')
+    .option('--engine <url>', 'Engine origin', 'http://localhost:8787')
+    .option('--port <n>', 'Dev proxy port', '3000')
+    .option('--overrideRoute <path>', 'Route to override in proxy (exact match, no wildcards yet)', '/init')
+    .option('--pageKeyFrom <mode>', 'filename|export', 'filename')
+    .action(async (opts) => {
+    // --remote flag overrides --engine to use production engine
+    if (opts.remote) {
+        opts.engine = 'https://engine.embeddables.com';
+    }
+    await runDev(opts);
+});
+program
+    .command('login')
+    .description('Login to Embeddables')
+    .action(async () => {
+    await runLogin();
+});
+program
+    .command('logout')
+    .description('Logout from Embeddables')
+    .action(async () => {
+    await runLogout();
+});
+program
+    .command('pull')
+    .requiredOption('--id <id>', 'Embeddable ID to pull')
+    .option('--out <path>', 'Output json path')
+    .option('--branch <branch_id>', 'Embeddable branch ID')
+    .option('--fix', 'Fix by removing components missing required props (warn instead of error)')
+    .action(async (opts) => {
+    await runPull(opts);
+});
+program
+    .command('build-workbench')
+    .description('Build Workbench for CDN deployment')
+    .option('--out <path>', 'Output directory', 'dist/workbench')
+    .option('--no-minify', 'Disable minification (for debugging)')
+    .action(async (opts) => {
+    await runBuildWorkbench(opts);
+});
+await program.parseAsync(process.argv);

package/dist/commands/build-workbench.d.ts

@@ -0,0 +1,5 @@
+export declare function runBuildWorkbench(opts: {
+    out?: string;
+    minify?: boolean;
+}): Promise<void>;
+//# sourceMappingURL=build-workbench.d.ts.map

package/dist/commands/build-workbench.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-workbench.d.ts","sourceRoot":"","sources":["../../src/commands/build-workbench.ts"],"names":[],"mappings":"AAQA,wBAAsB,iBAAiB,CAAC,IAAI,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,iBA2H/E"}

package/dist/commands/build-workbench.js

@@ -0,0 +1,122 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import * as esbuild from 'esbuild';
+import postcss from 'postcss';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+import pc from 'picocolors';
+export async function runBuildWorkbench(opts) {
+    const outDir = opts.out || 'dist/workbench';
+    const shouldMinify = opts.minify ?? true;
+    // Check if wrangler config exists in outDir (native Cloudflare Git integration mode)
+    const hasWranglerConfig = fs.existsSync(path.join(outDir, 'wrangler.jsonc')) ||
+        fs.existsSync(path.join(outDir, 'wrangler.toml'));
+    console.log(pc.cyan('Building Workbench for CDN deployment...'));
+    console.log();
+    // Ensure output directory exists
+    fs.mkdirSync(outDir, { recursive: true });
+    const workbenchEntry = path.join(process.cwd(), 'src', 'workbench', 'index.tsx');
+    const workbenchCssEntry = path.join(process.cwd(), 'src', 'workbench', 'workbench.css');
+    // Check that source files exist
+    if (!fs.existsSync(workbenchEntry)) {
+        console.error(`Workbench entry not found: ${workbenchEntry}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(workbenchCssEntry)) {
+        console.error(`Workbench CSS not found: ${workbenchCssEntry}`);
+        process.exit(1);
+    }
+    // Build JavaScript bundle
+    console.log(pc.dim('  Building JavaScript bundle...'));
+    const jsResult = await esbuild.build({
+        entryPoints: [workbenchEntry],
+        bundle: true,
+        format: 'iife',
+        globalName: '__EmbeddablesWorkbenchBundle',
+        platform: 'browser',
+        minify: shouldMinify,
+        sourcemap: shouldMinify ? false : 'inline',
+        write: false,
+        target: ['es2020', 'chrome80', 'firefox78', 'safari14'],
+    });
+    const jsOutput = jsResult.outputFiles?.[0];
+    if (!jsOutput) {
+        console.error('Failed to build JavaScript bundle');
+        process.exit(1);
+    }
+    // Build CSS
+    console.log(pc.dim('  Building CSS...'));
+    const rawCss = fs.readFileSync(workbenchCssEntry, 'utf8');
+    const cssResult = await postcss([tailwindcss(), autoprefixer]).process(rawCss, {
+        from: workbenchCssEntry,
+    });
+    // CORS headers file for Cloudflare static assets
+    const headersContent = `/*
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Methods: GET, OPTIONS
+  Access-Control-Allow-Headers: Content-Type
+`;
+    if (hasWranglerConfig) {
+        // Native Cloudflare Git integration mode:
+        // Output directly to outDir/public
+        const publicDir = path.join(outDir, 'public');
+        fs.mkdirSync(publicDir, { recursive: true });
+        fs.writeFileSync(path.join(publicDir, 'workbench.js'), jsOutput.contents);
+        const jsSize = (jsOutput.contents.length / 1024).toFixed(1);
+        console.log(pc.green(`  ✓ ${publicDir}/workbench.js (${jsSize} KB)`));
+        fs.writeFileSync(path.join(publicDir, 'workbench.css'), cssResult.css);
+        const cssSize = (cssResult.css.length / 1024).toFixed(1);
+        console.log(pc.green(`  ✓ ${publicDir}/workbench.css (${cssSize} KB)`));
+        fs.writeFileSync(path.join(publicDir, '_headers'), headersContent);
+        console.log(pc.green(`  ✓ ${publicDir}/_headers`));
+        console.log();
+        console.log(pc.bold(pc.green('Build complete!')));
+        console.log();
+        console.log(pc.dim('Using existing wrangler.toml for Cloudflare Git integration'));
+    }
+    else {
+        // Standalone mode: output to outDir with nested cloudflare-worker folder
+        const jsPath = path.join(outDir, 'workbench.js');
+        fs.writeFileSync(jsPath, jsOutput.contents);
+        const jsSize = (jsOutput.contents.length / 1024).toFixed(1);
+        console.log(pc.green(`  ✓ ${jsPath} (${jsSize} KB)`));
+        const cssPath = path.join(outDir, 'workbench.css');
+        fs.writeFileSync(cssPath, cssResult.css);
+        const cssSize = (cssResult.css.length / 1024).toFixed(1);
+        console.log(pc.green(`  ✓ ${cssPath} (${cssSize} KB)`));
+        // Generate Cloudflare static site files
+        console.log(pc.dim('  Generating Cloudflare deployment files...'));
+        const workerDir = path.join(outDir, 'cloudflare');
+        fs.mkdirSync(workerDir, { recursive: true });
+        const wranglerConfig = generateWranglerConfig();
+        fs.writeFileSync(path.join(workerDir, 'wrangler.jsonc'), wranglerConfig);
+        console.log(pc.green(`  ✓ ${workerDir}/wrangler.jsonc`));
+        const publicDir = path.join(workerDir, 'public');
+        fs.mkdirSync(publicDir, { recursive: true });
+        fs.copyFileSync(jsPath, path.join(publicDir, 'workbench.js'));
+        fs.copyFileSync(cssPath, path.join(publicDir, 'workbench.css'));
+        fs.writeFileSync(path.join(publicDir, '_headers'), headersContent);
+        console.log(pc.green(`  ✓ ${publicDir}/ (assets + _headers)`));
+        console.log();
+        console.log(pc.bold(pc.green('Build complete!')));
+        console.log();
+        console.log(pc.cyan('Deploy to Cloudflare:'));
+        console.log(pc.dim(`  cd ${workerDir} && npx wrangler deploy`));
+    }
+    console.log();
+    console.log(pc.cyan('Usage:'));
+    console.log(pc.dim('  Add ?workbench=true to any engine preview URL'));
+    console.log();
+}
+function generateWranglerConfig() {
+    return `{
+  // Embeddables Workbench - Static Assets
+  // Deploy: npx wrangler deploy
+  "name": "embeddables-workbench",
+  "compatibility_date": "2024-01-01",
+  "assets": {
+    "directory": "./public"
+  }
+}
+`;
+}

package/dist/commands/build.d.ts

@@ -0,0 +1,7 @@
+export declare function runBuild(opts: {
+    id: string;
+    pages?: string;
+    out?: string;
+    pageKeyFrom: 'filename' | 'export';
+}): Promise<void>;
+//# sourceMappingURL=build.d.ts.map

package/dist/commands/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/commands/build.ts"],"names":[],"mappings":"AAIA,wBAAsB,QAAQ,CAAC,IAAI,EAAE;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBAmBA"}

package/dist/commands/build.js

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { compileAllPages } from '../compiler/index.js';
+import { formatError } from '../compiler/errors.js';
+export async function runBuild(opts) {
+    const embeddableId = opts.id;
+    const pagesGlob = opts.pages || `embeddables/${embeddableId}/pages/**/*.page.tsx`;
+    const outPath = opts.out || path.join('embeddables', embeddableId, '.generated', 'embeddable.json');
+    const stylesDir = path.join('embeddables', embeddableId, 'styles');
+    try {
+        await compileAllPages({
+            pagesGlob,
+            outPath,
+            pageKeyFrom: opts.pageKeyFrom,
+            stylesDir,
+            embeddableId,
+        });
+    }
+    catch (e) {
+        console.error(formatError(e));
+        process.exit(1);
+    }
+}

package/dist/commands/dev.d.ts

@@ -0,0 +1,11 @@
+export declare function runDev(opts: {
+    id?: string;
+    pages?: string;
+    out?: string;
+    remote?: boolean;
+    engine: string;
+    port: string;
+    overrideRoute: string;
+    pageKeyFrom: 'filename' | 'export';
+}): Promise<void>;
+//# sourceMappingURL=dev.d.ts.map

package/dist/commands/dev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAoFA,wBAAsB,MAAM,CAAC,IAAI,EAAE;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;CACnC,iBAgGA"}