@forgebook/sveltekit 0.0.0-stage → 0.2.0

package/dist/src/vite/kitProject.js

@@ -0,0 +1,176 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+/**
+ * A SvelteKit project, as the catalogue reads it: SvelteKit's options, from the project's own Vite configuration
+ * (SvelteKit 3 keeps them there) or from `svelte.config.js` (SvelteKit 2), and the project's other Vite plugins.
+ *
+ * @remarks
+ * The project's `vite.config` is loaded, not run as a server: SvelteKit's plugin, made there, holds the options it read
+ * and checked (`api.options`), whichever version wrote them, so the catalogue reads what SvelteKit itself does. Its own
+ * plugins are left out, since they build an app; the project's other plugins (Tailwind CSS, an i18n compiler) are kept,
+ * so its components are drawn as the app draws them.
+ *
+ * @module
+ */
+import { existsSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { loadConfigFromFile } from "vite";
+/** SvelteKit's plugin that holds the options it read. */
+const SETUP_PLUGIN = "vite-plugin-sveltekit-setup";
+/**
+ * The plugins SvelteKit's `sveltekit()` makes: its own (any whose name says SvelteKit, so one it adds later is left out
+ * too, its environment's among them), and Svelte's, which the catalogue makes itself.
+ */
+const KIT_PLUGIN = /sveltekit|^vite-plugin-svelte([-:]|$)/;
+/** The names `svelte.config` may have, in the order SvelteKit 2 looks for them. */
+const SVELTE_CONFIGS = ["svelte.config.js", "svelte.config.mjs", "svelte.config.ts", "svelte.config.mts"];
+/** The options of Svelte's Vite plugin read from SvelteKit's. */
+const SVELTE_KEYS = ["preprocess", "compilerOptions", "extensions"];
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** Whether a value is one of Vite's plugins. */
+const isPlugin = (value) => isRecord(value) && typeof value["name"] === "string";
+/**
+ * A configuration's plugins as one list: Vite takes nested lists and promises of plugins.
+ *
+ * @param plugins - the plugins, as the configuration writes them.
+ */
+const flatPlugins = async (plugins) => {
+    const value = await plugins;
+    if (Array.isArray(value))
+        return (await Promise.all(value.map(flatPlugins))).flat();
+    return isPlugin(value) ? [value] : [];
+};
+/**
+ * SvelteKit's options held by its setup plugin.
+ *
+ * @param plugins - the project's plugins.
+ */
+const setupOptions = (plugins) => {
+    const setup = plugins.find((plugin) => plugin.name === SETUP_PLUGIN);
+    const api = setup?.api;
+    return isRecord(api) && isRecord(api["options"]) ? api["options"] : undefined;
+};
+/**
+ * The options of Svelte's Vite plugin a SvelteKit configuration gives, read as they are: Svelte's plugin reads no
+ * `svelte.config.js` then, since the configuration was it.
+ *
+ * @param options - SvelteKit's options, or `svelte.config.js`'s default export.
+ */
+const svelteOptionsOf = (options) => ({
+    configFile: false,
+    ...Object.fromEntries(SVELTE_KEYS.filter((key) => options[key] !== undefined).map((key) => [key, options[key]]))
+});
+/**
+ * SvelteKit's options from a SvelteKit 2 `svelte.config.js`, loaded as Node loads a module.
+ *
+ * @param dir - the project's folder.
+ */
+const svelteConfigOptions = async (dir) => {
+    const file = SVELTE_CONFIGS.map((name) => join(dir, name)).find((path) => existsSync(path));
+    if (file === undefined)
+        return { kit: {}, config: {}, problem: undefined };
+    try {
+        const loaded = await import(__rewriteRelativeImportExtension(pathToFileURL(file).href));
+        const config = isRecord(loaded) && isRecord(loaded["default"]) ? loaded["default"] : {};
+        return { kit: isRecord(config["kit"]) ? config["kit"] : {}, config, problem: undefined };
+    }
+    catch (error) {
+        return {
+            kit: {},
+            config: {},
+            problem: `${file} could not be loaded: ${error instanceof Error ? error.message : String(error)}`
+        };
+    }
+};
+/**
+ * The extensions of a project's Svelte components, from Svelte's options: `.svelte` by default.
+ *
+ * @param options - SvelteKit's options, or `svelte.config.js`'s default export.
+ */
+const extensionsOf = (options) => {
+    const { extensions } = options;
+    const listed = Array.isArray(extensions) ? extensions.filter((item) => typeof item === "string") : [];
+    return listed.length === 0 ? [".svelte"] : listed;
+};
+/**
+ * What is wrong with a SvelteKit 3 project `svelte-kit sync` has not run in: its `tsconfig.json` extends
+ * `$app/tsconfig`, which the command writes, so every module of the catalogue fails to compile without it.
+ *
+ * @param root - the project's folder.
+ * @param version - SvelteKit's major version.
+ * @param problem - what was found wrong before.
+ */
+const syncedProblem = (root, version, problem) => {
+    const isSynced = version === 2 || existsSync(join(root, "node_modules", "$app", "tsconfig.json"));
+    return {
+        problem: problem ??
+            (isSynced
+                ? undefined
+                : "SvelteKit has not written its types: run `svelte-kit sync` first (SvelteKit's templates run it on install, as `prepare`), since the project's tsconfig.json extends $app/tsconfig")
+    };
+};
+/**
+ * The plugins a project's Vite configuration writes, loaded as `vite dev` loads it.
+ *
+ * @param root - the project's folder.
+ * @param viteConfig - the configuration, from the folder; the one Vite would find by default; `false` reads none.
+ * @returns the plugins as written, and why the configuration could not be loaded.
+ */
+const viteConfigPlugins = async (root, viteConfig) => {
+    if (viteConfig === false)
+        return { plugins: [], problem: undefined };
+    try {
+        const loaded = await loadConfigFromFile({ command: "serve", mode: "development" }, viteConfig === undefined ? undefined : resolve(root, viteConfig), root, "silent");
+        return { plugins: loaded?.config.plugins, problem: undefined };
+    }
+    catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        return { plugins: [], problem: `The project's Vite configuration could not be loaded: ${reason}` };
+    }
+};
+/**
+ * Reads a SvelteKit project.
+ *
+ * @param dir - the project's folder.
+ * @param viteConfig - its Vite configuration, from the folder; the one Vite would find by default; `false` reads none.
+ * @param keepPlugin - whether to keep one of the project's own plugins; every one by default.
+ */
+export const loadKitProject = async (dir, viteConfig, keepPlugin = () => true) => {
+    const root = resolve(dir);
+    const { plugins: written, problem } = await viteConfigPlugins(root, viteConfig);
+    const plugins = await flatPlugins(written);
+    const options = setupOptions(plugins);
+    const others = plugins.filter((plugin) => !KIT_PLUGIN.test(plugin.name) && keepPlugin(plugin));
+    // SvelteKit 2's options hold SvelteKit's under `kit`, beside Svelte's; SvelteKit 3's are SvelteKit's alone
+    if (options !== undefined) {
+        const kit = options["kit"];
+        const version = isRecord(kit) ? 2 : 3;
+        return {
+            ...syncedProblem(root, version, problem),
+            dir: root,
+            kit: isRecord(kit) ? kit : options,
+            version,
+            extensions: extensionsOf(options),
+            svelte: svelteOptionsOf(options),
+            plugins: others
+        };
+    }
+    const fromSvelteConfig = await svelteConfigOptions(root);
+    return {
+        dir: root,
+        kit: fromSvelteConfig.kit,
+        version: 2,
+        extensions: extensionsOf(fromSvelteConfig.config),
+        svelte: undefined,
+        plugins: others,
+        problem: problem ?? fromSvelteConfig.problem
+    };
+};

package/dist/src/vite/projectFiles.d.ts

@@ -0,0 +1,14 @@
+import type { AppRoute } from "../appSettings.ts";
+/**
+ * The routes of a project's routes folder: every folder with a page or an endpoint.
+ *
+ * @param routesDir - the routes folder (`src/routes`).
+ * @param extensions - the extensions of the project's Svelte components (`.svelte`).
+ */
+export declare const projectRoutes: (routesDir: string, extensions: readonly string[]) => AppRoute[];
+/**
+ * The files of a project's static folder, as paths from it.
+ *
+ * @param staticDir - the folder (`static`).
+ */
+export declare const projectStaticFiles: (staticDir: string) => string[];

package/dist/src/vite/projectFiles.js

@@ -0,0 +1,70 @@
+/**
+ * The routes and static files of a SvelteKit project, read from its folders: what `$app/state` matches a story's
+ * address against, and what `$app/manifest` lists.
+ *
+ * @module
+ */
+import { existsSync, readdirSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+/** A route's page: `+page.svelte`, or another extension the project compiles as Svelte. */
+const PAGE_FILE = /^\+page(@[^.]*)?\.[^.]+$/;
+/** A route's endpoint: `+server.js` or `+server.ts`. */
+const SERVER_FILE = /^\+server\.[cm]?[jt]s$/;
+/** The most static files listed: a folder of thousands of images is listed no further. */
+const MOST_STATIC_FILES = 5000;
+/**
+ * A folder's path from another, written with `/`.
+ *
+ * @param from - the folder it is relative to.
+ * @param path - the path.
+ */
+const slashed = (from, path) => relative(from, path).split(sep).join("/");
+/**
+ * The routes of a project's routes folder: every folder with a page or an endpoint.
+ *
+ * @param routesDir - the routes folder (`src/routes`).
+ * @param extensions - the extensions of the project's Svelte components (`.svelte`).
+ */
+export const projectRoutes = (routesDir, extensions) => {
+    if (!existsSync(routesDir))
+        return [];
+    const routes = [];
+    const visit = (dir) => {
+        const entries = readdirSync(dir, { withFileTypes: true });
+        const files = entries.filter((entry) => entry.isFile()).map((entry) => entry.name);
+        const page = files.some((file) => PAGE_FILE.test(file) && extensions.some((extension) => file.endsWith(extension)));
+        const endpoint = files.some((file) => SERVER_FILE.test(file));
+        if (page || endpoint) {
+            const path = slashed(routesDir, dir);
+            routes.push({ id: path === "" ? "/" : `/${path}`, page, endpoint });
+        }
+        for (const entry of entries)
+            if (entry.isDirectory())
+                visit(join(dir, entry.name));
+    };
+    visit(routesDir);
+    return routes.sort((first, second) => first.id.localeCompare(second.id));
+};
+/**
+ * The files of a project's static folder, as paths from it.
+ *
+ * @param staticDir - the folder (`static`).
+ */
+export const projectStaticFiles = (staticDir) => {
+    if (!existsSync(staticDir))
+        return [];
+    const files = [];
+    const visit = (dir) => {
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+            if (files.length >= MOST_STATIC_FILES)
+                return;
+            const path = join(dir, entry.name);
+            if (entry.isDirectory())
+                visit(path);
+            else if (entry.isFile())
+                files.push(slashed(staticDir, path));
+        }
+    };
+    visit(staticDir);
+    return files.sort();
+};

package/dist/src/vite/sveltekit.d.ts

@@ -0,0 +1,26 @@
+import type { FrameworkAdapter } from "forgebook/vite/adapter";
+import type { Plugin } from "vite";
+/** The options of `sveltekit()`. */
+export type SveltekitOptions = {
+    /** The SvelteKit project's folder; the folder the command runs in by default. */
+    readonly dir?: string;
+    /**
+     * The project's Vite configuration, from its folder, where SvelteKit 3 keeps its options; the one Vite would find
+     * by default; `false` reads none (SvelteKit 2's `svelte.config.js` is read then, and the project's other plugins
+     * are left out).
+     */
+    readonly viteConfig?: string | false;
+    /**
+     * Whether to keep one of the app's own Vite plugins (SvelteKit's are always left out); every one by default. A
+     * catalogue runs them as `vite dev` would, its build too: leave out one that only an app's build needs (a source-map
+     * upload, a service-worker generator).
+     */
+    readonly keepPlugin?: (plugin: Plugin) => boolean;
+};
+/**
+ * SvelteKit, as the plugin reads and draws its components.
+ *
+ * @param options - the project's folder and its Vite configuration.
+ * @returns the adapter.
+ */
+export declare const sveltekit: (options?: SveltekitOptions) => FrameworkAdapter;

package/dist/src/vite/sveltekit.js

@@ -0,0 +1,39 @@
+/**
+ * Forgebook's adapter for SvelteKit, for the Vite plugin: `defineConfig({ framework: sveltekit() })`.
+ *
+ * @remarks
+ * SvelteKit is Svelte: the props are read as Svelte's, and the stories drawn with Svelte's renderer, wrapped so each
+ * has its page, its data and its links (`@forgebook/sveltekit/frame`). What SvelteKit adds is Vite's work: Svelte's
+ * plugin with the project's own Svelte options, the project's other plugins, and this package's plugin for SvelteKit's
+ * modules, aliases and environment (`kitPlugin.ts`). SvelteKit's own plugins are left out: they build an app, and a
+ * catalogue draws components.
+ *
+ * @module
+ */
+import { extname } from "node:path";
+import { svelte } from "@forgebook/svelte/vite";
+import { kitPlugin } from "./kitPlugin.js";
+import { loadKitProject } from "./kitProject.js";
+/**
+ * SvelteKit, as the plugin reads and draws its components.
+ *
+ * @param options - the project's folder and its Vite configuration.
+ * @returns the adapter.
+ */
+export const sveltekit = (options = {}) => {
+    const base = svelte();
+    return {
+        name: "sveltekit",
+        // beside this module, with its extension: `.ts` in the sources, `.js` once built for npm
+        docsModule: new URL(`./extractDocs${extname(import.meta.url)}`, import.meta.url).href,
+        // the catalogue imports this package only: its own pages, which use Svelte's
+        pages: { frame: "@forgebook/sveltekit/frame", code: "@forgebook/sveltekit/code" },
+        browserDependencies: base.browserDependencies ?? [],
+        ...(base.componentFiles === undefined ? {} : { componentFiles: base.componentFiles }),
+        vitePlugins: async () => {
+            const project = await loadKitProject(options.dir ?? process.cwd(), options.viteConfig, options.keepPlugin);
+            const withSvelte = project.svelte === undefined ? base : svelte({ plugin: project.svelte });
+            return [...((await withSvelte.vitePlugins?.()) ?? []), ...project.plugins, kitPlugin(project)];
+        }
+    };
+};

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@forgebook/sveltekit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Forgebook for SvelteKit: a SvelteKit project's components drawn outside the app, with $app/state, $app/navigation, $app/forms, $app/paths, the environment and a page's load, on Vite.",
+  "keywords": [
+    "sveltekit",
+    "svelte",
+    "catalogue",
+    "stories"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ensiria/forgebook.git",
+    "directory": "packages/sveltekit"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.18"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/src/stories.d.ts",
+      "default": "./dist/src/stories.js"
+    },
+    "./code": {
+      "types": "./dist/src/storyCode.d.ts",
+      "default": "./dist/src/storyCode.js"
+    },
+    "./docs": {
+      "types": "./dist/src/vite/extractDocs.d.ts",
+      "default": "./dist/src/vite/extractDocs.js"
+    },
+    "./frame": {
+      "types": "./dist/src/mountFrame.d.ts",
+      "default": "./dist/src/mountFrame.js"
+    },
+    "./renderer": {
+      "types": "./dist/src/kitRenderer.d.ts",
+      "default": "./dist/src/kitRenderer.js"
+    },
+    "./page": {
+      "types": "./dist/src/storyPage.d.ts",
+      "default": "./dist/src/storyPage.js"
+    },
+    "./vite": {
+      "types": "./dist/src/vite/sveltekit.d.ts",
+      "default": "./dist/src/vite/sveltekit.js"
+    },
+    "./app/env": {
+      "types": "./dist/src/app/env.d.ts",
+      "default": "./dist/src/app/env.js"
+    },
+    "./app/forms": {
+      "types": "./dist/src/app/forms.d.ts",
+      "default": "./dist/src/app/forms.js"
+    },
+    "./app/manifest": {
+      "types": "./dist/src/app/manifest.d.ts",
+      "default": "./dist/src/app/manifest.js"
+    },
+    "./app/navigation": {
+      "types": "./dist/src/app/navigation.d.ts",
+      "default": "./dist/src/app/navigation.js"
+    },
+    "./app/paths": {
+      "types": "./dist/src/app/paths.d.ts",
+      "default": "./dist/src/app/paths.js"
+    },
+    "./app/state": {
+      "types": "./dist/src/app/state.d.ts",
+      "default": "./dist/src/app/state.js"
+    },
+    "./app/stores": {
+      "types": "./dist/src/app/stores.d.ts",
+      "default": "./dist/src/app/stores.js"
+    }
+  },
+  "dependencies": {
+    "@forgebook/story-format": "0.2.0",
+    "@forgebook/svelte": "0.2.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.46.4",
+    "vite": "^8.0.0",
+    "forgebook": "^0.2.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "3.1.1",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "@types/node": "24.19.2",
+    "happy-dom": "21.0.4",
+    "svelte": "5.57.3",
+    "svelte-check": "4.7.8",
+    "typescript": "npm:typescript@6.0.3",
+    "vite": "8.3.5",
+    "vitest": "5.0.5",
+    "@forgebook/testing": "0.2.0",
+    "@forgebook/typescript-config": "0.0.0",
+    "forgebook": "0.2.0",
+    "@forgebook/tools": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "package-build build",
+    "manifest": "package-build manifest",
+    "test": "vitest run",
+    "typecheck": "tsc -p src && tsc -p src/vite && svelte-check --tsconfig test/tsconfig.json --fail-on-warnings"
+  }
 }