Oppgrader: Vite, Vitest & avhengigheter

.github/workflows/adapter-release.yaml

@@ -15,11 +15,12 @@ jobs:
     name: Test and build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
+          registry: https://npm.pkg.github.com
       - name: Build core
         run: |
           npm ci

.github/workflows/master.yaml

@@ -14,19 +14,16 @@ env:
 jobs:
   test-build-publish:
     permissions:
-      contents:
-        - read
-        - write 
-      metadata:
-        - read
+      contents: write
     name: Test and build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
+          registry: https://npm.pkg.github.com
       - name: Install dependencies
         run: npm ci
       - name: Test

.github/workflows/pr.yaml

@@ -12,14 +12,14 @@ jobs:
     name: Test and build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Test
         run: npm run test:coverage
       - name: Build
-        run: npm run build
+        run: npm run build

example/index.tsx

@@ -1,91 +1,98 @@
-import React, { useEffect } from 'react';
-import { render } from 'react-dom';
-import { Navspa, AsyncNavspa, AsyncSpaConfig } from '../src';
+import React, { useEffect } from "react";
+import { render } from "react-dom";
+import { Navspa, AsyncNavspa, AsyncSpaConfig } from "../src";
 
 interface DecoratorProps {
-	appname: string;
+  appname: string;
 }
 
-const Dekorator = Navspa.importer<DecoratorProps>('internarbeidsflatefs');
-const OldApp = Navspa.importer<DecoratorProps>('oldapp');
-const NewApp = Navspa.importer<DecoratorProps>('newapp');
-const ErrorApp = Navspa.importer<DecoratorProps>('errorapp', {
-	feilmelding: <p className="with-ok-prefix">Custom feilmelding ved feil innlasting</p>
+const Dekorator = Navspa.importer<DecoratorProps>(
+  "internarbeidsflate-decorator-v3",
+);
+const OldApp = Navspa.importer<DecoratorProps>("oldapp");
+const NewApp = Navspa.importer<DecoratorProps>("newapp");
+const ErrorApp = Navspa.importer<DecoratorProps>("errorapp", {
+  feilmelding: (
+    <p className="with-ok-prefix">Custom feilmelding ved feil innlasting</p>
+  ),
 });
 
 const asyncCRAConfig: AsyncSpaConfig = {
-	appName: 'cra-test',
-	appBaseUrl: 'http://localhost:5000',
-	loader: (<div>Laster...</div>),
-	config: {
-		feilmelding: <h1>Kunne ikke laste inn cra-test</h1>
-	}
+  appName: "cra-test",
+  appBaseUrl: "http://localhost:5000",
+  loader: <div>Laster...</div>,
+  config: {
+    feilmelding: <h1>Kunne ikke laste inn cra-test</h1>,
+  },
 };
 const AsyncCRAApp = AsyncNavspa.importer(asyncCRAConfig);
 
 const asyncESMConfig: AsyncSpaConfig = {
-	appName: 'esm-test',
-	appBaseUrl: 'http://localhost:2000',
-	loader: (<div>Laster...</div>),
-	assetManifestParser: manifest => {
-		return [
-			{
-				path: `http://localhost:2000/${manifest.index}`,
-				type: "module"
-			},
-			{
-				path: `http://localhost:2000/${manifest.style}`
-			}
-		]
-	},
-	config: {
-		feilmelding: <h1>Kunne ikke laste inn esm-test</h1>,
-	}
+  appName: "esm-test",
+  appBaseUrl: "http://localhost:2000",
+  loader: <div>Laster...</div>,
+  assetManifestParser: (manifest) => {
+    return [
+      {
+        path: `http://localhost:2000/${manifest.index}`,
+        type: "module",
+      },
+      {
+        path: `http://localhost:2000/${manifest.style}`,
+      },
+    ];
+  },
+  config: {
+    feilmelding: <h1>Kunne ikke laste inn esm-test</h1>,
+  },
 };
 const AsyncESMApp = AsyncNavspa.importer(asyncESMConfig);
 
 const react18Config: AsyncSpaConfig = {
-	appName: 'react-18-app',
-	appBaseUrl: 'http://localhost:2001',
-	loader: (<div>Laster...</div>),
-	config: {
-		feilmelding: <h1>Kunne ikke laste inn react18-test</h1>
-	}
+  appName: "react-18-app",
+  appBaseUrl: "http://localhost:2001",
+  loader: <div>Laster...</div>,
+  config: {
+    feilmelding: <h1>Kunne ikke laste inn react18-test</h1>,
+  },
 };
 const React18App = AsyncNavspa.importer(react18Config);
 
 function App() {
-	const [mount, setMount] = React.useState<boolean>(true);
-	const [mountAsync, setMountAsync] = React.useState<boolean>(false);
+  const [mount, setMount] = React.useState<boolean>(true);
+  const [mountAsync, setMountAsync] = React.useState<boolean>(false);
 
-	useEffect(() => {
-		AsyncNavspa.preload(asyncCRAConfig);
-		AsyncNavspa.preload(asyncESMConfig);
+  useEffect(() => {
+    AsyncNavspa.preload(asyncCRAConfig);
+    AsyncNavspa.preload(asyncESMConfig);
 
-		setTimeout(() => {
-			setMountAsync(true);
-		}, 3000);
-	}, [])
+    setTimeout(() => {
+      setMountAsync(true);
+    }, 3000);
+  }, []);
 
-	return (
-		<>
-			<h1>NAVSPA - Testpage</h1>
-			<button className="blokk-m" onClick={() => setMount((p) => !p)}>
-				Vis/Skjul applikasjoner
-			</button>
+  return (
+    <>
+      <h1>NAVSPA - Testpage</h1>
+      <button className="blokk-m" onClick={() => setMount((p) => !p)}>
+        Vis/Skjul applikasjoner
+      </button>
 
-			<h2>Sync applikasjoner: {mount ? 'Vises' : 'Skjult'}</h2>
-			{mount && <ErrorApp appname="error" />}
-			{mount && <OldApp appname="world" />}
-			{mount && <NewApp appname="world" />}
-			{mount && <Dekorator appname="world" />}
+      <h2>Sync applikasjoner: {mount ? "Vises" : "Skjult"}</h2>
+      {mount && <ErrorApp appname="error" />}
+      {mount && <OldApp appname="world" />}
+      {mount && <NewApp appname="world" />}
+      {mount && <Dekorator appname="world" environment="mock" />}
 
-			<h2>Async applikasjoner: {mount ? (mountAsync ? 'Vises' : 'Laster') : 'Skjult'}</h2>
-			{mountAsync && mount && <AsyncCRAApp />}
-			{mountAsync && mount && <AsyncESMApp />}
-			{mountAsync && mount && <React18App />}
-		</>
-	);
+      <h2>
+        Async applikasjoner:{" "}
+        {mount ? (mountAsync ? "Vises" : "Laster") : "Skjult"}
+      </h2>
+      {mountAsync && mount && <AsyncCRAApp />}
+      {mountAsync && mount && <AsyncESMApp />}
+      {mountAsync && mount && <React18App />}
+    </>
+  );
 }
 
 render(<App />, document.getElementById("root"));

example/index.html → index.html

@@ -16,8 +16,8 @@
             margin-bottom: 1rem;
         }
     </style>
-    <link rel="stylesheet" href="https://navikt.github.io/internarbeidsflatedecorator/v2.1/static/css/main.css" />
-    <script src="https://navikt.github.io/internarbeidsflatedecorator/v2.1/static/js/head.v2.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.nav.no/personoversikt/internarbeidsflate-decorator-v3/dev/latest/dist/index.css" />
+    <script src="https://cdn.nav.no/personoversikt/internarbeidsflate-decorator-v3/dev/latest/dist/bundle.js"></script>
 
     <script type="application/javascript">
         window['NAVSPA'] = window['NAVSPA'] || {};
@@ -46,9 +46,10 @@
             }
         }
     </script>
+
+    <script type="module" src="example/index.tsx"></script>
 </head>
 <body>
 <div id="root"></div>
 </body>
-<script src="index.tsx"></script>
 </html>