diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 2ea2655c982b..22b5a9d34c41 100644 --- a/code/addons/measure/package.json +++ b/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" diff --git a/code/addons/measure/src/box-model/canvas.ts b/code/addons/measure/src/box-model/canvas.ts index 653e3f005ac1..61c2691e1598 100644 --- a/code/addons/measure/src/box-model/canvas.ts +++ b/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 = {}; } } diff --git a/code/addons/measure/src/box-model/labels.ts b/code/addons/measure/src/box-model/labels.ts index 80bbf440c92e..022dfdd786c2 100644 --- a/code/addons/measure/src/box-model/labels.ts +++ b/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; }, {}); diff --git a/code/addons/measure/src/box-model/visualizer.ts b/code/addons/measure/src/box-model/visualizer.ts index eba2de27573b..22b4523aebb2 100644 --- a/code/addons/measure/src/box-model/visualizer.ts +++ b/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); diff --git a/code/addons/measure/tsconfig.json b/code/addons/measure/tsconfig.json index 4c6f20a1be4d..b5a2f9a70918 100644 --- a/code/addons/measure/tsconfig.json +++ b/code/addons/measure/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../../tsconfig.json", "include": ["src/**/*"], "compilerOptions": { - "strict": false + "strict": true } } diff --git a/code/yarn.lock b/code/yarn.lock index b4a8d2e1cdfd..56a92740ac20 100644 --- a/code/yarn.lock +++ b/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