@lightspeed/crane 1.4.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -26,10 +26,12 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild",
+    "link": "npm link",
     "type-check": "tsc --noEmit",
-    "lint": "eslint \"./{src,tests}/**/*.{js,ts}\"",
+    "lint": "eslint \"./**/*.{js,ts}\"",
     "lint:all": "yarn lint && yarn type-check",
-    "test": "jest"
+    "test": "jest",
+    "test:end-to-end": "jest end-to-end.test.ts --no-coverage"
   },
   "engines": {
     "node": "22"
@@ -62,6 +64,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
+    "@lightspeed/crane-api": "1.0.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/prompts": "^2.4.2",
     "@vitejs/plugin-vue": "^6.0.1",

package/template/footers/example-footer/ExampleFooter.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useBackgroundElementDesign } from '@lightspeed/crane';
+import { useBackgroundElementDesign } from '@lightspeed/crane-api';
 import ReportAbuse from './component/ReportAbuse.vue';
 import MadeWith from './component/MadeWith.vue';
 import { Design } from './type.ts';

package/template/footers/example-footer/client.ts

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import ExampleFooter from './ExampleFooter.vue';
 import { Content, Design } from './type.ts';
 

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

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();

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

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();

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

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();

package/template/footers/example-footer/entity/color.ts

@@ -1,4 +1,4 @@
 export enum ColorType {
-    SOLID = 'solid',
-    GRADIENT = 'gradient',
+  SOLID = 'solid',
+  GRADIENT = 'gradient',
 }

package/template/footers/example-footer/server.ts

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import ExampleFooter from './ExampleFooter.vue';
 import { Content, Design } from './type.ts';
 

package/template/headers/example-header/client.ts

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import ExampleHeader from './ExampleHeader.vue';
 import { Content, Design } from './type.ts';
 

package/template/headers/example-header/component/Account.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { Design } from '../type.ts';
 import accountIcon from '../assets/account_icon.svg';
 

package/template/headers/example-header/component/Cart.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Design } from '../type.ts';
 

package/template/headers/example-header/component/CategoriesDropdown.vue

@@ -53,7 +53,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { Design } from '../type.ts';
 
 interface Props {

package/template/headers/example-header/component/Logo.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLogoElementContent, useLogoElementDesign } from '@lightspeed/crane';
+import { useLogoElementContent, useLogoElementDesign } from '@lightspeed/crane-api';
 import { computed } from 'vue';
 
 function getColor(color: Color | undefined) {

package/template/headers/example-header/component/NavigationMenu.vue

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { useNavigationMenuElementContent } from '@lightspeed/crane';
+import { useNavigationMenuElementContent } from '@lightspeed/crane-api';
 import CategoriesDropdown from './CategoriesDropdown.vue';
 
 interface ActiveItem {

package/template/headers/example-header/component/SearchForm.vue

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useInstantsiteJsApi } from '@lightspeed/crane';
+import { useInstantsiteJsApi } from '@lightspeed/crane-api';
 
 const instantsiteJsApi = useInstantsiteJsApi();
 const searchInputRef = ref<HTMLInputElement>();

package/template/headers/example-header/server.ts

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import ExampleHeader from './ExampleHeader.vue';
 import { Content, Design } from './type.ts';
 

package/template/index.d.ts

@@ -1 +1 @@
-/// <reference types="@lightspeed/crane/types" />
+/// <reference types="@lightspeed/crane-api" />

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

@@ -6,5 +6,5 @@
 </template>
 
 <script setup lang="ts">
-import { CatalogLayoutSlot as Slot } from '@lightspeed/crane';
+import { CatalogLayoutSlot as Slot } from '@lightspeed/crane-api';
 </script>

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

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import CustomBottomBar from './CustomBottomBar.vue';
 import { Content, Design } from '../../type.ts';
 

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

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import CustomBottomBar from './CustomBottomBar.vue';
 import { Content, Design } from '../../type.ts';
 

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

@@ -7,5 +7,5 @@
 </template>
 
 <script setup lang="ts">
-import { CategoryLayoutSlot as Slot } from '@lightspeed/crane';
+import { CategoryLayoutSlot as Slot } from '@lightspeed/crane-api';
 </script>

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

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

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

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

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

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { HTMLAttributes } from 'vue';
-import { ProductLayoutSlot as Slot } from '@lightspeed/crane';
+import { ProductLayoutSlot as Slot } from '@lightspeed/crane-api';
 
 interface Props {
   availableProductClasses?: HTMLAttributes['class'],

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

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

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

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

package/template/package.json

@@ -2,15 +2,19 @@
   "name": "__placeholder__",
   "private": true,
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "build": "crane build",
     "deploy": "crane build && crane deploy"
   },
   "dependencies": {
-    "@lightspeed/crane": "latest",
+    "@lightspeed/crane-api": "latest",
     "@lightspeed/eslint-config-crane": "latest",
-    "vue": "^3.4.0",
-    "eslint": "9.33.0"
+    "@swc/core": "^1.15.1",
+    "eslint": "9.33.0",
+    "linkedom": "^0.18.0",
+    "module-from-string": "^3.3.1",
+    "vue": "^3.4.0"
   },
   "engines": {
     "node": ">=22"

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

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

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

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

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

@@ -1,4 +1,4 @@
-import { StorePageConfiguration } from '@lightspeed/crane';
+import { StorePageConfiguration } from '@lightspeed/crane-api';
 
 export default {
   sections: [

package/template/preview/sections/preview.html

@@ -14,7 +14,7 @@
 
   <style>
     .top-bar {
-      position: fixed;
+      position: sticky;
       top: 0;
       left: 0;
       right: 0;