diff --git a/lib/composite/footer/essayons.jsx b/lib/composite/footer/essayons.jsx
index 9cb2f6a..72ed7b5 100644
--- a/lib/composite/footer/essayons.jsx
+++ b/lib/composite/footer/essayons.jsx
@@ -1,6 +1,26 @@
-import essayons from "../../img/essayonscrest.png";
+import { useEffect, useState } from "react";
function Essayons() {
+ const [essayons, setEssayons] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ import("../../img/essayonscrest.png").then((module) => {
+ if (!cancelled) {
+ setEssayons(module.default);
+ }
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ if (!essayons) {
+ return null;
+ }
+
return (
![]()
import("../../img/armystar-logo-rb.svg"),
+ army250: () => import("../../img/Army-250-year-logo.png"),
+ usace: () => import("../../img/usace-logo-color.svg"),
+ usace250: () => import("../../img/USACE-250-year-logo.png"),
+ rsgis: () => import("../../img/rsgis-logo.png"),
+ cwbi: () => import("../../img/cwbi-logo.png"),
+};
+
+function LazyLogo({ loader, ...props }) {
+ const [src, setSrc] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ loader().then((module) => {
+ if (!cancelled) {
+ setSrc(module.default);
+ }
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [loader]);
+
+ if (!src) {
+ return null;
+ }
+
+ return 
;
+}
function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
return (
{army && (
- 
- 
- 
- 
- 
- 
nul & npx @lhci/cli autorun --config=.lighthouserc.gen.json --verbose & node scripts/lhci-index.js",
@@ -60,7 +99,8 @@
"react-icons": "^5.0.1",
"redux-bundler": "^28.1.0",
"redux-bundler-hook": "^1.0.3",
- "redux-bundler-react": "^1.2.0"
+ "redux-bundler-react": "^1.2.0",
+ "tailwind-merge": "^2.5.2"
},
"peerDependencies": {
"react": "^18.2.0 || ^19.0.0",
@@ -80,7 +120,6 @@
"lint-staged": "^16.1.4",
"postcss": "^8.4.33",
"prettier": "^3.6.2",
- "tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.1",
"typescript": "^6.0.3",
"vite": "^8.1.3",
diff --git a/vite.config.js b/vite.config.js
index 14a275d..9686656 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,27 @@ import path from "path";
import fs from "fs";
const LHCI_PREFIX = process.env.LHCI_PREFIX || "http://localhost:5173/";
+const externalPackages = [
+ ...Object.keys(pkg.dependencies ?? {}),
+ ...Object.keys(pkg.peerDependencies ?? {}),
+];
+const isExternalPackage = (id) =>
+ externalPackages.some((name) => id === name || id.startsWith(`${name}/`));
+const libraryAssetFileNames = (assetInfo) => {
+ if (assetInfo.name?.endsWith(".css")) {
+ return "groundwork.css";
+ }
+ return "assets/[name][extname]";
+};
+const removeCssEntrypointPlugin = (fileName) => ({
+ name: "remove-css-entrypoint",
+ closeBundle() {
+ const filePath = path.resolve("dist", fileName);
+ if (fs.existsSync(filePath)) {
+ fs.unlinkSync(filePath);
+ }
+ },
+});
function RoutesToLHCIPlugin() {
return {
@@ -41,23 +62,56 @@ export default defineConfig(({ mode }) => {
build: {
lib: {
name: "Groundwork",
- fileName: (format) => `groundwork.${format}.js`,
+ fileName: (format) =>
+ format === "umd" ? "groundwork.umd.cjs" : "index.js",
entry: "lib/index.jsx",
+ formats: ["es", "umd"],
},
rollupOptions: {
- external: ["react", "react-dom", "react/jsx-runtime"],
- output: {
- assetFileNames: (assetInfo) => {
- if (assetInfo.name?.endsWith(".css")) {
- return "groundwork.css";
- }
- return "[name][extname]";
+ external: isExternalPackage,
+ output: [
+ {
+ format: "es",
+ dir: "dist",
+ preserveModules: true,
+ preserveModulesRoot: "lib",
+ entryFileNames: "es/[name].js",
+ chunkFileNames: "es/chunks/[name]-[hash].js",
+ assetFileNames: libraryAssetFileNames,
},
- globals: {
- react: "React",
- "react-dom": "ReactDOM",
- "react/jsx-runtime": "ReactJsxRuntime",
+ {
+ format: "umd",
+ name: "Groundwork",
+ entryFileNames: "groundwork.umd.cjs",
+ assetFileNames: libraryAssetFileNames,
+ globals: {
+ react: "React",
+ "react-dom": "ReactDOM",
+ "react/jsx-runtime": "ReactJsxRuntime",
+ },
},
+ ],
+ },
+ },
+ };
+ }
+
+ if (mode === "css") {
+ console.log("Building library CSS");
+ return {
+ plugins: [react(), tailwindcss(), removeCssEntrypointPlugin("style.js")],
+ publicDir: false,
+ build: {
+ emptyOutDir: false,
+ lib: {
+ entry: "lib/style-entry.js",
+ name: "GroundworkStyles",
+ fileName: () => "style.js",
+ formats: ["es"],
+ },
+ rollupOptions: {
+ output: {
+ assetFileNames: libraryAssetFileNames,
},
},
},