Draft: Move fluentui-react-native to the jsx-runtime

.vscode/settings.json

@@ -9,7 +9,7 @@
   },
 
   "eslint.enable": true,
-  "eslint.workingDirectories": [{ "pattern": "./packages/framework/eslint-config-rules" }], // use the common eslint config file
+  "eslint.workingDirectories": [{ "pattern": "./packages/configs/eslint-config-rules" }], // use the common eslint config file
 
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {

CONTRIBUTING.md

@@ -65,8 +65,7 @@ Reach out to Samuel Freiberg with any questions related to E2E testing.
 
    1. `index.ts`
       - This is the file listed as `main` inside your package.json and simply exports other files.
-   1. `<new-component>.tsx` - This is the file that will actually define your function component, and compose it into a higher order component with slots, theming, and design tokens. - Note that we need the comment `/** @jsxRuntime classic */
-/** @jsx withSlots */` at the top of this file. An explanation can be found in the comment at `packages/experimental/use-slots/src/withSlots.tsx`
+   1. `<new-component>.tsx` - This is the file that will actually define your function component, and compose it into a higher order component with slots, theming, and design tokens. - Note that we need the comment `/** @jsxImportSource @fluentui-react-native/framework-base */` at the top of this file. An explanation can be found in the comment at `packages/experimental/use-slots/src/withSlots.tsx`
    1. `<new-component>.<types | settings | platform | blah>.tsx` (Optional)
       - Optional extra files to subdivide your code however you see fit. You can also add platform specific files as you see fit.
 

apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.tsx

@@ -1,11 +1,12 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework */
 import * as React from 'react';
 import { View } from 'react-native';
-import { componentName, ComponentNameType, ComponentNameProps } from './ComponentName.types';
+import type { ComponentNameType, ComponentNameProps } from './ComponentName.types';
+import { componentName } from './ComponentName.types';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { stylingSettings } from './ComponentName.styling';
-import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework';
+import type { UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { useComponentName } from './useComponentName';
 /**
  * A function which determines if a set of styles should be applied to the component given the current state and props of the component-name.

apps/fluent-tester/babel.config.js

@@ -1,3 +1 @@
-module.exports = {
-  presets: [['module:@react-native/babel-preset', { runtime: 'classic' }]],
-};
+module.exports = require('@fluentui-react-native/babel-config');

apps/fluent-tester/package.json

@@ -105,6 +105,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@fluentui-react-native/babel-config": "workspace:*",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
     "@fluentui-react-native/experimental-native-font-metrics": "workspace:*",
     "@fluentui-react-native/focus-zone": "workspace:*",

apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import type { FunctionComponent } from 'react';
 import { View, Text, Platform } from 'react-native';
 

apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Platform } from 'react-native';
 import type { ColorValue } from 'react-native';
 

apps/win32/babel.config.js

@@ -1,3 +1 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-};
+module.exports = require('@fluentui-react-native/babel-config');

apps/win32/package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@fluentui-react-native/babel-config": "workspace:*",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@office-iss/react-native-win32": "^0.74.0",

change/@fluentui-react-native-4bfc2ee8-9c20-42fa-8041-8a994caa8bcf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui/react-native",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-avatar-09960bc9-e5a6-4dc7-aedf-eeac3688bd98.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-badge-a1d57d94-fb18-4046-8ee7-b6774698dba0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-9248e4fe-6988-4eaa-8360-e24c43b890ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-callout-30c3ca67-e8ba-4daa-9d57-cbc3ec99f941.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-6dfdfd35-c380-4527-9045-2606eb25f2d8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-chip-24f22b86-b15f-40df-988d-ca739b526a00.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/chip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-composition-9e2757eb-0355-41d2-a214-aa65b6ff7b0d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-contextual-menu-5a7d5755-2454-45e0-9e48-a935ea22aa40.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-divider-4e39f1a6-fe0a-4db3-9614-183dad71abfc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-drawer-2a44ed1d-7418-4323-b266-355ad13ff939.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dropdown-7f119070-8bde-4506-9e18-3d4ae54b38fb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/dropdown",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-activity-indicator-0017597c-ab5b-480f-bb1f-36c5a54750f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-activity-indicator",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-appearance-additions-adbf1ac8-3071-4621-a99d-56f462f02407.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-appearance-additions",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-avatar-c68c31af-abc7-49f5-aaab-4edafae8f041.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-checkbox-933e00cc-19db-4608-b0fa-8cfa6b42c3f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-expander-a61ea4e1-edd9-47c6-ae3c-7050b12826a7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-expander",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-menu-button-40f4579f-74e5-4830-a707-c0d0e89e8d92.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shadow-2335230d-e03e-4232-9de1-64eac64b6a93.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-shadow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-shimmer-76154866-f87d-405c-9fa5-f0e3c891263e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/experimental-shimmer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-trap-zone-a09f211f-3f8e-4c15-8ec6-1604716044a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/focus-trap-zone",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-focus-zone-3421219c-f3c1-4c0d-914a-7cf95e8d557d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/focus-zone",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-framework-766daf63-fe18-42dd-ae63-26d329d7a36a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/framework",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-framework-base-478fb9c5-a6db-442b-8677-e06d462087b6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/framework-base",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-icon-00b4c2a6-37d7-4306-b867-203e88a9fd85.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/icon",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-input-56f70a45-0a16-4de9-8e81-bb3285750818.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-interactive-hooks-1d7d8d8e-690d-4536-801d-f6fbffba5a95.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-link-e1c9c169-73e7-4809-bb6f-9f1ada9ce58e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-button-438d6f0a-279b-45ef-903b-f98e8c42a858.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-menu-c1bed1d4-d936-4ba9-9b7d-61f6a54cc70a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-notification-e67aa402-3afe-449f-b140-d42c3e1c7b66.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/notification",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-overflow-13485534-62f4-482f-a5bf-6be3c2074593.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-persona-4bea6f18-e29a-4759-a5f6-29f9ab0eed50.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/persona",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-persona-coin-763e3e10-c0a6-4676-bda9-26d501ea59f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/persona-coin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-popover-5635a65f-c4a4-400b-800b-5ef19280d368.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-pressable-0f274370-43a0-4cc9-8383-86dde99be9b6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/pressable",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-radio-group-7e3bd67f-f7f5-4d0b-ae69-bc1196a29d94.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-separator-a54a9c99-a857-4cc0-9ba7-f8f53a5cee71.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/separator",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-spinner-873f2993-e123-436c-a402-3e682644f8fb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/spinner",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-stack-9e7c4d67-554c-47e2-8ab8-75eec339719e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "convert repo to modern jsx-runtime",
+  "packageName": "@fluentui-react-native/stack",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}