Addon-measure: Migrate to strict TS

code/addons/measure/package.json

@@ -81,7 +81,8 @@
     "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.1.0-alpha.29",
     "@storybook/preview-api": "7.1.0-alpha.29",
-    "@storybook/types": "7.1.0-alpha.29"
+    "@storybook/types": "7.1.0-alpha.29",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "typescript": "~4.9.3"

code/addons/measure/src/box-model/canvas.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { global } from '@storybook/global';
+import invariant from 'tiny-invariant';
 
 interface Size {
   width: number;
@@ -25,6 +26,7 @@ function createCanvas(): CanvasState {
   const canvas = global.document.createElement('canvas');
   canvas.id = 'storybook-addon-measure';
   const context = canvas.getContext('2d');
+  invariant(context != null);
   // Set canvas width & height
   const { width, height } = getDocumentWidthAndHeight();
   setCanvasWidthAndHeight(canvas, context, { width, height });
@@ -67,16 +69,18 @@ export function init() {
 
 export function clear() {
   if (state.context) {
-    state.context.clearRect(0, 0, state.width, state.height);
+    state.context.clearRect(0, 0, state.width ?? 0, state.height ?? 0);
   }
 }
 
-export function draw(callback: (context: CanvasRenderingContext2D) => void) {
+export function draw(callback: (context?: CanvasRenderingContext2D) => void) {
   clear();
   callback(state.context);
 }
 
 export function rescale() {
+  invariant(state.canvas, 'Canvas should exist in the state.');
+  invariant(state.context, 'Context should exist in the state.');
   // First reset so that the canvas size doesn't impact the container size
   setCanvasWidthAndHeight(state.canvas, state.context, { width: 0, height: 0 });
 
@@ -91,7 +95,7 @@ export function rescale() {
 export function destroy() {
   if (state.canvas) {
     clear();
-    state.canvas.parentNode.removeChild(state.canvas);
+    state.canvas.parentNode?.removeChild(state.canvas);
     state = {};
   }
 }

code/addons/measure/src/box-model/labels.ts

@@ -285,7 +285,7 @@ export function labelStacks(
       acc[l.position] = [];
     }
 
-    acc[l.position].push(l);
+    acc[l.position]?.push(l);
 
     return acc;
   }, {});

code/addons/measure/src/box-model/visualizer.ts

@@ -282,7 +282,7 @@ function drawContent(
 }
 
 function drawBoxModel(element: HTMLElement) {
-  return (context: CanvasRenderingContext2D) => {
+  return (context?: CanvasRenderingContext2D) => {
     if (element && context) {
       const measurements = measureElement(element);
 

code/addons/measure/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }

code/yarn.lock

@@ -5555,6 +5555,7 @@ __metadata:
     "@storybook/manager-api": 7.1.0-alpha.29
     "@storybook/preview-api": 7.1.0-alpha.29
     "@storybook/types": 7.1.0-alpha.29
+    tiny-invariant: ^1.3.1
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0