Skip to content

Conversation

@TarunAdobe
Copy link
Contributor

@TarunAdobe TarunAdobe commented Nov 18, 2025

Description

Define a safe window.__swc shim in Storybook (storybook/preview.js) so debug warnings (window.__swc.warn) cannot crash the Storybook runtime.

Motivation and context

  • When running storybook:build for 1st‑gen and serving the static Storybook docs, opening components that use overlays and SlottableRequestEvent would throw TypeError: Cannot read properties of undefined (reading 'warn').
  • This happened because the dev build inlines window.__swc?.DEBUG to true, causing window.__swc.warn(...) to be called even when window.__swc is not defined in the Storybook runtime.
  • The change introduces a Storybook‑only shim so debug warnings remain visible (via console.warn) without breaking stories, and allows us to keep the experimental warning in SlottableRequestEvent.

Related issue(s)

  • fixes [Issue Number]

Screenshots (if appropriate)


Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • Storybook build and static docs load without overlay errors
  1. Go here
  2. Navigate to stories that use sp-action-menu, sp-menu, and sp-picker or sp-overlay-trigger.
  3. Open and interact with overlays (menus, pickers) and verify there is no Cannot read properties of undefined (reading 'warn') error in the console.
  • Debug warning is emitted but does not crash
  1. Go here
  2. Open the browser devtools console.
  3. Confirm that a warning about experimental slottable-request events appears, prefixed with [SWC], and that the story continues to function normally.
Screenshot 2025-11-18 at 3 26 40 PM

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@changeset-bot
Copy link

changeset-bot bot commented Nov 18, 2025

⚠️ No Changeset found

Latest commit: 4ecbe3e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@TarunAdobe TarunAdobe marked this pull request as ready for review November 18, 2025 08:52
@TarunAdobe TarunAdobe requested a review from a team as a code owner November 18, 2025 08:52
@github-actions
Copy link
Contributor

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5896

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Copy link
Contributor

@nikkimk nikkimk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks fine- it also might fix a bug Helen raised that Casey and I chatted through today in slack! 🤞

I can confirm I see the dev warnings:

Screenshot 2025-11-18 at 4 59 36 PM

Separately, I'll make a ticket to dig into why the menu-item-with-description story isn't rendering.

Screen.Recording.2025-11-18.at.4.51.48.PM.mov

if (!this.value || nextItem !== this.selectedItem) {
// updates picker text but does not fire change event until action is completed
if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);
if (nextItem) this.setValueFromItem(nextItem as MenuItem);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always get tripped up with !!- can you explain this change for me?

Copy link
Contributor

@Rajdeepc Rajdeepc Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marissahuysentruyt They're functionally the same in this context. The !! pattern is useful when you need to store or return an explicit boolean, here its not the case. In this case, if (nextItem) already performs implicit boolean coercion, so the double negation adds no value. No impact on logic, just cleaner code.
Let me make it more clearer for you.

When !! matters:

// Storing as boolean (useful)
const hasNextItem: boolean = !!nextItem;

// Returning explicit boolean from function (useful)
function hasItem(): boolean {
  return !!nextItem;  // ensures boolean, not MenuItem | undefined
}

// API response where type matters (useful)
const response = { isActive: !!someValue };

When !! is redundant:

// Conditional check (unnecessary - if already evaluates truthiness)
if (!!nextItem) { ... }  // same as if (nextItem)
if (nextItem) { ... }     // already truthy check

// Boolean operators (unnecessary)
const result = !!condition && doSomething();  // same as condition && doSomething()

@caseyisonit caseyisonit merged commit 0f9feba into main Nov 18, 2025
21 checks passed
@caseyisonit caseyisonit deleted the ttomar/fix-overlay-directive branch November 18, 2025 23:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants