Remove unused provider config (#459)

* Updated core types for commerce provider

* Updated bigcommerce provider

* Added util method for provider creation

* Removed unrequired code from saleor

* Updated shopify provider

* Updated providers and local setup

* Updated saleor setup

* Updated swell

* Updated vendure

* Updated swell-js usage

* Removed unrequired import from saleor

.env.template

@@ -1,4 +1,4 @@
-# Available providers: bigcommerce, shopify, swell
+# Available providers: local, bigcommerce, shopify, swell, saleor
 COMMERCE_PROVIDER=
 
 BIGCOMMERCE_STOREFRONT_API_URL=

framework/bigcommerce/index.tsx

@@ -1,36 +1,9 @@
-import type { ReactNode } from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import {
+import { bigcommerceProvider, BigcommerceProvider } from './provider'
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { bigcommerceProvider } from './provider'
-import type { BigcommerceProvider } from './provider'
 
 export { bigcommerceProvider }
 export type { BigcommerceProvider }
 
-export const bigcommerceConfig: CommerceConfig = {
+export const CommerceProvider = getCommerceProvider(bigcommerceProvider)
-  locale: 'en-us',
-  cartCookie: 'bc_cartId',
-}
-
-export type BigcommerceConfig = Partial<CommerceConfig>
-
-export type BigcommerceProps = {
-  children?: ReactNode
-  locale: string
-} & BigcommerceConfig
-
-export function CommerceProvider({ children, ...config }: BigcommerceProps) {
-  return (
-    <CoreCommerceProvider
-      provider={bigcommerceProvider}
-      config={{ ...bigcommerceConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
 
 export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()

framework/commerce/config.js

@@ -8,12 +8,12 @@ const merge = require('deepmerge')
 const prettier = require('prettier')
 
 const PROVIDERS = [
+  'local',
   'bigcommerce',
   'saleor',
   'shopify',
   'swell',
   'vendure',
-  'local',
 ]
 
 function getProviderName() {

framework/commerce/index.tsx

@@ -47,51 +47,60 @@ export type Provider = CommerceConfig & {
   }
 }
 
-export type CommerceProps<P extends Provider> = {
+export type CommerceConfig = {
-  children?: ReactNode
-  provider: P
-  config: CommerceConfig
-}
-
-export type CommerceConfig = Omit<
-  CommerceContextValue<any>,
-  'providerRef' | 'fetcherRef'
->
-
-export type CommerceContextValue<P extends Provider> = {
-  providerRef: MutableRefObject<P>
-  fetcherRef: MutableRefObject<Fetcher>
   locale: string
   cartCookie: string
 }
 
-export function CommerceProvider<P extends Provider>({
+export type CommerceContextValue<P extends Provider> = {
+  providerRef: MutableRefObject<P>
+  fetcherRef: MutableRefObject<Fetcher>
+} & CommerceConfig
+
+export type CommerceProps<P extends Provider> = {
+  children?: ReactNode
+  provider: P
+}
+
+/**
+ * These are the properties every provider should allow when implementing
+ * the core commerce provider
+ */
+export type CommerceProviderProps = {
+  children?: ReactNode
+} & Partial<CommerceConfig>
+
+export function CoreCommerceProvider<P extends Provider>({
   provider,
   children,
-  config,
 }: CommerceProps<P>) {
-  if (!config) {
-    throw new Error('CommerceProvider requires a valid config object')
-  }
-
   const providerRef = useRef(provider)
   // TODO: Remove the fetcherRef
   const fetcherRef = useRef(provider.fetcher)
-  // Because the config is an object, if the parent re-renders this provider
+  // If the parent re-renders this provider will re-render every
-  // will re-render every consumer unless we memoize the config
+  // consumer unless we memoize the config
+  const { locale, cartCookie } = providerRef.current
   const cfg = useMemo(
-    () => ({
+    () => ({ providerRef, fetcherRef, locale, cartCookie }),
-      providerRef,
+    [locale, cartCookie]
-      fetcherRef,
-      locale: config.locale,
-      cartCookie: config.cartCookie,
-    }),
-    [config.locale, config.cartCookie]
   )
 
   return <Commerce.Provider value={cfg}>{children}</Commerce.Provider>
 }
 
+export function getCommerceProvider<P extends Provider>(provider: P) {
+  return function CommerceProvider({
+    children,
+    ...props
+  }: CommerceProviderProps) {
+    return (
+      <CoreCommerceProvider provider={{ ...provider, ...props }}>
+        {children}
+      </CoreCommerceProvider>
+    )
+  }
+}
+
 export function useCommerce<P extends Provider>() {
   return useContext(Commerce) as CommerceContextValue<P>
 }

framework/local/index.tsx

@@ -1,32 +1,9 @@
-import * as React from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import { ReactNode } from 'react'
+import { localProvider, LocalProvider } from './provider'
-import { localProvider } from './provider'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
 
-export const localConfig: CommerceConfig = {
+export { localProvider }
-  locale: 'en-us',
+export type { LocalProvider }
-  cartCookie: 'session',
-}
 
-export function CommerceProvider({
+export const CommerceProvider = getCommerceProvider(localProvider)
-  children,
-  ...config
-}: {
-  children?: ReactNode
-  locale: string
-} & Partial<CommerceConfig>) {
-  return (
-    <CoreCommerceProvider
-      provider={localProvider}
-      config={{ ...localConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
 
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<LocalProvider>()

framework/local/provider.ts

@@ -9,7 +9,6 @@ import { handler as useLogin } from './auth/use-login'
 import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
-export type Provider = typeof localProvider
 export const localProvider = {
   locale: 'en-us',
   cartCookie: 'session',
@@ -19,3 +18,5 @@ export const localProvider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type LocalProvider = typeof localProvider

framework/saleor/api/index.ts

@@ -1,5 +1,5 @@
-import type { CommerceAPIConfig } from '@commerce/api'
+import { CommerceAPI, CommerceAPIConfig, getCommerceApi as commerceApi } from '@commerce/api'
-
+import * as operations from './operations'
 import * as Const from '../const'
 
 if (!Const.API_URL) {
@@ -27,23 +27,12 @@ const config: SaleorConfig = {
   storeChannel: Const.API_CHANNEL,
 }
 
-import {
-  CommerceAPI,
-  getCommerceApi as commerceApi,
-} from '@commerce/api'
-
-import * as operations from './operations'
-
-export interface ShopifyConfig extends CommerceAPIConfig {}
-
 export const provider = { config, operations }
 
 export type Provider = typeof provider
 
 export type SaleorAPI<P extends Provider = Provider> = CommerceAPI<P>
 
-export function getCommerceApi<P extends Provider>(
+export function getCommerceApi<P extends Provider>(customProvider: P = provider as any): SaleorAPI<P> {
-  customProvider: P = provider as any
-): SaleorAPI<P> {
   return commerceApi(customProvider)
 }

framework/saleor/api/operations/get-all-product-paths.ts

@@ -1,10 +1,6 @@
 import type { OperationContext } from '@commerce/api/operations'
-import {
+import { ProductCountableEdge } from '../../schema'
-  GetAllProductPathsQuery,
+import type { Provider, SaleorConfig } from '..'
-  GetAllProductPathsQueryVariables,
-  ProductCountableEdge,
-} from '../../schema'
-import type { ShopifyConfig, Provider, SaleorConfig } from '..'
 
 import { getAllProductsPathsQuery } from '../../utils/queries'
 import fetchAllProducts from '../utils/fetch-all-products'
@@ -13,10 +9,7 @@ export type GetAllProductPathsResult = {
   products: Array<{ path: string }>
 }
 
-export default function getAllProductPathsOperation({
+export default function getAllProductPathsOperation({ commerce }: OperationContext<Provider>) {
-  commerce,
-}: OperationContext<Provider>) {
-
   async function getAllProductPaths({
     query,
     config,
@@ -24,7 +17,7 @@ export default function getAllProductPathsOperation({
   }: {
     query?: string
     config?: SaleorConfig
-    variables?: any 
+    variables?: any
   } = {}): Promise<GetAllProductPathsResult> {
     config = commerce.getConfig(config)
 
@@ -39,7 +32,6 @@ export default function getAllProductPathsOperation({
         path: `/${slug}`,
       })),
     }
-
   }
 
   return getAllProductPaths

framework/saleor/index.tsx

@@ -1,32 +1,9 @@
-import * as React from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import { ReactNode } from 'react'
-
-import { CommerceConfig, CommerceProvider as CoreCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-
 import { saleorProvider, SaleorProvider } from './provider'
-import * as Const from './const'
 
 export { saleorProvider }
 export type { SaleorProvider }
 
-export const saleorConfig: CommerceConfig = {
+export const CommerceProvider = getCommerceProvider(saleorProvider)
-  locale: 'en-us',
-  cartCookie: Const.CHECKOUT_ID_COOKIE,
-}
 
-export type SaleorConfig = Partial<CommerceConfig>
+export const useCommerce = () => useCoreCommerce<SaleorProvider>()
-
-export type SaleorProps = {
-  children?: ReactNode
-  locale: string
-} & SaleorConfig
-
-export function CommerceProvider({ children, ...config }: SaleorProps) {
-  return (
-    <CoreCommerceProvider provider={saleorProvider} config={{ ...saleorConfig, ...config }}>
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()

framework/saleor/provider.ts

@@ -1,3 +1,4 @@
+import { CHECKOUT_ID_COOKIE } from './const'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -14,8 +15,7 @@ import fetcher from './fetcher'
 
 export const saleorProvider = {
   locale: 'en-us',
-  cartCookie: '',
+  cartCookie: CHECKOUT_ID_COOKIE,
-  cartCookieToken: '',
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/shopify/index.tsx

@@ -1,40 +1,9 @@
-import * as React from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import { ReactNode } from 'react'
+import { shopifyProvider, ShopifyProvider } from './provider'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
-import { shopifyProvider } from './provider'
-import type { ShopifyProvider } from './provider'
-import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
 
 export { shopifyProvider }
 export type { ShopifyProvider }
 
-export const shopifyConfig: CommerceConfig = {
+export const CommerceProvider = getCommerceProvider(shopifyProvider)
-  locale: 'en-us',
-  cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-}
-
-export type ShopifyConfig = Partial<CommerceConfig>
-
-export type ShopifyProps = {
-  children?: ReactNode
-  locale: string
-} & ShopifyConfig
-
-export function CommerceProvider({ children, ...config }: ShopifyProps) {
-  return (
-    <CoreCommerceProvider
-      provider={shopifyProvider}
-      config={{ ...shopifyConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
 
 export const useCommerce = () => useCoreCommerce<ShopifyProvider>()

framework/swell/api/utils/fetch-swell-api.ts

@@ -1,7 +1,7 @@
-import { swellConfig } from '../..'
+import swell from '../../swell'
 
 const fetchApi = async (query: string, method: string, variables: [] = []) => {
-  const { swell } = swellConfig
   return swell[query][method](...variables)
 }
+
 export default fetchApi

framework/swell/const.ts

@@ -4,8 +4,6 @@ export const SWELL_CHECKOUT_URL_COOKIE = 'swell_checkoutUrl'
 
 export const SWELL_CUSTOMER_TOKEN_COOKIE = 'swell_customerToken'
 
-export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SWELL_STORE_DOMAIN
-
 export const SWELL_COOKIE_EXPIRE = 30
 
 export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID

framework/swell/fetcher.ts

@@ -1,11 +1,9 @@
 import { Fetcher } from '@commerce/utils/types'
-import { handleFetchResponse } from './utils'
-import { swellConfig } from './index'
 import { CommerceError } from '@commerce/utils/errors'
+import { handleFetchResponse } from './utils'
+import swell from './swell'
 
 const fetcher: Fetcher = async ({ method = 'get', variables, query }) => {
-  const { swell } = swellConfig
-
   async function callSwell() {
     if (Array.isArray(variables)) {
       const arg1 = variables[0]

framework/swell/index.tsx

@@ -1,47 +1,9 @@
-import * as React from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import swell from 'swell-js'
-import { ReactNode } from 'react'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
 import { swellProvider, SwellProvider } from './provider'
-import {
-  SWELL_CHECKOUT_ID_COOKIE,
-  SWELL_STORE_ID,
-  SWELL_PUBLIC_KEY,
-} from './const'
-swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
 
 export { swellProvider }
 export type { SwellProvider }
 
-export const swellConfig: any = {
+export const CommerceProvider = getCommerceProvider(swellProvider)
-  locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
-  swell,
-}
 
-export type SwellConfig = Partial<CommerceConfig>
+export const useCommerce = () => useCoreCommerce<SwellProvider>()
-
-export type SwellProps = {
-  children?: ReactNode
-  locale: string
-} & SwellConfig
-
-export function CommerceProvider({ children, ...config }: SwellProps) {
-  return (
-    <CoreCommerceProvider
-      // TODO: Fix this type
-      provider={swellProvider as any}
-      config={{ ...swellConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()

framework/swell/provider.ts

@@ -1,6 +1,5 @@
 import { Provider } from '@commerce'
-
+import { SWELL_CHECKOUT_ID_COOKIE } from './const'
-import { SWELL_CHECKOUT_URL_COOKIE, STORE_DOMAIN } from './const'
 
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
@@ -15,11 +14,12 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
 import fetcher from './fetcher'
+import swell from './swell'
 
-export const swellProvider: Provider = {
+export const swellProvider: Provider & { swell: any } = {
   locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_URL_COOKIE,
+  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
-  // storeDomain: STORE_DOMAIN,
+  swell,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/swell/swell.ts

@@ -0,0 +1,6 @@
+import swell from 'swell-js'
+import { SWELL_STORE_ID, SWELL_PUBLIC_KEY } from './const'
+
+swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
+
+export default swell

framework/vendure/index.tsx

@@ -1,33 +1,9 @@
-import * as React from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-import { ReactNode } from 'react'
+import { vendureProvider, VendureProvider } from './provider'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { vendureProvider } from './provider'
 
-export const vendureConfig: CommerceConfig = {
+export { vendureProvider }
-  locale: 'en-us',
+export type { VendureProvider }
-  cartCookie: 'session',
-}
 
-export type VendureConfig = Partial<CommerceConfig>
+export const CommerceProvider = getCommerceProvider(vendureProvider)
-
-export type VendureProps = {
-  children?: ReactNode
-  locale: string
-} & VendureConfig
-
-export function CommerceProvider({ children, ...config }: VendureProps) {
-  return (
-    <CoreCommerceProvider
-      provider={vendureProvider}
-      config={{ ...vendureConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
 
 export const useCommerce = () => useCoreCommerce()

framework/vendure/provider.ts

@@ -1,4 +1,3 @@
-import { Provider } from '@commerce'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -10,7 +9,7 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 import { fetcher } from './fetcher'
 
-export const vendureProvider: Provider = {
+export const vendureProvider = {
   locale: 'en-us',
   cartCookie: 'session',
   fetcher,
@@ -19,3 +18,5 @@ export const vendureProvider: Provider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type VendureProvider = typeof vendureProvider