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

James-Wilkinson-git commented 1 month ago

Describe the bug

If you add a script tag to your story the https://github.com/storybookjs/storybook/blob/0b6b35766dcd4f72ea00a506fe2601d7eac58be1/code/core/src/preview-api/modules/preview-web/simulate-pageload.ts#L91 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[bot] commented 1 month ago

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:

Locate the simulatePageLoad function in simulate-pageload.ts.
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](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

James-Wilkinson-git commented 1 month ago

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.

storybookjs / storybook