@forsakringskassan/vue-lib-template 1.1.0 → 1.2.0

package/files/Jenkinsfile

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 buildRepo([
     nodejs: [
         docs: [

package/files/_editorconfig

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # EditorConfig documentation: http://EditorConfig.org
 root = true
 

package/files/_gitignore

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # vite dev
 # /src/vite-dev/app.vue
 *.tgz

package/files/_htmlvalidateignore

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # generated files
 docs/public/
 docs/node_modules/

package/files/_prettierignore

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # owned by tooling
 package-lock.json
 node_modules/
@@ -26,4 +29,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

package/files/api-extractor.lib.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

package/files/api-extractor.selectors.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

package/files/babel.config.js

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 module.exports = {
     presets: ["@forsakringskassan/vite-lib-config/babel"],
 };

package/files/cypress/support/common.ts

@@ -1,10 +1,11 @@
-/// <reference types="cypress" />
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
+import { configure } from "@forsakringskassan/cypress-config/support";
 import "@forsakringskassan/cypress-visual-regression/commands";
-import "@forsakringskassan/cypress-axe/support";
-import "cypress-html-validate/dist/commands";
-import "./commands/forced-colors";
 
-afterEach(() => {
-    cy.htmlvalidate();
+await configure({
+    resetEmulatedMedia: true,
+    afterEach: {
+        htmlvalidate: true,
+    },
 });

package/files/cypress/support/component.ts

@@ -1,38 +1,18 @@
-import { type App } from "vue";
-import { mount } from "cypress/vue";
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
+import { mount } from "@forsakringskassan/cypress-config/support";
 import { injectSpritesheet } from "@fkui/icon-lib-default/dist/f/injectSpritesheet";
-import {
-    config,
-    setRunningContext,
-    FormatPlugin,
-    TestPlugin,
-    TranslationPlugin,
-    ValidationPlugin,
-} from "@fkui/vue";
 import "@fkui/theme-default";
 import "./main.scss";
 import "./common";
 
-config.teleportTarget = "#teleport";
-
 Cypress.Commands.add("mount", (component, options = {}) => {
-    // Setup options object
     options.global ??= {};
     options.global.plugins ??= [];
-    options.global.config ??= {};
-    options.global.config.compilerOptions ??= {};
-    options.global.config.compilerOptions.whitespace = "preserve";
 
-    /* Installing validationPlugin */
+    /* handle warnings as errors */
     options.global.plugins.push({
-        install(app: App) {
-            app.use(FormatPlugin);
-            app.use(ValidationPlugin);
-            app.use(TestPlugin);
-            app.use(TranslationPlugin);
-            setRunningContext(app);
-
-            /* handle warnings as errors */
+        install(app) {
             app.config.warnHandler = (msg) => {
                 const mochaRunner = Cypress.mocha.getRunner();
                 const body = mochaRunner.test?.body ?? "";

package/files/cypress/support/main.scss

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 @use "@fkui/design/src/core/config-variables" with (
     $asset-path: "@fkui/design"
 );

package/files/cypress/tsconfig.json

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 {
     "extends": ["@fkui/tsconfig/recommended", "@fkui/tsconfig/cypress"],
     "compilerOptions": {
@@ -6,10 +8,8 @@
             "cypress",
             "node",
             "vite/client",
-            "cy-mount",
-            "cypress-html-validate/commands",
+            "@forsakringskassan/cypress-config/support",
             "@forsakringskassan/cypress-visual-regression/commands",
-            "forced-colors",
             "mocha"
         ],
         "typeRoots": ["../node_modules", "../node_modules/@types", "./types"],

package/files/cypress.config.ts

@@ -1,91 +1,29 @@
-import { defineConfig } from "cypress";
-import exclude from "@fkui/vue/htmlvalidate/cypress";
-import { init as installAxe } from "@forsakringskassan/cypress-axe/plugins";
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
+import {
+    axePlugin,
+    defineConfig,
+    htmlValidatePlugin,
+} from "@forsakringskassan/cypress-config";
 import getToMatchScreenshotsPlugin from "@forsakringskassan/cypress-visual-regression/plugin";
-import htmlvalidate, {
-    CypressHtmlValidateOptions,
-} from "cypress-html-validate/plugin";
-import { type ConfigData } from "html-validate";
 
-function installPlugins(
+async function installPlugins(
     on: Cypress.PluginEvents,
     config: Cypress.PluginConfigOptions,
-): Cypress.PluginConfigOptions {
+): Promise<Cypress.PluginConfigOptions> {
     getToMatchScreenshotsPlugin(on, config);
-    htmlvalidate.install(on, htmlValidateConfig, htmlValidateOptions);
-    config = installAxe(on, config, {
-        context: {
-            include: [
-                [".code-preview"],
-                ["[data-preview]"],
-                ["[data-cy-root]"],
-            ],
-            exclude: [
-                [".calendar__item--selected"],
-                [".file-selector input"],
-                [".wizard-step__header__title"],
-                [".live-example__code"],
-            ],
-        },
-    });
+    config = await axePlugin(on, config);
+    config = await htmlValidatePlugin(on, config);
     return config;
 }
 
-const htmlValidateConfig: ConfigData = {
-    rules: {
-        /* some examples show how to use custom heading levels which often
-         * doesn't match the heading outline for the documentation */
-        "heading-level": ["off"],
-
-        /* prevents mismatches from disabled rules which does not trigger errors
-         * when Cypress tests are running but would yield errors during normal
-         * validation */
-        "no-unused-disable": "off",
-
-        /* we cannot use native progressbar element due to SLA */
-        "prefer-native-element": [
-            "error",
-            {
-                exclude: ["progressbar"],
-            },
-        ],
-
-        /* sadly we dont use SRI at FK */
-        "require-sri": "off",
-    },
-};
-
-const htmlValidateOptions: CypressHtmlValidateOptions = {
-    include: [
-        /* Cypress component tests */
-        "#__cy_vue_root > div",
-    ],
-    exclude,
-};
-
-export default defineConfig({
-    allowCypressEnv: false,
+export default defineConfig(import.meta.dirname, {
     // Cypress may sometimes restart tests when it detects a changed file in the __screenshot__ folder.
     watchForFileChanges: false,
-    /* disable video recording, it is to slow both on remote machines and on
-     * CI/CD testing. */
-    video: false,
-    reporter: require.resolve("mocha-multi-reporters"),
-    reporterOptions: {
-        reporterEnabled: "spec, mocha-junit-reporter",
-        mochaJunitReporterReporterOptions: {
-            mochaFile: "test-results/cypress-test-output_[hash].xml",
-        },
-    },
     component: {
-        setupNodeEvents(on, config) {
-            return installPlugins(on, config);
-        },
-        devServer: {
-            framework: "vue",
-            bundler: "vite",
+        async setupNodeEvents(on, config) {
+            return await installPlugins(on, config);
         },
-        excludeSpecPattern: ["temp/**"], // cloneman puts cy-files in temp folder during build
     },
     defaultBrowser: "chrome",
     hosts: { localhost: "127.0.0.1" },

package/files/docs/build.mts

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 import { copyFileSync } from "node:fs";
 import path from "node:path";
 import {

package/files/docs/package.json

@@ -9,7 +9,7 @@
   "devDependencies": {
     "@fkui/icon-lib-default": "6.57.1",
     "@fkui/vue": "6.57.1",
-    "@forsakringskassan/apimock-express": "4.0.0",
+    "@forsakringskassan/apimock-express": "4.1.0",
     "@forsakringskassan/docs-generator": "3.6.4",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",

package/files/docs/tsconfig.json

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 {
     "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
     "compilerOptions": {

package/files/eslint.config.mjs

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 import defaultConfig, {
     docsConfig,
     examplesConfig,

package/files/package.json

@@ -86,44 +86,42 @@
     "@fkui/test-utils": "6.57.1",
     "@fkui/theme-default": "6.57.1",
     "@fkui/vue": "6.57.1",
-    "@forsakringskassan/apimock-express": "4.0.0",
+    "@forsakringskassan/apimock-express": "4.1.0",
     "@forsakringskassan/commitlint-config": "4.2.8",
-    "@forsakringskassan/cypress-axe": "5.1.5",
+    "@forsakringskassan/cypress-config": "1.9.1",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
     "@forsakringskassan/docs-generator": "3.6.4",
     "@forsakringskassan/docs-live-example": "3.0.2",
-    "@forsakringskassan/eslint-config": "15.9.5",
+    "@forsakringskassan/eslint-config": "15.9.7",
     "@forsakringskassan/eslint-config-cli": "15.9.3",
-    "@forsakringskassan/eslint-config-cypress": "15.9.3",
+    "@forsakringskassan/eslint-config-cypress": "15.9.9",
     "@forsakringskassan/eslint-config-jest": "15.9.2",
-    "@forsakringskassan/eslint-config-typescript": "15.9.2",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript": "15.9.8",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.8",
     "@forsakringskassan/eslint-config-vitest": "15.9.4",
-    "@forsakringskassan/eslint-config-vue": "15.9.6",
+    "@forsakringskassan/eslint-config-vue": "15.9.8",
     "@forsakringskassan/prettier-config": "3.7.8",
     "@forsakringskassan/stylelint-config": "3.4.6",
-    "@forsakringskassan/vite-lib-config": "5.11.0",
+    "@forsakringskassan/vite-lib-config": "5.11.1",
     "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.1.0",
+    "@forsakringskassan/vue-lib-template": "1.2.0",
     "@html-validate/release-scripts": "7.6.11",
-    "@types/node": "24.13.3",
+    "@types/node": "24.13.4",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vue/server-renderer": "3.5.42",
     "@vue/test-utils": "2.5.0",
     "cloneman": "1.23.1",
     "core-js": "3.50.0",
     "cypress": "16.0.0",
-    "cypress-html-validate": "9.1.0",
-    "html-validate": "11.14.0",
+    "html-validate": "11.15.0",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
     "mocha-junit-reporter": "2.2.1",
-    "mocha-multi-reporters": "1.5.1",
     "npm-pkg-lint": "5.2.5",
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "vite": "8.2.2",
+    "vite": "8.3.0",
     "vitest": "5.0.0",
     "vue": "3.5.42",
     "vue-tsc": "3.3.11"

package/files/renovate.json

@@ -5,7 +5,7 @@
         "@babel/preset-env",
         "@forsakringskassan/apimock-express",
         "@forsakringskassan/commitlint-config",
-        "@forsakringskassan/cypress-axe",
+        "@forsakringskassan/cypress-config",
         "@forsakringskassan/cypress-visual-regression",
         "@forsakringskassan/docs-generator",
         "@forsakringskassan/docs-live-example",
@@ -29,12 +29,10 @@
         "cloneman",
         "core-js",
         "cypress",
-        "cypress-html-validate",
         "html-validate",
         "html-validate-markdown",
         "html-validate-vue",
         "mocha-junit-reporter",
-        "mocha-multi-reporters",
         "npm-pkg-lint",
         "npm-run-all2",
         "rimraf",

package/files/tsconfig.cypress.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "extends": [

package/files/tsconfig.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.root.json",

package/files/tsconfig.lib.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.lib.json",

package/files/tsconfig.selectors.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.selectors.json"

package/files/vite.config.mts

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 import { defineConfig } from "@forsakringskassan/vite-lib-config/vite";
 import { defineTestConfig } from "@forsakringskassan/vitest-config-jsdom";

package/hooks/install.mjs

@@ -2,7 +2,8 @@
  * @param {import("cloneman").InstallContext} context
  */
 export default async (context) => {
-    const { getParameter, updateJsonFile } = context;
+    const { getParameter, updateJsonFile, getApplicationName, replaceInFile } =
+        context;
 
     /* write repository url to "package.json" */
     const repoUrl = getParameter("repo-url");
@@ -12,4 +13,11 @@ export default async (context) => {
             url: repoUrl,
         },
     });
+
+    /* update placeholder names with the real application name (from package.json) */
+    const name = getApplicationName;
+    const placeholder = "@forsakringskassan/vue-lib-template";
+    await replaceInFile("tsconfig.lib.json", placeholder, name);
+    await replaceInFile("tsconfig.cypress.json", placeholder, name);
+    await replaceInFile("tsconfig.selectors.json", placeholder, name);
 };

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "1fb23d6a059d91acb529714eaa17c95fa8d67e9346df40b33d29f41679b92a8f",
+            fileHash: "36c8f49330d6acb55faacab6e563150ce680f321673ee1d5989144b469ef7839",
             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.1.0",
+  "version": "1.2.0",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -40,14 +40,10 @@
       "CODEOWNERS",
       "cypress.config.ts",
       "cypress/fixtures/example.json",
-      "cypress/support/commands/forced-colors.ts",
       "cypress/support/common.ts",
-      "cypress/support/component-index.html",
       "cypress/support/component.ts",
       "cypress/support/main.scss",
       "cypress/tsconfig.json",
-      "cypress/types/cy-mount.d.ts",
-      "cypress/types/forced-colors.d.ts",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
       "docs/index.md",
@@ -108,14 +104,10 @@
       "babel.config.js",
       "cypress.config.ts",
       "cypress/fixtures/example.json",
-      "cypress/support/commands/forced-colors.ts",
       "cypress/support/common.ts",
-      "cypress/support/component-index.html",
       "cypress/support/component.ts",
       "cypress/support/main.scss",
       "cypress/tsconfig.json",
-      "cypress/types/cy-mount.d.ts",
-      "cypress/types/forced-colors.d.ts",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
       "docs/package.json",

package/files/cypress/support/commands/forced-colors.ts

@@ -1,33 +0,0 @@
-/// <reference types="cypress" />
-
-export type ForcedColorMode = "none" | "dark" | "light";
-
-/**
- * Custom Cypress command for testing with forced colors mode
- * Forces the browser to use forced colors prefers-color-scheme media query
- */
-Cypress.Commands.add("forcedColors", (mode: ForcedColorMode) => {
-    const cdpCommand = "Emulation.setEmulatedMedia";
-    const media = "forced-colors";
-
-    const features =
-        mode === "none"
-            ? [{ name: media, value: "none" }]
-            : [
-                  { name: media, value: "active" },
-                  {
-                      name: "prefers-color-scheme",
-                      value: mode,
-                  },
-              ];
-
-    cy.then(() => {
-        return Cypress.automation("remote:debugger:protocol", {
-            command: cdpCommand,
-            params: {
-                media,
-                features,
-            },
-        });
-    }).window();
-});

package/files/cypress/support/component-index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <title>Components App</title>
-    </head>
-    <body>
-        <div data-cy-root>
-            <div id="teleport"></div>
-        </div>
-    </body>
-</html>

package/files/cypress/types/cy-mount.d.ts

@@ -1,9 +0,0 @@
-import { mount } from "cypress/vue";
-
-declare global {
-    namespace Cypress {
-        interface Chainable {
-            mount: typeof mount;
-        }
-    }
-}

package/files/cypress/types/forced-colors.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="cypress" />
-
-declare global {
-    namespace Cypress {
-        interface Chainable {
-            /**
-             * Forces the application to run in forced colors mode
-             * @param mode - "light" or "dark" color mode, "none" will disable the forced colors
-             * @example cy.forcedColors("dark")
-             */
-            forcedColors(
-                mode: "none" | "dark" | "light",
-            ): Cypress.Chainable<void>;
-        }
-    }
-}
-
-export {};