Add useTitle (#311)

Co-authored-by: Ryan Carniato <[email protected]>

packages/dom-expressions/src/client.js

@@ -1,48 +1,31 @@
 import {
-  Properties,
-  ChildProperties,
-  Aliases,
-  getPropAlias,
-  SVGNamespace,
-  DelegatedEvents
-} from "./constants";
-import {
-  root,
+  createComponent,
   effect,
-  memo,
   getOwner,
-  createComponent,
+  memo,
+  mergeProps,
+  root,
   sharedConfig,
-  untrack,
-  mergeProps
+  untrack
 } from "rxcore";
-import reconcileArrays from "./reconcile";
-export {
-  Properties,
-  ChildProperties,
-  getPropAlias,
+import {
   Aliases,
-  DOMElements,
-  SVGElements,
+  ChildProperties,
+  DelegatedEvents,
+  Properties,
   SVGNamespace,
-  DelegatedEvents
+  getPropAlias
+} from "./constants";
+import reconcileArrays from "./reconcile";
+export {
+  Aliases, ChildProperties, DOMElements, DelegatedEvents, Properties, SVGElements,
+  SVGNamespace, getPropAlias
 } from "./constants";
 
 const $$EVENTS = "_$DX_DELEGATE";
 
 export {
-  effect,
-  memo,
-  untrack,
-  getOwner,
-  createComponent,
-  mergeProps,
-  voidFn as useAssets,
-  voidFn as getAssets,
-  voidFn as Assets,
-  voidFn as generateHydrationScript,
-  voidFn as HydrationScript,
-  voidFn as getRequestEvent
+  voidFn as Assets, voidFn as HydrationScript, createComponent, effect, voidFn as generateHydrationScript, voidFn as getAssets, getOwner, voidFn as getRequestEvent, memo, mergeProps, untrack, voidFn as useAssets
 };
 
 export function render(code, element, init, options = {}) {
@@ -618,3 +601,10 @@ export const RequestContext = Symbol();
 export function innerHTML(parent, content) {
   !sharedConfig.context && (parent.innerHTML = content);
 }
+
+export function useTitle(source) {
+  effect(() => {
+    while (typeof source === 'function') source = source();
+    document.title = source;
+  });
+}

packages/dom-expressions/src/server.js

@@ -46,14 +46,16 @@ export function renderToString(code, options = {}) {
     roots: 0,
     nextRoot() {
       return this.renderId + "i-" + this.roots++;
-    }
+    },
+    title: '',
   };
   let html = root(d => {
     setTimeout(d);
     return resolveSSRNode(escape(code()));
   });
   sharedConfig.context.noHydrate = true;
   serializer.close();
+  html = injectTitle(sharedConfig.context.title, html);
   html = injectAssets(sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
@@ -214,7 +216,8 @@ export function renderToStream(code, options = {}) {
         }
         return firstFlushed;
       };
-    }
+    },
+    title: '',
   };
 
   let html = root(d => {
@@ -225,6 +228,7 @@ export function renderToStream(code, options = {}) {
     if (shellCompleted) return;
     sharedConfig.context = context;
     context.noHydrate = true;
+    html = injectTitle(context.title, html);
     html = injectAssets(context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
@@ -695,8 +699,18 @@ export function ssrSpread(props, isSVG, skipChildren) {
   return result;
 }
 
-// client-only APIs
+export function useTitle(source) {
+  // TODO should we resolve this eagerly?
+  sharedConfig.context.title = source;
+}
+
+function injectTitle(title, html) {
+  const result = resolveSSRNode(title);
+  // TODO should we put this after the head opening
+  return result ? html.replace(`</head>`, result + `</head>`) : html;
+}
 
+// client-only APIs
 export {
   notSup as classList,
   notSup as style,