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.