[pull] main from webstudio-is:main

apps/builder/app/builder/features/style-panel/style-source/style-source-badge.tsx

@@ -16,10 +16,10 @@ export const StyleSourceBadge = styled(Text, {
   variants: {
     source: {
       local: {
-        backgroundColor: theme.colors.backgroundStyleSourceLocal,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
       },
       token: {
-        backgroundColor: theme.colors.backgroundStyleSourceToken,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
       },
       tag: {
         backgroundColor: theme.colors.backgroundStyleSourceTag,

apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx

@@ -96,14 +96,14 @@ const StyleSourceContainer = styled(Box, {
     source: {
       local: {
         order: 1,
-        backgroundColor: theme.colors.backgroundStyleSourceLocal,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
         [menuTriggerGradientVar]:
-          theme.colors.backgroundStyleSourceGradientLocal,
+          theme.colors.backgroundStyleSourceGradientSelected,
       },
       token: {
-        backgroundColor: theme.colors.backgroundStyleSourceToken,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
         [menuTriggerGradientVar]:
-          theme.colors.backgroundStyleSourceGradientToken,
+          theme.colors.backgroundStyleSourceGradientSelected,
       },
       tag: {
         backgroundColor: theme.colors.backgroundStyleSourceTag,
@@ -161,10 +161,10 @@ const StyleSourceState = styled(Text, {
   variants: {
     source: {
       local: {
-        backgroundColor: theme.colors.backgroundStyleSourceLocal,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
       },
       token: {
-        backgroundColor: theme.colors.backgroundStyleSourceToken,
+        backgroundColor: theme.colors.backgroundStyleSourceSelected,
       },
       tag: {
         backgroundColor: theme.colors.backgroundStyleSourceTag,

apps/builder/app/builder/shared/binding-popover.tsx

@@ -327,12 +327,12 @@ const BindingButton = forwardRef<
               width: 12,
               height: 12,
               borderRadius: "50%",
-              backgroundColor: theme.colors.backgroundStyleSourceToken,
+              backgroundColor: theme.colors.backgroundStyleSourceSelected,
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
               "&[data-variant=bound]": {
-                backgroundColor: theme.colors.backgroundStyleSourceLocal,
+                backgroundColor: theme.colors.backgroundStyleSourceSelected,
               },
               "&[data-variant=overwritten]": {
                 backgroundColor: theme.colors.borderOverwrittenMain,

fixtures/ssg-cloudflare-pages/pages/another-page/+Page.tsx

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
@@ -12,21 +13,40 @@ import {
   siteName,
 } from "../../app/__generated__/[another-page]._index";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
+    <ReactSdkContext.Provider value={sdkContext}>
       <LinkCurrentUrlContext.Provider value={url}>
-        {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-        <Page key={url} system={system} />
+        <PageBoundary pageKey={pageKey} system={system} />
       </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}

fixtures/ssg-cloudflare-pages/pages/index/+Page.tsx

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
@@ -8,21 +9,40 @@ import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react";
 import { assetBaseUrl, imageLoader } from "../../app/constants.mjs";
 import { Page, breakpoints, siteName } from "../../app/__generated__/_index";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
+    <ReactSdkContext.Provider value={sdkContext}>
       <LinkCurrentUrlContext.Provider value={url}>
-        {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-        <Page key={url} system={system} />
+        <PageBoundary pageKey={pageKey} system={system} />
       </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}

fixtures/ssg-cloudflare-pages/renderer/+onRenderClient.tsx

@@ -1,4 +1,4 @@
-import { type Root, createRoot } from "react-dom/client";
+import { type Root, hydrateRoot } from "react-dom/client";
 import type { OnRenderClientSync } from "vike/types";
 
 let root: Root;
@@ -19,7 +19,8 @@ export const onRenderClient: OnRenderClientSync = (pageContext) => {
     </>
   );
   if (root === undefined) {
-    root = createRoot(document.documentElement);
+    root = hydrateRoot(document.documentElement, htmlContent);
+    return;
   }
   document.documentElement.lang = lang;
   root.render(htmlContent);

fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
@@ -8,21 +9,40 @@ import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react";
 import { assetBaseUrl, imageLoader } from "../../app/constants.mjs";
 import { Page, breakpoints, siteName } from "../../app/__generated__/_index";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
+    <ReactSdkContext.Provider value={sdkContext}>
       <LinkCurrentUrlContext.Provider value={url}>
-        {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-        <Page key={url} system={system} />
+        <PageBoundary pageKey={pageKey} system={system} />
       </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}

fixtures/ssg-netlify-by-project-id/pages/redirect/+Page.tsx

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
@@ -12,21 +13,40 @@ import {
   siteName,
 } from "../../app/__generated__/[redirect]._index";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
+    <ReactSdkContext.Provider value={sdkContext}>
       <LinkCurrentUrlContext.Provider value={url}>
-        {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-        <Page key={url} system={system} />
+        <PageBoundary pageKey={pageKey} system={system} />
       </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}

fixtures/ssg-netlify-by-project-id/renderer/+onRenderClient.tsx

@@ -1,4 +1,4 @@
-import { type Root, createRoot } from "react-dom/client";
+import { type Root, hydrateRoot } from "react-dom/client";
 import type { OnRenderClientSync } from "vike/types";
 
 let root: Root;
@@ -19,7 +19,8 @@ export const onRenderClient: OnRenderClientSync = (pageContext) => {
     </>
   );
   if (root === undefined) {
-    root = createRoot(document.documentElement);
+    root = hydrateRoot(document.documentElement, htmlContent);
+    return;
   }
   document.documentElement.lang = lang;
   root.render(htmlContent);

package.json

@@ -18,7 +18,6 @@
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "migrations": "pnpm --filter=@webstudio-is/prisma-client generate && pnpm --filter=./packages/prisma-client migrations --dev --cwd ../../apps/builder",
-    "build-figma-tokens": "cd packages/design-system && pnpm build-figma-tokens",
     "prepare": "which git && git config core.hooksPath .git/hooks/ && simple-git-hooks || echo git not installed",
     "local:version-snapshot": "pnpm -r exec pnpm version prepatch --preid $(cat /dev/urandom | LC_ALL=C tr -dc 'a-z' | fold -w 8 | head -n 1)",
     "local:publish-snapshot": "pnpm -r publish --access public --no-git-checks --registry http://localhost:4873",