better-ship 0.34.0 → 0.35.1

package/src/infrastructure/browser-support/update-screen.ts

@@ -0,0 +1,142 @@
+/** Set on `documentElement` when the update screen is showing. Hydration checks this name. */
+export const unsupportedBrowserAttribute = 'data-unsupported-browser'
+
+const updateTitleAttribute = 'data-update-title' as const
+const updateBodyAttribute = 'data-update-body' as const
+const fallbackFont = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'
+
+/** Copy and public URLs for the update screen tags in the document head. */
+export type UpdateScreenHead = {
+  readonly title: string
+  readonly body: string
+  /** Public URL of `updateScreenStyle`. */
+  readonly styleHref: string
+  /** Public URL of `updateScreenScript`. */
+  readonly scriptSrc: string
+}
+
+/** Stylesheet link a root route places in `head().links`. */
+export type UpdateScreenLink = {
+  readonly rel: 'stylesheet'
+  readonly href: string
+}
+
+/** Deferred script a root route places in `head().scripts`. */
+export type UpdateScreenScript = {
+  readonly src: string
+  readonly defer: true
+  readonly 'data-update-title': string
+  readonly 'data-update-body': string
+}
+
+/**
+ * `links` and `scripts` a root route spreads into `head()`.
+ * The arrays are mutable so they match the `head()` return type.
+ */
+export type UpdateScreenHeadEntries = {
+  links: UpdateScreenLink[]
+  scripts: UpdateScreenScript[]
+}
+
+/**
+ * Stylesheet and deferred script entries for a root route `head()`.
+ * Spread `links` and `scripts` into `head()`. The router escapes the attribute values.
+ * `defer` keeps parsing unblocked. The script is classic ES5, so a browser below the floor can show the screen.
+ */
+export function updateScreenHeadScript(head: UpdateScreenHead): UpdateScreenHeadEntries {
+  return {
+    links: [{ rel: 'stylesheet', href: head.styleHref }],
+    scripts: [
+      {
+        src: head.scriptSrc,
+        defer: true,
+        [updateTitleAttribute]: head.title,
+        [updateBodyAttribute]: head.body,
+      },
+    ],
+  }
+}
+
+/** True when the update screen script marked this element. Skip hydration when it is true. */
+export function isUnsupportedBrowser(root: {
+  readonly hasAttribute: (name: string) => boolean
+}): boolean {
+  return root.hasAttribute(unsupportedBrowserAttribute)
+}
+
+/**
+ * Classic ES5 script. Serve it at `scriptSrc`.
+ * It shows the screen when `CSS.registerProperty` or `color-mix()` is missing, and does nothing at the floor.
+ */
+export const updateScreenScript = `(function () {
+  var cssApi = typeof CSS === 'undefined' ? null : CSS;
+  var hasProperty = cssApi !== null && typeof cssApi.registerProperty === 'function';
+  var hasMix = cssApi !== null && typeof cssApi.supports === 'function' && cssApi.supports('color', 'color-mix(in srgb, red, blue)');
+  if (hasProperty && hasMix) return;
+  document.documentElement.setAttribute('${unsupportedBrowserAttribute}', '');
+  var scripts = document.getElementsByTagName('script');
+  var title = 'Update your browser';
+  var body = '';
+  for (var index = 0; index < scripts.length; index = index + 1) {
+    var marker = scripts[index].getAttribute('${updateTitleAttribute}');
+    if (marker === null) continue;
+    title = marker;
+    var text = scripts[index].getAttribute('${updateBodyAttribute}');
+    body = text === null ? '' : text;
+    break;
+  }
+  var screen = document.createElement('div');
+  screen.id = 'unsupported-browser';
+  var heading = document.createElement('h1');
+  heading.className = 'unsupported-browser-title';
+  heading.textContent = title;
+  var paragraph = document.createElement('p');
+  paragraph.className = 'unsupported-browser-body';
+  paragraph.textContent = body;
+  screen.appendChild(heading);
+  screen.appendChild(paragraph);
+  document.body.appendChild(screen);
+})();
+`
+
+// `!important` keeps application styles from painting over the update screen.
+/** Classic CSS for the update screen. Serve it at `styleHref`. Tokens fall back to neutral grey and a system sans-serif. */
+export const updateScreenStyle = `html[${unsupportedBrowserAttribute}],
+html[${unsupportedBrowserAttribute}] body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--band, #f5f5f5);
+}
+html[${unsupportedBrowserAttribute}] body > :not(#unsupported-browser) {
+  display: none !important;
+}
+#unsupported-browser {
+  box-sizing: border-box;
+  min-height: 100vh;
+  margin: 0;
+  padding: 48px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: var(--band, #f5f5f5);
+  color: var(--foreground, #171717);
+  font-family: var(--font-text, ${fallbackFont});
+}
+.unsupported-browser-title {
+  margin: 0 0 12px;
+  max-width: 28rem;
+  font-family: var(--font-brand, ${fallbackFont});
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.unsupported-browser-body {
+  margin: 0;
+  max-width: 32rem;
+  color: var(--muted-foreground, #525252);
+  font-size: 1.0625rem;
+  line-height: 1.5;
+}
+`