From 010bbf5b408c950b35f9c6cd729dd56178a0abf2 Mon Sep 17 00:00:00 2001 From: Efren Aragon Date: Thu, 4 May 2023 14:39:31 -0400 Subject: [PATCH 1/5] feat: setup strict to true in tsconfig --- code/addons/measure/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 } } From f33f7092efe3738ff9390e0b25553aff97dd5661 Mon Sep 17 00:00:00 2001 From: Efren Aragon Date: Thu, 4 May 2023 15:35:33 -0400 Subject: [PATCH 2/5] add(package.json): tiny-invariant lib --- code/addons/measure/package.json | 3 ++- code/yarn.lock | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 9f6d9cc92fab..0e5d11937c86 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.27", "@storybook/preview-api": "7.1.0-alpha.27", - "@storybook/types": "7.1.0-alpha.27" + "@storybook/types": "7.1.0-alpha.27", + "tiny-invariant": "^1.3.1" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/yarn.lock b/code/yarn.lock index 394b4f2c74d4..50671dbcf6fb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5555,6 +5555,7 @@ __metadata: "@storybook/manager-api": 7.1.0-alpha.27 "@storybook/preview-api": 7.1.0-alpha.27 "@storybook/types": 7.1.0-alpha.27 + tiny-invariant: ^1.3.1 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 From 0044d9dccd4a4d8e2bff000755b81bd0c0bade35 Mon Sep 17 00:00:00 2001 From: Efren Aragon Date: Thu, 4 May 2023 15:37:17 -0400 Subject: [PATCH 3/5] fix: ts errors in addon-measure --- code/addons/measure/src/box-model/canvas.ts | 11 +++++++---- code/addons/measure/src/box-model/labels.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/addons/measure/src/box-model/canvas.ts b/code/addons/measure/src/box-model/canvas.ts index 653e3f005ac1..e40c8a22d306 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; @@ -24,7 +25,7 @@ function getDocumentWidthAndHeight() { function createCanvas(): CanvasState { const canvas = global.document.createElement('canvas'); canvas.id = 'storybook-addon-measure'; - const context = canvas.getContext('2d'); + const context = canvas.getContext('2d') as CanvasRenderingContext2D; // Set canvas width & height const { width, height } = getDocumentWidthAndHeight(); setCanvasWidthAndHeight(canvas, context, { width, height }); @@ -67,16 +68,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 +94,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; }, {}); From 62e3a676d9122a48001137580e2aa7554865307f Mon Sep 17 00:00:00 2001 From: Efren Aragon Date: Sun, 14 May 2023 20:13:18 -0400 Subject: [PATCH 4/5] fix: ts errors from rebase with next branch --- code/addons/measure/src/box-model/visualizer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); From cb6818f6cbccc3d0e621b251474fa94962223921 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 31 May 2023 11:03:32 +0200 Subject: [PATCH 5/5] Use tiny-invariant over `as` --- code/addons/measure/src/box-model/canvas.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/measure/src/box-model/canvas.ts b/code/addons/measure/src/box-model/canvas.ts index e40c8a22d306..61c2691e1598 100644 --- a/code/addons/measure/src/box-model/canvas.ts +++ b/code/addons/measure/src/box-model/canvas.ts @@ -25,7 +25,8 @@ function getDocumentWidthAndHeight() { function createCanvas(): CanvasState { const canvas = global.document.createElement('canvas'); canvas.id = 'storybook-addon-measure'; - const context = canvas.getContext('2d') as CanvasRenderingContext2D; + const context = canvas.getContext('2d'); + invariant(context != null); // Set canvas width & height const { width, height } = getDocumentWidthAndHeight(); setCanvasWidthAndHeight(canvas, context, { width, height });