DOCSEARCHbyAlgolia
Submit Docs

Exposition

website·Indexed 30 days ago

https://h2xd.github.io/exposition/

A low-level API designed to help teams introduce mocked requests to ensure application quality. It consists of a core library (@exposition/core), a SDK for non-mutating state management (@exposition/sdk), and various integrations (@exposition/integrations) including support for Mock Service Worker and Vue-Devtools.

Tokens
3.2K
Snippets
23
Records
27
Agent score
74%

What's inside Exposition

  1. Integrate Exposition with Mock Service Worker (MSW)

    To add integrations to your Exposition instance, install the @exposition/integrations package. Mock Service Worker (MSW) is the primary integration for this library and is the recommended starting point for setup.

  2. Install @exposition/core

    Install the core Exposition library as a development dependency using your preferred package manager.
    # Using pnpm
pnpm add -D @exposition/core

# Using yarn
yarn add -D @exposition/core

# Using npm
npm install -D @exposition/core

  3. Install dependencies for Exposition MSW integration

    To use the MSW integration with Exposition, you need to install the core library, the integrations package, and the MSW library.
    # Using pnpm
pnpm add -D @exposition/core @exposition/integrations msw

# Using yarn
yarn add -D @exposition/core @exposition/integrations msw

# Using npm
npm install -D @exposition/core @exposition/integrations msw

  4. Set up the MSW integration with Exposition

    Integrating MSW with Exposition involves three main steps: creating an Exposition instance to define your mock states, initializing the MSW integration using createMswIntegration, and calling .init() on the exposition instance to activate it. The integration requires an MSW setup function (like setupServer for Node or setupClient for browsers).
    import { Exposition } from '@exposition/core'
import { createMswIntegration } from '@exposition/integrations/msw'
import { setupServer } from 'msw/node'

// 1. Define the states/options for your mocks
export const exampleExposition = new Exposition({
  cart: {
    options: ['filled', 'empty'],
  },
} as const)

// 2. Create the integration
export const mswIntegration = createMswIntegration(
  exampleExposition,
  {
    msw: setupServer(),
    config: {
      baseUrl: 'https://localhost:1337',
    },
  },
)

// 3. Initialize
exampleExposition.init()

  5. Install @exposition/core

    Install the core @exposition package as a development dependency using your preferred package manager.
    # Using pnpm
pnpm add -D @exposition/core

# Using yarn
yarn add -D @exposition/core

# Using npm
npm install -D @exposition/core

  6. Integrate Exposition with Mock Service Worker (MSW)

    To add integrations to your Exposition instance, install the @exposition/integrations package. Mock Service Worker (MSW) is the primary integration for this library and is highly recommended as the starting point.

  7. Configure Exposition global settings

    The Exposition constructor accepts a second parameter to overwrite default settings. These settings signal integrations on how to behave regarding activity and state restoration.
    const exposition = new Exposition(
  { /* your config */ },
  {
    settings: {
      active: false,       // Signal integrations to stop actions (e.g., msw resets handlers)
      restoreState: false, // Signal integrations to prevent state restoration (e.g., vue-devtools ignores localStorage)
    }
  }
)

  8. Install @exposition and Vue-Devtools API

    To use the @exposition extension for Vue-Devtools, you must install the core exposition package, the integrations package, and the official Vue devtools API as development dependencies.
    # Using npm
npm install -D @exposition/core @exposition/integrations @vue/devtools-api

# Using pnpm
pnpm add -D @exposition/core @exposition/integrations @vue/devtools-api

# Using yarn
yarn add -D @exposition/core @exposition/integrations @vue/devtools-api

  9. Install @exposition/integrations

    Install the @exposition/integrations package as a development dependency to access extensions that enhance the developer experience for the @exposition library.
    # Using pnpm
pnpm add -D @exposition/integrations

# Using yarn
yarn add -D @exposition/integrations

# Using npm
npm install -D @exposition/integrations

  10. Install @exposition/sdk

    Install the @exposition/sdk as a development dependency using your preferred package manager.
    pnpm add -D @exposition/sdk
# or
yarn add -D @exposition/sdk
# or
npm install -D @exposition/sdk

  11. Install @exposition MSW integration

    To use Mock Service Worker (MSW) with @exposition, install the @exposition/integrations package as a development dependency.
    # Using pnpm
pnpm add -D @exposition/integrations

# Using yarn
yarn add -D @exposition/integrations

# Using npm
npm install -D @exposition/integrations

  12. Install @exposition/core

    Install the core Exposition package as a development dependency using your preferred package manager.
    # Using pnpm
pnpm add -D @exposition/core

# Using yarn
yarn add -D @exposition/core

# Using npm
npm install -D @exposition/core