Skip to content

Commit 8ec95de

Browse files
Retain DOM nodes during streaming SSR updates (#48258)
1 parent 5ca9116 commit 8ec95de

20 files changed

+3803
-833
lines changed

src/Components/Web.JS/.yarnrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
workspaces-experimental false

src/Components/Web.JS/Microsoft.AspNetCore.Components.Web.JS.npmproj

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<Project DefaultTargets="Build">
2-
<Import Project="$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), Directory.Build.props))\Directory.Build.props" />
32

43
<PropertyGroup>
54
<IsPackable>false</IsPackable>
65
<InstallArgs>--check-files</InstallArgs>
76
</PropertyGroup>
87

8+
<PropertyGroup>
9+
<IsUnitTestProject>true</IsUnitTestProject>
10+
<TestDependsOnAspNetRuntime>false</TestDependsOnAspNetRuntime>
11+
12+
<!-- Npm tests don't run on Helix currently, so we need to set this to false to still run the tests on non-Helix -->
13+
<BuildHelixPayload>false</BuildHelixPayload>
14+
</PropertyGroup>
15+
16+
<Import Project="$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), Directory.Build.props))\Directory.Build.props" />
17+
918
<ItemGroup>
1019
<!--
1120
Ensure files dependent projects expect exist and are up-to-date. Batching in Npm.Common.targets might skip

src/Components/Web.JS/dist/Release/blazor.server.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/Components/Web.JS/dist/Release/blazor.web.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/Components/Web.JS/dist/Release/blazor.webview.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/Components/Web.JS/jest.config.js

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/*
2+
* For a detailed explanation regarding each configuration property, visit:
3+
* https://jestjs.io/docs/configuration
4+
*/
5+
6+
module.exports = {
7+
// All imported modules in your tests should be mocked automatically
8+
// automock: false,
9+
10+
// Stop running tests after `n` failures
11+
// bail: 0,
12+
13+
// The directory where Jest should store its cached dependency information
14+
// cacheDirectory: "C:\\Users\\stevesa\\AppData\\Local\\Temp\\jest",
15+
16+
// Automatically clear mock calls, instances, contexts and results before every test
17+
// clearMocks: false,
18+
19+
// Indicates whether the coverage information should be collected while executing the test
20+
// collectCoverage: false,
21+
22+
// An array of glob patterns indicating a set of files for which coverage information should be collected
23+
// collectCoverageFrom: undefined,
24+
25+
// The directory where Jest should output its coverage files
26+
// coverageDirectory: undefined,
27+
28+
// An array of regexp pattern strings used to skip coverage collection
29+
// coveragePathIgnorePatterns: [
30+
// "\\\\node_modules\\\\"
31+
// ],
32+
33+
// Indicates which provider should be used to instrument code for coverage
34+
coverageProvider: "v8",
35+
36+
// A list of reporter names that Jest uses when writing coverage reports
37+
// coverageReporters: [
38+
// "json",
39+
// "text",
40+
// "lcov",
41+
// "clover"
42+
// ],
43+
44+
// An object that configures minimum threshold enforcement for coverage results
45+
// coverageThreshold: undefined,
46+
47+
// A path to a custom dependency extractor
48+
// dependencyExtractor: undefined,
49+
50+
// Make calling deprecated APIs throw helpful error messages
51+
// errorOnDeprecated: false,
52+
53+
// The default configuration for fake timers
54+
// fakeTimers: {
55+
// "enableGlobally": false
56+
// },
57+
58+
// Force coverage collection from ignored files using an array of glob patterns
59+
// forceCoverageMatch: [],
60+
61+
// A path to a module which exports an async function that is triggered once before all test suites
62+
// globalSetup: undefined,
63+
64+
// A path to a module which exports an async function that is triggered once after all test suites
65+
// globalTeardown: undefined,
66+
67+
// A set of global variables that need to be available in all test environments
68+
// globals: {},
69+
70+
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
71+
// maxWorkers: "50%",
72+
73+
// An array of directory names to be searched recursively up from the requiring module's location
74+
// moduleDirectories: [
75+
// "node_modules"
76+
// ],
77+
78+
// An array of file extensions your modules use
79+
// moduleFileExtensions: [
80+
// "js",
81+
// "mjs",
82+
// "cjs",
83+
// "jsx",
84+
// "ts",
85+
// "tsx",
86+
// "json",
87+
// "node"
88+
// ],
89+
90+
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
91+
// moduleNameMapper: {},
92+
93+
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
94+
// modulePathIgnorePatterns: [],
95+
96+
// Activates notifications for test results
97+
// notify: false,
98+
99+
// An enum that specifies notification mode. Requires { notify: true }
100+
// notifyMode: "failure-change",
101+
102+
// A preset that is used as a base for Jest's configuration
103+
// preset: undefined,
104+
105+
// Run tests from one or more projects
106+
// projects: undefined,
107+
108+
// Use this configuration option to add custom reporters to Jest
109+
reporters: [
110+
"default",
111+
["./node_modules/jest-junit/index.js", { "outputDirectory": "../../../artifacts/log/", "outputName": `${process.platform}` + ".components-webjs.junit.xml" }]
112+
],
113+
114+
// Automatically reset mock state before every test
115+
// resetMocks: false,
116+
117+
// Reset the module registry before running each individual test
118+
// resetModules: false,
119+
120+
// A path to a custom resolver
121+
// resolver: undefined,
122+
123+
// Automatically restore mock state and implementation before every test
124+
// restoreMocks: false,
125+
126+
// The root directory that Jest should scan for tests and modules within
127+
// rootDir: undefined,
128+
129+
// A list of paths to directories that Jest should use to search for files in
130+
// roots: [
131+
// "<rootDir>"
132+
// ],
133+
134+
// Allows you to use a custom runner instead of Jest's default test runner
135+
// runner: "jest-runner",
136+
137+
// The paths to modules that run some code to configure or set up the testing environment before each test
138+
// setupFiles: [],
139+
140+
// A list of paths to modules that run some code to configure or set up the testing framework before each test
141+
// setupFilesAfterEnv: [],
142+
143+
// The number of seconds after which a test is considered as slow and reported as such in the results.
144+
// slowTestThreshold: 5,
145+
146+
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
147+
// snapshotSerializers: [],
148+
149+
// The test environment that will be used for testing
150+
testEnvironment: "jsdom",
151+
152+
// Options that will be passed to the testEnvironment
153+
// testEnvironmentOptions: {},
154+
155+
// Adds a location field to test results
156+
// testLocationInResults: false,
157+
158+
// The glob patterns Jest uses to detect test files
159+
// testMatch: [
160+
// "**/__tests__/**/*.[jt]s?(x)",
161+
// "**/?(*.)+(spec|test).[tj]s?(x)"
162+
// ],
163+
164+
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
165+
// testPathIgnorePatterns: [
166+
// "\\\\node_modules\\\\"
167+
// ],
168+
169+
// The regexp pattern or array of patterns that Jest uses to detect test files
170+
// testRegex: [],
171+
172+
// This option allows the use of a custom results processor
173+
// testResultsProcessor: undefined,
174+
175+
// This option allows use of a custom test runner
176+
// testRunner: "jest-circus/runner",
177+
178+
// A map from regular expressions to paths to transformers
179+
transform: {
180+
'^.+\\.tsx?$': ['@swc/jest'],
181+
'^.+\\.jsx?$': ['@swc/jest'],
182+
},
183+
184+
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
185+
// transformIgnorePatterns: [
186+
// "\\\\node_modules\\\\",
187+
// "\\.pnp\\.[^\\\\]+$"
188+
// ],
189+
190+
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
191+
// unmockedModulePathPatterns: undefined,
192+
193+
// Indicates whether each individual test should be reported during the run
194+
// verbose: undefined,
195+
196+
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
197+
// watchPathIgnorePatterns: [],
198+
199+
// Whether to use watchman for file crawling
200+
// watchman: true,
201+
};

src/Components/Web.JS/package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,32 @@
1313
"clean": "node node_modules/rimraf/bin.js ./dist/Debug ./dist/Release",
1414
"prebuild": "yarn run clean && yarn install --mutex network --frozen-lockfile || yarn install --mutex network --frozen-lockfile",
1515
"lint": "eslint -c ./src/.eslintrc.js --ext .ts ./src",
16+
"test": "jest",
17+
"test:watch": "jest --watch",
18+
"test:debug": "node --nolazy --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --colors --verbose",
1619
"build": "yarn run build:debug && yarn run build:production",
1720
"build:debug": "cd src && node ../node_modules/webpack-cli/bin/cli.js --mode development --config ./webpack.config.js",
1821
"build:production": "cd src && node ../node_modules/webpack-cli/bin/cli.js --mode production --config ./webpack.config.js"
1922
},
2023
"devDependencies": {
2124
"@babel/core": "^7.16.7",
2225
"@babel/preset-env": "^7.16.8",
26+
"@jest/globals": "^29.5.0",
2327
"@microsoft/dotnet-js-interop": "link:../../JSInterop/Microsoft.JSInterop.JS/src",
2428
"@microsoft/signalr": "link:../../SignalR/clients/ts/signalr",
2529
"@microsoft/signalr-protocol-msgpack": "link:../../SignalR/clients/ts/signalr-protocol-msgpack",
30+
"@swc/core": "^1.3.58",
31+
"@swc/jest": "^0.2.26",
2632
"@types/dotnet": "./@types/dotnet",
2733
"@types/jsdom": "^16.2.14",
2834
"@typescript-eslint/eslint-plugin": "^5.26.0",
2935
"@typescript-eslint/parser": "^5.26.0",
3036
"eslint": "^8.16.0",
3137
"eslint-plugin-header": "^3.1.1",
3238
"inspectpack": "^4.7.1",
39+
"jest": "^29.5.0",
40+
"jest-environment-jsdom": "^29.5.0",
41+
"jest-junit": "^16.0.0",
3342
"rimraf": "^3.0.2",
3443
"terser": "^5.14.2",
3544
"ts-loader": "^9.2.6",

src/Components/Web.JS/src/Boot.Web.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ async function boot(options?: Partial<WebStartOptions>): Promise<void> {
2727
started = true;
2828
await activateInteractiveComponents(options);
2929

30-
attachStreamingRenderingListener();
30+
attachStreamingRenderingListener(options?.ssr);
3131
}
3232

3333
async function activateInteractiveComponents(options?: Partial<WebStartOptions>) {
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
4+
export interface SsrStartOptions {
5+
/**
6+
* If true, does not attempt to preserve DOM nodes when performing dynamic updates to SSR content
7+
* (for example, during enhanced navigation or streaming rendering).
8+
*/
9+
disableDomPreservation?: boolean;
10+
}

src/Components/Web.JS/src/Platform/WebStartOptions.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33

44
import { WebAssemblyStartOptions } from './WebAssemblyStartOptions';
55
import { CircuitStartOptions } from './Circuits/CircuitStartOptions';
6+
import { SsrStartOptions } from './SsrStartOptions';
67

78
export interface WebStartOptions {
89
circuit: CircuitStartOptions;
910
webAssembly: WebAssemblyStartOptions;
11+
ssr: SsrStartOptions;
1012
}

0 commit comments

Comments
 (0)