feat: let storybook build the addon

Author: TarunAdobe

1st-gen/package.json

@@ -232,19 +232,6 @@
             "command": "node ./scripts/watch-css.js",
             "service": true
         },
-        "build:screen-reader-addon": {
-            "command": "yarn workspace @spectrum-web-components/screen-reader-addon build",
-            "files": [
-                "projects/screen-reader-addon/src/**/*.ts",
-                "projects/screen-reader-addon/src/**/*.tsx",
-                "projects/screen-reader-addon/tsconfig.json",
-                "projects/screen-reader-addon/package.json",
-                "projects/screen-reader-addon/manager.js"
-            ],
-            "output": [
-                "projects/screen-reader-addon/dist/**"
-            ]
-        },
         "build:ts": {
             "clean": "if-file-deleted",
             "command": "node ./scripts/build-ts.js",
@@ -282,8 +269,7 @@
                 "!projects/example-project-rollup",
                 "!projects/example-project-webpack",
                 "!projects/templates",
-                "!projects/screen-reader-addon/manager.js",
-                "!projects/screen-reader-addon/dist/**",
+                "!projects/screen-reader-addon/**",
                 "tools/**/*.js",
                 "tools/**/*.js.map",
                 "!**/build.js",
@@ -396,8 +382,7 @@
         "prestorybook": {
             "command": "cem analyze --outdir storybook/",
             "dependencies": [
-                "build:ts",
-                "build:screen-reader-addon"
+                "build:ts"
             ],
             "files": [
                 "packages/**/*.ts",

1st-gen/projects/screen-reader-addon/manager.js

@@ -11,4 +11,5 @@
  */
 
 // Storybook manager addon entry point
-import './dist/register.js';
+// Imports TypeScript source directly - Storybook's esbuild compiles on the fly
+import './src/register.tsx';

1st-gen/projects/screen-reader-addon/package.json

@@ -8,24 +8,7 @@
         "dom-accessibility-api": "^0.7.0",
         "query-selector-shadow-dom": "^1.0.0"
     },
-    "peerDependencies": {
-        "@lit/react": ">=1.0.0",
-        "@spectrum-web-components/switch": ">=1.0.0",
-        "@spectrum-web-components/theme": ">=1.0.0",
-        "@storybook/components": ">=8.0.0",
-        "@storybook/core-events": ">=8.0.0",
-        "@storybook/manager-api": ">=8.0.0",
-        "lit": "^2.5.0 || ^3.1.3",
-        "react": ">=18.0.0"
-    },
     "description": "A Screen Reader Storybook addon for accessibility testing",
-    "devDependencies": {
-        "esbuild": "0.21.5",
-        "typescript": "5.3.3"
-    },
-    "files": [
-        "dist/**/*"
-    ],
     "homepage": "https://opensource.adobe.com/spectrum-web-components/",
     "keywords": [
         "storybook",
@@ -37,32 +20,22 @@
         "wcag"
     ],
     "license": "Apache-2.0",
-    "main": "dist/register.js",
-    "module": "dist/register.js",
     "name": "@spectrum-web-components/screen-reader-addon",
+    "peerDependencies": {
+        "@lit/react": ">=1.0.0",
+        "@spectrum-web-components/switch": ">=1.0.0",
+        "@spectrum-web-components/theme": ">=1.0.0",
+        "@storybook/components": ">=8.0.0",
+        "@storybook/core-events": ">=8.0.0",
+        "@storybook/manager-api": ">=8.0.0",
+        "lit": "^2.5.0 || ^3.1.3",
+        "react": ">=18.0.0"
+    },
     "private": true,
     "repository": {
         "directory": "1st-gen/projects/screen-reader-addon",
         "type": "git",
         "url": "https://github.com/adobe/spectrum-web-components.git"
     },
-    "scripts": {
-        "build": "esbuild src/register.tsx --bundle --outfile=dist/register.js --format=esm \"--external:@storybook/*\" \"--external:@spectrum-web-components/*\" \"--external:@lit/*\" --external:react --external:lit --platform=browser",
-        "typecheck": "tsc --noEmit"
-    },
-    "version": "1.0.0",
-    "wireit": {
-        "build": {
-            "clean": "if-file-deleted",
-            "command": "esbuild src/register.tsx --bundle --outfile=dist/register.js --format=esm \"--external:@storybook/*\" \"--external:@spectrum-web-components/*\" \"--external:@lit/*\" --external:react --external:lit --platform=browser",
-            "files": [
-                "src/**/*.ts",
-                "src/**/*.tsx",
-                "tsconfig.json"
-            ],
-            "output": [
-                "dist/**"
-            ]
-        }
-    }
+    "version": "1.0.0"
 }

1st-gen/projects/screen-reader-addon/src/components/screen-reader-panel.ts

@@ -11,7 +11,6 @@
  */
 
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
 import { addons, type Channel } from '@storybook/manager-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 
@@ -29,17 +28,20 @@ interface ScreenReaderTextEvent extends CustomEvent {
 }
 
 export class ScreenReaderPanel extends LitElement {
-    @property({ type: Boolean })
-    voice = false;
-
-    @property({ type: Boolean })
-    text = false;
-
-    @property({ type: Boolean })
-    isActive = false;
+    // Using static properties instead of decorators for compatibility
+    // with Storybook's internal esbuild (no decorator compilation needed)
+    static override properties = {
+        voice: { type: Boolean },
+        text: { type: Boolean },
+        isActive: { type: Boolean },
+        screenReaderText: { type: String },
+    };
 
-    @property({ type: String })
-    screenReaderText = '';
+    // Use 'declare' to avoid class field definition overriding Lit's reactive properties
+    declare voice: boolean;
+    declare text: boolean;
+    declare isActive: boolean;
+    declare screenReaderText: string;
 
     private screenReader: ScreenReader | null = null;
     private channel: Channel | null = null;
@@ -91,6 +93,12 @@ export class ScreenReaderPanel extends LitElement {
 
     constructor() {
         super();
+        // Initialize reactive properties
+        this.voice = false;
+        this.text = false;
+        this.isActive = false;
+        this.screenReaderText = '';
+        // Bind event handlers
         this.handleTextChange = this.handleTextChange.bind(this);
         this.handleStoryChange = this.handleStoryChange.bind(this);
     }

1st-gen/projects/screen-reader-addon/tsconfig.json

@@ -6228,9 +6228,7 @@ __metadata:
   dependencies:
     aria-query: "npm:^5.3.0"
     dom-accessibility-api: "npm:^0.7.0"
-    esbuild: "npm:0.21.5"
     query-selector-shadow-dom: "npm:^1.0.0"
-    typescript: "npm:5.3.3"
   peerDependencies:
     "@lit/react": ">=1.0.0"
     "@spectrum-web-components/switch": ">=1.0.0"