improve handling message updates

.storybook/main.ts

@@ -1,16 +1,21 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from 'node:url'
+
 import type { StorybookConfig } from '@storybook/react-webpack5'
-import path from 'path'
+import path, { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx)', '../docs/*.mdx'],
   addons: [
-    'storybook-addon-mock',
+    '@espoc/storybook-addon-mock',
     {
       name: '@storybook/addon-docs',
       options: { transcludeMarkdown: true },
     },
     '@storybook/addon-webpack5-compiler-swc',
-    './addons/button',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -38,10 +43,31 @@ const config: StorybookConfig = {
   webpackFinal: async (config) => {
     config.experiments = {
       ...config.experiments,
-      asyncWebAssembly: true,
+      asyncWebAssembly: false,
       syncWebAssembly: false,
     }
 
+    config.module = config.module ?? { rules: [] }
+    config.module.rules = config.module.rules ?? []
+    config.module.rules.push({
+      test: /\.wasm$/,
+      type: 'asset/resource',
+    })
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      include: /node_modules\/@perspective-dev/,
+      use: {
+        loader: 'ts-loader',
+        options: { transpileOnly: true },
+      },
+    })
+
+    config.resolve = config.resolve ?? {}
+    config.resolve.extensionAlias = {
+      ...config.resolve.extensionAlias,
+      '.js': ['.ts', '.js'],
+    }
+
     return config
   },
 }

.storybook/manager.ts

@@ -1,4 +1,6 @@
 import './addons/button/logo.tsx'
+import './addons/button/viewSourceButton.tsx'
+import './addons/button/githubButton.tsx'
 
 import { addons } from 'storybook/manager-api'
 

.storybook/preview.tsx

@@ -71,7 +71,7 @@ const preview = {
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     viewport: {
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
     controls: { expanded: true },
     docs: {

cypress.config.ts

@@ -3,13 +3,43 @@ import { defineConfig } from 'cypress'
 import webpackConfig from './webpack.config'
 
 export default defineConfig({
+  allowCypressEnv: false,
   experimentalWebKitSupport: true,
   chromeWebSecurity: false,
   component: {
     devServer: {
       framework: 'react',
       bundler: 'webpack',
-      webpackConfig,
+      webpackConfig: {
+        ...webpackConfig,
+        devServer: {
+          allowedHosts: 'all',
+        },
+        resolve: {
+          ...webpackConfig.resolve,
+          extensionAlias: {
+            '.js': ['.ts', '.js'],
+          },
+        },
+        module: {
+          ...webpackConfig.module,
+          rules: [
+            ...(webpackConfig.module?.rules ?? []),
+            {
+              test: /\.tsx?$/,
+              include: /node_modules\/@perspective-dev/,
+              use: {
+                loader: 'ts-loader',
+                options: { transpileOnly: true },
+              },
+            },
+            {
+              test: /\.wasm$/,
+              type: 'asset/resource',
+            },
+          ],
+        },
+      },
     },
   },
 })

eslint.config.mjs

@@ -5,6 +5,7 @@ import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
+import cypress from "eslint-plugin-cypress";
 import muiPathImports from "eslint-plugin-mui-path-imports";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
 import unusedImports from "eslint-plugin-unused-imports";
@@ -22,10 +23,9 @@ export default [{
 }, ...compat.extends(
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:cypress/recommended',
     'plugin:storybook/recommended',
     'prettier',
-), {
+), cypress.configs.recommended, {
     plugins: {
         "unused-imports": unusedImports,
         "@typescript-eslint": typescriptEslint,