@webround/core 0.3.2 → 0.3.4

package/dist/context/WrAppContext.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/core/src/context/WrAppContext.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useMemo, useSyncExternalStore, lazy, Suspense, } from 'react';
 import { createBrowserRouter, RouterProvider, useLocation, useParams } from 'react-router-dom';
+import { WrScroll } from '../scroll';
 import { wrResolveRoutes, wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, wrExpandRoutesForLangs, wrExtractLang, wrBuildLangPath, } from '../routing';
 import { WrPageProvider } from './WrPageContext';
 import { WrLayout } from './WrLayout';
@@ -47,7 +48,7 @@ function WrRouteElement({ route, pageConfigMap, lazyFallback: LazyFallback, Page
             const Component = route.Component;
             return _jsx(Component, {});
         })();
-    return (_jsx(PageProvider, { config: config, pageName: pageName, children: _jsxs(WrSharedContext.Provider, { value: shared, children: [_jsx(WrSeoHead, { site: seo, config: config, pathname: pathname, lang: lang, langs: langs }), _jsx(WrLayout, { Header: Header, Footer: Footer, showHeader: route.header, showFooter: route.footer, pageConfigMap: pageConfigMap, ScopeProvider: PageProvider, children: body })] }) }, pageName));
+    return (_jsxs(PageProvider, { config: config, pageName: pageName, children: [_jsx(WrScroll, {}), _jsxs(WrSharedContext.Provider, { value: shared, children: [_jsx(WrSeoHead, { site: seo, config: config, pathname: pathname, lang: lang, langs: langs }), _jsx(WrLayout, { Header: Header, Footer: Footer, showHeader: route.header, showFooter: route.footer, pageConfigMap: pageConfigMap, ScopeProvider: PageProvider, children: body })] })] }, pageName));
 }
 export function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang = 'default', lazyFallback = WrDefaultPageFallback, onRouterReady, PageProvider = WrPageProvider, Header, Footer, seo, children, }) {
     const router = useMemo(() => {

package/dist/routing.d.ts

@@ -115,6 +115,16 @@ export declare function wrExtractLang(pathname: string, langs: WrLangConfig): La
 export declare function wrBuildLangPath(targetLang: LangCode, pathname: string, langs: WrLangConfig): string;
 /** Where an address that leads to no page goes: the home page of the language it is in (`/en/nope` → `/en`, `/nope` → `/`). */
 export declare function wrHomeOf(pathname: string, langs?: WrLangConfig): string;
+export type WrScrollAction = 'anchor' | 'top' | 'none';
+/**
+ * What the scroll does when the address changes (the one rule, used by `WrScroll`). A link to a place of a page (`#list`) goes to that place; a NEW page (another path) starts at the top;
+ * "back" and "forward" leave it to the browser, which puts the page where it was left; and the same page in another state (a change of the query: the filters or the page of a shop) keeps its place.
+ * `previous` is the path of the page before, `null` for the first one the visitor sees.
+ */
+export declare function wrScrollAction(previous: string | null, location: {
+    pathname: string;
+    hash: string;
+}, navigationType: 'PUSH' | 'REPLACE' | 'POP'): WrScrollAction;
 /** An address that leaves the site: it has a scheme (`https:`, `mailto:`, `tel:`) or starts with `//`. Anything else is the site's own and is a router `Link`, whatever `target` it was given. */
 export declare const wrIsExternalHref: (href: string) => boolean;
 export declare function wrLocalizeHref(href: string, lang: string): string;

package/dist/routing.js

@@ -178,6 +178,18 @@ export function wrBuildLangPath(targetLang, pathname, langs) {
 export function wrHomeOf(pathname, langs) {
     return langs ? wrBuildLangPath(wrExtractLang(pathname, langs), '/', langs) : '/';
 }
+/**
+ * What the scroll does when the address changes (the one rule, used by `WrScroll`). A link to a place of a page (`#list`) goes to that place; a NEW page (another path) starts at the top;
+ * "back" and "forward" leave it to the browser, which puts the page where it was left; and the same page in another state (a change of the query: the filters or the page of a shop) keeps its place.
+ * `previous` is the path of the page before, `null` for the first one the visitor sees.
+ */
+export function wrScrollAction(previous, location, navigationType) {
+    if (location.hash)
+        return 'anchor';
+    if (previous === null || previous === location.pathname)
+        return 'none';
+    return navigationType === 'POP' ? 'none' : 'top';
+}
 /** An address that leaves the site: it has a scheme (`https:`, `mailto:`, `tel:`) or starts with `//`. Anything else is the site's own and is a router `Link`, whatever `target` it was given. */
 export const wrIsExternalHref = (href) => /^([a-z][a-z0-9+.-]*:|\/\/)/i.test(href);
 export function wrLocalizeHref(href, lang) {

package/dist/scroll.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Puts the scroll where a visitor expects it when the address changes: at the top on a new page, at the place a link points to, and leaves it alone on the same page in another state
+ * (the rule is `wrScrollAction`). Renders nothing. One per page, inside the router; core and editor mount the same one.
+ */
+export declare function WrScroll(): null;
+//# sourceMappingURL=scroll.d.ts.map

package/dist/scroll.js

@@ -0,0 +1,31 @@
+import { useLayoutEffect } from 'react';
+import { useLocation, useNavigationType } from 'react-router-dom';
+import { wrScrollAction } from './routing';
+// The path of the page before: kept here and not in the component, because the component is inside the page, which is made again for every page (its `key` is the page's name)
+let previousPath = null;
+/**
+ * Puts the scroll where a visitor expects it when the address changes: at the top on a new page, at the place a link points to, and leaves it alone on the same page in another state
+ * (the rule is `wrScrollAction`). Renders nothing. One per page, inside the router; core and editor mount the same one.
+ */
+export function WrScroll() {
+    const { pathname, hash } = useLocation();
+    const type = useNavigationType();
+    useLayoutEffect(() => {
+        const before = previousPath;
+        previousPath = pathname;
+        let action = wrScrollAction(before, { pathname, hash }, type);
+        if (action === 'anchor') {
+            const place = document.getElementById(decodeURIComponent(hash.slice(1)));
+            if (place) {
+                place.scrollIntoView();
+                return;
+            }
+            // a place that is not there: the page is treated as if the link had no `#`
+            action = wrScrollAction(before, { pathname, hash: '' }, type);
+        }
+        if (action === 'top')
+            window.scrollTo(0, 0);
+    }, [pathname, hash, type]);
+    return null;
+}
+//# sourceMappingURL=scroll.js.map

package/dist/seo.d.ts

@@ -74,6 +74,9 @@ export type WrSeoJsonLd = WrJsonLd[] | Record<string, WrJsonLd[]>;
 export declare const WR_ROBOTS_FILE = "robots.txt";
 export declare const WR_SITEMAP_INDEX_FILE = "sitemap-index.xml";
 export declare const WR_SITEMAP_PAGES_FILE = "sitemap-pages.xml";
+/** The sitemaps the shop's server writes every day (not the build): a site with the page of a product (or of a collection) always has its index point to the sitemap of them. */
+export declare const WR_SITEMAP_PRODUCTS_FILE = "sitemap-products.xml";
+export declare const WR_SITEMAP_COLLECTIONS_FILE = "sitemap-collections.xml";
 /** A page's SEO data out of its JSON (an empty object when it says nothing). */
 export declare function wrSeoPageOf(config: WrPageConfig | undefined): WrSeoPage;
 /** The site's address without a trailing slash, or undefined when it is not an http(s) address. */

package/dist/seo.js

@@ -20,6 +20,10 @@ export function wrSearchConsoleCode(input) {
 export const WR_ROBOTS_FILE = 'robots.txt';
 export const WR_SITEMAP_INDEX_FILE = 'sitemap-index.xml';
 export const WR_SITEMAP_PAGES_FILE = 'sitemap-pages.xml';
+/** The sitemaps the shop's server writes every day (not the build): a site with the page of a product (or of a collection) always has its index point to the sitemap of them. */
+export const WR_SITEMAP_PRODUCTS_FILE = 'sitemap-products.xml';
+export const WR_SITEMAP_COLLECTIONS_FILE = 'sitemap-collections.xml';
+const WR_SHOP_SITEMAPS = { 'product/[slug]': WR_SITEMAP_PRODUCTS_FILE, 'shop/[slug]': WR_SITEMAP_COLLECTIONS_FILE };
 /** A page's SEO data out of its JSON (an empty object when it says nothing). */
 export function wrSeoPageOf(config) {
     const raw = config?.[WR_SEO_KEY];
@@ -211,10 +215,12 @@ export function wrSeoFiles(input) {
     if (!siteUrl)
         return null;
     const entries = wrSeoEntries(input);
-    const extra = (input.site?.extraSitemaps ?? []).filter(name => typeof name === 'string' && name.trim() && name !== WR_SITEMAP_PAGES_FILE);
+    // The shop's sitemaps are cited whether the files exist yet or not: the server writes them daily and the index must already say where they are
+    const own = [WR_SITEMAP_PAGES_FILE, ...Object.entries(WR_SHOP_SITEMAPS).filter(([route]) => route in input.routes).map(([, file]) => file)];
+    const extra = (input.site?.extraSitemaps ?? []).filter(name => typeof name === 'string' && name.trim() && !own.includes(name));
     return {
         [WR_ROBOTS_FILE]: wrRobotsTxt(siteUrl),
-        [WR_SITEMAP_INDEX_FILE]: wrSitemapIndexXml(siteUrl, [WR_SITEMAP_PAGES_FILE, ...extra]),
+        [WR_SITEMAP_INDEX_FILE]: wrSitemapIndexXml(siteUrl, [...own, ...extra]),
         [WR_SITEMAP_PAGES_FILE]: wrSitemapPagesXml(entries, input.langs),
     };
 }

package/dist/theme.d.ts

@@ -19,4 +19,10 @@ export declare function wrThemeHasDark(css: string): boolean;
 export declare function wrThemeStartsFromSystem(css: string): boolean;
 /** Whether the page's stylesheets have a `.dark` rule: the same definition as `wrThemeHasDark`, read from the page the visitor has (the toggle is only there when it can do something). */
 export declare function wrThemeSiteHasDark(doc: Document): boolean;
+/** The weights as they are written into the theme: only what is a weight, once each, in order; nothing left is `undefined` (Google's own default). */
+export declare function wrGoogleWeights(weights: string | undefined): string | undefined;
+/** The `family=…` part of the address of Google's stylesheet for one family: `family=Inter:wght@400;700`, and with an italic one `family=Inter:ital,wght@0,400;1,400`. */
+export declare function wrGoogleFamilyParam(family: string, weights?: string): string;
+/** The weights of a family in the address of a stylesheet (what follows the `:` of `family=Inter:ital,wght@0,400;1,400`), as the theme says them. */
+export declare function wrGoogleWeightsOfParam(axes: string | undefined): string | undefined;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.js

@@ -42,4 +42,50 @@ export function wrThemeSiteHasDark(doc) {
         return false;
     } });
 }
+const GOOGLE_WEIGHT = /^(\d{1,4})(?:\.\.(\d{1,4}))?(i?)$/;
+function wrGoogleWeightsParsed(weights) {
+    const found = new Map();
+    for (const part of (weights ?? '').split(';')) {
+        const match = GOOGLE_WEIGHT.exec(part.trim());
+        if (!match)
+            continue;
+        const from = Number(match[1]);
+        const to = match[2] === undefined ? null : Number(match[2]);
+        if (from < 1 || from > 1000 || (to !== null && (to > 1000 || to < from)))
+            continue;
+        const weight = { from, to: to === from ? null : to, italic: match[3] === 'i' };
+        found.set(wrGoogleWeightText(weight), weight);
+    }
+    // Upright first, then italic, each by weight: the order Google asks for
+    return [...found.values()].sort((a, b) => Number(a.italic) - Number(b.italic) || a.from - b.from);
+}
+const wrGoogleWeightValue = ({ from, to }) => (to === null ? `${from}` : `${from}..${to}`);
+const wrGoogleWeightText = (weight) => `${wrGoogleWeightValue(weight)}${weight.italic ? 'i' : ''}`;
+/** The weights as they are written into the theme: only what is a weight, once each, in order; nothing left is `undefined` (Google's own default). */
+export function wrGoogleWeights(weights) {
+    const parsed = wrGoogleWeightsParsed(weights);
+    return parsed.length > 0 ? parsed.map(wrGoogleWeightText).join(';') : undefined;
+}
+/** The `family=…` part of the address of Google's stylesheet for one family: `family=Inter:wght@400;700`, and with an italic one `family=Inter:ital,wght@0,400;1,400`. */
+export function wrGoogleFamilyParam(family, weights) {
+    const name = encodeURIComponent(family.trim()).replace(/%20/g, '+');
+    const parsed = wrGoogleWeightsParsed(weights);
+    if (parsed.length === 0)
+        return `family=${name}`;
+    if (parsed.some(weight => weight.italic))
+        return `family=${name}:ital,wght@${parsed.map(weight => `${weight.italic ? 1 : 0},${wrGoogleWeightValue(weight)}`).join(';')}`;
+    return `family=${name}:wght@${parsed.map(wrGoogleWeightValue).join(';')}`;
+}
+/** The weights of a family in the address of a stylesheet (what follows the `:` of `family=Inter:ital,wght@0,400;1,400`), as the theme says them. */
+export function wrGoogleWeightsOfParam(axes) {
+    if (!axes)
+        return undefined;
+    if (axes.startsWith('wght@'))
+        return wrGoogleWeights(axes.slice('wght@'.length));
+    if (axes.startsWith('ital,wght@')) {
+        const parts = axes.slice('ital,wght@'.length).split(';').map(tuple => tuple.split(','));
+        return wrGoogleWeights(parts.map(([ital, value]) => `${value}${ital === '1' ? 'i' : ''}`).join(';'));
+    }
+    return undefined;
+}
 //# sourceMappingURL=theme.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webround/core",
-    "version": "0.3.2",
+    "version": "0.3.4",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -61,6 +61,11 @@
             "types": "./dist/seo-react.d.ts",
             "development": "./src/seo-react.tsx"
         },
+        "./scroll": {
+            "import": "./dist/scroll.js",
+            "types": "./dist/scroll.d.ts",
+            "development": "./src/scroll.tsx"
+        },
         "./not-found": {
             "import": "./dist/not-found.js",
             "types": "./dist/not-found.d.ts",