@webjsdev/core 0.7.51 → 0.7.53

package/index.d.ts

@@ -8,7 +8,7 @@
  * inference helpers. Zero runtime cost.
  */
 
-export * from './src/component.d.ts';
+export * from './src/component.js';
 export type {
   Metadata,
   MetadataContext,
@@ -88,7 +88,7 @@ export { enableClientRouter, disableClientRouter, revalidate, refreshPage, loadF
 // `string`, so this is non-breaking; once generated, a bogus in-app path is a
 // tsserver error. The runtime is the same async function in router-client.js.
 import type { Route } from './src/routes.d.ts';
-export function navigate(url: Route, opts?: { replace?: boolean }): Promise<void>;
+export function navigate(url: Route, opts?: { replace?: boolean; scroll?: boolean }): Promise<void>;
 // The full lit-html-parity directive set (mirrors index.js); the per-directive
 // declarations live in src/directives.d.ts. `repeat` is re-exported above.
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.51",
+  "version": "0.7.53",
   "type": "module",
   "description": "The runtime for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Ships the html and css template tags, the WebComponent base class, signals, directives, and the isomorphic renderers.",
   "types": "./index.d.ts",

package/src/css.d.ts

@@ -0,0 +1,9 @@
+export interface CSSResult {
+  _$webjsCss: true;
+  text: string;
+}
+
+export function css(strings: TemplateStringsArray | string[], ...values: unknown[]): CSSResult;
+export function isCSS(x: unknown): x is CSSResult;
+export function adoptStyles(root: ShadowRoot | Document, styles: CSSResult[]): void;
+export function stylesToString(styles: CSSResult[]): string;

package/src/escape.d.ts

@@ -0,0 +1,2 @@
+export function escapeText(s: string): string;
+export function escapeAttr(s: string): string;

package/src/html.d.ts

@@ -0,0 +1,9 @@
+export interface TemplateResult {
+  _$webjs: 'template';
+  strings: TemplateStringsArray | string[];
+  values: unknown[];
+}
+
+export function html(strings: TemplateStringsArray | string[], ...values: unknown[]): TemplateResult;
+export function isTemplate(x: unknown): x is TemplateResult;
+export const MARKER: 'wjm-';

package/src/render-client/parts.js

@@ -267,7 +267,15 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
       const mp = /** @type {{ statics: string[], group: number[] }} */ (/** @type any */ (part));
       let val = mp.statics[0];
       for (let j = 0; j < mp.group.length; j++) {
-        const piece = allValues ? allValues[mp.group[j]] : value;
+        let piece = allValues ? allValues[mp.group[j]] : value;
+        // Unwrap live() PER PIECE (#1443). The top-of-function unwrap only
+        // sees the anchor hole's own value, and every hole inside a QUOTED
+        // attribute lands here (single-hole included, the compiler classifies
+        // them all attr-mixed), so without this a `title="${live(v)}"` the
+        // server now emits correctly would be rewritten to the wrapper's
+        // stringification on the next client commit. Mirrors the reconciler's
+        // effectiveFormAttr, which already unwraps each group piece.
+        if (isLive(piece)) piece = /** @type any */ (piece).value;
         // #1154: same function guard for each piece of a mixed attribute.
         assertNotFunctionActionAttr(piece, part.name, part.el.localName);
         val += String(piece ?? '');
@@ -487,6 +495,20 @@ export function applyChildInner(part, value, reconcileFormActionsCb) {
 export function applyChildInnerRaw(part, value, reconcileFormActionsCb) {
   const marker = part.marker;
 
+  // live() in a CHILD position (#1443). applyPart's top-of-function unwrap only
+  // sees the hole's own value, so a live() nested inside an ARRAY child arrives
+  // here still wrapped and would stringify to "[object Object]". The server
+  // recurses through isLive in both machines (template-renderer.js render() and
+  // streamRender()), so without this the renderers disagree and an SSR'd list
+  // built with live() per item corrupts on upgrade. A plain unwrap is the whole
+  // job here: live()'s dirty-check is attribute/property-shaped and has no
+  // meaning for a child, which is exactly why the server treats it the same way.
+  // Recursing first (rather than after the unsafeHTML branch) matches the
+  // server's outcome for a nested directive such as live(unsafeHTML(x)).
+  if (isLive(value)) {
+    return applyChildInnerRaw(part, /** @type any */ (value).value, reconcileFormActionsCb);
+  }
+
   // unsafeHTML directive: inject raw HTML string as DOM nodes.
   if (isUnsafeHTML(value)) {
     teardownChild(part);
@@ -1096,6 +1118,9 @@ function removeArrayItem(item) {
  * @returns {{ item: ArrayItem, frag: Node | null }}
  */
 function buildArrayItem(v, reconcileFormActionsCb) {
+  // #1443: unwrap live() per ITEM. applyPart unwraps the hole's own value, so
+  // an array child arrives unwrapped at the top and its ITEMS do not.
+  if (isLive(v)) v = /** @type any */ (v).value;
   if (isTemplate(v)) {
     const { inst, frag } = buildDetached(/** @type any */ (v), reconcileFormActionsCb);
     return { item: { type: 'tpl', inst }, frag };
@@ -1153,7 +1178,11 @@ function reconcileArray(part, value, reconcileFormActionsCb) {
 
   try {
     for (let i = 0; i < value.length; i++) {
-      const v = value[i];
+      // #1443: same per-item unwrap as buildArrayItem, on the in-place update
+      // path. Without it a re-render writes the wrapper's stringification into
+      // the existing text node.
+      const raw = value[i];
+      const v = isLive(raw) ? /** @type any */ (raw).value : raw;
       const o = old[i];
       if (isTemplate(v)) {
         const tr = /** @type any */ (v);
@@ -1955,6 +1984,9 @@ async function consumeAsyncStream(state, part, dir, reconcileFormActionsCb) {
  * @returns {ChildNode[]}
  */
 function renderToNodes(value, reconcileFormActionsCb) {
+  // #1443: the streamed / detached counterpart of the per-item unwrap above.
+  // Recursion covers a nested array, since each level re-enters here.
+  if (isLive(value)) value = /** @type any */ (value).value;
   if (value == null || value === false || value === true) return [];
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);

package/src/render-server/template-renderer.js

@@ -384,6 +384,18 @@ export async function renderTemplate(tr, ctx) {
       if (val && typeof /** @type any */ (val).then === 'function') {
         val = await val;
       }
+      // Unwrap live() once, here, before the position dispatch, exactly where
+      // the client's applyPart() unwraps it (render-client/parts.js). The
+      // directive's only job is to dirty-check against the LIVE DOM value, a
+      // client-only concern, so on the server it is transparent and every
+      // position must see the inner value. Doing it per-position instead let
+      // the two renderers drift: the wrapper is truthy, so a `?bool=${live(v)}`
+      // emitted its attribute whatever v was, and `attr=${live(v)}` stringified
+      // to `[object Object]` (#1443). render() / streamRender() keep their own
+      // isLive branch below for a live() nested inside an array child, which
+      // this hole-level unwrap never sees. AFTER the await: a hole may hold a
+      // promise that resolves TO a live().
+      if (isLive(val)) val = /** @type any */ (val).value;
       if (state === 'comment') {
         // Holes inside <!-- comments --> are emitted raw (no escaping; comments
         // are inert and not rendered by browsers).
@@ -823,6 +835,9 @@ export async function streamTemplate(tr, ctx, controller) {
       if (val && typeof /** @type any */ (val).then === 'function') {
         val = await val;
       }
+      // Same unwrap as the buffered machine above (#1443). The two machines
+      // must emit identical bytes, so this is not optional here.
+      if (isLive(val)) val = /** @type any */ (val).value;
       if (state === 'comment') {
         buf += String(val ?? '');
         commentDashes = 0;

package/src/repeat.d.ts

@@ -0,0 +1,15 @@
+// The runtime value also carries a module-private `Symbol.for('webjs.repeat')`
+// key, the marker the renderers check. It is deliberately absent here: it is not
+// exported, so it cannot be named, and no consumer constructs one by hand.
+export interface RepeatDirective<T> {
+  items: T[];
+  keyFn: (item: T, i: number) => string | number;
+  templateFn: (item: T, i: number) => unknown;
+}
+
+export function repeat<T>(
+  items: Iterable<T>,
+  keyFn: (item: T, i: number) => string | number,
+  templateFn: (item: T, i: number) => unknown,
+): RepeatDirective<T>;
+export function isRepeat(x: unknown): x is RepeatDirective<unknown>;

package/src/rich-fetch.d.ts

@@ -0,0 +1,4 @@
+// `body` is widened off `RequestInit` on purpose: richFetch also accepts a plain
+// object, which it serializes with the WebJs wire format. `Omit` first, because
+// an intersection would narrow the property back to `BodyInit | null`.
+export function richFetch<T>(url: string | URL, init?: Omit<RequestInit, 'body'> & { body?: unknown }): Promise<T>;

package/src/router-client/constants.js

@@ -46,12 +46,19 @@ export const STREAM_MIME = 'text/vnd.webjs-stream.html';
  *   5. Commit, in this order: `history.pushState`, then merge head, then apply
  *      the replace/morph from step 3, then re-run scripts and upgrade custom
  *      elements. Only the push moved (#1406); the rest of the sequence is
- *      unchanged. The push leads because
- *      WebKit binds a same-document entry's
- *      back-forward gesture snapshot to the page state when the entry is
- *      recorded, so recording it after the content swap makes an iOS
- *      back-swipe preview the destination instead of the page being returned
- *      to (#1406).
+ *      unchanged. The push leads so the entry for the page being left is
+ *      finalized while that page is still the live document, rather than
+ *      against the content that replaced it. This is Turbo Drive's ordering
+ *      too.
+ *
+ *      #1406 justified the move as the fix for the blank iOS back-swipe
+ *      preview, on the theory that WebKit binds the gesture snapshot to page
+ *      state at the moment the entry is recorded. That theory is FALSE, shown
+ *      on-device in #1428: Turbo Drive has this exact ordering and previews
+ *      blank the same way, and the real cause was
+ *      `history.scrollRestoration = 'manual'` suppressing the browser's
+ *      per-entry scroll recording. The ordering stands on its own merits;
+ *      it just never fixed that bug.
  *
  * Optimizations bundled into the same response cycle:
  *   - `X-Webjs-Have` request header lists `segment:route-key` entries for
@@ -185,3 +192,15 @@ export const META_KEY_CSP_NONCE = 'name=csp-nonce';
 export function _isNonHtmlPath(pathname) {
   return NON_HTML_EXTENSIONS.test(pathname);
 }
+
+/**
+ * How long the restore window's write-back stays armed (#1428).
+ *
+ * It exists to reconcile ONE event, the browser's replay of its own recorded
+ * scroll offset, which lands about a frame after the popstate handler. This is
+ * generous for that (roughly fifteen frames at 60Hz) and far short of the
+ * window's own life, so a legitimate programmatic scroll arriving later, a
+ * component's `scrollIntoView()` during upgrade or a find-in-page jump, is left
+ * alone rather than reverted.
+ */
+export const WRITE_BACK_ARMED_MS = 250;

package/src/router-client/events.js

@@ -8,11 +8,12 @@
  */
 import { findAnchorInPath } from './anchors.js';
 import { NON_HTML_EXTENSIONS } from './constants.js';
-import { enabled } from './state.js';
+import { enabled, markFragmentNav } from './state.js';
 import { warnIfActionSubmissionCannotDeliver } from './diagnostics.js';
 import { buildSubmitFormData, encodeSubmitBody, getSubmitAction, getSubmitEnctype, getSubmitMethod } from './form-encoder.js';
 import { resolveTargetFrameId } from './frames.js';
-import { performNavigation, performSubmission } from './navigator.js';
+import { resolvePreserveScroll } from './scroll.js';
+import { absorbFragmentClickPopState, performNavigation, performSubmission } from './navigator.js';
 
 /** @param {MouseEvent} e */
 export function onClick(e) {
@@ -23,7 +24,6 @@ export function onClick(e) {
   const anchor = findAnchorInPath(e);
   if (!anchor) return;
   if (anchor.hasAttribute('download')) return;
-  if (anchor.hasAttribute('data-no-router')) return;
   if (anchor.target && anchor.target !== '_self') return;
 
   const href = anchor.href;
@@ -31,7 +31,31 @@ export function onClick(e) {
 
   const url = new URL(href);
   if (url.origin !== location.origin) return;
-  if (url.pathname === location.pathname && url.search === location.search && url.hash) return;
+  // `href.includes('#')` rather than `url.hash`, because the URL serializer
+  // reports BOTH a null fragment and an empty one as `''`, and only the second
+  // is a fragment navigation. `href="#"` keeps its `#` in `href` and per the
+  // spec navigates to the document element (the back-to-top idiom), while
+  // `href=""` resolves to the current url with the fragment REMOVED, which the
+  // spec reloads rather than jumping, so it must stay a router navigation. A
+  // `#` cannot appear anywhere else in a serialized url: the parser encodes it
+  // in the path and starts the fragment at it in the query (#1437).
+  if (url.pathname === location.pathname && url.search === location.search && url.href.includes('#')) {
+    // Leave a mark for the popstate this jump is about to fire. A REPEAT click
+    // replaces its history entry rather than pushing, so that popstate arrives
+    // with an unchanged url and is indistinguishable by comparison from a real
+    // Back between two entries that share one. Provenance is the only thing
+    // that separates them, and this is where the router has it (#1437).
+    markFragmentNav(url.href);
+    return;
+  }
+  // Checked AFTER the fragment bow-out on purpose. `data-no-router` opts out of
+  // ROUTING, and the bow-out above routes nothing either way, but the browser
+  // still performs the native jump and still fires the popstate that has to be
+  // recognised. Returning here first would leave EVERY click of a
+  // `data-no-router` in-page anchor unmarked, first and repeat alike, since the
+  // mark is the only thing that absorbs one, so each would be re-navigated
+  // destructively (#1437).
+  if (anchor.hasAttribute('data-no-router')) return;
   if (NON_HTML_EXTENSIONS.test(url.pathname)) return;
 
   e.preventDefault();
@@ -40,11 +64,23 @@ export function onClick(e) {
   // external sidebar/nav link), `_top` breaks out to a full-page nav, and
   // absence falls back to the closest enclosing frame (today's default).
   const frameId = resolveTargetFrameId(anchor);
-  performNavigation(href, false, frameId);
+  // #1436: `data-preserve-scroll` on the anchor or an ancestor keeps the reader
+  // where they are instead of scrolling to top. Read here, beside the other
+  // per-link opt-outs, and carried on the navigation's opts bag. Inert on a
+  // frame-targeted link, which already writes no scroll (#1427).
+  performNavigation(href, false, frameId, { preserveScroll: resolvePreserveScroll(anchor) });
 }
 
 /** @param {PopStateEvent} _e */
 export function onPopState(_e) {
+  // The popstate an in-page fragment CLICK produces is not a navigation: the
+  // browser has already done the jump, so re-fetching and re-swapping would
+  // destroy live DOM identity and undo it (#1437). Absorbed only when the
+  // router MARKED that click on its way out (the bow-out above); a popstate
+  // with no mark behind it is a traversal and stays on the normal path,
+  // whatever its url. The callee's docstring has the full reasoning, including
+  // why no url comparison can stand in for the mark.
+  if (absorbFragmentClickPopState(location.href)) return;
   // popstate has no DOM anchor, so no frame context: restore via cache or
   // refetch the whole document.
   performNavigation(location.href, true, null);
@@ -134,6 +170,13 @@ export function onSubmit(e) {
   // an explicit `data-webjs-frame` on (or above) the form or its submitter
   // wins, `_top` breaks out, absence falls back to the enclosing frame.
   const frameId = resolveTargetFrameId(submitter || form);
-  performSubmission(url.href, method, body, frameId, form);
+  // Same trigger precedence as the frame line above. The form is passed as a
+  // FALLBACK rather than relied on through the submitter's ancestors, because a
+  // submitter is form-associated by `form="id"` and may sit outside the form
+  // entirely, where `closest()` would never reach it. The trigger still wins
+  // when it resolves a carrier, so `data-preserve-scroll="false"` on a button
+  // inside a marked form still opts that button out.
+  const preserveScroll = resolvePreserveScroll(submitter || form, form);
+  performSubmission(url.href, method, body, frameId, form, { preserveScroll });
 }
 

package/src/router-client/fetch-apply.js

@@ -35,13 +35,23 @@ import { _swapCommit, applySwap } from './swap.js';
  * @param {boolean} [revalidating]  True for the BACKGROUND refresh after a
  *   snapshot restore: the user is already viewing a page, so a boundary
  *   mismatch must degrade in place (never a jarring `location.href` load).
- * @param {'page' | 'shell'} [refresh]  Same-URL in-place refresh (#1398). It
- *   suppresses the `X-Webjs-Have` header and picks the swap tier; see
- *   `refreshPage`.
- * @param {boolean} [noPrefetch]  Never consume a speculative entry, whatever the
- *   cache holds (#1407). Set by `loadFrame`: a `<webjs-frame src>` self-load or
- *   `src` mutation asks for THIS frame's content now, which is a freshness
- *   request rather than the click-follows-hover shape the warm cache serves.
+ * @param {{ refresh?: 'page' | 'shell', noPrefetch?: boolean, preserveScroll?: boolean }} [opts]
+ *   Per-navigation POLICY, as a bag rather than three more positionals. The
+ *   nine parameters above are request inputs; these three decide what the
+ *   pipeline does with the response, and the list was already at eleven.
+ *
+ *   `refresh` is a same-URL in-place refresh (#1398). It suppresses the
+ *   `X-Webjs-Have` header and picks the swap tier; see `refreshPage`.
+ *
+ *   `noPrefetch` never consumes a speculative entry, whatever the cache holds
+ *   (#1407). Set by `loadFrame`: a `<webjs-frame src>` self-load or `src`
+ *   mutation asks for THIS frame's content now, which is a freshness request
+ *   rather than the click-follows-hover shape the warm cache serves.
+ *
+ *   `preserveScroll` keeps the reader's current offset instead of scrolling to
+ *   top on a forward navigation (#1436), from `data-preserve-scroll` on the
+ *   link or form, or from `navigate(url, { scroll: false })`. It suppresses only
+ *   the scroll-to-top writes, never the hash-anchor scroll.
  * @returns {Promise<{ ok: boolean, status: number | null, aborted: boolean, applied: boolean }>}
  *   The fetch outcome, so a caller (the form-submission busy/event lifecycle)
  *   can report whether the submission settled as a success, an error, or an
@@ -62,8 +72,11 @@ import { _swapCommit, applySwap } from './swap.js';
  *   boundary scan). A caller deciding whether to fall back to a full page load
  *   wants `applied`; one reporting the submission's success wants `ok`.
  */
-export async function fetchAndApply(href, frameId, recordHistory, optimisticState, method, body, signal, token, revalidating, refresh, noPrefetch) {
+export async function fetchAndApply(href, frameId, recordHistory, optimisticState, method, body, signal, token, revalidating, opts) {
   method = method || 'GET';
+  const refresh = (opts && opts.refresh) || undefined;
+  const noPrefetch = !!(opts && opts.noPrefetch);
+  const preserveScroll = !!(opts && opts.preserveScroll);
   const myToken = typeof token === 'number' ? token : currentNavigationToken;
   let html;
   // Set when the response streams Suspense boundaries (#473): holds the open
@@ -272,13 +285,18 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // recover in place rather than a destructive full reload.
   if (!doc) { restoreOptimistic(optimisticState); handleNavigationError(href, null, new Error('navigation response did not parse as HTML')); return { ok: false, status: respStatus, aborted: false, applied: false }; }
 
-  // #1406: the history entry this navigation records is what the iOS back-swipe
-  // gesture later previews, and WebKit binds a same-document entry's snapshot to
-  // the page state at the moment the entry is recorded. Recording it after the
-  // swap finalizes it against the DESTINATION document at a scroll offset the
-  // browser has already clamped to that document's height (measured on the
-  // gallery: 1600 to 252), so the gesture previews a page that never existed and
-  // renders blank. So the push rides into `applySwap` as a COMMIT-time callback
+  // #1406: recording the push after the swap finalizes the outgoing page's
+  // entry against the DESTINATION document, at a scroll offset the browser has
+  // already clamped to that document's height (measured on the gallery: 1600 to
+  // 252). Ordering it ahead of the mutation keeps the entry tied to the page it
+  // belongs to.
+  //
+  // #1406 also claimed this fixed the blank iOS back-swipe preview, via WebKit
+  // binding the gesture snapshot at the moment the entry is recorded. That is
+  // FALSE (#1428, on-device): Turbo Drive uses this same ordering and previews
+  // blank too, and the cause was `history.scrollRestoration = 'manual'`
+  // suppressing per-entry scroll recording. The ordering is kept on its own
+  // merits. So the push rides into `applySwap` as a COMMIT-time callback
   // and fires ahead of the mutation, which is Turbo Drive's ordering
   // (`PageView.renderPage` calls `visit.changeHistory()` ahead of
   // `this.render(renderer)`).
@@ -335,23 +353,50 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // Scroll only for foreground (history-recording) navigations. When
   // `recordHistory` is false we're either:
   //   (a) the background revalidation after a cached popstate restore
-  //       - performNavigation already set scroll from the cached
-  //       position; we must NOT clobber it here.
-  //   (b) a cache-miss popstate: modern browsers fire scroll-
-  //       restoration themselves before dispatching popstate, so
-  //       leaving scroll alone preserves the browser-native UX.
-  if (recordHistory) {
+  //       - the restore is already settled (the browser replayed the
+  //       offset and the restore window is guarding it); a write here
+  //       would land on top of it.
+  //   (b) a cache-miss popstate: the browser performs its own restore
+  //       for the entry, so leaving scroll alone preserves the
+  //       browser-native UX. Note the UA's replay lands a frame AFTER
+  //       the popstate handler, not before it (#1428, measured), which
+  //       is the ordering the restore window is built around.
+  //
+  // And never for a FRAME-scoped response (#1427). `recordHistory` means "a
+  // foreground navigation the reader initiated", which a frame click is (it
+  // advances the URL, deliberately), so a frame swap used to fall into the
+  // page-navigation scroll by omission rather than by decision. A frame swaps
+  // ONE region and leaves the rest of the document standing, the scroll offset
+  // included, so the router writes no scroll for it: on a page whose frame sits
+  // below the fold, scrolling to top throws the region the reader just clicked
+  // in off screen. Turbo, which `<webjs-frame>` is modelled on, likewise never
+  // scrolls on a frame navigation (its `autoscroll` opt-in is a separate
+  // feature WebJs does not have). This is the same rule `restoreGeneration` in
+  // `scroll.js` already applies when deciding what ends a scroll-restore
+  // window, so the two now agree on what a frame nav is.
+  //
+  // The hash branch is excluded too. A `#anchor` on a frame link is no more a
+  // request to move the document viewport than the frame swap itself is, and
+  // one rule ("a frame swap never moves the window") beats two. `_top` and an
+  // unresolvable `data-webjs-frame` id both resolve to a null `frameId` in
+  // `resolveTargetFrameId`, so they stay page navigations and still scroll.
+  // `preserveScroll` (#1436) suppresses the scroll-to-TOP writes and nothing
+  // else. A hash anchor still wins, because the reader named a target and a
+  // named target beats a blanket preference; that is the one arm below that is
+  // not guarded. The arm where the hash names an element the response does not
+  // contain scrolls to top today and is guarded with the rest, so "preserve"
+  // means one thing on every path.
+  if (recordHistory && !frameId) {
     // Use the final URL (after any server-side redirect) so hash
     // anchors point at the document we actually rendered.
     const url = new URL(finalUrl);
-    if (url.hash) {
-      const t = document.getElementById(url.hash.slice(1));
+    const target = url.hash ? document.getElementById(url.hash.slice(1)) : null;
+    if (target) {
       // A hash anchor is the one nav scroll we DON'T force instant: a
       // `#section` link is exactly where an app's `scroll-behavior: smooth`
       // is wanted, and native browsers animate it too.
-      if (t) t.scrollIntoView();
-      else { warnIfSmoothScrollOnHtml(); window.scrollTo({ left: 0, top: 0, behavior: 'instant' }); }
-    } else {
+      target.scrollIntoView();
+    } else if (!preserveScroll) {
       // Scroll-to-top on a forward nav. behavior:'instant' so an app-level
       // `scroll-behavior: smooth` does not animate it (match native nav).
       warnIfSmoothScrollOnHtml();