@webround/core 0.3.9 → 0.3.11

package/dist/context/WrAppContext.js

@@ -1,9 +1,9 @@
 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 { createBrowserRouter, matchRoutes, RouterProvider, useLocation, useParams } from 'react-router-dom';
 import { WrScroll } from '../scroll';
-import { wrResolveRoutes, wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, wrExpandRoutesForLangs, wrExtractLang, wrBuildLangPath, } from '../routing';
+import { wrResolveRoutes, wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, wrExpandRoutesForLangs, wrExtractLang, wrBuildLangPath, wrHomeOf, } from '../routing';
 import { WrPageProvider } from './WrPageContext';
 import { WrLayout } from './WrLayout';
 import { WrSharedContext } from '../components/WrShared';
@@ -50,6 +50,24 @@ function WrRouteElement({ route, pageConfigMap, lazyFallback: LazyFallback, Page
         })();
     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));
 }
+/**
+ * An address that leads to no page is the home page. The address is replaced BEFORE the router reads it, so the first render is the home page's: what was served for that address is the home page's
+ * snapshot, and the app takes it over (hydrates it) only if it draws the same page. A redirect after the first render would draw nothing at first, and React neither takes over nor removes what it did not claim.
+ */
+function replaceUnknownAddress(routes, notFound, langs) {
+    if (typeof window === 'undefined')
+        return;
+    const { pathname, search, hash } = window.location;
+    const matches = matchRoutes(routes, pathname);
+    const match = matches?.[matches.length - 1];
+    // `/:lang/…` answers for any word in that place: only the languages of the site are one (see WrRouteElement)
+    const unknownLang = !!langs && match?.params.lang !== undefined && !langs.available.includes(match.params.lang);
+    if (match?.route !== notFound && !unknownLang)
+        return;
+    const home = wrHomeOf(pathname, langs);
+    if (home !== pathname)
+        window.history.replaceState(window.history.state, '', `${home}${search}${hash}`);
+}
 export function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang = 'default', lazyFallback = WrDefaultPageFallback, onRouterReady, PageProvider = WrPageProvider, Header, Footer, seo, children, }) {
     const router = useMemo(() => {
         const registry = wrBuildRegistry(eagerModules);
@@ -60,14 +78,17 @@ export function WrAppProvider({ routesFile, eagerModules, lazyModules, configMod
             console.error('[wr] unresolved route -> component mappings:', errors.missingComponents);
         }
         const expandedRoutes = wrExpandRoutesForLangs(routes, langs);
-        const builtRouter = createBrowserRouter([
+        // An address that leads to no page takes the visitor to the home page
+        const notFound = { path: '*', element: _jsx(WrNotFound, { langs: langs }) };
+        const routeObjects = [
             ...expandedRoutes.map((route) => ({
                 path: route.pattern,
                 element: _jsx(WrRouteElement, { route: route, pageConfigMap: pageConfigMap, lazyFallback: lazyFallback, PageProvider: PageProvider, Header: Header, Footer: Footer, seo: seo, langs: langs })
             })),
-            // An address that leads to no page takes the visitor to the home page
-            { path: '*', element: _jsx(WrNotFound, { langs: langs }) },
-        ]);
+            notFound,
+        ];
+        replaceUnknownAddress(routeObjects, notFound, langs);
+        const builtRouter = createBrowserRouter(routeObjects);
         onRouterReady?.(builtRouter.navigate);
         return builtRouter;
     }, [routesFile, eagerModules, lazyModules, configModules, langs, lazyFallback, onRouterReady, PageProvider, Header, Footer, seo]);

package/dist/seo-react.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { wrSeoPageOf, wrSeoTags } from './seo.js';
 import { wrBuildLangPath } from './routing.js';
 const PROP = { hreflang: 'hrefLang' };
+// What marks a tag as this component's: the `<title>` the placeholder of `index.html` is told from, and the tags a snapshot was saved with
+const SEO_MARK = 'data-wr-seo';
+// What a tag is, apart from what it says: the title, a `<meta>` by its name or property, a `<link>` by its `rel` (and language). Structured data has no name: it is told by what it says (null)
+function tagKey(tag) {
+    const name = tag.tagName.toLowerCase();
+    if (name === 'title')
+        return 'title';
+    if (name === 'meta') {
+        const key = tag.getAttribute('name') ?? tag.getAttribute('property');
+        return key ? `meta:${key}` : null;
+    }
+    if (name === 'link')
+        return `link:${tag.getAttribute('rel')}:${tag.getAttribute('hreflang') ?? ''}`;
+    return null;
+}
 // What a page whose texts come from data (a product) says about itself, on top of what its JSON says. One page is shown at a time, so it is one value: the page sets it while it is shown, `WrSeoHead` reads it.
 let dynamicSeo;
 const listeners = new Set();
@@ -33,10 +48,24 @@ export function WrSeoHead({ site, config, pathname, lang, langs }) {
         if (title)
             document.head.querySelectorAll('title:not([data-wr-seo])').forEach((other) => other.remove());
     }, [title]);
-    return (_jsxs(_Fragment, { children: [title && _jsx("title", { "data-wr-seo": "", children: title }), tags.map(({ tag, attrs }) => {
+    // The page came with these tags in its head (they carry `data-wr-seo`): a snapshot saved them, and the Worker adds a product's. The app draws its own when it starts, and the ones it draws are the ones it
+    // keeps up to date, so a tag that came with the page goes as soon as the app draws the one with the same name. Until then (a product's data has not come) it stays: it is the best the page has said.
+    const saved = useRef(null);
+    saved.current ?? (saved.current = typeof document === 'undefined' ? [] : [...document.head.querySelectorAll(`[${SEO_MARK}]`)]);
+    const drawn = JSON.stringify({ title, tags, jsonLd });
+    useEffect(() => {
+        const mine = [...document.head.querySelectorAll(`[${SEO_MARK}]`)].filter((tag) => !saved.current?.includes(tag));
+        for (const tag of saved.current ?? []) {
+            const key = tagKey(tag);
+            if (mine.some((other) => (key ? tagKey(other) === key : other.isEqualNode(tag))))
+                tag.remove();
+        }
+        saved.current = saved.current?.filter((tag) => tag.isConnected) ?? [];
+    }, [drawn]);
+    return (_jsxs(_Fragment, { children: [title && _jsx("title", { [SEO_MARK]: '', children: title }), tags.map(({ tag, attrs }) => {
                 const props = Object.fromEntries(Object.entries(attrs).map(([key, value]) => [PROP[key] ?? key, value]));
                 const key = `${tag}:${attrs.name ?? attrs.property ?? `${attrs.rel}:${attrs.hreflang ?? ''}`}`;
-                return tag === 'meta' ? _jsx("meta", { ...props }, key) : _jsx("link", { ...props }, key);
-            }), jsonLd.map((body, index) => _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: body } }, `ld:${index}`))] }));
+                return tag === 'meta' ? _jsx("meta", { [SEO_MARK]: '', ...props }, key) : _jsx("link", { [SEO_MARK]: '', ...props }, key);
+            }), jsonLd.map((body, index) => _jsx("script", { type: "application/ld+json", [SEO_MARK]: '', dangerouslySetInnerHTML: { __html: body } }, `ld:${index}`))] }));
 }
 //# sourceMappingURL=seo-react.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webround/core",
-    "version": "0.3.9",
+    "version": "0.3.11",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",