@webstudio-is/react-sdk 0.174.0 → 0.175.0

package/lib/index.js

@@ -326,17 +326,14 @@ import {
 } from "react";
 
 // src/context.tsx
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
+import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
   imageLoader: ({ src }) => src,
   resources: {}
 });
-var useResource = (name) => {
-  const { resources } = useContext(ReactSdkContext);
-  return resources[name];
-};
 
 // src/tree/create-elements-tree.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -539,9 +536,6 @@ var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
-var getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[indexAttribute];
-};
 
 // src/prop-meta.ts
 import { z } from "zod";
@@ -577,10 +571,14 @@ var Code = z.object({
   ...common,
   control: z.literal("code"),
   type: z.literal("string"),
+  language: z.union([z.literal("html"), z.literal("markdown")]),
   defaultValue: z.string().optional()
 });
-var CodeText = Code.extend({
-  control: z.literal("codetext")
+var CodeText = z.object({
+  ...common,
+  control: z.literal("codetext"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
 });
 var Color = z.object({
   ...common,
@@ -1187,28 +1185,6 @@ var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   return indexes;
 };
 
-// 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;
-    }
-  }
-};
-var getInstanceSelectorById = (instanceSelector, instanceId) => {
-  const index = instanceSelector.findIndex(
-    (selector) => selector === instanceId
-  );
-  if (index === -1) {
-    return [];
-  }
-  return instanceSelector.slice(index);
-};
-
 // src/component-generator.ts
 import {
   parseComponentName as parseComponentName2,
@@ -1544,7 +1520,7 @@ var generateWebstudioComponent = ({
       );
       const initialValue = dataSource.value.value;
       const initialValueString = JSON.stringify(initialValue);
-      generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
+      generatedDataSources += `let [${valueName}, ${setterName}] = useVariableState<any>(${initialValueString})
 `;
     }
     if (dataSource.type === "resource") {
@@ -1572,7 +1548,6 @@ export {
   EmbedTemplateProp,
   EmbedTemplateStyleDecl,
   PropMeta,
-  ReactSdkContext,
   WsComponentMeta,
   WsEmbedTemplate,
   addGlobalRules,
@@ -1594,10 +1569,7 @@ export {
   generateRemixParams,
   generateRemixRoute,
   generateWebstudioComponent,
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
   getIndexesWithinAncestors,
-  getInstanceSelectorById,
   idAttribute,
   indexAttribute,
   isCoreComponent,
@@ -1607,6 +1579,5 @@ export {
   selectorIdAttribute,
   showAttribute,
   stateCategories,
-  textContentAttribute,
-  useResource
+  textContentAttribute
 };

package/lib/runtime.js

@@ -0,0 +1,65 @@
+// src/context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
+var ReactSdkContext = createContext({
+  assetBaseUrl: "/",
+  imageBaseUrl: "/",
+  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;
+    }
+  }
+};
+var getInstanceSelectorById = (instanceSelector, instanceId) => {
+  const index = instanceSelector.findIndex(
+    (selector) => selector === instanceId
+  );
+  if (index === -1) {
+    return [];
+  }
+  return instanceSelector.slice(index);
+};
+
+// src/variable-state.tsx
+import { createJsonStringifyProxy as createJsonStringifyProxy2, isPlainObject as isPlainObject2 } from "@webstudio-is/sdk";
+import { useState, useMemo as useMemo2 } from "react";
+var useVariableState = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const value = useMemo2(
+    () => isPlainObject2(state) ? createJsonStringifyProxy2(state) : state,
+    [state]
+  );
+  return [value, setState];
+};
+
+// src/runtime.ts
+var getIndexWithinAncestorFromComponentProps = (props) => {
+  return props["data-ws-index"];
+};
+export {
+  ReactSdkContext,
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  getInstanceSelectorById,
+  useResource,
+  useVariableState
+};

package/lib/types/components/component-meta.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import type { htmlTags as HtmlTags } from "html-tags";
+import type { HtmlTags } from "html-tags";
 import { EmbedTemplateStyleDecl } from "../embed-template";
 export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<Record<Tag, EmbedTemplateStyleDecl[]>>;
 declare const WsComponentPropsMeta: z.ZodObject<{
@@ -72,6 +72,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     }>, z.ZodObject<{
         control: z.ZodLiteral<"code">;
         type: z.ZodLiteral<"string">;
+        language: z.ZodUnion<[z.ZodLiteral<"html">, z.ZodLiteral<"markdown">]>;
         defaultValue: z.ZodOptional<z.ZodString>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
@@ -79,6 +80,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         type: "string";
         required: boolean;
+        language: "html" | "markdown";
         control: "code";
         defaultValue?: string | undefined;
         label?: string | undefined;
@@ -86,31 +88,32 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     }, {
         type: "string";
         required: boolean;
+        language: "html" | "markdown";
         control: "code";
         defaultValue?: string | undefined;
         label?: string | undefined;
         description?: string | undefined;
     }>, z.ZodObject<{
+        control: z.ZodLiteral<"codetext">;
         type: z.ZodLiteral<"string">;
-        required: z.ZodBoolean;
-        description: z.ZodOptional<z.ZodString>;
-        label: z.ZodOptional<z.ZodString>;
         defaultValue: z.ZodOptional<z.ZodString>;
-        control: z.ZodLiteral<"codetext">;
+        label: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+        required: z.ZodBoolean;
     }, "strip", z.ZodTypeAny, {
         type: "string";
         required: boolean;
         control: "codetext";
-        description?: string | undefined;
-        label?: string | undefined;
         defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }, {
         type: "string";
         required: boolean;
         control: "codetext";
-        description?: string | undefined;
-        label?: string | undefined;
         defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>, z.ZodObject<{
         control: z.ZodLiteral<"color">;
         type: z.ZodLiteral<"string">;
@@ -454,6 +457,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     } | {
         type: "string";
         required: boolean;
+        language: "html" | "markdown";
         control: "code";
         defaultValue?: string | undefined;
         label?: string | undefined;
@@ -462,9 +466,9 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         type: "string";
         required: boolean;
         control: "codetext";
-        description?: string | undefined;
-        label?: string | undefined;
         defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -598,6 +602,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     } | {
         type: "string";
         required: boolean;
+        language: "html" | "markdown";
         control: "code";
         defaultValue?: string | undefined;
         label?: string | undefined;
@@ -606,9 +611,9 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         type: "string";
         required: boolean;
         control: "codetext";
-        description?: string | undefined;
-        label?: string | undefined;
         defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     } | {
         type: "string";
         required: boolean;

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

@@ -33,6 +33,7 @@ export declare const corePropsMetas: {
         } | {
             type: "string";
             required: boolean;
+            language: "html" | "markdown";
             control: "code";
             defaultValue?: string | undefined;
             label?: string | undefined;
@@ -41,9 +42,9 @@ export declare const corePropsMetas: {
             type: "string";
             required: boolean;
             control: "codetext";
-            description?: string | undefined;
-            label?: string | undefined;
             defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
         } | {
             type: "string";
             required: boolean;
@@ -178,6 +179,7 @@ export declare const corePropsMetas: {
         } | {
             type: "string";
             required: boolean;
+            language: "html" | "markdown";
             control: "code";
             defaultValue?: string | undefined;
             label?: string | undefined;
@@ -186,9 +188,9 @@ export declare const corePropsMetas: {
             type: "string";
             required: boolean;
             control: "codetext";
-            description?: string | undefined;
-            label?: string | undefined;
             defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
         } | {
             type: "string";
             required: boolean;

package/lib/types/index.d.ts

@@ -7,7 +7,7 @@ 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 * from "./props";
-export * from "./context";
+export type * from "./context";
 export { getIndexesWithinAncestors } from "./instance-utils";
-export * from "./hook";
+export type * from "./hook";
 export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";

package/lib/types/prop-meta.d.ts

@@ -72,6 +72,7 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
 }>, z.ZodObject<{
     control: z.ZodLiteral<"code">;
     type: z.ZodLiteral<"string">;
+    language: z.ZodUnion<[z.ZodLiteral<"html">, z.ZodLiteral<"markdown">]>;
     defaultValue: z.ZodOptional<z.ZodString>;
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
@@ -79,6 +80,7 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "string";
     required: boolean;
+    language: "html" | "markdown";
     control: "code";
     defaultValue?: string | undefined;
     label?: string | undefined;
@@ -86,31 +88,32 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
 }, {
     type: "string";
     required: boolean;
+    language: "html" | "markdown";
     control: "code";
     defaultValue?: string | undefined;
     label?: string | undefined;
     description?: string | undefined;
 }>, z.ZodObject<{
+    control: z.ZodLiteral<"codetext">;
     type: z.ZodLiteral<"string">;
-    required: z.ZodBoolean;
-    description: z.ZodOptional<z.ZodString>;
-    label: z.ZodOptional<z.ZodString>;
     defaultValue: z.ZodOptional<z.ZodString>;
-    control: z.ZodLiteral<"codetext">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
 }, "strip", z.ZodTypeAny, {
     type: "string";
     required: boolean;
     control: "codetext";
-    description?: string | undefined;
-    label?: string | undefined;
     defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
 }, {
     type: "string";
     required: boolean;
     control: "codetext";
-    description?: string | undefined;
-    label?: string | undefined;
     defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
 }>, z.ZodObject<{
     control: z.ZodLiteral<"color">;
     type: z.ZodLiteral<"string">;

package/lib/types/props.d.ts

@@ -101,4 +101,3 @@ 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 getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/runtime.d.ts

@@ -0,0 +1,4 @@
+export * from "./context";
+export * from "./hook";
+export * from "./variable-state";
+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>>];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.174.0",
+  "version": "0.175.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -12,11 +12,11 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "strip-indent": "^4.0.0",
-    "type-fest": "^4.3.1",
+    "type-fest": "^4.24.0",
     "typescript": "5.5.2",
     "zod": "^3.22.4",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/jest-config": "1.0.7"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "react": "18.3.0-canary-14898b6a9-20240318",
@@ -25,14 +25,14 @@
   },
   "dependencies": {
     "change-case": "^5.4.4",
-    "html-tags": "^3.3.1",
+    "html-tags": "^4.0.0",
     "nanoid": "^5.0.1",
-    "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.174.0",
-    "@webstudio-is/fonts": "0.174.0",
-    "@webstudio-is/icons": "^0.174.0",
-    "@webstudio-is/sdk": "0.174.0",
-    "@webstudio-is/image": "0.174.0"
+    "title-case": "^4.3.1",
+    "@webstudio-is/css-engine": "0.175.0",
+    "@webstudio-is/fonts": "0.175.0",
+    "@webstudio-is/image": "0.175.0",
+    "@webstudio-is/sdk": "0.175.0",
+    "@webstudio-is/icons": "^0.175.0"
   },
   "exports": {
     ".": {
@@ -40,10 +40,10 @@
       "types": "./lib/types/index.d.ts",
       "import": "./lib/index.js"
     },
-    "./css-normalize": {
-      "webstudio": "./src/css/normalize.ts",
-      "types": "./lib/types/css/normalize.d.ts",
-      "import": "./lib/css/normalize.js"
+    "./runtime": {
+      "webstudio": "./src/runtime.ts",
+      "types": "./lib/types/runtime.d.ts",
+      "import": "./lib/runtime.js"
     },
     "./placeholder": {
       "types": "./placeholder.d.ts"
@@ -58,7 +58,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf lib && esbuild src/index.ts ./src/css/normalize.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests"