feat: Svelte 5 SSR support - experimental

examples/starter-basic/vite.config.js

@@ -11,7 +11,9 @@ export default defineConfig({
     clearScreen: false,
     resolve: { alias: { '@': resolve('src') } },
     plugins: [
-        routify({ render: { ssr: { enable: production }, ssg: { enable: production } } }),
+        routify({
+            render: { ssr: production, ssg: production },
+        }),
         svelte({
             compilerOptions: {
                 dev: !production,

examples/starter-svelte-5/src/main.js

@@ -1,6 +1,6 @@
-import { mount } from 'svelte'
+import { hydrate } from 'svelte'
 import App from './App.svelte'
 
-mount(App, {
+hydrate(App, {
     target: document.body,
 })

examples/starter-svelte-5/src/routes/hello-world.svelte

@@ -1 +1,3 @@
 <h1>Hello world!</h1>
+
+<a href="/">Back</a>

examples/starter-svelte-5/vite.config.js

@@ -8,7 +8,12 @@ export default defineConfig({
     clearScreen: false,
 
     plugins: [
-        routify({}),
+        routify({
+            render: {
+                ssg: !!production,
+                ssr: !!production,
+            },
+        }),
         svelte({
             compilerOptions: {
                 dev: !production,

lib/buildtime/RoutifyBuildtime.js

@@ -6,7 +6,13 @@ import { filemapperPlugin } from './plugins/filemapper/index.js'
 import { metaFromFilePlugin } from './plugins/metaFromFile/index.js'
 import { namedModulePlugin } from './plugins/namedModule/index.js'
 import { watcherPlugin } from './plugins/watcher/index.js'
-import { hashObj, resolvePlugins, split, writeFileIfDifferent } from './utils.js'
+import {
+    getSvelteVersion,
+    hashObj,
+    resolvePlugins,
+    split,
+    writeFileIfDifferent,
+} from './utils.js'
 import { configent } from 'configent'
 import { metaSplitPlugin } from './plugins/metaSplit/index.js'
 import { metaPersistPlugin } from './plugins/metaPersist/index.js'
@@ -52,6 +58,7 @@ const getDefaults = () => ({
         omitDirFromPathPlugin,
         themesPlugin,
     ],
+    svelteApi: getSvelteVersion().startsWith('5') ? 5 : 4,
     watch: false,
 })
 

lib/buildtime/plugins/exporter/exporter.js

@@ -95,9 +95,10 @@ export const exportSitemap = async rootNode => {
  * @param {RelativePaths} relativePaths
  */
 export const exportRender = async (instance, relativePaths) => {
+    const svelteVersion = instance.options.svelteApi
     const body = `
         import * as module from '${relativePaths.rootComponent}'
-        import { renderModule } from '@roxi/routify/tools'
+        import { renderModule } from '@roxi/routify/tools/ssr${svelteVersion}.js'
         import { map } from './route-map.js'
 
         export const render = url => renderModule(module, { url, routesMap: map })`

lib/buildtime/utils.js

@@ -2,6 +2,9 @@ import fse from 'fs-extra'
 import { fileURLToPath } from 'url'
 import { dirname, resolve, relative } from 'path'
 import { mkdirSync, existsSync, readFileSync } from 'fs'
+import { createRequire } from 'module'
+
+const require = createRequire(import.meta.url) // Create a CommonJS-like `require`
 
 export const relativeUnix = (path, path2) => relative(path, path2).replace(/\\/g, '/')
 
@@ -143,3 +146,20 @@ export const hashObj = val => {
  */
 export const deepSet = (t, p, ...v) =>
     v.length > 1 ? (t[p] = t[p] || {}) && deepSet(t[p], ...v) : (t[p] = v[0])
+
+export function getSvelteVersion() {
+    try {
+        // Resolve the project root dynamically
+        const projectRoot = process.cwd()
+
+        // Resolve the `svelte/package.json` relative to the project root
+        const sveltePath = require.resolve('svelte/package.json', {
+            paths: [projectRoot],
+        })
+        const packageJson = JSON.parse(fse.readFileSync(sveltePath, 'utf-8'))
+        return packageJson.version
+    } catch (e) {
+        console.error('Error resolving Svelte version:', e)
+        return null
+    }
+}

lib/extra/tools/ssr.js → lib/extra/tools/ssr4.js

@@ -14,7 +14,7 @@ const polyfillFetch = async () => {
 }
 
 /**
- * Returns a statically rendered Routify app
+ * Returns a statically rendered Routify app - uses Svelte 3 - 4
  * @param {(SvelteComponentDev|{default: SvelteComponentDev}) & {load: (url:string)=>Promise<any>}} module App.svelte
  * @param {string | string[] | import('../../runtime').PreloadOptions=} urlOrOptions one or multiple urls separated by ";<routerName>="
  *  @returns {Promise<{

lib/extra/tools/ssr5.js

@@ -0,0 +1,47 @@
+import { render } from 'svelte/server'
+import { preloadUrl } from '../../runtime/index.js'
+
+const polyfillFetch = async () => {
+    const fetch = await import('node-fetch')
+
+    // @ts-ignore
+    globalThis.fetch = fetch.default
+    // @ts-ignore
+    globalThis.Headers = fetch.Headers
+    // @ts-ignore
+    globalThis.Request = fetch.Request
+    // @ts-ignore
+    globalThis.Response = fetch.Response
+}
+
+/**
+ * Returns a statically rendered Routify app - uses Svelte 5
+ * @param {(SvelteComponentDev|{default: SvelteComponentDev}) & {load: (url:string)=>Promise<any>}} module App.svelte
+ * @param {string | string[] | import('../../runtime').PreloadOptions=} urlOrOptions one or multiple urls separated by ";<routerName>="
+ *  @returns {Promise<{
+ *   html: string,
+ *   status: number,
+ *   css: { code: string, map: string },
+ *   head: '',
+ *   error: string,
+ *   maxage: number,
+ *   props: Object.<string, string>,
+ *   redirect: string
+ * }>}
+ */
+export const renderModule = async (module, urlOrOptions) => {
+    await polyfillFetch()
+    // const render = module.default?.render || module['render']
+
+    const url = urlOrOptions.url || urlOrOptions
+    const load = module.load ? await module.load(url) : {}
+
+    const preloadUrlLoad = await preloadUrl(urlOrOptions)
+
+    return {
+        status: 200,
+        ...(await render(module.default)),
+        ...load,
+        ...preloadUrlLoad?.flat()[0],
+    }
+}

lib/extra/vite-plugin/assets/cjsRenderer.js

@@ -30,7 +30,7 @@ const render = async (path = '/') => {
     const html = template
         .replace('<!--ssr:html-->', output.html)
         .replace('<!--ssr:head-->', output.head)
-        .replace('<!--ssr:css-->', '<style>' + output.css.code + '</style>')
+        .replace('<!--ssr:css-->', '<style>' + output.css?.code || '' + '</style>')
     return html
 }
 

lib/extra/vite-plugin/assets/esmRenderer.js

@@ -39,7 +39,7 @@ export const render = async (path = '/') => {
     const html = template
         .replace('<!--ssr:html-->', output.html)
         .replace('<!--ssr:head-->', output.head)
-        .replace('<!--ssr:css-->', '<style>' + output.css.code + '</style>')
+        .replace('<!--ssr:css-->', '<style>' + output.css?.code || '' + '</style>')
     return { ...output, html }
 }
 

lib/extra/vite-plugin/devServer.js

@@ -31,7 +31,10 @@ export const devServer = (server, options) => () =>
             const html = template
                 .replace('<!--ssr:html-->', output.html)
                 .replace('<!--ssr:head-->', output.head)
-                .replace('<!--ssr:css-->', '<style>' + output.css.code + '</style>')
+                .replace(
+                    '<!--ssr:css-->',
+                    '<style>' + output.css?.code || '' + '</style>',
+                )
 
             res.setHeader('Content-Type', 'text/html')
 

lib/extra/vite-plugin/vite-plugin.js

@@ -38,7 +38,7 @@ export default function RoutifyPlugin(input = {}) {
             isSsr = !!cfg.build?.ssr
             if (isSsr) {
                 // cfg.ssr.noExternal = true
-                cfg.ssr.target = 'webworker'
+                // cfg.ssr.target = 'webworker' // disabled for Svelte 5
             }
 
             options.routifyDir ||= './.routify'
@@ -54,7 +54,10 @@ export default function RoutifyPlugin(input = {}) {
                     },
                 },
                 build: {
-                    ssr: cfg.build?.ssr === true ? `${options.routifyDir}/render.js` : cfg.build?.ssr,
+                    ssr:
+                        cfg.build?.ssr === true
+                            ? `${options.routifyDir}/render.js`
+                            : cfg.build?.ssr,
                     outDir: `${options.outDir}/${cfg.build?.ssr ? 'server' : 'client'}`,
                 },
                 envPrefix: ['VITE_', 'ROUTIFY_SSR_ENABLE'],

package.json

@@ -67,6 +67,7 @@
             "types": "./typings/lib/extra/tools/ssr.d.ts",
             "default": "./lib/extra/tools/index.js"
         },
+        "./tools/*": "./lib/extra/tools/*",
         "./components/*": "./lib/runtime/components/*"
     },
     "scripts": {
@@ -98,7 +99,7 @@
         "rollup": "^3.3.0",
         "rollup-plugin-svelte": "^7.1.0",
         "semantic-release": "^17.4.7",
-        "spank": "^2.0.0",
+        "spank": "^2.1.0",
         "spassr": "^2.6.0",
         "svelte-esm-loader": "^0.0.3",
         "tree-kill": "^1.2.2",

types/typedef.js

@@ -66,6 +66,7 @@
  * @prop {string[]} filemapper.fallbackFiles defaults to ['_reset.svelte']
  * @prop {(string|RegExp)[]} extensions defaults to ['.svelte', '.html', '.md', '.svx'],
  * @prop {string[]|Object[]} plugins
+ * @prop {4|5} svelteApi defaults to 4
  * @prop {boolean} watch rebuild Routify routes on changes
  * @prop {ThemeConfig} themes
  */

typings/lib/buildtime/plugins/filemapper/lib/File.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 export class File {
     constructor(path: any);
     path: string;

typings/lib/buildtime/plugins/filemapper/lib/utils/createRoot404.d.ts

@@ -1 +1 @@
-export function createRoot404(rootNode: import("../../../../../common/RNode.js").RNode<any>, routifyDir: any): void;
+export function createRoot404(rootNode: RNode, routifyDir: any): void;

typings/lib/buildtime/plugins/themes/themes.d.ts

@@ -1,9 +1,9 @@
 export function themes({ instance }: {
     instance: any;
 }): Promise<void>;
-export function createThemedRootNodes(instance: RoutifyBuildtime, config: import('./utils.js').ThemeConfig): void;
+export function createThemedRootNodes(instance: RoutifyBuildtime, config: import("./utils.js").ThemeConfig): void;
 export function createThemedRootNode(instance: RoutifyBuildtime, name: any, themePreferenceGroups: (string[] | string)[], rootNodeName: any): void;
 export function nodeMatchesThemes(node: any, themes: any): any;
 export function copyNodeToTheme(rootNode: any): (node: any) => void;
-export function copyNode(node: import("../../../common/RNode.js").RNode<any>, rootNode: any, location?: string): void;
-export function tagNodeThemes(node: import("../../../common/RNode.js").RNode<any>): void;
+export function copyNode(node: RNode, rootNode: any, location?: string): void;
+export function tagNodeThemes(node: RNode): void;

typings/lib/buildtime/plugins/themes/utils.d.ts

@@ -45,7 +45,7 @@ export type ThemeUserPresetObject = {
      */
     rootNodes?: string[];
 };
-export type ThemeUserPreset = (string | string[])[] | ThemeUserPresetObject;
+export type ThemeUserPreset = ThemeUserHierarchy | ThemeUserPresetObject;
 export type ThemePreset = {
     /**
      * - The normalized hierarchy for themes.

typings/lib/buildtime/utils.d.ts

@@ -1,3 +1,4 @@
+export function getSvelteVersion(): any;
 export function relativeUnix(path: any, path2: any): string;
 export function createDirname(meta: any): string;
 export function stringifyWithEscape(obj: any): string;

typings/lib/common/RNode.d.ts

@@ -7,7 +7,7 @@ export class RNode<InstanceType extends import("./Routify").Routify<any>> {
      */
     constructor(name: string, module: ReservedCmpProps | string, instance: InstanceType);
     /** @type {InstanceType['NodeType']} */
-    parent: InstanceType['NodeType'];
+    parent: InstanceType["NodeType"];
     /** @type {Object.<string, any>} */
     meta: {
         [x: string]: any;
@@ -23,7 +23,7 @@ export class RNode<InstanceType extends import("./Routify").Routify<any>> {
         storage: Map<any, any>;
     };
     /** @param {InstanceType['NodeConstructor']['prototype']} child */
-    appendChild(child: InstanceType['NodeConstructor']['prototype']): void;
+    appendChild(child: InstanceType["NodeConstructor"]["prototype"]): void;
     /**
      * Creates a new child node
      * Same as `node.appendChild(instance.createNode('my-node'))`
@@ -81,9 +81,9 @@ export class RNode<InstanceType extends import("./Routify").Routify<any>> {
      * Example: /home -> /home/main -> /home/main/index
      * @param {'children'|'navigableChildren'} childType
      */
-    getDefaults(childType?: 'children' | 'navigableChildren'): any[];
+    getDefaults(childType?: "children" | "navigableChildren"): any[];
     /** @returns {InstanceType['NodeConstructor']['prototype']} */
-    toJSON(): InstanceType['NodeConstructor']['prototype'];
+    toJSON(): InstanceType["NodeConstructor"]["prototype"];
     /** @returns {string} */
     get path(): string;
 }

typings/lib/common/Routify.d.ts

@@ -5,22 +5,20 @@ export class Routify<NodeConstructor extends typeof RNode<any>> {
     /** @type {typeof RNode<any>} */
     NodeConstructor: typeof RNode<any>;
     /** @type {NodeConstructor['prototype']} */
-    NodeType: NodeConstructor['prototype'];
+    NodeType: NodeConstructor["prototype"];
     /** @type {NodeConstructor['prototype'][]} */
-    nodeIndex: NodeConstructor['prototype'][];
+    nodeIndex: NodeConstructor["prototype"][];
     /** @type {Object<string, NodeConstructor['prototype']>} */
     rootNodes: {
-        [x: string]: NodeConstructor['prototype'];
+        [x: string]: NodeConstructor["prototype"];
     };
     utils: UrlParamUtils;
     /**
      * @param {string=} name relative path for the node
      * @param {any|string=} module svelte component
      * @returns {this['NodeType']}
      */
-    createNode(name?: string | undefined, module?: (any | string) | undefined): this['NodeType'];
+    createNode(name?: string | undefined, module?: (any | string) | undefined): this["NodeType"];
 }
 import { RNode } from './RNode.js';
-declare var NodeConstructor: typeof RNode<any>;
 import { UrlParamUtils } from '../runtime/Instance/UrlParamUtils.js';
-export {};

typings/lib/common/helpers.d.ts

@@ -1,3 +1,3 @@
 export function assignNode(target: RNodeRuntime, ...sources: RNodeRuntime[]): RNodeRuntime;
-export function findNearestParent(node: RNodeRuntime, callback: (arg0: RNodeRuntime['parent']) => any): RNodeRuntime['parent'] | undefined;
+export function findNearestParent(node: RNodeRuntime, callback: (arg0: RNodeRuntime["parent"]) => any): RNodeRuntime["parent"] | undefined;
 export function getDistance(parentNode: RNodeRuntime, childNode: RNodeRuntime): number | undefined;

typings/lib/common/utils.d.ts

@@ -13,13 +13,13 @@ export function deepAssign<T extends {}, T2 extends {}>(receiver: T, ...sources:
 export function sortPlugins(plugins: RoutifyBuildtimePlugin[]): RoutifyBuildtimePlugin[];
 export function isObjectOrArray(v: any): boolean;
 export function normalizePlugins(plugins: RoutifyBuildtimePlugin[]): RoutifyBuildtimePlugin[];
-export function mockRoutes<T extends import("../buildtime/RoutifyBuildtime").RoutifyBuildtime | import("../runtime/Instance/RoutifyRuntime").RoutifyRuntime>(instance: T, routes: {
+export function mockRoutes<T extends RoutifyBuildtime | RoutifyRuntime>(instance: T, routes: {
     [x: string]: any;
 }): import("../buildtime/RNodeBuildtime").RNodeBuildtime | import("../runtime/Instance/RNodeRuntime").RNodeRuntime;
 export function addPropsToComp<Component extends typeof import("svelte/internal").SvelteComponentDev>(Comp: Component, props: {
     [x: string]: any;
 }): Component;
-export function next<T extends import("svelte/store").Readable<V>, V>(store: T, wanted?: V | ((wanted: V) => boolean), strict?: boolean | undefined): Promise<V>;
+export function next<T extends import("svelte/store").Readable<V>, V>(store: T, wanted?: (((wanted: V) => boolean) | V) | undefined, strict?: boolean | undefined): Promise<V>;
 export function throttle(fn: any, hash: any): Promise<void>;
 export function lazySet(store: any, value: any): any;
 export function jsonClone(obj: any): any;

typings/lib/extra/express-plugin/index.d.ts

@@ -4,5 +4,5 @@ export type Options = {
     /**
      * Vite config
      */
-    viteServerConfig?: import('vite').InlineConfig;
+    viteServerConfig?: import("vite").InlineConfig;
 };

typings/lib/extra/tools/ssr4.d.ts

@@ -0,0 +1,20 @@
+export function dynamicImport(specifier: any): Promise<any>;
+export function renderModule(module: (SvelteComponentDev | {
+    default: SvelteComponentDev;
+}) & {
+    load: (url: string) => Promise<any>;
+}, urlOrOptions?: (string | string[] | import("../../runtime").PreloadOptions) | undefined): Promise<{
+    html: string;
+    status: number;
+    css: {
+        code: string;
+        map: string;
+    };
+    head: "";
+    error: string;
+    maxage: number;
+    props: {
+        [x: string]: string;
+    };
+    redirect: string;
+}>;

typings/lib/extra/tools/ssr5.d.ts

@@ -0,0 +1,19 @@
+export function renderModule(module: (SvelteComponentDev | {
+    default: SvelteComponentDev;
+}) & {
+    load: (url: string) => Promise<any>;
+}, urlOrOptions?: (string | string[] | import("../../runtime").PreloadOptions) | undefined): Promise<{
+    html: string;
+    status: number;
+    css: {
+        code: string;
+        map: string;
+    };
+    head: "";
+    error: string;
+    maxage: number;
+    props: {
+        [x: string]: string;
+    };
+    redirect: string;
+}>;