@m3ui-vue/nuxt 0.2.3 → 0.3.0

package/README.md

@@ -67,21 +67,25 @@ const toast = useM3Toast()
 ```
 
 Each component is bundled only where it's used. `MChart`, `MCodeEditor`, `MJsonEditor`, `MMarkdown`,
-`MRichTextEditor`, `MTerminal`, `MQRCode` and `MBarcode` are registered when their optional dependency is installed
-(see the library's README).
+`MRichTextEditor`, `MTerminal`, `MQRCode`, `MBarcode` and the `MMap` family are registered when their optional
+dependency is installed (see the library's README); so are `useMap`, `useMapLayers` and `useMapFilter`.
 
 The composables are prefixed so they can't clash with other modules (`useDevice`, `useTheme`… are common names):
 
 | Library | Auto-imported as |
 |---|---|
 | `useTheme` | `useM3Theme` |
+| `useThemeTokens` | `useM3ThemeTokens` |
 | `useColorPalette` | `useM3ColorPalette` |
 | `useToast` | `useM3Toast` |
 | `useNotification` | `useM3Notification` |
 | `useLocale` | `useM3Locale` |
 | `useDevice` | `useM3Device` |
 | `useWindowSizeClass` | `useM3WindowSizeClass` |
-| `useFieldBg`, `useDebounce`, `usePageProgress`, `useSpring` | `useM3FieldBg`, `useM3Debounce`, `useM3PageProgress`, `useM3Spring` |
+| `useConfetti` | `useM3Confetti` |
+| `useContainerTransform` | `useM3ContainerTransform` |
+| `useFieldBg`, `useDebounce`, `useAutoGrow`, `usePageProgress`, `useSpring`, `useScrollReveal` | `useM3FieldBg`, `useM3Debounce`, `useM3AutoGrow`, `useM3PageProgress`, `useM3Spring`, `useM3ScrollReveal` |
+| `useMap`, `useMapLayers`, `useMapFilter` (with `maplibre-gl`) | `useM3Map`, `useM3MapLayers`, `useM3MapFilter` |
 
 Anything else (types, `palettes`, `motionSprings`…) is imported from `@m3ui-vue/m3ui-vue` as usual.
 
@@ -97,6 +101,7 @@ Everything `createM3UI()` takes, plus what the module itself does:
 | `composables` | `{ prefix: 'M3' }` | Auto-import the composables with this prefix; `false` to import them yourself |
 | `css` | `true` | Add `@m3ui-vue/m3ui-vue/styles` |
 | `cookies` | `true` | Keep the theme, palette and contrast in cookies too, so the server renders with them |
+| `viewportHints` | `false` | Ask Chromium for the window's exact size with client hints, so the adaptive layouts render at it on a first visit too (that visit's request is repeated once) |
 | `themeScript` | `true` | Inline `themeInitScript()` in `<head>` |
 
 ## With @nuxtjs/i18n
@@ -145,7 +150,11 @@ a theme saved in the user's account, for instance.
 The adaptive layouts (`MNavigationSuite`, `MListDetail`, `MSupportingPane`) measure their own size, which the server
 can't. With `cookies`, the window's size is kept in a cookie too (`m3-viewport`), so from the second visit on they
 render on the server for the user's screen (one in a narrower column corrects itself on the client). On a first visit
-they render their compact layout and adapt once the page is interactive.
+there's no cookie yet: with `@m3ui-vue/m3ui-vue` 1.2.0 or later the server renders for a size standing for the kind of
+device (a phone, a tablet or a desktop, from `Sec-CH-UA-Mobile` and the user agent), and the layout settles on the exact
+one once the page is interactive; before 1.2.0, the compact layout. With `viewportHints`, Chromium sends the exact size
+on a first visit too: the server asks for it (`Accept-CH` / `Critical-CH: Sec-CH-Viewport-Width,
+Sec-CH-Viewport-Height`) and Chromium repeats that first request once with it.
 
 A `seed` default can't be generated before the app loads: on the first visit the page shows the baseline palette
 until it does (later visits use the cached scheme).

package/dist/module.d.mts

@@ -38,6 +38,13 @@ interface ModuleOptions extends Omit<M3UIOptions, 'locale'> {
      * `MListDetail`, `MSupportingPane`) render for the user's screen instead of compact. Default `true`.
      */
     cookies?: boolean;
+    /**
+     * Ask Chromium for the window's exact size with client hints (`Accept-CH` / `Critical-CH: Sec-CH-Viewport-Width,
+     * Sec-CH-Viewport-Height`), so the adaptive layouts render at it even on a first visit. It costs that first
+     * visit one repeated request in Chromium; later visits have the size in a cookie anyway. Without it, a first
+     * visit renders at a size guessed from the kind of device (phone, tablet, desktop). Needs `cookies`. Default `false`.
+     */
+    viewportHints?: boolean;
     /**
      * Inline `themeInitScript()` in `<head>`, so dark mode, the palette and the contrast level the user picked are
      * on the server-rendered page before the first paint. Default `true`.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.2.3",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
-import { defineNuxtModule, useLogger, createResolver, resolvePath, tryResolveModule, addComponent, addImports, hasNuxtModule, addTemplate, addTypeTemplate, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, resolvePath, addComponent, addImports, hasNuxtModule, addTemplate, addTypeTemplate, addPlugin, tryResolveModule } from '@nuxt/kit';
 
 const LIB = "@m3ui-vue/m3ui-vue";
 const LOCALE_PRESETS = { es: "esLocale", fr: "frLocale", pt: "ptLocale", de: "deLocale", ja: "jaLocale", zh: "zhLocale", ko: "koLocale" };
@@ -11,7 +11,8 @@ const OPTIONAL_ENTRIES = {
   [`${LIB}/rich-text-editor`]: "@tiptap/vue-3",
   [`${LIB}/terminal`]: "@xterm/xterm",
   [`${LIB}/qrcode`]: "qrcode-generator",
-  [`${LIB}/barcode`]: "jsbarcode"
+  [`${LIB}/barcode`]: "jsbarcode",
+  [`${LIB}/map`]: "maplibre-gl"
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -24,12 +25,13 @@ const module$1 = defineNuxtModule({
     composables: { prefix: "M3" },
     css: true,
     cookies: true,
+    viewportHints: false,
     themeScript: true
   },
   async setup(options, nuxt) {
     const logger = useLogger("@m3ui-vue/nuxt");
     const resolver = createResolver(import.meta.url);
-    const { components, composables, css, cookies, themeScript, locale, ...plugin } = options;
+    const { components, composables, css, cookies, viewportHints, themeScript, locale, ...plugin } = options;
     const entry = await resolvePath(LIB, { extensions: [".js", ".mjs"] });
     let api;
     try {
@@ -38,16 +40,26 @@ const module$1 = defineNuxtModule({
       logger.error(`Couldn't read ${LIB}'s dist/api.json: is ${LIB} installed?`);
       return;
     }
+    const available = /* @__PURE__ */ new Map();
+    const isAvailable = async (from) => {
+      const peer = OPTIONAL_ENTRIES[from];
+      if (!peer) return true;
+      if (!available.has(from)) available.set(from, !!await tryResolveModule(peer, nuxt.options.modulesDir));
+      return available.get(from);
+    };
     if (components) {
       for (const component of api.components) {
-        const peer = OPTIONAL_ENTRIES[component.import];
-        if (peer && !await tryResolveModule(peer, nuxt.options.modulesDir)) continue;
+        if (!await isAvailable(component.import)) continue;
         addComponent({ name: component.name, export: component.name, filePath: component.import });
       }
     }
     if (composables) {
       const prefix = typeof composables === "object" ? composables.prefix ?? "" : "M3";
-      addImports(api.values.filter((value) => /^use[A-Z]/.test(value.name)).map((value) => ({ name: value.name, as: `use${prefix}${value.name.slice(3)}`, from: value.import })));
+      const values = [];
+      for (const value of api.values) {
+        if (/^use[A-Z]/.test(value.name) && await isAvailable(value.import)) values.push(value);
+      }
+      addImports(values.map((value) => ({ name: value.name, as: `use${prefix}${value.name.slice(3)}`, from: value.import })));
     }
     if (css) nuxt.options.css.push(`${LIB}/styles`);
     const auto = locale === "auto";
@@ -68,6 +80,7 @@ const module$1 = defineNuxtModule({
         `export const autoLocale = ${auto}`,
         `export const localePresets = ${auto ? `{ ${Object.entries(LOCALE_PRESETS).map(([code, name]) => `${code}: presets.${name}`).join(", ")} }` : "{}"}`,
         `export const cookies = ${JSON.stringify(cookies)}`,
+        `export const viewportHints = ${JSON.stringify(!!viewportHints)}`,
         `export const themeScript = ${JSON.stringify(themeScript)}`
       ].join("\n")
     });
@@ -80,6 +93,7 @@ const module$1 = defineNuxtModule({
         `  export const autoLocale: boolean`,
         `  export const localePresets: Record<string, Partial<import('${LIB}').M3Locale>>`,
         `  export const cookies: boolean`,
+        `  export const viewportHints: boolean`,
         `  export const themeScript: boolean`,
         `}`
       ].join("\n")

package/dist/runtime/plugin.js

@@ -1,18 +1,34 @@
 import { computed } from "vue";
+import * as m3 from "@m3ui-vue/m3ui-vue";
 import { createM3UI, themeInitScript } from "@m3ui-vue/m3ui-vue";
-import { defineNuxtPlugin, useCookie, useHead } from "#app";
-import { autoLocale, cookies, locale, localePresets, options, themeScript } from "#build/m3ui.options.mjs";
+import { defineNuxtPlugin, useCookie, useHead, useRequestEvent, useRequestHeaders, useState } from "#app";
+import { autoLocale, cookies, locale, localePresets, options, themeScript, viewportHints } from "#build/m3ui.options.mjs";
+const fromHeaders = m3.viewportFromHeaders;
+const HINTS = "Sec-CH-Viewport-Width, Sec-CH-Viewport-Height";
 export default defineNuxtPlugin({
   name: "m3ui",
   enforce: "pre",
   setup(nuxtApp) {
     const read = (name) => useCookie(name, { decode: decodeURIComponent, readonly: true }).value;
-    const [width, height] = (read("m3-viewport") ?? "").split("x").map(Number);
+    const viewport = useState("m3ui-viewport", () => {
+      if (import.meta.server && fromHeaders) return fromHeaders(useRequestHeaders()) ?? null;
+      const [width, height] = (read("m3-viewport") ?? "").split("x").map(Number);
+      return width && height ? { width, height } : null;
+    });
+    if (import.meta.server && cookies && viewportHints) {
+      const res = useRequestEvent()?.node.res;
+      if (res && !res.headersSent) {
+        res.setHeader("Accept-CH", HINTS);
+        res.setHeader("Critical-CH", HINTS);
+        const vary = [res.getHeader("Vary")].flat().filter(Boolean).join(", ");
+        res.setHeader("Vary", vary ? `${vary}, ${HINTS}` : HINTS);
+      }
+    }
     const initialState = cookies ? {
       theme: read("m3-theme"),
       palette: read("m3-palette"),
       contrast: read("m3-contrast"),
-      viewport: width && height ? { width, height } : void 0
+      viewport: viewport.value ?? void 0
     } : void 0;
     const appLocale = autoLocale ? computed(() => {
       const i18n = nuxtApp.$i18n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3ui-vue/nuxt",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Nuxt module for m3ui-vue, the Material Design 3 component library for Vue 3 + Tailwind CSS v4",
   "keywords": [
     "nuxt",
@@ -16,6 +16,7 @@
     "type": "git",
     "url": "git+https://github.com/SrWither/m3ui-vue-nuxt.git"
   },
+  "funding": "https://github.com/sponsors/SrWither",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -52,7 +53,7 @@
     "@m3ui-vue/m3ui-vue": "^1.1.3"
   },
   "devDependencies": {
-    "@m3ui-vue/m3ui-vue": "^1.1.3",
+    "@m3ui-vue/m3ui-vue": "^1.2.0",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.2",
     "@nuxt/test-utils": "^4.3.4",