@fluentui/react-jsx-runtime 9.0.44 → 9.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +11 -2
  2. package/README.md +37 -17
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/react-jsx-runtime
2
2
 
3
- This log was last generated on Mon, 23 Sep 2024 12:36:04 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 15 Oct 2024 17:13:32 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-jsx-runtime_v9.0.45)
8
+
9
+ Tue, 15 Oct 2024 17:13:32 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-jsx-runtime_v9.0.44..@fluentui/react-jsx-runtime_v9.0.45)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
15
+
7
16
  ## [9.0.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-jsx-runtime_v9.0.44)
8
17
 
9
- Mon, 23 Sep 2024 12:36:04 GMT
18
+ Mon, 23 Sep 2024 12:40:17 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-jsx-runtime_v9.0.43..@fluentui/react-jsx-runtime_v9.0.44)
11
20
 
12
21
  ### Patches
package/README.md CHANGED
@@ -2,22 +2,28 @@
2
2
 
3
3
  **React JSX runtime for [Fluent UI React](https://react.fluentui.dev/)**
4
4
 
5
- [Fluent UI React](https://react.fluentui.dev/) requires the usage of a custom JSX runtime to support the [slots API](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--page)
5
+ [Fluent UI React](https://react.fluentui.dev/) requires the usage of a custom JSX runtime to support the [slots API](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs)
6
6
 
7
7
  ## Usage
8
8
 
9
- This library should only be used in the case where you are trying to use the internal slot API of Fluent UI React. If you are not using the internal slot API, you should not need to use this library.
9
+ > [!NOTE]
10
+ > This custom JSX pragma should only be used in cases where you are trying to use the internal Fluent UI React **slot API in conjunction with `assertSlots()`**.
11
+ >
12
+ > If you are not using the internal slot API, don't use it.
10
13
 
11
- In case you want to re-compose a component and redeclare its render method then this API will be necessary, here's our documentation on [Rendering a component with slots](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--page#rendering-components-with-slots)
14
+ In case you want to re-compose a component and redeclare its render method then this API will be necessary, learn more on [Rendering a component with slots](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs#rendering-components-with-slots)
12
15
 
13
- To properly render a component with slots the `createElement` method of `@fluentui/react-jsx-runtime` can be used as a replacement for `React.createElement`:
16
+ To properly render a component with slots, our custom `createElement` method needs to be used instead of default `React.createElement`:
17
+
18
+ > NOTE: It works with both `automatic` or `classic` jsxRuntime configuration.
19
+
20
+ ### React 17+
21
+
22
+ > infers `@jsxRuntime automatic`
14
23
 
15
24
  ```tsx
16
- /** @jsxRuntime classic */
17
- /** @jsx createElement */
25
+ /** @jsxImportSource @fluentui/react-jsx-runtime */
18
26
 
19
- // createElement custom JSX pragma is required to support slot creation
20
- import { createElement } from '@fluentui/react-jsx-runtime';
21
27
  import { assertSlots } from '@fluentui/react-utilities';
22
28
 
23
29
  const renderButton_unstable = (state: ButtonState) => {
@@ -35,15 +41,29 @@ const renderButton_unstable = (state: ButtonState) => {
35
41
  };
36
42
  ```
37
43
 
38
- In case you're using typescript or any modern javascript transpiler, you can use [JSX import source](https://www.typescriptlang.org/tsconfig#jsxImportSource) feature instead of depending on declaring the runtime on every file
44
+ ### React 16
39
45
 
40
- In TSC case you can simply add this do `tsconfig.json` file:
46
+ > infers `@jsxRuntime classic`
41
47
 
42
- ```json
43
- {
44
- "compilerOptions": {
45
- "jsx": "react-jsx",
46
- "jsxImportSource": "@fluentui/react-jsx-runtime"
47
- }
48
- }
48
+ ```tsx
49
+ /** @jsx createElement */
50
+
51
+ // in order to apply our custom `createElement` factory to jsx transforms, to support slot creation, we need to import it physically
52
+ import { createElement } from '@fluentui/react-jsx-runtime';
53
+
54
+ import { assertSlots } from '@fluentui/react-utilities';
55
+
56
+ const renderButton_unstable = (state: ButtonState) => {
57
+ const { iconOnly, iconPosition } = state;
58
+
59
+ assertSlots<ButtonSlots>(state);
60
+
61
+ return (
62
+ <state.root>
63
+ {iconPosition !== 'after' && state.icon && <state.icon />}
64
+ {!iconOnly && state.root.children}
65
+ {iconPosition === 'after' && state.icon && <state.icon />}
66
+ </state.root>
67
+ );
68
+ };
49
69
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-jsx-runtime",
3
- "version": "9.0.44",
3
+ "version": "9.0.45",
4
4
  "description": "Custom JSX runtime for @fluentui/react-components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,7 +31,7 @@
31
31
  "@fluentui/scripts-tasks": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-utilities": "^9.18.15",
34
+ "@fluentui/react-utilities": "^9.18.16",
35
35
  "react-is": "^17.0.2",
36
36
  "@swc/helpers": "^0.5.1"
37
37
  },