Cli

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/prettier.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: Configure Node.js
         uses: actions/setup-node@v4

.github/workflows/unit_test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.18.0
+          version: 10.20.0
 
       - name: setup node
         uses: actions/setup-node@v4

LICENSE

@@ -1,3 +1,7 @@
+   Portions of this software are derived from Shopify Polaris (https://polaris.shopify.com)
+   Copyright (c) Shopify Inc.
+   Licensed under the MIT License.
+
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
@@ -177,15 +181,6 @@
 
    APPENDIX: How to apply the Apache License to your work.
 
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
    Copyright 2025 Fasttify LLC
 
    Licensed under the Apache License, Version 2.0 (the "License");

NOTICE.md

@@ -0,0 +1,24 @@
+# Notice
+
+This project uses components and/or design resources from **Shopify Polaris**,
+an open-source design system licensed under the **MIT License**.
+
+---
+
+## Copyright and License
+
+**Shopify Polaris**
+Copyright (c) Shopify Inc.
+Released under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+This project is **not affiliated with, endorsed by, or sponsored by Shopify Inc.**
+All trademarks and brand names are the property of their respective owners.

amplify.yml

@@ -5,7 +5,7 @@ backend:
       commands:
         - export NODE_OPTIONS='--max-old-space-size=7000'
         - node -e "console.log('Total available heap size (MB):', v8.getHeapStatistics().heap_size_limit / 1024 / 1024)"
-        - npm install -g pnpm@10.18.0
+        - npm install -g pnpm@10.20.0
         - pnpm install --frozen-lockfile
         - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
 
@@ -15,7 +15,7 @@ frontend:
       commands:
         - export NODE_OPTIONS='--max-old-space-size=7000'
         - node -e "console.log('Total available heap size (MB):', v8.getHeapStatistics().heap_size_limit / 1024 / 1024)"
-        - npm install -g pnpm@10.18.0
+        - npm install -g pnpm@10.20.0
         - env | grep -e BUCKET_NAME >> .env.production
         - env | grep -e CLOUDFRONT_DOMAIN_NAME >> .env.production
         - env | grep -e APP_URL >> .env.production

app/[store]/page.tsx

@@ -1,6 +1,7 @@
 import DevAutoReloadScript from '@/app/[store]/src/components/DevAutoReloadScript';
 import { StorePageController } from '@/app/[store]/src/_lib/controllers/store-page-controller';
 import { StoreMetadataController } from '@/app/[store]/src/_lib/controllers/store-metadata-controller';
+import { PreviewPageController } from '@/app/[store]/src/_lib/controllers/preview-page-controller';
 import { isAssetPath } from '@/app/[store]/src/lib/store-page-utils';
 import { Metadata } from 'next';
 
@@ -11,6 +12,7 @@ interface StorePageProps {
     store: string;
   }>;
   searchParams: Promise<{
+    domain?: string;
     path?: string;
     [key: string]: string | string[] | undefined;
   }>;
@@ -19,12 +21,40 @@ interface StorePageProps {
 /**
  * Página principal de tienda con SSR
  * Maneja todas las rutas de tienda: /, /products/slug, /collections/slug, etc
+ * También maneja /preview?domain=... para previews del Theme Studio
  *
  * Esta página solo orquesta la llamada al controller, delegando toda la lógica
  */
 export default async function StorePage(props: StorePageProps) {
   const controller = new StorePageController();
+  const awaitedParams = await props.params;
+  const awaitedSearchParams = await props.searchParams;
 
+  // Si la ruta es /preview, usar el controlador de preview
+  if (awaitedParams.store === 'preview' && awaitedSearchParams.domain) {
+    const previewController = new PreviewPageController();
+    const domainParam = Array.isArray(awaitedSearchParams.domain)
+      ? awaitedSearchParams.domain[0]
+      : awaitedSearchParams.domain;
+    const path = Array.isArray(awaitedSearchParams.path)
+      ? awaitedSearchParams.path[0] || '/'
+      : awaitedSearchParams.path || '/';
+
+    const result = await previewController.handle({
+      domain: domainParam,
+      path,
+      searchParams: awaitedSearchParams,
+    });
+
+    return (
+      <>
+        {result.html && <div dangerouslySetInnerHTML={{ __html: result.html }} />}
+        {process.env.NODE_ENV === 'development' && <DevAutoReloadScript />}
+      </>
+    );
+  }
+
+  // Comportamiento normal para rutas de tienda
   let html: string | null = null;
   let errorHtml: string | null = null;
 
@@ -52,7 +82,17 @@ export default async function StorePage(props: StorePageProps) {
  * Genera metadata SEO para la página
  */
 export async function generateMetadata(props: StorePageProps): Promise<Metadata> {
-  const { path } = await props.searchParams;
+  const awaitedParams = await props.params;
+  const awaitedSearchParams = await props.searchParams;
+  const { path } = awaitedSearchParams;
+
+  // Si es preview, no generar metadata (devolver valores por defecto)
+  if (awaitedParams.store === 'preview') {
+    return {
+      title: 'Preview',
+      description: 'Theme Studio Preview',
+    };
+  }
 
   if (path && isAssetPath(path)) {
     return {

app/[store]/src/_lib/controllers/preview-page-controller.ts

@@ -0,0 +1,38 @@
+import { getCachedRenderResult } from '@/app/[store]/src/lib/store-page-utils';
+
+interface PreviewPageProps {
+  domain: string;
+  path: string;
+  searchParams: Record<string, string | string[] | undefined>;
+}
+
+/**
+ * Controlador para manejar las páginas de preview del Theme Studio
+ * Renderiza directamente usando el dominio sin pasar por resolveDomainFromParam
+ */
+export class PreviewPageController {
+  async handle(props: PreviewPageProps) {
+    const { domain, path, searchParams } = props;
+
+    // Validar que el dominio no sea "preview"
+    if (!domain || domain === 'preview' || domain.startsWith('preview.')) {
+      throw new Error('Invalid domain for preview. Domain must be provided.');
+    }
+
+    // Decodificar el dominio si viene codificado
+    const decodedDomain = decodeURIComponent(domain);
+
+    // Validar que el dominio decodificado tenga el formato correcto
+    if (!decodedDomain.includes('.')) {
+      throw new Error(`Invalid domain format: ${decodedDomain}`);
+    }
+
+    // Renderizar directamente usando el dominio
+    const result = await getCachedRenderResult(decodedDomain, path, searchParams);
+
+    return {
+      html: result.html,
+      metadata: result.metadata,
+    };
+  }
+}

app/[store]/src/_lib/services/domain.service.ts

@@ -6,10 +6,16 @@ import { DOMAIN_CONFIG, COMMON_ASSETS } from '@/app/[store]/src/_lib/constants/s
 export class DomainService {
   /**
    * Resuelve el dominio de la tienda a partir del parámetro store
+   * Maneja tanto parámetros codificados como sin codificar
    */
   resolveDomainFromParam(store: string): string {
     const { BASE_DOMAIN } = DOMAIN_CONFIG;
-    return store.includes('.') ? store : `${store}.${BASE_DOMAIN}`;
+
+    // Decodificar el parámetro si viene codificado (ej: tienda-695a7d7%2Efasttify%2Ecom)
+    const decodedStore = decodeURIComponent(store);
+
+    // Si el store decodificado tiene puntos, ya es un dominio completo
+    return decodedStore.includes('.') ? decodedStore : `${decodedStore}.${BASE_DOMAIN}`;
   }
 
   /**

app/api/stores/[storeId]/dev/update/route.ts

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getNextCorsHeaders } from '@/lib/utils/next-cors';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { TemplateLoaderAdapter } from '@/app/api/stores/_lib/dev-server/infrastructure/adapters/template-loader.adapter';
+import { SectionRendererAdapter } from '@/app/api/stores/_lib/dev-server/infrastructure/adapters/section-renderer.adapter';
+import { UpdateSectionSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-section-setting.use-case';
+import { UpdateBlockSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-block-setting.use-case';
+import { UpdateSubBlockSettingUseCase } from '@/app/api/stores/_lib/dev-server/application/use-cases/update-sub-block-setting.use-case';
+import { devSessionManager } from '@/app/api/stores/_lib/dev-server/infrastructure/services/dev-session-manager.service';
+import {
+  broadcastChangeApplied,
+  broadcastRenderError,
+} from '@/app/api/stores/_lib/dev-server/controllers/sse-controller';
+
+const templateLoader = new TemplateLoaderAdapter();
+const sectionRenderer = new SectionRendererAdapter();
+const updateSectionSettingUseCase = new UpdateSectionSettingUseCase(templateLoader, sectionRenderer);
+const updateBlockSettingUseCase = new UpdateBlockSettingUseCase(templateLoader, sectionRenderer);
+const updateSubBlockSettingUseCase = new UpdateSubBlockSettingUseCase(templateLoader, sectionRenderer);
+
+/**
+ * Endpoint POST para recibir actualizaciones de settings desde el cliente
+ * Procesa el cambio y envía la actualización por SSE
+ */
+export const POST = withAuthHandler(
+  async (request: NextRequest, { storeId, corsHeaders }) => {
+    try {
+      const body = await request.json();
+      const { type, payload, templateType } = body;
+
+      if (!templateType) {
+        return NextResponse.json({ error: 'Missing templateType' }, { status: 400, headers: corsHeaders });
+      }
+
+      // Obtener o crear sesión
+      let session = devSessionManager.getSession(storeId, templateType);
+      if (!session) {
+        // Cargar template inicial y crear sesión
+        const template = await templateLoader.loadTemplate(storeId, templateType);
+        session = devSessionManager.createOrGetSession(storeId, templateType, template);
+      }
+
+      let result;
+
+      switch (type) {
+        case 'UPDATE_SECTION_SETTING': {
+          result = await updateSectionSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        case 'UPDATE_BLOCK_SETTING': {
+          result = await updateBlockSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        case 'UPDATE_SUB_BLOCK_SETTING': {
+          result = await updateSubBlockSettingUseCase.execute(payload, templateType, session.template);
+          if (result.updatedTemplate) {
+            devSessionManager.updateSessionTemplate(storeId, templateType, result.updatedTemplate);
+          }
+          break;
+        }
+
+        default:
+          return NextResponse.json({ error: 'Invalid message type' }, { status: 400, headers: corsHeaders });
+      }
+
+      // Enviar resultado a través de SSE
+      if (result.success) {
+        broadcastChangeApplied(storeId, templateType, result);
+      } else {
+        broadcastRenderError(storeId, templateType, result.error || 'Unknown error', result.sectionId);
+      }
+
+      return NextResponse.json({ success: true }, { headers: corsHeaders });
+    } catch (error) {
+      return NextResponse.json(
+        { error: error instanceof Error ? error.message : 'Unknown error' },
+        { status: 500, headers: corsHeaders }
+      );
+    }
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);
+
+export async function OPTIONS(request: NextRequest) {
+  const corsHeaders = await getNextCorsHeaders(request);
+  return new Response(null, { status: 204, headers: corsHeaders });
+}

app/api/stores/[storeId]/dev/ws/route.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NextRequest } from 'next/server';
+import { withAuthHandler } from '@/api/_lib/auth-middleware';
+import { handleSSEConnection } from '@/app/api/stores/_lib/dev-server/controllers/sse-controller';
+
+/**
+ * Endpoint SSE (Server-Sent Events) para hot-reload del editor
+ * Similar a template-dev pero específico para el Theme Studio
+ */
+export const GET = withAuthHandler(
+  async (request: NextRequest, { storeId }) => {
+    const url = new URL(request.url);
+    if (!url.searchParams.has('storeId')) {
+      url.searchParams.set('storeId', storeId);
+    }
+
+    const modifiedRequest = new NextRequest(url, {
+      method: request.method,
+      headers: request.headers,
+      body: request.body,
+      signal: request.signal,
+    });
+
+    return handleSSEConnection(modifiedRequest);
+  },
+  {
+    requireStoreOwnership: true,
+    storeIdSource: 'params',
+    storeIdParamName: 'storeId',
+  }
+);