feat: expose fast-element as a module package to NodeJS (#5601)

* add lint rule to enforce file extensions in imports

* declare fast-element as a ESModule package

* convert eslintrc to a commonjs module

* adding file extensions to import paths

* fixing accidently modified string

* fixing build processes

* revert change

* Change files

Co-authored-by: nicholasrice <[email protected]>

change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "enumerate fast-element package as a ES module package",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-element/.eslintrc.js → packages/web-components/fast-element/.eslintrc.cjs

@@ -1,6 +1,7 @@
 module.exports = {
     extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
     rules: {
+        "import/extensions": ["error", "always"],
         "max-classes-per-file": "off",
         "no-case-declarations": "off",
         "@typescript-eslint/ban-types": [

packages/web-components/fast-element/.npmignore

@@ -9,7 +9,7 @@ src/
 
 # config files
 .eslintignore
-.eslintrc.js
+.eslintrc.cjs
 .mocharc.json
 .prettierignore
 api-extractor.json
@@ -19,4 +19,4 @@ tsconfig.json
 
 # cache
 .rollupcache
-temp
+temp

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

@@ -16,6 +16,7 @@
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "main": "dist/esm/index.js",
+  "type": "module",
   "types": "dist/fast-element.d.ts",
   "unpkg": "dist/fast-element.min.js",
   "scripts": {
@@ -35,14 +36,14 @@
     "test": "yarn test-chrome:verbose && yarn doc:ci",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
-    "test-chrome:verbose:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
+    "test-chrome:verbose": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
+    "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
+    "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
+    "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
+    "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
+    "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
+    "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",

packages/web-components/fast-element/rollup.config.js

@@ -7,7 +7,7 @@ import typescript from "rollup-plugin-typescript2";
 import {
     transformCSSFragment,
     transformHTMLFragment,
-} from "../../../build/transform-fragments";
+} from "../../../build/transform-fragments.js";
 
 const parserOptions = {
     sourceType: "module",

packages/web-components/fast-element/src/components/attributes.ts

@@ -1,7 +1,7 @@
-import { Accessor, Observable } from "../observation/observable";
-import { DOM } from "../dom";
-import type { Notifier } from "../observation/notifier";
-import { isString } from "../interfaces";
+import { Accessor, Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
+import type { Notifier } from "../observation/notifier.js";
+import { isString } from "../interfaces.js";
 
 /**
  * Represents objects that can convert values to and from

packages/web-components/fast-element/src/components/controller.ts

@@ -1,12 +1,11 @@
-import { DOM } from "../dom";
-import type { Mutable } from "../interfaces";
-import type { Behavior } from "../observation/behavior";
-import { PropertyChangeNotifier } from "../observation/notifier";
-import { defaultExecutionContext, Observable } from "../observation/observable";
-import type { ElementStyles, StyleTarget } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import type { ElementView } from "../templating/view";
-import { FASTElementDefinition } from "./fast-definitions";
+import type { Mutable } from "../interfaces.js";
+import type { Behavior } from "../observation/behavior.js";
+import { PropertyChangeNotifier } from "../observation/notifier.js";
+import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import type { ElementStyles, StyleTarget } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import type { ElementView } from "../templating/view.js";
+import { FASTElementDefinition } from "./fast-definitions.js";
 
 const shadowRoots = new WeakMap<HTMLElement, ShadowRoot>();
 const defaultEventOptions: CustomEventInit = {

packages/web-components/fast-element/src/components/fast-definitions.ts

@@ -1,8 +1,8 @@
-import { isString, Mutable } from "../interfaces";
-import { Observable } from "../observation/observable";
-import { ComposableStyles, ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+import { isString, Mutable } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};

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

@@ -1,5 +1,8 @@
-import { Controller } from "./controller";
-import { FASTElementDefinition, PartialFASTElementDefinition } from "./fast-definitions";
+import { Controller } from "./controller.js";
+import {
+    FASTElementDefinition,
+    PartialFASTElementDefinition,
+} from "./fast-definitions.js";
 
 /**
  * Represents a custom element based on the FASTElement infrastructure.

packages/web-components/fast-element/src/dom.ts

@@ -1,5 +1,5 @@
-import type { Callable } from "./interfaces";
-import { $global, TrustedTypesPolicy } from "./platform";
+import type { Callable } from "./interfaces.js";
+import { $global, TrustedTypesPolicy } from "./platform.js";
 
 /* eslint-disable */
 const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(

packages/web-components/fast-element/src/index.ts

@@ -1,29 +1,28 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
 export {
     FASTElementDefinition,
     PartialFASTElementDefinition,
-} from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export type { Callable, Constructable, Mutable } from "./interfaces";
-export * from "./templating/compiler";
+} from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export type { Callable, Constructable, Mutable } from "./interfaces.js";
+export * from "./templating/compiler.js";
 export {
     ElementStyles,
     ElementStyleFactory,
     ComposableStyles,
     StyleTarget,
-} from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { Splice } from "./observation/array-change-records";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export type { Behavior } from "./observation/behavior";
+} from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { Splice } from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export type { Behavior } from "./observation/behavior.js";
 export {
     bind,
     oneTime,
@@ -33,22 +32,23 @@ export {
     BindingType,
     BindingBehaviorFactory,
     DefaultBindingOptions,
-} from "./templating/binding";
+} from "./templating/binding.js";
 export {
     ViewBehaviorTargets,
     ViewBehavior,
     ViewBehaviorFactory,
     HTMLDirective,
     AspectedHTMLDirective,
     InlinableHTMLDirective,
-} from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
+} from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export * from "./templating/view.js";
 export {
     elements,
     ElementsFilter,
     NodeBehaviorOptions,
-} from "./templating/node-observation";
+} from "./templating/node-observation.js";

packages/web-components/fast-element/src/observation/array-change-records.ts

@@ -1,4 +1,4 @@
-import { emptyArray } from "../platform";
+import { emptyArray } from "../platform.js";
 
 const enum Edit {
     leave = 0,

packages/web-components/fast-element/src/observation/array-observer.ts

@@ -1,8 +1,8 @@
-import { DOM } from "../dom";
-import { Splice } from "./array-change-records";
-import { SubscriberSet } from "./notifier";
-import type { Notifier } from "./notifier";
-import { Observable } from "./observable";
+import { DOM } from "../dom.js";
+import { Splice } from "./array-change-records.js";
+import { SubscriberSet } from "./notifier.js";
+import type { Notifier } from "./notifier.js";
+import { Observable } from "./observable.js";
 
 function adjustIndex(changeRecord: Splice, array: any[]): Splice {
     let index = changeRecord.index;

packages/web-components/fast-element/src/observation/behavior.ts

@@ -1,4 +1,4 @@
-import type { ExecutionContext } from "./observable";
+import type { ExecutionContext } from "./observable.js";
 
 /**
  * Represents an object that can contribute behavior to a view or

packages/web-components/fast-element/src/observation/observable.ts

@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import type { Notifier, Subscriber } from "./notifier";
-import { isFunction, isString } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isFunction, isString } from "../interfaces.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import type { Notifier, Subscriber } from "./notifier.js";
 
 const volatileRegex = /(:|&&|\|\||if)/;
 const notifierLookup = new WeakMap<any, Notifier>();

packages/web-components/fast-element/src/styles/css-directive.ts

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { ComposableStyles } from "./element-styles";
+import type { Behavior } from "../observation/behavior.js";
+import type { ComposableStyles } from "./element-styles.js";
 
 /**
  * Directive for use in {@link css}.

packages/web-components/fast-element/src/styles/css.ts

@@ -1,8 +1,8 @@
-import type { FASTElement } from "../components/fast-element";
-import { isString } from "../interfaces";
-import type { Behavior } from "../observation/behavior";
-import { CSSDirective } from "./css-directive";
-import { ComposableStyles, ElementStyles } from "./element-styles";
+import type { FASTElement } from "../components/fast-element.js";
+import { isString } from "../interfaces.js";
+import type { Behavior } from "../observation/behavior.js";
+import { CSSDirective } from "./css-directive.js";
+import { ComposableStyles, ElementStyles } from "./element-styles.js";
 
 function collectStyles(
     strings: TemplateStringsArray,

packages/web-components/fast-element/src/styles/element-styles.ts

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import { DOM, nextId } from "../dom";
+import type { Behavior } from "../observation/behavior.js";
+import { DOM, nextId } from "../dom.js";
 
 /**
  * A node that can be targeted by styles.

packages/web-components/fast-element/src/templating/binding.ts

@@ -1,19 +1,19 @@
-import { DOM } from "../dom";
-import { isString, Mutable } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isString, Mutable } from "../interfaces.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
     setCurrentEvent,
-} from "../observation/observable";
+} from "../observation/observable.js";
 import {
     InlinableHTMLDirective,
     ViewBehavior,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { CaptureType } from "./template";
-import type { SyntheticView } from "./view";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
+import type { SyntheticView } from "./view.js";
 
 export type BindingBehaviorFactory = {
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;

packages/web-components/fast-element/src/templating/children.ts

@@ -1,6 +1,6 @@
-import { isString } from "../interfaces";
-import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
-import type { CaptureType } from "./template";
+import { isString } from "../interfaces.js";
+import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The options used to configure child list observation.

packages/web-components/fast-element/src/templating/compiler.ts

@@ -1,14 +1,14 @@
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { isString } from "../interfaces.js";
+import type { ExecutionContext } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
     HTMLDirective,
     InlinableHTMLDirective,
     ViewBehaviorFactory,
     ViewBehaviorTargets,
-} from "./html-directive";
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import type { ExecutionContext } from "../observation/observable";
-import { bind, oneTime } from "./binding";
-import { isString } from "../interfaces";
+} from "./html-directive.js";
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};

packages/web-components/fast-element/src/templating/html-directive.ts

@@ -1,6 +1,6 @@
-import { DOM, nextId } from "../dom";
-import type { Behavior } from "../observation/behavior";
-import type { Binding, ExecutionContext } from "../observation/observable";
+import { DOM, nextId } from "../dom.js";
+import type { Behavior } from "../observation/behavior.js";
+import type { Binding, ExecutionContext } from "../observation/observable.js";
 
 /**
  * The target nodes available to a behavior.

packages/web-components/fast-element/src/templating/node-observation.ts

@@ -1,9 +1,9 @@
-import type { ExecutionContext } from "../observation/observable";
-import { emptyArray } from "../platform";
+import type { ExecutionContext } from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
+} from "./html-directive.js";
 
 /**
  * Options for configuring node observation behavior.

packages/web-components/fast-element/src/templating/ref.ts

@@ -1,9 +1,9 @@
-import type { CaptureType } from "./template";
+import type { ExecutionContext } from "../observation/observable.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { ExecutionContext } from "../observation/observable";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The runtime behavior for template references.