@builder.io/sdk-react 0.2.3 → 0.4.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 (72) hide show
  1. package/README.md +72 -3
  2. package/dist/sdk/blocks/BaseText.js +1 -1
  3. package/dist/sdk/blocks/button/button.js +1 -1
  4. package/dist/sdk/blocks/columns/columns.js +6 -6
  5. package/dist/sdk/blocks/custom-code/custom-code.js +1 -1
  6. package/dist/sdk/blocks/embed/embed.js +1 -1
  7. package/dist/sdk/blocks/fragment/fragment.js +1 -1
  8. package/dist/sdk/blocks/image/image.js +1 -1
  9. package/dist/sdk/blocks/img/img.js +1 -1
  10. package/dist/sdk/blocks/input/input.js +1 -1
  11. package/dist/sdk/blocks/raw-text/raw-text.js +1 -1
  12. package/dist/sdk/blocks/section/section.js +1 -1
  13. package/dist/sdk/blocks/select/select.js +1 -1
  14. package/dist/sdk/blocks/submit-button/submit-button.js +1 -1
  15. package/dist/sdk/blocks/symbol/symbol.js +2 -2
  16. package/dist/sdk/blocks/text/text.js +1 -1
  17. package/dist/sdk/blocks/textarea/textarea.js +1 -1
  18. package/dist/sdk/blocks/video/video.js +1 -1
  19. package/dist/sdk/components/render-block/block-styles.js +4 -2
  20. package/dist/sdk/components/render-block/render-block.helpers.d.ts +0 -1
  21. package/dist/sdk/components/render-block/render-block.helpers.js +8 -20
  22. package/dist/sdk/components/render-block/render-block.js +25 -20
  23. package/dist/sdk/components/render-block/render-component.js +2 -3
  24. package/dist/sdk/components/render-block/render-repeated-block.js +4 -3
  25. package/dist/sdk/components/render-blocks.js +1 -1
  26. package/dist/sdk/components/render-content/builder-editing.js +1 -1
  27. package/dist/sdk/components/render-content/components/render-styles.js +2 -2
  28. package/dist/sdk/components/render-content/render-content.js +45 -11
  29. package/dist/sdk/components/render-content/render-content.types.d.ts +11 -2
  30. package/dist/sdk/components/render-content/wrap-component-ref.d.ts +6 -0
  31. package/dist/sdk/components/render-content/wrap-component-ref.js +6 -0
  32. package/dist/sdk/components/render-content-variants/helpers.d.ts +17 -0
  33. package/dist/sdk/components/render-content-variants/helpers.js +182 -0
  34. package/dist/sdk/components/render-content-variants/render-content-variants.d.ts +5 -0
  35. package/dist/sdk/components/render-content-variants/render-content-variants.js +37 -0
  36. package/dist/sdk/components/render-inlined-styles.d.ts +1 -0
  37. package/dist/sdk/components/render-inlined-styles.js +2 -13
  38. package/dist/sdk/constants/sdk-version.d.ts +1 -0
  39. package/dist/sdk/constants/sdk-version.js +1 -0
  40. package/dist/sdk/context/builder.context.js +3 -2
  41. package/dist/sdk/context/types.d.ts +17 -2
  42. package/dist/sdk/functions/evaluate.d.ts +4 -3
  43. package/dist/sdk/functions/evaluate.js +23 -2
  44. package/dist/sdk/functions/evaluate.test.d.ts +1 -0
  45. package/dist/sdk/functions/evaluate.test.js +17 -0
  46. package/dist/sdk/functions/get-block-actions-handler.d.ts +1 -1
  47. package/dist/sdk/functions/get-block-actions-handler.js +3 -1
  48. package/dist/sdk/functions/get-block-actions.d.ts +1 -1
  49. package/dist/sdk/functions/get-content/generate-content-url.js +2 -2
  50. package/dist/sdk/functions/get-content/generate-content-url.test.js +15 -0
  51. package/dist/sdk/functions/get-content/index.d.ts +7 -2
  52. package/dist/sdk/functions/get-content/index.js +43 -20
  53. package/dist/sdk/functions/get-content/types.d.ts +6 -0
  54. package/dist/sdk/functions/get-processed-block.d.ts +2 -2
  55. package/dist/sdk/functions/get-processed-block.js +16 -4
  56. package/dist/sdk/functions/get-processed-block.test.js +3 -1
  57. package/dist/sdk/helpers/ab-tests.d.ts +8 -7
  58. package/dist/sdk/helpers/ab-tests.js +103 -4
  59. package/dist/sdk/helpers/canTrack.d.ts +1 -0
  60. package/dist/sdk/helpers/canTrack.js +2 -0
  61. package/dist/sdk/helpers/cookie.d.ts +7 -3
  62. package/dist/sdk/helpers/cookie.js +9 -6
  63. package/dist/sdk/helpers/logger.d.ts +1 -0
  64. package/dist/sdk/helpers/logger.js +1 -0
  65. package/dist/sdk/index-helpers/blocks-exports.d.ts +1 -1
  66. package/dist/sdk/index-helpers/blocks-exports.js +1 -1
  67. package/dist/sdk/index.d.ts +8 -7
  68. package/dist/sdk/index.js +6 -7
  69. package/dist/sdk/scripts/init-editing.d.ts +1 -0
  70. package/dist/sdk/scripts/init-editing.js +2 -0
  71. package/dist/sdk/types/builder-content.d.ts +1 -3
  72. package/package.json +2 -5
@@ -2,7 +2,7 @@ import { evaluate } from './evaluate.js';
2
2
  import { fastClone } from './fast-clone.js';
3
3
  import { set } from './set.js';
4
4
  import { transformBlock } from './transform-block.js';
5
- const evaluateBindings = ({ block, context, state, }) => {
5
+ const evaluateBindings = ({ block, context, localState, rootState, rootSetState, }) => {
6
6
  if (!block.bindings) {
7
7
  return block;
8
8
  }
@@ -14,15 +14,27 @@ const evaluateBindings = ({ block, context, state, }) => {
14
14
  };
15
15
  for (const binding in block.bindings) {
16
16
  const expression = block.bindings[binding];
17
- const value = evaluate({ code: expression, state, context });
17
+ const value = evaluate({
18
+ code: expression,
19
+ localState,
20
+ rootState,
21
+ rootSetState,
22
+ context,
23
+ });
18
24
  set(copied, binding, value);
19
25
  }
20
26
  return copied;
21
27
  };
22
- export function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }) {
28
+ export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }) {
23
29
  const transformedBlock = transformBlock(block);
24
30
  if (shouldEvaluateBindings) {
25
- return evaluateBindings({ block: transformedBlock, state, context });
31
+ return evaluateBindings({
32
+ block: transformedBlock,
33
+ localState,
34
+ rootState,
35
+ rootSetState,
36
+ context,
37
+ });
26
38
  }
27
39
  else {
28
40
  return transformedBlock;
@@ -19,7 +19,9 @@ test('Can process bindings', () => {
19
19
  const processed = getProcessedBlock({
20
20
  block,
21
21
  context: {},
22
- state: { test: 'hello' },
22
+ rootState: { test: 'hello' },
23
+ rootSetState: undefined,
24
+ localState: undefined,
23
25
  shouldEvaluateBindings: true,
24
26
  });
25
27
  expect(processed).not.toEqual(block);
@@ -1,8 +1,9 @@
1
1
  import type { CanTrack } from '../types/can-track.js';
2
- export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
3
- contentId: string;
4
- } & CanTrack) => Promise<string>;
5
- export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
6
- contentId: string;
7
- value: string;
8
- } & CanTrack) => Promise<void>;
2
+ import type { BuilderContent } from '../types/builder-content.js';
3
+ import type { Nullable } from '../types/typescript.js';
4
+ export declare const handleABTestingSync: ({ item, canTrack, }: {
5
+ item: Nullable<BuilderContent>;
6
+ } & CanTrack) => Nullable<BuilderContent>;
7
+ export declare const handleABTesting: ({ item, canTrack, }: {
8
+ item: BuilderContent;
9
+ } & CanTrack) => Promise<BuilderContent>;
@@ -1,5 +1,104 @@
1
- import { getCookie, setCookie } from './cookie.js';
2
- const BUILDER_STORE_PREFIX = 'builderio.variations';
1
+ import { getCookie, getCookieSync, setCookie } from './cookie.js';
2
+ import { checkIsDefined } from '../helpers/nullable.js';
3
+ import { logger } from './logger.js';
4
+ const BUILDER_STORE_PREFIX = 'builder.tests';
3
5
  const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
4
- export const getContentVariationCookie = ({ contentId, canTrack, }) => getCookie({ name: getContentTestKey(contentId), canTrack });
5
- export const setContentVariationCookie = ({ contentId, canTrack, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
6
+ const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
7
+ const getContentVariationCookieSync = ({ contentId }) => getCookieSync({ name: getContentTestKey(contentId), canTrack: true });
8
+ const setContentVariationCookie = ({ contentId, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack: true });
9
+ const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
10
+ checkIsDefined(item.variations) &&
11
+ Object.keys(item.variations).length > 0;
12
+ /**
13
+ * Randomly assign a variation to a user
14
+ */
15
+ const getRandomVariationId = ({ id, variations, }) => {
16
+ let n = 0;
17
+ const random = Math.random();
18
+ // loop over variations test ratios, incrementing a counter,
19
+ // until we find the variation that this user should be assigned to
20
+ for (const id in variations) {
21
+ const testRatio = variations[id]?.testRatio;
22
+ n += testRatio;
23
+ if (random < n) {
24
+ return id;
25
+ }
26
+ }
27
+ // the variations array does not include the default variation.
28
+ // if we arrive here, then it means that the random number fits in the default variation bucket.
29
+ return id;
30
+ };
31
+ const getAndSetVariantId = (args) => {
32
+ // if variation not found in storage, assign a random variation to this user
33
+ const randomVariationId = getRandomVariationId(args);
34
+ // store variation in cookies/storage
35
+ setContentVariationCookie({
36
+ contentId: args.id,
37
+ value: randomVariationId,
38
+ }).catch((err) => {
39
+ logger.error('could not store A/B test variation: ', err);
40
+ });
41
+ return randomVariationId;
42
+ };
43
+ const getTestFields = ({ item, testGroupId, }) => {
44
+ const variationValue = item.variations[testGroupId];
45
+ if (testGroupId === item.id ||
46
+ // handle edge-case where `testGroupId` points to non-existing variation
47
+ !variationValue) {
48
+ return {
49
+ testVariationId: item.id,
50
+ testVariationName: 'Default',
51
+ };
52
+ }
53
+ else {
54
+ return {
55
+ data: variationValue.data,
56
+ testVariationId: variationValue.id,
57
+ testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
58
+ };
59
+ }
60
+ };
61
+ export const handleABTestingSync = ({ item, canTrack, }) => {
62
+ if (!canTrack) {
63
+ return item;
64
+ }
65
+ if (!item) {
66
+ return undefined;
67
+ }
68
+ if (!checkIsBuilderContentWithVariations(item)) {
69
+ return item;
70
+ }
71
+ const testGroupId = getContentVariationCookieSync({
72
+ contentId: item.id,
73
+ }) ||
74
+ getAndSetVariantId({
75
+ variations: item.variations,
76
+ id: item.id,
77
+ });
78
+ const variationValue = getTestFields({ item, testGroupId });
79
+ return {
80
+ ...item,
81
+ ...variationValue,
82
+ };
83
+ };
84
+ export const handleABTesting = async ({ item, canTrack, }) => {
85
+ if (!canTrack) {
86
+ return item;
87
+ }
88
+ if (!checkIsBuilderContentWithVariations(item)) {
89
+ return item;
90
+ }
91
+ const cookieValue = await getContentVariationCookie({
92
+ contentId: item.id,
93
+ });
94
+ const testGroupId = cookieValue ||
95
+ getAndSetVariantId({
96
+ variations: item.variations,
97
+ id: item.id,
98
+ });
99
+ const variationValue = getTestFields({ item, testGroupId });
100
+ return {
101
+ ...item,
102
+ ...variationValue,
103
+ };
104
+ };
@@ -0,0 +1 @@
1
+ export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;
@@ -0,0 +1,2 @@
1
+ import { checkIsDefined } from './nullable';
2
+ export const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
@@ -1,10 +1,13 @@
1
1
  import type { CanTrack } from '../types/can-track.js';
2
+ type GetCookieArgs = {
3
+ name: string;
4
+ } & CanTrack;
5
+ export declare const getCookieSync: ({ name, canTrack, }: GetCookieArgs) => string | undefined;
2
6
  /**
3
7
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
8
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
4
9
  */
5
- export declare const getCookie: ({ name, canTrack, }: {
6
- name: string;
7
- } & CanTrack) => Promise<string | undefined>;
10
+ export declare const getCookie: (args: GetCookieArgs) => Promise<string>;
8
11
  /**
9
12
  * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
10
13
  */
@@ -13,3 +16,4 @@ export declare const setCookie: ({ name, value, expires, canTrack, }: {
13
16
  value: string;
14
17
  expires?: Date;
15
18
  } & CanTrack) => Promise<void>;
19
+ export {};
@@ -1,10 +1,8 @@
1
1
  import { isBrowser } from '../functions/is-browser.js';
2
+ import { logger } from './logger.js';
2
3
  import { checkIsDefined } from './nullable.js';
3
4
  import { getTopLevelDomain } from './url.js';
4
- /**
5
- * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
6
- */
7
- export const getCookie = async ({ name, canTrack, }) => {
5
+ export const getCookieSync = ({ name, canTrack, }) => {
8
6
  try {
9
7
  if (!canTrack) {
10
8
  return undefined;
@@ -19,10 +17,15 @@ export const getCookie = async ({ name, canTrack, }) => {
19
17
  ?.split('=')[1];
20
18
  }
21
19
  catch (err) {
22
- console.debug('[COOKIE] GET error: ', err);
20
+ logger.warn('[COOKIE] GET error: ', err?.message || err);
23
21
  return undefined;
24
22
  }
25
23
  };
24
+ /**
25
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
26
+ * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
27
+ */
28
+ export const getCookie = async (args) => getCookieSync(args);
26
29
  const stringifyCookie = (cookie) => cookie
27
30
  .map(([key, value]) => (value ? `${key}=${value}` : key))
28
31
  .filter(checkIsDefined)
@@ -60,6 +63,6 @@ export const setCookie = async ({ name, value, expires, canTrack, }) => {
60
63
  document.cookie = cookie;
61
64
  }
62
65
  catch (err) {
63
- console.warn('[COOKIE] SET error: ', err);
66
+ logger.warn('[COOKIE] SET error: ', err?.message || err);
64
67
  }
65
68
  };
@@ -2,4 +2,5 @@ export declare const logger: {
2
2
  log: (...message: any[]) => void;
3
3
  error: (...message: any[]) => void;
4
4
  warn: (...message: any[]) => void;
5
+ debug: (...message: any[]) => void;
5
6
  };
@@ -3,4 +3,5 @@ export const logger = {
3
3
  log: (...message) => console.log(MSG_PREFIX, ...message),
4
4
  error: (...message) => console.error(MSG_PREFIX, ...message),
5
5
  warn: (...message) => console.warn(MSG_PREFIX, ...message),
6
+ debug: (...message) => console.debug(MSG_PREFIX, ...message),
6
7
  };
@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns';
3
3
  export { default as Fragment } from '../blocks/fragment/fragment';
4
4
  export { default as Image } from '../blocks/image/image';
5
5
  export { default as RenderBlocks } from '../components/render-blocks';
6
- export { default as RenderContent } from '../components/render-content/render-content';
7
6
  export { default as Section } from '../blocks/section/section';
8
7
  export { default as Symbol } from '../blocks/symbol/symbol';
9
8
  export { default as Text } from '../blocks/text/text';
10
9
  export { default as Video } from '../blocks/video/video';
10
+ export { default as RenderContent } from '../components/render-content-variants/render-content-variants';
@@ -3,8 +3,8 @@ export { default as Columns } from '../blocks/columns/columns';
3
3
  export { default as Fragment } from '../blocks/fragment/fragment';
4
4
  export { default as Image } from '../blocks/image/image';
5
5
  export { default as RenderBlocks } from '../components/render-blocks';
6
- export { default as RenderContent } from '../components/render-content/render-content';
7
6
  export { default as Section } from '../blocks/section/section';
8
7
  export { default as Symbol } from '../blocks/symbol/symbol';
9
8
  export { default as Text } from '../blocks/text/text';
10
9
  export { default as Video } from '../blocks/video/video';
10
+ export { default as RenderContent } from '../components/render-content-variants/render-content-variants';
@@ -1,12 +1,13 @@
1
1
  export * from './index-helpers/top-of-file.js';
2
2
  export * from './index-helpers/blocks-exports.js';
3
- export * from './functions/is-editing.js';
4
- export * from './functions/is-previewing.js';
5
- export * from './functions/register-component.js';
6
- export * from './functions/register.js';
7
- export * from './functions/set-editor-settings.js';
8
- export * from './functions/get-content/index.js';
9
- export * from './functions/get-builder-search-params/index.js';
3
+ export { isEditing } from './functions/is-editing.js';
4
+ export { isPreviewing } from './functions/is-previewing.js';
5
+ export { createRegisterComponentMessage } from './functions/register-component.js';
6
+ export { register } from './functions/register.js';
7
+ export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
8
+ export { setEditorSettings } from './functions/set-editor-settings.js';
9
+ export type { Settings } from './functions/set-editor-settings.js';
10
+ export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
10
11
  export { track } from './functions/track/index.js';
11
12
  export type { RegisteredComponent } from './context/types';
12
13
  export type { ComponentInfo } from './types/components';
package/dist/sdk/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  export * from './index-helpers/top-of-file.js';
2
2
  export * from './index-helpers/blocks-exports.js';
3
- export * from './functions/is-editing.js';
4
- export * from './functions/is-previewing.js';
5
- export * from './functions/register-component.js';
6
- export * from './functions/register.js';
7
- export * from './functions/set-editor-settings.js';
8
- export * from './functions/get-content/index.js';
9
- export * from './functions/get-builder-search-params/index.js';
3
+ export { isEditing } from './functions/is-editing.js';
4
+ export { isPreviewing } from './functions/is-previewing.js';
5
+ export { createRegisterComponentMessage } from './functions/register-component.js';
6
+ export { register } from './functions/register.js';
7
+ export { setEditorSettings } from './functions/set-editor-settings.js';
8
+ export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
10
9
  export { track } from './functions/track/index.js';
@@ -1,5 +1,6 @@
1
1
  export declare const registerInsertMenu: () => void;
2
2
  export declare const setupBrowserForEditing: (options?: {
3
+ enrich?: boolean;
3
4
  includeRefs?: boolean;
4
5
  locale?: string;
5
6
  }) => void;
@@ -1,3 +1,4 @@
1
+ import { SDK_VERSION } from '../constants/sdk-version.js';
1
2
  import { TARGET } from '../constants/target.js';
2
3
  import { isBrowser } from '../functions/is-browser.js';
3
4
  import { register } from '../functions/register.js';
@@ -32,6 +33,7 @@ export const setupBrowserForEditing = (options = {}) => {
32
33
  type: 'builder.sdkInfo',
33
34
  data: {
34
35
  target: TARGET,
36
+ version: SDK_VERSION,
35
37
  // TODO: compile these in
36
38
  // type: process.env.SDK_TYPE,
37
39
  // version: process.env.SDK_VERSION,
@@ -30,8 +30,6 @@ export interface BuilderContentVariation {
30
30
  }
31
31
  export interface BuilderContent extends BuilderContentVariation {
32
32
  '@version'?: number;
33
- id?: string;
34
- name?: string;
35
33
  published?: 'published' | 'draft' | 'archived';
36
34
  modelId?: string;
37
35
  priority?: number;
@@ -39,7 +37,7 @@ export interface BuilderContent extends BuilderContentVariation {
39
37
  startDate?: number;
40
38
  endDate?: number;
41
39
  variations?: {
42
- [id: string]: BuilderContentVariation | undefined;
40
+ [id: string]: BuilderContentVariation;
43
41
  };
44
42
  testVariationId?: string;
45
43
  testVariationName?: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react",
3
3
  "description": "Builder.io SDK for React",
4
- "version": "0.2.3",
4
+ "version": "0.4.0",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
@@ -14,10 +14,7 @@
14
14
  "build:types:server": "tsc -p ./tsconfig.server.json",
15
15
  "build:types:sdk": "tsc -p ./tsconfig.sdk.json",
16
16
  "build:types": "yarn build:types:sdk",
17
- "build": "yarn build:types",
18
- "release:patch": "yarn run build && npm version patch && npm publish",
19
- "release:minor": "yarn run build && npm version minor && npm publish",
20
- "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
17
+ "build": "yarn build:types"
21
18
  },
22
19
  "peerDependencies": {
23
20
  "react": "^18.2.0"