[Bug]: Storybook HTML SimulatePageLoad.ts doesn't remove scripts on page change

[James-Wilkinson-git]

Describe the bug

If you add a script tag to your story the

storybook/code/core/src/preview-api/modules/preview-web/simulate-pageload.ts

Line 91 in 0b6b357

scriptsToExecute.push((callback: any) => insertScript($script, callback, $scriptsRoot));

will pick it up and put it into scripts-root, and run it, however, this runs on every page, so if you insert this in a story it doesn't clear out the previous scripts.

Reproduction link

n/a

Reproduction steps

No response

System

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @storybook/addon-essentials: ^8.2.6 => 8.2.6
    @storybook/addon-links: ^8.2.6 => 8.2.6
    @storybook/blocks: ^8.2.6 => 8.2.6
    @storybook/test: ^8.2.6 => 8.2.6
    @storybook/web-components: ^8.2.6 => 8.2.6
    @storybook/web-components-vite: ^8.2.6 => 8.2.6
    storybook: ^8.2.6 => 8.2.6

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To address the issue of scripts not being cleared on page change, modify the simulatePageLoad function in simulate-pageload.ts to remove existing scripts from the scripts-root before adding new ones. Here are the steps:

1. Locate the simulatePageLoad function in simulate-pageload.ts.
2. Before appending new scripts to $scriptsRoot, clear out any existing scripts.

export function simulatePageLoad($container: any) {
  let $scriptsRoot = document.getElementById(SCRIPTS_ROOT_ID);
  if (!$scriptsRoot) {
    $scriptsRoot = document.createElement('div');
    $scriptsRoot.id = SCRIPTS_ROOT_ID;
    document.body.appendChild($scriptsRoot);
  } else {
    // Clear existing scripts
    while ($scriptsRoot.firstChild) {
      $scriptsRoot.removeChild($scriptsRoot.firstChild);
    }
  }
  const $scripts = Array.from($container.querySelectorAll(SCRIPT));

  if ($scripts.length) {
    const scriptsToExecute: any[] = [];
    $scripts.forEach(($script: any) => {
      const typeAttr = $script.getAttribute('type');

      if (!typeAttr || runScriptTypes.includes(typeAttr)) {
        scriptsToExecute.push((callback: any) => insertScript($script, callback, $scriptsRoot));
      }
    });

    if (scriptsToExecute.length) {
      insertScriptsSequentially(scriptsToExecute, simulateDOMContentLoaded, undefined);
    }
  } else {
    simulateDOMContentLoaded();
  }
}

References

/.github/DISCUSSION_TEMPLATE/help.yml
/code/addons/docs/template/stories/docspage
/.github/comments/invalid-link.md
/.github/DISCUSSION_TEMPLATE/ideas.yml
/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
/docs/_snippets/custom-build-script-production.md
/code/core/src/common/js-package-manager/JsPackageManager.ts
/code/addons/interactions/template/stories
/code/core/src/csf-tools/CsfFile.test.ts
/code/lib/cli/src/automigrate/fixes/angular-builders.ts
/code/addons/docs/src/compiler/index.test.ts
/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
/test-storybooks/server-kitchen-sink/stories/html_content/scripts.stories.json
/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts
/test-storybooks/portable-stories-kitchen-sink/svelte/playwright
/code/e2e-tests/tags.spec.ts
/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
/code/frameworks/angular/src/builders/build-storybook/schema.json
/code/renderers/server/template/cli/button.stories.json
/test-storybooks/server-kitchen-sink/stories/html_content
/code/frameworks/ember/package.json
/code/lib/instrumenter
/test-storybooks/portable-stories-kitchen-sink/react/playwright

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[James-Wilkinson-git]

Simarilly if you write your injected script to listen to the simulated DOMContentLoaded when switching from a storie to an autodocs page it doesnt run the simulatePageLoad() api.