feat(web-components): update to use foundation export paths and add e…

…xtensions for package exports (#28912) * update core component paths to use foundation export paths and add extensions to web component export paths * change files * update rollup to use esbuild and support package exports * update to use esm package exports * dedupe deps * fix order of alias resolutions * update paths for start end and patterns * fix extension order for web component vr tests * update module resolution for web component vr tests * resolve tsx to js as well
microsoft · Apr 26, 2024 · a0a89d1 · a0a89d1
1 parent cd9b73e
commit a0a89d1
Show file tree

Hide file tree

Showing 107 changed files with 247 additions and 211 deletions.
diff --git a/apps/vr-tests-web-components/.storybook/main.cjs b/apps/vr-tests-web-components/.storybook/main.cjs
@@ -43,8 +43,8 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     config.plugins = config.plugins ?? [];
 
     config.resolve.extensionAlias = {
-      '.js': ['.ts', '.js'],
-      '.mjs': ['.mts', '.mjs'],
+      '.js': ['.js', '.ts', '.tsx'],
+      '.mjs': ['.mjs', '.mts'],
     };
     config.resolve.extensions.push(...['.ts', '.js']);
     config.resolve.plugins.push(tsPaths);

diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { accordionDefinition, accordionItemDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 accordionDefinition.define(FluentDesignSystem.registry);
 accordionItemDefinition.define(FluentDesignSystem.registry);

diff --git a/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx b/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { AvatarDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 AvatarDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
 
 BadgeDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/src/stories/button/button.stories.tsx b/apps/vr-tests-web-components/src/stories/button/button.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 ButtonDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx b/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { DividerDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 DividerDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx b/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { ProgressBarDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 ProgressBarDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx b/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { RadioDefinition, RadioGroupDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 RadioDefinition.define(FluentDesignSystem.registry);
 RadioGroupDefinition.define(FluentDesignSystem.registry);

diff --git a/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx b/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright } from 'storywright';
 import { RadioDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
 
 RadioDefinition.define(FluentDesignSystem.registry);
 export default {

diff --git a/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx b/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import parse from 'html-react-parser';
+import { default as parse } from 'html-react-parser';
 import { Steps, StoryWright, Keys } from 'storywright';
 import { SliderDefinition, FluentDesignSystem } from '@fluentui/web-components';
-import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
 SliderDefinition.define(FluentDesignSystem.registry);
 

diff --git a/apps/vr-tests-web-components/tsconfig.json b/apps/vr-tests-web-components/tsconfig.json
@@ -8,7 +8,7 @@
     "resolveJsonModule": true,
     "allowJs": true,
     "jsx": "react",
-    "moduleResolution": "node",
+    "moduleResolution": "Node16",
     "typeRoots": ["../../node_modules/@types"]
   },
   "include": ["./src", "./.storybook/*"]

diff --git a/change/@fluentui-web-components-b0156879-1956-4e3d-bc01-98287b184d47.json b/change/@fluentui-web-components-b0156879-1956-4e3d-bc01-98287b184d47.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(web-components): update core component files to use foundation export paths and update package exports to include extensions",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
     "@octokit/rest": "18.12.0",
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.28.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
     "@storybook/addon-a11y": "6.5.15",
     "@storybook/addon-actions": "6.5.15",
     "@storybook/addon-docs": "6.5.15",
@@ -305,13 +306,13 @@
     "request-promise-native": "1.0.9",
     "resolve": "1.22.8",
     "riceburn": "1.3.1",
-    "rollup": "2.45.2",
+    "rollup": "2.71.0",
     "rollup-plugin-commonjs": "10.1.0",
+    "rollup-plugin-esbuild": "4.10.3",
     "rollup-plugin-filesize": "8.0.2",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-terser": "5.3.1",
     "rollup-plugin-transform-tagged-template": "0.0.3",
-    "rollup-plugin-typescript2": "0.27.1",
     "sass": "1.49.11",
     "sass-loader": "12.4.0",
     "satisfied": "^1.1.1",

diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs
@@ -38,8 +38,8 @@ module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookCon
     config.plugins = config.plugins ?? [];
 
     config.resolve.extensionAlias = {
-      '.js': ['.ts', '.js'],
-      '.mjs': ['.mts', '.mjs'],
+      '.js': ['.js', '.ts'],
+      '.mjs': ['.mjs', '.mts'],
     };
     config.resolve.extensions.push(...['.ts', '.js']);
     config.resolve.plugins.push(tsPaths);

diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -4,43 +4,43 @@
 
 ```ts
 
-import { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation';
-import { ButtonOptions } from '@microsoft/fast-foundation';
-import { CSSDesignToken } from '@microsoft/fast-foundation';
-import { DividerOrientation } from '@microsoft/fast-foundation';
-import { DividerRole } from '@microsoft/fast-foundation';
+import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
+import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
+import { CSSDesignToken } from '@microsoft/fast-foundation/design-token.js';
+import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
+import { DividerRole } from '@microsoft/fast-foundation/divider.js';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTAccordion } from '@microsoft/fast-foundation';
-import { FASTAccordionItem } from '@microsoft/fast-foundation';
-import { FASTAnchor } from '@microsoft/fast-foundation';
-import { FASTButton } from '@microsoft/fast-foundation';
-import { FASTCheckbox } from '@microsoft/fast-foundation';
-import { FASTDivider } from '@microsoft/fast-foundation';
+import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
+import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
+import { FASTButton } from '@microsoft/fast-foundation/button.js';
+import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import { FASTMenu } from '@microsoft/fast-foundation';
-import { FASTMenuItem } from '@microsoft/fast-foundation';
-import { FASTProgress } from '@microsoft/fast-foundation';
-import { FASTProgressRing } from '@microsoft/fast-foundation';
-import { FASTRadio } from '@microsoft/fast-foundation';
-import { FASTRadioGroup } from '@microsoft/fast-foundation';
-import { FASTSlider } from '@microsoft/fast-foundation';
-import { FASTSwitch } from '@microsoft/fast-foundation';
-import { FASTTab } from '@microsoft/fast-foundation';
-import { FASTTabPanel } from '@microsoft/fast-foundation';
-import { FASTTabs } from '@microsoft/fast-foundation';
-import { FASTTextField } from '@microsoft/fast-foundation';
-import { MenuItemRole } from '@microsoft/fast-foundation';
-import { RadioGroupOrientation } from '@microsoft/fast-foundation';
-import { SliderOrientation } from '@microsoft/fast-foundation';
-import { StartEnd } from '@microsoft/fast-foundation';
-import { StartEndOptions } from '@microsoft/fast-foundation';
-import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
-import { TabsOrientation } from '@microsoft/fast-foundation';
-import { TextFieldType as TextInputType } from '@microsoft/fast-foundation';
+import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js';
+import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
+import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
+import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
+import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
+import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
+import { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
+import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
+import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js';
+import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
 import type { Theme } from '@fluentui/tokens';
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 
 // @public
 export class Accordion extends FASTAccordion {

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -23,111 +23,111 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
-    "./accordion": {
+    "./accordion.js": {
       "types": "./dist/esm/accordion/define.d.ts",
       "default": "./dist/esm/accordion/define.js"
     },
-    "./accordion-item": {
+    "./accordion-item.js": {
       "types": "./dist/esm/accordion-item/define.d.ts",
       "default": "./dist/esm/accordion-item/define.js"
     },
-    "./anchor-button": {
+    "./anchor-button.js": {
       "types": "./dist/esm/anchor-button/define.d.ts",
       "default": "./dist/esm/anchor-button/define.js"
     },
-    "./avatar": {
+    "./avatar.js": {
       "types": "./dist/esm/avatar/define.d.ts",
       "default": "./dist/esm/avatar/define.js"
     },
-    "./badge": {
+    "./badge.js": {
       "types": "./dist/esm/badge/define.d.ts",
       "default": "./dist/esm/badge/define.js"
     },
-    "./button": {
+    "./button.js": {
       "types": "./dist/esm/button/define.d.ts",
       "default": "./dist/esm/button/define.js"
     },
-    "./checkbox": {
+    "./checkbox.js": {
       "types": "./dist/esm/checkbox/define.d.ts",
       "default": "./dist/esm/checkbox/define.js"
     },
-    "./compound-button": {
+    "./compound-button.js": {
       "types": "./dist/esm/compound-button/define.d.ts",
       "default": "./dist/esm/compound-button/define.js"
     },
-    "./counter-badge": {
+    "./counter-badge.js": {
       "types": "./dist/esm/counter-badge/define.d.ts",
       "default": "./dist/esm/counter-badge/define.js"
     },
-    "./divider": {
+    "./divider.js": {
       "types": "./dist/esm/divider/define.d.ts",
       "default": "./dist/esm/divider/define.js"
     },
-    "./image": {
+    "./image.js": {
       "types": "./dist/esm/image/define.d.ts",
       "default": "./dist/esm/image/define.js"
     },
-    "./label": {
+    "./label.js": {
       "types": "./dist/esm/label/define.d.ts",
       "default": "./dist/esm/label/define.js"
     },
-    "./menu-list": {
+    "./menu-list.js": {
       "types": "./dist/esm/menu-list/define.d.ts",
       "default": "./dist/esm/menu-list/define.js"
     },
-    "./menu-button": {
+    "./menu-button.js": {
       "types": "./dist/esm/menu-button/define.d.ts",
       "default": "./dist/esm/menu-button/define.js"
     },
-    "./menu-item": {
+    "./menu-item.js": {
       "types": "./dist/esm/menu-item/define.d.ts",
       "default": "./dist/esm/menu-item/define.js"
     },
-    "./progress-bar": {
+    "./progress-bar.js": {
       "types": "./dist/esm/progress-bar/define.d.ts",
       "default": "./dist/esm/progress-bar/define.js"
     },
-    "./radio": {
+    "./radio.js": {
       "types": "./dist/esm/radio/define.d.ts",
       "default": "./dist/esm/radio/define.js"
     },
-    "./radio-group": {
+    "./radio-group.js": {
       "types": "./dist/esm/radio-group/define.d.ts",
       "default": "./dist/esm/radio-group/define.js"
     },
-    "./slider": {
+    "./slider.js": {
       "types": "./dist/esm/slider/define.d.ts",
       "default": "./dist/esm/slider/define.js"
     },
-    "./spinner": {
+    "./spinner.js": {
       "types": "./dist/esm/spinner/define.d.ts",
       "default": "./dist/esm/spinner/define.js"
     },
-    "./switch": {
+    "./switch.js": {
       "types": "./dist/esm/switch/define.d.ts",
       "default": "./dist/esm/switch/define.js"
     },
-    "./tab": {
+    "./tab.js": {
       "types": "./dist/esm/tab/define.d.ts",
       "default": "./dist/esm/tab/define.js"
     },
-    "./tabs": {
+    "./tabs.js": {
       "types": "./dist/esm/tabs/define.d.ts",
       "default": "./dist/esm/tabs/define.js"
     },
-    "./tab-panel": {
+    "./tab-panel.js": {
       "types": "./dist/esm/tab-panel/define.d.ts",
       "default": "./dist/esm/tab-panel/define.js"
     },
-    "./text": {
+    "./text.js": {
       "types": "./dist/esm/text/define.d.ts",
       "default": "./dist/esm/text/define.js"
     },
-    "./text-input": {
+    "./text-input.js": {
       "types": "./dist/esm/text-input/define.d.ts",
       "default": "./dist/esm/text-input/define.js"
     },
-    "./toggle-button": {
+    "./toggle-button.js": {
       "types": "./dist/esm/toggle-button/define.d.ts",
       "default": "./dist/esm/toggle-button/define.js"
     }
@@ -187,8 +187,8 @@
     "typescript": "4.7.4"
   },
   "dependencies": {
-    "@microsoft/fast-element": "2.0.0-beta.25",
-    "@microsoft/fast-foundation": "3.0.0-alpha.29",
+    "@microsoft/fast-element": "2.0.0-beta.26",
+    "@microsoft/fast-foundation": "3.0.0-alpha.31",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
     "tslib": "^2.1.0"