feat(composables): vue 3 compatibility (#1509)

* feat(composables): compatibility with vue 2 and vue 3

* feat(default-theme): refactor price filter to usePriceFilter

* chore: improve tests

.github/workflows/deploy-preview-storefrontcloud.yml

@@ -396,11 +396,11 @@ jobs:
           ../packages/cli/bin/shopware-pwa init --username=${{ secrets.SHOPWARE_ADMIN_USER }} --password=${{ secrets.SHOPWARE_ADMIN_PASSWORD }} --pwaHost=${{ env.PWA_HOST }} --ci --devMode --stage local
       - name: Build test project
         run: |
-          cd ./test-project
-          yarn build
-          cd ..
           node ./scripts/yalcPushPackages.js
           node ./scripts/yalcLinkTestProject.js
+          cd ./test-project
+          yarn
+          yarn build
       - name: Build and publish docker image
         uses: elgohr/Publish-Docker-Github-Action@2.19
         if: github.repository_owner	== 'vuestorefront'

.github/workflows/release-tag.yml

@@ -24,3 +24,5 @@ jobs:
           tag_name: ${{ github.ref }}
           body: |
             Please refer to [CHANGELOG.md](${{ env.REPO_URL }}/blob/master/CHANGELOG.md) for details.
+
+            Migration guides and changes between versions can be found here: https://shopware-pwa-docs.vuestorefront.io/landing/operations/migrations/

api/composables.api.md

@@ -11,7 +11,8 @@ import { BillingAddress } from '@shopware-pwa/commons/interfaces/models/checkout
 import { Breadcrumb } from '@shopware-pwa/commons/interfaces/models/content/cms/CmsPage';
 import { Cart } from '@shopware-pwa/commons/interfaces/models/checkout/cart/Cart';
 import { CmsPage } from '@shopware-pwa/commons/interfaces/models/content/cms/CmsPage';
-import { ComputedRef } from '@vue/composition-api';
+import { ComponentInstance } from 'vue-demi';
+import { ComputedRef } from 'vue-demi';
 import { Country } from '@shopware-pwa/commons/interfaces/models/system/country/Country';
 import { CrossSelling } from '@shopware-pwa/commons/interfaces/models/content/product/Product';
 import { Currency } from '@shopware-pwa/commons/interfaces/models/system/currency/Currency';
@@ -35,7 +36,7 @@ import { PageResolverResult } from '@shopware-pwa/commons/interfaces/models/cont
 import { PaymentMethod } from '@shopware-pwa/commons/interfaces/models/checkout/payment/PaymentMethod';
 import { Product } from '@shopware-pwa/commons/interfaces/models/content/product/Product';
 import { PropertyGroup } from '@shopware-pwa/commons/interfaces/models/content/property/PropertyGroup';
-import { Ref } from '@vue/composition-api';
+import { Ref } from 'vue-demi';
 import { Salutation } from '@shopware-pwa/commons/interfaces/models/system/salutation/Salutation';
 import { SessionContext } from '@shopware-pwa/commons/interfaces/response/SessionContext';
 import { ShippingAddress } from '@shopware-pwa/commons/interfaces/models/checkout/customer/ShippingAddress';
@@ -45,61 +46,36 @@ import { ShopwareSearchParams } from '@shopware-pwa/commons/interfaces/search/Se
 import { Sort } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { StoreNavigationElement } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
 import { StoreNavigationType } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
-import { UnwrapRef } from '@vue/composition-api';
-import { VueConstructor } from 'vue';
-import { WritableComputedRef } from '@vue/composition-api';
+import { UnwrapRef } from 'vue-demi';
+import { WritableComputedRef } from 'vue-demi';
 
 // @beta
-export interface ApplicationVueContext extends VueConstructor {
-    // (undocumented)
-    $cookies?: any;
-    // (undocumented)
-    $i18n?: any;
-    // (undocumented)
-    $instanceStore?: any;
-    // (undocumented)
-    $interceptors?: any;
-    // (undocumented)
-    $isServer?: any;
-    // (undocumented)
-    $route?: any;
-    // (undocumented)
-    $router?: any;
-    // (undocumented)
-    $routing: Routing;
-    // (undocumented)
-    $sharedStore?: any;
-    // (undocumented)
+export type ApplicationVueContext = ComponentInstance & {
     $shopwareApiInstance?: ShopwareApiInstance;
-    // (undocumented)
-    $shopwareDefaults?: any;
-    // (undocumented)
+    shopwareApiInstance?: ShopwareApiInstance;
+    $routing: Routing;
+    routing: Routing;
     $store?: any;
-    // (undocumented)
-    cookies?: any;
-    // (undocumented)
+    store?: any;
+    $route?: any;
+    $router?: any;
+    router?: any;
+    route?: any;
+    $i18n?: any;
     i18n?: any;
-    // (undocumented)
-    instanceStore?: any;
-    // (undocumented)
+    $cookies?: any;
+    cookies?: any;
+    shopwareDefaults?: any;
+    $shopwareDefaults?: any;
+    $interceptors?: any;
     interceptors?: any;
-    // (undocumented)
-    isServer?: any;
-    // (undocumented)
-    route?: any;
-    // (undocumented)
-    router?: any;
-    // (undocumented)
-    routing: Routing;
-    // (undocumented)
+    $sharedStore?: any;
     sharedStore?: any;
-    // (undocumented)
-    shopwareApiInstance?: ShopwareApiInstance;
-    // (undocumented)
-    shopwareDefaults?: any;
-    // (undocumented)
-    store?: any;
-}
+    $instanceStore?: any;
+    instanceStore?: any;
+    $isServer?: any;
+    isServer?: any;
+};
 
 // @beta
 export function createListingComposable<ELEMENTS_TYPE>({ rootContext, searchMethod, searchDefaults, listingKey, }: {

docs/landing/concepts/plugins.md

@@ -106,7 +106,7 @@ Let's put some logic there, and we're getting the cheapest product and displayin
       v-if="product"
       class="cool-promotion-plugin__link"
     >
-      <h3>{{ getName }} in special price! {{ getPrice | price }}</h3>
+      <h3>{{ getName }} in special price! {{ filterPrice(getPrice) }}</h3>
     </nuxt-link>
   </div>
 </template>
@@ -117,38 +117,42 @@ import {
   getProductRegularPrice,
   getProductUrl,
 } from "@shopware-pwa/helpers";
+import { ref, onMounted, computed } from "@vue/composition-api";
+import { usePriceFilter } from "@/logic/usePriceFilter.js";
 
 export default {
   name: "CoolPromotionPlugin",
-  data() {
+  setup() {
+    const product = ref(null);
+
+    onMounted(async () => {
+      // let's get the cheapest product
+      const productsResult = await getProducts({
+        sort: {
+          field: "price",
+          desc: false,
+        },
+        pagination: {
+          limit: 1,
+        },
+      });
+      product.value = productsResult.data[0];
+    });
+
+    const getName = computed(() => getProductName({ product: product.value }));
+    const getProductLink = computed(() => getProductUrl(product.value));
+    const getPrice = computed(() =>
+      getProductRegularPrice({ product: product.value })
+    );
+
     return {
-      product: null,
+      product,
+      getName,
+      getProductLink,
+      getPrice,
+      filterPrice: usePriceFilter(),
     };
   },
-  async mounted() {
-    // let's get the cheapest product
-    const productsResult = await getProducts({
-      sort: {
-        field: "price",
-        desc: false,
-      },
-      pagination: {
-        limit: 1,
-      },
-    });
-    this.product = productsResult.data[0];
-  },
-  computed: {
-    getName() {
-      return getProductName({ product: this.product });
-    },
-    getProductLink() {
-      return getProductUrl(this.product);
-    },
-    getPrice() {
-      return getProductRegularPrice({ product: this.product });
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>
@@ -190,7 +194,7 @@ Okay, so how we can allow other plugins to display as well if we're in `top-head
       v-if="product"
       class="cool-promotion-plugin__link"
     >
-      <h3>{{ getName }} in special price! {{ getPrice | price }}</h3>
+      <h3>{{ getName }} in special price! {{ getPrice }}</h3>
     </nuxt-link>
     <slot />
   </div>
@@ -291,7 +295,7 @@ so now, visiting `/our-custom-route/magic-id` you should see:
 
 When you're developing a payment or shipping plugin and you need custom validation - we got you!
 
-Since the very cool validation library called [vuelidate](https://vuelidate.js.org/) is used, our life is simpler. 
+Since the very cool validation library called [vuelidate](https://vuelidate.js.org/) is used, our life is simpler.
 Several built-in validaton rules are at hand, and writing a custom rule should not be a big deal as well (see how to do it [here](https://vuelidate-next.netlify.app/custom_validators.html)).
 
 So let's say we want to enable the "Cash on delivery" method only when the customer is over 18 years old.