@moonbase.sh/vue 0.1.41 → 0.1.43

package/dist/index.cjs

@@ -32,11 +32,11 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_api_client2 = require("@moonbase.sh/api-client");
+var import_vue7 = require("vue");
 
 // src/context.ts
 var import_api_client = require("@moonbase.sh/api-client");
 var import_uuid = require("uuid");
-var import_vue = require("vue");
 
 // src/symbols.ts
 var storefrontKey = Symbol("storefront");
@@ -55,35 +55,36 @@ function debounce(func, waitMs = 100) {
 
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
-  constructor(configuration, client) {
+  constructor(configuration, client, stateFactory) {
     this.configuration = configuration;
     this.client = client;
-    this.currentUser = (0, import_vue.ref)(null);
-    this.loadedUser = (0, import_vue.ref)(false);
+    this.stateFactory = stateFactory;
     this.debouncedPushOrderContent = debounce((order) => this.client.orders.pushContent(order), 500);
+    this.currentUser = stateFactory("moonbase_user", null);
+    this.loadedUser = stateFactory("moonbase_loaded_user", false);
     if (typeof window === "undefined") {
-      this.currentOrder = (0, import_vue.ref)({
+      this.currentOrder = stateFactory("moonbase_current_order", {
         id: (0, import_uuid.v4)(),
         status: import_api_client.OrderStatus.Open,
         currency: "",
         items: [],
         couponsApplied: []
       });
-      this.storefront = (0, import_vue.ref)({
+      this.storefront = stateFactory("moonbase_storefront", {
         suggestedCurrency: "",
         bundles: [],
         products: []
       });
-      this.loadedStorefront = (0, import_vue.ref)(false);
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", false);
       return;
     }
     window.addEventListener("storage", (event) => this.handleStorageUpdate(event));
     const cachedOrderJson = localStorage.getItem("moonbase_session");
     if (cachedOrderJson) {
-      this.currentOrder = (0, import_vue.ref)(JSON.parse(cachedOrderJson));
+      this.currentOrder = stateFactory("moonbase_current_order", JSON.parse(cachedOrderJson));
       const _1 = this.refreshOrder();
     } else {
-      this.currentOrder = (0, import_vue.ref)({
+      this.currentOrder = stateFactory("moonbase_current_order", {
         id: (0, import_uuid.v4)(),
         status: import_api_client.OrderStatus.Open,
         currency: "",
@@ -94,15 +95,15 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
     const cachedStorefrontJson = localStorage.getItem(_StorefrontContextImpl.storefrontKey);
     if (cachedStorefrontJson) {
-      this.storefront = (0, import_vue.ref)(JSON.parse(cachedStorefrontJson));
-      this.loadedStorefront = (0, import_vue.ref)(true);
+      this.storefront = stateFactory("moonbase_storefront", JSON.parse(cachedStorefrontJson));
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", true);
     } else {
-      this.storefront = (0, import_vue.ref)({
+      this.storefront = stateFactory("moonbase_storefront", {
         suggestedCurrency: "",
         bundles: [],
         products: []
       });
-      this.loadedStorefront = (0, import_vue.ref)(false);
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", false);
     }
     const _2 = this.updateStorefront();
     const _3 = this.updateUser();
@@ -187,51 +188,51 @@ var StorefrontContextImpl = _StorefrontContextImpl;
 __reExport(src_exports, require("@moonbase.sh/api-client"), module.exports);
 
 // src/composables/useBundle.ts
-var import_vue2 = require("vue");
+var import_vue = require("vue");
 function useBundle(bundleId) {
-  const storefront = (0, import_vue2.inject)(storefrontKey);
+  const storefront = (0, import_vue.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
-  return (0, import_vue2.computed)(() => storefront.storefront.value.bundles.find((b) => b.id === bundleId) || null);
+  return (0, import_vue.computed)(() => storefront.storefront.value.bundles.find((b) => b.id === bundleId) || null);
 }
 
 // src/composables/useBundles.ts
-var import_vue3 = require("vue");
+var import_vue2 = require("vue");
 function useBundles() {
-  const storefront = (0, import_vue3.inject)(storefrontKey);
+  const storefront = (0, import_vue2.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
-  return (0, import_vue3.computed)(() => storefront.storefront.value.bundles);
+  return (0, import_vue2.computed)(() => storefront.storefront.value.bundles);
 }
 
 // src/composables/useProduct.ts
-var import_vue4 = require("vue");
+var import_vue3 = require("vue");
 function useProduct(productId) {
-  const storefront = (0, import_vue4.inject)(storefrontKey);
+  const storefront = (0, import_vue3.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
-  return (0, import_vue4.computed)(() => storefront.storefront.value.products.find((p) => p.id === productId) || null);
+  return (0, import_vue3.computed)(() => storefront.storefront.value.products.find((p) => p.id === productId) || null);
 }
 
 // src/composables/useProducts.ts
-var import_vue5 = require("vue");
+var import_vue4 = require("vue");
 function useProducts() {
-  const storefront = (0, import_vue5.inject)(storefrontKey);
+  const storefront = (0, import_vue4.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
-  return (0, import_vue5.computed)(() => storefront.storefront.value.products);
+  return (0, import_vue4.computed)(() => storefront.storefront.value.products);
 }
 
 // src/composables/useCart.ts
-var import_vue6 = require("vue");
+var import_vue5 = require("vue");
 function useCart() {
-  const storefront = (0, import_vue6.inject)(storefrontKey);
+  const storefront = (0, import_vue5.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
   return {
-    items: (0, import_vue6.computed)(() => storefront.currentOrder.value.items),
-    currency: (0, import_vue6.computed)(() => storefront.currentOrder.value.currency || storefront.storefront.value.suggestedCurrency),
-    total: (0, import_vue6.computed)(() => {
+    items: (0, import_vue5.computed)(() => storefront.currentOrder.value.items),
+    currency: (0, import_vue5.computed)(() => storefront.currentOrder.value.currency || storefront.storefront.value.suggestedCurrency),
+    total: (0, import_vue5.computed)(() => {
       const currency = storefront.currentOrder.value.currency || storefront.storefront.value.suggestedCurrency;
       const total = storefront.currentOrder.value.items.reduce((agg, item) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
@@ -305,9 +306,9 @@ function useCart() {
 }
 
 // src/composables/useAuth.ts
-var import_vue7 = require("vue");
+var import_vue6 = require("vue");
 function useAuth() {
-  const storefront = (0, import_vue7.inject)(storefrontKey);
+  const storefront = (0, import_vue6.inject)(storefrontKey);
   if (!storefront)
     throw new Error("No storefront configured");
   return {
@@ -357,11 +358,16 @@ function useAuth() {
 }
 
 // src/index.ts
-function createStorefront(endpoint) {
+function createStorefront(endpoint, stateFactory) {
   const configuration = {
     endpoint
   };
-  return new StorefrontContextImpl(configuration, new import_api_client2.MoonbaseClient(configuration));
+  return new StorefrontContextImpl(
+    configuration,
+    new import_api_client2.MoonbaseClient(configuration),
+    // Default to vue refs but allow stuff like Nuxt useState wrappers
+    stateFactory || ((_, state) => (0, import_vue7.ref)(state))
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -1,10 +1,10 @@
 import { Storefront, Order, User, MoonbaseClient, StorefrontBundle, StorefrontProduct, PricingVariation, OpenLineItem } from '@moonbase.sh/api-client';
 export * from '@moonbase.sh/api-client';
 import * as vue from 'vue';
-import { Ref, App, InjectionKey } from 'vue';
+import { Plugin, Ref, App, InjectionKey } from 'vue';
 import { Address } from '@moonbase.sh/api-client/src';
 
-interface StorefrontContext {
+interface StorefrontContext extends Pick<Plugin, keyof Plugin> {
     storefront: Ref<Storefront>;
     loadedStorefront: Ref<boolean>;
     currentOrder: Ref<Order>;
@@ -22,6 +22,7 @@ interface StorefrontContext {
      */
     install(app: App): any;
 }
+type StateFactory = (key: string, state: any) => Ref<typeof state>;
 
 declare function useBundle(bundleId: string): Ref<StorefrontBundle | null>;
 
@@ -103,6 +104,6 @@ interface Cart {
     items: CartItem[];
 }
 type CartItem = OpenLineItem & {};
-declare function createStorefront(endpoint: string): StorefrontContext;
+declare function createStorefront(endpoint: string, stateFactory?: StateFactory): StorefrontContext;
 
-export { Cart, CartItem, createStorefront, storefrontKey, useAuth, useBundle, useBundles, useCart, useProduct, useProducts };
+export { type Cart, type CartItem, createStorefront, storefrontKey, useAuth, useBundle, useBundles, useCart, useProduct, useProducts };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { Storefront, Order, User, MoonbaseClient, StorefrontBundle, StorefrontProduct, PricingVariation, OpenLineItem } from '@moonbase.sh/api-client';
 export * from '@moonbase.sh/api-client';
 import * as vue from 'vue';
-import { Ref, App, InjectionKey } from 'vue';
+import { Plugin, Ref, App, InjectionKey } from 'vue';
 import { Address } from '@moonbase.sh/api-client/src';
 
-interface StorefrontContext {
+interface StorefrontContext extends Pick<Plugin, keyof Plugin> {
     storefront: Ref<Storefront>;
     loadedStorefront: Ref<boolean>;
     currentOrder: Ref<Order>;
@@ -22,6 +22,7 @@ interface StorefrontContext {
      */
     install(app: App): any;
 }
+type StateFactory = (key: string, state: any) => Ref<typeof state>;
 
 declare function useBundle(bundleId: string): Ref<StorefrontBundle | null>;
 
@@ -103,6 +104,6 @@ interface Cart {
     items: CartItem[];
 }
 type CartItem = OpenLineItem & {};
-declare function createStorefront(endpoint: string): StorefrontContext;
+declare function createStorefront(endpoint: string, stateFactory?: StateFactory): StorefrontContext;
 
-export { Cart, CartItem, createStorefront, storefrontKey, useAuth, useBundle, useBundles, useCart, useProduct, useProducts };
+export { type Cart, type CartItem, createStorefront, storefrontKey, useAuth, useBundle, useBundles, useCart, useProduct, useProducts };

package/dist/index.js

@@ -1,10 +1,10 @@
 // src/index.ts
 import { MoonbaseClient } from "@moonbase.sh/api-client";
+import { ref } from "vue";
 
 // src/context.ts
 import { NotAuthenticatedError, OrderStatus } from "@moonbase.sh/api-client";
 import { v4 as uuidv4 } from "uuid";
-import { ref } from "vue";
 
 // src/symbols.ts
 var storefrontKey = Symbol("storefront");
@@ -23,35 +23,36 @@ function debounce(func, waitMs = 100) {
 
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
-  constructor(configuration, client) {
+  constructor(configuration, client, stateFactory) {
     this.configuration = configuration;
     this.client = client;
-    this.currentUser = ref(null);
-    this.loadedUser = ref(false);
+    this.stateFactory = stateFactory;
     this.debouncedPushOrderContent = debounce((order) => this.client.orders.pushContent(order), 500);
+    this.currentUser = stateFactory("moonbase_user", null);
+    this.loadedUser = stateFactory("moonbase_loaded_user", false);
     if (typeof window === "undefined") {
-      this.currentOrder = ref({
+      this.currentOrder = stateFactory("moonbase_current_order", {
         id: uuidv4(),
         status: OrderStatus.Open,
         currency: "",
         items: [],
         couponsApplied: []
       });
-      this.storefront = ref({
+      this.storefront = stateFactory("moonbase_storefront", {
         suggestedCurrency: "",
         bundles: [],
         products: []
       });
-      this.loadedStorefront = ref(false);
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", false);
       return;
     }
     window.addEventListener("storage", (event) => this.handleStorageUpdate(event));
     const cachedOrderJson = localStorage.getItem("moonbase_session");
     if (cachedOrderJson) {
-      this.currentOrder = ref(JSON.parse(cachedOrderJson));
+      this.currentOrder = stateFactory("moonbase_current_order", JSON.parse(cachedOrderJson));
       const _1 = this.refreshOrder();
     } else {
-      this.currentOrder = ref({
+      this.currentOrder = stateFactory("moonbase_current_order", {
         id: uuidv4(),
         status: OrderStatus.Open,
         currency: "",
@@ -62,15 +63,15 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
     const cachedStorefrontJson = localStorage.getItem(_StorefrontContextImpl.storefrontKey);
     if (cachedStorefrontJson) {
-      this.storefront = ref(JSON.parse(cachedStorefrontJson));
-      this.loadedStorefront = ref(true);
+      this.storefront = stateFactory("moonbase_storefront", JSON.parse(cachedStorefrontJson));
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", true);
     } else {
-      this.storefront = ref({
+      this.storefront = stateFactory("moonbase_storefront", {
         suggestedCurrency: "",
         bundles: [],
         products: []
       });
-      this.loadedStorefront = ref(false);
+      this.loadedStorefront = stateFactory("moonbase_loaded_storefront", false);
     }
     const _2 = this.updateStorefront();
     const _3 = this.updateUser();
@@ -325,11 +326,16 @@ function useAuth() {
 }
 
 // src/index.ts
-function createStorefront(endpoint) {
+function createStorefront(endpoint, stateFactory) {
   const configuration = {
     endpoint
   };
-  return new StorefrontContextImpl(configuration, new MoonbaseClient(configuration));
+  return new StorefrontContextImpl(
+    configuration,
+    new MoonbaseClient(configuration),
+    // Default to vue refs but allow stuff like Nuxt useState wrappers
+    stateFactory || ((_, state) => ref(state))
+  );
 }
 export {
   createStorefront,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moonbase.sh/vue",
   "type": "module",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "description": "Package to let you build vue.js storefronts with Moonbase.sh as payment and delivery provider",
   "author": "Tobias Lønnerød Madsen <m@dsen.tv>",
   "license": "MIT",
@@ -16,16 +16,16 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.5.0",
-    "uuid": "^9.0.0",
-    "@moonbase.sh/api-client": "0.1.41"
+    "@vue/devtools-api": "^6.5.1",
+    "uuid": "^9.0.1",
+    "@moonbase.sh/api-client": "0.1.43"
   },
   "devDependencies": {
-    "@types/uuid": "^9.0.1",
-    "rimraf": "^5.0.0",
-    "tsup": "^7.1.0",
+    "@types/uuid": "^9.0.7",
+    "rimraf": "^5.0.5",
+    "tsup": "^7.2.0",
     "typescript": "~5.1.6",
-    "vue": "^3.3.4"
+    "vue": "^3.3.9"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",