@webstudio-is/react-sdk 0.100.1-c4ae8b2.0 → 0.101.0

package/lib/index.js

@@ -26,9 +26,9 @@ var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
   imageLoader: ({ src }) => src,
+  pagesPaths: /* @__PURE__ */ new Set(),
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
   assetsStore: atom(/* @__PURE__ */ new Map()),
-  pagesStore: atom(/* @__PURE__ */ new Map()),
   dataSourcesLogicStore: atom(/* @__PURE__ */ new Map()),
   indexesWithinAncestors: /* @__PURE__ */ new Map()
 });
@@ -44,7 +44,6 @@ var createElementsTree = ({
   rootInstanceId,
   propsByInstanceIdStore,
   assetsStore,
-  pagesStore,
   dataSourcesLogicStore,
   indexesWithinAncestors,
   Component,
@@ -81,10 +80,10 @@ var createElementsTree = ({
       value: {
         propsByInstanceIdStore,
         assetsStore,
-        pagesStore,
         dataSourcesLogicStore,
         renderer,
         imageLoader,
+        pagesPaths: /* @__PURE__ */ new Set(),
         assetBaseUrl,
         imageBaseUrl,
         indexesWithinAncestors
@@ -148,174 +147,9 @@ var createInstanceElement = ({
   );
 };
 
-// src/tree/root.ts
-import {
-  useRef
-} from "react";
-import {
-  atom as atom2,
-  computed as computed2
-} from "nanostores";
-
 // src/tree/webstudio-component.tsx
-import { Fragment as Fragment2, forwardRef } from "react";
-
-// src/props.ts
-import { useContext, useMemo } from "react";
-import { computed } from "nanostores";
-import { useStore } from "@nanostores/react";
-var getPropsByInstanceId = (props) => {
-  const propsByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    let instanceProps = propsByInstanceId.get(prop.instanceId);
-    if (instanceProps === void 0) {
-      instanceProps = [];
-      propsByInstanceId.set(prop.instanceId, instanceProps);
-    }
-    instanceProps.push(prop);
-  }
-  return propsByInstanceId;
-};
-var useInstanceProps = (instanceId) => {
-  const {
-    propsByInstanceIdStore,
-    dataSourcesLogicStore,
-    indexesWithinAncestors
-  } = useContext(ReactSdkContext);
-  const index = indexesWithinAncestors.get(instanceId);
-  const instancePropsObjectStore = useMemo(() => {
-    return computed(
-      [propsByInstanceIdStore, dataSourcesLogicStore],
-      (propsByInstanceId, dataSourcesLogic) => {
-        const instancePropsObject2 = {};
-        if (index !== void 0) {
-          instancePropsObject2[indexAttribute] = index.toString();
-        }
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === void 0) {
-          return instancePropsObject2;
-        }
-        for (const prop of instanceProps) {
-          if (prop.type === "asset" || prop.type === "page") {
-            continue;
-          }
-          if (prop.type === "dataSource") {
-            const dataSourceId = prop.value;
-            const value = dataSourcesLogic.get(dataSourceId);
-            if (value !== void 0) {
-              instancePropsObject2[prop.name] = value;
-            }
-            continue;
-          }
-          if (prop.type === "action") {
-            const action = dataSourcesLogic.get(prop.id);
-            if (typeof action === "function") {
-              instancePropsObject2[prop.name] = action;
-            }
-            continue;
-          }
-          instancePropsObject2[prop.name] = prop.value;
-        }
-        return instancePropsObject2;
-      }
-    );
-  }, [propsByInstanceIdStore, dataSourcesLogicStore, instanceId, index]);
-  const instancePropsObject = useStore(instancePropsObjectStore);
-  return instancePropsObject;
-};
-var usePropAsset = (instanceId, name) => {
-  const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
-  const assetStore = useMemo(() => {
-    return computed(
-      [propsByInstanceIdStore, assetsStore],
-      (propsByInstanceId, assets) => {
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === void 0) {
-          return;
-        }
-        for (const prop of instanceProps) {
-          if (prop.type === "asset" && prop.name === name) {
-            const assetId = prop.value;
-            return assets.get(assetId);
-          }
-        }
-      }
-    );
-  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
-  const asset = useStore(assetStore);
-  return asset;
-};
-var resolveUrlProp = (instanceId, name, {
-  props,
-  pages,
-  assets
-}) => {
-  const instanceProps = props.get(instanceId);
-  if (instanceProps === void 0) {
-    return;
-  }
-  let prop = void 0;
-  for (const intanceProp of instanceProps) {
-    if (intanceProp.name !== name) {
-      continue;
-    }
-    prop = intanceProp;
-  }
-  if (prop === void 0) {
-    return;
-  }
-  if (prop.type === "page") {
-    if (typeof prop.value === "string") {
-      const page2 = pages.get(prop.value);
-      return page2 && { type: "page", page: page2 };
-    }
-    const { instanceId: instanceId2, pageId } = prop.value;
-    const page = pages.get(pageId);
-    if (page === void 0) {
-      return;
-    }
-    const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
-    return {
-      type: "page",
-      page,
-      instanceId: instanceId2,
-      hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
-    };
-  }
-  if (prop.type === "string") {
-    for (const page of pages.values()) {
-      if (page.path === prop.value) {
-        return { type: "page", page };
-      }
-    }
-    return { type: "string", url: prop.value };
-  }
-  if (prop.type === "asset") {
-    const asset = assets.get(prop.value);
-    return asset && { type: "asset", asset };
-  }
-  return;
-};
-var usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);
-  const store = useMemo(
-    () => computed(
-      [propsByInstanceIdStore, pagesStore, assetsStore],
-      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
-    ),
-    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
-  );
-  return useStore(store);
-};
-var getInstanceIdFromComponentProps = (props) => {
-  return props[idAttribute];
-};
-var getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[indexAttribute];
-};
-
-// src/tree/webstudio-component.tsx
-import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var renderText = (text) => {
   const lines = text.split("\n");
   return lines.map((line, index) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
@@ -331,105 +165,12 @@ var renderWebstudioComponentChildren = (children) => {
     return typeof child === "string" ? renderText(child) : child;
   });
 };
-var WebstudioComponent = forwardRef(({ instance, instanceSelector, children, components, ...rest }, ref) => {
-  const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
-    instance.id
-  );
-  const props = {
-    ...instanceProps,
-    ...rest,
-    [idAttribute]: instance.id,
-    [componentAttribute]: instance.component
-  };
-  if (show === false) {
-    return /* @__PURE__ */ jsx2(Fragment3, {});
-  }
-  const Component = components.get(instance.component);
-  if (Component === void 0) {
-    return /* @__PURE__ */ jsx2(Fragment3, {});
-  }
-  return /* @__PURE__ */ jsx2(Component, { ...props, ref, children: renderWebstudioComponentChildren(children) });
-});
 var idAttribute = "data-ws-id";
 var selectorIdAttribute = "data-ws-selector";
 var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
-var splitPropsWithWebstudioAttributes = ({
-  [idAttribute]: idAttributeValue,
-  [componentAttribute]: componentAttributeValue,
-  [showAttribute]: showAttributeValue,
-  [collapsedAttribute]: collapsedAttributeValue,
-  [selectorIdAttribute]: parentIdAttributeValue,
-  ...props
-}) => [
-  {
-    [idAttribute]: idAttributeValue,
-    [componentAttribute]: componentAttributeValue,
-    [showAttribute]: showAttributeValue,
-    [collapsedAttribute]: collapsedAttributeValue,
-    [selectorIdAttribute]: parentIdAttributeValue
-  },
-  props
-];
-
-// src/tree/root.ts
-var InstanceRoot = ({
-  data,
-  utils,
-  Component,
-  components,
-  scripts,
-  imageLoader
-}) => {
-  const { indexesWithinAncestors, getDataSourcesLogic } = utils;
-  const dataSourceVariablesStoreRef = useRef(void 0);
-  if (dataSourceVariablesStoreRef.current === void 0) {
-    dataSourceVariablesStoreRef.current = atom2(/* @__PURE__ */ new Map());
-  }
-  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
-  const dataSourcesLogicStoreRef = useRef(void 0);
-  if (dataSourcesLogicStoreRef.current === void 0) {
-    dataSourcesLogicStoreRef.current = computed2(
-      dataSourceVariablesStore,
-      (dataSourceVariables) => {
-        try {
-          const getVariable = (id) => {
-            return dataSourceVariables.get(id);
-          };
-          const setVariable = (id, value) => {
-            const dataSourceVariables2 = new Map(dataSourceVariablesStore.get());
-            dataSourceVariables2.set(id, value);
-            dataSourceVariablesStore.set(dataSourceVariables2);
-          };
-          return getDataSourcesLogic(getVariable, setVariable);
-        } catch (error) {
-          console.error(error);
-        }
-        return /* @__PURE__ */ new Map();
-      }
-    );
-  }
-  const dataSourcesLogicStore = dataSourcesLogicStoreRef.current;
-  return createElementsTree({
-    imageLoader,
-    imageBaseUrl: data.params?.imageBaseUrl ?? "/",
-    assetBaseUrl: data.params?.assetBaseUrl ?? "/",
-    instances: new Map(data.build.instances),
-    rootInstanceId: data.page.rootInstanceId,
-    propsByInstanceIdStore: atom2(
-      getPropsByInstanceId(new Map(data.build.props))
-    ),
-    assetsStore: atom2(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    pagesStore: atom2(new Map(data.pages.map((page) => [page.id, page]))),
-    indexesWithinAncestors,
-    dataSourcesLogicStore,
-    Component: Component ?? WebstudioComponent,
-    components,
-    scripts
-  });
-};
 
 // src/css/style-rules.ts
 var getStyleRules = (styles, styleSourceSelections) => {
@@ -1446,6 +1187,87 @@ var WsComponentMeta = z3.object({
   order: z3.number().optional()
 });
 
+// src/props.ts
+var normalizeProps = ({
+  props,
+  assetBaseUrl,
+  assets,
+  pages
+}) => {
+  const newProps = [];
+  for (const prop of props) {
+    if (prop.type === "asset") {
+      const assetId = prop.value;
+      const asset = assets.get(assetId);
+      if (asset === void 0) {
+        continue;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value: `${assetBaseUrl}${asset.name}`
+      });
+      continue;
+    }
+    if (prop.type === "page") {
+      let page;
+      let idProp;
+      if (typeof prop.value === "string") {
+        const pageId = prop.value;
+        page = pages.get(pageId);
+      } else {
+        const { pageId, instanceId } = prop.value;
+        page = pages.get(pageId);
+        idProp = props.find(
+          (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
+        );
+      }
+      if (page === void 0) {
+        continue;
+      }
+      const url = new URL(page.path, "https://any-valid.url");
+      let value = url.pathname;
+      if (idProp?.type === "string") {
+        const hash = idProp.value;
+        url.hash = encodeURIComponent(hash);
+        value = `${url.pathname}${url.hash}`;
+      }
+      newProps.push({
+        id: prop.id,
+        name: prop.name,
+        required: prop.required,
+        instanceId: prop.instanceId,
+        type: "string",
+        value
+      });
+      continue;
+    }
+    newProps.push(prop);
+  }
+  return newProps;
+};
+var getPropsByInstanceId = (props) => {
+  const propsByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === void 0) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
+  }
+  return propsByInstanceId;
+};
+var getInstanceIdFromComponentProps = (props) => {
+  return props[idAttribute];
+};
+var getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[indexAttribute];
+};
+
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
@@ -1504,61 +1326,14 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 };
 
 // src/generator.ts
-import {
-  createScope
-} from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
-  const indexesWithinAncestors = getIndexesWithinAncestors(
-    siteData.metas,
-    siteData.instances,
-    [siteData.page.rootInstanceId]
-  );
-  let indexesWithinAncestorsEntries = "";
-  for (const [key, value] of indexesWithinAncestors) {
-    const keyString = JSON.stringify(key);
-    const valueString = JSON.stringify(value);
-    indexesWithinAncestorsEntries += `[${keyString}, ${valueString}],
-`;
+  const pagesPaths = [siteData.pages.homePage.path];
+  for (const page of siteData.pages.pages) {
+    pagesPaths.push(page.path);
   }
-  const generatedIndexesWithinAncestors = `
-  const indexesWithinAncestors = new Map<string, number>([
-  ${indexesWithinAncestorsEntries}
-  ]);
-  `;
-  const { variables, body, output } = generateDataSources({
-    scope: createScope(["_getVariable", "_setVariable", "_output"]),
-    typed: true,
-    dataSources: siteData.dataSources,
-    props: siteData.props
-  });
-  let generatedDataSources = "";
-  generatedDataSources += `const getDataSourcesLogic = (
-`;
-  generatedDataSources += `  _getVariable: (id: string) => unknown,
-`;
-  generatedDataSources += `  _setVariable: (id: string, value: unknown) => void
-`;
-  generatedDataSources += `) => {
-`;
-  for (const [dataSourceId, variable] of variables) {
-    const { valueName, setterName } = variable;
-    const initialValue = JSON.stringify(variable.initialValue);
-    generatedDataSources += `let ${valueName} = _getVariable("${dataSourceId}") ?? ${initialValue};
-`;
-    generatedDataSources += `let ${setterName} = (value: unknown) => _setVariable("${dataSourceId}", value);
-`;
-  }
-  generatedDataSources += body;
-  generatedDataSources += `let _output = new Map();
-`;
-  for (const [dataSourceId, variableName] of output) {
-    generatedDataSources += `_output.set('${dataSourceId}', ${variableName})
-`;
-  }
-  generatedDataSources += `return _output
-`;
-  generatedDataSources += `}
-`;
+  const generatedPagesPaths = `export const pagesPaths = new Set(${JSON.stringify(
+    pagesPaths
+  )})`;
   const formsProperties = /* @__PURE__ */ new Map();
   for (const prop of siteData.props.values()) {
     if (prop.type === "string") {
@@ -1576,20 +1351,9 @@ var generateUtilsExport = (siteData) => {
     Array.from(formsProperties.entries())
   )})`;
   return `
-  /* eslint-disable */
-
-  ${generatedIndexesWithinAncestors.trim()}
-
-  ${generatedDataSources}
+  ${generatedPagesPaths}
 
   ${generatedFormsProperties}
-
-  export const utils = {
-    indexesWithinAncestors,
-    getDataSourcesLogic,
-  };
-
-  /* eslint-enable */
   `;
 };
 
@@ -1748,7 +1512,7 @@ var generatePageComponent = ({
   let generatedDataSources = "";
   for (const { valueName, setterName, initialValue } of variables.values()) {
     const initialValueString = JSON.stringify(initialValue);
-    generatedDataSources += `let [${valueName}, ${setterName}] = useState(${initialValueString})
+    generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
 `;
   }
   generatedDataSources += dataSourcesBody;
@@ -1779,11 +1543,9 @@ var generatePageComponent = ({
 export {
   EmbedTemplateInstance,
   EmbedTemplateStyleDecl,
-  InstanceRoot,
   PropMeta,
   ReactSdkContext,
   Root,
-  WebstudioComponent,
   WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
@@ -1806,17 +1568,15 @@ export {
   getIndexesWithinAncestors,
   getInstanceIdFromComponentProps,
   getPresetStyleRules,
+  getPropsByInstanceId,
   getStyleRules,
   idAttribute,
   indexAttribute,
   namespaceMeta,
+  normalizeProps,
   renderWebstudioComponentChildren,
   selectorIdAttribute,
   showAttribute,
-  splitPropsWithWebstudioAttributes,
   stateCategories,
-  useInstanceProps,
-  usePropAsset,
-  usePropUrl,
   validateExpression
 };

package/lib/types/context.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type ReadableAtom } from "nanostores";
-import type { Assets } from "@webstudio-is/sdk";
-import type { Pages, PropsByInstanceId } from "./props";
+import type { Assets, Page } from "@webstudio-is/sdk";
+import type { PropsByInstanceId } from "./props";
 import type { IndexesWithinAncestors } from "./instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
 export type Params = {
@@ -32,9 +32,14 @@ export type Params = {
 };
 export declare const ReactSdkContext: import("react").Context<Params & {
     imageLoader: ImageLoader;
+    /**
+     * List of pages paths for link component
+     * to navigate without reloading on published sites
+     * always empty for builder which handle anchor clicks globally
+     */
+    pagesPaths: Set<Page["path"]>;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
-    pagesStore: ReadableAtom<Pages>;
     dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }>;

package/lib/types/generator.d.ts

@@ -1,21 +1,10 @@
-import { type DataSources, type Instance, type Instances, type Page, type Props } from "@webstudio-is/sdk";
-import type { WsComponentMeta } from "./components/component-meta";
-import { type IndexesWithinAncestors } from "./instance-utils";
+import type { Pages, Props } from "@webstudio-is/sdk";
 type PageData = {
-    page: Page;
-    metas: Map<Instance["component"], WsComponentMeta>;
-    instances: Instances;
+    pages: Pages;
     props: Props;
-    dataSources: DataSources;
-};
-export type GeneratedUtils = {
-    indexesWithinAncestors: IndexesWithinAncestors;
-    getDataSourcesLogic: (getVariable: (id: string) => unknown, setVariable: (id: string, value: unknown) => void) => Map<string, unknown>;
 };
 /**
  * Generates data based utilities at build time
- * Requires this import statement in scope
- * import * as sdk from "@webstudio-is/react-sdk";
  */
 export declare const generateUtilsExport: (siteData: PageData) => string;
 export {};

package/lib/types/index.d.ts

@@ -5,7 +5,7 @@ export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";
 export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
-export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
+export { normalizeProps, getPropsByInstanceId, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
 export { validateExpression, computeExpressionsDependencies, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";

package/lib/types/props.d.ts

@@ -1,7 +1,59 @@
-import type { Instance, Page, Prop, Asset, Assets } from "@webstudio-is/sdk";
+import type { Instance, Page, Prop, Assets } from "@webstudio-is/sdk";
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 export type Pages = Map<Page["id"], Page>;
-export declare const getPropsByInstanceId: (props: Map<string, {
+export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
+    props: Prop[];
+    assetBaseUrl: string;
+    assets: Map<string, {
+        type: "font";
+        name: string;
+        format: "ttf" | "woff" | "woff2" | "otf";
+        meta: ({
+            family: string;
+            style: "normal" | "italic" | "oblique";
+            weight: number;
+        } | {
+            family: string;
+            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
+                name: string;
+                min: number;
+                default: number;
+                max: number;
+            }>>;
+        }) & ({
+            family: string;
+            style: "normal" | "italic" | "oblique";
+            weight: number;
+        } | {
+            family: string;
+            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
+                name: string;
+                min: number;
+                default: number;
+                max: number;
+            }>>;
+        } | undefined);
+        id: string;
+        projectId: string;
+        size: number;
+        description: string | null;
+        createdAt: string;
+    } | {
+        type: "image";
+        name: string;
+        format: string;
+        meta: {
+            width: number;
+            height: number;
+        };
+        id: string;
+        projectId: string;
+        size: number;
+        description: string | null;
+        createdAt: string;
+    }>;
+    pages: Pages;
+}) => ({
     value: number;
     type: "number";
     name: string;
@@ -67,130 +119,73 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
-}>) => PropsByInstanceId;
-export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, unknown>;
-export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
-    type: "font";
-    name: string;
-    format: "ttf" | "woff" | "woff2" | "otf";
-    meta: ({
-        family: string;
-        style: "normal" | "italic" | "oblique";
-        weight: number;
-    } | {
-        family: string;
-        variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            name: string;
-            min: number;
-            default: number;
-            max: number;
-        }>>;
-    }) & ({
-        family: string;
-        style: "normal" | "italic" | "oblique";
-        weight: number;
-    } | {
-        family: string;
-        variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            name: string;
-            min: number;
-            default: number;
-            max: number;
-        }>>;
-    } | undefined);
+})[];
+export declare const getPropsByInstanceId: (props: Map<string, {
+    value: number;
+    type: "number";
+    name: string;
     id: string;
-    projectId: string;
-    size: number;
-    description: string | null;
-    createdAt: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
-    type: "image";
-    name: string;
-    format: string;
-    meta: {
-        width: number;
-        height: number;
-    };
-    id: string;
-    projectId: string;
-    size: number;
-    description: string | null;
-    createdAt: string;
-} | undefined;
-export declare const resolveUrlProp: (instanceId: Instance["id"], name: string, { props, pages, assets, }: {
-    props: PropsByInstanceId;
-    pages: Pages;
-    assets: Map<string, {
-        type: "font";
-        name: string;
-        format: "ttf" | "woff" | "woff2" | "otf";
-        meta: ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        }) & ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        } | undefined);
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    } | {
-        type: "image";
-        name: string;
-        format: string;
-        meta: {
-            width: number;
-            height: number;
-        };
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    }>;
-}) => {
-    type: "page";
-    page: Page;
-    instanceId?: string | undefined;
-    hash?: string | 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;
 } | {
+    value: string;
     type: "asset";
-    asset: Asset;
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
-    type: "string";
-    url: string;
-} | undefined;
-export declare const usePropUrl: (instanceId: Instance["id"], name: string) => {
+    value: (string | {
+        instanceId: string;
+        pageId: string;
+    }) & (string | {
+        instanceId: string;
+        pageId: string;
+    } | undefined);
     type: "page";
-    page: Page;
-    instanceId?: string | undefined;
-    hash?: string | undefined;
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
-    type: "asset";
-    asset: Asset;
+    value: string[];
+    type: "string[]";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
-    type: "string";
-    url: string;
-} | undefined;
+    value: string;
+    type: "dataSource";
+    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;
+}>) => PropsByInstanceId;
 export declare const getInstanceIdFromComponentProps: (props: Record<string, unknown>) => string;
 export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/tree/create-elements-tree.d.ts

@@ -3,11 +3,11 @@ import type { ReadableAtom } from "nanostores";
 import type { Instance, Instances, Assets } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
 import { type Params } from "../context";
-import type { Pages, PropsByInstanceId } from "../props";
+import type { PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
 import type { IndexesWithinAncestors } from "../instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
-export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourcesLogicStore, indexesWithinAncestors, Component, components, scripts, }: Params & {
+export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, dataSourcesLogicStore, indexesWithinAncestors, Component, components, scripts, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -25,7 +25,6 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     rootInstanceId: Instance["id"];
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
-    pagesStore: ReadableAtom<Pages>;
     dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;

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

@@ -1,3 +1,2 @@
 export * from "./create-elements-tree";
-export * from "./root";
 export * from "./webstudio-component";

package/lib/types/tree/webstudio-component.d.ts

@@ -8,18 +8,9 @@ export type WebstudioComponentProps = {
     children: Array<JSX.Element | string>;
     components: Components;
 };
-export declare const WebstudioComponent: import("react").ForwardRefExoticComponent<WebstudioComponentProps & import("react").RefAttributes<HTMLElement>>;
 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 type WebstudioAttributes = {
-    [idAttribute]?: string | undefined;
-    [selectorIdAttribute]?: string | undefined;
-    [componentAttribute]?: string | undefined;
-    [showAttribute]?: string | undefined;
-    [collapsedAttribute]?: string | undefined;
-};
-export declare const splitPropsWithWebstudioAttributes: <P extends WebstudioAttributes>({ [idAttribute]: idAttributeValue, [componentAttribute]: componentAttributeValue, [showAttribute]: showAttributeValue, [collapsedAttribute]: collapsedAttributeValue, [selectorIdAttribute]: parentIdAttributeValue, ...props }: P) => [WebstudioAttributes, Omit<P, keyof WebstudioAttributes>];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.100.1-c4ae8b2.0",
+  "version": "0.101.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,8 +17,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "1.0.8-c4ae8b2.0",
-    "@webstudio-is/tsconfig": "1.0.8-c4ae8b2.0"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -35,20 +35,20 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/fonts": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/image": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/sdk": "0.100.1-c4ae8b2.0"
+    "@webstudio-is/css-engine": "0.101.0",
+    "@webstudio-is/fonts": "0.101.0",
+    "@webstudio-is/image": "0.101.0",
+    "@webstudio-is/sdk": "0.101.0"
   },
   "exports": {
     ".": {
-      "source": "./src/index.ts",
+      "webstudio": "./src/index.ts",
       "types": "./lib/types/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib/index.js"
     },
     "./css-normalize": {
-      "source": "./src/css/normalize.ts",
+      "webstudio": "./src/css/normalize.ts",
       "types": "./lib/types/css/normalize.d.ts",
       "import": "./lib/css/normalize.js",
       "require": "./lib/css/normalize.js"

package/lib/types/tree/root.d.ts

@@ -1,28 +0,0 @@
-import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
-import type { Page, Asset, DataSource, Instance, Prop } from "@webstudio-is/sdk";
-import { type WebstudioComponentProps } from "./webstudio-component";
-import type { Components } from "../components/components-utils";
-import type { Params } from "../context";
-import type { GeneratedUtils } from "../generator";
-import type { ImageLoader } from "@webstudio-is/image";
-export type RootPropsData = {
-    params?: Params;
-    page: Page;
-    pages: Array<Page>;
-    assets: Array<Asset>;
-    build: {
-        instances: [Instance["id"], Instance][];
-        dataSources: [DataSource["id"], DataSource][];
-        props: [Prop["id"], Prop][];
-    };
-};
-type RootProps = {
-    data: RootPropsData;
-    utils: GeneratedUtils;
-    Component?: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
-    components: Components;
-    scripts?: ReactNode;
-    imageLoader: ImageLoader;
-};
-export declare const InstanceRoot: ({ data, utils, Component, components, scripts, imageLoader, }: RootProps) => JSX.Element | null;
-export {};