@webstudio-is/react-sdk 0.0.0-021f2d4

package/lib/runtime.js

@@ -0,0 +1,213 @@
+// src/context.tsx
+import { createContext, useContext, useMemo } from "react";
+import {
+  createJsonStringifyProxy,
+  isPlainObject
+} from "@webstudio-is/sdk/runtime";
+var ReactSdkContext = createContext({
+  assetBaseUrl: "/",
+  imageLoader: ({ src }) => src,
+  resources: {}
+});
+var useResource = (name) => {
+  const { resources } = useContext(ReactSdkContext);
+  const resource = resources[name];
+  const resourceMemozied = useMemo(
+    () => isPlainObject(resource) ? createJsonStringifyProxy(resource) : resource,
+    [resource]
+  );
+  return resourceMemozied;
+};
+
+// src/hook.ts
+var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
+  let matched = false;
+  for (const instance of instancePath) {
+    if (currentInstance === instance) {
+      matched = true;
+    }
+    if (matched && instance.component === closestComponent) {
+      return instance;
+    }
+  }
+};
+
+// src/variable-state.tsx
+import { useState, useMemo as useMemo2 } from "react";
+import {
+  createJsonStringifyProxy as createJsonStringifyProxy2,
+  isPlainObject as isPlainObject2
+} from "@webstudio-is/sdk/runtime";
+var useVariableState = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const value = useMemo2(
+    () => isPlainObject2(state) ? createJsonStringifyProxy2(state) : state,
+    [state]
+  );
+  return [value, setState];
+};
+
+// src/page-settings-meta.tsx
+import { useEffect, useState as useState2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var isElementRenderedWithReact = (element) => {
+  return Object.keys(element).some((key) => key.startsWith("__react"));
+};
+var isServer = typeof window === "undefined";
+var Meta = (props) => {
+  const [localProps, setLocalProps] = useState2();
+  useEffect(() => {
+    const selector = `meta[${props.name ? `name="${props.name}"` : `property="${props.property}"`}]`;
+    let allMetas = document.querySelectorAll(selector);
+    for (const meta of allMetas) {
+      if (!isElementRenderedWithReact(meta)) {
+        meta.remove();
+      }
+    }
+    allMetas = document.querySelectorAll(selector);
+    if (allMetas.length === 0) {
+      setLocalProps(props);
+    }
+  }, [props]);
+  if (isServer) {
+    return /* @__PURE__ */ jsx("meta", { ...props });
+  }
+  if (localProps === void 0) {
+    return;
+  }
+  return /* @__PURE__ */ jsx("meta", { ...localProps });
+};
+var PageSettingsMeta = ({
+  url,
+  host,
+  siteName,
+  pageMeta,
+  imageLoader
+}) => {
+  const metas = [];
+  if (url !== void 0) {
+    metas.push({
+      property: "og:url",
+      content: url
+    });
+  }
+  if (pageMeta.title) {
+    metas.push({
+      property: "og:title",
+      content: pageMeta.title
+    });
+  }
+  metas.push({ property: "og:type", content: "website" });
+  if (siteName) {
+    metas.push({
+      property: "og:site_name",
+      content: siteName
+    });
+  }
+  if (pageMeta.excludePageFromSearch) {
+    metas.push({
+      name: "robots",
+      content: "noindex, nofollow"
+    });
+  }
+  if (pageMeta.description) {
+    metas.push({
+      name: "description",
+      content: pageMeta.description
+    });
+    metas.push({
+      property: "og:description",
+      content: pageMeta.description
+    });
+  }
+  if (pageMeta.socialImageAssetName) {
+    metas.push({
+      property: "og:image",
+      content: `https://${host}${imageLoader({
+        src: pageMeta.socialImageAssetName,
+        // Do not transform social image (not enough information do we need to do this)
+        format: "raw"
+      })}`
+    });
+  } else if (pageMeta.socialImageUrl) {
+    metas.push({
+      property: "og:image",
+      content: pageMeta.socialImageUrl
+    });
+  }
+  metas.push(...pageMeta.custom);
+  return metas.map((meta, index) => /* @__PURE__ */ jsx(Meta, { ...meta }, index));
+};
+
+// src/page-settings-title.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var isServer2 = typeof window === "undefined";
+var PageSettingsTitle = (props) => {
+  const [localProps, setLocalProps] = useState3();
+  useEffect2(() => {
+    const selector = `head > title`;
+    let allTitles = document.querySelectorAll(selector);
+    for (const meta of allTitles) {
+      if (!isElementRenderedWithReact(meta)) {
+        meta.remove();
+      }
+    }
+    allTitles = document.querySelectorAll(selector);
+    if (allTitles.length === 0) {
+      setLocalProps(props);
+    }
+  }, [props]);
+  if (isServer2) {
+    return /* @__PURE__ */ jsx2("title", { ...props });
+  }
+  if (localProps === void 0) {
+    return;
+  }
+  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,
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  useResource,
+  useVariableState,
+  xmlNodeTagSuffix
+};

package/lib/types/component-generator.d.ts

@@ -0,0 +1,37 @@
+import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
+import type { IndexesWithinAncestors } from "./instance-utils";
+export declare const generateJsxElement: ({ context, scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
+    context?: "expression" | "jsx";
+    scope: Scope;
+    instance: Instance;
+    props: Props;
+    dataSources: DataSources;
+    usedDataSources: DataSources;
+    indexesWithinAncestors: IndexesWithinAncestors;
+    children: string;
+    classesMap?: Map<string, Array<string>>;
+}) => string;
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
+    scope: Scope;
+    children: Instance["children"];
+    instances: Instances;
+    props: Props;
+    dataSources: DataSources;
+    usedDataSources: DataSources;
+    indexesWithinAncestors: IndexesWithinAncestors;
+    classesMap?: Map<string, Array<string>>;
+    excludePlaceholders?: boolean;
+}) => string;
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
+    scope: Scope;
+    name: string;
+    rootInstanceId: Instance["id"];
+    parameters: Extract<Prop, {
+        type: "parameter";
+    }>[];
+    instances: Instances;
+    props: Props;
+    dataSources: DataSources;
+    indexesWithinAncestors: IndexesWithinAncestors;
+    classesMap: Map<string, Array<string>>;
+}) => string;

package/lib/types/component-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/components-utils.d.ts

@@ -0,0 +1,8 @@
+import { componentAttribute, idAttribute, selectorIdAttribute } from "../props";
+export type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & WebstudioComponentSystemProps & React.RefAttributes<HTMLElement>>;
+export type Components = Map<string, AnyComponent>;
+export type WebstudioComponentSystemProps = {
+    [componentAttribute]: string;
+    [idAttribute]: string;
+    [selectorIdAttribute]: string;
+};

package/lib/types/context.d.ts

@@ -0,0 +1,26 @@
+import type { ImageLoader } from "@webstudio-is/image";
+export type Params = {
+    /**
+     * When rendering a published version, there is no renderer defined.
+     * - canvas is the builder canvas in dev mode
+     * - preview is the preview mode in builder
+     */
+    renderer?: "canvas" | "preview";
+    /**
+     * Base url or base path for any asset with ending slash.
+     * Used to load assets like fonts or images in styles
+     * Concatinated with "name".
+     *
+     * For example
+     * /s/uploads/
+     * /asset/file/
+     * https://assets-dev.webstudio.is/
+     * https://assets.webstudio.is/
+     */
+    assetBaseUrl: string;
+};
+export declare const ReactSdkContext: import("react").Context<Params & {
+    imageLoader: ImageLoader;
+    resources: Record<string, any>;
+}>;
+export declare const useResource: (name: string) => any;

package/lib/types/css/css.d.ts

@@ -0,0 +1,20 @@
+import { type TransformValue } from "@webstudio-is/css-engine";
+import { type Assets, type Breakpoints, type Instances, type Props, type StyleSourceSelections, type Styles, type WsComponentMeta } from "@webstudio-is/sdk";
+export type CssConfig = {
+    assets: Assets;
+    instances: Instances;
+    props: Props;
+    breakpoints: Breakpoints;
+    styles: Styles;
+    styleSourceSelections: StyleSourceSelections;
+    componentMetas: Map<string, WsComponentMeta>;
+    assetBaseUrl: string;
+    atomic: boolean;
+};
+export declare const createImageValueTransformer: (assets: Assets, { assetBaseUrl }: {
+    assetBaseUrl: string;
+}) => TransformValue;
+export declare const generateCss: ({ assets, instances, props, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
+    cssText: string;
+    classes: Map<string, string[]>;
+};

package/lib/types/css/css.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/css/global-rules.d.ts

@@ -0,0 +1,6 @@
+import type { StyleSheetRegular } from "@webstudio-is/css-engine";
+import type { Assets } from "@webstudio-is/sdk";
+export declare const addGlobalRules: (sheet: StyleSheetRegular, { assets, assetBaseUrl }: {
+    assets: Assets;
+    assetBaseUrl: string;
+}) => void;

package/lib/types/css/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./global-rules";
+export * from "./css";

package/lib/types/embed-template.d.ts

@@ -0,0 +1,54 @@
+import type { Instance, WebstudioFragment, WsEmbedTemplate, EmbedTemplateInstance, WsComponentMeta } from "@webstudio-is/sdk";
+export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, generateId?: () => string) => WebstudioFragment;
+export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
+    type: "control" | "embed" | "container" | "rich-text-child";
+    description?: string | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "localization" | "radix" | "internal" | undefined;
+    label?: string | undefined;
+    order?: number | undefined;
+    template?: ({
+        value: string;
+        type: "text";
+        placeholder?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+    } | EmbedTemplateInstance)[] | undefined;
+    states?: {
+        label: string;
+        selector: string;
+        category?: "states" | "component-states" | undefined;
+    }[] | undefined;
+    constraints?: {
+        relation: "ancestor" | "parent" | "self" | "child" | "descendant";
+        component?: {
+            $eq?: string | undefined;
+            $neq?: string | undefined;
+            $in?: string[] | undefined;
+            $nin?: string[] | undefined;
+        } | undefined;
+        tag?: {
+            $eq?: string | undefined;
+            $neq?: string | undefined;
+            $in?: string[] | undefined;
+            $nin?: string[] | undefined;
+        } | undefined;
+    } | {
+        relation: "ancestor" | "parent" | "self" | "child" | "descendant";
+        component?: {
+            $eq?: string | undefined;
+            $neq?: string | undefined;
+            $in?: string[] | undefined;
+            $nin?: string[] | undefined;
+        } | undefined;
+        tag?: {
+            $eq?: string | undefined;
+            $neq?: string | undefined;
+            $in?: string[] | undefined;
+            $nin?: string[] | undefined;
+        } | undefined;
+    }[] | undefined;
+    indexWithinAncestor?: string | undefined;
+    icon: string;
+    presetStyle?: import("@webstudio-is/sdk").PresetStyle;
+};

package/lib/types/embed-template.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/hook.d.ts

@@ -0,0 +1,34 @@
+import type { Instance, Prop } from "@webstudio-is/sdk";
+import type { IndexesWithinAncestors } from "./instance-utils";
+export type InstanceData = {
+    id: Instance["id"];
+    instanceKey: string;
+    component: Instance["component"];
+};
+/**
+ * Hooks are subscriptions to builder events
+ * with limited way to interact with it.
+ * Called independently from components.
+ */
+export type HookContext = {
+    indexesWithinAncestors: IndexesWithinAncestors;
+    getPropValue: (instanceData: InstanceData, propName: Prop["name"]) => unknown;
+    setMemoryProp: (instanceData: InstanceData, propName: Prop["name"], value: unknown) => void;
+};
+export type InstancePath = InstanceData[];
+type NavigatorEvent = {
+    /**
+     * List of instances from selected to the root
+     */
+    instancePath: InstancePath;
+};
+export type Hook = {
+    onNavigatorSelect?: (context: HookContext, event: NavigatorEvent) => void;
+    onNavigatorUnselect?: (context: HookContext, event: NavigatorEvent) => void;
+};
+/**
+ * Find closest matching instance by component name
+ * by lookup in instance path
+ */
+export declare const getClosestInstance: (instancePath: InstancePath, currentInstance: InstanceData, closestComponent: InstanceData["component"]) => InstanceData | undefined;
+export {};

package/lib/types/hook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./remix";
+export * from "./css/index";
+export * from "./components/components-utils";
+export * from "./embed-template";
+export * from "./props";
+export type * from "./context";
+export { getIndexesWithinAncestors } from "./instance-utils";
+export type * from "./hook";
+export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";

package/lib/types/instance-utils.d.ts

@@ -0,0 +1,3 @@
+import type { Instance, Instances, WsComponentMeta } from "@webstudio-is/sdk";
+export type IndexesWithinAncestors = Map<Instance["id"], number>;
+export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Instances, rootIds: Instance["id"][]) => IndexesWithinAncestors;

package/lib/types/instance-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

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/page-settings-meta.d.ts

@@ -0,0 +1,10 @@
+import type { ImageLoader } from "@webstudio-is/image";
+import type { PageMeta } from "@webstudio-is/sdk";
+export declare const isElementRenderedWithReact: (element: Element) => boolean;
+export declare const PageSettingsMeta: ({ url, host, siteName, pageMeta, imageLoader, }: {
+    url?: string;
+    host: string;
+    siteName: string;
+    pageMeta: PageMeta;
+    imageLoader: ImageLoader;
+}) => import("react/jsx-runtime").JSX.Element[];

package/lib/types/page-settings-title.d.ts

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

package/lib/types/props.d.ts

@@ -0,0 +1,106 @@
+import { type Prop, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
+export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingImageAssets, pages, source, }: {
+    props: Prop[];
+    assetBaseUrl: string;
+    assets: Assets;
+    uploadingImageAssets: ImageAsset[];
+    pages: Pages;
+    source: "canvas" | "prebuild";
+}) => ({
+    value: number;
+    type: "number";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "string";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: boolean;
+    type: "boolean";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    type: "json";
+    name: string;
+    id: string;
+    instanceId: string;
+    value?: unknown;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "asset";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: (string | {
+        instanceId: string;
+        pageId: string;
+    }) & (string | {
+        instanceId: string;
+        pageId: string;
+    } | undefined);
+    type: "page";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string[];
+    type: "string[]";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "parameter";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "resource";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "expression";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: {
+        code: string;
+        type: "execute";
+        args: string[];
+    }[];
+    type: "action";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+})[];
+export declare const idAttribute: "data-ws-id";
+export declare const selectorIdAttribute: "data-ws-selector";
+export declare const componentAttribute: "data-ws-component";
+export declare const showAttribute: "data-ws-show";
+export declare const indexAttribute: "data-ws-index";
+export declare const collapsedAttribute: "data-ws-collapsed";
+export declare const textContentAttribute: "data-ws-text-content";
+export declare const editablePlaceholderVariable: "--data-ws-editable-placeholder";
+export declare const editingPlaceholderVariable: "--data-ws-editing-placeholder";
+export declare const isAttributeNameSafe: (attributeName: string) => boolean;

package/lib/types/props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/remix.d.ts

@@ -0,0 +1,20 @@
+/**
+ * transforms url pattern subset to remix route format
+ *
+ * /:name/ -> .$name. - named dynamic segment
+ * /:name?/ -> .($name). - optional dynamic segment
+ * /* -> .$ - splat in the end of pattern
+ * /:name* -> .$ - named splat which gets specified name at runtime
+ *
+ */
+export declare const generateRemixRoute: (pathname: string) => string;
+/**
+ * generates a function to convert remix params to compatible with url pattern groups
+ *
+ * for /:name* pattern
+ * params["*"] is replaced with params["name"]
+ *
+ * for /* pattern
+ * params["*"] is replaced with params[0]
+ */
+export declare const generateRemixParams: (pathname: string) => string;

package/lib/types/remix.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/runtime.d.ts

@@ -0,0 +1,12 @@
+export * from "./context";
+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.
+ */
+export declare const xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
+export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/variable-state.d.ts

@@ -0,0 +1,2 @@
+import { type Dispatch, type SetStateAction } from "react";
+export declare const useVariableState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>];