feat: fast-element utilities, hooks, disposable, and binding observer…

… improvements (#6030) * chore: rebase to accept typescript and api-extractor updates * feat: enable subscribing deeply to observables * feat: introduce Disposable interface and use throughout fast-element * test: add initial tests for makeObservable utility * test: add initial tests for the watch utility * feat: initial prototype of useState() and useEffect() hooks * test: add tests for the useState() hook * refactor: remove disconnect from BindingObserve and add sync updates * chore: fixing up file extension in tests and for disposable * chore: various fixes for Node16 and package exports * chore: update core web component library webpack and karma config * Change files * fix: temporary fix for site build * chore: fix adaptive-ui build and test * Change files * Users/chhol/remove unnecessary site utilities (#6036) * remove site util source directory and update website webpack loaders for assets * fixing fast-foundation dependency version to install workspace version * fixing test errors in fast-site-utilities * removing eslint from site-utilties * fixing path to spect files in adaptive-ui * fixing color-explorer build * remove babel-loader from website Co-authored-by: nicholasrice <[email protected]> * Change files * chore: remove prettier from site-utilities Co-authored-by: EisenbergEffect <[email protected]> Co-authored-by: Chris Holt <[email protected]> Co-authored-by: nicholasrice <[email protected]>
microsoft · May 26, 2022 · e5b97ac · e5b97ac
1 parent 4291216
commit e5b97ac
Show file tree

Hide file tree

Showing 179 changed files with 1,274 additions and 2,861 deletions.
diff --git a/change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json b/change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: fix adaptive-ui build and test",
+  "packageName": "@microsoft/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json b/change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: add utilities and hooks, and change exports",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json b/change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update to latest fast-element and change exports",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json b/change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: various fixes for Node16 and package exports",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json b/change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update to latest fast-element utilities",
+  "packageName": "@microsoft/fast-router",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json b/change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: fix broken build",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/adaptive-ui/.eslintrc.json b/packages/utilities/adaptive-ui/.eslintrc.json
@@ -1,10 +1,6 @@
 {
     "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
     "rules": {
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "import/extensions": [
-            "error",
-            "always"
-        ]
+        "@typescript-eslint/no-non-null-assertion": "off"
     }
 }
diff --git a/packages/utilities/adaptive-ui/.mocharc.json b/packages/utilities/adaptive-ui/.mocharc.json
@@ -2,5 +2,5 @@
   "colors": true,
   "recursive": true,
   "timeout": 5000,
-  "spec": "test/**/*.spec.js"
+  "spec": "dist/**/*.spec.js"
 }
diff --git a/packages/utilities/adaptive-ui/api-extractor.json b/packages/utilities/adaptive-ui/api-extractor.json
@@ -1,4 +1,10 @@
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-    "extends": "../../../api-extractor.json"
-}
+    "extends": "../../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/dts/index.d.ts",
+    "dtsRollup": {
+      "enabled": true,
+      "untrimmedFilePath": "./dist/adaptive-ui.untrimmed.d.ts",
+      "betaTrimmedFilePath": "./dist/adaptive-ui.d.ts"
+    }
+  }
diff --git a/packages/utilities/adaptive-ui/package.json b/packages/utilities/adaptive-ui/package.json
@@ -27,8 +27,8 @@
   },
   "homepage": "https://fast.design",
   "scripts": {
-    "build": "tsc -p ./tsconfig.build.json && yarn doc",
-    "build:tests": "tsc -p ./tsconfig.test.json",
+    "build": "tsc -p ./tsconfig.json && yarn doc",
+    "build:tests": "tsc -p ./tsconfig.json",
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",

diff --git a/packages/utilities/adaptive-ui/tsconfig.build.json b/packages/utilities/adaptive-ui/tsconfig.build.json
diff --git a/packages/utilities/adaptive-ui/tsconfig.json b/packages/utilities/adaptive-ui/tsconfig.json
@@ -1,8 +1,22 @@
 {
     "extends": "../../../tsconfig.json",
     "compilerOptions": {
+        "declarationDir": "dist/dts",
         "outDir": "dist/esm",
-        "types": ["mocha"]
+        "experimentalDecorators": true,
+        "target": "es2015",
+        "module": "ESNext",
+        "moduleResolution": "Node16",
+        "importHelpers": true,
+        "jsx": "react",
+        "types": [
+            "mocha",
+            "webpack-env"
+        ],
+        "lib": [
+            "DOM",
+            "ES2015"
+        ]
     },
     "include": ["src"]
 }
diff --git a/packages/utilities/adaptive-ui/tsconfig.test.json b/packages/utilities/adaptive-ui/tsconfig.test.json
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/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-foundation/testing.js';
+import { uniqueElementName } from '@microsoft/fast-foundation/testing';
 import { expect } from "chai";
 import { DesignSystem, FoundationElement } from "@microsoft/fast-foundation";
 import { provideReactWrapper } from './index.js';

diff --git a/packages/utilities/fast-web-utilities/karma.conf.ts b/packages/utilities/fast-web-utilities/karma.conf.ts
@@ -44,9 +44,9 @@ module.exports = function (config: any) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/__test__/${setup}.js`],
+        files: [`dist/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -65,12 +65,9 @@ module.exports = function (config: any) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
                 nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {

diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
@@ -64,7 +64,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "ts-loader": "^4.0.1",

diff --git a/...b-utilities/src/__test__/setup-browser.ts → ...-utilities/src/__test__/setup-browser.cts b/...b-utilities/src/__test__/setup-browser.ts → ...-utilities/src/__test__/setup-browser.cts
diff --git a/packages/utilities/fast-web-utilities/src/aria.spec.ts b/packages/utilities/fast-web-utilities/src/aria.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { Orientation } from "./aria";
+import { Orientation } from "./aria.js";
 
 describe("aria-orientation", () => {
     it("should correctly return orientation values", () => {

diff --git a/packages/utilities/fast-web-utilities/src/array.spec.ts b/packages/utilities/fast-web-utilities/src/array.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { findLastIndex } from "./array";
+import { findLastIndex } from "./array.js";
 
 describe("findLastIndex", (): void => {
     it("should return -1 when array is empty", (): void => {

diff --git a/packages/utilities/fast-web-utilities/src/class-names.spec.ts b/packages/utilities/fast-web-utilities/src/class-names.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { classNames } from "./class-names";
+import { classNames } from "./class-names.js";
 
 describe("classNames", (): void => {
     it("should return a string when invalid values are provided", (): void => {

diff --git a/packages/utilities/fast-web-utilities/src/dom.spec.ts b/packages/utilities/fast-web-utilities/src/dom.spec.ts
@@ -7,7 +7,7 @@ import {
     getDisplayedNodes,
     isHTMLElement,
     resetDocumentCache,
-} from "./dom";
+} from "./dom.js";
 
 chai.use(spies);
 

diff --git a/packages/utilities/fast-web-utilities/src/html.spec.ts b/packages/utilities/fast-web-utilities/src/html.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { convertStylePropertyPixelsToNumber, getClientRectWithMargin } from "./html";
+import { convertStylePropertyPixelsToNumber, getClientRectWithMargin } from "./html.js";
 
 describe("getClientRectWithMargin", () => {
     const mockWidth: number = 120;

diff --git a/packages/utilities/fast-web-utilities/src/numbers.spec.ts b/packages/utilities/fast-web-utilities/src/numbers.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { inRange, limit, wrapInBounds } from "./numbers";
+import { inRange, limit, wrapInBounds } from "./numbers.js";
 
 describe("wrapInBounds", () => {
     it("should not throw if any parameters are null", () => {

diff --git a/packages/utilities/fast-web-utilities/src/query.spec.ts b/packages/utilities/fast-web-utilities/src/query.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { parseQueryStringParams } from "./query";
+import { parseQueryStringParams } from "./query.js";
 
 describe("parseQueryStringParams", (): void => {
     it("basic query string", (): void => {

diff --git a/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts b/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { RtlScrollConverter } from "./rtl-scroll-converter";
-import { Direction } from "./localization";
+import { RtlScrollConverter } from "./rtl-scroll-converter.js";
+import { Direction } from "./localization.js";
 
 function getDummyDiv(): HTMLDivElement {
     const dummy: HTMLDivElement = document.createElement("div");

diff --git a/packages/utilities/fast-web-utilities/src/strings.spec.ts b/packages/utilities/fast-web-utilities/src/strings.spec.ts
@@ -5,7 +5,7 @@ import {
     pascalCase,
     spinalCase,
     startsWith,
-} from "./strings";
+} from "./strings.js";
 
 describe("format", (): void => {
     it("should correctly manage undefined by returning an unformatted string", (): void => {

diff --git a/packages/web-components/fast-element/.eslintrc.cjs b/packages/web-components/fast-element/.eslintrc.cjs
diff --git a/packages/web-components/fast-element/.eslintrc.json b/packages/web-components/fast-element/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "{}": false,
+                    "Function": false,
+                    "Object": false
+                },
+                "extendDefaults": true
+            }
+        ]
+    }
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
@@ -138,10 +138,10 @@ export const BindingMode: Readonly<{
 }>;
 
 // @public
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
-    disconnect(): void;
+export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier, Disposable {
     observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
     records(): IterableIterator<ObservationRecord>;
+    setMode(isAsync: boolean): void;
 }
 
 // @public
@@ -301,6 +301,11 @@ export type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
     fromView?: (value: any) => any;
 };
 
+// @public
+export interface Disposable {
+    dispose(): void;
+}
+
 // @public
 export const DOM: Readonly<{
     queueUpdate: (callable: Callable) => void;
@@ -826,7 +831,6 @@ export interface SubtreeDirectiveOptions<T = any> extends Omit<NodeBehaviorOptio
 
 // @public
 export interface SyntheticView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends View<TSource, TParent, TContext> {
-    dispose(): void;
     readonly firstChild: Node;
     insertBefore(node: Node): void;
     readonly lastChild: Node;
@@ -928,10 +932,9 @@ export interface ValueConverter {
 }
 
 // @public
-export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends Disposable {
     bind(source: TSource, context: TContext): void;
     readonly context: TContext | null;
-    dispose(): void;
     readonly source: TSource | null;
     unbind(): void;
 }