@webstudio-is/react-sdk 0.75.0 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/lib/cjs/context.js +5 -1
  2. package/lib/cjs/css/normalize.js +9 -1
  3. package/lib/cjs/embed-template.js +68 -3
  4. package/lib/cjs/expression.js +191 -0
  5. package/lib/cjs/index.js +7 -1
  6. package/lib/cjs/props.js +28 -10
  7. package/lib/cjs/tree/create-elements-tree.js +14 -1
  8. package/lib/cjs/tree/root.js +55 -0
  9. package/lib/cjs/tree/webstudio-component.js +9 -2
  10. package/lib/context.js +5 -1
  11. package/lib/css/normalize.js +9 -1
  12. package/lib/embed-template.js +68 -3
  13. package/lib/expression.js +161 -0
  14. package/lib/index.js +13 -1
  15. package/lib/props.js +28 -10
  16. package/lib/tree/create-elements-tree.js +14 -1
  17. package/lib/tree/root.js +63 -1
  18. package/lib/tree/webstudio-component.js +9 -2
  19. package/lib/types/components/component-meta.d.ts +112 -0
  20. package/lib/types/context.d.ts +3 -0
  21. package/lib/types/css/normalize.d.ts +1316 -0
  22. package/lib/types/embed-template.d.ts +512 -0
  23. package/lib/types/expression.d.ts +6 -0
  24. package/lib/types/expression.test.d.ts +1 -0
  25. package/lib/types/index.d.ts +2 -1
  26. package/lib/types/props.d.ts +8 -7
  27. package/lib/types/tree/create-elements-tree.d.ts +4 -2
  28. package/lib/types/tree/root.d.ts +3 -3
  29. package/lib/types/tree/webstudio-component.d.ts +1 -0
  30. package/package.json +10 -10
  31. package/src/context.tsx +11 -0
  32. package/src/css/normalize.ts +9 -1
  33. package/src/embed-template.test.ts +177 -1
  34. package/src/embed-template.ts +73 -2
  35. package/src/expression.test.ts +122 -0
  36. package/src/expression.ts +183 -0
  37. package/src/index.ts +7 -0
  38. package/src/props.ts +29 -10
  39. package/src/tree/create-elements-tree.tsx +20 -1
  40. package/src/tree/root.ts +81 -4
  41. package/src/tree/webstudio-component.tsx +7 -1
package/lib/types/components/component-meta.d.ts CHANGED
@@ -694,7 +694,14 @@ declare const WsComponentMeta: z.ZodObject<{
694
694
  type: "unparsed";
695
695
  value: string;
696
696
  hidden?: boolean | undefined;
697
+ } | {
698
+ type: "rgb";
699
+ alpha: number;
700
+ r: number;
701
+ g: number;
702
+ b: number;
697
703
  })[];
704
+ hidden?: boolean | undefined;
698
705
  } | {
699
706
  type: "layers";
700
707
  value: ({
@@ -734,7 +741,14 @@ declare const WsComponentMeta: z.ZodObject<{
734
741
  type: "unparsed";
735
742
  value: string;
736
743
  hidden?: boolean | undefined;
744
+ } | {
745
+ type: "rgb";
746
+ alpha: number;
747
+ r: number;
748
+ g: number;
749
+ b: number;
737
750
  })[];
751
+ hidden?: boolean | undefined;
738
752
  })[];
739
753
  } | {
740
754
  type: "var";
@@ -782,7 +796,14 @@ declare const WsComponentMeta: z.ZodObject<{
782
796
  type: "unparsed";
783
797
  value: string;
784
798
  hidden?: boolean | undefined;
799
+ } | {
800
+ type: "rgb";
801
+ alpha: number;
802
+ r: number;
803
+ g: number;
804
+ b: number;
785
805
  })[];
806
+ hidden?: boolean | undefined;
786
807
  } | {
787
808
  type: "layers";
788
809
  value: ({
@@ -822,7 +843,14 @@ declare const WsComponentMeta: z.ZodObject<{
822
843
  type: "unparsed";
823
844
  value: string;
824
845
  hidden?: boolean | undefined;
846
+ } | {
847
+ type: "rgb";
848
+ alpha: number;
849
+ r: number;
850
+ g: number;
851
+ b: number;
825
852
  })[];
853
+ hidden?: boolean | undefined;
826
854
  })[];
827
855
  })[];
828
856
  };
@@ -878,7 +906,14 @@ declare const WsComponentMeta: z.ZodObject<{
878
906
  type: "unparsed";
879
907
  value: string;
880
908
  hidden?: boolean | undefined;
909
+ } | {
910
+ type: "rgb";
911
+ alpha: number;
912
+ r: number;
913
+ g: number;
914
+ b: number;
881
915
  })[];
916
+ hidden?: boolean | undefined;
882
917
  } | {
883
918
  type: "layers";
884
919
  value: ({
@@ -918,7 +953,14 @@ declare const WsComponentMeta: z.ZodObject<{
918
953
  type: "unparsed";
919
954
  value: string;
920
955
  hidden?: boolean | undefined;
956
+ } | {
957
+ type: "rgb";
958
+ alpha: number;
959
+ r: number;
960
+ g: number;
961
+ b: number;
921
962
  })[];
963
+ hidden?: boolean | undefined;
922
964
  })[];
923
965
  } | {
924
966
  type: "var";
@@ -966,7 +1008,14 @@ declare const WsComponentMeta: z.ZodObject<{
966
1008
  type: "unparsed";
967
1009
  value: string;
968
1010
  hidden?: boolean | undefined;
1011
+ } | {
1012
+ type: "rgb";
1013
+ alpha: number;
1014
+ r: number;
1015
+ g: number;
1016
+ b: number;
969
1017
  })[];
1018
+ hidden?: boolean | undefined;
970
1019
  } | {
971
1020
  type: "layers";
972
1021
  value: ({
@@ -1006,7 +1055,14 @@ declare const WsComponentMeta: z.ZodObject<{
1006
1055
  type: "unparsed";
1007
1056
  value: string;
1008
1057
  hidden?: boolean | undefined;
1058
+ } | {
1059
+ type: "rgb";
1060
+ alpha: number;
1061
+ r: number;
1062
+ g: number;
1063
+ b: number;
1009
1064
  })[];
1065
+ hidden?: boolean | undefined;
1010
1066
  })[];
1011
1067
  })[];
1012
1068
  };
@@ -1096,7 +1152,14 @@ declare const WsComponentMeta: z.ZodObject<{
1096
1152
  type: "unparsed";
1097
1153
  value: string;
1098
1154
  hidden?: boolean | undefined;
1155
+ } | {
1156
+ type: "rgb";
1157
+ alpha: number;
1158
+ r: number;
1159
+ g: number;
1160
+ b: number;
1099
1161
  })[];
1162
+ hidden?: boolean | undefined;
1100
1163
  } | {
1101
1164
  type: "layers";
1102
1165
  value: ({
@@ -1136,7 +1199,14 @@ declare const WsComponentMeta: z.ZodObject<{
1136
1199
  type: "unparsed";
1137
1200
  value: string;
1138
1201
  hidden?: boolean | undefined;
1202
+ } | {
1203
+ type: "rgb";
1204
+ alpha: number;
1205
+ r: number;
1206
+ g: number;
1207
+ b: number;
1139
1208
  })[];
1209
+ hidden?: boolean | undefined;
1140
1210
  })[];
1141
1211
  } | {
1142
1212
  type: "var";
@@ -1184,7 +1254,14 @@ declare const WsComponentMeta: z.ZodObject<{
1184
1254
  type: "unparsed";
1185
1255
  value: string;
1186
1256
  hidden?: boolean | undefined;
1257
+ } | {
1258
+ type: "rgb";
1259
+ alpha: number;
1260
+ r: number;
1261
+ g: number;
1262
+ b: number;
1187
1263
  })[];
1264
+ hidden?: boolean | undefined;
1188
1265
  } | {
1189
1266
  type: "layers";
1190
1267
  value: ({
@@ -1224,7 +1301,14 @@ declare const WsComponentMeta: z.ZodObject<{
1224
1301
  type: "unparsed";
1225
1302
  value: string;
1226
1303
  hidden?: boolean | undefined;
1304
+ } | {
1305
+ type: "rgb";
1306
+ alpha: number;
1307
+ r: number;
1308
+ g: number;
1309
+ b: number;
1227
1310
  })[];
1311
+ hidden?: boolean | undefined;
1228
1312
  })[];
1229
1313
  })[];
1230
1314
  };
@@ -1300,7 +1384,14 @@ declare const WsComponentMeta: z.ZodObject<{
1300
1384
  type: "unparsed";
1301
1385
  value: string;
1302
1386
  hidden?: boolean | undefined;
1387
+ } | {
1388
+ type: "rgb";
1389
+ alpha: number;
1390
+ r: number;
1391
+ g: number;
1392
+ b: number;
1303
1393
  })[];
1394
+ hidden?: boolean | undefined;
1304
1395
  } | {
1305
1396
  type: "layers";
1306
1397
  value: ({
@@ -1340,7 +1431,14 @@ declare const WsComponentMeta: z.ZodObject<{
1340
1431
  type: "unparsed";
1341
1432
  value: string;
1342
1433
  hidden?: boolean | undefined;
1434
+ } | {
1435
+ type: "rgb";
1436
+ alpha: number;
1437
+ r: number;
1438
+ g: number;
1439
+ b: number;
1343
1440
  })[];
1441
+ hidden?: boolean | undefined;
1344
1442
  })[];
1345
1443
  } | {
1346
1444
  type: "var";
@@ -1388,7 +1486,14 @@ declare const WsComponentMeta: z.ZodObject<{
1388
1486
  type: "unparsed";
1389
1487
  value: string;
1390
1488
  hidden?: boolean | undefined;
1489
+ } | {
1490
+ type: "rgb";
1491
+ alpha: number;
1492
+ r: number;
1493
+ g: number;
1494
+ b: number;
1391
1495
  })[];
1496
+ hidden?: boolean | undefined;
1392
1497
  } | {
1393
1498
  type: "layers";
1394
1499
  value: ({
@@ -1428,7 +1533,14 @@ declare const WsComponentMeta: z.ZodObject<{
1428
1533
  type: "unparsed";
1429
1534
  value: string;
1430
1535
  hidden?: boolean | undefined;
1536
+ } | {
1537
+ type: "rgb";
1538
+ alpha: number;
1539
+ r: number;
1540
+ g: number;
1541
+ b: number;
1431
1542
  })[];
1543
+ hidden?: boolean | undefined;
1432
1544
  })[];
1433
1545
  })[];
1434
1546
  };
package/lib/types/context.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { type ReadableAtom } from "nanostores";
3
3
  import type { Assets } from "@webstudio-is/asset-uploader";
4
+ import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
4
5
  import type { Pages, PropsByInstanceId } from "./props";
5
6
  export type Params = {
6
7
  renderer?: "canvas" | "preview";
@@ -32,4 +33,6 @@ export declare const ReactSdkContext: import("react").Context<Params & {
32
33
  propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
33
34
  assetsStore: ReadableAtom<Assets>;
34
35
  pagesStore: ReadableAtom<Pages>;
36
+ dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
37
+ setDataSourceValue: (instanceId: Instance["id"], prop: Prop["name"], value: unknown) => void;
35
38
  }>;