refactor: rename MakeswiftClient

The new name better represents what the object is a client of: the host
API which lives at `/api/makeswift/[...makeswift]` as opposed to the
Makeswift API itself (i.e., api.makeswift.com).

.changeset/stupid-eels-exist.md

@@ -0,0 +1,5 @@
+---
+'@makeswift/runtime': patch
+---
+
+Rename internal `MakeswiftClient` to `MakeswiftHostApiClient`.

packages/runtime/src/api/react.tsx

@@ -57,7 +57,7 @@ export type MakeswiftClientOptions = {
  * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime
  * snapshot for use in the builder, not the lives pages.
  */
-export class MakeswiftClient {
+export class MakeswiftHostApiClient {
   graphqlClient: GraphQLClient
   makeswiftApiClient: MakeswiftApiClient.Store
   subscribe: MakeswiftApiClient.Store['subscribe']
@@ -252,17 +252,22 @@ export class MakeswiftClient {
   }
 }
 
-const Context = createContext(new MakeswiftClient({ uri: 'https://api.makeswift.com/graphql' }))
+const Context = createContext(
+  new MakeswiftHostApiClient({ uri: 'https://api.makeswift.com/graphql' }),
+)
 
-export function useMakeswiftClient(): MakeswiftClient {
+export function useMakeswiftHostApiClient(): MakeswiftHostApiClient {
   return useContext(Context)
 }
 
-type MakeswiftProviderProps = {
-  client: MakeswiftClient
+type MakeswiftHostApiClientProviderProps = {
+  client: MakeswiftHostApiClient
   children: ReactNode
 }
 
-export function MakeswiftProvider({ client, children }: MakeswiftProviderProps) {
+export function MakeswiftHostApiClientProvider({
+  client,
+  children,
+}: MakeswiftHostApiClientProviderProps) {
   return <Context.Provider value={client}>{children}</Context.Provider>
 }

packages/runtime/src/components/builtin/Form/Form.tsx

@@ -50,7 +50,7 @@ import { BoxModelHandle, getBox } from '../../../box-model'
 import { PropControllersHandle } from '../../../state/modules/prop-controller-handles'
 import { DescriptorsPropControllers } from '../../../prop-controllers/instances'
 import { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'
-import { useMakeswiftClient } from '../../../api/react'
+import { useMakeswiftHostApiClient } from '../../../api/react'
 import { ResponsiveColor } from '../../../runtimes/react/controls'
 import { cx } from '@emotion/css'
 import { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'
@@ -278,7 +278,7 @@ const Form = forwardRef(function Form(
   const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])
   const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])
   const table = useTable(tableId ?? null)
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const [refEl, setRefEl] = useState<HTMLElement | null>(null)
   const [propControllers, setPropControllers] =
     useState<DescriptorsPropControllers<Descriptors> | null>(null)

packages/runtime/src/components/page/Page.tsx

@@ -8,7 +8,7 @@ import Head from 'next/head'
 import { BodySnippet } from './BodySnippet'
 import { DocumentReference } from '../../runtimes/react'
 import { createDocumentReference } from '../../state/react-page'
-import { useMakeswiftClient } from '../../api/react'
+import { useMakeswiftHostApiClient } from '../../api/react'
 import { useIsInBuilder } from '../../react'
 import deepEqual from '../../utils/deepEqual'
 import { MakeswiftPageDocument } from '../../next'
@@ -247,7 +247,7 @@ export function Page({ document: page }: Props): JSX.Element {
 }
 
 function useCachedPage(pageId: string | null): PageType | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const getSnapshot = () => (pageId == null ? null : client.readPage(pageId))
 
   const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)
@@ -256,7 +256,7 @@ function useCachedPage(pageId: string | null): PageType | null {
 }
 
 function useCachedSite(siteId: string | null): Site | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))
 
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)

packages/runtime/src/next/components/page.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react'
 
 import { RuntimeProvider } from '../../runtimes/react'
 import { Page as PageMeta } from '../../components/page'
-import { MakeswiftClient } from '../../api/react'
+import { MakeswiftHostApiClient } from '../../api/react'
 import { MakeswiftPageSnapshot } from '../client'
 
 export type PageProps = {
@@ -12,7 +12,7 @@ export type PageProps = {
 export const Page = memo(({ snapshot }: PageProps) => {
   const client = useMemo(
     () =>
-      new MakeswiftClient({
+      new MakeswiftHostApiClient({
         uri: new URL('graphql', snapshot.apiOrigin).href,
         cacheData: snapshot.cacheData,
         localizedResourcesMap: snapshot.localizedResourcesMap,

packages/runtime/src/runtimes/react/components/LiveProvider.tsx

@@ -2,11 +2,11 @@ import { ReactNode, useMemo } from 'react'
 
 import { StoreContext } from '../hooks/use-store'
 import * as ReactPage from '../../../state/react-page'
-import { MakeswiftProvider, MakeswiftClient } from '../../../api/react'
+import { MakeswiftHostApiClientProvider, MakeswiftHostApiClient } from '../../../api/react'
 import { useReactRuntime } from '../../../next/context/react-runtime'
 
 type Props = {
-  client: MakeswiftClient
+  client: MakeswiftHostApiClient
   rootElements?: Map<string, ReactPage.Element>
   children?: ReactNode
 }
@@ -20,7 +20,7 @@ export default function LiveProvider({ client, children, rootElements }: Props):
 
   return (
     <StoreContext.Provider value={store}>
-      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>
+      <MakeswiftHostApiClientProvider client={client}>{children}</MakeswiftHostApiClientProvider>
     </StoreContext.Provider>
   )
 }

packages/runtime/src/runtimes/react/components/PreviewProvider.tsx

@@ -6,12 +6,12 @@ import { ReactRuntime } from '../react-runtime'
 import { StoreContext } from '../hooks/use-store'
 import * as ReactBuilderPreview from '../../../state/react-builder-preview'
 import * as ReactPage from '../../../state/react-page'
-import { MakeswiftProvider, MakeswiftClient } from '../../../api/react'
+import { MakeswiftHostApiClientProvider, MakeswiftHostApiClient } from '../../../api/react'
 import { registerDocumentEffect } from '../../../state/actions'
 import { useReactRuntime } from '../../../next/context/react-runtime'
 
 type Props = {
-  client: MakeswiftClient
+  client: MakeswiftHostApiClient
   rootElements?: Map<string, ReactPage.Element>
   children?: ReactNode
 }
@@ -43,7 +43,7 @@ export default function PreviewProvider({ client, children, rootElements }: Prop
 
   return (
     <StoreContext.Provider value={store}>
-      <MakeswiftProvider client={client}>{children}</MakeswiftProvider>
+      <MakeswiftHostApiClientProvider client={client}>{children}</MakeswiftHostApiClientProvider>
     </StoreContext.Provider>
   )
 }

packages/runtime/src/runtimes/react/components/RuntimeProvider.tsx

@@ -1,10 +1,10 @@
 import { ReactNode, lazy } from 'react'
-import { MakeswiftClient } from '../../../api/react'
+import { MakeswiftHostApiClient } from '../../../api/react'
 import { Element as ReactPageElement } from '../../../state/react-page'
 import { ReactRuntime } from '../react-runtime'
 
 type RuntimeProviderProps = {
-  client: MakeswiftClient
+  client: MakeswiftHostApiClient
   preview: boolean
   rootElements?: Map<string, ReactPageElement>
   children?: ReactNode

packages/runtime/src/runtimes/react/hooks/makeswift-api.ts

@@ -11,10 +11,10 @@ import {
   Table,
   Typography,
 } from '../../../api'
-import { useMakeswiftClient } from '../../../api/react'
+import { useMakeswiftHostApiClient } from '../../../api/react'
 
 export function useSwatch(swatchId: string | null): Swatch | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readSwatch = () => (swatchId == null ? null : client.readSwatch(swatchId))
   const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch)
 
@@ -26,7 +26,7 @@ export function useSwatch(swatchId: string | null): Swatch | null {
 }
 
 export function useSwatches(swatchIds: string[]): (Swatch | null)[] {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const lastSnapshot = useRef<(Swatch | null)[]>()
 
   function getSnapshot() {
@@ -53,7 +53,7 @@ export function useSwatches(swatchIds: string[]): (Swatch | null)[] {
 }
 
 export function useFile(fileId: string | null): File | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readFile = () => (fileId == null ? null : client.readFile(fileId))
   const file = useSyncExternalStore(client.subscribe, readFile, readFile)
 
@@ -65,7 +65,7 @@ export function useFile(fileId: string | null): File | null {
 }
 
 export function useFiles(fileIds: string[]): (File | null)[] {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const lastSnapshot = useRef<(File | null)[]>()
 
   function getSnapshot() {
@@ -92,7 +92,7 @@ export function useFiles(fileIds: string[]): (File | null)[] {
 }
 
 export function useTypography(typographyId: string | null): Typography | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readTypography = () => (typographyId == null ? null : client.readTypography(typographyId))
   const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography)
 
@@ -104,7 +104,7 @@ export function useTypography(typographyId: string | null): Typography | null {
 }
 
 export function useGlobalElement(globalElementId: string | null): GlobalElement | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readGlobalElement = () =>
     globalElementId == null ? null : client.readGlobalElement(globalElementId)
   const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement)
@@ -119,7 +119,7 @@ export function useGlobalElement(globalElementId: string | null): GlobalElement
 export function useLocalizedGlobalElement(
   globalElementId: string | null,
 ): LocalizedGlobalElement | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readLocalizedGlobalElement = () =>
     globalElementId == null ? null : client.readLocalizedGlobalElement(globalElementId)
   const localizedGlobalElement = useSyncExternalStore(
@@ -138,7 +138,7 @@ export function useLocalizedGlobalElement(
 }
 
 export function usePagePathnameSlice(pageId: string | null): PagePathnameSlice | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readPagePathnameSlice = () => (pageId == null ? null : client.readPagePathnameSlice(pageId))
   const pagePathnameSlice = useSyncExternalStore(
     client.subscribe,
@@ -154,7 +154,7 @@ export function usePagePathnameSlice(pageId: string | null): PagePathnameSlice |
 }
 
 export function useTable(tableId: string | null): Table | null {
-  const client = useMakeswiftClient()
+  const client = useMakeswiftHostApiClient()
   const readTable = () => (tableId == null ? null : client.readTable(tableId))
   const table = useSyncExternalStore(client.subscribe, readTable, readTable)
 

packages/runtime/src/state/react-builder-preview.ts

@@ -51,7 +51,7 @@ import { ActionTypes } from './actions'
 import { createPropController } from '../prop-controllers/instances'
 import { PropController } from '../prop-controllers/base'
 import { serializeControls } from '../builder'
-import { MakeswiftClient } from '../api/react'
+import { MakeswiftHostApiClient } from '../api/react'
 import { ElementImperativeHandle } from '../runtimes/react/element-imperative-handle'
 
 export type { Operation } from './modules/read-write-documents'
@@ -460,7 +460,7 @@ function measureBoxModelsMiddleware(): Middleware<Dispatch, State, Dispatch> {
 }
 
 export function messageChannelMiddleware(
-  client: MakeswiftClient,
+  client: MakeswiftHostApiClient,
 ): Middleware<Dispatch, State, Dispatch> {
   return ({ dispatch, getState }: MiddlewareAPI<Dispatch, State>) =>
     (next: ReduxDispatch<Action>) => {
@@ -669,7 +669,7 @@ export function propControllerHandlesMiddleware(): Middleware<Dispatch, State, D
 }
 
 function makeswiftApiClientSyncMiddleware(
-  client: MakeswiftClient,
+  client: MakeswiftHostApiClient,
 ): Middleware<Dispatch, State, Dispatch> {
   return () => (next: ReduxDispatch<Action>) => {
     return (action: Action): Action => {
@@ -689,7 +689,7 @@ export function configureStore({
 }: {
   rootElements?: Map<string, Documents.Element>
   preloadedState?: PreloadedState<State>
-  client: MakeswiftClient
+  client: MakeswiftHostApiClient
 }): Store {
   const initialState: PreloadedState<State> = {
     ...preloadedState,