Merge branch 'next' into norbert/sb-798-figure-out-plan-for-package-structure-rework

.circleci/config.yml

@@ -4,8 +4,8 @@ parameters:
   workflow:
     description: Which workflow to run
     type: enum
-    enum: ['tests', 'daily-tests']
-    default: 'tests'
+    enum: ['ci', 'pr', 'merged', 'daily']
+    default: 'ci'
 
 executors:
   sb_node_16_classic:
@@ -49,37 +49,122 @@ executors:
     resource_class: <<parameters.class>>
 
 orbs:
-  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
+  git-shallow-clone: guitarrapc/git-shallow-clone@2.4.0
   browser-tools: circleci/browser-tools@1.4.0
 
 commands:
-  ensure-pr-is-labeled-with:
-    description: 'A command looking for the labels set on the PR associated to this workflow and checking it contains the label given as parameter'
+  # Forked off from https://github.com/guitarrapc/git-shallow-clone-orb
+  # See issue: https://github.com/guitarrapc/git-shallow-clone-orb/issues/34
+  checkout_advanced:
+    description: |
+      checkout by git shallow clone with git options. Support Alpine, Ubuntu, Debian and others.
+      eval is used in step, Fish shell is not supported.
     parameters:
-      label:
+      clone_options:
+        default: --depth 1
+        description: |
+          git clone options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"'
+        type: string
+      fetch_options:
+        default: --depth 10
+        description: |
+          git fetch options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"' you don't need set '--force' option as it already set by default. in case of tag, add '--no-tags' on this option and tag_fetch_options.
+        type: string
+      keyscan_bitbucket:
+        default: false
+        description: |
+          Pass `true` to dynamically get ssh-rsa from `bitbucket.org`.
+        type: boolean
+      keyscan_github:
+        default: false
+        description: |
+          Pass `true` to dynamically get ssh-rsa from `github.com`.
+        type: boolean
+      path:
+        default: .
+        description: |
+          Checkout directory (default: job’s working_directory)
+        type: string
+      tag_fetch_options:
+        default: --tags
+        description: |
+          This option apply when git operation is tag. Use 'fetch_options' instead if pr and other git operation. Additional git fetch options you want to add specifically for tags such as '--tags' or '--no-tags'. Default value is '--tags'
         type: string
     steps:
       - run:
-          name: Check if PR is labeled with "<< parameters.label >>"
           command: |
-            apt-get -y install jq
-
-            PR_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | sed "s/.*\/pull\///")
-            echo "PR_NUMBER: $PR_NUMBER"
-
-            API_GITHUB="https://api.github.com/repos/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME"
-            PR_REQUEST_URL="$API_GITHUB/pulls/$PR_NUMBER"
-            PR_RESPONSE=$(curl -H "Authorization: token $GITHUB_TOKEN_STORYBOOK_BOT_READ_REPO" "$PR_REQUEST_URL")
-
-
-            if [ $(echo $PR_RESPONSE | jq '.labels | map(select(.name == "<< parameters.label >>")) | length') -ge 1 ] ||
-               ( [ $(echo $PR_RESPONSE | jq '.labels | length') -ge 1 ] && [ "<< parameters.label >>" == "*" ])
+            #!/bin/sh
+            set -ex
+            # Workaround old docker images with incorrect $HOME
+            # check https://github.com/docker/docker/issues/2968 for details
+            if [ "${HOME}" = "/" ]
             then
-              echo "🚀 The PR is labelled with '<< parameters.label >>', job will continue!"
-            else
-              echo "🏁 The PR isn't labelled with '<< parameters.label >>' so this job will end at the current step."
-              circleci-agent step halt
+              export HOME=$(getent passwd $(id -un) | cut -d: -f6)
             fi
+            
+            # known_hosts
+            mkdir -p ~/.ssh
+            if [ -x "$(command -v ssh-keyscan)" ] && ([ "<< parameters.keyscan_github >>" == "true" ] || [ "<< parameters.keyscan_bitbucket >>" == "true" ])
+            then
+              if [ "<< parameters.keyscan_github >>" == "true" ]
+              then
+                ssh-keyscan -H github.com >> ~/.ssh/known_hosts
+              fi
+              if [ "<< parameters.keyscan_bitbucket >>" == "true" ]
+              then
+                ssh-keyscan -H bitbucket.org >> ~/.ssh/known_hosts
+              fi
+            fi
+            if [ "<< parameters.keyscan_github >>" != "true" ]
+            then
+              echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+            ' >> ~/.ssh/known_hosts
+            fi
+            if [ "<< parameters.keyscan_bitbucket >>" != "true" ]
+            then
+              echo 'bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAubiN81eDcafrgMeLzaFPsw2kNvEcqTKl/VqLat/MaB33pZy0y3rJZtnqwR2qOOvbwKZYKiEO1O6VqNEBxKvJJelCq0dTXWT5pbO2gDXC6h6QDXCaHo6pOHGPUy+YBaGQRGuSusMEASYiWunYN0vCAI8QaXnWMXNMdFP3jHAJH0eDsoiGnLPBlBp4TNm6rYI74nMzgz3B9IikW4WVK+dc8KZJZWYjAuORU3jc1c/NPskD2ASinf8v3xnfXeukU0sJ5N6m5E8VLjObPEO+mN2t/FZTMZLiFqPWc/ALSqnMnnhwrNi2rbfg/rd/IpL8Le3pSBne8+seeFVBoGqzHM9yXw==
+            ' >> ~/.ssh/known_hosts
+            fi
+            
+            (umask 077; touch ~/.ssh/id_rsa)
+            chmod 0600 ~/.ssh/id_rsa
+            (echo $CHECKOUT_KEY > ~/.ssh/id_rsa)
+            
+            # use git+ssh instead of https
+            git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
+            git config --global gc.auto 0 || true
+            
+            # checkout
+            git clone << parameters.clone_options >> $CIRCLE_REPOSITORY_URL "<< parameters.path >>"
+            cd "<< parameters.path >>"
+            
+            # Fetch remote and check the commit ID of the checked out code
+            if [ -n "$CIRCLE_TAG" ]
+            then
+              # tag
+              git fetch << parameters.tag_fetch_options >> << parameters.fetch_options >> --force origin "+refs/tags/${CIRCLE_TAG}:refs/tags/${CIRCLE_TAG}"
+            elif [[ $(echo $CIRCLE_BRANCH | grep -e ^pull\/*) ]] # sh version of bash `elif [[ "$CIRCLE_BRANCH" =~ ^pull\/* ]]`
+            then
+              # pull request
+              git fetch << parameters.fetch_options >> --force origin "${CIRCLE_BRANCH}:remotes/origin/${CIRCLE_BRANCH}"
+            else
+              # others
+              git fetch << parameters.fetch_options >> --force origin "$CIRCLE_BRANCH:remotes/origin/$CIRCLE_BRANCH"
+            fi
+            
+            # Check the commit ID of the checked out code
+            if [ -n "$CIRCLE_TAG" ]
+            then
+              git reset --hard "$CIRCLE_SHA1"
+              git checkout -q "$CIRCLE_TAG"
+            elif [ -n "$CIRCLE_BRANCH" ] && [ "$CIRCLE_BRANCH" != 'HEAD' ]
+            then
+              git reset --hard "$CIRCLE_SHA1"
+              git checkout -q -B "$CIRCLE_BRANCH"
+            fi
+            
+            git reset --hard "$CIRCLE_SHA1"
+          name: Checkout code shallow
   cancel-workflow-on-failure:
     description: 'Cancels the entire workflow in case the previous step has failed'
     steps:
@@ -96,7 +181,7 @@ jobs:
       class: large
       name: sb_node_16_classic
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
@@ -137,7 +222,7 @@ jobs:
       name: sb_playwright
     working_directory: /tmp/storybook
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -177,7 +262,7 @@ jobs:
       name: sb_playwright
     working_directory: /tmp/storybook
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -216,7 +301,7 @@ jobs:
       class: medium
       name: sb_node_16_classic
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -231,7 +316,7 @@ jobs:
       class: xlarge
       name: sb_node_16_classic
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -244,7 +329,7 @@ jobs:
   script-unit-tests:
     executor: sb_node_16_browsers
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -261,7 +346,7 @@ jobs:
       class: xlarge
       name: sb_node_16_browsers
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -282,7 +367,7 @@ jobs:
       class: small
       name: sb_node_16_browsers
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
@@ -296,8 +381,8 @@ jobs:
       class: medium
       name: sb_node_16_browsers
     steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+      # switched this to the CircleCI helper to get the full git history for TurboSnap
+      - checkout
       - attach_workspace:
           at: .
       - run:
@@ -313,23 +398,19 @@ jobs:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: [ "ci", "daily", "weekly" ]
-        default: "ci"
+        default: 2
     executor:
       class: medium
       name: sb_node_16_browsers
     parallelism: << parameters.parallelism >>
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Creating Sandboxes
-          command: yarn task --task sandbox --template $(yarn get-template << parameters.cadence >> create) --no-link --start-from=never --junit
+          command: yarn task --task sandbox --template $(yarn get-template << pipeline.parameters.workflow >> create) --no-link --start-from=never --junit
       - persist_to_workspace:
           root: .
           paths:
@@ -340,46 +421,38 @@ jobs:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: [ "ci", "daily", "weekly" ]
-        default: "ci"
+        default: 2
     executor:
       class: medium
       name: sb_node_16_browsers
     parallelism: << parameters.parallelism >>
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Smoke Testing Sandboxes
-          command: yarn task --task smoke-test --template $(yarn get-template << parameters.cadence >> smoke-test) --no-link --start-from=never --junit
+          command: yarn task --task smoke-test --template $(yarn get-template << pipeline.parameters.workflow >> smoke-test) --no-link --start-from=never --junit
       - store_test_results:
           path: test-results
   build-sandboxes:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: [ "ci", "daily", "weekly" ]
-        default: "ci"
+        default: 2
     executor:
       class: medium+
       name: sb_node_16_browsers
     parallelism: << parameters.parallelism >>
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Building Sandboxes
-          command: yarn task --task build --template $(yarn get-template << parameters.cadence >> build) --no-link --start-from=never --junit
+          command: yarn task --task build --template $(yarn get-template << pipeline.parameters.workflow >> build) --no-link --start-from=never --junit
       - store_test_results:
           path: test-results
       - persist_to_workspace:
@@ -390,34 +463,26 @@ jobs:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: [ "ci", "daily", "weekly" ]
-        default: "ci"
+        default: 2
     executor:
       class: medium
       name: sb_playwright
     parallelism: << parameters.parallelism >>
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Running Test Runner
-          command: yarn task --task test-runner --template $(yarn get-template << parameters.cadence >> test-runner) --no-link --start-from=never --junit
+          command: yarn task --task test-runner --template $(yarn get-template << pipeline.parameters.workflow >> test-runner) --no-link --start-from=never --junit
       - store_test_results:
           path: test-results
   chromatic-sandboxes:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: ["ci", "daily", "weekly"]
-        default: "ci"
+        default: 2
     executor:
       class: medium
       name: sb_node_16_browsers
@@ -428,30 +493,26 @@ jobs:
           at: .
       - run:
           name: Running Chromatic
-          command: yarn task --task chromatic --template $(yarn get-template << parameters.cadence >> chromatic) --no-link --start-from=never --junit
+          command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit
       - store_test_results:
           path: test-results
   e2e-sandboxes:
     parameters:
       parallelism:
         type: integer
-        default: 9
-      cadence:
-        type: enum
-        enum: ["ci", "daily", "weekly"]
-        default: "ci"
+        default: 2
     executor:
       class: medium
       name: sb_playwright
     parallelism: << parameters.parallelism >>
     steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Running E2E Tests
-          command: yarn task --task e2e-tests --template $(yarn get-template << parameters.cadence >> e2e-tests) --no-link --start-from=never --junit
+          command: yarn task --task e2e-tests --template $(yarn get-template << pipeline.parameters.workflow >> e2e-tests) --no-link --start-from=never --junit
       - store_test_results:
           path: test-results
       - store_artifacts: # this is where playwright puts more complex stuff
@@ -459,42 +520,43 @@ jobs:
           destination: playwright
 
 workflows:
-  daily-tests:
+  ci:
     when:
-      equal: [ daily-tests, << pipeline.parameters.workflow >> ]
+      and:
+        - equal: [ api, << pipeline.trigger_source >> ]
+        - equal:  [ ci, << pipeline.parameters.workflow >> ]
     jobs:
       - build
-      - create-sandboxes:
-          parallelism: 24
-          cadence: "daily"
+      - lint:
+          requires:
+            - build
+      - check:
+          requires:
+            - build
+      - unit-tests:
+          requires:
+            - build
+      - script-unit-tests:
+          requires:
+            - build
+      - create-sandboxes:
           requires:
             - build
-      # - smoke-test-sandboxes: # disabled for now
-      #     requires:
-      #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 24
-          cadence: "daily"
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 24
-          cadence: "daily"
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 24
-          cadence: "daily"
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 24
-          cadence: "daily"
           requires:
             - build-sandboxes
-  test:
+  pr:
     when:
-      equal: [ tests, << pipeline.parameters.workflow >> ]
+      equal: [ pr, << pipeline.parameters.workflow >> ]
     jobs:
       - build
       - lint:
@@ -521,22 +583,100 @@ workflows:
       - react-vite-bench:
           requires:
             - build
-      ## new workflow
       - create-sandboxes:
+          parallelism: 9
+          requires:
+            - build
+      - build-sandboxes:
+          parallelism: 9
+          requires:
+            - create-sandboxes
+      - test-runner-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+      - chromatic-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+      - e2e-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+  merged:
+    when:
+      equal: [ merged, << pipeline.parameters.workflow >> ]
+    jobs:
+      - build
+      - lint:
+          requires:
+            - build
+      - check:
+          requires:
+            - build
+      - unit-tests:
+          requires:
+            - build
+      - script-unit-tests:
+          requires:
+            - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
+      - coverage:
+          requires:
+            - unit-tests
+      - cra-bench:
+          requires:
+            - build
+      - react-vite-bench:
+          requires:
+            - build
+      - create-sandboxes:
+          parallelism: 14
+          requires:
+            - build
+      - build-sandboxes:
+          parallelism: 14
+          requires:
+            - create-sandboxes
+      - test-runner-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+      - chromatic-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+      - e2e-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+  daily:
+    when:
+      equal: [ daily, << pipeline.parameters.workflow >> ]
+    jobs:
+      - build
+      - create-sandboxes:
+          parallelism: 24
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
+          parallelism: 24
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
+          parallelism: 24
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
+          parallelism: 24
           requires:
             - build-sandboxes
       - e2e-sandboxes:
+          parallelism: 24
           requires:
-            - build-sandboxes
+            - build-sandboxes

.github/workflows/trigger-circle-ci-workflow.yml

@@ -1,21 +1,101 @@
 name: Trigger CircleCI workflow
 
 on:
-  pull_request:
-    types: [labeled]
+  # Use pull_request_target, as we don't need to check out the actual code of the fork in this script.
+  # And this is the only way to trigger the Circle CI API on forks as well.
+  pull_request_target:
+    types: [opened, synchronize, labeled, unlabeled, reopened, converted_to_draft, ready_for_review]
+  push:
+    branches:
+      - next
 
 jobs:
-  trigger:
-    if: github.event.label.name == 'run e2e extended test suite' && github.event.pull_request.head.repo.fork == false
-    name: Run workflow with all e2e tests
+  get-branch:
     runs-on: ubuntu-latest
     steps:
-      - name: Make request to CircleCI
+      - id: get-branch
+        run: |
+          if  [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
+            export BRANCH=pull/${{ github.event.pull_request.number }}/head
+            elif [ "${{ github.event_name }}" = "push" ]; then
+            export BRANCH=${{ github.ref_name }}
+            else
+            export BRANCH=${{ github.event.pull_request.head.ref }}
+          fi
+          echo "$BRANCH"
+          echo "branch=$BRANCH" >> $GITHUB_ENV
+    outputs:
+      branch: ${{ env.branch }}
+
+  trigger-ci-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && github.event.pull_request.draft == true && !contains(github.event.pull_request.labels.*.name, 'ci:pr') && !contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily')
+    steps:
+      - name: Trigger draft PR tests
         run: >
-          curl --request POST
-          --url https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline
-          --header 'Circle-Token: '"$CIRCLE_CI_TOKEN"' '
-          --header 'content-type: application/json'
-          --data '{"branch":"${{ github.event.pull_request.head.ref }}"}'
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "ci"
+                  }
+                }'
         env:
           CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-pr-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && ((github.event.pull_request.draft == false || contains(github.event.pull_request.labels.*.name, 'ci:pr')) && !contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+    steps:
+      - name: Trigger PR tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "pr"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-merged-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'push' || (contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+    steps:
+      - name: Trigger merged tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "merged"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-daily-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'ci:daily')
+    steps:
+      - name: Trigger the daily tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "daily"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}

.gitignore

@@ -7,6 +7,7 @@ dist
 *.DS_Store
 .cache
 junit.xml
+test-results
 /repros
 /sandbox
 .verdaccio-cache

MIGRATION.md

@@ -43,6 +43,7 @@
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -836,6 +837,10 @@ export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 CSF2Story.args = { label: 'Label' };
 ```
 
+#### Renamed `renderToDOM` to `renderToCanvas`
+
+The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade

code/addons/actions/src/addArgsHelpers.ts

@@ -1,4 +1,4 @@
-import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/types';
+import type { Args, Framework, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';
 
 // interface ActionsParameter {
@@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
   const {
     initialArgs,
     argTypes,
@@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (contex
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
   const {
     initialArgs,
     argTypes,

code/addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -10,8 +10,8 @@ import {
 } from '../helpers';
 
 export const withBackground = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;

code/addons/backgrounds/src/decorators/withGrid.ts

@@ -1,13 +1,10 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const withGrid = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
-) => {
+export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

code/addons/interactions/src/preset/preview.ts

@@ -3,7 +3,7 @@
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
-  AnyFramework,
+  Framework,
   ArgsEnhancer,
   PlayFunction,
   PlayFunctionContext,
@@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
   return val;
 };
 
-const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = ({ id, initialArgs }) =>
+const addActionsFromArgTypes: ArgsEnhancer<Framework> = ({ id, initialArgs }) =>
   addSpies(id, initialArgs);
 
 export const argsEnhancers = [addActionsFromArgTypes];

code/addons/measure/src/withMeasure.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';
@@ -14,8 +14,8 @@ function findAndDrawElement(x: number, y: number) {
 }
 
 export const withMeasure = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { measureEnabled } = context.globals;
 

code/addons/outline/src/withOutline.ts

@@ -1,13 +1,13 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';
 import outlineCSS from './outlineCSS';
 
 export const withOutline = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;

code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,11 +1,11 @@
-import type { AnyFramework, Addon_Loadable } from '@storybook/types';
+import type { Framework, Addon_Loadable } from '@storybook/types';
 import type { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi<TFramework extends AnyFramework> extends ClientApiClass<AnyFramework> {
+export interface ClientApi<TFramework extends Framework> extends ClientApiClass<Framework> {
   configure(
     loader: Addon_Loadable,
     module: NodeModule | false,
@@ -19,7 +19,7 @@ export interface Loader {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi<AnyFramework>;
+    storybook: ClientApi<Framework>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }

code/addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type {
-  AnyFramework,
+  Framework,
   ArgsEnhancer,
   ArgTypesEnhancer,
   CoreCommon_NormalizedStoriesSpecifier,
@@ -87,7 +87,7 @@ function getConfigPathParts(input: string): Output {
   return { preview: configDir };
 }
 
-function configure<TFramework extends AnyFramework>(
+function configure<TFramework extends Framework>(
   options: {
     storybook: ClientApi<TFramework>;
   } & StoryshotsOptions

code/frameworks/angular/src/client/config.ts

@@ -1,6 +1,6 @@
 import './globals';
 
-export { render, renderToDOM } from './render';
+export { render, renderToCanvas } from './render';
 export { decorateStory as applyDecorators } from './decorateStory';
 
 export const parameters = { framework: 'angular' as const };

code/frameworks/angular/src/client/decorateStory.test.ts

@@ -347,7 +347,7 @@ describe('decorateStory', () => {
   });
 });
 
-function makeContext(input: Record<string, unknown>): StoryContext {
+function makeContext(input: Record<string, unknown>): StoryContext<AngularFramework> {
   return {
     id: 'id',
     kind: 'kind',
@@ -355,7 +355,7 @@ function makeContext(input: Record<string, unknown>): StoryContext {
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext;
+  } as StoryContext<AngularFramework>;
 }
 
 @Component({

code/frameworks/angular/src/client/decorators.test.ts

@@ -2,8 +2,9 @@ import { Addon_StoryContext } from '@storybook/types';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';
+import { AngularFramework } from './types';
 
-const defaultContext: Addon_StoryContext = {
+const defaultContext: Addon_StoryContext<AngularFramework> = {
   componentId: 'unspecified',
   kind: 'unspecified',
   title: 'unspecified',

code/frameworks/angular/src/client/public-api.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
-import { renderToDOM, render } from './render';
+import { renderToCanvas, render } from './render';
 import decorateStory from './decorateStory';
 import { AngularFramework } from './types';
 
@@ -16,7 +16,7 @@ interface ClientApi extends Addon_ClientStoryApi<AngularFramework['storyResult']
   load: (...args: any[]) => void;
 }
 
-const api = start<AngularFramework>(renderToDOM, { decorateStory, render });
+const api = start<AngularFramework>(renderToCanvas, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/frameworks/angular/src/client/render.ts

@@ -9,7 +9,7 @@ export const rendererFactory = new RendererFactory();
 
 export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
 
-export async function renderToDOM(
+export async function renderToCanvas(
   {
     storyFn,
     showMain,

code/frameworks/angular/src/client/types.ts

@@ -1,7 +1,7 @@
 import {
-  Framework,
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
+  WebFramework,
 } from '@storybook/types';
 
 export interface NgModuleMetadata {
@@ -27,7 +27,7 @@ export interface StoryFnAngularReturnType {
   userDefinedTemplate?: boolean;
 }
 
-export interface AngularFramework extends Framework {
+export interface AngularFramework extends WebFramework {
   component: any;
   storyResult: StoryFnAngularReturnType;
 }

code/frameworks/ember/src/client/preview/config.ts

@@ -1,3 +1,3 @@
-export { renderToDOM } from './render';
+export { renderToCanvas } from './render';
 
 export const parameters = { framework: 'ember' as const };

code/frameworks/ember/src/client/preview/index.ts

@@ -1,10 +1,14 @@
 import { start } from '@storybook/core-client';
 
 import './globals';
-import { renderToDOM } from './render';
 import type { EmberFramework } from './types';
+import { renderToCanvas } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start<EmberFramework>(renderToDOM);
+const {
+  configure: coreConfigure,
+  clientApi,
+  forceReRender,
+} = start<EmberFramework>(renderToCanvas);
 
 export const { raw } = clientApi;
 

code/frameworks/ember/src/client/preview/render.ts

@@ -20,7 +20,7 @@ let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
 
-function render(options: OptionsArgs, el: Element) {
+function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
   if (isRendering) return;
   isRendering = true;
 
@@ -60,9 +60,9 @@ function render(options: OptionsArgs, el: Element) {
     });
 }
 
-export function renderToDOM(
+export function renderToCanvas(
   { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
-  domElement: Element
+  canvasElement: EmberFramework['canvasElement']
 ) {
   const element = storyFn();
 
@@ -80,5 +80,5 @@ export function renderToDOM(
   }
 
   showMain();
-  render(element, domElement);
+  render(element, canvasElement);
 }

code/frameworks/ember/src/client/preview/types.ts

@@ -1,4 +1,4 @@
-import type { Framework } from '@storybook/types';
+import type { WebFramework } from '@storybook/types';
 
 export type { RenderContext } from '@storybook/types';
 
@@ -13,7 +13,7 @@ export interface OptionsArgs {
   element: any;
 }
 
-export interface EmberFramework extends Framework {
+export interface EmberFramework extends WebFramework {
   component: any;
   storyResult: OptionsArgs;
 }

code/lib/addons/src/hooks.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import { logger } from '@storybook/client-logger';
 import type {
-  AnyFramework,
+  Framework,
   Args,
   DecoratorApplicator,
   DecoratorFunction,
@@ -32,7 +32,7 @@ interface Effect {
 
 type AbstractFunction = (...args: any[]) => any;
 
-export class HooksContext<TFramework extends AnyFramework> {
+export class HooksContext<TFramework extends Framework> {
   hookListsMap: WeakMap<AbstractFunction, Hook[]>;
 
   mountedDecorators: Set<AbstractFunction>;
@@ -126,13 +126,13 @@ export class HooksContext<TFramework extends AnyFramework> {
   }
 }
 
-function hookify<TFramework extends AnyFramework>(
+function hookify<TFramework extends Framework>(
   storyFn: LegacyStoryFn<TFramework>
 ): LegacyStoryFn<TFramework>;
-function hookify<TFramework extends AnyFramework>(
+function hookify<TFramework extends Framework>(
   decorator: DecoratorFunction<TFramework>
 ): DecoratorFunction<TFramework>;
-function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
+function hookify<TFramework extends Framework>(fn: AbstractFunction) {
   return (...args: any[]) => {
     const { hooks }: { hooks: HooksContext<TFramework> } =
       typeof args[0] === 'function' ? args[1] : args[0];
@@ -177,7 +177,7 @@ function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
 let numberOfRenders = 0;
 const RENDER_LIMIT = 25;
 export const applyHooks =
-  <TFramework extends AnyFramework>(
+  <TFramework extends Framework>(
     applyDecorators: DecoratorApplicator<TFramework>
   ): DecoratorApplicator<TFramework> =>
   (storyFn: LegacyStoryFn<TFramework>, decorators: DecoratorFunction<TFramework>[]) => {
@@ -215,11 +215,11 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) =>
 const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
-function getHooksContextOrNull<TFramework extends AnyFramework>(): HooksContext<TFramework> | null {
+function getHooksContextOrNull<TFramework extends Framework>(): HooksContext<TFramework> | null {
   return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
-function getHooksContextOrThrow<TFramework extends AnyFramework>(): HooksContext<TFramework> {
+function getHooksContextOrThrow<TFramework extends Framework>(): HooksContext<TFramework> {
   const hooks = getHooksContextOrNull<TFramework>();
   if (hooks == null) {
     throw invalidHooksError();
@@ -404,7 +404,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
 }
 
 /* Returns current story context */
-export function useStoryContext<TFramework extends AnyFramework>(): StoryContext<TFramework> {
+export function useStoryContext<TFramework extends Framework>(): StoryContext<TFramework> {
   const { currentContext } = getHooksContextOrThrow();
   if (currentContext == null) {
     throw invalidHooksError();

code/lib/builder-vite/src/codegen-iframe-script.ts

@@ -87,7 +87,8 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
           }
           case 'decorateStory':
           case 'applyDecorators':
-          case 'renderToDOM': {
+          case 'renderToDOM': // deprecated
+          case 'renderToCanvas': {
             return null; // This key is not handled directly in v6 mode.
           }
           case 'runStep': {

code/lib/builder-webpack5/templates/virtualModuleEntry.template.js

@@ -47,7 +47,8 @@ Object.keys(previewAnnotations).forEach((key) => {
     }
     case '__namedExportsOrder':
     case 'decorateStory':
-    case 'renderToDOM': {
+    case 'renderToDOM': // deprecated
+    case 'renderToCanvas': {
       return null; // This key is not handled directly in v6 mode.
     }
     case 'runStep': {

code/lib/cli/src/project_types.ts

@@ -278,7 +278,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
 ];
 
 // A TemplateConfiguration that matches unsupported frameworks
-// AnyFramework matchers can be added to this object to give
+// Framework matchers can be added to this object to give
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,

code/lib/cli/src/repro-next.ts

@@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import degit from 'degit';
 
 import { existsSync } from 'fs-extra';
-import TEMPLATES from './repro-templates';
+import { allTemplates as TEMPLATES } from './repro-templates';
 
 const logger = console;
 

code/lib/cli/src/repro-templates.ts

@@ -1,8 +1,7 @@
-const craTemplates = {
+export const allTemplates = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
     script: 'npx create-react-app .',
-    cadence: ['daily', 'weekly'],
     expected: {
       // TODO: change this to @storybook/cra once that package is created
       framework: '@storybook/react-webpack5',
@@ -13,7 +12,6 @@ const craTemplates = {
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
     script: 'npx create-react-app . --template typescript',
-    cadence: ['ci', 'daily', 'weekly'],
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -23,13 +21,9 @@ const craTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const nextjsTemplates = {
   'nextjs/default-js': {
     name: 'Next.js (JavaScript)',
     script: 'npx create-next-app {{beforeDir}}',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
@@ -39,20 +33,15 @@ const nextjsTemplates = {
   'nextjs/default-ts': {
     name: 'Next.js (TypeScript)',
     script: 'npx create-next-app {{beforeDir}} --typescript',
-    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const reactViteTemplates = {
   'react-vite/default-js': {
     name: 'React Vite (JS)',
     script: 'yarn create vite . --template react',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -62,20 +51,15 @@ const reactViteTemplates = {
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
     script: 'yarn create vite . --template react-ts',
-    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const reactWebpackTemplates = {
   'react-webpack/18-ts': {
     name: 'React Webpack5 (TS)',
     script: 'yarn create webpack5-react .',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/react-webpack5',
       renderer: '@storybook/react',
@@ -85,20 +69,15 @@ const reactWebpackTemplates = {
   'react-webpack/17-ts': {
     name: 'React Webpack5 (TS)',
     script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/react-webpack5',
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const vue3ViteTemplates = {
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
     script: 'yarn create vite . --template vue',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -108,16 +87,12 @@ const vue3ViteTemplates = {
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
     script: 'yarn create vite . --template vue-ts',
-    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const vue2ViteTemplates = {
   'vue2-vite/2.7-js': {
     name: 'Vue2 Vite (vue 2.7 JS)',
     // TODO: convert this to an `npm create` script, use that instead.
@@ -125,7 +100,6 @@ const vue2ViteTemplates = {
     // preferring community bootstrap scripts / generators instead.
     script:
       'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
-    cadence: ['daily', 'weekly'],
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -134,26 +108,18 @@ const vue2ViteTemplates = {
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const htmlWebpackTemplates = {
   'html-webpack/default': {
     name: 'HTML Webpack5',
     script: 'yarn create webpack5-html .',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/html-webpack5',
       renderer: '@storybook/html',
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const svelteViteTemplates = {
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
     script: 'yarn create vite . --template svelte',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -163,7 +129,6 @@ const svelteViteTemplates = {
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
     script: 'yarn create vite . --template svelte-ts',
-    cadence: ['ci', 'daily', 'weekly'],
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -172,14 +137,10 @@ const svelteViteTemplates = {
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const angularCliTemplates = {
   'angular-cli/default-ts': {
     name: 'Angular CLI (latest)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
-    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -190,21 +151,16 @@ const angularCliTemplates = {
     name: 'Angular CLI (Version 13)',
     script:
       'npx -p @angular/cli@13 ng new angular-v13 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const svelteKitTemplates = {
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -215,20 +171,15 @@ const svelteKitTemplates = {
     name: 'Svelte Kit (TS)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',
-    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const litViteTemplates = {
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
     script: 'yarn create vite . --template lit',
-    cadence: ['daily', 'weekly'] as any,
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -240,7 +191,6 @@ const litViteTemplates = {
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
     script: 'yarn create vite . --template lit-ts',
-    cadence: ['ci', 'daily', 'weekly'] as any,
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -249,13 +199,9 @@ const litViteTemplates = {
       builder: '@storybook/builder-vite',
     },
   },
-};
-
-const vueCliTemplates = {
   'vue-cli/default-js': {
     name: 'Vue-CLI (Default JS)',
     script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge',
-    cadence: ['daily', 'weekly'],
     skipTasks: [
       // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
       'smoke-test',
@@ -270,7 +216,6 @@ const vueCliTemplates = {
     name: 'Vue-CLI (Vue2 JS)',
     script:
       'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"',
-    cadence: ['ci', 'daily', 'weekly'],
     skipTasks: [
       // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
       'smoke-test',
@@ -281,13 +226,9 @@ const vueCliTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
-};
-
-const preactWebpackTemplates = {
   'preact-webpack5/default-js': {
     name: 'Preact CLI (Default JS)',
     script: 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/preact-webpack5',
       renderer: '@storybook/preact',
@@ -297,7 +238,6 @@ const preactWebpackTemplates = {
   'preact-webpack5/default-ts': {
     name: 'Preact CLI (Default TS)',
     script: 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install',
-    cadence: ['daily', 'weekly'],
     expected: {
       framework: '@storybook/preact-webpack5',
       renderer: '@storybook/preact',
@@ -306,20 +246,39 @@ const preactWebpackTemplates = {
   },
 };
 
-const reproTemplates = {
-  ...craTemplates,
-  ...reactViteTemplates,
-  ...reactWebpackTemplates,
-  ...vue2ViteTemplates,
-  ...vue3ViteTemplates,
-  ...svelteViteTemplates,
-  ...svelteKitTemplates,
-  ...angularCliTemplates,
-  ...litViteTemplates,
-  ...vueCliTemplates,
-  ...htmlWebpackTemplates,
-  ...preactWebpackTemplates,
-  ...nextjsTemplates,
-};
+type TemplateKey = keyof typeof allTemplates;
 
-export default reproTemplates;
+export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
+export const pr: TemplateKey[] = [
+  ...ci,
+  'angular-cli/default-ts',
+  'vue3-vite/default-ts',
+  'vue-cli/vue2-default-js',
+  'lit-vite/default-ts',
+  'svelte-vite/default-ts',
+  'svelte-kit/skeleton-ts',
+  'nextjs/default-ts',
+];
+export const merged: TemplateKey[] = [
+  ...pr,
+  'react-webpack/18-ts',
+  'react-webpack/17-ts',
+  'angular-cli/13-ts',
+  'preact-webpack5/default-ts',
+  'html-webpack/default',
+];
+export const daily: TemplateKey[] = [
+  ...merged,
+  'cra/default-js',
+  'react-vite/default-js',
+  'vue3-vite/default-js',
+  'vue2-vite/2.7-js',
+  'vue-cli/default-js',
+  'lit-vite/default-js',
+  'svelte-kit/skeleton-js',
+  'svelte-vite/default-js',
+  'nextjs/default-js',
+  'preact-webpack5/default-js',
+];
+
+export const templatesByCadence = { ci, pr, merged, daily };

code/lib/cli/src/window.d.ts

@@ -1,8 +1,8 @@
-import type { AnyFramework } from '@storybook/types';
+import type { Framework } from '@storybook/types';
 import type { StoryStore } from '@storybook/client-api';
 
 declare global {
   interface Window {
-    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
+    __STORYBOOK_STORY_STORE__: StoryStore<Framework>;
   }
 }

code/lib/client-api/src/ClientApi.ts

@@ -8,7 +8,7 @@ import type {
   Args,
   StepRunner,
   ArgTypes,
-  AnyFramework,
+  Framework,
   DecoratorFunction,
   Parameters,
   ArgTypesEnhancer,
@@ -31,7 +31,7 @@ import { StoryStoreFacade } from './StoryStoreFacade';
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
 // relevant framework instanciates them via `start.js`. The good news is this happens right away.
-let singleton: ClientApi<AnyFramework>;
+let singleton: ClientApi<Framework>;
 
 const warningAlternatives = {
   addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
@@ -60,7 +60,7 @@ const checkMethod = (method: keyof typeof warningAlternatives) => {
   }
 };
 
-export const addDecorator = (decorator: DecoratorFunction<AnyFramework>) => {
+export const addDecorator = (decorator: DecoratorFunction<Framework>) => {
   checkMethod('addDecorator');
   singleton.addDecorator(decorator);
 };
@@ -70,7 +70,7 @@ export const addParameters = (parameters: Parameters) => {
   singleton.addParameters(parameters);
 };
 
-export const addLoader = (loader: LoaderFunction<AnyFramework>) => {
+export const addLoader = (loader: LoaderFunction<Framework>) => {
   checkMethod('addLoader');
   singleton.addLoader(loader);
 };
@@ -85,12 +85,12 @@ export const addArgTypes = (argTypes: ArgTypes) => {
   singleton.addArgTypes(argTypes);
 };
 
-export const addArgsEnhancer = (enhancer: ArgsEnhancer<AnyFramework>) => {
+export const addArgsEnhancer = (enhancer: ArgsEnhancer<Framework>) => {
   checkMethod('addArgsEnhancer');
   singleton.addArgsEnhancer(enhancer);
 };
 
-export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<AnyFramework>) => {
+export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Framework>) => {
   checkMethod('addArgTypesEnhancer');
   singleton.addArgTypesEnhancer(enhancer);
 };
@@ -105,13 +105,13 @@ export const getGlobalRender = () => {
   return singleton.facade.projectAnnotations.render;
 };
 
-export const setGlobalRender = (render: StoryFn<AnyFramework>) => {
+export const setGlobalRender = (render: StoryFn<Framework>) => {
   checkMethod('setGlobalRender');
   singleton.facade.projectAnnotations.render = render;
 };
 
 const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
-export class ClientApi<TFramework extends AnyFramework> {
+export class ClientApi<TFramework extends Framework> {
   facade: StoryStoreFacade<TFramework>;
 
   storyStore?: StoryStore<TFramework>;

code/lib/client-api/src/StoryStoreFacade.ts

@@ -5,7 +5,7 @@ import { SynchronousPromise } from 'synchronous-promise';
 import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
 import type {
   Addon_IndexEntry,
-  AnyFramework,
+  Framework,
   ComponentId,
   DocsOptions,
   Parameters,
@@ -21,7 +21,7 @@ import type { StoryStore } from '@storybook/store';
 import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
 import { logger } from '@storybook/client-logger';
 
-export class StoryStoreFacade<TFramework extends AnyFramework> {
+export class StoryStoreFacade<TFramework extends Framework> {
   projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>;
 
   entries: Record<StoryId, Addon_IndexEntry & { componentId?: ComponentId }>;

code/lib/core-client/README.md

@@ -2,9 +2,9 @@
 
 This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer.
 
-A framework calls the `start(renderToDom, { render, decorateStory })` function and provides:
+A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides:
 
-- The `renderToDom` function, which tells Storybook how to render the result of a story function to the DOM
+- The `renderToCanvas` function, which tells Storybook how to render the result of a story function to the DOM
 - The `render` function, which is a default mapping of `args` to a story result in CSFv3
 - The `decorateStory` function, which tells Storybook how to combine decorators in the framework.
 

code/lib/core-client/src/PreviewWeb.mockdata.ts

@@ -10,7 +10,7 @@ import {
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
 
-import type { Store_StoryIndex, Store_TeardownRenderToDOM } from '@storybook/types';
+import type { Store_StoryIndex, TeardownRenderToCanvas } from '@storybook/types';
 
 export type RenderPhase =
   | 'preparing'
@@ -67,13 +67,13 @@ export const docsRenderer = {
   render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()),
   unmount: jest.fn(),
 };
-export const teardownRenderToDOM: jest.Mock<Store_TeardownRenderToDOM> = jest.fn();
+export const teardownrenderToCanvas: jest.Mock<TeardownRenderToCanvas> = jest.fn();
 export const projectAnnotations = {
   globals: { a: 'b' },
   globalTypes: {},
   decorators: [jest.fn((s) => s())],
   render: jest.fn(),
-  renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM),
+  renderToCanvas: jest.fn().mockReturnValue(teardownrenderToCanvas),
   parameters: { docs: { renderer: () => docsRenderer } },
 };
 export const getProjectAnnotations = jest.fn(() => projectAnnotations as any);

code/lib/core-client/src/start.test.ts

@@ -105,9 +105,9 @@ describe('start', () => {
   });
   describe('when configure is called with storiesOf only', () => {
     it('loads and renders the first story correctly', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi
@@ -194,7 +194,7 @@ describe('start', () => {
       await waitForRender();
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one');
 
-      expect(renderToDOM).toHaveBeenCalledWith(
+      expect(renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           id: 'component-a--story-one',
         }),
@@ -203,9 +203,9 @@ describe('start', () => {
     });
 
     it('deals with stories with "default" name', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());
@@ -217,9 +217,9 @@ describe('start', () => {
     });
 
     it('deals with stories with camel-cased names', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi
@@ -233,9 +233,9 @@ describe('start', () => {
     });
 
     it('deals with stories with spaces in the name', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi
@@ -250,9 +250,9 @@ describe('start', () => {
 
     // https://github.com/storybookjs/storybook/issues/16303
     it('deals with stories with numeric names', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('story0', jest.fn());
@@ -264,9 +264,9 @@ describe('start', () => {
     });
 
     it('deals with storiesOf from the same file twice', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());
@@ -288,9 +288,9 @@ describe('start', () => {
     });
 
     it('allows setting compomnent/args/argTypes via a parameter', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       const component = {};
       configure('test', () => {
@@ -309,7 +309,7 @@ describe('start', () => {
 
       await waitForRender();
 
-      expect(renderToDOM).toHaveBeenCalledWith(
+      expect(renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           storyContext: expect.objectContaining({
             component,
@@ -327,9 +327,9 @@ describe('start', () => {
     });
 
     it('supports forceRerender()', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
-      const { configure, clientApi, forceReRender } = start(renderToDOM);
+      const { configure, clientApi, forceReRender } = start(renderToCanvas);
 
       configure('test', () => {
         clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());
@@ -346,9 +346,9 @@ describe('start', () => {
     });
 
     it('supports HMR when a story file changes', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       let disposeCallback: () => void = () => {};
       const module = {
@@ -382,9 +382,9 @@ describe('start', () => {
     });
 
     it('re-emits SET_INDEX when a story is added', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
-      const { configure, clientApi, forceReRender } = start(renderToDOM);
+      const { configure, clientApi, forceReRender } = start(renderToCanvas);
 
       let disposeCallback: () => void = () => {};
       const module = {
@@ -461,9 +461,9 @@ describe('start', () => {
     });
 
     it('re-emits SET_INDEX when a story file is removed', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
 
       let disposeCallback: () => void = () => {};
       const moduleB = {
@@ -578,9 +578,9 @@ describe('start', () => {
 
   describe('when configure is called with CSF only', () => {
     it('loads and renders the first story correctly', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure } = start(renderToDOM);
+      const { configure } = start(renderToCanvas);
       configure('test', () => [componentCExports]);
 
       await waitForRender();
@@ -635,7 +635,7 @@ describe('start', () => {
       await waitForRender();
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-c--story-one');
 
-      expect(renderToDOM).toHaveBeenCalledWith(
+      expect(renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           id: 'component-c--story-one',
         }),
@@ -644,7 +644,7 @@ describe('start', () => {
     });
 
     it('supports HMR when a story file changes', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
       let disposeCallback: (data: object) => void = () => {};
       const module = {
@@ -658,7 +658,7 @@ describe('start', () => {
         },
       };
 
-      const { configure } = start(renderToDOM);
+      const { configure } = start(renderToCanvas);
       configure('test', () => [componentCExports], module as any);
 
       await waitForRender();
@@ -682,7 +682,7 @@ describe('start', () => {
     });
 
     it('re-emits SET_INDEX when a story is added', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
       let disposeCallback: (data: object) => void = () => {};
       const module = {
@@ -695,7 +695,7 @@ describe('start', () => {
           },
         },
       };
-      const { configure } = start(renderToDOM);
+      const { configure } = start(renderToCanvas);
       configure('test', () => [componentCExports], module as any);
 
       await waitForRender();
@@ -775,7 +775,7 @@ describe('start', () => {
     });
 
     it('re-emits SET_INDEX when a story file is removed', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
 
       let disposeCallback: (data: object) => void = () => {};
       const module = {
@@ -788,7 +788,7 @@ describe('start', () => {
           },
         },
       };
-      const { configure } = start(renderToDOM);
+      const { configure } = start(renderToCanvas);
       configure(
         'test',
         () => [componentCExports, { default: { title: 'Component D' }, StoryFour: jest.fn() }],
@@ -920,10 +920,10 @@ describe('start', () => {
     });
 
     it('allows you to override the render function in project annotations', async () => {
-      const renderToDOM = jest.fn(({ storyFn }) => storyFn());
+      const renderToCanvas = jest.fn(({ storyFn }) => storyFn());
       const frameworkRender = jest.fn();
 
-      const { configure } = start(renderToDOM, { render: frameworkRender });
+      const { configure } = start(renderToCanvas, { render: frameworkRender });
 
       const projectRender = jest.fn();
       setGlobalRender(projectRender);
@@ -953,9 +953,9 @@ describe('start', () => {
 
       // NOTE: MDX files are only ever passed as CSF
       it('sends over docs only stories as entries', async () => {
-        const renderToDOM = jest.fn();
+        const renderToCanvas = jest.fn();
 
-        const { configure } = start(renderToDOM);
+        const { configure } = start(renderToCanvas);
 
         configure(
           'test',
@@ -998,9 +998,9 @@ describe('start', () => {
 
   describe('when configure is called with a combination', () => {
     it('loads and renders the first story correctly', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure, clientApi } = start(renderToDOM);
+      const { configure, clientApi } = start(renderToCanvas);
       configure('test', () => {
         clientApi
           .storiesOf('Component A', { id: 'file1' } as NodeModule)
@@ -1126,7 +1126,7 @@ describe('start', () => {
       await waitForRender();
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one');
 
-      expect(renderToDOM).toHaveBeenCalledWith(
+      expect(renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           id: 'component-a--story-one',
         }),
@@ -1140,9 +1140,9 @@ describe('start', () => {
       });
 
       it('adds stories for each component with docsPage tag', async () => {
-        const renderToDOM = jest.fn();
+        const renderToCanvas = jest.fn();
 
-        const { configure, clientApi } = start(renderToDOM);
+        const { configure, clientApi } = start(renderToCanvas);
         configure('test', () => {
           clientApi
             .storiesOf('Component A', { id: 'file1' } as NodeModule)
@@ -1350,9 +1350,9 @@ describe('start', () => {
       StoryOne: jest.fn(),
     };
     it('loads and renders the first story correctly', async () => {
-      const renderToDOM = jest.fn();
+      const renderToCanvas = jest.fn();
 
-      const { configure } = start(renderToDOM);
+      const { configure } = start(renderToCanvas);
       configure('test', () => [componentDExports]);
 
       await waitForEvents([SET_INDEX]);

code/lib/core-client/src/start.ts

@@ -2,13 +2,7 @@
 import global from 'global';
 import { ClientApi } from '@storybook/client-api';
 import { PreviewWeb } from '@storybook/preview-web';
-import type {
-  AnyFramework,
-  ArgsStoryFn,
-  Loadable,
-  Path,
-  Store_WebProjectAnnotations,
-} from '@storybook/types';
+import type { Framework, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types';
 import { createChannel } from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
@@ -21,8 +15,8 @@ const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
 
-interface CoreClient_RendererImplementation<TFramework extends AnyFramework> {
-  decorateStory?: Store_WebProjectAnnotations<TFramework>['applyDecorators'];
+interface CoreClient_RendererImplementation<TFramework extends Framework> {
+  decorateStory?: ProjectAnnotations<TFramework>['applyDecorators'];
   render?: ArgsStoryFn<TFramework>;
 }
 
@@ -33,7 +27,7 @@ interface CoreClient_ClientAPIFacade {
   raw: (...args: any[]) => never;
 }
 
-interface CoreClient_StartReturnValue<TFramework extends AnyFramework> {
+interface CoreClient_StartReturnValue<TFramework extends Framework> {
   /* deprecated */
   forceReRender: () => void;
   /* deprecated */
@@ -42,8 +36,8 @@ interface CoreClient_StartReturnValue<TFramework extends AnyFramework> {
   clientApi: ClientApi<TFramework> | CoreClient_ClientAPIFacade;
 }
 
-export function start<TFramework extends AnyFramework>(
-  renderToDOM: Store_WebProjectAnnotations<TFramework>['renderToDOM'],
+export function start<TFramework extends Framework>(
+  renderToCanvas: ProjectAnnotations<TFramework>['renderToCanvas'],
   { decorateStory, render }: CoreClient_RendererImplementation<TFramework> = {}
 ): CoreClient_StartReturnValue<TFramework> {
   if (globalWindow) {
@@ -124,7 +118,7 @@ export function start<TFramework extends AnyFramework>(
         return {
           render,
           ...clientApi.facade.projectAnnotations,
-          renderToDOM,
+          renderToCanvas,
           applyDecorators: decorateStory,
         };
       };

code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts

@@ -1,7 +1,7 @@
-import type { AnyFramework, StoryContextForEnhancers } from '@storybook/types';
+import type { Framework, StoryContextForEnhancers } from '@storybook/types';
 import { combineParameters } from '@storybook/store';
 
-export const enhanceArgTypes = <TFramework extends AnyFramework>(
+export const enhanceArgTypes = <TFramework extends Framework>(
   context: StoryContextForEnhancers<TFramework>
 ) => {
   const {

code/lib/preview-web/README.md

@@ -50,7 +50,7 @@ A rendering story goes through these phases:
 
 - `preparing` - (maybe async) import the story file and prepare the story function.
 - `loading` - async loaders are running
-- `rendering` - the `renderToDOM` function for the framework is running
+- `rendering` - the `renderToCanvas` function for the framework is running
 - `playing` - the `play` function is running
 - `completed` - the story is done.
 

code/lib/preview-web/src/Preview.tsx

@@ -13,20 +13,19 @@ import {
   UPDATE_GLOBALS,
   UPDATE_STORY_ARGS,
 } from '@storybook/core-events';
-import { logger } from '@storybook/client-logger';
+import { logger, deprecate } from '@storybook/client-logger';
 import type { Channel } from '@storybook/channels';
 import { addons } from '@storybook/addons';
 import type {
-  AnyFramework,
+  Framework,
   Args,
   Globals,
-  ProjectAnnotations,
   Store_ModuleImportFn,
   Store_PromiseLike,
-  Store_RenderToDOM,
+  RenderToCanvas,
   Store_Story,
   Store_StoryIndex,
-  Store_WebProjectAnnotations,
+  ProjectAnnotations,
   StoryId,
 } from '@storybook/types';
 import { StoryStore } from '@storybook/store';
@@ -42,7 +41,7 @@ const STORY_INDEX_PATH = './index.json';
 
 export type MaybePromise<T> = Promise<T> | T;
 
-export class Preview<TFramework extends AnyFramework> {
+export class Preview<TFramework extends Framework> {
   serverChannel?: Channel;
 
   storyStore: StoryStore<TFramework>;
@@ -51,7 +50,7 @@ export class Preview<TFramework extends AnyFramework> {
 
   importFn?: Store_ModuleImportFn;
 
-  renderToDOM?: Store_RenderToDOM<TFramework>;
+  renderToCanvas?: RenderToCanvas<TFramework>;
 
   storyRenders: StoryRender<TFramework>[] = [];
 
@@ -81,7 +80,7 @@ export class Preview<TFramework extends AnyFramework> {
     // getProjectAnnotations has been run, thus this slightly awkward approach
     getStoryIndex?: () => Store_StoryIndex;
     importFn: Store_ModuleImportFn;
-    getProjectAnnotations: () => MaybePromise<Store_WebProjectAnnotations<TFramework>>;
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
   }) {
     // We save these two on initialization in case `getProjectAnnotations` errors,
     // in which case we may need them later when we recover.
@@ -106,15 +105,18 @@ export class Preview<TFramework extends AnyFramework> {
   }
 
   getProjectAnnotationsOrRenderError(
-    getProjectAnnotations: () => MaybePromise<Store_WebProjectAnnotations<TFramework>>
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>
   ): Store_PromiseLike<ProjectAnnotations<TFramework>> {
     return SynchronousPromise.resolve()
       .then(getProjectAnnotations)
       .then((projectAnnotations) => {
-        this.renderToDOM = projectAnnotations.renderToDOM;
-        if (!this.renderToDOM) {
+        if (projectAnnotations.renderToDOM)
+          deprecate(`\`renderToDOM\` is deprecated, please rename to \`renderToCanvas\``);
+
+        this.renderToCanvas = projectAnnotations.renderToCanvas || projectAnnotations.renderToDOM;
+        if (!this.renderToCanvas) {
           throw new Error(dedent`
-            Expected your framework's preset to export a \`renderToDOM\` field.
+            Expected your framework's preset to export a \`renderToCanvas\` field.
 
             Perhaps it needs to be upgraded for Storybook 6.4?
 
@@ -132,7 +134,7 @@ export class Preview<TFramework extends AnyFramework> {
   }
 
   // If initialization gets as far as project annotations, this function runs.
-  initializeWithProjectAnnotations(projectAnnotations: Store_WebProjectAnnotations<TFramework>) {
+  initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
     this.storyStore.setProjectAnnotations(projectAnnotations);
 
     this.setInitialGlobals();
@@ -307,16 +309,16 @@ export class Preview<TFramework extends AnyFramework> {
   // "instant", although async.
   renderStoryToElement(
     story: Store_Story<TFramework>,
-    element: HTMLElement,
+    element: TFramework['canvasElement'],
     options: StoryRenderOptions
   ) {
-    if (!this.renderToDOM)
+    if (!this.renderToCanvas)
       throw new Error(`Cannot call renderStoryToElement before initialization`);
 
     const render = new StoryRender<TFramework>(
       this.channel,
       this.storyStore,
-      this.renderToDOM,
+      this.renderToCanvas,
       this.inlineStoryCallbacks(story.id),
       story.id,
       'docs',

code/lib/preview-web/src/PreviewWeb.integration.test.ts

@@ -20,7 +20,7 @@ import {
 } from './PreviewWeb.mockdata';
 
 // PreviewWeb.test mocks out all rendering
-//   - ie. from`renderToDOM()` (stories) or`ReactDOM.render()` (docs) in.
+//   - ie. from`renderToCanvas()` (stories) or`ReactDOM.render()` (docs) in.
 // This file lets them rip.
 
 jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockChannel }));
@@ -52,7 +52,7 @@ beforeEach(() => {
   componentOneExports.default.loaders[0].mockReset().mockImplementation(async () => ({ l: 7 }));
   componentOneExports.default.parameters.docs.container.mockClear();
   componentOneExports.a.play.mockReset();
-  projectAnnotations.renderToDOM.mockReset();
+  projectAnnotations.renderToCanvas.mockReset();
   projectAnnotations.render.mockClear();
   projectAnnotations.decorators[0].mockClear();
 
@@ -73,7 +73,7 @@ describe('PreviewWeb', () => {
       const { DocsRenderer } = await import('@storybook/addon-docs');
       projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any;
 
-      projectAnnotations.renderToDOM.mockImplementationOnce(
+      projectAnnotations.renderToCanvas.mockImplementationOnce(
         ({ storyFn }: Store_RenderContext<any>) => storyFn()
       );
       document.location.search = '?id=component-one--a';
@@ -133,7 +133,7 @@ describe('PreviewWeb', () => {
       await preview.initialize({ importFn, getProjectAnnotations });
       await waitForRender();
 
-      projectAnnotations.renderToDOM.mockImplementationOnce(
+      projectAnnotations.renderToCanvas.mockImplementationOnce(
         ({ storyFn }: Store_RenderContext<any>) => storyFn()
       );
       projectAnnotations.decorators[0].mockClear();

code/lib/preview-web/src/PreviewWeb.mockdata.ts

@@ -10,7 +10,7 @@ import {
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
 
-import type { Store_StoryIndex, Store_TeardownRenderToDOM } from '@storybook/types';
+import type { Store_StoryIndex, TeardownRenderToCanvas } from '@storybook/types';
 import type { RenderPhase } from './render/StoryRender';
 
 export const componentOneExports = {
@@ -58,13 +58,13 @@ export const docsRenderer = {
   render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()),
   unmount: jest.fn(),
 };
-export const teardownRenderToDOM: jest.Mock<Store_TeardownRenderToDOM> = jest.fn();
+export const teardownrenderToCanvas: jest.Mock<TeardownRenderToCanvas> = jest.fn();
 export const projectAnnotations = {
   globals: { a: 'b' },
   globalTypes: {},
   decorators: [jest.fn((s) => s())],
   render: jest.fn(),
-  renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM),
+  renderToCanvas: jest.fn().mockReturnValue(teardownrenderToCanvas),
   parameters: { docs: { renderer: () => docsRenderer } },
 };
 export const getProjectAnnotations = jest.fn(() => projectAnnotations as any);

code/lib/preview-web/src/PreviewWeb.test.ts

@@ -29,7 +29,7 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
-import type { AnyFramework } from '@storybook/types';
+import type { Framework } from '@storybook/types';
 import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store';
 import { mocked } from 'ts-jest/utils';
 
@@ -49,7 +49,7 @@ import {
   waitForRenderPhase,
   docsRenderer,
   standaloneDocsExports,
-  teardownRenderToDOM,
+  teardownrenderToCanvas,
 } from './PreviewWeb.mockdata';
 import { WebView } from './WebView';
 
@@ -110,7 +110,7 @@ async function createAndRenderPreview({
   getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations,
 }: {
   importFn?: ModuleImportFn;
-  getProjectAnnotations?: () => WebProjectAnnotations<AnyFramework>;
+  getProjectAnnotations?: () => WebProjectAnnotations<Framework>;
 } = {}) {
   const preview = new PreviewWeb();
   await preview.initialize({
@@ -128,8 +128,8 @@ beforeEach(() => {
   emitter.removeAllListeners();
   componentOneExports.default.loaders[0].mockReset().mockImplementation(async () => ({ l: 7 }));
   componentOneExports.a.play.mockReset();
-  teardownRenderToDOM.mockReset();
-  projectAnnotations.renderToDOM.mockReset().mockReturnValue(teardownRenderToDOM);
+  teardownrenderToCanvas.mockReset();
+  projectAnnotations.renderToCanvas.mockReset().mockReturnValue(teardownrenderToCanvas);
   projectAnnotations.render.mockClear();
   projectAnnotations.decorators[0].mockClear();
   docsRenderer.render.mockClear();
@@ -193,7 +193,9 @@ describe('PreviewWeb', () => {
     });
 
     it('SET_GLOBALS sets globals and types even when undefined', async () => {
-      await createAndRenderPreview({ getProjectAnnotations: () => ({ renderToDOM: jest.fn() }) });
+      await createAndRenderPreview({
+        getProjectAnnotations: () => ({ renderToCanvas: jest.fn() }),
+      });
 
       expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
         globals: {},
@@ -251,7 +253,7 @@ describe('PreviewWeb', () => {
 
       const preview = await createAndRenderPreview();
 
-      expect(preview.urlStore.selection).toEqual({
+      expect(preview.selectionStore.selection).toEqual({
         storyId: 'component-one--a',
         viewMode: 'story',
       });
@@ -458,11 +460,11 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('passes loaded context to renderToDOM', async () => {
+      it('passes loaded context to renderToCanvas', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -496,9 +498,9 @@ describe('PreviewWeb', () => {
         expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
       });
 
-      it('renders exception if renderToDOM throws', async () => {
+      it('renders exception if renderToCanvas throws', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           throw error;
         });
 
@@ -509,12 +511,12 @@ describe('PreviewWeb', () => {
         expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
       });
 
-      it('renders helpful message if renderToDOM is undefined', async () => {
+      it('renders helpful message if renderToCanvas is undefined', async () => {
         document.location.search = '?id=component-one--a';
 
         getProjectAnnotations.mockReturnValueOnce({
           ...projectAnnotations,
-          renderToDOM: undefined,
+          renderToCanvas: undefined,
         });
         const preview = new PreviewWeb();
         await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow();
@@ -522,7 +524,7 @@ describe('PreviewWeb', () => {
         expect(preview.view.showErrorDisplay).toHaveBeenCalled();
         expect((preview.view.showErrorDisplay as jest.Mock).mock.calls[0][0])
           .toMatchInlineSnapshot(`
-                          [Error: Expected your framework's preset to export a \`renderToDOM\` field.
+                          [Error: Expected your framework's preset to export a \`renderToCanvas\` field.
 
                           Perhaps it needs to be upgraded for Storybook 6.4?
 
@@ -584,7 +586,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation((context) =>
+        projectAnnotations.renderToCanvas.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -597,7 +599,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
+        projectAnnotations.renderToCanvas.mockImplementation((context) => context.showError(error));
 
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
@@ -625,7 +627,7 @@ describe('PreviewWeb', () => {
 
       it('does not show error display if the render function throws IGNORED_EXCEPTION', async () => {
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           throw IGNORED_EXCEPTION;
         });
 
@@ -771,16 +773,16 @@ describe('PreviewWeb', () => {
       expect(preview.storyStore.globals!.get()).toEqual({ a: 'b' });
     });
 
-    it('passes globals in context to renderToDOM', async () => {
+    it('passes globals in context to renderToCanvas', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       emitter.emit(UPDATE_GLOBALS, { globals: { a: 'd' } });
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -850,19 +852,19 @@ describe('PreviewWeb', () => {
       });
     });
 
-    it('passes new args in context to renderToDOM', async () => {
+    it('passes new args in context to renderToCanvas', async () => {
       document.location.search = '?id=component-one--a';
       await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       emitter.emit(UPDATE_STORY_ARGS, {
         storyId: 'component-one--a',
         updatedArgs: { new: 'arg' },
       });
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -918,8 +920,8 @@ describe('PreviewWeb', () => {
         );
 
         // Story gets rendered with updated args
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true, // Wasn't yet rendered so we need to force remount
             storyContext: expect.objectContaining({
@@ -932,14 +934,14 @@ describe('PreviewWeb', () => {
 
         // Now let the first loader call resolve
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         openGate({ l: 8 });
         await waitForRender();
 
         // Now the first call comes through, but picks up the new args
         // Note this isn't a particularly realistic case (the second loader being quicker than the first)
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             storyContext: expect.objectContaining({
               loaded: { l: 8 },
@@ -950,11 +952,11 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('renders a second time if renderToDOM is running', async () => {
+      it('renders a second time if renderToCanvas is running', async () => {
         const [gate, openGate] = createGate();
 
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementation(async () => gate);
+        projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
 
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('rendering');
@@ -964,12 +966,12 @@ describe('PreviewWeb', () => {
           updatedArgs: { new: 'arg' },
         });
 
-        // Now let the renderToDOM call resolve
+        // Now let the renderToCanvas call resolve
         openGate();
         await waitForRender();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -979,7 +981,7 @@ describe('PreviewWeb', () => {
           }),
           'story-element'
         );
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: false,
             storyContext: expect.objectContaining({
@@ -991,9 +993,9 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('works if it is called directly from inside non async renderToDOM', async () => {
+      it('works if it is called directly from inside non async renderToCanvas', async () => {
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           emitter.emit(UPDATE_STORY_ARGS, {
             storyId: 'component-one--a',
             updatedArgs: { new: 'arg' },
@@ -1001,8 +1003,8 @@ describe('PreviewWeb', () => {
         });
         await createAndRenderPreview();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -1012,7 +1014,7 @@ describe('PreviewWeb', () => {
           }),
           'story-element'
         );
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: false,
             storyContext: expect.objectContaining({
@@ -1024,12 +1026,12 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('calls renderToDOM again if play function is running', async () => {
+      it('calls renderToCanvas again if play function is running', async () => {
         const [gate, openGate] = createGate();
         componentOneExports.a.play.mockImplementationOnce(async () => gate);
 
-        const renderToDOMCalled = new Promise((resolve) => {
-          projectAnnotations.renderToDOM.mockImplementation(() => {
+        const renderToCanvasCalled = new Promise((resolve) => {
+          projectAnnotations.renderToCanvas.mockImplementation(() => {
             resolve(null);
           });
         });
@@ -1038,9 +1040,9 @@ describe('PreviewWeb', () => {
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('playing');
 
-        await renderToDOMCalled;
+        await renderToCanvasCalled;
         // Story gets rendered with original args
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -1060,7 +1062,7 @@ describe('PreviewWeb', () => {
         await waitForRender();
 
         // Story gets rendered with updated args
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: false,
             storyContext: expect.objectContaining({
@@ -1105,7 +1107,7 @@ describe('PreviewWeb', () => {
           preview.renderStoryToElement(story, 'story-element' as any);
           await waitForRender();
 
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               storyContext: expect.objectContaining({
                 args: { foo: 'a' },
@@ -1122,7 +1124,7 @@ describe('PreviewWeb', () => {
           });
           await waitForRender();
 
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               storyContext: expect.objectContaining({
                 args: { foo: 'a', new: 'arg' },
@@ -1227,7 +1229,7 @@ describe('PreviewWeb', () => {
 
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -1268,7 +1270,7 @@ describe('PreviewWeb', () => {
 
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -1309,7 +1311,7 @@ describe('PreviewWeb', () => {
 
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -1350,7 +1352,7 @@ describe('PreviewWeb', () => {
 
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: false,
           storyContext: expect.objectContaining({
@@ -1380,11 +1382,11 @@ describe('PreviewWeb', () => {
       await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       emitter.emit(FORCE_RE_RENDER);
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({ forceRemount: false }),
         'story-element'
       );
@@ -1404,11 +1406,11 @@ describe('PreviewWeb', () => {
       await createAndRenderPreview();
 
       mockChannel.emit.mockClear();
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       emitter.emit(FORCE_REMOUNT, { storyId: 'component-one--a' });
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({ forceRemount: true }),
         'story-element'
       );
@@ -1418,11 +1420,11 @@ describe('PreviewWeb', () => {
       const [gate, openGate] = createGate();
 
       document.location.search = '?id=component-one--a';
-      projectAnnotations.renderToDOM.mockImplementation(async () => gate);
+      projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
       await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
       await waitForRenderPhase('rendering');
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           forceRemount: true,
           storyContext: expect.objectContaining({
@@ -1437,13 +1439,13 @@ describe('PreviewWeb', () => {
       emitter.emit(FORCE_REMOUNT, { storyId: 'component-one--a' });
       await waitForSetCurrentStory();
 
-      // Now let the renderToDOM call resolve
+      // Now let the renderToCanvas call resolve
       openGate();
       await waitForRenderPhase('aborted');
       await waitForSetCurrentStory();
 
       await waitForRenderPhase('rendering');
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
 
       await waitForRenderPhase('playing');
       expect(componentOneExports.a.play).toHaveBeenCalledTimes(1);
@@ -1569,34 +1571,34 @@ describe('PreviewWeb', () => {
         expect(mockChannel.emit).toHaveBeenCalledWith(STORY_UNCHANGED, 'component-one--a');
       });
 
-      it('does NOT call renderToDOM', async () => {
+      it('does NOT call renderToCanvas', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         emitter.emit(SET_CURRENT_STORY, {
           storyId: 'component-one--a',
           viewMode: 'story',
         });
         await waitForSetCurrentStory();
 
-        // The renderToDOM would have been async so we need to wait a tick.
+        // The renderToCanvas would have been async so we need to wait a tick.
         await waitForQuiescence();
-        expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
+        expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalled();
       });
 
-      it('does NOT call renderToDOMs teardown', async () => {
+      it('does NOT call renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         emitter.emit(SET_CURRENT_STORY, {
           storyId: 'component-one--a',
           viewMode: 'story',
         });
         await waitForSetCurrentStory();
 
-        expect(teardownRenderToDOM).not.toHaveBeenCalled();
+        expect(teardownrenderToCanvas).not.toHaveBeenCalled();
       });
 
       describe('while preparing', () => {
@@ -1625,21 +1627,21 @@ describe('PreviewWeb', () => {
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
           mockChannel.emit.mockClear();
-          projectAnnotations.renderToDOM.mockClear();
+          projectAnnotations.renderToCanvas.mockClear();
           emitter.emit(SET_CURRENT_STORY, {
             storyId: 'component-one--a',
             viewMode: 'story',
           });
           await importedGate;
           // We are blocking import so this won't render yet
-          expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
+          expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalled();
 
           mockChannel.emit.mockClear();
           openGate();
           await waitForRender();
 
           // We should only render *once*
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
 
           // We should not show an error either
           expect(preview.view.showErrorDisplay).not.toHaveBeenCalled();
@@ -1670,7 +1672,7 @@ describe('PreviewWeb', () => {
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
           mockChannel.emit.mockClear();
-          projectAnnotations.renderToDOM.mockClear();
+          projectAnnotations.renderToCanvas.mockClear();
           emitter.emit(SET_CURRENT_STORY, {
             storyId: 'component-one--docs',
             viewMode: 'docs',
@@ -1714,7 +1716,7 @@ describe('PreviewWeb', () => {
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
           mockChannel.emit.mockClear();
-          projectAnnotations.renderToDOM.mockClear();
+          projectAnnotations.renderToCanvas.mockClear();
           emitter.emit(SET_CURRENT_STORY, {
             storyId: 'introduction--docs',
             viewMode: 'docs',
@@ -1737,18 +1739,18 @@ describe('PreviewWeb', () => {
     });
 
     describe('when changing story in story viewMode', () => {
-      it('calls renderToDOMs teardown', async () => {
+      it('calls renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         emitter.emit(SET_CURRENT_STORY, {
           storyId: 'component-one--b',
           viewMode: 'story',
         });
         await waitForSetCurrentStory();
 
-        expect(teardownRenderToDOM).toHaveBeenCalled();
+        expect(teardownrenderToCanvas).toHaveBeenCalled();
       });
 
       it('updates URL', async () => {
@@ -1848,7 +1850,7 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('passes loaded context to renderToDOM', async () => {
+      it('passes loaded context to renderToCanvas', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
@@ -1860,7 +1862,7 @@ describe('PreviewWeb', () => {
         await waitForSetCurrentStory();
         await waitForRender();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -1881,12 +1883,12 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('renders exception if renderToDOM throws', async () => {
+      it('renders exception if renderToCanvas throws', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           throw error;
         });
 
@@ -1907,7 +1909,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
+        projectAnnotations.renderToCanvas.mockImplementation((context) => context.showError(error));
 
         mockChannel.emit.mockClear();
         emitter.emit(SET_CURRENT_STORY, {
@@ -1929,7 +1931,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation((context) =>
+        projectAnnotations.renderToCanvas.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -2033,8 +2035,8 @@ describe('PreviewWeb', () => {
           await waitForRender();
 
           // Story gets rendered with updated args
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               forceRemount: true,
               storyContext: expect.objectContaining({
@@ -2050,7 +2052,7 @@ describe('PreviewWeb', () => {
           const [gate, openGate] = createGate();
 
           document.location.search = '?id=component-one--a';
-          projectAnnotations.renderToDOM.mockImplementation(async () => gate);
+          projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('rendering');
 
@@ -2061,13 +2063,13 @@ describe('PreviewWeb', () => {
           });
           await waitForSetCurrentStory();
 
-          // Now let the renderToDOM call resolve
+          // Now let the renderToCanvas call resolve
           openGate();
           await waitForRenderPhase('aborted');
           await waitForSetCurrentStory();
 
           await waitForRenderPhase('rendering');
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
 
           await waitForRenderPhase('playing');
           expect(componentOneExports.a.play).not.toHaveBeenCalled();
@@ -2088,7 +2090,7 @@ describe('PreviewWeb', () => {
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('playing');
 
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               forceRemount: true,
               storyContext: expect.objectContaining({
@@ -2113,7 +2115,7 @@ describe('PreviewWeb', () => {
 
           await waitForRenderPhase('rendering');
           expect(mockChannel.emit).toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               forceRemount: true,
               storyContext: expect.objectContaining({
@@ -2141,7 +2143,7 @@ describe('PreviewWeb', () => {
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('playing');
 
-          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
             expect.objectContaining({
               forceRemount: true,
               storyContext: expect.objectContaining({
@@ -2165,7 +2167,7 @@ describe('PreviewWeb', () => {
 
           expect(global.window.location.reload).toHaveBeenCalled();
           expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
-          expect(projectAnnotations.renderToDOM).not.toHaveBeenCalledWith(
+          expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalledWith(
             expect.objectContaining({
               storyContext: expect.objectContaining({ id: 'component-one--b' }),
             }),
@@ -2176,7 +2178,7 @@ describe('PreviewWeb', () => {
     });
 
     describe('when changing from story viewMode to docs', () => {
-      it('calls renderToDOMs teardown', async () => {
+      it('calls renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
 
@@ -2186,7 +2188,7 @@ describe('PreviewWeb', () => {
         });
         await waitForSetCurrentStory();
 
-        expect(teardownRenderToDOM).toHaveBeenCalled();
+        expect(teardownrenderToCanvas).toHaveBeenCalled();
       });
 
       it('updates URL', async () => {
@@ -2403,7 +2405,7 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('passes loaded context to renderToDOM', async () => {
+      it('passes loaded context to renderToCanvas', async () => {
         document.location.search = '?id=component-one--docs&viewMode=docs';
         await createAndRenderPreview();
 
@@ -2415,7 +2417,7 @@ describe('PreviewWeb', () => {
         await waitForSetCurrentStory();
         await waitForRender();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -2436,12 +2438,12 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('renders exception if renderToDOM throws', async () => {
+      it('renders exception if renderToCanvas throws', async () => {
         document.location.search = '?id=component-one--docs&viewMode=docs';
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           throw error;
         });
 
@@ -2459,7 +2461,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
+        projectAnnotations.renderToCanvas.mockImplementation((context) => context.showError(error));
 
         document.location.search = '?id=component-one--docs&viewMode=docs';
         const preview = await createAndRenderPreview();
@@ -2481,7 +2483,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation((context) =>
+        projectAnnotations.renderToCanvas.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -2587,7 +2589,7 @@ describe('PreviewWeb', () => {
           : componentTwoExports;
       });
 
-      it('calls renderToDOMs teardown', async () => {
+      it('calls renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
         mockChannel.emit.mockClear();
@@ -2595,7 +2597,7 @@ describe('PreviewWeb', () => {
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
-        expect(teardownRenderToDOM).toHaveBeenCalled();
+        expect(teardownrenderToCanvas).toHaveBeenCalled();
       });
 
       it('does not emit STORY_UNCHANGED', async () => {
@@ -2679,16 +2681,16 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('passes loaded context to renderToDOM', async () => {
+      it('passes loaded context to renderToCanvas', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -2721,11 +2723,11 @@ describe('PreviewWeb', () => {
         await waitForRender();
 
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -2737,12 +2739,12 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('renders exception if renderToDOM throws', async () => {
+      it('renders exception if renderToCanvas throws', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation(() => {
+        projectAnnotations.renderToCanvas.mockImplementation(() => {
           throw error;
         });
 
@@ -2759,7 +2761,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
+        projectAnnotations.renderToCanvas.mockImplementation((context) => context.showError(error));
 
         mockChannel.emit.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
@@ -2777,7 +2779,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementation((context) =>
+        projectAnnotations.renderToCanvas.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -2882,7 +2884,7 @@ describe('PreviewWeb', () => {
           : newComponentTwoExports;
       });
 
-      it('does NOT call renderToDOMs teardown', async () => {
+      it('does NOT call renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
@@ -2890,7 +2892,7 @@ describe('PreviewWeb', () => {
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForEvents([STORY_UNCHANGED]);
 
-        expect(teardownRenderToDOM).not.toHaveBeenCalled();
+        expect(teardownrenderToCanvas).not.toHaveBeenCalled();
       });
 
       it('emits STORY_UNCHANGED', async () => {
@@ -2922,11 +2924,11 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForQuiescence();
 
-        expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
+        expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalled();
         expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
       });
     });
@@ -2973,7 +2975,7 @@ describe('PreviewWeb', () => {
 
         // Update story A's args via HMR
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
@@ -2990,7 +2992,7 @@ describe('PreviewWeb', () => {
           bar: 'edited',
         });
 
-        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
             storyContext: expect.objectContaining({
@@ -3018,7 +3020,7 @@ describe('PreviewWeb', () => {
         },
       };
 
-      it('calls renderToDOMs teardown', async () => {
+      it('calls renderToCanvass teardown', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
 
@@ -3026,7 +3028,7 @@ describe('PreviewWeb', () => {
         preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
         await waitForEvents([STORY_MISSING]);
 
-        expect(teardownRenderToDOM).toHaveBeenCalled();
+        expect(teardownrenderToCanvas).toHaveBeenCalled();
       });
 
       it('renders loading error', async () => {
@@ -3046,11 +3048,11 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToDOM.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
         await waitForQuiescence();
 
-        expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
+        expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalled();
         expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
       });
 
@@ -3244,28 +3246,28 @@ describe('PreviewWeb', () => {
       });
     });
 
-    it('calls renderToDOMs teardown', async () => {
+    it('calls renderToCanvass teardown', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       mockChannel.emit.mockClear();
       preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
-      expect(teardownRenderToDOM).toHaveBeenCalled();
+      expect(teardownrenderToCanvas).toHaveBeenCalled();
     });
 
     it('rerenders the current story with new global meta-generated context', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();
 
-      projectAnnotations.renderToDOM.mockClear();
+      projectAnnotations.renderToCanvas.mockClear();
       mockChannel.emit.mockClear();
       preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
-      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
+      expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
         expect.objectContaining({
           storyContext: expect.objectContaining({
             args: { foo: 'a', global: 'added' },

code/lib/preview-web/src/PreviewWeb.tsx

@@ -1,492 +1,11 @@
-import { dedent } from 'ts-dedent';
-import global from 'global';
-import {
-  CURRENT_STORY_WAS_SET,
-  PRELOAD_ENTRIES,
-  PREVIEW_KEYDOWN,
-  SET_CURRENT_STORY,
-  SET_INDEX,
-  STORY_ARGS_UPDATED,
-  STORY_CHANGED,
-  STORY_ERRORED,
-  STORY_MISSING,
-  STORY_PREPARED,
-  STORY_RENDER_PHASE_CHANGED,
-  STORY_SPECIFIED,
-  STORY_THREW_EXCEPTION,
-  STORY_UNCHANGED,
-  UPDATE_QUERY_PARAMS,
-} from '@storybook/core-events';
-import { logger } from '@storybook/client-logger';
-import type {
-  AnyFramework,
-  Args,
-  Globals,
-  ProjectAnnotations,
-  Store_ModuleImportFn,
-  Store_Selection,
-  Store_StoryIndex,
-  Store_StorySpecifier,
-  Store_WebProjectAnnotations,
-  StoryId,
-  ViewMode,
-} from '@storybook/types';
-
-import type { MaybePromise } from './Preview';
-import { Preview } from './Preview';
+import type { Framework } from '@storybook/types';
 
+import { PreviewWithSelection } from './PreviewWithSelection';
 import { UrlStore } from './UrlStore';
 import { WebView } from './WebView';
-import { PREPARE_ABORTED } from './render/Render';
-import { StoryRender } from './render/StoryRender';
-import { TemplateDocsRender } from './render/TemplateDocsRender';
-import { StandaloneDocsRender } from './render/StandaloneDocsRender';
-
-const { window: globalWindow } = global;
-
-function focusInInput(event: Event) {
-  const target = event.target as Element;
-  return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
-}
-
-type PossibleRender<TFramework extends AnyFramework> =
-  | StoryRender<TFramework>
-  | TemplateDocsRender<TFramework>
-  | StandaloneDocsRender<TFramework>;
-
-function isStoryRender<TFramework extends AnyFramework>(
-  r: PossibleRender<TFramework>
-): r is StoryRender<TFramework> {
-  return r.type === 'story';
-}
-
-export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramework> {
-  urlStore: UrlStore;
-
-  view: WebView;
-
-  currentSelection?: Store_Selection;
-
-  currentRender?: PossibleRender<TFramework>;
 
+export class PreviewWeb<TFramework extends Framework> extends PreviewWithSelection<TFramework> {
   constructor() {
-    super();
-
-    this.view = new WebView();
-    this.urlStore = new UrlStore();
-  }
-
-  setupListeners() {
-    super.setupListeners();
-
-    globalWindow.onkeydown = this.onKeydown.bind(this);
-
-    this.channel.on(SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
-    this.channel.on(UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
-    this.channel.on(PRELOAD_ENTRIES, this.onPreloadStories.bind(this));
-  }
-
-  initializeWithProjectAnnotations(projectAnnotations: Store_WebProjectAnnotations<TFramework>) {
-    return super
-      .initializeWithProjectAnnotations(projectAnnotations)
-      .then(() => this.setInitialGlobals());
-  }
-
-  async setInitialGlobals() {
-    if (!this.storyStore.globals)
-      throw new Error(`Cannot call setInitialGlobals before initialization`);
-
-    const { globals } = this.urlStore.selectionSpecifier || {};
-    if (globals) {
-      this.storyStore.globals.updateFromPersisted(globals);
-    }
-    this.emitGlobals();
-  }
-
-  // If initialization gets as far as the story index, this function runs.
-  initializeWithStoryIndex(storyIndex: Store_StoryIndex): PromiseLike<void> {
-    return super.initializeWithStoryIndex(storyIndex).then(() => {
-      if (!global.FEATURES?.storyStoreV7) {
-        this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload());
-      }
-
-      return this.selectSpecifiedStory();
-    });
-  }
-
-  // Use the selection specifier to choose a story, then render it
-  async selectSpecifiedStory() {
-    if (!this.storyStore.storyIndex)
-      throw new Error(`Cannot call selectSpecifiedStory before initialization`);
-
-    if (!this.urlStore.selectionSpecifier) {
-      this.renderMissingStory();
-      return;
-    }
-
-    const { storySpecifier, args } = this.urlStore.selectionSpecifier;
-    const entry = this.storyStore.storyIndex.entryFromSpecifier(storySpecifier);
-
-    if (!entry) {
-      if (storySpecifier === '*') {
-        this.renderStoryLoadingException(
-          storySpecifier,
-          new Error(dedent`
-            Couldn't find any stories in your Storybook.
-            - Please check your stories field of your main.js config.
-            - Also check the browser console and terminal for error messages.
-          `)
-        );
-      } else {
-        this.renderStoryLoadingException(
-          storySpecifier,
-          new Error(dedent`
-            Couldn't find story matching '${storySpecifier}'.
-            - Are you sure a story with that id exists?
-            - Please check your stories field of your main.js config.
-            - Also check the browser console and terminal for error messages.
-          `)
-        );
-      }
-
-      return;
-    }
-
-    const { id: storyId, type: viewMode } = entry;
-    this.urlStore.setSelection({ storyId, viewMode });
-    this.channel.emit(STORY_SPECIFIED, this.urlStore.selection);
-
-    this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
-
-    await this.renderSelection({ persistedArgs: args });
-  }
-
-  // EVENT HANDLERS
-
-  // This happens when a config file gets reloaded
-  async onGetProjectAnnotationsChanged({
-    getProjectAnnotations,
-  }: {
-    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
-  }) {
-    await super.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-
-    if (this.urlStore.selection) {
-      this.renderSelection();
-    }
-  }
-
-  // This happens when a glob gets HMR-ed
-  async onStoriesChanged({
-    importFn,
-    storyIndex,
-  }: {
-    importFn?: Store_ModuleImportFn;
-    storyIndex?: Store_StoryIndex;
-  }) {
-    await super.onStoriesChanged({ importFn, storyIndex });
-
-    if (!global.FEATURES?.storyStoreV7) {
-      this.channel.emit(SET_INDEX, await this.storyStore.getSetIndexPayload());
-    }
-
-    if (this.urlStore.selection) {
-      await this.renderSelection();
-    } else {
-      // Our selection has never applied before, but maybe it does now, let's try!
-      await this.selectSpecifiedStory();
-    }
-  }
-
-  onKeydown(event: KeyboardEvent) {
-    if (!this.storyRenders.find((r) => r.disableKeyListeners) && !focusInInput(event)) {
-      // We have to pick off the keys of the event that we need on the other side
-      const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
-      this.channel.emit(PREVIEW_KEYDOWN, {
-        event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
-      });
-    }
-  }
-
-  async onSetCurrentStory(selection: { storyId: StoryId; viewMode?: ViewMode }) {
-    await this.storyStore.initializationPromise;
-
-    this.urlStore.setSelection({ viewMode: 'story', ...selection });
-    this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
-    this.renderSelection();
-  }
-
-  onUpdateQueryParams(queryParams: any) {
-    this.urlStore.setQueryParams(queryParams);
-  }
-
-  async onUpdateGlobals({ globals }: { globals: Globals }) {
-    super.onUpdateGlobals({ globals });
-    if (
-      this.currentRender instanceof StandaloneDocsRender ||
-      this.currentRender instanceof TemplateDocsRender
-    ) {
-      await this.currentRender.rerender?.();
-    }
-  }
-
-  async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
-    super.onUpdateArgs({ storyId, updatedArgs });
-  }
-
-  async onPreloadStories({ ids }: { ids: string[] }) {
-    /**
-     * It's possible that we're trying to preload a story in a ref we haven't loaded the iframe for yet.
-     * Because of the way the targeting works, if we can't find the targeted iframe,
-     * we'll use the currently active iframe which can cause the event to be targeted
-     * to the wrong iframe, causing an error if the storyId does not exists there.
-     */
-    await Promise.allSettled(ids.map((id) => this.storyStore.loadEntry(id)));
-  }
-
-  // RENDERING
-
-  // We can either have:
-  // - a story selected in "story" viewMode,
-  //     in which case we render it to the root element, OR
-  // - a story selected in "docs" viewMode,
-  //     in which case we render the docsPage for that story
-  async renderSelection({ persistedArgs }: { persistedArgs?: Args } = {}) {
-    const { renderToDOM } = this;
-    if (!renderToDOM) throw new Error('Cannot call renderSelection before initialization');
-    const { selection } = this.urlStore;
-    if (!selection) throw new Error('Cannot call renderSelection as no selection was made');
-
-    const { storyId } = selection;
-    let entry;
-    try {
-      entry = await this.storyStore.storyIdToEntry(storyId);
-    } catch (err) {
-      if (this.currentRender) await this.teardownRender(this.currentRender);
-      this.renderStoryLoadingException(storyId, err as Error);
-      return;
-    }
-
-    const storyIdChanged = this.currentSelection?.storyId !== storyId;
-    const viewModeChanged = this.currentRender?.type !== entry.type;
-
-    // Show a spinner while we load the next story
-    if (entry.type === 'story') {
-      this.view.showPreparingStory({ immediate: viewModeChanged });
-    } else {
-      this.view.showPreparingDocs();
-    }
-
-    // If the last render is still preparing, let's drop it right now. Either
-    //   (a) it is a different story, which means we would drop it later, OR
-    //   (b) it is the *same* story, in which case we will resolve our own .prepare() at the
-    //       same moment anyway, and we should just "take over" the rendering.
-    // (We can't tell which it is yet, because it is possible that an HMR is going on and
-    //  even though the storyId is the same, the story itself is not).
-    if (this.currentRender?.isPreparing()) {
-      await this.teardownRender(this.currentRender);
-    }
-
-    let render: PossibleRender<TFramework>;
-    if (entry.type === 'story') {
-      render = new StoryRender<TFramework>(
-        this.channel,
-        this.storyStore,
-        (...args) => {
-          // At the start of renderToDOM we make the story visible (see note in WebView)
-          this.view.showStoryDuringRender();
-          return renderToDOM(...args);
-        },
-        this.mainStoryCallbacks(storyId),
-        storyId,
-        'story'
-      );
-    } else if (entry.standalone) {
-      render = new StandaloneDocsRender<TFramework>(this.channel, this.storyStore, entry);
-    } else {
-      render = new TemplateDocsRender<TFramework>(this.channel, this.storyStore, entry);
-    }
-
-    // We need to store this right away, so if the story changes during
-    // the async `.prepare()` below, we can (potentially) cancel it
-    const lastSelection = this.currentSelection;
-    this.currentSelection = selection;
-
-    const lastRender = this.currentRender;
-    this.currentRender = render;
-
-    try {
-      await render.prepare();
-    } catch (err) {
-      if (err !== PREPARE_ABORTED) {
-        // We are about to render an error so make sure the previous story is
-        // no longer rendered.
-        if (lastRender) await this.teardownRender(lastRender);
-        this.renderStoryLoadingException(storyId, err as Error);
-      }
-      return;
-    }
-
-    const implementationChanged = !storyIdChanged && lastRender && !render.isEqual(lastRender);
-
-    if (persistedArgs && isStoryRender(render)) {
-      if (!render.story) throw new Error('Render has not been prepared!');
-      this.storyStore.args.updateFromPersisted(render.story, persistedArgs);
-    }
-
-    // Don't re-render the story if nothing has changed to justify it
-    if (
-      lastRender &&
-      !lastRender.torndown &&
-      !storyIdChanged &&
-      !implementationChanged &&
-      !viewModeChanged
-    ) {
-      this.currentRender = lastRender;
-      this.channel.emit(STORY_UNCHANGED, storyId);
-      this.view.showMain();
-      return;
-    }
-
-    // Wait for the previous render to leave the page. NOTE: this will wait to ensure anything async
-    // is properly aborted, which (in some cases) can lead to the whole screen being refreshed.
-    if (lastRender) await this.teardownRender(lastRender, { viewModeChanged });
-
-    // If we are rendering something new (as opposed to re-rendering the same or first story), emit
-    if (lastSelection && (storyIdChanged || viewModeChanged)) {
-      this.channel.emit(STORY_CHANGED, storyId);
-    }
-
-    if (isStoryRender(render)) {
-      if (!render.story) throw new Error('Render has not been prepared!');
-      const { parameters, initialArgs, argTypes, args } = this.storyStore.getStoryContext(
-        render.story
-      );
-
-      if (global.FEATURES?.storyStoreV7) {
-        this.channel.emit(STORY_PREPARED, {
-          id: storyId,
-          parameters,
-          initialArgs,
-          argTypes,
-          args,
-        });
-      }
-
-      // For v6 mode / compatibility
-      // If the implementation changed, or args were persisted, the args may have changed,
-      // and the STORY_PREPARED event above may not be respected.
-      if (implementationChanged || persistedArgs) {
-        this.channel.emit(STORY_ARGS_UPDATED, { storyId, args });
-      }
-    }
-
-    if (isStoryRender(render)) {
-      if (!render.story) throw new Error('Render has not been prepared!');
-      this.storyRenders.push(render as StoryRender<TFramework>);
-      (this.currentRender as StoryRender<TFramework>).renderToElement(
-        this.view.prepareForStory(render.story)
-      );
-    } else {
-      this.currentRender.renderToElement(
-        this.view.prepareForDocs(),
-        this.renderStoryToElement.bind(this)
-      );
-    }
-  }
-
-  async teardownRender(
-    render: PossibleRender<TFramework>,
-    { viewModeChanged = false }: { viewModeChanged?: boolean } = {}
-  ) {
-    this.storyRenders = this.storyRenders.filter((r) => r !== render);
-    await render?.teardown?.({ viewModeChanged });
-  }
-
-  // API
-  async extract(options?: { includeDocsOnly: boolean }) {
-    if (this.previewEntryError) {
-      throw this.previewEntryError;
-    }
-
-    if (!this.storyStore.projectAnnotations) {
-      // In v6 mode, if your preview.js throws, we never get a chance to initialize the preview
-      // or store, and the error is simply logged to the browser console. This is the best we can do
-      throw new Error(dedent`Failed to initialize Storybook.
-
-      Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`);
-    }
-
-    if (global.FEATURES?.storyStoreV7) {
-      await this.storyStore.cacheAllCSFFiles();
-    }
-
-    return this.storyStore.extract(options);
-  }
-
-  // UTILITIES
-  mainStoryCallbacks(storyId: StoryId) {
-    return {
-      showMain: () => this.view.showMain(),
-      showError: (err: { title: string; description: string }) => this.renderError(storyId, err),
-      showException: (err: Error) => this.renderException(storyId, err),
-    };
-  }
-
-  inlineStoryCallbacks(storyId: StoryId) {
-    return {
-      showMain: () => {},
-      showError: (err: { title: string; description: string }) =>
-        logger.error(`Error rendering docs story (${storyId})`, err),
-      showException: (err: Error) => logger.error(`Error rendering docs story (${storyId})`, err),
-    };
-  }
-
-  renderPreviewEntryError(reason: string, err: Error) {
-    super.renderPreviewEntryError(reason, err);
-    this.view.showErrorDisplay(err);
-  }
-
-  renderMissingStory() {
-    this.view.showNoPreview();
-    this.channel.emit(STORY_MISSING);
-  }
-
-  renderStoryLoadingException(storySpecifier: Store_StorySpecifier, err: Error) {
-    // logger.error(`Unable to load story '${storySpecifier}':`);
-    logger.error(err);
-    this.view.showErrorDisplay(err);
-    this.channel.emit(STORY_MISSING, storySpecifier);
-  }
-
-  // renderException is used if we fail to render the story and it is uncaught by the app layer
-  renderException(storyId: StoryId, error: Error) {
-    const { name = 'Error', message = String(error), stack } = error;
-    this.channel.emit(STORY_THREW_EXCEPTION, { name, message, stack });
-    this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
-
-    // Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
-    //
-    // FIXME: Should be '=== IGNORED_EXCEPTION', but currently the object
-    // is coming from two different bundles (index.js vs index.mjs)
-    //
-    // https://github.com/storybookjs/storybook/issues/19321
-    if (!error.message?.startsWith('ignoredException')) {
-      this.view.showErrorDisplay(error);
-      logger.error(`Error rendering story '${storyId}':`);
-      logger.error(error);
-    }
-  }
-
-  // renderError is used by the various app layers to inform the user they have done something
-  // wrong -- for instance returned the wrong thing from a story
-  renderError(storyId: StoryId, { title, description }: { title: string; description: string }) {
-    logger.error(`Error rendering story ${title}: ${description}`);
-    this.channel.emit(STORY_ERRORED, { title, description });
-    this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
-    this.view.showErrorDisplay({
-      message: title,
-      stack: description,
-    });
+    super(new UrlStore(), new WebView());
   }
 }

code/lib/preview-web/src/PreviewWithSelection.tsx

@@ -0,0 +1,488 @@
+import { dedent } from 'ts-dedent';
+import global from 'global';
+import {
+  CURRENT_STORY_WAS_SET,
+  PRELOAD_ENTRIES,
+  PREVIEW_KEYDOWN,
+  SET_CURRENT_STORY,
+  SET_INDEX,
+  STORY_ARGS_UPDATED,
+  STORY_CHANGED,
+  STORY_ERRORED,
+  STORY_MISSING,
+  STORY_PREPARED,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_SPECIFIED,
+  STORY_THREW_EXCEPTION,
+  STORY_UNCHANGED,
+  UPDATE_QUERY_PARAMS,
+} from '@storybook/core-events';
+import { logger } from '@storybook/client-logger';
+import type {
+  Framework,
+  Args,
+  Globals,
+  Store_ModuleImportFn,
+  Store_Selection,
+  Store_StoryIndex,
+  Store_StorySpecifier,
+  ProjectAnnotations,
+  StoryId,
+  ViewMode,
+} from '@storybook/types';
+
+import type { MaybePromise } from './Preview';
+import { Preview } from './Preview';
+
+import { PREPARE_ABORTED } from './render/Render';
+import { StoryRender } from './render/StoryRender';
+import { TemplateDocsRender } from './render/TemplateDocsRender';
+import { StandaloneDocsRender } from './render/StandaloneDocsRender';
+import type { SelectionStore } from './SelectionStore';
+import type { View } from './View';
+
+const { window: globalWindow } = global;
+
+function focusInInput(event: Event) {
+  const target = event.target as Element;
+  return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
+}
+
+type PossibleRender<TFramework extends Framework> =
+  | StoryRender<TFramework>
+  | TemplateDocsRender<TFramework>
+  | StandaloneDocsRender<TFramework>;
+
+function isStoryRender<TFramework extends Framework>(
+  r: PossibleRender<TFramework>
+): r is StoryRender<TFramework> {
+  return r.type === 'story';
+}
+
+export class PreviewWithSelection<TFramework extends Framework> extends Preview<TFramework> {
+  currentSelection?: Store_Selection;
+
+  currentRender?: PossibleRender<TFramework>;
+
+  constructor(
+    public selectionStore: SelectionStore,
+    public view: View<TFramework['canvasElement']>
+  ) {
+    super();
+  }
+
+  setupListeners() {
+    super.setupListeners();
+
+    globalWindow.onkeydown = this.onKeydown.bind(this);
+
+    this.channel.on(SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
+    this.channel.on(UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
+    this.channel.on(PRELOAD_ENTRIES, this.onPreloadStories.bind(this));
+  }
+
+  initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
+    return super
+      .initializeWithProjectAnnotations(projectAnnotations)
+      .then(() => this.setInitialGlobals());
+  }
+
+  async setInitialGlobals() {
+    if (!this.storyStore.globals)
+      throw new Error(`Cannot call setInitialGlobals before initialization`);
+
+    const { globals } = this.selectionStore.selectionSpecifier || {};
+    if (globals) {
+      this.storyStore.globals.updateFromPersisted(globals);
+    }
+    this.emitGlobals();
+  }
+
+  // If initialization gets as far as the story index, this function runs.
+  initializeWithStoryIndex(storyIndex: Store_StoryIndex): PromiseLike<void> {
+    return super.initializeWithStoryIndex(storyIndex).then(() => {
+      if (!global.FEATURES?.storyStoreV7) {
+        this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload());
+      }
+
+      return this.selectSpecifiedStory();
+    });
+  }
+
+  // Use the selection specifier to choose a story, then render it
+  async selectSpecifiedStory() {
+    if (!this.storyStore.storyIndex)
+      throw new Error(`Cannot call selectSpecifiedStory before initialization`);
+
+    if (!this.selectionStore.selectionSpecifier) {
+      this.renderMissingStory();
+      return;
+    }
+
+    const { storySpecifier, args } = this.selectionStore.selectionSpecifier;
+    const entry = this.storyStore.storyIndex.entryFromSpecifier(storySpecifier);
+
+    if (!entry) {
+      if (storySpecifier === '*') {
+        this.renderStoryLoadingException(
+          storySpecifier,
+          new Error(dedent`
+            Couldn't find any stories in your Storybook.
+            - Please check your stories field of your main.js config.
+            - Also check the browser console and terminal for error messages.
+          `)
+        );
+      } else {
+        this.renderStoryLoadingException(
+          storySpecifier,
+          new Error(dedent`
+            Couldn't find story matching '${storySpecifier}'.
+            - Are you sure a story with that id exists?
+            - Please check your stories field of your main.js config.
+            - Also check the browser console and terminal for error messages.
+          `)
+        );
+      }
+
+      return;
+    }
+
+    const { id: storyId, type: viewMode } = entry;
+    this.selectionStore.setSelection({ storyId, viewMode });
+    this.channel.emit(STORY_SPECIFIED, this.selectionStore.selection);
+
+    this.channel.emit(CURRENT_STORY_WAS_SET, this.selectionStore.selection);
+
+    await this.renderSelection({ persistedArgs: args });
+  }
+
+  // EVENT HANDLERS
+
+  // This happens when a config file gets reloaded
+  async onGetProjectAnnotationsChanged({
+    getProjectAnnotations,
+  }: {
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
+  }) {
+    await super.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+
+    if (this.selectionStore.selection) {
+      this.renderSelection();
+    }
+  }
+
+  // This happens when a glob gets HMR-ed
+  async onStoriesChanged({
+    importFn,
+    storyIndex,
+  }: {
+    importFn?: Store_ModuleImportFn;
+    storyIndex?: Store_StoryIndex;
+  }) {
+    await super.onStoriesChanged({ importFn, storyIndex });
+
+    if (!global.FEATURES?.storyStoreV7) {
+      this.channel.emit(SET_INDEX, await this.storyStore.getSetIndexPayload());
+    }
+
+    if (this.selectionStore.selection) {
+      await this.renderSelection();
+    } else {
+      // Our selection has never applied before, but maybe it does now, let's try!
+      await this.selectSpecifiedStory();
+    }
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (!this.storyRenders.find((r) => r.disableKeyListeners) && !focusInInput(event)) {
+      // We have to pick off the keys of the event that we need on the other side
+      const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
+      this.channel.emit(PREVIEW_KEYDOWN, {
+        event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
+      });
+    }
+  }
+
+  async onSetCurrentStory(selection: { storyId: StoryId; viewMode?: ViewMode }) {
+    await this.storyStore.initializationPromise;
+
+    this.selectionStore.setSelection({ viewMode: 'story', ...selection });
+    this.channel.emit(CURRENT_STORY_WAS_SET, this.selectionStore.selection);
+    this.renderSelection();
+  }
+
+  onUpdateQueryParams(queryParams: any) {
+    this.selectionStore.setQueryParams(queryParams);
+  }
+
+  async onUpdateGlobals({ globals }: { globals: Globals }) {
+    super.onUpdateGlobals({ globals });
+    if (
+      this.currentRender instanceof StandaloneDocsRender ||
+      this.currentRender instanceof TemplateDocsRender
+    ) {
+      await this.currentRender.rerender?.();
+    }
+  }
+
+  async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
+    super.onUpdateArgs({ storyId, updatedArgs });
+  }
+
+  async onPreloadStories({ ids }: { ids: string[] }) {
+    /**
+     * It's possible that we're trying to preload a story in a ref we haven't loaded the iframe for yet.
+     * Because of the way the targeting works, if we can't find the targeted iframe,
+     * we'll use the currently active iframe which can cause the event to be targeted
+     * to the wrong iframe, causing an error if the storyId does not exists there.
+     */
+    await Promise.allSettled(ids.map((id) => this.storyStore.loadEntry(id)));
+  }
+
+  // RENDERING
+
+  // We can either have:
+  // - a story selected in "story" viewMode,
+  //     in which case we render it to the root element, OR
+  // - a story selected in "docs" viewMode,
+  //     in which case we render the docsPage for that story
+  async renderSelection({ persistedArgs }: { persistedArgs?: Args } = {}) {
+    const { renderToCanvas } = this;
+    if (!renderToCanvas) throw new Error('Cannot call renderSelection before initialization');
+    const { selection } = this.selectionStore;
+    if (!selection) throw new Error('Cannot call renderSelection as no selection was made');
+
+    const { storyId } = selection;
+    let entry;
+    try {
+      entry = await this.storyStore.storyIdToEntry(storyId);
+    } catch (err) {
+      if (this.currentRender) await this.teardownRender(this.currentRender);
+      this.renderStoryLoadingException(storyId, err as Error);
+      return;
+    }
+
+    const storyIdChanged = this.currentSelection?.storyId !== storyId;
+    const viewModeChanged = this.currentRender?.type !== entry.type;
+
+    // Show a spinner while we load the next story
+    if (entry.type === 'story') {
+      this.view.showPreparingStory({ immediate: viewModeChanged });
+    } else {
+      this.view.showPreparingDocs();
+    }
+
+    // If the last render is still preparing, let's drop it right now. Either
+    //   (a) it is a different story, which means we would drop it later, OR
+    //   (b) it is the *same* story, in which case we will resolve our own .prepare() at the
+    //       same moment anyway, and we should just "take over" the rendering.
+    // (We can't tell which it is yet, because it is possible that an HMR is going on and
+    //  even though the storyId is the same, the story itself is not).
+    if (this.currentRender?.isPreparing()) {
+      await this.teardownRender(this.currentRender);
+    }
+
+    let render: PossibleRender<TFramework>;
+    if (entry.type === 'story') {
+      render = new StoryRender<TFramework>(
+        this.channel,
+        this.storyStore,
+        (...args: Parameters<typeof renderToCanvas>) => {
+          // At the start of renderToCanvas we make the story visible (see note in WebView)
+          this.view.showStoryDuringRender();
+          return renderToCanvas(...args);
+        },
+        this.mainStoryCallbacks(storyId),
+        storyId,
+        'story'
+      );
+    } else if (entry.standalone) {
+      render = new StandaloneDocsRender<TFramework>(this.channel, this.storyStore, entry);
+    } else {
+      render = new TemplateDocsRender<TFramework>(this.channel, this.storyStore, entry);
+    }
+
+    // We need to store this right away, so if the story changes during
+    // the async `.prepare()` below, we can (potentially) cancel it
+    const lastSelection = this.currentSelection;
+    this.currentSelection = selection;
+
+    const lastRender = this.currentRender;
+    this.currentRender = render;
+
+    try {
+      await render.prepare();
+    } catch (err) {
+      if (err !== PREPARE_ABORTED) {
+        // We are about to render an error so make sure the previous story is
+        // no longer rendered.
+        if (lastRender) await this.teardownRender(lastRender);
+        this.renderStoryLoadingException(storyId, err as Error);
+      }
+      return;
+    }
+
+    const implementationChanged = !storyIdChanged && lastRender && !render.isEqual(lastRender);
+
+    if (persistedArgs && isStoryRender(render)) {
+      if (!render.story) throw new Error('Render has not been prepared!');
+      this.storyStore.args.updateFromPersisted(render.story, persistedArgs);
+    }
+
+    // Don't re-render the story if nothing has changed to justify it
+    if (
+      lastRender &&
+      !lastRender.torndown &&
+      !storyIdChanged &&
+      !implementationChanged &&
+      !viewModeChanged
+    ) {
+      this.currentRender = lastRender;
+      this.channel.emit(STORY_UNCHANGED, storyId);
+      this.view.showMain();
+      return;
+    }
+
+    // Wait for the previous render to leave the page. NOTE: this will wait to ensure anything async
+    // is properly aborted, which (in some cases) can lead to the whole screen being refreshed.
+    if (lastRender) await this.teardownRender(lastRender, { viewModeChanged });
+
+    // If we are rendering something new (as opposed to re-rendering the same or first story), emit
+    if (lastSelection && (storyIdChanged || viewModeChanged)) {
+      this.channel.emit(STORY_CHANGED, storyId);
+    }
+
+    if (isStoryRender(render)) {
+      if (!render.story) throw new Error('Render has not been prepared!');
+      const { parameters, initialArgs, argTypes, args } = this.storyStore.getStoryContext(
+        render.story
+      );
+
+      if (global.FEATURES?.storyStoreV7) {
+        this.channel.emit(STORY_PREPARED, {
+          id: storyId,
+          parameters,
+          initialArgs,
+          argTypes,
+          args,
+        });
+      }
+
+      // For v6 mode / compatibility
+      // If the implementation changed, or args were persisted, the args may have changed,
+      // and the STORY_PREPARED event above may not be respected.
+      if (implementationChanged || persistedArgs) {
+        this.channel.emit(STORY_ARGS_UPDATED, { storyId, args });
+      }
+    }
+
+    if (isStoryRender(render)) {
+      if (!render.story) throw new Error('Render has not been prepared!');
+      this.storyRenders.push(render as StoryRender<TFramework>);
+      (this.currentRender as StoryRender<TFramework>).renderToElement(
+        this.view.prepareForStory(render.story)
+      );
+    } else {
+      this.currentRender.renderToElement(
+        this.view.prepareForDocs(),
+        // This argument is used for docs, which is currently only compatible with HTMLElements
+        this.renderStoryToElement.bind(this) as any
+      );
+    }
+  }
+
+  async teardownRender(
+    render: PossibleRender<TFramework>,
+    { viewModeChanged = false }: { viewModeChanged?: boolean } = {}
+  ) {
+    this.storyRenders = this.storyRenders.filter((r) => r !== render);
+    await render?.teardown?.({ viewModeChanged });
+  }
+
+  // API
+  async extract(options?: { includeDocsOnly: boolean }) {
+    if (this.previewEntryError) {
+      throw this.previewEntryError;
+    }
+
+    if (!this.storyStore.projectAnnotations) {
+      // In v6 mode, if your preview.js throws, we never get a chance to initialize the preview
+      // or store, and the error is simply logged to the browser console. This is the best we can do
+      throw new Error(dedent`Failed to initialize Storybook.
+
+      Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`);
+    }
+
+    if (global.FEATURES?.storyStoreV7) {
+      await this.storyStore.cacheAllCSFFiles();
+    }
+
+    return this.storyStore.extract(options);
+  }
+
+  // UTILITIES
+  mainStoryCallbacks(storyId: StoryId) {
+    return {
+      showMain: () => this.view.showMain(),
+      showError: (err: { title: string; description: string }) => this.renderError(storyId, err),
+      showException: (err: Error) => this.renderException(storyId, err),
+    };
+  }
+
+  inlineStoryCallbacks(storyId: StoryId) {
+    return {
+      showMain: () => {},
+      showError: (err: { title: string; description: string }) =>
+        logger.error(`Error rendering docs story (${storyId})`, err),
+      showException: (err: Error) => logger.error(`Error rendering docs story (${storyId})`, err),
+    };
+  }
+
+  renderPreviewEntryError(reason: string, err: Error) {
+    super.renderPreviewEntryError(reason, err);
+    this.view.showErrorDisplay(err);
+  }
+
+  renderMissingStory() {
+    this.view.showNoPreview();
+    this.channel.emit(STORY_MISSING);
+  }
+
+  renderStoryLoadingException(storySpecifier: Store_StorySpecifier, err: Error) {
+    // logger.error(`Unable to load story '${storySpecifier}':`);
+    logger.error(err);
+    this.view.showErrorDisplay(err);
+    this.channel.emit(STORY_MISSING, storySpecifier);
+  }
+
+  // renderException is used if we fail to render the story and it is uncaught by the app layer
+  renderException(storyId: StoryId, error: Error) {
+    const { name = 'Error', message = String(error), stack } = error;
+    this.channel.emit(STORY_THREW_EXCEPTION, { name, message, stack });
+    this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
+
+    // Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
+    //
+    // FIXME: Should be '=== IGNORED_EXCEPTION', but currently the object
+    // is coming from two different bundles (index.js vs index.mjs)
+    //
+    // https://github.com/storybookjs/storybook/issues/19321
+    if (!error.message?.startsWith('ignoredException')) {
+      this.view.showErrorDisplay(error);
+      logger.error(`Error rendering story '${storyId}':`);
+      logger.error(error);
+    }
+  }
+
+  // renderError is used by the various app layers to inform the user they have done something
+  // wrong -- for instance returned the wrong thing from a story
+  renderError(storyId: StoryId, { title, description }: { title: string; description: string }) {
+    logger.error(`Error rendering story ${title}: ${description}`);
+    this.channel.emit(STORY_ERRORED, { title, description });
+    this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
+    this.view.showErrorDisplay({
+      message: title,
+      stack: description,
+    });
+  }
+}

code/lib/preview-web/src/SelectionStore.ts

@@ -0,0 +1,11 @@
+import type { Store_SelectionSpecifier, Store_Selection } from '@storybook/types';
+
+export interface SelectionStore {
+  selectionSpecifier: Store_SelectionSpecifier | null;
+
+  selection?: Store_Selection;
+
+  setSelection(selection: Store_Selection): void;
+
+  setQueryParams(queryParams: qs.ParsedQs): void;
+}

code/lib/preview-web/src/UrlStore.ts

@@ -3,6 +3,7 @@ import qs from 'qs';
 import type { ViewMode, Store_SelectionSpecifier, Store_Selection } from '@storybook/types';
 
 import { parseArgsParam } from './parseArgsParam';
+import type { SelectionStore } from './SelectionStore';
 
 const { history, document } = global;
 
@@ -83,7 +84,7 @@ export const getSelectionSpecifierFromPath: () => Store_SelectionSpecifier | nul
   return null;
 };
 
-export class UrlStore {
+export class UrlStore implements SelectionStore {
   selectionSpecifier: Store_SelectionSpecifier | null;
 
   selection?: Store_Selection;

code/lib/preview-web/src/View.ts

@@ -0,0 +1,24 @@
+import type { Store_Story } from '@storybook/types';
+
+export interface View<TStorybookRoot> {
+  // Get ready to render a story, returning the element to render to
+  prepareForStory(story: Store_Story<any>): TStorybookRoot;
+
+  prepareForDocs(): TStorybookRoot;
+
+  showErrorDisplay(err: { message?: string; stack?: string }): void;
+
+  showNoPreview(): void;
+
+  showPreparingStory(options: { immediate: boolean }): void;
+
+  showPreparingDocs(): void;
+
+  showMain(): void;
+
+  showDocs(): void;
+
+  showStory(): void;
+
+  showStoryDuringRender(): void;
+}

code/lib/preview-web/src/WebView.ts

@@ -5,18 +5,12 @@ import { dedent } from 'ts-dedent';
 import qs from 'qs';
 
 import type { Store_Story } from '@storybook/types';
+import type { View } from './View';
 
 const { document } = global;
 
 const PREPARING_DELAY = 100;
 
-const layoutClassMap = {
-  centered: 'sb-main-centered',
-  fullscreen: 'sb-main-fullscreen',
-  padded: 'sb-main-padded',
-} as const;
-type Layout = keyof typeof layoutClassMap | 'none';
-
 enum Mode {
   'MAIN' = 'MAIN',
   'NOPREVIEW' = 'NOPREVIEW',
@@ -32,16 +26,23 @@ const classes: Record<Mode, string> = {
   ERROR: 'sb-show-errordisplay',
 };
 
+const layoutClassMap = {
+  centered: 'sb-main-centered',
+  fullscreen: 'sb-main-fullscreen',
+  padded: 'sb-main-padded',
+} as const;
+type Layout = keyof typeof layoutClassMap | 'none';
+
 const ansiConverter = new AnsiToHtml({
   escapeXML: true,
 });
 
-export class WebView {
-  currentLayoutClass?: typeof layoutClassMap[keyof typeof layoutClassMap] | null;
+export class WebView implements View<HTMLElement> {
+  private currentLayoutClass?: typeof layoutClassMap[keyof typeof layoutClassMap] | null;
 
-  testing = false;
+  private testing = false;
 
-  preparingTimeout?: ReturnType<typeof setTimeout>;
+  private preparingTimeout?: ReturnType<typeof setTimeout>;
 
   constructor() {
     // Special code for testing situations

code/lib/preview-web/src/docs-context/DocsContext.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
@@ -13,7 +13,7 @@ import type { Channel } from '@storybook/channels';
 
 import type { DocsContextProps } from './DocsContextProps';
 
-export class DocsContext<TFramework extends AnyFramework> implements DocsContextProps<TFramework> {
+export class DocsContext<TFramework extends Framework> implements DocsContextProps<TFramework> {
   private componentStoriesValue: Store_Story<TFramework>[];
 
   private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TFramework>>;

code/lib/preview-web/src/docs-context/DocsContextProps.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   Store_ModuleExport,
   Store_ModuleExports,
   Store_Story,
@@ -10,7 +10,7 @@ import type {
 import type { Channel } from '@storybook/channels';
 import type { StoryRenderOptions } from '../render/StoryRender';
 
-export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework> {
+export interface DocsContextProps<TFramework extends Framework = Framework> {
   /**
    * Register the CSF file that this docs entry represents.
    * Used by the `<Meta of={} />` block.

code/lib/preview-web/src/docs-context/DocsRenderFunction.ts

@@ -1,7 +1,7 @@
-import type { AnyFramework, Parameters } from '@storybook/types';
+import type { Framework, Parameters } from '@storybook/types';
 import type { DocsContextProps } from './DocsContextProps';
 
-export type DocsRenderFunction<TFramework extends AnyFramework> = (
+export type DocsRenderFunction<TFramework extends Framework> = (
   docsContext: DocsContextProps<TFramework>,
   docsParameters: Parameters,
   element: HTMLElement,

code/lib/preview-web/src/index.ts

@@ -1,8 +1,9 @@
 // FIXME: breaks builder-vite, remove this in 7.0
 export { composeConfigs } from '@storybook/store';
-export type { Store_WebProjectAnnotations as WebProjectAnnotations } from '@storybook/types';
+export type { ProjectAnnotations as WebProjectAnnotations } from '@storybook/types';
 
 export { Preview } from './Preview';
+export { PreviewWithSelection } from './PreviewWithSelection';
 export { PreviewWeb } from './PreviewWeb';
 
 export { simulatePageLoad, simulateDOMContentLoaded } from './simulate-pageload';

code/lib/preview-web/src/render/Render.ts

@@ -1,4 +1,4 @@
-import type { StoryId, AnyFramework } from '@storybook/types';
+import type { StoryId, Framework } from '@storybook/types';
 import type { StoryRenderOptions } from './StoryRender';
 
 export type RenderType = 'story' | 'docs';
@@ -10,7 +10,7 @@ export type RenderType = 'story' | 'docs';
  *  - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
  *  - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
  */
-export interface Render<TFramework extends AnyFramework> {
+export interface Render<TFramework extends Framework> {
   type: RenderType;
   id: StoryId;
   isPreparing: () => boolean;
@@ -19,7 +19,7 @@ export interface Render<TFramework extends AnyFramework> {
   teardown?: (options: { viewModeChanged: boolean }) => Promise<void>;
   torndown: boolean;
   renderToElement: (
-    canvasElement: HTMLElement,
+    canvasElement: TFramework['canvasElement'],
     renderStoryToElement?: any,
     options?: StoryRenderOptions
   ) => Promise<void>;

code/lib/preview-web/src/render/StandaloneDocsRender.test.ts

@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { AnyFramework, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
+import type { Framework, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('StandaloneDocsRender', () => {
 
     const render = new StandaloneDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<AnyFramework>,
+      mockStore as unknown as StoryStore<Framework>,
       entry
     );
 

code/lib/preview-web/src/render/StandaloneDocsRender.ts

@@ -75,7 +75,7 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
   }
 
   async renderToElement(
-    canvasElement: HTMLElement,
+    canvasElement: TFramework['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.exports || !this.csfFiles || !this.store.projectAnnotations)
@@ -100,7 +100,10 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
     const renderer = await docs.renderer();
     const { render } = renderer as { render: DocsRenderFunction<TFramework> };
     const renderDocs = async () => {
-      await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
+      await new Promise<void>((r) =>
+        // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
+        render(docsContext, docsParameter, canvasElement as any, r)
+      );
       this.channel.emit(DOCS_RENDERED, this.id);
     };
 

code/lib/preview-web/src/render/StoryRender.test.ts

@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { AnyFramework, Addon_StoryIndexEntry } from '@storybook/types';
+import type { Framework, Addon_StoryIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -35,7 +35,7 @@ describe('StoryRender', () => {
 
     const render = new StoryRender(
       new Channel(),
-      mockStore as unknown as StoryStore<AnyFramework>,
+      mockStore as unknown as StoryStore<Framework>,
       jest.fn(),
       {} as any,
       entry.id,

code/lib/preview-web/src/render/StoryRender.ts

@@ -1,10 +1,10 @@
 import global from 'global';
 import type {
-  AnyFramework,
+  Framework,
   Store_RenderContext,
-  Store_RenderToDOM,
+  RenderToCanvas,
   Store_Story,
-  Store_TeardownRenderToDOM,
+  TeardownRenderToCanvas,
   StoryContext,
   StoryContextForLoaders,
   StoryId,
@@ -42,7 +42,7 @@ function serializeError(error: any) {
   }
 }
 
-export type RenderContextCallbacks<TFramework extends AnyFramework> = Pick<
+export type RenderContextCallbacks<TFramework extends Framework> = Pick<
   Store_RenderContext<TFramework>,
   'showMain' | 'showError' | 'showException'
 >;
@@ -51,7 +51,7 @@ export type StoryRenderOptions = {
   autoplay?: boolean;
 };
 
-export class StoryRender<TFramework extends AnyFramework> implements Render<TFramework> {
+export class StoryRender<TFramework extends Framework> implements Render<TFramework> {
   public type: RenderType = 'story';
 
   public story?: Store_Story<TFramework>;
@@ -60,20 +60,20 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
 
   private abortController?: AbortController;
 
-  private canvasElement?: HTMLElement;
+  private canvasElement?: TFramework['canvasElement'];
 
   private notYetRendered = true;
 
   public disableKeyListeners = false;
 
-  private teardownRender: Store_TeardownRenderToDOM = () => {};
+  private teardownRender: TeardownRenderToCanvas = () => {};
 
   public torndown = false;
 
   constructor(
     public channel: Channel,
     public store: StoryStore<TFramework>,
-    private renderToScreen: Store_RenderToDOM<TFramework>,
+    private renderToScreen: RenderToCanvas<TFramework>,
     private callbacks: RenderContextCallbacks<TFramework>,
     public id: StoryId,
     public viewMode: ViewMode,
@@ -131,7 +131,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
     return ['rendering', 'playing'].includes(this.phase as RenderPhase);
   }
 
-  async renderToElement(canvasElement: HTMLElement) {
+  async renderToElement(canvasElement: TFramework['canvasElement']) {
     this.canvasElement = canvasElement;
 
     // FIXME: this comment
@@ -191,7 +191,8 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
         // and we need to ensure we render it with the new values
         ...this.storyContext(),
         abortSignal,
-        canvasElement,
+        // We should consider parameterizing the story types with TFramework['canvasElement'] in the future
+        canvasElement: canvasElement as any,
       };
       const renderContext: Store_RenderContext<TFramework> = {
         componentId,

code/lib/preview-web/src/render/TemplateDocsRender.test.ts

@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { AnyFramework, Addon_TemplateDocsIndexEntry } from '@storybook/types';
+import type { Framework, Addon_TemplateDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('TemplateDocsRender', () => {
 
     const render = new TemplateDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<AnyFramework>,
+      mockStore as unknown as StoryStore<Framework>,
       entry
     );
 

code/lib/preview-web/src/render/TemplateDocsRender.ts

@@ -1,6 +1,6 @@
 import type {
   Addon_IndexEntry,
-  AnyFramework,
+  Framework,
   Store_CSFFile,
   Store_Story,
   StoryId,
@@ -27,7 +27,7 @@ import { DocsContext } from '../docs-context/DocsContext';
  *  - *.stories.mdx files, where the MDX compiler produces a CSF file with a `.parameter.docs.page`
  *      parameter containing the compiled content of the MDX file.
  */
-export class TemplateDocsRender<TFramework extends AnyFramework> implements Render<TFramework> {
+export class TemplateDocsRender<TFramework extends Framework> implements Render<TFramework> {
   public readonly type: RenderType = 'docs';
 
   public readonly id: StoryId;
@@ -92,7 +92,7 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
   }
 
   async renderToElement(
-    canvasElement: HTMLElement,
+    canvasElement: TFramework['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing');
@@ -115,7 +115,10 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
     const renderer = await docsParameter.renderer();
     const { render } = renderer as { render: DocsRenderFunction<TFramework> };
     const renderDocs = async () => {
-      await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
+      await new Promise<void>((r) =>
+        // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
+        render(docsContext, docsParameter, canvasElement as any, r)
+      );
       this.channel.emit(DOCS_RENDERED, this.id);
     };
 

code/lib/store/src/StoryStore.test.ts

@@ -1,4 +1,4 @@
-import type { AnyFramework, ProjectAnnotations } from '@storybook/types';
+import type { Framework, ProjectAnnotations } from '@storybook/types';
 import global from 'global';
 import { expect } from '@jest/globals';
 
@@ -444,7 +444,7 @@ describe('StoryStore', () => {
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
 
-      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<AnyFramework> };
+      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<Framework> };
       hooks.clean = jest.fn();
       store.cleanupStory(story);
       expect(hooks.clean).toHaveBeenCalled();

code/lib/store/src/StoryStore.ts

@@ -1,7 +1,7 @@
 import memoize from 'memoizerific';
 import type {
   Addon_IndexEntry,
-  AnyFramework,
+  Framework,
   API_PreparedStoryIndex,
   ComponentTitle,
   Parameters,
@@ -37,7 +37,7 @@ import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf
 const CSF_CACHE_SIZE = 1000;
 const STORY_CACHE_SIZE = 10000;
 
-export class StoryStore<TFramework extends AnyFramework> {
+export class StoryStore<TFramework extends Framework> {
   storyIndex?: StoryIndexStore;
 
   importFn?: Store_ModuleImportFn;

code/lib/store/src/args.ts

@@ -1,12 +1,5 @@
 import { dequal as deepEqual } from 'dequal';
-import type {
-  AnyFramework,
-  Args,
-  ArgTypes,
-  InputType,
-  SBType,
-  StoryContext,
-} from '@storybook/types';
+import type { Framework, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
 import { once } from '@storybook/client-logger';
 import isPlainObject from 'lodash/isPlainObject';
 import { dedent } from 'ts-dedent';
@@ -155,7 +148,7 @@ export const NO_TARGET_NAME = '';
 export function groupArgsByTarget<TArgs = Args>({
   args,
   argTypes,
-}: StoryContext<AnyFramework, TArgs>) {
+}: StoryContext<Framework, TArgs>) {
   const groupedArgs: Record<string, Partial<TArgs>> = {};
   (Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => {
     const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target?: string };
@@ -166,6 +159,6 @@ export function groupArgsByTarget<TArgs = Args>({
   return groupedArgs;
 }
 
-export function noTargetArgs<TArgs = Args>(context: StoryContext<AnyFramework, TArgs>) {
+export function noTargetArgs<TArgs = Args>(context: StoryContext<Framework, TArgs>) {
   return groupArgsByTarget(context)[NO_TARGET_NAME];
 }

code/lib/store/src/csf/composeConfigs.test.ts

@@ -132,12 +132,12 @@ describe('composeConfigs', () => {
       composeConfigs([
         {
           render: 'render-1',
-          renderToDOM: 'renderToDOM-1',
+          renderToCanvas: 'renderToCanvas-1',
           applyDecorators: 'applyDecorators-1',
         },
         {
           render: 'render-2',
-          renderToDOM: 'renderToDOM-2',
+          renderToCanvas: 'renderToCanvas-2',
           applyDecorators: 'applyDecorators-2',
         },
       ])
@@ -152,7 +152,7 @@ describe('composeConfigs', () => {
       globalTypes: {},
       loaders: [],
       render: 'render-2',
-      renderToDOM: 'renderToDOM-2',
+      renderToCanvas: 'renderToCanvas-2',
       applyDecorators: 'applyDecorators-2',
       runStep: expect.any(Function),
     });

code/lib/store/src/csf/composeConfigs.ts

@@ -1,8 +1,4 @@
-import type {
-  AnyFramework,
-  Store_ModuleExports,
-  Store_WebProjectAnnotations,
-} from '@storybook/types';
+import type { Framework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types';
 
 import { combineParameters } from '../parameters';
 import { composeStepRunners } from './stepRunners';
@@ -35,9 +31,9 @@ export function getSingletonField<TFieldType = any>(
   return getField(moduleExportList, field).pop();
 }
 
-export function composeConfigs<TFramework extends AnyFramework>(
+export function composeConfigs<TFramework extends Framework>(
   moduleExportList: Store_ModuleExports[]
-): Store_WebProjectAnnotations<TFramework> {
+): ProjectAnnotations<TFramework> {
   const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers');
   const stepRunners = getField(moduleExportList, 'runStep');
 
@@ -55,7 +51,8 @@ export function composeConfigs<TFramework extends AnyFramework>(
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
     render: getSingletonField(moduleExportList, 'render'),
-    renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'),
+    renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
+    renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
     applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
     runStep: composeStepRunners<TFramework>(stepRunners),
   };

code/lib/store/src/csf/normalizeComponentAnnotations.ts

@@ -1,13 +1,13 @@
 import { sanitize } from '@storybook/csf';
 import type {
-  AnyFramework,
+  Framework,
   Store_ModuleExports,
   Store_NormalizedComponentAnnotations,
 } from '@storybook/types';
 
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeComponentAnnotations<TFramework extends AnyFramework>(
+export function normalizeComponentAnnotations<TFramework extends Framework>(
   defaultExport: Store_ModuleExports['default'],
   title: string = defaultExport.title,
   importPath?: string

code/lib/store/src/csf/normalizeProjectAnnotations.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   ArgTypes,
   ProjectAnnotations,
   Store_NormalizedProjectAnnotations,
@@ -9,7 +9,7 @@ import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeProjectAnnotations<TFramework extends AnyFramework>({
+export function normalizeProjectAnnotations<TFramework extends Framework>({
   argTypes,
   globalTypes,
   argTypesEnhancers,

code/lib/store/src/csf/normalizeStory.test.ts

@@ -1,5 +1,5 @@
 import { expect, describe, it } from '@jest/globals';
-import type { AnyFramework, StoryAnnotationsOrFn } from '@storybook/types';
+import type { Framework, StoryAnnotationsOrFn } from '@storybook/types';
 
 import { normalizeStory } from './normalizeStory';
 
@@ -133,7 +133,7 @@ describe('normalizeStory', () => {
       });
 
       it('full annotations', () => {
-        const storyObj: StoryAnnotationsOrFn<AnyFramework> = {
+        const storyObj: StoryAnnotationsOrFn<Framework> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],
@@ -174,7 +174,7 @@ describe('normalizeStory', () => {
       });
 
       it('prefers new annotations to legacy, but combines', () => {
-        const storyObj: StoryAnnotationsOrFn<AnyFramework> = {
+        const storyObj: StoryAnnotationsOrFn<Framework> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],

code/lib/store/src/csf/normalizeStory.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   ArgTypes,
   LegacyStoryAnnotationsOrFn,
   Store_NormalizedComponentAnnotations,
@@ -23,7 +23,7 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
 
 const deprecatedStoryAnnotationWarning = deprecate(() => {}, deprecatedStoryAnnotation);
 
-export function normalizeStory<TFramework extends AnyFramework>(
+export function normalizeStory<TFramework extends Framework>(
   key: StoryId,
   storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
   meta: Store_NormalizedComponentAnnotations<TFramework>

code/lib/store/src/csf/prepareStory.test.ts

@@ -4,7 +4,7 @@ import global from 'global';
 import { expect } from '@jest/globals';
 import { addons, HooksContext } from '@storybook/addons';
 import type {
-  AnyFramework,
+  Framework,
   ArgsEnhancer,
   PlayFunctionContext,
   SBObjectType,
@@ -234,11 +234,11 @@ describe('prepareStory', () => {
     describe('argsEnhancers', () => {
       it('are applied in the right order', () => {
         const run: number[] = [];
-        const enhancerOne: ArgsEnhancer<AnyFramework> = () => {
+        const enhancerOne: ArgsEnhancer<Framework> = () => {
           run.push(1);
           return {};
         };
-        const enhancerTwo: ArgsEnhancer<AnyFramework> = () => {
+        const enhancerTwo: ArgsEnhancer<Framework> = () => {
           run.push(2);
           return {};
         };

code/lib/store/src/csf/prepareStory.ts

@@ -3,7 +3,7 @@ import deprecate from 'util-deprecate';
 import global from 'global';
 
 import type {
-  AnyFramework,
+  Framework,
   Args,
   ArgsStoryFn,
   LegacyStoryFn,
@@ -41,7 +41,7 @@ const argTypeDefaultValueWarning = deprecate(
 //
 // Note that this story function is *stateless* in the sense that it does not track args or globals
 // Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation.
-export function prepareStory<TFramework extends AnyFramework>(
+export function prepareStory<TFramework extends Framework>(
   storyAnnotations: Store_NormalizedStoryAnnotations<TFramework>,
   componentAnnotations: Store_NormalizedComponentAnnotations<TFramework>,
   projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>

code/lib/store/src/csf/processCSFFile.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   ComponentTitle,
   Parameters,
   Path,
@@ -39,7 +39,7 @@ const checkDisallowedParameters = (parameters?: Parameters) => {
 };
 
 // Given the raw exports of a CSF file, check and normalize it.
-export function processCSFFile<TFramework extends AnyFramework>(
+export function processCSFFile<TFramework extends Framework>(
   moduleExports: Store_ModuleExports,
   importPath: Path,
   title: ComponentTitle

code/lib/store/src/csf/stepRunners.ts

@@ -1,4 +1,4 @@
-import type { AnyFramework, StepRunner } from '@storybook/types';
+import type { Framework, StepRunner } from '@storybook/types';
 
 /**
  * Compose step runners to create a single step runner that applies each step runner in order.
@@ -18,7 +18,7 @@ import type { AnyFramework, StepRunner } from '@storybook/types';
  * @param stepRunners an array of StepRunner
  * @returns a StepRunner that is the composition of the arguments
  */
-export function composeStepRunners<TFramework extends AnyFramework>(
+export function composeStepRunners<TFramework extends Framework>(
   stepRunners: StepRunner<TFramework>[]
 ): StepRunner<TFramework> {
   return async (label, play, playContext) => {

code/lib/store/src/csf/testing-utils/index.ts

@@ -1,6 +1,6 @@
 import { isExportStory } from '@storybook/csf';
 import type {
-  AnyFramework,
+  Framework,
   Args,
   ComponentAnnotations,
   LegacyStoryAnnotationsOrFn,
@@ -21,17 +21,14 @@ import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations';
 
 let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {};
 
-export function setProjectAnnotations<TFramework extends AnyFramework = AnyFramework>(
+export function setProjectAnnotations<TFramework extends Framework = Framework>(
   projectAnnotations: ProjectAnnotations<TFramework> | ProjectAnnotations<TFramework>[]
 ) {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
   GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs(annotations);
 }
 
-export function composeStory<
-  TFramework extends AnyFramework = AnyFramework,
-  TArgs extends Args = Args
->(
+export function composeStory<TFramework extends Framework = Framework, TArgs extends Args = Args>(
   storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
   componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
   projectAnnotations: ProjectAnnotations<TFramework> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
@@ -95,7 +92,7 @@ export function composeStory<
 
 export function composeStories<TModule extends Store_CSFExports>(
   storiesImport: TModule,
-  globalConfig: ProjectAnnotations<AnyFramework>,
+  globalConfig: ProjectAnnotations<Framework>,
   composeStoryFn: Store_ComposeStory
 ) {
   // eslint-disable-next-line @typescript-eslint/naming-convention

code/lib/store/src/decorators.test.ts

@@ -1,9 +1,9 @@
 import { expect } from '@jest/globals';
-import type { AnyFramework, StoryContext } from '@storybook/types';
+import type { Framework, StoryContext } from '@storybook/types';
 
 import { defaultDecorateStory } from './decorators';
 
-function makeContext(input: Record<string, any> = {}): StoryContext<AnyFramework> {
+function makeContext(input: Record<string, any> = {}): StoryContext<Framework> {
   return {
     id: 'id',
     kind: 'kind',
@@ -11,7 +11,7 @@ function makeContext(input: Record<string, any> = {}): StoryContext<AnyFramework
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext<AnyFramework>;
+  } as StoryContext<Framework>;
 }
 
 describe('client-api.decorators', () => {

code/lib/store/src/decorators.ts

@@ -1,5 +1,5 @@
 import type {
-  AnyFramework,
+  Framework,
   DecoratorFunction,
   LegacyStoryFn,
   PartialStoryFn,
@@ -7,7 +7,7 @@ import type {
   StoryContextUpdate,
 } from '@storybook/types';
 
-export function decorateStory<TFramework extends AnyFramework>(
+export function decorateStory<TFramework extends Framework>(
   storyFn: LegacyStoryFn<TFramework>,
   decorator: DecoratorFunction<TFramework>,
   bindWithContext: (storyFn: LegacyStoryFn<TFramework>) => PartialStoryFn<TFramework>
@@ -42,7 +42,7 @@ export function sanitizeStoryContextUpdate({
   return update;
 }
 
-export function defaultDecorateStory<TFramework extends AnyFramework>(
+export function defaultDecorateStory<TFramework extends Framework>(
   storyFn: LegacyStoryFn<TFramework>,
   decorators: DecoratorFunction<TFramework>[]
 ): LegacyStoryFn<TFramework> {

code/lib/store/src/inferArgTypes.ts

@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
-import type { AnyFramework, SBType, ArgTypesEnhancer } from '@storybook/types';
+import type { Framework, SBType, ArgTypesEnhancer } from '@storybook/types';
 import { combineParameters } from './parameters';
 
 const inferType = (value: any, name: string, visited: Set<any>): SBType => {
@@ -41,7 +41,7 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
   return { name: 'object', value: {} };
 };
 
-export const inferArgTypes: ArgTypesEnhancer<AnyFramework> = (context) => {
+export const inferArgTypes: ArgTypesEnhancer<Framework> = (context) => {
   const { id, argTypes: userArgTypes = {}, initialArgs = {} } = context;
   const argTypes = mapValues(initialArgs, (arg, key) => ({
     name: key,

code/lib/store/src/inferControls.ts

@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { logger } from '@storybook/client-logger';
 import type {
-  AnyFramework,
+  Framework,
   ArgTypesEnhancer,
   SBEnumType,
   Store_ControlsMatchers,
@@ -61,7 +61,7 @@ const inferControl = (
   }
 };
 
-export const inferControls: ArgTypesEnhancer<AnyFramework> = (context) => {
+export const inferControls: ArgTypesEnhancer<Framework> = (context) => {
   const {
     argTypes,
     // eslint-disable-next-line @typescript-eslint/naming-convention

code/lib/types/package.json

@@ -47,7 +47,7 @@
     "file-system-cache": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2--canary.53.4879818.0",
     "@types/node": "^16.0.0",
     "synchronous-promise": "^2.0.15",
     "typescript": "~4.6.3"

code/lib/types/src/modules/addons.ts

@@ -3,7 +3,6 @@
 import type { RenderData as RouterData } from '../../../router/src/router';
 import type { ThemeVars } from '../../../theming/src/types';
 import type {
-  AnyFramework,
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
   ComponentTitle,
@@ -90,14 +89,15 @@ export interface Addon_OptionsParameter extends Object {
   [key: string]: any;
 }
 
-export type Addon_StoryContext<TFramework extends AnyFramework = AnyFramework> =
+export type Addon_StoryContext<TFramework extends Framework = Framework> =
   StoryContextForFramework<TFramework>;
 export type Addon_StoryContextUpdate = Partial<Addon_StoryContext>;
 
-interface Addon_ReturnTypeFramework<ReturnType> extends Framework {
+type Addon_ReturnTypeFramework<ReturnType> = {
   component: any;
   storyResult: ReturnType;
-}
+  canvasElement: any;
+};
 export type Addon_PartialStoryFn<ReturnType = unknown> = PartialStoryFnForFramework<
   Addon_ReturnTypeFramework<ReturnType>
 >;

code/lib/types/src/modules/client-api.ts

@@ -2,10 +2,10 @@
 import type { Addon_StoryApi, Addon_Type } from './addons';
 import type { Store_RenderContext } from './store';
 import type {
-  AnyFramework,
   Args,
   ArgTypes,
   DecoratorFunction,
+  Framework,
   LoaderFunction,
   Parameters,
   LegacyStoryFn,
@@ -68,12 +68,12 @@ export interface ClientAPI_ClientApiAddons<StoryFnReturnType> {
 
 export type ClientAPI_RenderContextWithoutStoryContext = Omit<Store_RenderContext, 'storyContext'>;
 
-export interface ClientAPI_GetStorybookStory<TFramework extends AnyFramework> {
+export interface ClientAPI_GetStorybookStory<TFramework extends Framework> {
   name: string;
   render: LegacyStoryFn<TFramework>;
 }
 
-export interface ClientAPI_GetStorybookKind<TFramework extends AnyFramework> {
+export interface ClientAPI_GetStorybookKind<TFramework extends Framework> {
   kind: string;
   fileName: string;
   stories: ClientAPI_GetStorybookStory<TFramework>[];

code/lib/types/src/modules/core-client.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Store_RenderContext } from './store';
-// import { Store_RenderContext, Store_WebProjectAnnotations } from './store';
+// import { Store_RenderContext, ProjectAnnotations } from './store';
 // import { ArgsStoryFn } from './csf';
 
 export interface CoreClient_PreviewError {

code/lib/types/src/modules/csf.ts

@@ -2,7 +2,6 @@
 
 import type {
   AnnotatedStoryFn,
-  AnyFramework,
   Args,
   ArgsEnhancer,
   ArgsFromMeta,
@@ -29,7 +28,6 @@ import type {
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
-  ProjectAnnotations,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,
@@ -63,7 +61,6 @@ import type { Addon_OptionsParameter } from './addons';
 
 export type {
   AnnotatedStoryFn,
-  AnyFramework,
   Args,
   ArgsEnhancer,
   ArgsFromMeta,
@@ -89,7 +86,6 @@ export type {
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
-  ProjectAnnotations,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,

code/lib/types/src/modules/store.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { SynchronousPromise } from 'synchronous-promise';
+import type { Framework, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf';
+
 import type { Addon_IndexEntry, Addon_StoryIndexEntry } from './addons';
 import type {
   AnnotatedStoryFn,
-  AnyFramework,
   Args,
   ComponentAnnotations,
   ComponentId,
@@ -13,7 +14,6 @@ import type {
   Parameters,
   PartialStoryFn,
   Path,
-  ProjectAnnotations,
   StoryAnnotations,
   StoryContext,
   StoryContextForEnhancers,
@@ -27,6 +27,10 @@ import type {
   ViewMode,
 } from './csf';
 
+export interface WebFramework extends Framework {
+  canvasElement: HTMLElement;
+}
+
 export type Store_ModuleExport = any;
 export type Store_ModuleExports = Record<string, Store_ModuleExport>;
 export type Store_PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
@@ -34,24 +38,26 @@ export type Store_ModuleImportFn = (path: Path) => Store_PromiseLike<Store_Modul
 
 type Store_MaybePromise<T> = Promise<T> | T;
 
-export type Store_TeardownRenderToDOM = () => Store_MaybePromise<void>;
-export type Store_RenderToDOM<TFramework extends AnyFramework> = (
+export type TeardownRenderToCanvas = () => Store_MaybePromise<void>;
+export type RenderToCanvas<TFramework extends Framework> = (
   context: Store_RenderContext<TFramework>,
-  element: Element
-) => Store_MaybePromise<void | Store_TeardownRenderToDOM>;
+  element: TFramework['canvasElement']
+) => Store_MaybePromise<void | TeardownRenderToCanvas>;
 
-export type Store_WebProjectAnnotations<TFramework extends AnyFramework> =
-  ProjectAnnotations<TFramework> & {
-    renderToDOM?: Store_RenderToDOM<TFramework>;
-  };
+export type ProjectAnnotations<TFramework extends Framework> = CsfProjectAnnotations<TFramework> & {
+  renderToCanvas?: RenderToCanvas<TFramework>;
 
-export type Store_NormalizedProjectAnnotations<TFramework extends AnyFramework = AnyFramework> =
+  /* @deprecated use renderToCanvas */
+  renderToDOM?: RenderToCanvas<TFramework>;
+};
+
+export type Store_NormalizedProjectAnnotations<TFramework extends Framework = Framework> =
   ProjectAnnotations<TFramework> & {
     argTypes?: StrictArgTypes;
     globalTypes?: StrictGlobalTypes;
   };
 
-export type Store_NormalizedComponentAnnotations<TFramework extends AnyFramework = AnyFramework> =
+export type Store_NormalizedComponentAnnotations<TFramework extends Framework = Framework> =
   ComponentAnnotations<TFramework> & {
     // Useful to guarantee that id & title exists
     id: ComponentId;
@@ -59,7 +65,7 @@ export type Store_NormalizedComponentAnnotations<TFramework extends AnyFramework
     argTypes?: StrictArgTypes;
   };
 
-export type Store_NormalizedStoryAnnotations<TFramework extends AnyFramework = AnyFramework> = Omit<
+export type Store_NormalizedStoryAnnotations<TFramework extends Framework = Framework> = Omit<
   StoryAnnotations<TFramework>,
   'storyName' | 'story'
 > & {
@@ -71,12 +77,12 @@ export type Store_NormalizedStoryAnnotations<TFramework extends AnyFramework = A
   userStoryFn?: StoryFn<TFramework>;
 };
 
-export type Store_CSFFile<TFramework extends AnyFramework = AnyFramework> = {
+export type Store_CSFFile<TFramework extends Framework = Framework> = {
   meta: Store_NormalizedComponentAnnotations<TFramework>;
   stories: Record<StoryId, Store_NormalizedStoryAnnotations<TFramework>>;
 };
 
-export type Store_Story<TFramework extends AnyFramework = AnyFramework> =
+export type Store_Story<TFramework extends Framework = Framework> =
   StoryContextForEnhancers<TFramework> & {
     moduleExport: Store_ModuleExport;
     originalStoryFn: StoryFn<TFramework>;
@@ -90,12 +96,11 @@ export type Store_Story<TFramework extends AnyFramework = AnyFramework> =
     playFunction?: (context: StoryContext<TFramework>) => Promise<void> | void;
   };
 
-export type Store_BoundStory<TFramework extends AnyFramework = AnyFramework> =
-  Store_Story<TFramework> & {
-    storyFn: PartialStoryFn<TFramework>;
-  };
+export type Store_BoundStory<TFramework extends Framework = Framework> = Store_Story<TFramework> & {
+  storyFn: PartialStoryFn<TFramework>;
+};
 
-export declare type Store_RenderContext<TFramework extends AnyFramework = AnyFramework> =
+export declare type Store_RenderContext<TFramework extends Framework = Framework> =
   StoryIdentifier & {
     showMain: () => void;
     showError: (error: { title: string; description: string }) => void;
@@ -136,7 +141,7 @@ export interface Store_Selection {
   viewMode: ViewMode;
 }
 
-export type Store_DecoratorApplicator<TFramework extends AnyFramework = AnyFramework> = (
+export type Store_DecoratorApplicator<TFramework extends Framework = Framework> = (
   storyFn: LegacyStoryFn<TFramework>,
   decorators: DecoratorFunction<TFramework>[]
 ) => LegacyStoryFn<TFramework>;
@@ -161,13 +166,13 @@ export interface Store_NormalizedStoriesSpecifierEntry {
   importPathMatcher: RegExp;
 }
 
-export type Store_ContextStore<TFramework extends AnyFramework> = {
+export type Store_ContextStore<TFramework extends Framework> = {
   value?: StoryContext<TFramework>;
 };
 
 export type Store_PropDescriptor = string[] | RegExp;
 
-export type Store_CSFExports<TFramework extends AnyFramework = AnyFramework> = {
+export type Store_CSFExports<TFramework extends Framework = Framework> = {
   default: ComponentAnnotations<TFramework, Args>;
   __esModule?: boolean;
   __namedExportsOrder?: string[];
@@ -181,11 +186,11 @@ export type Store_ComposedStoryPlayFn = (
 ) => Promise<void> | void;
 
 export type Store_StoryFn<
-  TFramework extends AnyFramework = AnyFramework,
+  TFramework extends Framework = Framework,
   TArgs = Args
 > = AnnotatedStoryFn<TFramework, TArgs> & { play: Store_ComposedStoryPlayFn };
 
-export type Store_ComposedStory<TFramework extends AnyFramework = AnyFramework, TArgs = Args> =
+export type Store_ComposedStory<TFramework extends Framework = Framework, TArgs = Args> =
   | StoryFn<TFramework, TArgs>
   | StoryAnnotations<TFramework, TArgs>;
 
@@ -195,7 +200,7 @@ export type Store_ComposedStory<TFramework extends AnyFramework = AnyFramework,
  * 2. infer the actual prop type for each Story
  * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
  */
-export type Store_StoriesWithPartialProps<TFramework extends AnyFramework, TModule> = {
+export type Store_StoriesWithPartialProps<TFramework extends Framework, TModule> = {
   // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
   // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
   [K in keyof TModule]: TModule[K] extends Store_ComposedStory<infer _, infer TProps>
@@ -209,7 +214,7 @@ export type Store_ControlsMatchers = {
 };
 
 export interface Store_ComposeStory<
-  TFramework extends AnyFramework = AnyFramework,
+  TFramework extends Framework = Framework,
   TArgs extends Args = Args
 > {
   (

code/package.json

@@ -267,7 +267,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^3.0.1",
     "chalk": "^4.1.0",
-    "chromatic": "^6.10.2",
+    "chromatic": "^6.11.3",
     "codecov": "^3.8.1",
     "commander": "^6.2.1",
     "concurrently": "^5.3.0",
@@ -341,6 +341,7 @@
     "typescript": "~4.6.3",
     "util": "^0.12.4",
     "vite": "^3.1.7",
+    "vite-plugin-turbosnap": "^1.0.1",
     "wait-on": "^5.2.1",
     "web-component-analyzer": "^1.1.6",
     "webpack": "5",

code/playwright.config.ts

@@ -30,7 +30,17 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.PLAYWRIGHT_JUNIT_OUTPUT_NAME
+    ? [
+        [
+          'junit',
+          {
+            embedAnnotationsAsProperties: true,
+            outputFile: process.env.PLAYWRIGHT_JUNIT_OUTPUT_NAME,
+          },
+        ],
+      ]
+    : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

code/renderers/html/src/config.ts

@@ -3,4 +3,4 @@ import { parameters as docsParams } from './docs/config';
 export const parameters = { framework: 'html' as const, ...docsParams };
 
 export { decorators, argTypesEnhancers } from './docs/config';
-export { renderToDOM, render } from './render';
+export { renderToCanvas, render } from './render';

code/renderers/html/src/public-api.ts

@@ -3,7 +3,7 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 import type { HtmlFramework } from './types';
 
-import { renderToDOM, render } from './render';
+import { renderToCanvas, render } from './render';
 
 const FRAMEWORK = 'html';
 
@@ -13,7 +13,7 @@ interface ClientApi extends Addon_ClientStoryApi<HtmlFramework['storyResult']> {
   raw: () => any; // todo add type
 }
 
-const api = start<HtmlFramework>(renderToDOM, { render });
+const api = start<HtmlFramework>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/renderers/html/src/render.ts

@@ -41,22 +41,22 @@ export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
   throw new Error(`Unable to render story ${id}`);
 };
 
-export function renderToDOM(
+export function renderToCanvas(
   { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>,
-  domElement: Element
+  canvasElement: HtmlFramework['canvasElement']
 ) {
   const element = storyFn();
   showMain();
   if (typeof element === 'string') {
-    domElement.innerHTML = element;
-    simulatePageLoad(domElement);
+    canvasElement.innerHTML = element;
+    simulatePageLoad(canvasElement);
   } else if (element instanceof Node) {
-    if (domElement.firstChild === element && forceRemount === false) {
+    if (canvasElement.firstChild === element && forceRemount === false) {
       return;
     }
 
-    domElement.innerHTML = '';
-    domElement.appendChild(element);
+    canvasElement.innerHTML = '';
+    canvasElement.appendChild(element);
     simulateDOMContentLoaded();
   } else {
     showError({

code/renderers/html/src/types.ts

@@ -1,4 +1,8 @@
-import type { ArgsStoryFn, Framework, StoryContext as DefaultStoryContext } from '@storybook/types';
+import type {
+  ArgsStoryFn,
+  StoryContext as DefaultStoryContext,
+  WebFramework,
+} from '@storybook/types';
 
 import type { parameters } from './config';
 
@@ -11,7 +15,7 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface HtmlFramework extends Framework {
+export interface HtmlFramework extends WebFramework {
   component: string | HTMLElement | ArgsStoryFn<HtmlFramework>;
   storyResult: StoryFnHtmlReturnType;
 }

code/renderers/preact/src/config.ts

@@ -1,5 +1,5 @@
 import { parameters as docsParams } from './docs/config';
 
-export { renderToDOM, render } from './render';
+export { renderToCanvas, render } from './render';
 
 export const parameters = { framework: 'preact' as const, ...docsParams };

code/renderers/preact/src/public-api.ts

@@ -2,7 +2,7 @@
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
-import { renderToDOM } from './render';
+import { renderToCanvas } from './render';
 import type { PreactFramework } from './types';
 
 export interface ClientApi extends Addon_ClientStoryApi<PreactFramework['storyResult']> {
@@ -13,7 +13,7 @@ export interface ClientApi extends Addon_ClientStoryApi<PreactFramework['storyRe
 }
 
 const FRAMEWORK = 'preact';
-const api = start<PreactFramework>(renderToDOM);
+const api = start<PreactFramework>(renderToCanvas);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/renderers/preact/src/render.tsx

@@ -22,13 +22,13 @@ export const render: ArgsStoryFn<PreactFramework> = (args, context) => {
 
 let renderedStory: Element;
 
-function preactRender(story: StoryFnPreactReturnType | null, domElement: Element): void {
+function preactRender(story: StoryFnPreactReturnType | null, canvasElement: Element): void {
   // @ts-expect-error (Converted from ts-ignore)
   if (preact.Fragment) {
     // Preact 10 only:
-    preact.render(story, domElement);
+    preact.render(story, canvasElement);
   } else {
-    renderedStory = preact.render(story, domElement, renderedStory) as unknown as Element;
+    renderedStory = preact.render(story, canvasElement, renderedStory) as unknown as Element;
   }
 }
 
@@ -37,8 +37,8 @@ const StoryHarness: preact.FunctionalComponent<{
   title: string;
   showError: Store_RenderContext<PreactFramework>['showError'];
   storyFn: () => any;
-  domElement: Element;
-}> = ({ showError, name, title, storyFn, domElement }) => {
+  canvasElement: PreactFramework['canvasElement'];
+}> = ({ showError, name, title, storyFn, canvasElement }) => {
   const content = preact.h(storyFn as any, null);
   if (!content) {
     showError({
@@ -53,15 +53,18 @@ const StoryHarness: preact.FunctionalComponent<{
   return content;
 };
 
-export function renderToDOM(
+export function renderToCanvas(
   { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactFramework>,
-  domElement: Element
+  canvasElement: PreactFramework['canvasElement']
 ) {
   if (forceRemount) {
-    preactRender(null, domElement);
+    preactRender(null, canvasElement);
   }
 
   showMain();
 
-  preactRender(preact.h(StoryHarness, { name, title, showError, storyFn, domElement }), domElement);
+  preactRender(
+    preact.h(StoryHarness, { name, title, showError, storyFn, canvasElement }),
+    canvasElement
+  );
 }

code/renderers/preact/src/types.ts

@@ -1,4 +1,4 @@
-import type { Framework } from '@storybook/types';
+import type { WebFramework } from '@storybook/types';
 import type { AnyComponent } from 'preact';
 
 export type { RenderContext } from '@storybook/types';
@@ -10,7 +10,7 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface PreactFramework extends Framework {
+export interface PreactFramework extends WebFramework {
   component: AnyComponent<any, any>;
   storyResult: StoryFnPreactReturnType;
 }

code/renderers/react/src/config.ts

@@ -7,4 +7,4 @@ export const parameters = {
 
 export { decorators, argTypesEnhancers } from './docs/config';
 
-export { render, renderToDOM } from './render';
+export { render, renderToCanvas } from './render';

code/renderers/react/src/docs/extractArgTypes.test.ts

@@ -5,7 +5,7 @@ import requireFromString from 'require-from-string';
 import { transformFileSync, transformSync } from '@babel/core';
 
 import { inferControls } from '@storybook/store';
-import type { AnyFramework } from '@storybook/types';
+import type { Framework } from '@storybook/types';
 import { normalizeNewlines } from '@storybook/docs-tools';
 
 import type { StoryContext } from '../types';
@@ -88,7 +88,7 @@ describe('react component properties', () => {
             const rows = inferControls({
               argTypes,
               parameters,
-            } as unknown as StoryContext<AnyFramework>);
+            } as unknown as StoryContext<Framework>);
             expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
           });
         }

code/renderers/react/src/public-api.tsx

@@ -7,7 +7,7 @@ import type {
 } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
-import { renderToDOM, render } from './render';
+import { renderToCanvas, render } from './render';
 import type { ReactFramework } from './types';
 
 interface ClientApi extends Addon_ClientStoryApi<ReactFramework['storyResult']> {
@@ -17,7 +17,7 @@ interface ClientApi extends Addon_ClientStoryApi<ReactFramework['storyResult']>
 }
 const FRAMEWORK = 'react';
 
-const api = start<ReactFramework>(renderToDOM, { render });
+const api = start<ReactFramework>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/renderers/react/src/render.tsx

@@ -128,7 +128,7 @@ class ErrorBoundary extends ReactComponent<{
 
 const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
 
-export async function renderToDOM(
+export async function renderToCanvas(
   {
     storyContext,
     unboundStoryFn,
@@ -136,7 +136,7 @@ export async function renderToDOM(
     showException,
     forceRemount,
   }: Store_RenderContext<ReactFramework>,
-  domElement: Element
+  canvasElement: ReactFramework['canvasElement']
 ) {
   const Story = unboundStoryFn as FC<StoryContext<ReactFramework>>;
 
@@ -155,10 +155,10 @@ export async function renderToDOM(
   // https://github.com/storybookjs/react-storybook/issues/81
   // (This is not the case when we change args or globals to the story however)
   if (forceRemount) {
-    unmountElement(domElement);
+    unmountElement(canvasElement);
   }
 
-  await renderElement(element, domElement);
+  await renderElement(element, canvasElement);
 
-  return () => unmountElement(domElement);
+  return () => unmountElement(canvasElement);
 }

code/renderers/react/src/types.ts

@@ -1,10 +1,10 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { Framework } from '@storybook/types';
+import type { WebFramework } from '@storybook/types';
 
 export type { Store_RenderContext as RenderContext } from '@storybook/types';
 export type { StoryContext } from '@storybook/types';
 
-export interface ReactFramework extends Framework {
+export interface ReactFramework extends WebFramework {
   component: ComponentType<this['T']>;
   storyResult: StoryFnReactReturnType;
 }

code/renderers/server/src/config.ts

@@ -1,3 +1,3 @@
-export { render, renderToDOM } from './render';
+export { render, renderToCanvas } from './render';
 
 export const parameters = { framework: 'server' as const };

code/renderers/server/src/public-api.ts

@@ -1,7 +1,7 @@
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
-import { renderToDOM, render } from './render';
+import { renderToCanvas, render } from './render';
 import type { ServerFramework } from './types';
 
 const FRAMEWORK = 'server';
@@ -12,7 +12,7 @@ interface ClientApi extends Addon_ClientStoryApi<ServerFramework['storyResult']>
   raw: () => any; // todo add type
 }
 
-const api = start<ServerFramework>(renderToDOM, { render });
+const api = start<ServerFramework>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/renderers/server/src/render.ts

@@ -44,7 +44,7 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
 
 export const render: StoryFn<ServerFramework> = (args: Args) => {};
 
-export async function renderToDOM(
+export async function renderToCanvas(
   {
     id,
     title,
@@ -56,7 +56,7 @@ export async function renderToDOM(
     storyContext,
     storyContext: { parameters, args, argTypes },
   }: Store_RenderContext<ServerFramework>,
-  domElement: Element
+  canvasElement: ServerFramework['canvasElement']
 ) {
   // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer
   storyFn();
@@ -72,16 +72,16 @@ export async function renderToDOM(
 
   showMain();
   if (typeof element === 'string') {
-    domElement.innerHTML = element;
-    simulatePageLoad(domElement);
+    canvasElement.innerHTML = element;
+    simulatePageLoad(canvasElement);
   } else if (element instanceof Node) {
     // Don't re-mount the element if it didn't change and neither did the story
-    if (domElement.firstChild === element && forceRemount === false) {
+    if (canvasElement.firstChild === element && forceRemount === false) {
       return;
     }
 
-    domElement.innerHTML = '';
-    domElement.appendChild(element);
+    canvasElement.innerHTML = '';
+    canvasElement.appendChild(element);
     simulateDOMContentLoaded();
   } else {
     showError({