vike-solid 0.2.9 → 0.3.0

package/README.md

@@ -5,7 +5,4 @@
 
 SolidJS integration for [Vike](https://github.com/vikejs/vike).
 
-> [!NOTE]  
-> For integrations with React and Vue, see the other [`vike-*` packages](https://vike.dev/vike-packages).
-
 See [examples/](https://github.com/vikejs/vike-solid/tree/main/examples).

package/dist/+config.js

@@ -1,6 +1,6 @@
 // Depending on the value of `config.meta.ssr`, set other config options' `env`
 // accordingly.
-// See https://vike.dev/meta#modify-existing-configurations
+// See https://vike.dev/meta#:~:text=Modifying%20the%20environment%20of%20existing%20hooks
 const toggleSsrRelatedConfig = ({
   configDefinedAt,
   configValue
@@ -26,19 +26,14 @@ const toggleSsrRelatedConfig = ({
   };
 };
 var _config = {
+  // https://vike.dev/onRenderHtml
   onRenderHtml: "import:vike-solid/renderer/onRenderHtml:onRenderHtml",
+  // https://vike.dev/onRenderClient
   onRenderClient: "import:vike-solid/renderer/onRenderClient:onRenderClient",
-  // TODO/next-major-release: remove pageProps (i.e. tell users to use data() instead of onBeforeRender() to fetch data)
-  // TODO/next-major-release: remove support for setting title over onBeforeRender()
-  // A page can define an onBeforeRender() hook to be run on the server, which
-  // can fetch data and return it as additional page context. Typically it will
-  // return the page's root Solid component's props and additional data that can
-  // be used by the renderers.
-  // It is a cumulative config option, so a web app using vike-solid can extend
-  // this list.
-  passToClient: ["pageProps", "title", "lang"],
+  // https://vike.dev/clientRouting
   clientRouting: true,
   hydrationCanBeAborted: true,
+  // https://vike.dev/meta
   meta: {
     Head: {
       env: {
@@ -57,14 +52,10 @@ var _config = {
         client: true
       }
     },
-    description: {
-      env: {
-        server: true
-      }
-    },
     favicon: {
       env: {
-        server: true
+        server: true,
+        client: true
       }
     },
     lang: {
@@ -88,5 +79,6 @@ var _config = {
 };
 
 // We purposely define the ConfigVikeSolid interface in this file: that way we ensure it's always applied whenever the user `import vikeSolid from 'vike-solid'`
+// https://vike.dev/pageContext#typescript
 
 export { _config as default };

package/dist/+onRenderClient.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, mergeProps, memo, hydrate, render } from 'solid-js/web';
+import { createComponent, Dynamic, memo, hydrate, render } from 'solid-js/web';
 import { P as PageContextProvider, u as usePageContext } from './PageContextProvider-OTjP33FZ.js';
 import { createStore, reconcile } from 'solid-js/store';
 import 'solid-js';
@@ -7,43 +7,21 @@ function isCallable(thing) {
   return thing instanceof Function || typeof thing === 'function';
 }
 
-/**
- * Get the page's title if defined, either from the additional data fetched by
- * the page's data() and onBeforeRender() hook or from the config.
- */
-function getTitle(pageContext) {
-  // from data() hook
-  if (pageContext.data?.title !== undefined) {
-    return pageContext.data.title;
-  }
-
-  // TODO/next-major-release: remove support for setting title over onBeforeRender()
-  // from onBeforeRender() hook
-  if (pageContext.title !== undefined) {
-    return pageContext.title;
-  }
-  const titleConfig = pageContext.configEntries.title?.[0];
-  if (!titleConfig) {
-    return null;
-  }
-  const title = titleConfig.configValue;
-  if (typeof title === "string") {
-    return title;
-  }
-  if (!title) {
-    return null;
-  }
-  const {
-    configDefinedAt
-  } = titleConfig;
-  if (isCallable(title)) {
-    const val = title(pageContext);
-    if (typeof val !== "string") {
-      throw new Error(configDefinedAt + " should return a string");
+function getHeadSetting(headSetting, pageContext) {
+  const config = pageContext.configEntries[headSetting]?.[0];
+  if (!config) return undefined;
+  const val = config.configValue;
+  if (typeof val === "string") return val;
+  if (!val) return null;
+  if (isCallable(val)) {
+    const valStr = val(pageContext);
+    if (typeof valStr !== "string") {
+      throw new Error(config.configDefinedAt + " should return a string");
     }
-    return val;
+    return valStr;
+  } else {
+    throw new Error(config.configDefinedAt + " should be a string or a function returning a string");
   }
-  throw new Error(configDefinedAt + " should be a string or a function returning a string");
 }
 
 function getPageElement(pageContext) {
@@ -72,50 +50,16 @@ function Layout(props) {
 }
 function Page() {
   const pageContext = usePageContext();
-  // TODO/next-major-release: remove pageProps (i.e. tell users to use data() instead of onBeforeRender() to fetch data)
-  return createComponent(Dynamic, mergeProps({
+  return createComponent(Dynamic, {
     get component() {
       return pageContext.Page;
     }
-  }, () => pageContext.pageProps ?? {}));
+  });
 }
 function Passthrough(props) {
   return memo(() => props.children);
 }
 
-/**
- * Get the page's lang if defined, either from the config, the additional data fetched by
- * the page's data() and onBeforeRender() hooks or from other hooks.
- */
-function getLang(pageContext) {
-  // from onBeforeRoute() hook & other hooks, e.g. onPrerenderStart() hook
-  if (pageContext.lang !== undefined) {
-    return pageContext.lang;
-  }
-  const langConfig = pageContext.configEntries.lang?.[0];
-  if (!langConfig) {
-    return null;
-  }
-  const lang = langConfig.configValue;
-  if (typeof lang === 'string') {
-    return lang;
-  }
-  if (!lang) {
-    return null;
-  }
-  const {
-    configDefinedAt
-  } = langConfig;
-  if (isCallable(lang)) {
-    const val = lang(pageContext);
-    if (typeof val !== 'string') {
-      throw new Error(configDefinedAt + ' should return a string');
-    }
-    return val;
-  }
-  throw new Error(configDefinedAt + ' should be a string or a function returning a string');
-}
-
 // https://vike.dev/onRenderClient
 const [pageContextStore, setPageContext] = createStore({});
 let dispose;
@@ -135,19 +79,37 @@ const onRenderClient = async pageContext => {
     }
     rendered = true;
   } else {
-    // Client routing
-    // See https://vike.dev/server-routing-vs-client-routing
+    // Client-side navigation
 
     setPageContext(reconcile(pageContext));
+    const title = getHeadSetting("title", pageContext) || "";
+    const lang = getHeadSetting("lang", pageContext) || "en";
+    const favicon = getHeadSetting("favicon", pageContext);
 
-    // Get the page's `title` config value, which may be different from the
-    // previous page. It can even be null, in which case we should unset the
-    // document title.
-    const title = getTitle(pageContext);
-    const lang = getLang(pageContext) || 'en';
-    document.title = title || "";
-    document.documentElement.lang = lang;
+    // We skip if the value is undefined because we shouldn't remove values set in HTML (by the Head setting).
+    //  - This also means that previous values will leak: upon client-side navigation, the title set by the previous
+    //    page won't be removed if the next page doesn't override it. But that's okay because usually pages always have
+    //    a favicon and title, which means that previous values are always overridden. Also, as a workaround, the user
+    //    can set the value to `null` to ensure that previous values are overridden.
+    if (title !== undefined) document.title = title;
+    if (lang !== undefined) document.documentElement.lang = lang;
+    if (favicon !== undefined) setFavicon(favicon);
   }
 };
 
+// https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
+function setFavicon(faviconUrl) {
+  let link = document.querySelector("link[rel~='icon']");
+  if (!faviconUrl) {
+    if (link) document.head.removeChild(link);
+    return;
+  }
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    document.head.appendChild(link);
+  }
+  link.href = faviconUrl;
+}
+
 export { onRenderClient };

package/dist/+onRenderHtml.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, mergeProps, renderToString, renderToStream, generateHydrationScript } from 'solid-js/web';
+import { createComponent, Dynamic, renderToString, renderToStream, generateHydrationScript } from 'solid-js/web';
 import { version, escapeInject, dangerouslySkipEscape, stampPipe } from 'vike/server';
 import { P as PageContextProvider, u as usePageContext } from './PageContextProvider-OTjP33FZ.js';
 import 'solid-js';
@@ -7,43 +7,21 @@ function isCallable(thing) {
   return thing instanceof Function || typeof thing === 'function';
 }
 
-/**
- * Get the page's title if defined, either from the additional data fetched by
- * the page's data() and onBeforeRender() hook or from the config.
- */
-function getTitle(pageContext) {
-  // from data() hook
-  if (pageContext.data?.title !== undefined) {
-    return pageContext.data.title;
-  }
-
-  // TODO/next-major-release: remove support for setting title over onBeforeRender()
-  // from onBeforeRender() hook
-  if (pageContext.title !== undefined) {
-    return pageContext.title;
-  }
-  const titleConfig = pageContext.configEntries.title?.[0];
-  if (!titleConfig) {
-    return null;
-  }
-  const title = titleConfig.configValue;
-  if (typeof title === "string") {
-    return title;
-  }
-  if (!title) {
-    return null;
-  }
-  const {
-    configDefinedAt
-  } = titleConfig;
-  if (isCallable(title)) {
-    const val = title(pageContext);
-    if (typeof val !== "string") {
-      throw new Error(configDefinedAt + " should return a string");
+function getHeadSetting(headSetting, pageContext) {
+  const config = pageContext.configEntries[headSetting]?.[0];
+  if (!config) return undefined;
+  const val = config.configValue;
+  if (typeof val === "string") return val;
+  if (!val) return null;
+  if (isCallable(val)) {
+    const valStr = val(pageContext);
+    if (typeof valStr !== "string") {
+      throw new Error(config.configDefinedAt + " should return a string");
     }
-    return val;
+    return valStr;
+  } else {
+    throw new Error(config.configDefinedAt + " should be a string or a function returning a string");
   }
-  throw new Error(configDefinedAt + " should be a string or a function returning a string");
 }
 
 function getPageElement(pageContext) {
@@ -72,61 +50,23 @@ function Layout(props) {
 }
 function Page() {
   const pageContext = usePageContext();
-  // TODO/next-major-release: remove pageProps (i.e. tell users to use data() instead of onBeforeRender() to fetch data)
-  return createComponent(Dynamic, mergeProps({
+  return createComponent(Dynamic, {
     get component() {
       return pageContext.Page;
     }
-  }, () => pageContext.pageProps ?? {}));
+  });
 }
 function Passthrough(props) {
   return props.children;
 }
 
-/**
- * Get the page's lang if defined, either from the config, the additional data fetched by
- * the page's data() and onBeforeRender() hooks or from other hooks.
- */
-function getLang(pageContext) {
-  // from onBeforeRoute() hook & other hooks, e.g. onPrerenderStart() hook
-  if (pageContext.lang !== undefined) {
-    return pageContext.lang;
-  }
-  const langConfig = pageContext.configEntries.lang?.[0];
-  if (!langConfig) {
-    return null;
-  }
-  const lang = langConfig.configValue;
-  if (typeof lang === 'string') {
-    return lang;
-  }
-  if (!lang) {
-    return null;
-  }
-  const {
-    configDefinedAt
-  } = langConfig;
-  if (isCallable(lang)) {
-    const val = lang(pageContext);
-    if (typeof val !== 'string') {
-      throw new Error(configDefinedAt + ' should return a string');
-    }
-    return val;
-  }
-  throw new Error(configDefinedAt + ' should be a string or a function returning a string');
-}
-
 checkVikeVersion();
 const onRenderHtml = async pageContext => {
-  const {
-    stream,
-    favicon,
-    description
-  } = pageContext.config;
-  const title = getTitle(pageContext);
+  const title = getHeadSetting("title", pageContext);
+  const favicon = getHeadSetting("favicon", pageContext);
+  const lang = getHeadSetting("lang", pageContext) || "en";
   const titleTag = !title ? "" : escapeInject`<title>${title}</title>`;
-  const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`;
-  const descriptionTag = !description ? '' : escapeInject`<meta name="description" content="${description}" />`;
+  const faviconTag = !favicon ? "" : escapeInject`<link rel="icon" href="${favicon}" />`;
   const Head = pageContext.config.Head || (() => []);
   const headHtml = renderToString(() => createComponent(PageContextProvider, {
     pageContext: pageContext,
@@ -134,24 +74,22 @@ const onRenderHtml = async pageContext => {
       return createComponent(Head, {});
     }
   }));
-  let pageView = '';
+  let pageView = "";
   if (!!pageContext.Page) {
-    if (!stream) {
+    if (!pageContext.config.stream) {
       pageView = dangerouslySkipEscape(renderToString(() => getPageElement(pageContext)));
     } else {
       pageView = renderToStream(() => getPageElement(pageContext)).pipe;
       stampPipe(pageView, "node-stream");
     }
   }
-  const lang = getLang(pageContext) || "en";
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang='${lang}'>
       <head>
         <meta charset="UTF-8" />
         ${titleTag}
-        ${faviconTag}
-        ${descriptionTag}
         ${dangerouslySkipEscape(headHtml)}
+        ${faviconTag}
         ${dangerouslySkipEscape(generateHydrationScript())}
       </head>
       <body>
@@ -163,12 +101,12 @@ const onRenderHtml = async pageContext => {
 };
 function checkVikeVersion() {
   if (version) {
-    const versionParts = version.split('.').map(s => parseInt(s, 10));
+    const versionParts = version.split(".").map(s => parseInt(s, 10));
     if (versionParts[0] > 0) return;
     if (versionParts[1] > 4) return;
     if (versionParts[2] >= 147) return;
   }
-  throw new Error('Update Vike to its latest version (or vike@0.4.147 and any version above)');
+  throw new Error("Update Vike to 0.4.147 or above");
 }
 
 export { onRenderHtml };

package/dist/renderer/+config.d.ts

@@ -1,21 +1,11 @@
 import { PageContext, ConfigEffect } from 'vike/types';
 import { JSX, Component } from 'solid-js';
 
-type Page = (pageProps: PageProps) => JSX.Element;
-type PageProps = Record<string, unknown>;
+type Page = () => JSX.Element;
 declare global {
     namespace Vike {
         interface PageContext {
             Page?: Page;
-            /** Properties of the page's root Solid component - e.g. set by onBeforeRender() hook */
-            pageProps?: Record<string, unknown>;
-            /** &lt;title>${title}&lt;/title> - set by onBeforeRender() hook, has precedence over the config */
-            title?: string;
-            lang?: string;
-            data?: {
-                /** &lt;title>${title}&lt;/title> - set by data() hook, has precedence over the onBeforeRender() hook */
-                title?: string;
-            };
         }
     }
 }
@@ -23,7 +13,6 @@ declare global {
 declare const _default: {
     onRenderHtml: "import:vike-solid/renderer/onRenderHtml:onRenderHtml";
     onRenderClient: "import:vike-solid/renderer/onRenderClient:onRenderClient";
-    passToClient: string[];
     clientRouting: true;
     hydrationCanBeAborted: true;
     meta: {
@@ -44,14 +33,10 @@ declare const _default: {
                 client: true;
             };
         };
-        description: {
-            env: {
-                server: true;
-            };
-        };
         favicon: {
             env: {
                 server: true;
+                client: true;
             };
         };
         lang: {
@@ -84,7 +69,6 @@ declare global {
             /** A component, usually common to several pages, that wraps the root component `Page` */
             Layout?: Component;
             title?: string | ((pageContext: PageContext) => string);
-            description?: string;
             favicon?: string;
             /**
              * @default 'en'

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "vike-solid",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "type": "module",
   "dependencies": {
-    "vite-plugin-solid": "^2.8.0"
+    "vite-plugin-solid": "^2.9.1"
   },
   "peerDependencies": {
     "solid-js": "^1.8.7",
     "vite": "^4.4 || ^5.0.2",
-    "vike": "^0.4.152"
+    "vike": "^0.4.159"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
@@ -17,15 +17,15 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/node": "^18.17.4",
-    "babel-preset-solid": "^1.8.9",
-    "bumpp": "^9.2.1",
-    "rollup": "^4.9.5",
+    "babel-preset-solid": "^1.8.12",
+    "bumpp": "^9.3.0",
+    "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
-    "solid-js": "^1.8.11",
+    "solid-js": "^1.8.12",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vike": "^0.4.156"
+    "vite": "^5.0.12",
+    "vike": "^0.4.160"
   },
   "exports": {
     ".": "./dist/+config.js",