4
0
forked from crowetic/commerce

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
This commit is contained in:
Luis Alvarez D 2021-08-30 22:32:20 -05:00 committed by GitHub
parent 24dd291be2
commit a94f049f0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 92 additions and 264 deletions

View File

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

View File

@ -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 { bigcommerceProvider }
export type { 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>() export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()

View File

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

View File

@ -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 locale: string
cartCookie: 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, provider,
children, children,
config,
}: CommerceProps<P>) { }: CommerceProps<P>) {
if (!config) {
throw new Error('CommerceProvider requires a valid config object')
}
const providerRef = useRef(provider) const providerRef = useRef(provider)
// TODO: Remove the fetcherRef // TODO: Remove the fetcherRef
const fetcherRef = useRef(provider.fetcher) 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( 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> 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>() { export function useCommerce<P extends Provider>() {
return useContext(Commerce) as CommerceContextValue<P> return useContext(Commerce) as CommerceContextValue<P>
} }

View File

@ -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>()

View File

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

View File

@ -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' import * as Const from '../const'
if (!Const.API_URL) { if (!Const.API_URL) {
@ -27,23 +27,12 @@ const config: SaleorConfig = {
storeChannel: Const.API_CHANNEL, 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 const provider = { config, operations }
export type Provider = typeof provider export type Provider = typeof provider
export type SaleorAPI<P extends Provider = Provider> = CommerceAPI<P> 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) return commerceApi(customProvider)
} }

View File

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

View File

@ -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 { saleorProvider, SaleorProvider } from './provider'
import * as Const from './const'
export { saleorProvider } export { saleorProvider }
export type { 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()

View File

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

View File

@ -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 { shopifyProvider }
export type { 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>() export const useCommerce = () => useCoreCommerce<ShopifyProvider>()

View File

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

View File

@ -4,8 +4,6 @@ export const SWELL_CHECKOUT_URL_COOKIE = 'swell_checkoutUrl'
export const SWELL_CUSTOMER_TOKEN_COOKIE = 'swell_customerToken' 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_COOKIE_EXPIRE = 30
export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID

View File

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

View File

@ -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 { 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 { swellProvider }
export type { 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()

View File

@ -1,6 +1,5 @@
import { Provider } from '@commerce' 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 useCart } from './cart/use-cart'
import { handler as useAddItem } from './cart/use-add-item' 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 { handler as useSignup } from './auth/use-signup'
import fetcher from './fetcher' import fetcher from './fetcher'
import swell from './swell'
export const swellProvider: Provider = { export const swellProvider: Provider & { swell: any } = {
locale: 'en-us', locale: 'en-us',
cartCookie: SWELL_CHECKOUT_URL_COOKIE, cartCookie: SWELL_CHECKOUT_ID_COOKIE,
// storeDomain: STORE_DOMAIN, swell,
fetcher, fetcher,
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem }, cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
customer: { useCustomer }, customer: { useCustomer },

6
framework/swell/swell.ts Normal file
View File

@ -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

View File

@ -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() export const useCommerce = () => useCoreCommerce()

View File

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