feat(vue-utils): add createContext helper

Author: koca

packages/utils/src/index.ts

@@ -9,6 +9,7 @@ export * from './tabbable'
 export * from './assertion'
 export * from 'css-box-model'
 export * from './responsive'
+export * from './vue-helpers'
 
 export function orient(options: {
   orientation?: 'vertical' | 'horizontal'

packages/utils/src/vue-helpers.ts

@@ -0,0 +1,50 @@
+import { inject, InjectionKey, provide } from 'vue'
+
+export interface CreateContextOptions {
+  /**
+   * If `true`, Vue will throw if context is `null` or `undefined`
+   * In some cases, you might want to support nested context, so you can set it to `false`
+   */
+  strict?: boolean
+  /**
+   * Error message to throw if the context is `undefined`
+   */
+  errorMessage?: string
+  /**
+   * The display name of the context
+   */
+  name?: string
+}
+
+type CreateContextReturn<T> = [(opts: T) => void, () => T]
+
+/**
+ * Creates a named context, provider, and hook.
+ *
+ * @param options create context options
+ */
+export function createContext<ContextType>(options: CreateContextOptions = {}) {
+  const {
+    strict = true,
+    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+    name,
+  } = options
+
+  let contextSymbol = Symbol(`${name}Symbol`) as InjectionKey<ContextType>
+
+  function Provider(payload: ContextType) {
+    provide<ContextType>(contextSymbol, payload)
+  }
+
+  function useContext() {
+    const context = inject(contextSymbol, null)
+
+    if (!context && strict) {
+      throw new Error(errorMessage)
+    }
+
+    return context
+  }
+
+  return [Provider, useContext] as CreateContextReturn<ContextType>
+}

packages/utils/tests/vue-helpers.test.ts

@@ -0,0 +1,52 @@
+import { createContext } from '@chakra-ui/vue-utils/src'
+import { defineComponent, h } from 'vue'
+import { render } from '../../test-utils/src'
+
+interface ExampleContext {
+  example: string
+}
+
+const [ExampleProvider, useExampleContext] = createContext<ExampleContext>({
+  name: 'ExampleContext',
+  errorMessage:
+    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+})
+
+const ExampleComponent = defineComponent({
+  setup() {
+    const { example } = useExampleContext()
+    return () => h('div', `injected: ${example}`)
+  },
+})
+
+beforeEach(() => {
+  // disable console.warn
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+it('should provide and inject a context', () => {
+  const { getByText } = render({
+    components: { ExampleComponent },
+    template: `
+      <div>
+        <ExampleComponent />
+      </div>
+    `,
+    setup() {
+      ExampleProvider({ example: 'works' })
+    },
+  })
+  getByText(/works/)
+})
+
+it('should throw an error when there is no provider', () => {
+  expect(() => {
+    render({
+      components: { ExampleComponent },
+      template: `<ExampleComponent />`,
+      setup() {},
+    })
+  }).toThrowError(
+    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider'
+  )
+})