feat: adopt custom JSX pragma

microsoft · Apr 14, 2023 · 89f5d1e · 89f5d1e
1 parent d2f17a3
commit 89f5d1e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/change/@fluentui-react-provider-01464521-6329-44ea-be05-8aa792d0462b.json b/change/@fluentui-react-provider-01464521-6329-44ea-be05-8aa792d0462b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: adopt custom JSX pragma",
+  "packageName": "@fluentui/react-provider",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json
@@ -38,6 +38,7 @@
     "@fluentui/react-tabster": "^9.6.4",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.7.4",
+    "@fluentui/react-jsx-runtime": "^9.0.0-alpha.0",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {

diff --git a/...es/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/...es/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -1,4 +1,10 @@
-import * as React from 'react';
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { canUseDOM, getSlotsNext } from '@fluentui/react-utilities';
 import { TextDirectionProvider } from '@griffel/react';
 import {
   OverridesProvider_unstable as OverridesProvider,
@@ -9,7 +15,6 @@ import {
   CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
 } from '@fluentui/react-shared-contexts';
-import { canUseDOM, getSlots } from '@fluentui/react-utilities';
 import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 
 /**
@@ -19,7 +24,7 @@ export const renderFluentProvider_unstable = (
   state: FluentProviderState,
   contextValues: FluentProviderContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<FluentProviderSlots>(state);
+  const { slots, slotProps } = getSlotsNext<FluentProviderSlots>(state);
 
   // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
   // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is