fix: removes circular dependencies from web-component packages (micro…

…soft#3037)

* add process to detect circular dependencies

* fix fast-element circular dependencies

* fix fast-element circular dependencies

* fixing slider circular dependencies

* fixing design-system-provider circular dependencies

* fail on error in test

* cleanup

* pretty pretty

* fixing lockfile

packages/web-components/fast-components/.storybook/main.js

@@ -1,3 +1,5 @@
+const CircularDependencyPlugin = require("circular-dependency-plugin");
+
 module.exports = {
     stories: ["../src/**/*.stories.ts"],
     webpackFinal: async config => {
@@ -10,6 +12,12 @@ module.exports = {
             ],
         });
         config.resolve.extensions.push(".ts");
+        config.plugins.push(
+            new CircularDependencyPlugin({
+                exclude: /node_modules/,
+                failOnError: process.env.NODE_ENV === "production",
+            })
+        );
 
         return config;
     },

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

@@ -34,6 +34,7 @@
     "@microsoft/eslint-config-fast-dna": "^1.1.1",
     "@storybook/cli": "^5.3.13",
     "@storybook/html": "^5.3.13",
+    "circular-dependency-plugin": "^5.2.0",
     "prettier": "2.0.2",
     "ts-loader": "^6.2.1",
     "typescript": "^3.7.5"

packages/web-components/fast-components/src/design-system-consumer/design-system-consumer.ts

@@ -1,6 +1,7 @@
 import { Behavior } from "@microsoft/fast-element";
 import { composedParent } from "../utilities";
-import { DesignSystemProvider, isDesignSystemProvider } from "../design-system-provider";
+import { DesignSystemProvider } from "../design-system-provider";
+import { isDesignSystemProvider } from "../design-system-provider/is-design-system-provider";
 
 export interface DesignSystemConsumer {
     provider: DesignSystemProvider | null;

packages/web-components/fast-components/src/design-system-provider/design-system-provider.ts

@@ -7,6 +7,7 @@ import {
     CSSCustomPropertyDefinition,
     CSSCustomPropertyTarget,
 } from "../custom-properties";
+import { isDesignSystemProvider } from "./is-design-system-provider";
 
 interface DesignSystemPropertyDeclarationConfig {
     customPropertyName?: string;
@@ -59,18 +60,6 @@ export function designSystemProperty<T extends DesignSystemProvider>(
     }
 }
 
-/**
- * Type-safe checking for if an HTMLElement is a DesignSystemProvider.
- * @param el The element to test
- */
-export function isDesignSystemProvider(
-    el: HTMLElement | DesignSystemProvider
-): el is DesignSystemProvider {
-    return (
-        (el as any).isDesignSystemProvider || el.tagName === "FAST-DESIGN-SYSTEM-PROVIDER"
-    );
-}
-
 const supportsAdoptedStylesheets = "adoptedStyleSheets" in window.ShadowRoot.prototype;
 
 export class DesignSystemProvider extends FASTElement

packages/web-components/fast-components/src/design-system-provider/is-design-system-provider.ts

@@ -0,0 +1,13 @@
+import { DesignSystemProvider } from "./design-system-provider";
+
+/**
+ * Type-safe checking for if an HTMLElement is a DesignSystemProvider.
+ * @param el The element to test
+ */
+export function isDesignSystemProvider(
+    el: HTMLElement | DesignSystemProvider
+): el is DesignSystemProvider {
+    return (
+        (el as any).isDesignSystemProvider || el.tagName === "FAST-DESIGN-SYSTEM-PROVIDER"
+    );
+}

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

@@ -1,26 +1,8 @@
 import { customElement } from "@microsoft/fast-element";
-import { Direction } from "@microsoft/fast-web-utilities";
 import { Slider } from "./slider";
 import { SliderTemplate as template } from "./slider.template";
 import { SliderStyles as styles } from "./slider.styles";
 
-export enum SliderMode {
-    singleValue = "single-value",
-}
-
-export enum SliderOrientation {
-    horizontal = "horizontal",
-    vertical = "vertical",
-}
-
-export interface SliderConfiguration {
-    max: number;
-    min: number;
-    orientation?: SliderOrientation;
-    direction?: Direction;
-    disabled?: boolean;
-}
-
 @customElement({
     name: "fast-slider",
     template,

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

@@ -10,7 +10,23 @@ import {
 } from "@microsoft/fast-web-utilities";
 import { FormAssociated } from "../form-associated";
 import { convertPixelToPercent } from "./slider-utilities";
-import { SliderConfiguration, SliderMode, SliderOrientation } from "./index";
+
+export enum SliderMode {
+    singleValue = "single-value",
+}
+
+export enum SliderOrientation {
+    horizontal = "horizontal",
+    vertical = "vertical",
+}
+
+export interface SliderConfiguration {
+    max: number;
+    min: number;
+    orientation?: SliderOrientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
 
 export class Slider extends FormAssociated<HTMLInputElement>
     implements SliderConfiguration {

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

@@ -1,4 +1,4 @@
-import { FASTElement, FASTElementDefinition } from "./fast-element";
+import { FASTElementDefinition, getDefinition } from "./fast-definitions";
 import { ElementView } from "./view";
 import { PropertyChangeNotifier } from "./observation/notifier";
 import { defaultExecutionContext, Observable } from "./observation/observable";
@@ -230,7 +230,7 @@ export class Controller extends PropertyChangeNotifier {
             return controller;
         }
 
-        const definition = FASTElement.getDefinition(element.constructor as any);
+        const definition = getDefinition(element.constructor as any);
 
         if (definition === void 0) {
             throw new Error("Missing fast element definition.");

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

@@ -0,0 +1,33 @@
+import { ElementViewTemplate } from "./template";
+import { ElementStyles } from "./styles";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+
+export class FASTElementDefinition {
+    public constructor(
+        public readonly name: string,
+        public readonly attributes: ReadonlyArray<AttributeDefinition>,
+        public readonly propertyLookup: Record<string, AttributeDefinition>,
+        public readonly attributeLookup: Record<string, AttributeDefinition>,
+        public readonly template?: ElementViewTemplate,
+        public readonly styles?: ElementStyles,
+        public readonly shadowOptions?: ShadowRootInit,
+        public readonly elementOptions?: ElementDefinitionOptions
+    ) {}
+}
+
+export type PartialFASTElementDefinition = {
+    readonly name: string;
+    readonly template?: ElementViewTemplate;
+    readonly styles?: ElementStyles;
+    readonly attributes?: (AttributeConfiguration | string)[];
+    readonly shadowOptions?: Partial<ShadowRootInit> | null;
+    readonly elementOptions?: ElementDefinitionOptions;
+};
+
+export const fastDefinitions = new Map<Function, FASTElementDefinition>();
+
+export function getDefinition<T extends Function>(
+    Type: T
+): FASTElementDefinition | undefined {
+    return fastDefinitions.get(Type);
+}

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

@@ -1,34 +1,16 @@
+import { AttributeDefinition } from "./attributes";
 import { Controller } from "./controller";
-import { ElementViewTemplate } from "./template";
-import { ElementStyles } from "./styles";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
 import { Observable } from "./observation/observable";
+import {
+    fastDefinitions,
+    FASTElementDefinition,
+    getDefinition,
+    PartialFASTElementDefinition,
+} from "./fast-definitions";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};
 
-export type PartialFASTElementDefinition = {
-    readonly name: string;
-    readonly template?: ElementViewTemplate;
-    readonly styles?: ElementStyles;
-    readonly attributes?: (AttributeConfiguration | string)[];
-    readonly shadowOptions?: Partial<ShadowRootInit> | null;
-    readonly elementOptions?: ElementDefinitionOptions;
-};
-
-export class FASTElementDefinition {
-    public constructor(
-        public readonly name: string,
-        public readonly attributes: ReadonlyArray<AttributeDefinition>,
-        public readonly propertyLookup: Record<string, AttributeDefinition>,
-        public readonly attributeLookup: Record<string, AttributeDefinition>,
-        public readonly template?: ElementViewTemplate,
-        public readonly styles?: ElementStyles,
-        public readonly shadowOptions?: ShadowRootInit,
-        public readonly elementOptions?: ElementDefinitionOptions
-    ) {}
-}
-
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType: typeof HTMLElement) {
     return class FASTElement extends BaseType {
@@ -65,8 +47,6 @@ function createFASTElement(BaseType: typeof HTMLElement) {
     };
 }
 
-const fastDefinitions = new Map<Function, FASTElementDefinition>();
-
 export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
     from(BaseType: typeof HTMLElement) {
         return createFASTElement(BaseType);
@@ -128,9 +108,7 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
         return Type;
     },
 
-    getDefinition<T extends Function>(Type: T): FASTElementDefinition | undefined {
-        return fastDefinitions.get(Type);
-    },
+    getDefinition,
 });
 
 export function customElement(nameOrDef: string | PartialFASTElementDefinition) {

yarn.lock

@@ -8174,6 +8174,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+circular-dependency-plugin@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-5.2.0.tgz#e09dbc2dd3e2928442403e2d45b41cea06bc0a93"
+  integrity sha512-7p4Kn/gffhQaavNfyDFg7LS5S/UT1JAjyGd4UqR2+jzoYF02eDkj0Ec3+48TsIa4zghjLY87nQHIh/ecK9qLdw==
+
 clap@^1.0.9:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"