@decocms/start 0.19.0

package/.cursor/skills/deco-to-tanstack-migration/references/codemod-commands.md

@@ -0,0 +1,174 @@
+# Codemod Commands
+
+All automation commands organized by phase. Run from project root.
+
+## Phase 1 — Imports & JSX
+
+### Preact → React (safe for bulk)
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|from "preact/hooks"|from "react"|g' \
+  -e 's|from "preact/compat"|from "react"|g' \
+  -e 's|from "preact"|from "react"|g'
+```
+
+### ComponentChildren → ReactNode
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's/ComponentChildren/ReactNode/g'
+```
+
+### SVG attributes (safe for bulk)
+
+```bash
+find src/ -name '*.tsx' | xargs sed -i '' \
+  -e 's/stroke-width=/strokeWidth=/g' \
+  -e 's/stroke-linecap=/strokeLinecap=/g' \
+  -e 's/stroke-linejoin=/strokeLinejoin=/g' \
+  -e 's/fill-rule=/fillRule=/g' \
+  -e 's/clip-rule=/clipRule=/g' \
+  -e 's/clip-path=/clipPath=/g' \
+  -e 's/stroke-dasharray=/strokeDasharray=/g' \
+  -e 's/stroke-dashoffset=/strokeDashoffset=/g'
+```
+
+### HTML attributes
+
+```bash
+find src/ -name '*.tsx' | xargs sed -i '' \
+  -e 's/ for=/ htmlFor=/g' \
+  -e 's/ fetchpriority=/ fetchPriority=/g' \
+  -e 's/ autocomplete=/ autoComplete=/g'
+```
+
+### Remove JSX pragmas
+
+```bash
+find src/ -name '*.tsx' -o -name '*.ts' | xargs sed -i '' \
+  -e '/\/\*\* @jsxRuntime automatic \*\//d' \
+  -e '/\/\*\* @jsx h \*\//d' \
+  -e '/\/\*\* @jsxFrag Fragment \*\//d'
+```
+
+## Phase 2 — Signals
+
+### Module-level signal imports (safe for bulk)
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  's|from "@preact/signals"|from "@decocms/start/sdk/signal"|g'
+```
+
+### Audit useSignal usage (manual conversion needed)
+
+```bash
+grep -rn 'useSignal\|useComputed' src/ --include='*.tsx' --include='*.ts'
+```
+
+## Phase 3 — Deco Framework
+
+### Remove $fresh imports
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|import { asset } from "\$fresh/runtime.ts";||g' \
+  -e 's|asset(\([^)]*\))|\1|g'
+```
+
+### Replace site-local import aliases
+
+```bash
+# Replace with your actual site name:
+SITE_NAME="osklenbr"
+
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e "s|from \"\\\$store/|from \"~/|g" \
+  -e "s|from \"deco-sites/${SITE_NAME}/|from \"~/|g" \
+  -e "s|from \"site/|from \"~/|g"
+```
+
+### IS_BROWSER replacement
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|import { IS_BROWSER } from "\$fresh/runtime.ts";||g' \
+  -e 's|IS_BROWSER|typeof window !== "undefined"|g'
+```
+
+## Phase 4 — Commerce
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|from "apps/commerce/types.ts"|from "@decocms/apps/commerce/types"|g' \
+  -e 's|from "apps/admin/widgets.ts"|from "~/types/widgets"|g' \
+  -e 's|from "apps/website/components/Image.tsx"|from "~/components/ui/Image"|g' \
+  -e 's|from "apps/website/components/Picture.tsx"|from "~/components/ui/Picture"|g' \
+  -e 's|from "apps/website/components/Video.tsx"|from "~/components/ui/Video"|g'
+```
+
+### SDK utilities
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|from "~/sdk/useOffer.ts"|from "@decocms/apps/commerce/sdk/useOffer"|g' \
+  -e 's|from "~/sdk/useOffer"|from "@decocms/apps/commerce/sdk/useOffer"|g' \
+  -e 's|from "~/sdk/format.ts"|from "@decocms/apps/commerce/sdk/formatPrice"|g'
+```
+
+## Phase 6 — Islands
+
+### Audit island types
+
+```bash
+echo "=== Wrapper islands (re-export from components) ==="
+grep -rl 'export.*from.*components' src/islands/ --include='*.tsx' 2>/dev/null
+
+echo ""
+echo "=== Standalone islands (have real logic) ==="
+find src/islands/ -name '*.tsx' ! -exec grep -l 'export.*from.*components' {} \; 2>/dev/null
+```
+
+### Repoint imports from islands/ to components/
+
+```bash
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  's|from "~/islands/|from "~/components/|g'
+```
+
+## Verification Commands
+
+```bash
+# Zero old imports (run after all phases):
+echo "Preact: $(grep -r 'from "preact' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+echo "Signals: $(grep -r '@preact/signals' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+echo "@deco/deco: $(grep -r '@deco/deco' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+echo "\$fresh: $(grep -r '\$fresh' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+echo "apps/: $(grep -r 'from \"apps/' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+echo "islands/: $(grep -r 'from \"~/islands/' src/ --include='*.tsx' --include='*.ts' | wc -l)"
+```
+
+## Pre-Flight Audit Script
+
+Run against the source site before starting migration:
+
+```bash
+echo "=== Source Site Audit ==="
+echo "Components: $(find components/ sections/ -name '*.tsx' 2>/dev/null | wc -l)"
+echo "Islands: $(find islands/ -name '*.tsx' 2>/dev/null | wc -l)"
+echo "Sections: $(find sections/ -name '*.tsx' 2>/dev/null | wc -l)"
+echo "Loaders: $(find loaders/ -name '*.ts' -o -name '*.tsx' 2>/dev/null | wc -l)"
+echo ""
+echo "=== Import Dependencies ==="
+echo "Preact: $(grep -rl 'from "preact' . --include='*.tsx' --include='*.ts' 2>/dev/null | wc -l) files"
+echo "Signals: $(grep -rl '@preact/signals' . --include='*.tsx' --include='*.ts' 2>/dev/null | wc -l) files"
+echo "@deco/deco: $(grep -rl '@deco/deco' . --include='*.tsx' --include='*.ts' 2>/dev/null | wc -l) files"
+echo "\$fresh: $(grep -rl '\$fresh/' . --include='*.tsx' --include='*.ts' 2>/dev/null | wc -l) files"
+echo "apps/: $(grep -rl 'from \"apps/' . --include='*.tsx' --include='*.ts' 2>/dev/null | wc -l) files"
+echo "useSignal: $(grep -r 'useSignal' . --include='*.tsx' --include='*.ts' -c 2>/dev/null | awk -F: '{sum+=$2} END{print sum}')"
+echo ""
+echo "=== CMS Blocks ==="
+echo "Total: $(find .deco/blocks/ -name '*.json' 2>/dev/null | wc -l)"
+echo "Pages: $(find .deco/blocks/ -name 'pages-*.json' 2>/dev/null | wc -l)"
+```

package/.cursor/skills/deco-to-tanstack-migration/references/commerce/README.md

@@ -0,0 +1,78 @@
+# Commerce & Widget Types Migration
+
+## Commerce Types
+
+Commerce types live in `@decocms/apps/commerce/types`. Import directly:
+
+```typescript
+import type { Product, AnalyticsItem, BreadcrumbList } from "@decocms/apps/commerce/types";
+```
+
+Key types available: `Product`, `ProductGroup`, `ProductListingPage`, `ProductDetailsPage`, `Offer`, `AggregateOffer`, `UnitPriceSpecification`, `ImageObject`, `PropertyValue`, `BreadcrumbList`, `SiteNavigationElement`, `Brand`, `Review`, `AggregateRating`, `Filter`, `FilterToggle`, `FilterRange`, `SortOption`, `PageInfo`, `Suggestion`, `Search`, `AnalyticsItem`, `AddToCartParams`.
+
+Replace old imports:
+```bash
+sed -i '' 's|from "apps/commerce/types.ts"|from "@decocms/apps/commerce/types"|g'
+sed -i '' 's|from "~/types/commerce"|from "@decocms/apps/commerce/types"|g'
+```
+
+## Commerce Utilities
+
+Also from `@decocms/apps`:
+
+```typescript
+import { mapProductToAnalyticsItem } from "@decocms/apps/commerce/utils/productToAnalyticsItem";
+import { parseRange, formatRange } from "@decocms/apps/commerce/utils/filters";
+```
+
+Replace old imports:
+```bash
+sed -i '' 's|from "apps/commerce/utils/productToAnalyticsItem.ts"|from "@decocms/apps/commerce/utils/productToAnalyticsItem"|g'
+sed -i '' 's|from "apps/commerce/utils/filters.ts"|from "@decocms/apps/commerce/utils/filters"|g'
+```
+
+## Widget Types
+
+CMS widget types are site-local since they're just string aliases. Create `~/types/widgets.ts`:
+
+```typescript
+export type ImageWidget = string;
+export type HTMLWidget = string;
+export type VideoWidget = string;
+export type TextWidget = string;
+export type RichText = string;
+export type Secret = string;
+export type Color = string;
+export type ButtonWidget = string;
+```
+
+Replace:
+```bash
+sed -i '' 's|from "apps/admin/widgets.ts"|from "~/types/widgets"|g'
+```
+
+## UI Components (Site-Local)
+
+Image, Picture, Seo, Theme etc. are **site-local components** -- they do NOT belong in `@decocms/apps`.
+
+Create these in `~/components/ui/`:
+- `Image.tsx` - thin `<img>` wrapper (accepts `preload`, `fit` props for API compat)
+- `Picture.tsx` - `<picture>` + `<Source>` wrapper
+- `Seo.tsx` - head meta tags (stub or real implementation)
+- `Theme.tsx` - CSS variable injection (stub or real)
+- `PoweredByDeco.tsx` - footer badge
+- `Video.tsx` - `<video>` wrapper
+- `SeoPreview.tsx` - admin SEO preview (stub)
+
+Replace:
+```bash
+sed -i '' 's|from "apps/website/components/Image.tsx"|from "~/components/ui/Image"|g'
+sed -i '' 's|from "apps/website/components/Picture.tsx"|from "~/components/ui/Picture"|g'
+```
+
+## Verification
+
+```bash
+grep -r 'from "apps/' src/ --include='*.ts' --include='*.tsx'
+# Should return ZERO matches
+```

package/.cursor/skills/deco-to-tanstack-migration/references/deco-framework/README.md

@@ -0,0 +1,128 @@
+# Deco Framework Import Elimination
+
+Replace all `@deco/deco/*` and `$fresh/*` imports with inline equivalents. No shim files needed.
+
+## $fresh/runtime.ts
+
+### asset(url)
+
+The `asset()` function in Fresh prepends the build hash path. In Vite, static assets are handled automatically. Just remove the wrapper:
+
+```typescript
+// OLD
+import { asset } from "$fresh/runtime.ts";
+<img src={asset("/sprites.svg")} />
+
+// NEW
+<img src="/sprites.svg" />
+```
+
+### IS_BROWSER
+
+```typescript
+// OLD
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+// NEW (inline)
+const IS_BROWSER = typeof document !== "undefined";
+```
+
+## @deco/deco (bare import)
+
+### SectionProps
+
+```typescript
+// OLD
+import type { SectionProps } from "@deco/deco";
+type Props = SectionProps<typeof loader>;
+
+// NEW (inline type)
+type SectionProps<T extends (...args: any[]) => any> = ReturnType<T>;
+```
+
+### Resolved
+
+```typescript
+// OLD
+import type { Resolved } from "@deco/deco";
+
+// NEW
+type Resolved<T = any> = T;
+```
+
+### context
+
+```typescript
+// OLD
+import { context } from "@deco/deco";
+if (context.isDeploy) { ... }
+
+// NEW
+const context = { isDeploy: false, platform: "tanstack-start", site: "my-store", siteId: 0 };
+```
+
+## @deco/deco/blocks
+
+### Section, Block
+
+```typescript
+// OLD
+import type { Section } from "@deco/deco/blocks";
+
+// NEW
+type Section = any;
+type Block = any;
+```
+
+These were used for Deco CMS section composition. In TanStack Start, sections are just React components.
+
+## @deco/deco/hooks
+
+### useScript / useScriptAsDataURI
+
+These serialize a function into an inline `<script>` string. Create `~/sdk/useScript.ts`:
+
+```typescript
+export function useScript(fn: (...args: any[]) => void, ...args: any[]): string {
+  const serializedArgs = args.map((a) => JSON.stringify(a)).join(",");
+  return `(${fn.toString()})(${serializedArgs})`;
+}
+
+export function useScriptAsDataURI(fn: (...args: any[]) => void, ...args: any[]): string {
+  const code = useScript(fn, ...args);
+  return `data:text/javascript;charset=utf-8,${encodeURIComponent(code)}`;
+}
+```
+
+### usePartialSection
+
+Deco partial sections don't apply in TanStack Start. Stub:
+
+```typescript
+export function usePartialSection(props?: Record<string, unknown>) {
+  return props || {};
+}
+```
+
+## @deco/deco/o11y
+
+```typescript
+// OLD
+import { logger } from "@deco/deco/o11y";
+logger.error("failed", err);
+
+// NEW
+console.error("failed", err);
+```
+
+## Automation
+
+All of these are safe for bulk sed (each import pattern maps to exactly one replacement).
+
+## Verification
+
+```bash
+grep -r '@deco/deco' src/ --include='*.ts' --include='*.tsx'
+grep -r '\$fresh/' src/ --include='*.ts' --include='*.tsx'
+# Both should return ZERO matches
+```