@mideind/netskrafl-react 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
 interface GlobalState {
@@ -36,6 +37,6 @@ interface INetskraflProps {
     tokenExpired?: () => void;
 }
 
-declare const Netskrafl: React.NamedExoticComponent<INetskraflProps>;
+declare const Netskrafl: React.MemoExoticComponent<({ state, tokenExpired }: INetskraflProps) => react_jsx_runtime.JSX.Element>;
 
 export { type INetskraflProps, Netskrafl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",
@@ -34,6 +34,7 @@
     "@storybook/test": "^8.4.4",
     "@types/mithril": "^2.2.7",
     "@types/react": "^18.3.12",
+    "postcss-import": "^16.1.0",
     "rollup": "^4.27.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/rollup.config.js

@@ -5,9 +5,10 @@ import alias from '@rollup/plugin-alias';
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import terser from "@rollup/plugin-terser";
+// import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
+import postcssImport from "postcss-import";
 import path from "path";
 
 const packageJson = require("./package.json");
@@ -31,11 +32,6 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
-      postcss({
-        extensions: [".css"],
-        modules: false,
-        // extract: "index.css",
-      }),
       alias({
         entries: [
           { find: '@', replacement: path.resolve(__dirname, 'src') }
@@ -46,7 +42,18 @@ export default [
       }),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
+      postcss({
+        plugins: [
+          postcssImport(), // Handles @import concatenation
+          // No cssnano or other aggressive minifiers here for now
+        ],
+        extract: 'css/netskrafl.css', // Output path for the bundled CSS relative to 'dist'
+        // minimize: false, // Default is false, but explicitly stating it is fine
+        // sourceMap: 'inline', // Or true for a separate .css.map file. 'inline' is good for dev.
+        extensions: [".css"],
+        modules: false,
+      }),
+      // terser(), // Uncomment for production builds
     ],
     external: ["react", "react-dom"],
   },

package/src/components/netskrafl/Netskrafl.tsx

@@ -6,9 +6,7 @@ import { main } from "@/mithril/page";
 
 export { type INetskraflProps };
 
-import "@/css/fonts.css";
-import "@/css/glyphs.css";
-import "@/css/skrafl-explo.css";
+const CSS_LINK_ID = "netskrafl-styles";
 
 const DEFAULT_STATE: GlobalState = {
   projectId: "netskrafl",
@@ -78,11 +76,30 @@ const mountForUser = async (state: GlobalState, tokenExpired?: () => void): Prom
   throw new Error("Failed to mount Netskrafl UI");
 }
 
-const NetskraflImpl: React.FC<INetskraflProps> = ({ state, tokenExpired }) => {
+const NetskraflImpl = ({ state, tokenExpired }: INetskraflProps) => {
   const ref = React.createRef<HTMLDivElement>();
   const completeState = { ...DEFAULT_STATE, ...state };
   const { userEmail } = completeState;
 
+  useEffect(() => {
+    // Check if the stylesheet is already added by another instance
+    if (document.getElementById(CSS_LINK_ID)) {
+      // Optionally, you might want to increment a usage counter
+      // and only remove the link when the counter is zero.
+      // For simplicity, we'll assume one global link is fine.
+      return;
+    }
+    const link = document.createElement("link");
+    const styleUrl = `${window.location.origin}/static/css/netskrafl.css`;
+    link.id = CSS_LINK_ID;
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = styleUrl;
+    // Optional: for CORS, though if it's the same base domain, it might not be needed
+    // link.crossOrigin = "anonymous";
+    document.head.appendChild(link);
+  }, []);
+
   useEffect(() => {
     // Load the Netskrafl (Mithril) UI for a new user
     // console.log("Mounting Netskrafl UI for user", userEmail);

package/src/css/glyphs.css

@@ -4,7 +4,7 @@
 
    Style support for Glyphicons
 
-   Copyright © 2024 Miðeind ehf.
+   Copyright © 2025 Miðeind ehf.
    Author: Vilhjalmur Thorsteinsson
 
    The Creative Commons Attribution-NonCommercial 4.0
@@ -15,11 +15,10 @@
 
 @font-face {
    font-family: 'Glyphicons Regular';
-   /* The following source URLs are patched up at run-time
-      to point to the backend server */
-   src: url('../static/glyphicons-regular.eot') format('embedded-opentype'),
-      url('../static/glyphicons-regular.woff') format('woff'),
-      url('../static/glyphicons-regular.ttf') format('truetype');
+   /* The following source URLs are assumed to be present on the host */
+   src: url('/static/fonts/glyphicons-regular.eot') format('embedded-opentype'),
+      url('/static/fonts/glyphicons-regular.woff') format('woff'),
+      url('/static/fonts/glyphicons-regular.ttf') format('truetype');
 }
 
 .glyphicon {

package/src/css/main.css

@@ -0,0 +1,4 @@
+
+@import "./fonts.css";
+@import "./glyphs.css";
+@import "./skrafl-explo.css";

package/src/index.ts

@@ -1,2 +1,4 @@
 
+import "@/css/main.css";
+
 export * from "./components";

package/src/mithril/i18n.ts

@@ -120,6 +120,7 @@ async function loadMessages(locale: string) {
     const messages = await request<Messages>({
       method: "GET",
       url: "/static/assets/messages.json",
+      withCredentials: false, // Cookies are not allowed for CORS request
     });
     setLocale(locale, messages);
   }