(demo-store): Refactor Seo and implement ld+json structured data [Fixed]

.changeset/silent-pianos-battle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Fix bug in CLI not recognising the --install-deps flag when creating projects

.github/workflows/ci.yml

@@ -72,16 +72,18 @@ jobs:
       - name: 📥 Install dependencies
         run: npm ci
 
-      - name: 💾 Turbo cache
-        id: turbo-cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            node_modules/.cache/turbo
-            **/.turbo
-          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.ref_name }}-
+      # Enabling the turbo cache causes deployments to fail intermittently.
+      # The build step fails with dependency issues. More investigation needed.
+      # - name: 💾 Turbo cache
+      #   id: turbo-cache
+      #   uses: actions/cache@v3
+      #   with:
+      #     path: |
+      #       node_modules/.cache/turbo
+      #       **/.turbo
+      #     key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
+      #     restore-keys: |
+      #       turbo-${{ github.job }}-${{ github.ref_name }}-
 
       - name: 📦 Build packages
         run: npm run build

.github/workflows/deploy.yml

@@ -29,16 +29,18 @@ jobs:
       - name: 📥 Install dependencies
         run: npm ci
 
-      - name: 💾 Turbo cache
-        id: turbo-cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            node_modules/.cache/turbo
-            **/.turbo
-          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.ref_name }}-
+      # Enabling the turbo cache causes deployments to fail intermittently.
+      # The build step fails with dependency issues. More investigation needed.
+      # - name: 💾 Turbo cache
+      #   id: turbo-cache
+      #   uses: actions/cache@v3
+      #   with:
+      #     path: |
+      #       node_modules/.cache/turbo
+      #       **/.turbo
+      #     key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
+      #     restore-keys: |
+      #       turbo-${{ github.job }}-${{ github.ref_name }}-
 
       - name: 📦 Build packages
         run: |

packages/cli/src/commands/hydrogen/init.test.ts

@@ -0,0 +1,93 @@
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {temporaryDirectoryTask} from 'tempy';
+import {runInit} from './init.js';
+import {ui} from '@shopify/cli-kit';
+import {installNodeModules} from '@shopify/cli-kit/node/node-package-manager';
+
+describe('init', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock('@shopify/cli-kit');
+    vi.mock('../../utils/transpile-ts.js');
+    vi.mock('../../utils/template-downloader.js', async () => ({
+      getLatestTemplates: () => Promise.resolve({}),
+    }));
+    vi.mock('@shopify/cli-kit/node/node-package-manager');
+    vi.mocked(ui.prompt).mockImplementation(() =>
+      Promise.resolve({installDeps: 'false'}),
+    );
+  });
+
+  const defaultOptions = (stubs: Record<any, unknown>) => ({
+    template: 'hello-world',
+    language: 'js',
+    path: 'path/to/project',
+    ...stubs,
+  });
+
+  describe('installDeps', () => {
+    it('prompts the user to install dependencies when installDeps is not passed', async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        // Given
+        const options = defaultOptions({path: tmpDir});
+
+        vi.mocked(ui.prompt).mockImplementation(() =>
+          Promise.resolve({installDeps: 'false'}),
+        );
+
+        // When
+        await runInit(options);
+
+        // Then
+        expect(ui.prompt).toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: 'installDeps',
+            }),
+          ]),
+        );
+        expect(installNodeModules).not.toHaveBeenCalled();
+      });
+    });
+
+    it('does not prompt the user to install dependencies when installDeps is true', async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        // Given
+        const options = defaultOptions({installDeps: true, path: tmpDir});
+
+        // When
+        await runInit(options);
+
+        // Then
+        expect(ui.prompt).not.toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: 'installDeps',
+            }),
+          ]),
+        );
+        expect(installNodeModules).toHaveBeenCalled();
+      });
+    });
+
+    it('does not show a prompt to install dependencies when installDeps is false', async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        // Given
+        const options = defaultOptions({installDeps: false, path: tmpDir});
+
+        // When
+        await runInit(options);
+
+        // Then
+        expect(ui.prompt).not.toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: 'installDeps',
+            }),
+          ]),
+        );
+        expect(installNodeModules).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

packages/cli/src/commands/hydrogen/init.ts

@@ -6,7 +6,11 @@ import {
 import {renderFatalError} from '@shopify/cli-kit/node/ui';
 import Flags from '@oclif/core/lib/flags.js';
 import {output, path} from '@shopify/cli-kit';
-import {commonFlags, parseProcessFlags} from '../../utils/flags.js';
+import {
+  commonFlags,
+  parseProcessFlags,
+  flagsToCamelObject,
+} from '../../utils/flags.js';
 import {transpileProject} from '../../utils/transpile-ts.js';
 import {getLatestTemplates} from '../../utils/template-downloader.js';
 import {checkHydrogenVersion} from '../../utils/check-version.js';
@@ -46,7 +50,7 @@ export default class Init extends Command {
     // @ts-ignore
     const {flags} = await this.parse(Init);
 
-    await runInit({...flags});
+    await runInit(flagsToCamelObject(flags));
   }
 }
 

templates/demo-store/app/components/Hero.tsx

@@ -62,6 +62,7 @@ export function Hero({
                 widths={[450, 700]}
                 width={375}
                 data={spreadSecondary.reference as Media}
+                loading={loading}
               />
             </div>
           )}