feat(*): revise environment provider

packages/react/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- Renamed `Environment` to `EnvironmentProvider` for consistency with other providers.
+
 ## [3.0.0-2] - 2024-05-15
 
 ### Changed

packages/react/src/providers/environment/environment.tsx → packages/react/src/providers/environment/environment-provider.tsx

@@ -1,14 +1,14 @@
 import { getDocument, getWindow } from '@zag-js/dom-query'
 import { type ReactNode, useMemo, useState } from 'react'
 import { runIfFn } from '../../utils/run-if-fn'
-import { EnvironmentProvider, type RootNode } from './use-environment-context'
+import { EnvironmentContextProvider, type RootNode } from './use-environment-context'
 
-export interface EnvironmentProps {
+export interface EnvironmentProviderProps {
   children?: ReactNode
   value?: RootNode | (() => RootNode)
 }
 
-export const Environment = (props: EnvironmentProps) => {
+export const EnvironmentProvider = (props: EnvironmentProviderProps) => {
   const { value, children } = props
   const [spanRef, setSpanRef] = useState<HTMLSpanElement | null>()
 
@@ -26,9 +26,9 @@ export const Environment = (props: EnvironmentProps) => {
   )
 
   return (
-    <EnvironmentProvider value={environment}>
+    <EnvironmentContextProvider value={environment}>
       {children}
       {!value && <span hidden ref={setSpanRef} />}
-    </EnvironmentProvider>
+    </EnvironmentContextProvider>
   )
 }

packages/react/src/providers/environment/environment.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { Environment } from './'
+import { EnvironmentProvider } from './'
 import { useEnvironmentContext } from './use-environment-context'
 
 const PrintEnvironment = () => {
@@ -8,12 +8,12 @@ const PrintEnvironment = () => {
   return <pre data-testid="output">{JSON.stringify(getRootNode(), null, 2)}</pre>
 }
 
-describe('Environment', () => {
+describe('EnvironmentProvider', () => {
   it('should have access to the environment values', async () => {
     render(
-      <Environment value={() => document}>
+      <EnvironmentProvider value={() => document}>
         <PrintEnvironment />
-      </Environment>,
+      </EnvironmentProvider>,
     )
     expect(screen.getByTestId('output').innerHTML).not.toBe('""')
   })

packages/react/src/providers/environment/examples/basic.tsx

@@ -1,18 +1,13 @@
 import Frame from 'react-frame-component'
-import { Environment, useEnvironmentContext } from '../'
+import { EnvironmentProvider } from '../'
+import { Usage } from './usage'
 
 export const Basic = () => {
   return (
     <Frame title="IFrame Context" width="100%" height="300px">
-      <Environment>
-        <PrintEnvironment />
-      </Environment>
+      <EnvironmentProvider>
+        <Usage />
+      </EnvironmentProvider>
     </Frame>
   )
 }
-
-const PrintEnvironment = () => {
-  const { getRootNode } = useEnvironmentContext()
-
-  return <pre>{JSON.stringify(getRootNode(), null, 2)}</pre>
-}

packages/react/src/providers/environment/examples/setup.tsx

@@ -1,10 +1,10 @@
 import Frame from 'react-frame-component'
-import { Environment } from '../'
+import { EnvironmentProvider } from '../'
 
 export const App = () => {
   return (
     <Frame title="IFrame Context">
-      <Environment>{/* Your App */}</Environment>
+      <EnvironmentProvider>{/* Your App */}</EnvironmentProvider>
     </Frame>
   )
 }

packages/react/src/providers/environment/index.ts

@@ -1,4 +1,4 @@
-export { Environment, type EnvironmentProps } from './environment'
+export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider'
 export {
   useEnvironmentContext,
   type EnvironmentContext,

packages/react/src/providers/environment/use-environment-context.ts

@@ -18,14 +18,15 @@ export interface EnvironmentContext {
   getWindow(): Window & typeof globalThis
 }
 
-export const [EnvironmentProvider, useEnvironmentContext] = createContext<EnvironmentContext>({
-  name: 'EnvironmentContext',
-  hookName: 'useEnvironmentContext',
-  providerName: '<EnvironmentProvider />',
-  strict: false,
-  defaultValue: {
-    getRootNode: () => document,
-    getDocument: () => document,
-    getWindow: () => window,
-  },
-})
+export const [EnvironmentContextProvider, useEnvironmentContext] =
+  createContext<EnvironmentContext>({
+    name: 'EnvironmentContext',
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+    defaultValue: {
+      getRootNode: () => document,
+      getDocument: () => document,
+      getWindow: () => window,
+    },
+  })

packages/solid/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- Renamed `Environment` to `EnvironmentProvider` for consistency with other providers.
+
 ## [3.0.0-5] - 2024-05-15
 
 ### Added

packages/solid/src/providers/environment/environment.tsx → packages/solid/src/providers/environment/environment-provider.tsx

@@ -1,14 +1,14 @@
 import { getDocument, getWindow } from '@zag-js/dom-query'
 import { type JSX, Show, createMemo, createSignal } from 'solid-js'
 import { runIfFn } from '../../utils/run-if-fn'
-import { EnvironmentProvider, type RootNode } from './use-environment-context'
+import { EnvironmentContextProvider, type RootNode } from './use-environment-context'
 
-export interface EnvironmentProps {
+export interface EnvironmentProviderProps {
   children?: JSX.Element
   value?: RootNode | (() => RootNode)
 }
 
-export const Environment = (props: EnvironmentProps) => {
+export const EnvironmentProvider = (props: EnvironmentProviderProps) => {
   const [spanRef, setSpanRef] = createSignal<HTMLSpanElement>()
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document
 
@@ -19,11 +19,11 @@ export const Environment = (props: EnvironmentProps) => {
   }))
 
   return (
-    <EnvironmentProvider value={environment}>
+    <EnvironmentContextProvider value={environment}>
       {props.children}
       <Show when={!props.value}>
         <span hidden ref={setSpanRef} />
       </Show>
-    </EnvironmentProvider>
+    </EnvironmentContextProvider>
   )
 }

packages/solid/src/providers/environment/environment.test.tsx

@@ -1,18 +1,18 @@
 import { render, screen } from '@solidjs/testing-library'
-import { Environment, useEnvironmentContext } from './'
+import { EnvironmentProvider, useEnvironmentContext } from './'
 
 const PrintEnvironment = () => {
   const environment = useEnvironmentContext()
 
   return <pre>{environment().getRootNode().toString()}</pre>
 }
 
-describe('Environment', () => {
+describe('EnvironmentPrvovider', () => {
   it('should have access to the environment values', async () => {
     render(() => (
-      <Environment value={() => document}>
+      <EnvironmentProvider value={() => document}>
         <PrintEnvironment />
-      </Environment>
+      </EnvironmentProvider>
     ))
     expect(screen.getByText('[object Document]')).toBeInTheDocument()
   })

packages/solid/src/providers/environment/examples/basic.tsx

@@ -1,13 +1,8 @@
-import { Environment, useEnvironmentContext } from '../..'
+import { EnvironmentProvider } from '../..'
+import { Usage } from './usage'
 
 export const Basic = () => (
-  <Environment>
-    <PrintEnvironment />
-  </Environment>
+  <EnvironmentProvider>
+    <Usage />
+  </EnvironmentProvider>
 )
-
-const PrintEnvironment = () => {
-  const environment = useEnvironmentContext()
-
-  return <pre>{JSON.stringify(environment().getRootNode(), null, 2)}</pre>
-}

packages/solid/src/providers/environment/examples/setup.tsx

@@ -1,9 +1,9 @@
-import { Environment } from '../..'
+import { EnvironmentProvider } from '../..'
 
 export const App = () => {
   return (
     <iframe title="IFrame Context">
-      <Environment>{/* Your App */}</Environment>
+      <EnvironmentProvider>{/* Your App */}</EnvironmentProvider>
     </iframe>
   )
 }

packages/solid/src/providers/environment/index.ts

@@ -1,4 +1,4 @@
-export { Environment, type EnvironmentProps } from './environment'
+export { EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider'
 export {
   useEnvironmentContext,
   type EnvironmentContext,

packages/solid/src/providers/environment/use-environment-context.ts

@@ -22,7 +22,7 @@ export interface EnvironmentContext {
   getWindow(): Window & typeof globalThis
 }
 
-export const [EnvironmentProvider, useEnvironmentContext] = createContext<
+export const [EnvironmentContextProvider, useEnvironmentContext] = createContext<
   Accessor<EnvironmentContext>
 >({
   hookName: 'useEnvironmentContext',

packages/vue/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- Renamed `Environment` to `EnvironmentProvider` for consistency with other providers.
+
 ## [1.0.0-5] - 2024-05-15
 
 ### Fixed

packages/vue/src/providers/environment/environment.vue → packages/vue/src/providers/environment/environment-provider.vue

@@ -2,13 +2,13 @@
 import { getDocument, getWindow } from '@zag-js/dom-query'
 import { computed, ref } from 'vue'
 import { runIfFn } from '../../utils'
-import { EnvironmentProvider, type RootNode } from './use-environment-context'
+import { EnvironmentContextProvider, type RootNode } from './use-environment-context'
 
-export interface EnvironmentProps {
+export interface EnvironmentProviderProps {
   value?: RootNode | (() => RootNode)
 }
 
-const props = defineProps<EnvironmentProps>()
+const props = defineProps<EnvironmentProviderProps>()
 const spanRef = ref<HTMLSpanElement | null>(null)
 
 const getRootNode = () => runIfFn(props.value) ?? spanRef.value?.ownerDocument ?? document
@@ -19,7 +19,7 @@ const environment = computed(() => ({
   getWindow: () => getWindow(getRootNode()),
 }))
 
-EnvironmentProvider(environment)
+EnvironmentContextProvider(environment)
 </script>
 
 <template>

packages/vue/src/providers/environment/examples/basic.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Environment from '../environment.vue'
+import { EnvironmentProvider } from '..'
 import Usage from './usage.vue'
 </script>
 
 <template>
-  <Environment>
+  <EnvironmentProvider>
     <Usage />
-  </Environment>
+  </EnvironmentProvider>
 </template>

packages/vue/src/providers/environment/examples/setup.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Environment } from '../'
+import { EnvironmentProvider } from '../'
 </script>
 
 <template>
   <iframe title="IFrame Context">
-    <Environment><!-- Your App --></Environment>
+    <EnvironmentProvider><!-- Your App --></EnvironmentProvider>
   </iframe>
 </template>

packages/vue/src/providers/environment/index.ts

@@ -1,4 +1,7 @@
-export { default as Environment, type EnvironmentProps } from './environment.vue'
+export {
+  default as EnvironmentProvider,
+  type EnvironmentProviderProps,
+} from './environment-provider.vue'
 export {
   useEnvironmentContext,
   type EnvironmentContext,

packages/vue/src/providers/environment/use-environment-context.ts

@@ -19,5 +19,5 @@ export interface EnvironmentContext {
   getWindow(): Window & typeof globalThis
 }
 
-export const [EnvironmentProvider, useEnvironmentContext] =
+export const [EnvironmentContextProvider, useEnvironmentContext] =
   createContext<ComputedRef<EnvironmentContext> | null>('EnvironmentContext')

scripts/src/generate-type-docs.ts

@@ -205,7 +205,9 @@ const extractTypesForFramework = async (framework: string) => {
                   )
 
                   const newName =
-                    voca.isEmpty(shortName) || shortName === 'Emits' ? x[0] : shortName
+                    voca.isEmpty(shortName) || shortName === 'Emits' || shortName === 'Provider'
+                      ? x[0]
+                      : shortName
 
                   return [newName, { props: Object.fromEntries(Object.entries(x[1])) }]
                 })

website/src/content/pages/providers/environment.mdx

@@ -1,24 +1,23 @@
 ---
 id: environment
 title: Environment
-description: Setup components for custom environments like IFrames, Shadow DOM, or Electron contexts.
+description: Set up components for custom environments like iframes, Shadow DOM, or Electron.
 ---
 
 ## Motivation
 
-We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally,
-which relies on DOM query methods like `document.querySelectorAll` and `document.getElementById` to locate elements.
-In custom environments such as iframes, Shadow DOM, or Electron, these methods might not work as expected because `document` may not be available.
+We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally, which relies on DOM query methods like `document.querySelectorAll` and `document.getElementById`.
+In custom environments like iframes, Shadow DOM, or Electron, these methods might not work as expected.
 
-To handle this, you can set a default using the `Environment` component. This ensures the correct root node or document is referenced.
+To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set the appropriate root node or document, ensuring correct DOM queries.
 
 ## Setup
 
-To target custom environments like an iframe, Shadow DOM, or Electron, render the `Environment` component to provide the environment context to all Ark UI components.
+To support custom environments like an iframe, Shadow DOM or Electron, render the `EnvironmentProvider` component to provide the environment context to all Ark UI components.
 
 <Example id="setup" />
 
-The `Environment` component will automatically detect the current environment and set the correct environment context.
+The `EnvironmentProvider` component will automatically detect the current environment and set the correct environment context.
 However, you can also manually set the `Document` like shown in this React example below:
 
 ```jsx
@@ -28,7 +27,9 @@ import { Environment } from '@ark-ui/react'
 export const App = () => (
   <Frame title="IFrame Context">
     <FrameContextConsumer>
-      {({ document }) => <Environment value={document}>{/* Your App */}</Environment>}
+      {({ document }) => (
+        <EnvironmentProvider value={document}>{/* Your App */}</EnvironmentProvider>
+      )}
     </FrameContextConsumer>
   </Frame>
 )

website/src/content/pages/providers/locale.mdx

@@ -10,7 +10,6 @@ The `LocaleProvider` component sets the locale for your app, formatting dates, n
 
 > **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction will be `ltr`.
 
-
 <Example id="setup" />
 
 ## Usage
@@ -21,4 +20,4 @@ To access the current locale and direction settings, use the `useLocaleContext`
 
 ## API Reference
 
-<ComponentTypes id="locale" />
+<ComponentTypes id="locale" />

website/src/content/types/react/environment.types.json

@@ -1,5 +1,5 @@
 {
-  "Environment": {
+  "EnvironmentProvider": {
     "props": { "value": { "type": "RootNode | (() => RootNode)", "isRequired": false } }
   }
 }