@forsakringskassan/vue-lib-template 1.3.0 → 1.5.0

package/files/CODEOWNERS

@@ -3,7 +3,7 @@
 # Each line is a file pattern followed by one or more owners.
 
 # Global owner for the whole repository
-# * @username-or-team
+#* @username-or-team
 
 # Example folder-specific owner
-# /docs/ @org/doc-team
+#/docs/ @org/doc-team

package/files/cypress/support/main.scss

@@ -6,6 +6,7 @@
 
 @use "@fkui/design/src/fonts";
 @use "@fkui/design/src/fkui";
+@use "../../src/theme";
 
 :root {
     --f-logo-image-small: hotpink;

package/files/docs/build.mts

@@ -1,8 +1,8 @@
 /* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import {
+    type Processor,
     Generator,
     extractMarkdownProcessor,
     frontMatterFileReader,
@@ -11,11 +11,24 @@ import {
 } from "@forsakringskassan/docs-generator";
 import pkg from "../package.json" with { type: "json" };
 
+function teleportTarget(): Processor {
+    return {
+        after: "generate-docs",
+        name: "fkui:teleport",
+        async handler(context) {
+            context.addTemplateBlock("body:end", "teleport-target", {
+                filename: "partials/teleport.html",
+            });
+        },
+    };
+}
+
 const docs = new Generator(import.meta.url, {
     site: { name: pkg.name, lang: "sv" },
     outputFolder: path.resolve(import.meta.dirname, "public"),
     exampleFolders: [path.resolve(import.meta.dirname, "../src")],
     setupPath: path.resolve(import.meta.dirname, "src/setup.ts"),
+    templateFolders: ["./templates"],
     vendor: [
         { package: "vue", alias: "vue/dist/vue.esm-bundler.js" },
         {
@@ -31,6 +44,7 @@ const docs = new Generator(import.meta.url, {
             outputFolder: path.join(import.meta.dirname, "../dist/docs"),
         }),
         manifestProcessor(),
+        teleportTarget(),
     ],
 });
 
@@ -42,19 +56,17 @@ docs.compileStyle("main", "./src/main.scss", {
     appendTo: "head",
 });
 
-const styleUrl = import.meta.resolve(`../dist/esm/style.css`);
-const stylePath = fileURLToPath(styleUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
-docs.compileStyle("lib", stylePath, {
+const styleUrl = new URL(import.meta.resolve(`../dist/esm/style.css`));
+docs.compileStyle("lib", styleUrl, {
     appendTo: "head",
 });
 
-docs.compileScript("mocks", "./src/bundle-mocks.mjs", {
-    appendTo: "head",
+docs.compileScript("#apimock", "./src/bundle-mocks.ts", {
+    appendTo: "none",
 });
 
-const mswUrl = import.meta.resolve("msw/mockServiceWorker.js");
-const mswPath = fileURLToPath(mswUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
-docs.compileWorker("msw", mswPath);
+const mswUrl = new URL(import.meta.resolve("msw/mockServiceWorker.js"));
+docs.compileWorker("#mock-service-worker", mswUrl);
 
 await docs.build([
     {

package/files/docs/package.json

@@ -2,15 +2,18 @@
   "name": "docs",
   "version": "0.0.0",
   "private": true,
+  "imports": {
+    "#apimock": "./src/bundle-mocks.ts"
+  },
   "scripts": {
     "build": "node build.mts",
     "start": "http-server public"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.58.0",
-    "@fkui/vue": "6.58.0",
-    "@forsakringskassan/apimock-express": "4.1.0",
-    "@forsakringskassan/docs-generator": "3.11.1",
+    "@fkui/icon-lib-default": "6.59.0",
+    "@fkui/vue": "6.59.0",
+    "@forsakringskassan/apimock-express": "4.2.1",
+    "@forsakringskassan/docs-generator": "3.12.1",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",

package/files/docs/src/bundle-mocks.ts

@@ -0,0 +1,10 @@
+import { setupWorker } from "@forsakringskassan/apimock-express/browser";
+import mocks from "../../src/mocks/index.mjs";
+
+/* this is resolved from the importmap (mapped to the bundle with the same name
+ * compiled in `docs/build.mts`) */
+const workerUrl = import.meta.resolve("#mock-service-worker");
+
+export const apimockReady = setupWorker(workerUrl, mocks, {
+    type: "module",
+});

package/files/docs/src/main.scss

@@ -1,20 +1,8 @@
 @use "@forsakringskassan/docs-generator/style.css";
-@use "@fkui/theme-default" as theme with (
-    $global: false
-);
-@use "@fkui/font-default" as font with (
-    $global: false
-);
 @use "@fkui/design";
 @use "@fkui/design/lib/fonts.css";
 @use "@forsakringskassan/docs-live-example";
-
-@include font.font-face;
-
-:root {
-    @include theme.auto;
-    @include font.font-family;
-}
+@use "../../src/theme";
 
 html,
 body {

package/files/docs/src/setup.ts

@@ -10,18 +10,22 @@ import {
 } from "@fkui/vue";
 import { type SetupOptions } from "@forsakringskassan/docs-generator";
 
+/* this is resolved from the importmap (mapped to the bundle with the same name
+ * compiled in `docs/build.mts`) */
+import { apimockReady } from "#apimock";
+
 export async function setup(options: SetupOptions): Promise<void> {
     const { rootComponent, selector } = options;
 
-    // Set in bundle-mocks.mjs, wait on mock service worker to be ready.
-    if (window.bundleMocks) {
-        await window.bundleMocks;
-    }
+    /* wait for apimock to be ready before we mount the example */
+    await apimockReady;
+
     const app = createApp({
         render() {
             return h(FErrorHandlingApp, { defaultComponent: rootComponent });
         },
     });
+
     setRunningContext(app);
     app.use(ErrorPlugin, {
         captureWarnings: true,

package/files/docs/templates/partials/teleport.html

@@ -0,0 +1 @@
+<div id="teleport-target" class="user-theme"></div>

package/files/docs/tsconfig.json

@@ -3,6 +3,10 @@
 {
     "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
     "compilerOptions": {
+        "noEmit": true,
+        "target": "esnext",
+        "module": "esnext",
+        "moduleResolution": "bundler",
         "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "types": ["node"]
     },

package/files/package.json

@@ -87,38 +87,38 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@babel/preset-env": "7.29.7",
-    "@fkui/design": "6.58.0",
-    "@fkui/font-default": "6.58.0",
-    "@fkui/icon-lib-default": "6.58.0",
-    "@fkui/logic": "6.58.0",
-    "@fkui/test-utils": "6.58.0",
-    "@fkui/theme-default": "6.58.0",
-    "@fkui/vue": "6.58.0",
-    "@forsakringskassan/apimock-express": "4.1.0",
+    "@fkui/design": "6.59.0",
+    "@fkui/font-default": "6.59.0",
+    "@fkui/icon-lib-default": "6.59.0",
+    "@fkui/logic": "6.59.0",
+    "@fkui/test-utils": "6.59.0",
+    "@fkui/theme-default": "6.59.0",
+    "@fkui/vue": "6.59.0",
+    "@forsakringskassan/apimock-express": "4.2.1",
     "@forsakringskassan/commitlint-config": "4.2.8",
     "@forsakringskassan/cypress-config": "1.10.0",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
-    "@forsakringskassan/docs-generator": "3.11.1",
+    "@forsakringskassan/docs-generator": "3.12.1",
     "@forsakringskassan/docs-live-example": "3.0.2",
-    "@forsakringskassan/eslint-config": "15.10.0",
-    "@forsakringskassan/eslint-config-cli": "15.10.0",
-    "@forsakringskassan/eslint-config-cypress": "15.10.0",
-    "@forsakringskassan/eslint-config-jest": "15.10.0",
-    "@forsakringskassan/eslint-config-typescript": "15.10.0",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.10.0",
-    "@forsakringskassan/eslint-config-vitest": "15.10.0",
-    "@forsakringskassan/eslint-config-vue": "15.10.0",
+    "@forsakringskassan/eslint-config": "15.11.0",
+    "@forsakringskassan/eslint-config-cli": "15.11.0",
+    "@forsakringskassan/eslint-config-cypress": "15.11.0",
+    "@forsakringskassan/eslint-config-jest": "15.11.0",
+    "@forsakringskassan/eslint-config-typescript": "15.11.0",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.11.0",
+    "@forsakringskassan/eslint-config-vitest": "15.11.0",
+    "@forsakringskassan/eslint-config-vue": "15.11.0",
     "@forsakringskassan/prettier-config": "3.7.10",
     "@forsakringskassan/stylelint-config": "3.5.0",
     "@forsakringskassan/vite-lib-config": "5.12.4",
     "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.3.0",
+    "@forsakringskassan/vue-lib-template": "1.5.0",
     "@html-validate/release-scripts": "7.6.12",
-    "@types/node": "24.13.5",
+    "@types/node": "24.13.6",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vue/server-renderer": "3.5.43",
     "@vue/test-utils": "2.5.1",
-    "cloneman": "1.24.1",
+    "cloneman": "1.25.1",
     "core-js": "3.50.0",
     "cypress": "16.1.0",
     "html-validate": "11.16.0",

package/files/src/local.scss

@@ -1,19 +1,7 @@
-@use "@fkui/theme-default" as theme with (
-    $global: false
-);
-@use "@fkui/font-default" as font with (
-    $global: false
-);
 @use "@fkui/design";
 @use "@fkui/design/lib/fonts.css";
 @use "@forsakringskassan/docs-live-example";
-
-@include font.font-face;
-
-:root {
-    @include theme.auto;
-    @include font.font-family;
-}
+@use "theme";
 
 html,
 body {

package/files/src/theme.scss

@@ -0,0 +1,28 @@
+/**
+ * Theme selection.
+ *
+ * This file can be customized to set theme and related features for:
+ *
+ * - Local builds (`npm start`)
+ * - Cypress component tests
+ * - Documentation
+ *
+ * It is not included in the production build.
+ *
+ * --- This notice must be kept ---
+ */
+
+@use "@fkui/theme-default" as theme with (
+    $global: false
+);
+
+@use "@fkui/font-default" as font with (
+    $global: false
+);
+
+@include font.font-face;
+
+:root {
+    @include theme.auto;
+    @include font.font-family;
+}

package/hooks/install.mjs

@@ -1,5 +1,15 @@
 
 
+async function enableDeployDocs(context                )                {
+    const { getParameter, replaceInFile } = context;
+    const url = getParameter("docs-repo-url");
+    if (url === "") {
+        return;
+    }
+    await replaceInFile("Jenkinsfile", /deploy:/, "false", "true");
+    await replaceInFile("Jenkinsfile", /repositoryUrl:/, "null", `"${url}"`);
+}
+
 export async function install(context                )                {
     const { getApplicationName, replaceInFile } = context;
     const scopedName = getApplicationName();
@@ -13,4 +23,7 @@ export async function install(context                )                {
     await replaceInFile("tsconfig.lib.json", placeholder, quotedName);
     await replaceInFile("tsconfig.cypress.json", placeholder, quotedName);
     await replaceInFile("tsconfig.selectors.json", placeholder, quotedName);
+
+    /* enable deployment of documentation if a documentation url is provided */
+    await enableDeployDocs(context);
 }

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "3ed96f7ccd01c366c430cf3081cbf47d160888c6d793dc177709a483b78000f9",
+            fileHash: "509a23e5489100d974625d2197bd7e65aee36d3ce87686a907623db845674b81",
             filesDir: path.join(import.meta.dirname, "files"),
             hooksDir: path.join(import.meta.dirname, "hooks"),
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/vue-lib-template",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -49,11 +49,12 @@
       "docs/guide/index.md",
       "docs/index.md",
       "docs/package.json",
-      "docs/src/bundle-mocks.mjs",
+      "docs/src/bundle-mocks.ts",
       "docs/src/global.d.ts",
       "docs/src/main.js",
       "docs/src/main.scss",
       "docs/src/setup.ts",
+      "docs/templates/partials/teleport.html",
       "docs/tsconfig.json",
       "eslint.config.mjs",
       "etc/lib.api.md",
@@ -96,6 +97,7 @@
       "src/selectors/guide/index.ts",
       "src/selectors/index.ts",
       "src/style.scss",
+      "src/theme.scss",
       "src/vite-dev/app.vue",
       "tsconfig.cypress.json",
       "tsconfig.json",
@@ -125,7 +127,7 @@
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
       "docs/package.json",
-      "docs/src/bundle-mocks.mjs",
+      "docs/src/bundle-mocks.ts",
       "docs/src/global.d.ts",
       "docs/src/main.js",
       "docs/src/main.scss",
@@ -142,6 +144,14 @@
       "tsconfig.selectors.json",
       "vite.config.mts"
     ],
+    "partiallyManagedFiles": [
+      {
+        "filename": "src/theme.scss",
+        "include": {
+          "above": "--- This notice must be kept ---"
+        }
+      }
+    ],
     "removeFiles": [
       "api-extractor.json",
       "index.html",
@@ -155,6 +165,7 @@
       "cypress/types/forced-colors.d.ts",
       "etc/vue-lib-template-selectors.api.md",
       "etc/vue-lib-template.api.md",
+      "docs/src/bundle-mocks.mjs",
       "docs/components/AwesomeComponent.md",
       "src/examples/DummyExample.vue",
       "src/AwesomeComponent.cy.ts",
@@ -172,6 +183,16 @@
       "!@fkui/tsconfig",
       "@forsakringskassan/*-api",
       "fk-icons"
+    ],
+    "parameters": [
+      {
+        "key": "docs-repo-url",
+        "description": "URL to repository to deploy documentation to",
+        "help": "Format: ssh://user@host/project/repo.git",
+        "required": false,
+        "defaultValue": "",
+        "pattern": "ssh://.*.git"
+      }
     ]
   }
 }

package/files/docs/src/bundle-mocks.mjs

@@ -1,22 +0,0 @@
-import { matchRequest } from "@forsakringskassan/apimock-express/browser";
-import { http } from "msw";
-import { setupWorker } from "msw/browser";
-import mocks from "../../src/mocks/index.mts";
-
-const handlers = [
-    http.all("/api/*", async (req) => {
-        return await matchRequest(mocks, req.request);
-    }),
-];
-const worker = setupWorker(...handlers);
-// eslint-disable-next-line no-undef -- technical debt
-const rootUrl = document.documentElement.dataset["rootUrl"];
-const url = `${rootUrl}/msw.js`;
-
-// Used in setup.ts
-// eslint-disable-next-line unicorn/no-global-object-property-assignment, no-undef -- technical debt
-window.bundleMocks = worker.start({
-    serviceWorker: {
-        url,
-    },
-});