@lightspeed/crane 1.2.5 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -36,29 +36,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
+    "@jest/globals": "^30.0.4",
+    "@stylistic/eslint-plugin": "^5.1.0",
     "@types/adm-zip": "^0.5.7",
     "@types/axios-concurrency": "^1.0.0",
     "@types/cli-progress": "^3.11.6",
     "@types/express-fileupload": "^1.5.0",
     "@types/fs-extra": "^11.0.1",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^30.0.0",
     "@types/mock-fs": "^4.13.4",
-    "@types/node": "^20.4.5",
+    "@types/node": "^24.0.10",
     "@types/semver": "^7.5.8",
     "@types/tinycolor2": "^1.4.6",
     "dir-compare": "^5.0.0",
-    "express": "^4.19.2",
-    "express-fileupload": "^1.5.1",
-    "jest": "^29.7.0",
+    "express": "^5.1.0",
+    "express-fileupload": "^1.5.2",
+    "jest": "^30.0.4",
     "mock-fs": "^5.5.0",
-    "ts-jest": "^29.1.5",
+    "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
     "typescript": "5.4.5",
     "unbuild": "^3.5.0",
-    "vite-plugin-dts": "^3.4.0",
-    "vite-plugin-static-copy": "^3.0.0"
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.0"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -68,7 +68,7 @@
     "adm-zip": "^0.5.16",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "axios": "^1.8.2",
+    "axios": "^1.11.0",
     "axios-concurrency": "^1.0.4",
     "cac": "^6.7.14",
     "cli-progress": "^3.12.0",
@@ -95,7 +95,7 @@
   },
   "overrides": {
     "axios-concurrency": {
-      "axios": "1.8.2"
+      "axios": "1.11.0"
     },
     "magic-string": "0.30.10",
     "glob": "^9.3.5",

package/template/layouts/catalog/example-catalog/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot :name="Slot.PRODUCT_LIST" />
-    <slot :name="Slot.BOTTOM_BAR" />
+    <slot :name="Slot.CUSTOM_SLOT" slot-id="custom-bottom-bar" />
   </div>
 </template>
 

package/template/layouts/catalog/example-catalog/assets/account-icon.svg

@@ -0,0 +1,11 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M23.5 12.0037C23.5012 10.0898 23.0244 8.20585 22.1129 6.52281C21.2014 4.83976 19.884 3.41084 18.2802 2.36565C16.6764 1.32047 14.8369 0.692104 12.9287 0.537549C11.0204 0.382995 9.10378 0.707143 7.35258 1.48059C5.60138 2.25404 4.07105 3.45232 2.9004 4.96672C1.72975 6.48113 0.955821 8.26374 0.64882 10.1529C0.34182 12.042 0.511461 13.9779 1.14235 15.7848C1.77325 17.5918 2.84543 19.2128 4.26165 20.5006C4.28966 20.5338 4.32226 20.5629 4.35848 20.5869C6.46141 22.4631 9.18149 23.5 12.0001 23.5C14.8188 23.5 17.5388 22.463 19.6417 20.5867C19.6778 20.5628 19.7102 20.5338 19.7381 20.5007C20.9235 19.4252 21.8705 18.1135 22.5184 16.6501C23.1663 15.1867 23.5007 13.604 23.5 12.0037ZM1.42 12.0037C1.41878 10.2648 1.84643 8.55248 2.66509 7.01827C3.48375 5.48405 4.66817 4.17528 6.11348 3.20782C7.55879 2.24035 9.22042 1.64404 10.9512 1.47168C12.6821 1.29931 14.4287 1.55621 16.0365 2.21963C17.6444 2.88305 19.0638 3.93252 20.1691 5.27513C21.2744 6.61775 22.0316 8.21209 22.3735 9.91701C22.7155 11.6219 22.6317 13.3848 22.1295 15.0496C21.6274 16.7145 20.7224 18.2298 19.4947 19.4616C18.3528 17.55 16.5208 16.1493 14.3764 15.5482C15.373 15.0182 16.1638 14.1702 16.6228 13.1392C17.0819 12.1081 17.1828 10.9532 16.9096 9.85816C16.6364 8.76314 16.0047 7.79091 15.1151 7.09614C14.2254 6.40136 13.1289 6.02395 12 6.02395C10.8711 6.02395 9.77458 6.40136 8.88494 7.09614C7.9953 7.79091 7.36363 8.76314 7.09042 9.85816C6.8172 10.9532 6.91814 12.1081 7.37717 13.1392C7.8362 14.1702 8.62696 15.0182 9.62364 15.5482C7.4792 16.1493 5.64721 17.55 4.50533 19.4616C3.52633 18.4819 2.74996 17.3191 2.22057 16.0394C1.69119 14.7598 1.41915 13.3884 1.42 12.0037ZM12 15.2226C11.1812 15.2226 10.3808 14.9799 9.69994 14.5252C9.01912 14.0704 8.48848 13.424 8.17514 12.6678C7.86179 11.9115 7.77981 11.0794 7.93955 10.2765C8.09929 9.4737 8.49359 8.73626 9.07258 8.15745C9.65157 7.57864 10.3892 7.18447 11.1923 7.02478C11.9954 6.86509 12.8278 6.94705 13.5843 7.26029C14.3408 7.57354 14.9874 8.10401 15.4423 8.78461C15.8972 9.46522 16.14 10.2654 16.14 11.084C16.1388 12.1812 15.7022 13.2332 14.9261 14.0091C14.1499 14.785 13.0976 15.2214 12 15.2226ZM5.19947 20.0991C5.88217 18.8976 6.87116 17.8985 8.06574 17.2035C9.26032 16.5084 10.6178 16.1422 12 16.1422C13.3822 16.1422 14.7397 16.5084 15.9343 17.2035C17.1288 17.8985 18.1178 18.8976 18.8005 20.0991C16.897 21.7015 14.4885 22.5803 12 22.5803C9.51148 22.5803 7.10295 21.7015 5.19947 20.0991Z"
+    fill="currentColor"
+  />
+</svg>

package/template/layouts/catalog/example-catalog/components/Icon.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="icon" :class="iconClass">
+    <img :src="accountIcon" alt="account icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import accountIcon from '../assets/account-icon.svg';
+
+interface Props {
+  size?: 'small' | 'medium' | 'large';
+  color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  color: 'currentColor',
+});
+
+const iconClass = computed(() => ({
+  [`icon--${props.size}`]: true,
+}));
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: v-bind(color);
+    transition: all 0.3s ease;
+  }
+
+  &--small svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &--medium svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &--large svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>

package/template/layouts/catalog/example-catalog/settings/content.ts

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

package/template/layouts/catalog/example-catalog/settings/design.ts

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

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

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

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/CustomBottomBar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="custom-bottom-bar">
+    <button class="account-button" @click="goToAccount">
+      <Icon size="small" color="white" />
+      <span class="account-text">Go to Account</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '../../components/Icon.vue';
+
+const goToAccount = () => {
+  // eslint-disable-next-line
+  const storefrontApi = (window as any)?.Ecwid;
+
+  storefrontApi?.OnAPILoaded.add(() => {
+    storefrontApi?.openPage('account');
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
+  pointer-events: none;
+  z-index: 1000;
+
+  .account-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #333;
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    margin: 0 auto;
+    pointer-events: auto;
+    min-width: 160px;
+    justify-content: center;
+
+    &:hover {
+      background: #555;
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .account-text {
+      white-space: nowrap;
+    }
+  }
+}
+</style>

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane';
+import CustomBottomBar from './CustomBottomBar.vue';
+import { Content, Design } from '../../type.ts';
+
+export default createVueClientApp<Content, Design>(CustomBottomBar);

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane';
+import CustomBottomBar from './CustomBottomBar.vue';
+import { Content, Design } from '../../type.ts';
+
+export default createVueServerApp<Content, Design>(CustomBottomBar);

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

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/page-templates/example-template/pages/catalog.ts

@@ -1,9 +1,10 @@
+import { StorePageConfiguration } from '@lightspeed/crane';
+
 export default {
   sections: [
     {
-      type: 'default',
-      id: 'catalog',
-      layout_id: 'example-catalog',
+      type: 'store',
+      id: 'example-catalog',
     },
   ],
-};
+} satisfies StorePageConfiguration;

package/template/page-templates/example-template/pages/category.ts

@@ -1,9 +1,10 @@
+import { StorePageConfiguration } from '@lightspeed/crane';
+
 export default {
   sections: [
     {
-      type: 'default',
-      id: 'category',
-      layout_id: 'example-category',
+      type: 'store',
+      id: 'example-category',
     },
   ],
-};
+} satisfies StorePageConfiguration;

package/template/page-templates/example-template/pages/product.ts

@@ -1,9 +1,10 @@
+import { StorePageConfiguration } from '@lightspeed/crane';
+
 export default {
   sections: [
     {
-      type: 'default',
-      id: 'product',
-      layout_id: 'example-product',
+      type: 'store',
+      id: 'example-product',
     },
   ],
-};
+} satisfies StorePageConfiguration;

package/template/preview/sections/preview.html

@@ -74,14 +74,62 @@
     select.appendChild(option);
   }
 
+  // SessionStorage functions for activeShowcase
+  function saveActiveShowcase(showcaseValue) {
+    try {
+      sessionStorage.setItem('activeShowcaseId', showcaseValue);
+    } catch (e) {
+      console.warn('Could not save showcase to sessionStorage:', e);
+    }
+  }
+
+  function loadActiveShowcase() {
+    try {
+      return sessionStorage.getItem('activeShowcaseId');
+    } catch (e) {
+      console.warn('Could not load showcase from sessionStorage:', e);
+      return null;
+    }
+  }
+
+  function clearActiveShowcase() {
+    try {
+      sessionStorage.removeItem('activeShowcaseId');
+    } catch (e) {
+      console.warn('Could not clear showcase from sessionStorage:', e);
+    }
+  }
+
   select.addEventListener('change', async (e) => {
-    const [sectionName, showcaseId] = e.target.value.split(':');
+    const showcaseValue = e.target.value;
+    const [sectionName, showcaseId] = showcaseValue.split(':');
+
+    // Save the active showcase to sessionStorage
+    saveActiveShowcase(showcaseValue);
+
+    // Render the showcase
     renderShowcase(sectionName, showcaseId);
   });
 
-  // Render initial showcase
-  if (select.value) {
-    const [sectionName, showcaseId] = select.value.split(':');
+  // Restore saved showcase or render first available
+  const savedShowcase = loadActiveShowcase();
+  let initialShowcase = null;
+
+  if (savedShowcase && showCaseOptions.some(option => option.value === savedShowcase)) {
+    // Restore saved showcase if it still exists
+    initialShowcase = savedShowcase;
+    select.value = savedShowcase;
+  } else if (select.options.length > 0) {
+    // Fall back to first option if no saved state or saved showcase no longer exists
+    initialShowcase = select.options[0].value;
+    select.value = initialShowcase;
+    // Save the initial showcase
+    saveActiveShowcase(initialShowcase);
+  }
+
+  // Render the initial showcase
+  if (initialShowcase) {
+    const [sectionName, showcaseId] = initialShowcase.split(':');
     renderShowcase(sectionName, showcaseId);
   }
 </script>

package/template/preview/shared/utils.ts

@@ -1,3 +1,3 @@
 export async function loadModule(path: string): Promise<any> {
-  return import(path);
+  return import(/* @vite-ignore */ path);
 }