@decocms/start 0.36.2 → 0.36.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.36.2",
+  "version": "0.36.4",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",

package/scripts/migrate/phase-transform.ts

@@ -72,6 +72,24 @@ export function transform(ctx: MigrationContext): void {
       }
     }
 
+    // Flag files with HTMX patterns for manual React migration
+    if (/\bhx-(?:get|post|put|delete|trigger|target|swap|on|indicator|sync|select)\b/.test(result.content)) {
+      ctx.manualReviewItems.push({
+        file: targetPath,
+        reason: "HTMX attributes (hx-*) found — needs manual migration to React state/effects. HTMX server-side rendering (hx-get/hx-post with useSection) must be converted to React components with useState/useEffect or server functions.",
+        severity: "warning",
+      });
+    }
+
+    // Flag files with hx-on:click that use useScript (simpler pattern)
+    if (/hx-on:click=\{useScript/.test(result.content)) {
+      ctx.manualReviewItems.push({
+        file: targetPath,
+        reason: "hx-on:click with useScript found — convert to onClick with React event handler. The useScript serialization won't work as onClick value.",
+        severity: "warning",
+      });
+    }
+
     if (ctx.dryRun) {
       if (result.changed) {
         log(ctx, `[DRY] Would transform: ${record.path} → ${targetPath}`);

package/scripts/migrate/phase-verify.ts

@@ -325,6 +325,20 @@ const checks: Check[] = [
       return true;
     },
   },
+  {
+    name: "No HTMX attributes (hx-*) in components",
+    severity: "warning",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /\bhx-(?:get|post|put|delete|patch|trigger|target|swap|on|indicator|sync|select)\b/);
+      if (bad.length > 0) {
+        console.log(`    HTMX attributes found (needs manual React migration): ${bad.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
 ];
 
 function findFilesWithPattern(

package/scripts/migrate/transforms/deno-isms.ts

@@ -38,6 +38,13 @@ export function transformDenoIsms(content: string): TransformResult {
     notes.push("Removed npm: prefix from imports");
   }
 
+  // @ts-ignore → @ts-expect-error (TypeScript 5+ prefers @ts-expect-error)
+  if (/@ts-ignore/.test(result)) {
+    result = result.replace(/@ts-ignore/g, "@ts-expect-error");
+    changed = true;
+    notes.push("Replaced @ts-ignore with @ts-expect-error");
+  }
+
   // Remove Deno.* API usages — flag for manual review
   if (result.includes("Deno.")) {
     notes.push("MANUAL: Deno.* API usage found — needs Node.js equivalent");

package/src/apps/autoconfig.ts

@@ -1,13 +1,9 @@
 /**
  * Auto-configures known apps from CMS blocks.
  *
- * Scans the decofile for block keys matching known apps and dynamically imports
- * their `mod.ts` from @decocms/apps. Each app mod exports:
- * - `configure(blockData, resolveSecret)` → configures the app client
- * - `handlers` → record of invoke handler keys → handler functions
- *
- * Zero hardcoded app logic in the framework — all app-specific code lives in
- * @decocms/apps/{app}/mod.ts.
+ * Scans the decofile for known app block keys (e.g. "deco-resend") and:
+ * 1. Configures the app client with CMS-provided credentials
+ * 2. Registers invoke handlers so `invoke.app.actions.*` works via the proxy
  *
  * Usage in setup.ts:
  *   import { autoconfigApps } from "@decocms/start/apps/autoconfig";
@@ -20,96 +16,58 @@ import { onChange } from "../cms/loader";
 import { resolveSecret } from "../sdk/crypto";
 
 // ---------------------------------------------------------------------------
-// Block key → @decocms/apps module mapping
+// Known app block keys → dynamic import + configure
 // ---------------------------------------------------------------------------
 
-/**
- * Maps CMS block keys (e.g. "deco-resend") to their @decocms/apps module path.
- * To add a new app, just add an entry here — no other code changes needed.
- */
-const BLOCK_TO_APP: Record<string, string> = {
-	"deco-resend": "resend",
-	// "deco-analytics": "analytics",
-	// "deco-shopify": "shopify",
-	// "deco-vtex": "vtex",
-};
-
-// ---------------------------------------------------------------------------
-// Generic app loader
-// ---------------------------------------------------------------------------
-
-interface AppMod {
-	configure: (
-		blockData: unknown,
-		resolveSecret: (value: unknown, envKey: string) => Promise<string | null>,
-	) => Promise<boolean>;
-	handlers: Record<string, (props: any, request: Request) => Promise<any>>;
-}
-
-/**
- * Import app mod using static imports.
- * CF Workers can't catch errors from dynamic string template imports —
- * the vite plugin crashes with AssertionError before the catch runs.
- * Each known app gets a case here. When adding a new app to BLOCK_TO_APP,
- * also add a case to this switch.
- */
-async function importAppMod(appName: string): Promise<AppMod | null> {
-	try {
-		switch (appName) {
-			case "resend":
-				return await import("@decocms/apps/resend/mod");
-			default:
-				return null;
-		}
-	} catch {
-		return null;
-	}
+interface AppAutoconfigurator {
+	/** Try to import, configure, and return invoke actions for this app */
+	(blockData: unknown): Promise<Record<string, InvokeAction>>;
 }
 
-async function loadAndConfigureApp(
-	blockKey: string,
-	appName: string,
-	blockData: unknown,
-): Promise<Record<string, InvokeAction>> {
-	const mod = await importAppMod(appName);
-	if (!mod) return {};
-
-	try {
-		const ok = await mod.configure(blockData, resolveSecret);
-		if (!ok) {
-			console.warn(
-				`[autoconfig] ${blockKey}: configure() returned false.` +
-				` Set DECO_CRYPTO_KEY to decrypt CMS secrets, or set the app's env var fallback.`,
-			);
+const KNOWN_APPS: Record<string, AppAutoconfigurator> = {
+	"deco-resend": async (block: any) => {
+		try {
+			const [resendClient, resendActions] = await Promise.all([
+				import("@decocms/apps/resend/client" as string),
+				import("@decocms/apps/resend/actions/send" as string),
+			]);
+			const { configureResend } = resendClient as { configureResend: (cfg: any) => void };
+			const { sendEmail } = resendActions as { sendEmail: (props: any) => Promise<any> };
+
+			const apiKey = await resolveSecret(block.apiKey, "RESEND_API_KEY");
+			if (!apiKey) {
+				console.warn(
+					"[autoconfig] deco-resend: no API key found." +
+					" Set DECO_CRYPTO_KEY to decrypt CMS secrets, or set RESEND_API_KEY as fallback.",
+				);
+				return {};
+			}
+
+			configureResend({
+				apiKey,
+				emailFrom: block.emailFrom
+					? `${block.emailFrom.name || "Contact"} ${block.emailFrom.domain || "<onboarding@resend.dev>"}`
+					: undefined,
+				emailTo: block.emailTo,
+				subject: block.subject,
+			});
+
+			const handler: InvokeAction = async (props: any) => sendEmail(props);
+			return {
+				"resend/actions/emails/send": handler,
+				"resend/actions/emails/send.ts": handler,
+			};
+		} catch {
+			// @decocms/apps not installed or doesn't have resend — skip
 			return {};
 		}
-
-		console.log(`[autoconfig] ${blockKey}: configured (${Object.keys(mod.handlers).length} handlers)`);
-		return mod.handlers;
-	} catch (e) {
-		console.warn(`[autoconfig] ${blockKey}:`, e);
-		return {};
-	}
-}
+	},
+};
 
 // ---------------------------------------------------------------------------
 // Main
 // ---------------------------------------------------------------------------
 
-async function configureAll(blocks: Record<string, unknown>): Promise<Record<string, InvokeAction>> {
-	const actions: Record<string, InvokeAction> = {};
-
-	for (const [blockKey, appName] of Object.entries(BLOCK_TO_APP)) {
-		const block = blocks[blockKey];
-		if (!block) continue;
-
-		const appActions = await loadAndConfigureApp(blockKey, appName, block);
-		Object.assign(actions, appActions);
-	}
-
-	return actions;
-}
-
 /**
  * Auto-configure apps from CMS blocks.
  * Call in setup.ts after setBlocks(). Also re-runs on admin hot-reload.
@@ -117,7 +75,19 @@ async function configureAll(blocks: Record<string, unknown>): Promise<Record<str
 export async function autoconfigApps(blocks: Record<string, unknown>) {
 	if (typeof document !== "undefined") return; // server-only
 
-	const actions = await configureAll(blocks);
+	const actions: Record<string, InvokeAction> = {};
+
+	for (const [blockKey, configurator] of Object.entries(KNOWN_APPS)) {
+		const block = blocks[blockKey];
+		if (!block) continue;
+
+		try {
+			const appActions = await configurator(block);
+			Object.assign(actions, appActions);
+		} catch (e) {
+			console.warn(`[autoconfig] ${blockKey}:`, e);
+		}
+	}
 
 	if (Object.keys(actions).length > 0) {
 		setInvokeActions(() => ({ ...actions }));
@@ -126,7 +96,14 @@ export async function autoconfigApps(blocks: Record<string, unknown>) {
 	// Re-configure on admin hot-reload
 	onChange(async (newBlocks) => {
 		if (typeof document !== "undefined") return;
-		const updatedActions = await configureAll(newBlocks);
+		const updatedActions: Record<string, InvokeAction> = {};
+		for (const [blockKey, configurator] of Object.entries(KNOWN_APPS)) {
+			const block = newBlocks[blockKey];
+			if (!block) continue;
+			try {
+				Object.assign(updatedActions, await configurator(block));
+			} catch {}
+		}
 		if (Object.keys(updatedActions).length > 0) {
 			setInvokeActions(() => ({ ...updatedActions }));
 		}

package/src/sdk/crypto.ts

@@ -34,7 +34,7 @@ function hexToBytes(hex: string): Uint8Array {
  * Returns null if not set.
  */
 function getKeyFromEnv(): Promise<{ key: CryptoKey; iv: Uint8Array }> | null {
-	const envKey = process.env.DECO_CRYPTO_KEY;
+	const envKey = getEnvVar("DECO_CRYPTO_KEY");
 	if (!envKey) return null;
 
 	return cachedKey ??= (async () => {
@@ -62,7 +62,7 @@ function getKeyFromEnv(): Promise<{ key: CryptoKey; iv: Uint8Array }> | null {
  * Check if the crypto key is available.
  */
 export function hasCryptoKey(): boolean {
-	return !!process.env.DECO_CRYPTO_KEY;
+	return !!getEnvVar("DECO_CRYPTO_KEY");
 }
 
 /**
@@ -142,9 +142,44 @@ export async function resolveSecret(
 
 	// 4. Environment variable fallback
 	if (envVarName) {
-		const envValue = process.env[envVarName];
+		const envValue = getEnvVar(envVarName);
 		if (envValue) return envValue;
 	}
 
 	return null;
 }
+
+/**
+ * Get an environment variable, checking process.env first, then .dev.vars file.
+ * Cloudflare Workers dev mode stores env vars in .dev.vars but they're only
+ * accessible via the `env` binding inside request handlers. During setup.ts
+ * (module-level init), we need to read the file directly.
+ */
+function getEnvVar(name: string): string | undefined {
+	// 1. process.env (works in Node, may work in Workers with nodejs_compat)
+	if (typeof process !== "undefined" && process.env?.[name]) {
+		return process.env[name];
+	}
+
+	// 2. Read .dev.vars file (Cloudflare Workers dev mode)
+	try {
+		const fs = require("node:fs");
+		const path = require("node:path");
+		const devVarsPath = path.resolve(".dev.vars");
+		if (fs.existsSync(devVarsPath)) {
+			const content = fs.readFileSync(devVarsPath, "utf-8");
+			for (const line of content.split("\n")) {
+				const trimmed = line.trim();
+				if (trimmed.startsWith("#") || !trimmed.includes("=")) continue;
+				const eqIdx = trimmed.indexOf("=");
+				const key = trimmed.slice(0, eqIdx).trim();
+				const val = trimmed.slice(eqIdx + 1).trim();
+				if (key === name) return val;
+			}
+		}
+	} catch {
+		// fs not available (e.g., pure Worker runtime) — ignore
+	}
+
+	return undefined;
+}