Turn on strict compilation mode (#218)

Author: bheston

change/@adaptive-web-adaptive-ui-0e754ad7-4d2d-4075-ab2d-064d314e21f6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Turn on strict compilation mode",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-core-61534f82-7ad1-4cc3-827f-a773f0158229.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Turn on strict compilation mode",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-web-components-50a3cba4-cda8-41ad-ba24-024b430b1065.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Turn on strict compilation mode",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package-lock.json

@@ -218,7 +218,7 @@ export abstract class PluginNode {
     /**
      * Configuration options for a node.
      */
-    public config: Config;
+    public config: Config = new Config();
 
     protected deserializeLocalDesignTokens(): DesignTokenValues {
         const json = this.getPluginData("designTokens");

packages/adaptive-ui-designer-core/src/node.ts

@@ -38,6 +38,9 @@
     "@adaptive-web/adaptive-ui-designer-core": "^0.3.1",
     "@adaptive-web/adaptive-ui-designer-figma": "^0.4.1",
     "@adaptive-web/adaptive-web-components": "0.7.4",
+    "@csstools/css-calc": "^1.1.1",
+    "@csstools/css-parser-algorithms": "^2.2.0",
+    "@csstools/css-tokenizer": "^2.1.1",
     "change-case": "^5.4.4",
     "culori": "^3.2.0"
   },
@@ -47,9 +50,6 @@
     "@microsoft/fast-foundation": "3.0.0-alpha.31"
   },
   "devDependencies": {
-    "@csstools/css-calc": "^1.1.1",
-    "@csstools/css-parser-algorithms": "^2.2.0",
-    "@csstools/css-tokenizer": "^2.1.1",
     "@figma/plugin-typings": "^1.80.0",
     "concurrently": "^7.6.0",
     "esbuild": "^0.17.10",

packages/adaptive-ui-designer-figma-plugin/package.json

@@ -37,7 +37,7 @@ const appliedStylesTemplate = (
             <p class="title">Styles</p>
             <div class="swatch-stack">
                 ${repeat(
-                    (x) => x.appliedStyleModules.get(group),
+                    (x) => x.appliedStyleModules.get(group)!,
                     html<StyleModuleDisplay, App>`
                         <div class="style-module applied">
                             <span class="content">
@@ -71,7 +71,7 @@ const availableStylesTemplate = (
     <p class="title">Styles</p>
     <div class="swatch-stack">
         ${repeat(
-            (x) => x.controller.styles.getAvailableStyleModules().get(group),
+            (x) => x.controller.styles.getAvailableStyleModules().get(group)!,
             html<StyleModuleDisplay, App>`
                 <div class="style-module available">
                     <span
@@ -108,7 +108,7 @@ const appliedTokensTemplate = (
             )}
             <div class="swatch-stack">
                 ${repeat(
-                    (_) => tokens,
+                    (_) => tokens!,
                     html<AppliedDesignTokenItem, App>`
                         <designer-style-token-item
                             title=${(x, c) => c.parent.controller.styles.getAppliableDesignTokenDefinition(x.tokenID)?.title}
@@ -153,7 +153,7 @@ const availableTokensTemplate = (
                             value=${(x, c) => c.parent.controller.designTokens.getDefaultDesignTokenValueAsString(x.token)}
                             glyphType=${(_) => glyphType}
                             content-button
-                            @click=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor, x)}
+                            @click=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor || [], x)}
                         >
                         </designer-style-token-item>
                     `
@@ -570,55 +570,55 @@ export class App extends FASTElement {
     public readonly controller: UIController;
 
     @observable
-    public supportsStyling: boolean;
+    public supportsStyling: boolean = false;
 
     @observable
-    public supportsColor: boolean;
+    public supportsColor: boolean = false;
 
     @observable
-    public supportsBorderThickness: boolean;
+    public supportsBorderThickness: boolean = false;
 
     @observable
-    public supportsDensity: boolean;
+    public supportsDensity: boolean = false;
 
     @observable
-    public supportsCornerRadius: boolean;
+    public supportsCornerRadius: boolean = false;
 
     @observable
-    public supportsText: boolean;
+    public supportsText: boolean = false;
 
     @observable
-    public supportsShadow: boolean;
+    public supportsShadow: boolean = false;
 
     @observable
-    public layerTokens: AppliedDesignTokenItem[] | null;
+    public layerTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public backgroundTokens: AppliedDesignTokenItem[] | null;
+    public backgroundTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public foregroundTokens: AppliedDesignTokenItem[] | null;
+    public foregroundTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public borderFillTokens: AppliedDesignTokenItem[] | null;
+    public borderFillTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public borderThicknessTokens: AppliedDesignTokenItem[] | null;
+    public borderThicknessTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public densityTokens: AppliedDesignTokenItem[] | null;
+    public densityTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public cornerRadiusTokens: AppliedDesignTokenItem[] | null;
+    public cornerRadiusTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public textTokens: AppliedDesignTokenItem[] | null;
+    public textTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public shadowTokens: AppliedDesignTokenItem[] | null;
+    public shadowTokens: AppliedDesignTokenItem[] | null = null;
 
     @observable
-    public supportsDesignSystem: boolean;
+    public supportsDesignSystem: boolean = false;
 
     @observable
     public appliedStyleModules: StyleModuleDisplayList = new Map();
@@ -627,39 +627,41 @@ export class App extends FASTElement {
     public statesState: StatesState | "unknown" = "unknown";
 
     @observable
-    public selectionDescription: string;
+    public selectionDescription: string = "No selection";
 
     @observable
-    public selectedNodes: PluginUINodeData[] | null;
+    public selectedNodes: PluginUINodeData[] | null = null;
     protected selectedNodesChanged(prev: PluginUINodeData[] | null, next: PluginUINodeData[] | null) {
-        this.controller.selectedNodes = next;
-
-        this.selectionDescription = this.selectedNodes?.map((node) => `${node.type}`).join(" | ") || "No selection";
-
-        this.supportsColor =
-            this.selectedNodes?.some(
-                (node) =>
-                    node.supports.includes(StyleProperty.backgroundFill) ||
-                    node.supports.includes(StyleProperty.foregroundFill) ||
-                    node.supports.includes(StyleProperty.borderFillTop)
-            ) || false;
-        this.supportsBorderThickness = this.controller.supports(StyleProperty.borderThicknessTop);
-        this.supportsDensity = this.controller.supports(StyleProperty.gap);
-        this.supportsCornerRadius = this.controller.supports(StyleProperty.cornerRadiusTopLeft);
-        this.supportsText = this.controller.supports(StyleProperty.fontFamily);
-        this.supportsShadow = this.controller.supports(StyleProperty.shadow);
-
-        this.supportsStyling =
-            this.supportsColor ||
-            this.supportsBorderThickness ||
-            this.supportsDensity ||
-            this.supportsCornerRadius ||
-            this.supportsText ||
-            this.supportsShadow;
-
-        this.supportsDesignSystem = true;
-
-        this.refreshObservables();
+        if (this.controller) {
+            this.controller.selectedNodes = next || [];
+
+            this.selectionDescription = this.selectedNodes?.map((node) => `${node.type}`).join(" | ") || "No selection";
+
+            this.supportsColor =
+                this.selectedNodes?.some(
+                    (node) =>
+                        node.supports.includes(StyleProperty.backgroundFill) ||
+                        node.supports.includes(StyleProperty.foregroundFill) ||
+                        node.supports.includes(StyleProperty.borderFillTop)
+                ) || false;
+            this.supportsBorderThickness = this.controller.supports(StyleProperty.borderThicknessTop);
+            this.supportsDensity = this.controller.supports(StyleProperty.gap);
+            this.supportsCornerRadius = this.controller.supports(StyleProperty.cornerRadiusTopLeft);
+            this.supportsText = this.controller.supports(StyleProperty.fontFamily);
+            this.supportsShadow = this.controller.supports(StyleProperty.shadow);
+
+            this.supportsStyling =
+                this.supportsColor ||
+                this.supportsBorderThickness ||
+                this.supportsDensity ||
+                this.supportsCornerRadius ||
+                this.supportsText ||
+                this.supportsShadow;
+
+            this.supportsDesignSystem = true;
+
+            this.refreshObservables();
+        }
     }
 
     constructor() {

packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts

@@ -72,27 +72,29 @@ export class DesignTokenAdd extends FASTElement {
     @observable
     selectedDesignToken?: DesignTokenDefinition;
 
-    list: HTMLSelectElement;
+    list?: HTMLSelectElement;
 
-    field: DesignTokenField;
+    field?: DesignTokenField;
 
     selectHandler(c: ExecutionContext) {
-        const selectedTokenId = (c.event.target as HTMLSelectElement).value;
+        const selectedTokenId = (c.event.target as unknown as HTMLSelectElement).value;
 
         if (selectedTokenId !== "-") {
             this.selectedDesignToken = this.designTokens.find((token) => {
                 return token.id === selectedTokenId;
             });
-            this.list.value = "-";
+            if (this.list) {
+                this.list.value = "-";
+            }
 
             if (this.field) {
-                this.field.value = this.selectedDesignToken.token.default;
+                this.field.value = this.selectedDesignToken?.token.default;
             }
         }
     }
 
     addHandler() {
-        if (this.field.value) {
+        if (this.field?.value) {
             this.$emit("add", {
                 definition: this.selectedDesignToken,
                 value: this.field.value,

packages/adaptive-ui-designer-figma-plugin/src/ui/components/design-token-add/index.ts

@@ -82,15 +82,15 @@ export class StealthButton extends FASTElement {
         return this.slotHasContent(
             (this.shadowRoot as ShadowRoot).querySelector(
                 "[id='glyph']"
-            ) as HTMLSlotElement
+            ) as unknown as HTMLSlotElement
         );
     }
 
     private hasContent(): boolean {
         return this.slotHasContent(
             (this.shadowRoot as ShadowRoot).querySelector(
                 "[id='content']"
-            ) as HTMLSlotElement
+            ) as unknown as HTMLSlotElement
         );
     }
 

packages/adaptive-ui-designer-figma-plugin/src/ui/components/stealth-button/index.ts

@@ -65,10 +65,10 @@ const styles = css`
 })
 export class StyleTokenItem extends FASTElement {
     @attr
-    public title: string;
+    public title: string = "";
 
     @attr
-    public value: string;
+    public value: string = "";
 
     @attr
     public glyphType?: TokenGlyphType;