@webround/core 0.3.9 → 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();
@@ -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.10",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",