npm - @modern-admin/web - Versions diffs - 0.3.4 → 0.4.0 - Mend

@modern-admin/web 0.3.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (171) hide show

package/dist/standalone/index.html CHANGED Viewed

@@ -12,7 +12,7 @@
       smoke tests), the standalone entry falls back to same-origin defaults.
     -->
     <!--MODERN_ADMIN_CONFIG-->
-    <script type="module" crossorigin src="./assets/index-t4woXGa-.js"></script>
+    <script type="module" crossorigin src="./assets/index-C3MuojaM.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-CUopU_LC.js">
     <link rel="modulepreload" crossorigin href="./assets/with-selector-NDLhu4dT.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-BSbFjTlr.js">
@@ -21,9 +21,9 @@
     <link rel="modulepreload" crossorigin href="./assets/router-wFvtgo77.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-BcL2U6dT.js">
     <link rel="stylesheet" crossorigin href="./assets/index-95cwJ2RY.css">
-    <link rel="prefetch" as="script" href="./assets/home-page-HmheewiP.js">
-    <link rel="prefetch" as="script" href="./assets/icon-registry-BV44--RL.js">
-    <link rel="prefetch" as="script" href="./assets/property-renderer-DyCwdVkh.js">
+    <link rel="prefetch" as="script" href="./assets/home-page-eGVeZnKR.js">
+    <link rel="prefetch" as="script" href="./assets/icon-registry-BroqBCns.js">
+    <link rel="prefetch" as="script" href="./assets/property-renderer--LvNtRJE.js">
   </head>
   <body>
     <div id="root"></div>

package/dist/standalone/index.html.br CHANGED Viewed

Binary file

package/dist/standalone/index.html.gz CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@modern-admin/web",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "sideEffects": false,
   "description": "Pre-built React admin SPA. Mount it into a host page or let @modern-admin/nest serve the standalone bundle.",
@@ -35,6 +35,10 @@
       "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
     },
+    "./vite": {
+      "types": "./dist/config/vite.d.ts",
+      "default": "./dist/config/vite.js"
+    },
     "./standalone/*": "./dist/standalone/*",
     "./package.json": "./package.json"
   },
@@ -48,23 +52,30 @@
         "types": "./dist/lib/index.d.ts",
         "default": "./dist/lib/index.js"
       },
+      "./vite": {
+        "types": "./dist/config/vite.d.ts",
+        "default": "./dist/config/vite.js"
+      },
       "./standalone/*": "./dist/standalone/*",
       "./package.json": "./package.json"
     }
   },
   "peerDependencies": {
     "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react-dom": "^19.2.6",
+    "@tailwindcss/vite": "^4.2.4",
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.10"
   },
   "dependencies": {
-    "@modern-admin/core": "^0.3.4",
+    "@modern-admin/core": "^0.3.5",
     "@modern-admin/i18n": "^0.3.4",
-    "@modern-admin/react": "^0.3.4",
-    "@modern-admin/ui": "^0.3.4",
+    "@modern-admin/react": "^0.4.0",
+    "@modern-admin/ui": "^0.4.0",
     "@tanstack/react-query": "^5.100.9"
   },
   "devDependencies": {
-    "@modern-admin/tsconfig": "0.3.0",
+    "@modern-admin/tsconfig": "0.4.0",
     "@tailwindcss/vite": "^4.2.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -75,5 +86,16 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vite-plugin-dts": "^5.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/vite": {
+      "optional": true
+    },
+    "@vitejs/plugin-react": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   }
 }

package/src/mount.tsx CHANGED Viewed

@@ -5,15 +5,21 @@
  *   import { mount } from '@modern-admin/web'
  *   mount(document.getElementById('root')!, { apiUrl: 'https://api.example.com' })
  *
+ * This module deliberately does **not** import the stylesheet: an app that
+ * registers its own components needs to own the Tailwind root so its classes
+ * get scanned, and a second root here would compile Tailwind twice. Import it
+ * yourself, either directly or from your own CSS:
+ *
+ *   import '@modern-admin/react/styles.css'
+ *
  * For the prebuilt standalone bundle, `src/standalone.tsx` calls this for
- * you using `window.__MODERN_ADMIN__`.
+ * you using `window.__MODERN_ADMIN__` and pulls in the stylesheet.
  */
 import { StrictMode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { type ComponentLoader } from '@modern-admin/react'
 import { initTheme } from '@modern-admin/ui'
-import '@modern-admin/ui/styles.css'
 import { App } from './app.js'
 import type { ModernAdminRuntimeConfig } from './runtime-config.js'

package/src/standalone.tsx CHANGED Viewed

@@ -7,6 +7,7 @@
  * No build-time configuration — one bundle works for any deployment.
  */
+import '@modern-admin/react/styles.css'
 import { mount } from './mount.js'
 import { readWindowConfig } from './runtime-config.js'

package/src/vite.ts ADDED Viewed

@@ -0,0 +1,219 @@
+/**
+ * Vite config kit for apps that build their own copy of the admin SPA.
+ *
+ * The prebuilt `@modern-admin/web` standalone bundle registers no custom
+ * components, so any app that uses `component: '…'` on an action or
+ * `components: { edit: '…' }` on a property has to build its own bundle. That
+ * bundle has to match what `@modern-admin/nest`'s StaticUiMiddleware expects
+ * — `dist/standalone/{index.html,assets/**}` with relative `./assets/` URLs —
+ * which used to mean copying this package's `vite.config.ts` wholesale.
+ *
+ *   // vite.config.ts
+ *   import { defineAdminAppConfig } from '@modern-admin/web/vite'
+ *   export default defineAdminAppConfig({ apiProxy: 'http://localhost:3011' })
+ *
+ *   // src/main.tsx
+ *   import { mount, readWindowConfig } from '@modern-admin/web'
+ *   import './styles.css'
+ *   mount(document.getElementById('root')!, {
+ *     config: readWindowConfig(),
+ *     components: new ComponentLoader().add('SendPushForm', SendPushForm),
+ *   })
+ *
+ * `packages/web/vite.config.ts` consumes this same factory, so the kit can't
+ * drift from the bundle we ship.
+ */
+import path from 'node:path'
+import { promises as fs } from 'node:fs'
+import { promisify } from 'node:util'
+import zlib from 'node:zlib'
+import type { ConfigEnv, Plugin, PluginOption, UserConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import type { ModernAdminRuntimeConfig } from './runtime-config.js'
+const brotli = promisify(zlib.brotliCompress)
+const gzip = promisify(zlib.gzip)
+/** Layout StaticUiMiddleware resolves as `<webPackage>/dist/standalone`. */
+const STANDALONE_OUT_DIR = 'dist/standalone'
+export interface AdminAppConfigOptions {
+  /** Dev server port. Defaults to `WEB_PORT`, then 3000. */
+  port?: number
+  /**
+   * Origin of the NestJS admin API, proxied during `vite dev` so the SPA and
+   * the API stay same-origin and session cookies work (e.g.
+   * `http://localhost:3011`). Omit if you serve both yourself.
+   */
+  apiProxy?: string
+  /**
+   * Path prefixes forwarded to `apiProxy`. Defaults to the REST/auth prefix
+   * every `@modern-admin/nest` controller lives under plus the socket.io
+   * endpoint used by `@modern-admin/realtime`.
+   */
+  apiProxyPath?: string | string[]
+  /**
+   * Runtime config for `vite dev` only. In production the host server
+   * injects `window.__MODERN_ADMIN__` into the shell, so there is nothing to
+   * configure at build time — this fills the same slot while developing.
+   */
+  devConfig?: ModernAdminRuntimeConfig
+  /** Directory the standalone build writes to. Rarely worth changing. */
+  outDir?: string
+  /** Extra plugins, appended after the built-in ones. */
+  plugins?: PluginOption[]
+}
+/**
+ * Emits `.br` and `.gz` siblings next to every compressible standalone
+ * asset. StaticUiMiddleware serves whichever variant the browser's
+ * `Accept-Encoding` allows and falls back to the plain file, so this is an
+ * optimisation rather than a correctness requirement.
+ */
+export function precompressPlugin(outDir = STANDALONE_OUT_DIR): Plugin {
+  const COMPRESSIBLE = new Set(['.js', '.mjs', '.css', '.html', '.svg', '.json'])
+  const MIN_SIZE = 1024
+  return {
+    name: 'modern-admin:precompress',
+    apply: 'build',
+    async writeBundle(options) {
+      const dir = options.dir ?? path.resolve(process.cwd(), outDir)
+      const walk = async (d: string): Promise<string[]> => {
+        const entries = await fs.readdir(d, { withFileTypes: true })
+        const nested = await Promise.all(
+          entries.map((e) => (e.isDirectory() ? walk(path.join(d, e.name)) : [path.join(d, e.name)])),
+        )
+        return nested.flat()
+      }
+      const files = (await walk(dir)).filter((f) => COMPRESSIBLE.has(path.extname(f)))
+      await Promise.all(
+        files.map(async (file) => {
+          const source = await fs.readFile(file)
+          if (source.length < MIN_SIZE) return
+          const [br, gz] = await Promise.all([
+            brotli(source, { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 } }),
+            gzip(source, { level: zlib.constants.Z_BEST_COMPRESSION }),
+          ])
+          await Promise.all([fs.writeFile(`${file}.br`, br), fs.writeFile(`${file}.gz`, gz)])
+        }),
+      )
+    },
+  }
+}
+/**
+ * Injects low-priority `<link rel="prefetch">` hints for the lazy chunks a
+ * fresh session is almost certain to need right after the shell renders:
+ * the dashboard landing page, the full icon registry (sidebar), and the
+ * resource list page + property renderer (first sidebar click). The browser
+ * fetches them during idle time instead of on first navigation, without
+ * competing with the critical-path entry chunk. Relative `./assets/` hrefs
+ * are rewritten to the mount path by StaticUiMiddleware like every other
+ * asset reference.
+ */
+export function prefetchHintsPlugin(): Plugin {
+  const PREFETCH_CHUNKS = new Set(['home-page', 'icon-registry', 'list-page', 'property-renderer'])
+  return {
+    name: 'modern-admin:prefetch-hints',
+    apply: 'build',
+    transformIndexHtml: {
+      order: 'post',
+      handler(_html, ctx) {
+        const chunks = Object.values(ctx.bundle ?? {}).filter(
+          (out) => out.type === 'chunk' && out.name && PREFETCH_CHUNKS.has(out.name),
+        )
+        return chunks.map((chunk) => ({
+          tag: 'link',
+          attrs: { rel: 'prefetch', as: 'script', href: `./${chunk.fileName}` },
+          injectTo: 'head' as const,
+        }))
+      },
+    },
+  }
+}
+/**
+ * Injects `window.__MODERN_ADMIN__` while developing. In production the same
+ * slot is filled per-request by the host server (StaticUiMiddleware replaces
+ * the `<!--MODERN_ADMIN_CONFIG-->` marker, or falls back to `</head>`), so
+ * this plugin is dev-only and never affects the built bundle.
+ */
+export function devRuntimeConfigPlugin(config: ModernAdminRuntimeConfig): Plugin {
+  return {
+    name: 'modern-admin:dev-runtime-config',
+    apply: 'serve',
+    transformIndexHtml: {
+      order: 'pre',
+      handler() {
+        // `</script>` inside the JSON would close the tag early.
+        const json = JSON.stringify(config).replace(/</g, '\\u003c')
+        return [
+          {
+            tag: 'script',
+            children: `window.__MODERN_ADMIN__ = ${json};`,
+            injectTo: 'head-prepend' as const,
+          },
+        ]
+      },
+    },
+  }
+}
+/**
+ * `ws: true` so the realtime gateway's socket.io upgrade survives the proxy;
+ * `changeOrigin` keeps the session cookie's Origin check happy.
+ */
+function buildProxy(
+  target: string,
+  paths: string | string[],
+): Record<string, { target: string; changeOrigin: boolean; ws: boolean }> {
+  const list = Array.isArray(paths) ? paths : [paths]
+  return Object.fromEntries(list.map((p) => [p, { target, changeOrigin: true, ws: true }]))
+}
+/**
+ * Builds the Vite config for a custom admin SPA. Pass the result straight to
+ * `export default` — it resolves `vite dev` and `vite build` itself, so no
+ * `--mode` flag is required.
+ */
+export function defineAdminAppConfig(
+  options: AdminAppConfigOptions = {},
+): (env: ConfigEnv) => UserConfig {
+  const {
+    apiProxy,
+    apiProxyPath = ['/admin/api', '/socket.io'],
+    devConfig,
+    outDir = STANDALONE_OUT_DIR,
+    plugins: extraPlugins = [],
+  } = options
+  return ({ command }) => {
+    const shared: PluginOption[] = [react(), tailwindcss()]
+    if (command === 'build') {
+      return {
+        plugins: [...shared, precompressPlugin(outDir), prefetchHintsPlugin(), ...extraPlugins],
+        // Relative base so one bundle can be mounted under any path — the
+        // host server rewrites `./assets/` to its own mount prefix.
+        base: './',
+        build: {
+          outDir,
+          emptyOutDir: true,
+          sourcemap: true,
+        },
+      }
+    }
+    return {
+      plugins: [
+        ...shared,
+        ...(devConfig ? [devRuntimeConfigPlugin(devConfig)] : []),
+        ...extraPlugins,
+      ],
+      server: {
+        port: options.port ?? Number(process.env.WEB_PORT ?? 3000),
+        host: true,
+        ...(apiProxy ? { proxy: buildProxy(apiProxy, apiProxyPath) } : {}),
+      },
+    }
+  }
+}

package/vite.config.ts CHANGED Viewed

@@ -7,61 +7,23 @@
  * `mode` is set by Vite from the `--mode` CLI flag. Other modes (dev,
  * preview) get the standalone SPA config — that's what you serve from
  * `bun run dev`.
+ *
+ * The standalone/dev half is `defineAdminAppConfig()` from `src/vite.ts`,
+ * i.e. the very config we hand to apps that build their own bundle
+ * (`@modern-admin/web/vite`). Dogfooding it here is what stops the two from
+ * drifting apart.
  */
-import { defineConfig, type Plugin, type UserConfig } from 'vite'
+import { defineConfig, type UserConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import dts from 'vite-plugin-dts'
 import { fileURLToPath } from 'node:url'
 import path from 'node:path'
-import { promises as fs } from 'node:fs'
-import { promisify } from 'node:util'
-import zlib from 'node:zlib'
+import { defineAdminAppConfig } from './src/vite.js'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const brotli = promisify(zlib.brotliCompress)
-const gzip = promisify(zlib.gzip)
-/**
- * Emits `.br` and `.gz` siblings next to every compressible standalone
- * asset. `@modern-admin/nest`'s StaticUiMiddleware picks whichever variant
- * the browser's `Accept-Encoding` allows — no runtime compression cost.
- * Sourcemaps are skipped (fetched only with devtools open) and so are
- * files that compression wouldn't meaningfully shrink.
- */
-function precompressPlugin(): Plugin {
-  const COMPRESSIBLE = new Set(['.js', '.mjs', '.css', '.html', '.svg', '.json'])
-  const MIN_SIZE = 1024
-  return {
-    name: 'modern-admin:precompress',
-    apply: 'build',
-    async writeBundle(options) {
-      const dir = options.dir ?? path.resolve(__dirname, 'dist/standalone')
-      const walk = async (d: string): Promise<string[]> => {
-        const entries = await fs.readdir(d, { withFileTypes: true })
-        const nested = await Promise.all(
-          entries.map((e) => (e.isDirectory() ? walk(path.join(d, e.name)) : [path.join(d, e.name)])),
-        )
-        return nested.flat()
-      }
-      const files = (await walk(dir)).filter((f) => COMPRESSIBLE.has(path.extname(f)))
-      await Promise.all(
-        files.map(async (file) => {
-          const source = await fs.readFile(file)
-          if (source.length < MIN_SIZE) return
-          const [br, gz] = await Promise.all([
-            brotli(source, { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 } }),
-            gzip(source, { level: zlib.constants.Z_BEST_COMPRESSION }),
-          ])
-          await Promise.all([fs.writeFile(`${file}.br`, br), fs.writeFile(`${file}.gz`, gz)])
-        }),
-      )
-    },
-  }
-}
 // External deps for the library build — host apps provide their own copy
 // (deduped by the workspace / package manager). The standalone SPA bundle
 // inlines all of these so the served `<script>` is self-contained.
@@ -101,7 +63,7 @@ const libConfig: UserConfig = {
       entryRoot: 'src',
       outDirs: 'dist/lib',
       include: ['src/**/*.ts', 'src/**/*.tsx'],
-      exclude: ['src/standalone.tsx'],
+      exclude: ['src/standalone.tsx', 'src/vite.ts'],
     }),
   ],
   // Don't copy public/ (favicon.svg etc.) into the library output — those
@@ -122,62 +84,9 @@ const libConfig: UserConfig = {
   },
 }
-/**
- * Injects low-priority `<link rel="prefetch">` hints for the lazy chunks a
- * fresh session is almost certain to need right after the shell renders:
- * the dashboard landing page, the full icon registry (sidebar), and the
- * resource list page + property renderer (first sidebar click). The browser
- * fetches them during idle time instead of on first navigation, without
- * competing with the critical-path entry chunk. Relative `./assets/` hrefs
- * are rewritten to the mount path by StaticUiMiddleware like every other
- * asset reference.
- */
-function prefetchHintsPlugin(): Plugin {
-  const PREFETCH_CHUNKS = new Set(['home-page', 'icon-registry', 'list-page', 'property-renderer'])
-  return {
-    name: 'modern-admin:prefetch-hints',
-    apply: 'build',
-    transformIndexHtml: {
-      order: 'post',
-      handler(_html, ctx) {
-        const chunks = Object.values(ctx.bundle ?? {}).filter(
-          (out) => out.type === 'chunk' && out.name && PREFETCH_CHUNKS.has(out.name),
-        )
-        return chunks.map((chunk) => ({
-          tag: 'link',
-          attrs: { rel: 'prefetch', as: 'script', href: `./${chunk.fileName}` },
-          injectTo: 'head' as const,
-        }))
-      },
-    },
-  }
-}
-const standaloneConfig: UserConfig = {
-  plugins: [react(), tailwindcss(), precompressPlugin(), prefetchHintsPlugin()],
-  // Relative base so the same bundle can be mounted under any path
-  // (e.g. `/admin/`) — the server rewrites asset URLs in index.html.
-  base: './',
-  build: {
-    outDir: 'dist/standalone',
-    emptyOutDir: true,
-    sourcemap: true,
-    rollupOptions: {
-      input: path.resolve(__dirname, 'index.html'),
-    },
-  },
-}
-const devConfig: UserConfig = {
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: Number(process.env.WEB_PORT ?? 3000),
-    host: true,
-  },
-}
+// `vite build --mode standalone` arrives as command 'build'; `vite` and
+// `vite preview` as 'serve'. Rollup's input defaults to `<root>/index.html`,
+// which is exactly the shell this package ships.
+const adminApp = defineAdminAppConfig()
-export default defineConfig(({ mode }) => {
-  if (mode === 'lib') return libConfig
-  if (mode === 'standalone') return standaloneConfig
-  return devConfig
-})
+export default defineConfig((env) => (env.mode === 'lib' ? libConfig : adminApp(env)))