fix: update fast element export paths with extensions (#6815)

* update fast-element export paths to include extensions

* Change files

* update react wrapper

* Change files

* Update change/@microsoft-fast-element-7dca0636-ad22-44b9-b9b3-19f7d7fbf6b0.json

* update ssr export paths to include extensions as well

change/@microsoft-fast-element-7dca0636-ad22-44b9-b9b3-19f7d7fbf6b0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: update fast-element export paths to include extensions",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-foundation-6add2d79-c578-4675-ad46-a212cb8c9b0a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update fast-element export paths to include extensions",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-react-wrapper-5a9f556d-e2ae-4a0f-8008-fbe928ecf6e5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix test to use fast-element package export with extension",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-router-a582c081-c493-4ae6-8ed2-065d6a65fd74.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update fast-element export paths to include extensions",
+  "packageName": "@microsoft/fast-router",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-ssr-836a7682-e80c-4d89-b075-ffc9688343ee.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Breaking: update fast-ssr export paths to include extensions",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

examples/todo-app/src/todo-app.template.ts

@@ -1,5 +1,5 @@
 import { html, repeat } from "@microsoft/fast-element";
-import { twoWay } from "@microsoft/fast-element/binding/two-way";
+import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
 import type { TodoApp } from "./todo-app.js";
 import type { Todo } from "./todo-list.js";
 import "./todo-form.js";

examples/todo-app/src/todo-form.template.ts

@@ -1,12 +1,10 @@
 import { html } from "@microsoft/fast-element";
-import { twoWay } from "@microsoft/fast-element/binding/two-way";
+import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
 import type { TodoForm } from "./todo-form.js";
 
 export const template = html<TodoForm>`
     <form @submit=${x => x.submitTodo()}>
         <input type="text" :value=${twoWay(x => x.description, "input")} />
-        <button type="submit" ?disabled=${x => !x.description}>
-            Add Todo
-        </button>
+        <button type="submit" ?disabled=${x => !x.description}>Add Todo</button>
     </form>
 `;

examples/todo-app/src/todo-list.ts

@@ -1,6 +1,6 @@
 import { Observable, observable, volatile } from "@microsoft/fast-element";
-import { Context } from "@microsoft/fast-element/context";
-import { reactive } from "@microsoft/fast-element/state";
+import { Context } from "@microsoft/fast-element/context.js";
+import { reactive } from "@microsoft/fast-element/state.js";
 
 export type Todo = { description: string; done: boolean };
 export type TodoListFilter = "all" | "active" | "completed";

packages/utilities/fast-react-wrapper/src/index.spec.tsx

@@ -1,7 +1,7 @@
 import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
-import { uniqueElementName } from '@microsoft/fast-element/testing';
+import { uniqueElementName } from '@microsoft/fast-element/testing.js';
 import { expect } from "chai";
 import { reactWrapper } from './index.js';
 

packages/web-components/fast-element/package.json

@@ -26,59 +26,59 @@
       "development": "./dist/esm/index.debug.js",
       "default": "./dist/esm/index.js"
     },
-    "./debug": {
+    "./debug.js": {
       "types": "./dist/dts/debug.d.ts",
       "default": "./dist/esm/debug.js"
     },
-    "./binding/two-way": {
+    "./binding/two-way.js": {
       "types": "./dist/dts/binding/two-way.d.ts",
       "default": "./dist/esm/binding/two-way.js"
     },
-    "./binding/signal": {
+    "./binding/signal.js": {
       "types": "./dist/dts/binding/signal.d.ts",
       "default": "./dist/esm/binding/signal.js"
     },
-    "./render": {
+    "./render.js": {
       "types": "./dist/dts/templating/render.d.ts",
       "default": "./dist/esm/templating/render.js"
     },
-    "./utilities": {
+    "./utilities.js": {
       "types": "./dist/dts/utilities.d.ts",
       "default": "./dist/esm/utilities.js"
     },
-    "./state": {
+    "./state.js": {
       "types": "./dist/dts/state/exports.d.ts",
       "default": "./dist/esm/state/exports.js"
     },
-    "./context": {
+    "./context.js": {
       "types": "./dist/dts/context.d.ts",
       "default": "./dist/esm/context.js"
     },
-    "./metadata": {
+    "./metadata.js": {
       "types": "./dist/dts/metadata.d.ts",
       "default": "./dist/esm/metadata.js"
     },
-    "./testing": {
+    "./testing.js": {
       "types": "./dist/dts/testing/exports.d.ts",
       "default": "./dist/esm/testing/exports.js"
     },
-    "./di": {
+    "./di.js": {
       "types": "./dist/dts/di/di.d.ts",
       "default": "./dist/esm/di/di.js"
     },
-    "./element-hydration": {
+    "./element-hydration.js": {
       "types": "./dist/dts/components/hydration.d.ts",
       "default": "./dist/esm/components/hydration.js"
     },
-    "./install-element-hydration": {
+    "./install-element-hydration.js": {
       "types": "./dist/dts/components/install-hydration.d.ts",
       "default": "./dist/esm/components/install-hydration.js"
     },
-    "./pending-task": {
+    "./pending-task.js": {
       "types": "./dist/dts/pending-task.d.ts",
       "default": "./dist/esm/pending-task.js"
     },
-    "./dom-policy": {
+    "./dom-policy.js": {
       "types": "./dist/dts/dom-policy.d.ts",
       "default": "./dist/esm/dom-policy.js"
     },

packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts

@@ -6,7 +6,7 @@ import {
     RepeatDirective,
     ViewTemplate,
 } from "@microsoft/fast-element";
-import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities";
+import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities.js";
 import {
     eventClick,
     eventFocusOut,

packages/web-components/fast-foundation/src/data-grid/data-grid.ts

@@ -8,7 +8,7 @@ import {
     RepeatDirective,
     Updates,
 } from "@microsoft/fast-element";
-import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities";
+import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities.js";
 import {
     eventFocus,
     eventFocusOut,

packages/web-components/fast-foundation/src/design-token/core/design-token-node.pw.spec.ts

@@ -1,7 +1,7 @@
 import "./test/fast-element-dom-shim.js";
 import type { Subscriber } from "@microsoft/fast-element";
 import { Observable } from "@microsoft/fast-element";
-import { reactive } from "@microsoft/fast-element/state";
+import { reactive } from "@microsoft/fast-element/state.js";
 import { test } from "@playwright/test";
 import { expect } from "expect";
 import jest from "jest-mock";

packages/web-components/fast-foundation/src/design-token/event-strategy.spec.ts

@@ -2,7 +2,7 @@
 import { css, customElement, FASTElement, HostController, html, Observable, Updates } from "@microsoft/fast-element";
 import chai, { expect } from "chai";
 import spies from "chai-spies";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
 import {DesignTokenEventResolutionStrategy} from "./event-strategy.js"
 
 const elementName = uniqueElementName();

packages/web-components/fast-foundation/src/design-token/fast-design-token.ts

@@ -12,7 +12,7 @@ import {
     Observable,
     SubscriberSet,
 } from "@microsoft/fast-element";
-import { composedContains, composedParent } from "@microsoft/fast-element/utilities";
+import { composedContains, composedParent } from "@microsoft/fast-element/utilities.js";
 import type {
     DesignTokenChangeRecord as CoreDesignTokenChangeRecord,
     DerivedDesignTokenValue,

packages/web-components/fast-foundation/src/design-token/stories/design-token.stories.ts

@@ -1,5 +1,5 @@
 import { css, FASTElement, html, Observable, Updates } from "@microsoft/fast-element";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
 import type { Meta, Story } from "../../__test__/helpers.js";
 import { CSSDesignToken, DesignToken as FASTDesignToken } from "../fast-design-token.js";
 

packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts

@@ -1,5 +1,5 @@
 import { html, ref, customElement, FASTElement, Updates } from "@microsoft/fast-element";
-import { fixture, uniqueElementName } from "@microsoft/fast-element/testing";
+import { fixture, uniqueElementName } from "@microsoft/fast-element/testing.js";
 import { reflectAttributes } from "./reflect-attributes.js";
 import { expect } from "chai";
 

packages/web-components/fast-foundation/src/index.rollup.debug.ts

@@ -1,6 +1,6 @@
 import { DOM } from "@microsoft/fast-element";
-import "@microsoft/fast-element/debug";
-import { DOMPolicy } from "@microsoft/fast-element/dom-policy";
+import "@microsoft/fast-element/debug.js";
+import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
 
 export * from "@microsoft/fast-element";
 export * from "./index.js";

packages/web-components/fast-foundation/src/index.rollup.ts

@@ -1,5 +1,5 @@
 import { DOM } from "@microsoft/fast-element";
-import { DOMPolicy } from "@microsoft/fast-element/dom-policy";
+import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
 
 export * from "@microsoft/fast-element";
 export * from "./index.js";

packages/web-components/fast-foundation/src/picker/picker.spec.ts

@@ -11,7 +11,7 @@ import {
     pickerMenuTemplate,
     pickerTemplate,
 } from "./index.js";
-import { fixture, uniqueElementName } from "@microsoft/fast-element/testing";
+import { fixture, uniqueElementName } from "@microsoft/fast-element/testing.js";
 import { Updates } from "@microsoft/fast-element";
 import {
     keyArrowLeft,

packages/web-components/fast-foundation/src/picker/picker.ts

@@ -10,7 +10,7 @@ import {
     Updates,
     ViewTemplate,
 } from "@microsoft/fast-element";
-import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities";
+import { ViewBehaviorOrchestrator } from "@microsoft/fast-element/utilities.js";
 import {
     keyArrowDown,
     keyArrowLeft,

packages/web-components/fast-router/src/router.ts

@@ -1,5 +1,5 @@
 import { FASTElement } from "@microsoft/fast-element";
-import { composedParent } from "@microsoft/fast-element/utilities";
+import { composedParent } from "@microsoft/fast-element/utilities.js";
 import { RenderCommand } from "./commands.js";
 import { RouterConfiguration } from "./configuration.js";
 import { NavigationContributor } from "./contributors.js";

packages/web-components/fast-ssr/docs/api-report.md

@@ -8,7 +8,7 @@ import { AsyncLocalStorage } from 'async_hooks';
 import { Binding } from '@microsoft/fast-element';
 import { ComposableStyles } from '@microsoft/fast-element';
 import { Constructable } from '@microsoft/fast-element';
-import { DOMContainer } from '@microsoft/fast-element/di';
+import { DOMContainer } from '@microsoft/fast-element/di.js';
 import { ExecutionContext } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';

packages/web-components/fast-ssr/package.json

@@ -41,12 +41,12 @@
       "types": "./dist/dts/exports.d.ts",
       "default": "./dist/esm/exports.js"
     },
-    "./install-dom-shim": "./dist/esm/install-dom-shim.js",
+    "./install-dom-shim.js": "./dist/esm/install-dom-shim.js",
     "./dom-shim": {
       "types": "./dist/dts/dom-shim.d.ts",
       "default": "./dist/esm/dom-shim.js"
     },
-    "./request-storage": {
+    "./request-storage.js": {
       "types": "./dist/dts/request-storage.d.ts",
       "default": "./dist/esm/request-storage.js"
     },

packages/web-components/fast-ssr/src/dom-shim.spec.ts

@@ -5,7 +5,7 @@ import * as Foundation from "@microsoft/fast-foundation";
 import { expect, test } from "@playwright/test";
 import { createWindow } from "./dom-shim.js";
 import fastSSR from "./exports.js";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
 
 test.describe("createWindow", () => {
     test("should create a window with a document property that is an instance of the window's Document constructor", () => {

packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts

@@ -4,8 +4,8 @@ import { expect, test } from '@playwright/test';
 import { SyncFASTElementRenderer } from "./fast-element-renderer.js";
 import fastSSR from "../exports.js";
 import { consolidate, consolidateAsync } from "../test-utilities/consolidate.js";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
-import { PendingTaskEvent } from "@microsoft/fast-element/pending-task";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
+import { PendingTaskEvent } from "@microsoft/fast-element/pending-task.js";
 
 @customElement({
     name: "bare-element",

packages/web-components/fast-ssr/src/element-renderer/fast-element-renderer.ts

@@ -1,5 +1,5 @@
 import { DOM, DOMAspect, ExecutionContext, FASTElement } from "@microsoft/fast-element";
-import { PendingTaskEvent } from "@microsoft/fast-element/pending-task";
+import { PendingTaskEvent } from "@microsoft/fast-element/pending-task.js";
 import { escapeHtml } from "../escape-html.js";
 import { RenderInfo } from "../render-info.js";
 import { StyleRenderer } from "../styles/style-renderer.js";

packages/web-components/fast-ssr/src/exports.spec.ts

@@ -3,7 +3,7 @@ import { html, RefDirective, ref } from "@microsoft/fast-element";
 import fastSSR from "./exports.js";
 import { ViewBehaviorFactoryRenderer } from "./template-renderer/directives.js";
 import { test, expect } from "@playwright/test";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
 import { FASTElement, HTMLDirective, StatelessAttachedAttributeDirective, ViewBehaviorFactory, ViewController } from "@microsoft/fast-element";
 import { consolidate } from "./test-utilities/consolidate.js";
 

packages/web-components/fast-ssr/src/request-storage.ts

@@ -1,5 +1,5 @@
 import { AsyncLocalStorage } from "async_hooks";
-import { DI, DOMContainer } from "@microsoft/fast-element/di";
+import { DI, DOMContainer } from "@microsoft/fast-element/di.js";
 import { createWindow } from "./dom-shim.js";
 
 let asyncLocalStorage = new AsyncLocalStorage();

packages/web-components/fast-ssr/src/template-renderer/directives.ts

@@ -8,7 +8,7 @@ import {
     ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
-import { RenderDirective } from "@microsoft/fast-element/render";
+import { RenderDirective } from "@microsoft/fast-element/render.js";
 import { RenderInfo } from "../render-info.js";
 import { DefaultTemplateRenderer } from "./template-renderer.js";
 

packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts

@@ -4,10 +4,10 @@ import { expect, test } from "@playwright/test";
 import fastSSR from "../exports.js";
 import { consolidate } from "../test-utilities/consolidate.js";
 import { DefaultTemplateRenderer } from "./template-renderer.js";
-import { render } from "@microsoft/fast-element/render";
+import { render } from "@microsoft/fast-element/render.js";
 import { DefaultElementRenderer } from "../element-renderer/element-renderer.js";
 import { RenderInfo } from "../render-info.js";
-import { uniqueElementName } from "@microsoft/fast-element/testing";
+import { uniqueElementName } from "@microsoft/fast-element/testing.js";
 
 @customElement("hello-world")
 class HelloWorld extends FASTElement {}