From 930ce2087051b4e45b2026ce7a77c14360a6993f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= Date: Wed, 24 Jan 2024 14:20:51 +0100 Subject: [PATCH] feat: deprecate `window` global (#22057) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit deprecates `window` global and adds deprecation notice on each use of `window`. We decided to proceed with removal of `window` global variable in Deno 2.0. There's a lot of code in the wild that uses pattern like this: ``` if (typeof window !== "undefined) { ... } ``` to check if the code is being run in browser. However, this check passes fine in Deno and most often libraries that do this check try to access some browser API that is not available in Deno, or use DOM APIs (which are also not available in Deno). This situation has occurred multiple times already and it's unfeasible to expect the whole ecosystem to migrate to new check (and even if that happened there's a ton of code that's already shipped and won't change). The migration is straightfoward - replace all usages of `window` with `globalThis` or `self`. When Deno encounters use of `window` global it will now issue a warning, steering users towards required changes: ``` Warning ├ Use of deprecated "window" API. │ ├ This API will be removed in Deno 2.0. Make sure to upgrade to a stable API before then. │ ├ Suggestion: Use `globalThis` or `self` instead. │ ├ Suggestion: You can provide `window` in the current scope with: `const window = globalThis`. │ └ Stack trace: └─ at file:///Users/ib/dev/deno/foo.js:7:1 ``` Ref https://github.com/denoland/deno/issues/13367. --- cli/tests/testdata/npm/compare_globals/main.out | 1 + cli/tests/testdata/run/webstorage/logger.ts | 2 +- .../testdata/run/webstorage/serialization.ts | 6 +++--- cli/tests/testdata/run/webstorage/setter.ts | 2 +- runtime/js/98_global_scope_window.js | 12 ++++++++++-- runtime/js/99_main.js | 15 +++++++++------ 6 files changed, 25 insertions(+), 13 deletions(-) diff --git a/cli/tests/testdata/npm/compare_globals/main.out b/cli/tests/testdata/npm/compare_globals/main.out index 0e366fae75..c59800eb49 100644 --- a/cli/tests/testdata/npm/compare_globals/main.out +++ b/cli/tests/testdata/npm/compare_globals/main.out @@ -20,6 +20,7 @@ false true true true +[WILDCARD] true false false diff --git a/cli/tests/testdata/run/webstorage/logger.ts b/cli/tests/testdata/run/webstorage/logger.ts index 3898c4445f..feadd39eb6 100644 --- a/cli/tests/testdata/run/webstorage/logger.ts +++ b/cli/tests/testdata/run/webstorage/logger.ts @@ -1 +1 @@ -console.log(window.localStorage); +console.log(globalThis.localStorage); diff --git a/cli/tests/testdata/run/webstorage/serialization.ts b/cli/tests/testdata/run/webstorage/serialization.ts index f3791d355f..f125331bbe 100644 --- a/cli/tests/testdata/run/webstorage/serialization.ts +++ b/cli/tests/testdata/run/webstorage/serialization.ts @@ -1,4 +1,4 @@ -window.sessionStorage.setItem("hello", "deno"); +globalThis.sessionStorage.setItem("hello", "deno"); -console.log(window.localStorage); -console.log(window.sessionStorage); +console.log(globalThis.localStorage); +console.log(globalThis.sessionStorage); diff --git a/cli/tests/testdata/run/webstorage/setter.ts b/cli/tests/testdata/run/webstorage/setter.ts index ec6d474f52..cf5a7bfaf6 100644 --- a/cli/tests/testdata/run/webstorage/setter.ts +++ b/cli/tests/testdata/run/webstorage/setter.ts @@ -1 +1 @@ -window.localStorage.setItem("hello", "deno"); +globalThis.localStorage.setItem("hello", "deno"); diff --git a/runtime/js/98_global_scope_window.js b/runtime/js/98_global_scope_window.js index 63b346dd5a..3188c4b4ca 100644 --- a/runtime/js/98_global_scope_window.js +++ b/runtime/js/98_global_scope_window.js @@ -1,6 +1,6 @@ // Copyright 2018-2024 the Deno authors. All rights reserved. MIT license. -import { core, primordials } from "ext:core/mod.js"; +import { core, internals, primordials } from "ext:core/mod.js"; const { op_bootstrap_language, op_bootstrap_numcpus, @@ -108,7 +108,15 @@ const mainRuntimeGlobalProperties = { Location: location.locationConstructorDescriptor, location: location.locationDescriptor, Window: globalInterfaces.windowConstructorDescriptor, - window: util.getterOnly(() => globalThis), + window: util.getterOnly(() => { + internals.warnOnDeprecatedApi( + "window", + new Error().stack, + "Use `globalThis` or `self` instead.", + "You can provide `window` in the current scope with: `const window = globalThis`.", + ); + return globalThis; + }), self: util.getterOnly(() => globalThis), Navigator: util.nonEnumerable(Navigator), navigator: util.getterOnly(() => navigator), diff --git a/runtime/js/99_main.js b/runtime/js/99_main.js index 255c5fb6a1..3fee1109b0 100644 --- a/runtime/js/99_main.js +++ b/runtime/js/99_main.js @@ -99,7 +99,7 @@ let globalThis_; let deprecatedApiWarningDisabled = false; const ALREADY_WARNED_DEPRECATED = new SafeSet(); -function warnOnDeprecatedApi(apiName, stack, suggestion) { +function warnOnDeprecatedApi(apiName, stack, ...suggestions) { if (deprecatedApiWarningDisabled) { return; } @@ -155,11 +155,14 @@ function warnOnDeprecatedApi(apiName, stack, suggestion) { "%c\u251c This API will be removed in Deno 2.0. Make sure to upgrade to a stable API before then.", "color: yellow;", ); - console.error("%c\u2502", "color: yellow;"); - console.error( - `%c\u251c Suggestion: ${suggestion}`, - "color: yellow;", - ); + for (let i = 0; i < suggestions.length; i++) { + const suggestion = suggestions[i]; + console.error("%c\u2502", "color: yellow;"); + console.error( + `%c\u251c Suggestion: ${suggestion}`, + "color: yellow;", + ); + } if (isFromRemoteDependency) { console.error("%c\u2502", "color: yellow;"); console.error(