@webround/core 0.3.8 → 0.3.10

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();
@@ -28,10 +43,29 @@ export function WrSeoHead({ site, config, pathname, lang, langs }) {
     const path = langs ? wrBuildLangPath('default', pathname, langs) : pathname;
     const dynamic = useSyncExternalStore(subscribe, () => dynamicSeo, () => undefined);
     const { title, tags, jsonLd } = wrSeoTags({ site, page: { ...wrSeoPageOf(config), ...dynamic }, path, lang, langs });
-    return (_jsxs(_Fragment, { children: [title && _jsx("title", { children: title }), tags.map(({ tag, attrs }) => {
+    // The `<title>` that `index.html` has (a placeholder, the page app's own) is not the page's: when the page has one of its own, the head must have only that, as the HTML a crawler gets says it
+    useEffect(() => {
+        if (title)
+            document.head.querySelectorAll('title:not([data-wr-seo])').forEach((other) => other.remove());
+    }, [title]);
+    // 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/dist/seo.d.ts

@@ -139,8 +139,10 @@ export interface WrSnapshotTarget {
     file: string;
 }
 /**
- * Where the prerendered HTML of an address goes in `dist/`: the home of a language is `<lang>/index.html` (the default language has no prefix:
- * its home is `index.html`), any other address is `<address>.html` (`/en/about` → `en/about.html`, `/about` → `about.html`).
+ * Where the prerendered HTML of an address goes in `dist/`, as the worker that serves the sites looks for it (the same layout the v1 sites have): a folder for the language and, in it, the home as
+ * `index.html` and any other page as `<page>.html`: `/en` → `en/index.html`, `/en/about` → `en/about.html`. The default language has no prefix in the address and its folder is `default`:
+ * `/` → `default/index.html`, `/about` → `default/about.html`. The build's own `index.html` (the page app, with no page in it) is never one of these: it is what any other address is served.
+ * A page with a longer address keeps it whole (`/en/about/team` → `en/about/team.html`).
  */
 export declare function wrSnapshotFile(path: string, langs?: WrLangConfig): string;
 /**

package/dist/seo.js

@@ -159,16 +159,17 @@ export function wrSeoEntries(input) {
     });
 }
 /**
- * Where the prerendered HTML of an address goes in `dist/`: the home of a language is `<lang>/index.html` (the default language has no prefix:
- * its home is `index.html`), any other address is `<address>.html` (`/en/about` → `en/about.html`, `/about` → `about.html`).
+ * Where the prerendered HTML of an address goes in `dist/`, as the worker that serves the sites looks for it (the same layout the v1 sites have): a folder for the language and, in it, the home as
+ * `index.html` and any other page as `<page>.html`: `/en` → `en/index.html`, `/en/about` → `en/about.html`. The default language has no prefix in the address and its folder is `default`:
+ * `/` → `default/index.html`, `/about` → `default/about.html`. The build's own `index.html` (the page app, with no page in it) is never one of these: it is what any other address is served.
+ * A page with a longer address keeps it whole (`/en/about/team` → `en/about/team.html`).
  */
 export function wrSnapshotFile(path, langs) {
     const segments = path.split('/').filter(Boolean);
-    if (segments.length === 0)
-        return 'index.html';
-    if (segments.length === 1 && langs?.available.includes(segments[0]))
-        return `${segments[0]}/index.html`;
-    return `${segments.join('/')}.html`;
+    const isLanguage = segments.length > 0 && !!langs?.available.includes(segments[0]);
+    const folder = isLanguage && segments[0] !== langs?.default ? segments[0] : 'default';
+    const page = isLanguage ? segments.slice(1) : segments;
+    return page.length === 0 ? `${folder}/index.html` : `${folder}/${page.join('/')}.html`;
 }
 /**
  * The pages a build prerenders: every page with a fixed address, in every language, but those marked noindex (a crawler is told to leave them

package/package.json

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