From 0502d294f3ab085a3eadae6054d73757107d802c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Aug 2024 16:12:31 +0200 Subject: [PATCH] Get rid of all logs and cleanup --- .../polyfills/promise-with-resolvers.ts | 19 --------- .storybook-vite/preview.tsx | 42 +++++++++---------- .storybook-vite/storybook.setup.ts | 24 ++--------- .storybook-vite/vitest.config.mts | 13 ------ .storybook-vite/vitest.setup.crypto.ts | 5 --- .storybook/main.ts | 3 -- components/note-preview.tsx | 22 +--------- lib/sanitize-html.mock.ts | 3 ++ lib/sanitize-html.ts | 22 ++++++++++ package.json | 9 ++++ pnpm-lock.yaml | 24 +++++++++-- 11 files changed, 81 insertions(+), 105 deletions(-) delete mode 100644 .storybook-vite/polyfills/promise-with-resolvers.ts delete mode 100644 .storybook-vite/vitest.setup.crypto.ts create mode 100644 lib/sanitize-html.mock.ts create mode 100644 lib/sanitize-html.ts diff --git a/.storybook-vite/polyfills/promise-with-resolvers.ts b/.storybook-vite/polyfills/promise-with-resolvers.ts deleted file mode 100644 index 34fb581..0000000 --- a/.storybook-vite/polyfills/promise-with-resolvers.ts +++ /dev/null @@ -1,19 +0,0 @@ -if (typeof (Promise as any).withResolvers === "undefined") { - (Promise as any).withResolvers = (): { - promise: Promise; - resolve: (value: T | PromiseLike) => void; - // biome-ignore lint/suspicious/noExplicitAny: any is needed for the reject function - reject: (reason?: any) => void; - } => { - let resolve: (value: T | PromiseLike) => void; - let reject: (reason?: unknown) => void; - - const promise = new Promise((res, rej) => { - resolve = res; - reject = rej; - }); - - // @ts-ignore - return { promise, resolve, reject }; - }; -} diff --git a/.storybook-vite/preview.tsx b/.storybook-vite/preview.tsx index 4e67923..239650a 100644 --- a/.storybook-vite/preview.tsx +++ b/.storybook-vite/preview.tsx @@ -4,32 +4,30 @@ import { initialize, mswLoader } from 'msw-storybook-addon' import * as MockDate from 'mockdate' import { initializeDB } from '#lib/db.mock' -initialize({ onUnhandledRequest: 'bypass', quiet: false }) +initialize({ onUnhandledRequest: 'bypass', quiet: true }) const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - test: { - // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058 - // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown. - dangerouslyIgnoreUnhandledErrors: true, - }, - nextjs: { appDirectory: true }, + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, }, - loaders: [() => { - }, mswLoader, () => { - }], - beforeEach() { - // Fixed dates for consistent screenshots - MockDate.set('2024-04-18T12:24:02Z') - // reset the database to avoid hanging state between stories - initializeDB() + test: { + // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058 + // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown. + dangerouslyIgnoreUnhandledErrors: true, }, + nextjs: { appDirectory: true }, + }, + loaders: [mswLoader], + beforeEach() { + // Fixed dates for consistent screenshots + MockDate.set('2024-04-18T12:24:02Z') + // reset the database to avoid hanging state between stories + initializeDB() + }, } export default preview diff --git a/.storybook-vite/storybook.setup.ts b/.storybook-vite/storybook.setup.ts index a4e27a7..a38a780 100644 --- a/.storybook-vite/storybook.setup.ts +++ b/.storybook-vite/storybook.setup.ts @@ -1,26 +1,10 @@ -import { beforeAll, beforeEach } from 'vitest' +import { beforeAll } from 'vitest' import { setProjectAnnotations } from '@storybook/nextjs' -import * as rendererDocsAnnotations from '@storybook/react/dist/entry-preview-docs.mjs' import * as rscAnnotations from '@storybook/react/dist/entry-preview-rsc.mjs' -import * as addonActionsAnnotations from '@storybook/addon-actions/preview' -import * as addonInteractionsAnnotations from '@storybook/addon-interactions/preview' import * as projectAnnotations from './preview' -import "./polyfills/promise-with-resolvers"; +// promise with resolveres polyfill +import '@ungap/with-resolvers' - -const { cleanup, render: testingLibraryRender } = await import( - '@testing-library/react/pure' -) - -beforeEach(cleanup) - -const annotations = setProjectAnnotations([ - rscAnnotations, - rendererDocsAnnotations, - addonActionsAnnotations, - addonInteractionsAnnotations, - projectAnnotations, - { testingLibraryRender }, -]) +const annotations = setProjectAnnotations([projectAnnotations, rscAnnotations]) beforeAll(annotations.beforeAll!) diff --git a/.storybook-vite/vitest.config.mts b/.storybook-vite/vitest.config.mts index 5ae49fc..3d29388 100644 --- a/.storybook-vite/vitest.config.mts +++ b/.storybook-vite/vitest.config.mts @@ -11,18 +11,6 @@ export default defineConfig({ storybookTest({ storybookScript: 'pnpm run storybook --ci', }), - { - name: 'crypto-polyfill', - config(config) { - if (!config.test?.browser?.enabled) { - return { - test: { - setupFiles: ['./.storybook-vite/vitest.setup.crypto.ts'], - }, - } - } - }, - }, ], publicDir: './public', test: { @@ -36,6 +24,5 @@ export default defineConfig({ screenshotFailures: false, }, setupFiles: ['./.storybook-vite/storybook.setup.ts'], - environment: 'happy-dom', }, }) diff --git a/.storybook-vite/vitest.setup.crypto.ts b/.storybook-vite/vitest.setup.crypto.ts deleted file mode 100644 index c3b4095..0000000 --- a/.storybook-vite/vitest.setup.crypto.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { webcrypto } from 'node:crypto' - -Object.defineProperty(globalThis, 'crypto', { - value: webcrypto, -}) \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 0e5bdd0..1e68fa4 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -12,9 +12,6 @@ const config: StorybookConfig = { name: '@storybook/nextjs', options: {}, }, - docs: { - autodocs: 'tag', - }, features: { experimentalRSC: true, }, diff --git a/components/note-preview.tsx b/components/note-preview.tsx index 4b8ed1c..51a27f3 100644 --- a/components/note-preview.tsx +++ b/components/note-preview.tsx @@ -1,22 +1,7 @@ import React from 'react' // @ts-expect-error add types/upgrade dep import marked from 'marked' -// @ts-expect-error add types/upgrade dep -import sanitizeHtml from 'sanitize-html' - -const allowedTags = sanitizeHtml.defaults.allowedTags.concat([ - 'img', - 'h1', - 'h2', - 'h3', -]) -const allowedAttributes = Object.assign( - {}, - sanitizeHtml.defaults.allowedAttributes, - { - img: ['alt', 'src'], - }, -) +import { sanitizeHtml } from '#lib/sanitize-html' export default function NotePreview({ children, @@ -28,10 +13,7 @@ export default function NotePreview({
diff --git a/lib/sanitize-html.mock.ts b/lib/sanitize-html.mock.ts new file mode 100644 index 0000000..c9560b4 --- /dev/null +++ b/lib/sanitize-html.mock.ts @@ -0,0 +1,3 @@ +// This module gives a lot of warnings when run in the browser. +// See https://github.com/apostrophecms/sanitize-html/issues/664 +export const sanitizeHtml = (html: string) => html diff --git a/lib/sanitize-html.ts b/lib/sanitize-html.ts new file mode 100644 index 0000000..0eaed02 --- /dev/null +++ b/lib/sanitize-html.ts @@ -0,0 +1,22 @@ +import _sanitizeHtml from 'sanitize-html' + +const allowedTags = _sanitizeHtml.defaults.allowedTags.concat([ + 'img', + 'h1', + 'h2', + 'h3', +]) +const allowedAttributes = Object.assign( + {}, + _sanitizeHtml.defaults.allowedAttributes, + { + img: ['alt', 'src'], + }, +) + +export const sanitizeHtml = (html: string) => { + return _sanitizeHtml(html, { + allowedTags, + allowedAttributes, + }) +} diff --git a/package.json b/package.json index d232b5a..8e00d54 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,8 @@ { "private": true, + "engines": { + "node": ">=20" + }, "imports": { "#app/actions": { "storybook": "./app/actions.mock.ts", @@ -13,6 +16,10 @@ "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, + "#lib/sanitize-html": { + "storybook": "./lib/sanitize-html.mock.ts", + "default": "./lib/sanitize-html.ts" + }, "#*": [ "./*", "./*.ts", @@ -73,6 +80,8 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/sanitize-html": "^2.11.0", + "@ungap/with-resolvers": "^0.1.0", "@vitest/browser": "^2.0.4", "chromatic": "^11.3.0", "concurrently": "^8.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 524287e..ae6e112 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -99,6 +99,12 @@ importers: '@types/react-dom': specifier: ^18 version: 18.3.0 + '@types/sanitize-html': + specifier: ^2.11.0 + version: 2.11.0 + '@ungap/with-resolvers': + specifier: ^0.1.0 + version: 0.1.0 '@vitest/browser': specifier: ^2.0.4 version: 2.0.4(playwright@1.43.0)(typescript@5.4.5)(vitest@2.0.4) @@ -2339,6 +2345,9 @@ packages: '@types/resolve@1.20.6': resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==} + '@types/sanitize-html@2.11.0': + resolution: {integrity: sha512-7oxPGNQHXLHE48r/r/qjn7q0hlrs3kL7oZnGj0Wf/h9tj/6ibFyRkNbsDxaBBZ4XUZ0Dx5LGCyDJ04ytSofacQ==} + '@types/scheduler@0.16.5': resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==} @@ -2439,6 +2448,9 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} + '@ungap/with-resolvers@0.1.0': + resolution: {integrity: sha512-g7f0IkJdPW2xhY7H4iE72DAsIyfuwEFc6JWc2tYFwKDMWWAF699vGjrM348cwQuOXgHpe1gWFe+Eiyjx/ewvvw==} + '@vitest/browser@2.0.4': resolution: {integrity: sha512-QsIkbqPqHsXvgxjCjjgKjuWKmrC0VJgpaDkuEmOy5gTnErhhifWIfp3HpH92K7cscfaIao+RlKv5f8nUMgjfmA==} peerDependencies: @@ -9089,6 +9101,10 @@ snapshots: '@types/resolve@1.20.6': {} + '@types/sanitize-html@2.11.0': + dependencies: + htmlparser2: 8.0.2 + '@types/scheduler@0.16.5': {} '@types/semver@7.5.8': {} @@ -9209,6 +9225,8 @@ snapshots: '@ungap/structured-clone@1.2.0': {} + '@ungap/with-resolvers@0.1.0': {} + '@vitest/browser@2.0.4(playwright@1.43.0)(typescript@5.4.5)(vitest@2.0.4)': dependencies: '@testing-library/dom': 10.4.0 @@ -10651,7 +10669,7 @@ snapshots: eslint: 8.0.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.0.0))(eslint@8.0.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.0.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.0.0) eslint-plugin-react: 7.34.1(eslint@8.0.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.0.0) @@ -10675,7 +10693,7 @@ snapshots: enhanced-resolve: 5.16.0 eslint: 8.0.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.0.0) fast-glob: 3.3.2 get-tsconfig: 4.7.3 is-core-module: 2.13.1 @@ -10697,7 +10715,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.0.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5