chore: adopt custom jsx pragma

microsoft · Apr 14, 2023 · 6376fb5 · 6376fb5
1 parent d2f17a3
commit 6376fb5
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 12 deletions.
diff --git a/change/@fluentui-react-tree-4dc34ddd-5922-4835-8c43-5a96d8cb1a1e.json b/change/@fluentui-react-tree-4dc34ddd-5922-4835-8c43-5a96d8cb1a1e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: adopt custom jsx pragma",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/package.json b/packages/react-components/react-tree/package.json
@@ -46,6 +46,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",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

diff --git a/packages/react-components/react-tree/src/components/Tree/renderTree.tsx b/packages/react-components/react-tree/src/components/Tree/renderTree.tsx
@@ -1,10 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';
 import { TreeProvider } from '../../contexts';
 
 export const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {
-  const { slots, slotProps } = getSlots<TreeSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);
 
   return (
     <TreeProvider value={contextValues.tree}>

diff --git a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
@@ -1,5 +1,10 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';
 import { TreeItemProvider } from '../../contexts';
 import { ButtonContextProvider } from '@fluentui/react-button';
@@ -8,7 +13,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
  * Render the final JSX of TreeItem
  */
 export const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {
-  const { slots, slotProps } = getSlots<TreeItemSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);
 
   return (
     <TreeItemProvider value={contextValues.treeItem}>

diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx
@@ -1,13 +1,18 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';
 
 /**
  * Render the final JSX of TreeItemLayout
  */
 export const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {
   const { isActionsVisible } = state;
-  const { slots, slotProps } = getSlots<TreeItemLayoutSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);
   return (
     <slots.root {...slotProps.root}>
       {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}

diff --git a/...omponents/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx b/...omponents/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx
@@ -1,5 +1,10 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/* eslint-disable jsdoc/check-tag-names */
+/** @jsxRuntime classic */
+/** @jsx createElement */
+/* eslint-enable jsdoc/check-tag-names */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type {
   TreeItemPersonaLayoutState,
   TreeItemPersonaLayoutSlots,
@@ -15,7 +20,7 @@ export const renderTreeItemPersonaLayout_unstable = (
   contextValues: TreeItemPersonaLayoutContextValues,
 ) => {
   const { isActionsVisible } = state;
-  const { slots, slotProps } = getSlots<TreeItemPersonaLayoutSlots>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>