@webstudio-is/react-sdk 0.199.0 → 0.200.0

package/lib/runtime.js

@@ -167,12 +167,41 @@ var PageSettingsTitle = (props) => {
   return /* @__PURE__ */ jsx2("title", { ...localProps });
 };
 
+// src/page-settings-canonical-link.tsx
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var isServer3 = typeof window === "undefined";
+var PageSettingsCanonicalLink = (props) => {
+  const [localProps, setLocalProps] = useState4();
+  useEffect3(() => {
+    const selector = `head > link[rel="canonical"]`;
+    let allLinks = document.querySelectorAll(selector);
+    for (const meta of allLinks) {
+      if (!isElementRenderedWithReact(meta)) {
+        meta.remove();
+      }
+    }
+    allLinks = document.querySelectorAll(selector);
+    if (allLinks.length === 0) {
+      setLocalProps(props);
+    }
+  }, [props]);
+  if (isServer3) {
+    return /* @__PURE__ */ jsx3("link", { rel: "canonical", ...props });
+  }
+  if (localProps === void 0) {
+    return;
+  }
+  return /* @__PURE__ */ jsx3("link", { rel: "canonical", ...localProps });
+};
+
 // src/runtime.ts
 var xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
 var getIndexWithinAncestorFromComponentProps = (props) => {
   return props["data-ws-index"];
 };
 export {
+  PageSettingsCanonicalLink,
   PageSettingsMeta,
   PageSettingsTitle,
   ReactSdkContext,

package/lib/types/page-settings-canonical-link.d.ts

@@ -0,0 +1,17 @@
+type PageSettingsCanonicalLinkProps = {
+    href: string;
+};
+/**
+ * Link canonical tag are deduplicated on the server using the HTMLRewriter interface.
+ * This is not full deduplication. We simply skip rendering Page Setting link
+ * if it has already been rendered using HeadSlot/HeadLink.
+ * To prevent React on the client from re-adding the removed link tag, we skip rendering them client-side.
+ * This approach works because React retains server-rendered link tag as long as they are not re-rendered by the client.
+ *
+ * The following component behavior ensures this:
+ * 1. On the server: Render link tag as usual.
+ * 2. On the client: Before rendering, remove any link tag with the same `name` or `property` that were not rendered by Client React,
+ *    and then proceed with rendering as usual.
+ */
+export declare const PageSettingsCanonicalLink: (props: PageSettingsCanonicalLinkProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/lib/types/runtime.d.ts

@@ -3,6 +3,7 @@ export * from "./hook";
 export * from "./variable-state";
 export { PageSettingsMeta } from "./page-settings-meta";
 export { PageSettingsTitle } from "./page-settings-title";
+export { PageSettingsCanonicalLink } from "./page-settings-canonical-link";
 /**
  * React has issues rendering certain elements, such as errors when a <link> element has children.
  * To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.199.0",
+  "version": "0.200.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -15,7 +15,7 @@
     "vitest": "^3.0.2",
     "zod": "^3.22.4",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.199.0"
+    "@webstudio-is/template": "0.200.0"
   },
   "peerDependencies": {
     "react": "18.3.0-canary-14898b6a9-20240318",
@@ -26,11 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.9",
-    "@webstudio-is/css-engine": "0.199.0",
-    "@webstudio-is/icons": "^0.199.0",
-    "@webstudio-is/sdk": "0.199.0",
-    "@webstudio-is/image": "0.199.0",
-    "@webstudio-is/fonts": "0.199.0"
+    "@webstudio-is/css-engine": "0.200.0",
+    "@webstudio-is/icons": "^0.200.0",
+    "@webstudio-is/sdk": "0.200.0",
+    "@webstudio-is/image": "0.200.0",
+    "@webstudio-is/fonts": "0.200.0"
   },
   "exports": {
     ".": {