@lightspeed/crane 3.2.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -58,41 +58,39 @@
     "mock-fs": "^5.5.0",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "unbuild": "^3.5.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.0"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "2.2.1",
+    "@lightspeed/crane-api": "2.3.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",
     "@types/ws": "^8.5.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "adm-zip": "^0.5.16",
-    "ajv": "^8.17.1",
-    "ajv-formats": "^3.0.1",
-    "axios": "^1.11.0",
+    "axios": "^1.14.0",
     "axios-concurrency": "^1.0.4",
     "cac": "^6.7.14",
     "cli-progress": "^3.12.0",
     "eslint": "^9.33.0",
     "fs-extra": "^11.3.1",
-    "glob": "^11.1.0",
-    "jsonpath-plus": "^10.3.0",
+    "glob": "^13.0.6",
+    "jsonpath-plus": "^10.4.0",
     "kolorist": "^1.8.0",
     "prompts": "^2.4.2",
     "semver": "^7.7.2",
     "terser": "^5.44.0",
     "tinycolor2": "^1.6.0",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "vite": "^7.1.4",
-    "vite-plugin-checker": "^0.10.3",
+    "vite-plugin-checker": "^0.12.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-externals": "^0.6.2",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite-tsconfig-paths": "^6.1.1",
     "vue": "^3.5.21",
     "vue-tsc": "^3.0.6",
     "ws": "^8.19.0"
@@ -102,10 +100,10 @@
   },
   "overrides": {
     "axios-concurrency": {
-      "axios": "1.11.0"
+      "axios": "1.14.0"
     },
     "magic-string": "0.30.10",
-    "glob": "^11.1.0",
+    "glob": "^13.0.6",
     "stylus": "^0.64.0"
   }
 }

package/template/collections/example-collection/configuration.ts

@@ -1,4 +1,6 @@
-export default {
+import { collection, section } from '@lightspeed/crane-api';
+
+export default collection.configuration({
   metadata: {
     name: 'Example Collection',
     description: 'Example Collection with custom sections, headers, and footers',
@@ -11,11 +13,10 @@ export default {
     },
   },
   sections: [
-    {
-      type: 'custom',
+    section.custom({
       id: 'example-section',
       showcase_id: '1',
       category: 'COLLECTIONS',
-    },
+    }),
   ],
-};
+});

package/template/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@lightspeed/eslint-config-crane';

package/template/footers/example-footer/component/MadeWith.vue

@@ -1,11 +1,26 @@
 <template>
-  <div>
-    <a :href="madeWith?.url" target="{{ madeWith?.target }}">
-      <span>{{ madeWith?.poweredBy }} &nbsp;</span>
-      <span>
-        <img :src="madeWith?.icon" alt="cart" />
-      </span>
-      <span>{{ madeWith?.company }}</span>
+  <div v-if="madeWith">
+    <a :href="madeWith.url" :target="madeWith.target">
+      <template v-if="isV2">
+        <span>{{ madeWith.poweredBy }}</span>
+        <span
+          v-if="madeWith.iconSvg"
+          v-html="madeWith.iconSvg"
+        />
+        <img
+          v-else-if="madeWith.icon"
+          :src="madeWith.icon"
+          :alt="madeWith.poweredBy"
+        />
+        <span v-if="madeWith.company">{{ madeWith.company }}</span>
+      </template>
+      <template v-else>
+        <span>{{ madeWith.poweredBy }} &nbsp;</span>
+        <span>
+          <img :src="madeWith.icon" alt="cart" />
+        </span>
+        <span>{{ madeWith.company }}</span>
+      </template>
     </a>
   </div>
 </template>
@@ -16,7 +31,8 @@ import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
 const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
-const madeWith = siteContent.madeWith;
+const isV2 = !!siteContent.madeWithV2;
+const madeWith = siteContent.madeWithV2 ?? siteContent.madeWith;
 </script>
 
 <style scoped>

package/template/layouts/catalog/example-catalog/client.ts

@@ -0,0 +1,6 @@
+import { createLayoutApp } from '@lightspeed/crane-api';
+
+import Main from './Main.vue';
+import { Content, Design } from './type.ts';
+
+export default createLayoutApp<Content, Design>(Main);

package/template/layouts/category/example-category/client.ts

@@ -0,0 +1,6 @@
+import { createLayoutApp } from '@lightspeed/crane-api';
+
+import Main from './Main.vue';
+import { Content, Design } from './type.ts';
+
+export default createLayoutApp<Content, Design>(Main);

package/template/layouts/category/example-category/settings/translations.ts

@@ -0,0 +1 @@
+export default {} as const;

package/template/layouts/product/example-product/client.ts

@@ -0,0 +1,6 @@
+import { createLayoutApp } from '@lightspeed/crane-api';
+
+import Main from './Main.vue';
+import { Content, Design } from './type.ts';
+
+export default createLayoutApp<Content, Design>(Main);

package/template/layouts/product/example-product/settings/translations.ts

@@ -0,0 +1 @@
+export default {} as const;

package/template/package.json

@@ -21,7 +21,7 @@
     "node": ">=22"
   },
   "overrides": {
-    "glob": "^11.1.0",
+    "glob": "^13.0.6",
     "stylus": "^0.64.0"
   }
 }

package/template/preview/shared/api-routes.ts

@@ -16,6 +16,9 @@ import { debugLog } from './logger';
 import { getShowcaseData,  BlockType, BLOCK_TYPES } from './preview';
 import { fetchTiles, updateTilesSection, updateCustomContent, getBlockType } from './utils';
 
+/** Maximum allowed nesting depth for DECK settings */
+const MAX_DECK_DEPTH = 2;
+
 /**
  * AppBlock type definition for block-config response
  */
@@ -206,9 +209,14 @@ function processEditorExceptDeck(setting: ContentEditor, fieldName: string) {
 }
 
 /**
- * Process a DECK editor: transform cards.defaultCardContent.settings into editors array
+ * Process a DECK editor: transform cards.defaultCardContent.settings into editors array.
+ * Supports nested DECK up to MAX_DECK_DEPTH levels.
  */
-function processDeckEditor(editor: DeckContentEditor, fieldName: string): Record<string, unknown> {
+function processDeckEditor(
+  editor: DeckContentEditor,
+  fieldName: string,
+  depth: number = 1,
+): Record<string, unknown> {
   const result: Record<string, unknown> = {
     field: fieldName,
     type: 'DECK_EDITOR',
@@ -228,8 +236,23 @@ function processDeckEditor(editor: DeckContentEditor, fieldName: string): Record
     // Create editors array from settings and add to defaultCard
     if (settings) {
       const editors: Record<string, unknown>[] = [];
-      for (const [settingFieldName, settingEditor] of Object.entries(settings)) {
-        const processedEditor: Record<string, unknown> = processEditorExceptDeck(settingEditor, settingFieldName);
+      for (const [settingFieldName, settingEditor] of Object.entries(settings) as [string, ContentEditor][]) {
+        let processedEditor: Record<string, unknown>;
+        // Recursively process nested DECK editors, enforcing MAX_DECK_DEPTH
+        if (settingEditor.type === 'DECK') {
+          if (depth >= MAX_DECK_DEPTH) {
+            throw new Error(
+              `Maximum DECK nesting depth of ${MAX_DECK_DEPTH} exceeded at field "${settingFieldName}".`,
+            );
+          }
+          processedEditor = processDeckEditor(
+            settingEditor as DeckContentEditor,
+            settingFieldName,
+            depth + 1,
+          );
+        } else {
+          processedEditor = processEditorExceptDeck(settingEditor, settingFieldName);
+        }
         editors.push(processedEditor);
       }
       defaultCard.editors = editors;

package/template/preview/shared/mock.ts

@@ -55,9 +55,18 @@ export const externalContentMock: ExternalContentMock = {
       url: 'https://www.lightspeedhq.com',
       target: '_blank',
       icon: '/assets/lightspeed-icon.png',
+      iconSvg: undefined,
       poweredBy: 'Powered by',
       company: 'Lightspeed',
     },
+    madeWithV2: {
+      url: 'https://www.lightspeedhq.com',
+      target: '_blank',
+      icon: undefined,
+      iconSvg: undefined,
+      poweredBy: 'Powered by Lightspeed',
+      company: undefined,
+    },
   },
 
   category: {

package/template/preview/shared/preview.ts

@@ -244,6 +244,9 @@ function parseAccordionDesign(comp: any): Record<string, any> {
   Object.entries(comp.items || {}).forEach(([itemName, item]: [string, any]) => {
     const editors: Record<string, any> = {};
     Object.entries(item.editors || {}).forEach(([editorName, editor]: [string, any]) => {
+      if (editor?.type === 'DIVIDER' || editor?.type === 'INFO') {
+        return;
+      }
       editors[editorName] = editor.defaults || {};
     });
     items[itemName] = { label: item.label, editors };

package/template/preview/vite.config.js

@@ -40,6 +40,10 @@ export default defineConfig({
           fs.writeFileSync(analyticsFile, JSON.stringify({}, null, 2), 'utf-8');
         }
 
+        // Exclude analytics file from Vite's file watcher to prevent
+        // HMR triggers when bumpSectionCount writes to it.
+        server.watcher.unwatch(analyticsFile);
+
         // helper to bump and persist counter for a given section
         function bumpSectionCount(section) {
           const raw = fs.readFileSync(analyticsFile, 'utf-8');

package/template/reference/sections/tag-lines/TagLines.vue

@@ -128,11 +128,11 @@ const {
   }
 }
 
-.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text {
+.tag-lines-section :deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text {
   opacity: 0.2;
 }
 
-.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text:hover {
+.tag-lines-section :deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text:hover {
   opacity: 1;
 }
 
@@ -140,13 +140,13 @@ const {
   transition: opacity ease-in-out 0.3s;
 }
 
-.tag-lines-section:has(.tag-lines-section__highlighted-text:hover)::v-deep(.section-image__element) {
+.tag-lines-section:has(.tag-lines-section__highlighted-text:hover) :deep(.section-image__element) {
   opacity: 0;
 }
 
-.tag-lines-section:has(.tag-lines-section__highlighted-text--1:hover)::v-deep(.section-image__element--1),
-.tag-lines-section:has(.tag-lines-section__highlighted-text--2:hover)::v-deep(.section-image__element--2),
-.tag-lines-section:has(.tag-lines-section__highlighted-text--3:hover)::v-deep(.section-image__element--3) {
+.tag-lines-section:has(.tag-lines-section__highlighted-text--1:hover) :deep(.section-image__element--1),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--2:hover) :deep(.section-image__element--2),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--3:hover) :deep(.section-image__element--3) {
   opacity: 1;
 }
 </style>

package/template/eslint.config.cjs

@@ -1 +0,0 @@
-module.exports = require('@lightspeed/eslint-config-crane');