@developer_tribe/react-builder 1.2.22 → 1.2.24

package/src/utils/analyseNodeByPatterns.ts

@@ -70,7 +70,7 @@ function isNodeDataLike(
   value: unknown,
 ): value is NodeData<NodeDefaultAttribute> {
   if (!isPlainObject(value)) return false;
-  const maybeType = (value as Record<string, unknown>).type;
+  const maybeType = value.type;
   // `children` is optional in persisted JSON; treat missing as `undefined`.
   // The structural validator handles overall shape; the pattern validator should
   // focus on types/attributes/children rules, not require the key to exist.
@@ -316,9 +316,10 @@ function validateCustomObjectValue(
     return fail(`Expected object for type "${typeName}"`, path);
   }
 
+  const valueRecord = value as Record<string, unknown>;
   for (const [fieldName, fieldSpec] of Object.entries(schema)) {
-    if (!(fieldName in value)) continue;
-    const fieldValue = (value as Record<string, unknown>)[fieldName];
+    if (!(fieldName in valueRecord)) continue;
+    const fieldValue = valueRecord[fieldName];
     const fieldPath = joinPath(path, fieldName);
     const res = validateAttributeValue(
       componentType,
@@ -387,8 +388,9 @@ function validateAttributesByPattern(
     {}) as AttributeSchema;
   const styleSchema = getStyleSubSchema(schema);
 
-  const maybeStyle = (attrs as Record<string, unknown>).style;
-  const maybeStyles = (attrs as Record<string, unknown>).styles;
+  const attrsRecord = attrs as Record<string, unknown>;
+  const maybeStyle = attrsRecord.style;
+  const maybeStyles = attrsRecord.styles;
 
   // schemaVersion=2 requires `attributes.styles` (plural), not `attributes.style` (singular)
   if (maybeStyle != null) {
@@ -403,9 +405,8 @@ function validateAttributesByPattern(
     if (!isPlainObject(maybeStyles)) {
       return fail(`styles must be an object`, joinPath(path, 'styles'));
     }
-    for (const [styleKey, styleValue] of Object.entries(
-      maybeStyles as Record<string, unknown>,
-    )) {
+    const stylesRecord = maybeStyles as Record<string, unknown>;
+    for (const [styleKey, styleValue] of Object.entries(stylesRecord)) {
       const spec = (styleSchema?.[styleKey] ?? schema?.[styleKey]) as
         | AttributeTypeSpec
         | undefined;
@@ -510,7 +511,7 @@ function validateAnyNodeByPatterns(
   }
 
   if (isNodeArray(node)) {
-    const arr = node as unknown as Node<NodeDefaultAttribute>[];
+    const arr = node as Node<NodeDefaultAttribute>[];
     for (let i = 0; i < arr.length; i++) {
       const res = validateAnyNodeByPatterns(arr[i], `${path}[${i}]`);
       if (!res.valid) return res;

package/src/utils/analyseNodeStructural.ts

@@ -28,7 +28,7 @@ export function analyseNodeStructural(
   }
 
   if (isNodeArray(node)) {
-    const nodeArray = node as unknown as Node[];
+    const nodeArray = node as Node[];
     for (const value of nodeArray) {
       const res = analyseNodeStructural(value as Node<NodeDefaultAttribute>);
       if (!res.valid) return res;

package/src/utils/attributeStyle.ts

@@ -0,0 +1,104 @@
+/**
+ * Shared utilities for attribute/style bag access.
+ * schemaVersion=2 uses `attributes.styles`, legacy uses `attributes.style`.
+ */
+
+import type { NodeDefaultAttribute } from '../types/Node';
+
+/** Returns styles or style bag from attributes (schemaVersion=2 uses styles, legacy uses style). */
+export function getStyleBag(
+  attributes: NodeDefaultAttribute | undefined,
+): Record<string, unknown> | undefined {
+  const record = toAttributeRecord(attributes);
+  const bag = record.styles ?? record.style;
+  return isPlainObject(bag) ? (bag as Record<string, unknown>) : undefined;
+}
+
+/** Safe indexed access to attributes. Use for reading style/direct props. */
+export function toAttributeRecord(
+  attributes: unknown,
+): Record<string, unknown> {
+  return (attributes ?? {}) as Record<string, unknown>;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+// ---------------------------------------------------------------------------
+// Style-key filtering – separates visual style keys from non-style attributes
+// ---------------------------------------------------------------------------
+
+/**
+ * All attribute keys that represent visual style properties.
+ * Used to separate style keys from non-style (behavioral/content) keys.
+ *
+ * Keep in sync with ViewStyleGenerated, TextStyleGenerated, and ImageStyleGenerated.
+ */
+const STYLE_ATTR_KEYS_LIST = [
+  // Style bag containers
+  'style',
+  'styles',
+  // Layout
+  'flexDirection',
+  'flexWrap',
+  'alignItems',
+  'justifyContent',
+  'gap',
+  // Padding
+  'padding',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  // Margin
+  'margin',
+  'marginHorizontal',
+  'marginVertical',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  // Background & border
+  'backgroundColor',
+  'borderRadius',
+  // Sizing
+  'width',
+  'minWidth',
+  'maxWidth',
+  'height',
+  'minHeight',
+  'maxHeight',
+  // Flex & position
+  'flex',
+  'position',
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'zIndex',
+  // Text
+  'color',
+  'fontSize',
+  'fontFamily',
+  'fontWeight',
+  'textAlign',
+  // Image
+  'resizeMode',
+] as const;
+
+/** Type-level union of all style attribute keys. Use with `Omit<T, StyleAttrKey>`. */
+export type StyleAttrKey = (typeof STYLE_ATTR_KEYS_LIST)[number];
+
+const STYLE_ATTR_KEYS: ReadonlySet<string> = new Set(STYLE_ATTR_KEYS_LIST);
+
+/** Strips all visual-style keys from an attributes record, returning only non-style keys. */
+export function stripStyleKeys(
+  attrs: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => !STYLE_ATTR_KEYS.has(key)),
+  );
+}

package/src/utils/extractImageStyle.ts

@@ -1,26 +1,29 @@
-import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
+import {
+  type ImagePropsGenerated,
+  type ResizeModeOptionType,
+} from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
 import {
   extractViewStyle,
   extractViewStyleNative,
   ExtractViewStyleOptions,
 } from './extractViewStyle';
+import { getStyleBag } from './attributeStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
   options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
-  // Map resizeMode to CSS object-fit
-  const resizeMode = ((attributes as any)?.resizeMode ??
-    styleBag?.resizeMode) as any;
+  // Map resizeMode to CSS object-fit (schemaVersion=2 uses `styles`, fallback to legacy `style`)
+  const stylesBag = getStyleBag(attributes) as
+    | ImagePropsGenerated['attributes']['style']
+    | undefined;
+  const resizeMode: ResizeModeOptionType | undefined = stylesBag?.resizeMode;
   if (resizeMode === 'cover') style.objectFit = 'cover';
   else if (resizeMode === 'contain') style.objectFit = 'contain';
   else if (resizeMode === 'stretch') style.objectFit = 'fill';
@@ -33,18 +36,19 @@ export function extractImageStyleNative<
   T extends ImagePropsGenerated['attributes'],
 >(node: NodeData<T>, options: ExtractViewStyleOptions = {}) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
   if (!attributes) return {};
 
-  const resizeMode = ((attributes as any)?.resizeMode ??
-    styleBag?.resizeMode) as any;
+  // schemaVersion=2 uses `styles`, fallback to legacy `style`
+  const nativeStylesBag = getStyleBag(attributes) as
+    | ImagePropsGenerated['attributes']['style']
+    | undefined;
+  const resizeMode: ResizeModeOptionType | undefined =
+    nativeStylesBag?.resizeMode;
 
   // In RN, resizeMode is usually an Image prop, but many codebases also accept it on ImageStyle.
   // We return it here so consumers can pass it through as they prefer.
   const nativeStyle: Record<string, unknown> = {};
   if (resizeMode) nativeStyle.resizeMode = resizeMode;
 
-  return { ...extractViewStyleNative(node, options as any), ...nativeStyle };
+  return { ...extractViewStyleNative(node, options), ...nativeStyle };
 }

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -17,6 +17,7 @@ import {
   resolveClosestFontWeightKey,
 } from '../loadFontFamily';
 import { fontsDebug } from '../fontsDebug';
+import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
 const inFlightFontLoads: Map<string, Promise<void>> = new Map<
   string,
@@ -97,11 +98,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as Record<string, unknown>)?.style as
-    | TextStyleGenerated
-    | undefined;
+  const attrRecord = toAttributeRecord(attributes);
+  const styleBag = getStyleBag(attributes) as TextStyleGenerated | undefined;
   const get = (key: string): unknown => {
-    const direct = (attributes as Record<string, unknown>)?.[key];
+    const direct = attrRecord[key];
     if (direct !== undefined && direct !== null) return direct;
     return styleBag?.[key as keyof TextStyleGenerated];
   };
@@ -199,15 +199,15 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
       'textTransform',
     ]);
 
-    const textStyle: React.CSSProperties = {};
+    const textStyle: Record<string, unknown> = {};
     for (const key in fullStyle) {
       const typedKey = key as keyof React.CSSProperties;
       if (textStyleProperties.has(typedKey)) {
-        (textStyle as Record<string, unknown>)[key] = fullStyle[typedKey];
+        textStyle[key] = fullStyle[typedKey];
       }
     }
 
-    return textStyle;
+    return textStyle as React.CSSProperties;
   }
 
   return fullStyle;

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -12,6 +12,7 @@ import {
   findFontDefinition,
   resolveClosestFontWeightKey,
 } from '../loadFontFamily';
+import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
 export type ExtractTextStyleNativeOptions = {
   appConfig?: AppConfig;
@@ -37,11 +38,10 @@ export function extractTextStyleNative<
   T extends TextPropsGenerated['attributes'],
 >(node: NodeData<T>, options: ExtractTextStyleNativeOptions = {}) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
+  const attrRecord = toAttributeRecord(attributes);
+  const styleBag = getStyleBag(attributes);
   const get = (key: string): unknown => {
-    const direct = (attributes as any)?.[key];
+    const direct = attrRecord[key];
     if (direct !== undefined && direct !== null) return direct;
     return styleBag?.[key];
   };
@@ -58,13 +58,13 @@ export function extractTextStyleNative<
     return style;
   }
 
-  const rawFontSize = get('fontSize') as any;
+  const rawFontSize = get('fontSize') as string | number | undefined;
   const parsedFontSize = parseSize(rawFontSize);
   if (typeof parsedFontSize === 'number') style.fontSize = parsedFontSize;
   else style.fontSize = fs(14);
 
-  const fontFamily = get('fontFamily') as any;
-  const fontWeight = get('fontWeight') as any;
+  const fontFamily = get('fontFamily') as string | undefined;
+  const fontWeight = get('fontWeight') as string | number | undefined;
   const requestedWeight = weightToNumericKey(fontWeight);
   const normalizedFontFamily =
     typeof fontFamily === 'string' && fontFamily.trim().length > 0
@@ -89,14 +89,14 @@ export function extractTextStyleNative<
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
 
-  const resolvedTextColor = parseColor(get('color') as any, {
+  const resolvedTextColor = parseColor(get('color') as string | undefined, {
     projectColors: options.projectColors,
     theme,
   });
   style.color = resolvedTextColor ?? fallbackColor;
 
-  const textAlign = get('textAlign');
-  if (textAlign) style.textAlign = textAlign as any;
+  const textAlign = get('textAlign') as string | undefined;
+  if (textAlign) style.textAlign = textAlign;
 
   const viewStyle = extractViewStyleNative(node, {
     projectColors: options.projectColors,

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -6,6 +6,7 @@ import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
+import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
 export type ExtractViewStyleOptions = {
   projectColors?: ProjectColors;
@@ -17,11 +18,10 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as Record<string, unknown>)?.style as
-    | ViewStyleGenerated
-    | undefined;
+  const attrRecord = toAttributeRecord(attributes);
+  const styleBag = getStyleBag(attributes) as ViewStyleGenerated | undefined;
   const get = (key: string): unknown => {
-    const direct = (attributes as Record<string, unknown>)?.[key];
+    const direct = attrRecord[key];
     if (direct !== undefined && direct !== null) return direct;
     return styleBag?.[key as keyof ViewStyleGenerated];
   };
@@ -112,10 +112,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   );
 
   const marginHorizontalRaw =
-    ((attributes as Record<string, unknown>).marginHorizontal as
-      | string
-      | number
-      | undefined) ??
+    (attrRecord.marginHorizontal as string | number | undefined) ??
     (styleBag?.marginHorizontal as string | number | undefined);
   if (!isEmptySizeValue(marginHorizontalRaw)) {
     const parsed = parseSize(marginHorizontalRaw);
@@ -209,13 +206,13 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     'overflowY',
   ]);
 
-  const filteredStyle: React.CSSProperties = {};
+  const filteredStyle: Record<string, unknown> = {};
   for (const key in style) {
     const typedKey = key as keyof React.CSSProperties;
     if (viewStyleProperties.has(typedKey)) {
-      (filteredStyle as Record<string, unknown>)[key] = style[typedKey];
+      filteredStyle[key] = style[typedKey];
     }
   }
 
-  return filteredStyle;
+  return filteredStyle as React.CSSProperties;
 }

package/src/utils/extractViewStyle/extractViewStyleNative.ts

@@ -1,8 +1,9 @@
-import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
+import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
 export type ExtractViewStyleNativeOptions = {
   projectColors?: ProjectColors;
@@ -17,11 +18,10 @@ export function extractViewStyleNative<
   T extends ViewPropsGenerated['attributes'],
 >(node: NodeData<T>, options: ExtractViewStyleNativeOptions = {}) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
+  const attrRecord = toAttributeRecord(attributes);
+  const styleBag = getStyleBag(attributes);
   const get = (key: string): unknown => {
-    const direct = (attributes as any)?.[key];
+    const direct = attrRecord[key];
     if (direct !== undefined && direct !== null) return direct;
     return styleBag?.[key];
   };
@@ -41,18 +41,18 @@ export function extractViewStyleNative<
   // We intentionally do not map it to overflowX/Y.
 
   const flexDirection = get('flexDirection');
-  if (flexDirection) style.flexDirection = flexDirection as any;
+  if (flexDirection) style.flexDirection = String(flexDirection);
   const alignItems = get('alignItems');
-  if (alignItems) style.alignItems = alignItems as any;
+  if (alignItems) style.alignItems = String(alignItems);
   const justifyContent = get('justifyContent');
-  if (justifyContent) style.justifyContent = justifyContent as any;
+  if (justifyContent) style.justifyContent = String(justifyContent);
 
   const setParsedSize = (property: string, rawValue: unknown) => {
     if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue as any);
+    const parsed = parseSize(rawValue as string | number);
     // RN generally expects numbers (dp). We allow percentages for width/height-like props.
     if (typeof parsed === 'number' || typeof parsed === 'string') {
-      (style as any)[property] = parsed;
+      style[property] = parsed;
     }
   };
 
@@ -68,7 +68,7 @@ export function extractViewStyleNative<
   setParsedSize('margin', get('margin'));
   setParsedSize(
     'marginHorizontal',
-    (attributes as any)?.marginHorizontal ?? styleBag?.marginHorizontal,
+    attrRecord.marginHorizontal ?? styleBag?.marginHorizontal,
   );
   setParsedSize('marginVertical', get('marginVertical'));
   setParsedSize('marginTop', get('marginTop'));
@@ -76,9 +76,9 @@ export function extractViewStyleNative<
   setParsedSize('marginLeft', get('marginLeft'));
   setParsedSize('marginRight', get('marginRight'));
 
-  const backgroundColor = get('backgroundColor') as any;
+  const backgroundColor = get('backgroundColor') as string | undefined;
   if (backgroundColor) {
-    (style as any).backgroundColor =
+    style.backgroundColor =
       parseColor(backgroundColor, {
         projectColors: options.projectColors,
         theme: options.theme,
@@ -93,19 +93,19 @@ export function extractViewStyleNative<
   setParsedSize('minHeight', get('minHeight'));
   setParsedSize('maxHeight', get('maxHeight'));
 
-  const flex = get('flex') as any;
-  if (flex !== undefined) (style as any).flex = flex;
+  const flex = get('flex') as number | undefined;
+  if (flex !== undefined) style.flex = flex;
 
-  const position = get('position') as any;
-  if (position) (style as any).position = position;
+  const position = get('position') as string | undefined;
+  if (position) style.position = position;
 
   setParsedSize('top', get('top'));
   setParsedSize('bottom', get('bottom'));
   setParsedSize('left', get('left'));
   setParsedSize('right', get('right'));
 
-  const zIndex = get('zIndex') as any;
-  if (zIndex !== undefined) (style as any).zIndex = zIndex;
+  const zIndex = get('zIndex') as number | undefined;
+  if (zIndex !== undefined) style.zIndex = zIndex;
 
   return style;
 }

package/src/utils/loadFontFamily.ts

@@ -124,25 +124,20 @@ export async function loadFontFamily(
   // Not a browser environment (SSR / RN): do nothing.
   if (typeof document === 'undefined') return;
 
-  const fontsApi = (document as any).fonts as FontFaceSet | undefined;
-  if (!fontsApi || typeof (globalThis as any).FontFace !== 'function') {
+  const fontsApi = document.fonts;
+  if (!fontsApi || typeof globalThis.FontFace !== 'function') {
     throw new Error('Font loading is not supported in this environment');
   }
-  const safeFontsApi = fontsApi as FontFaceSet;
 
   function hasLoadedFace(familyName: string, weight: string): boolean {
     try {
-      const set = safeFontsApi as unknown as Iterable<FontFace>;
-      for (const face of set) {
-        const f = face as unknown as {
-          family?: string;
-          weight?: string;
-          status?: string;
-        };
+      for (const face of fontsApi) {
         const fam =
-          typeof f.family === 'string' ? f.family.replace(/['"]/g, '') : '';
-        const w = typeof f.weight === 'string' ? f.weight.trim() : '';
-        if (fam === familyName && w === weight && f.status === 'loaded') {
+          typeof face.family === 'string'
+            ? face.family.replace(/['"]/g, '')
+            : '';
+        const w = typeof face.weight === 'string' ? face.weight.trim() : '';
+        if (fam === familyName && w === weight && face.status === 'loaded') {
           return true;
         }
       }
@@ -251,17 +246,17 @@ export async function loadFontFamily(
   }
 
   async function loadAndAdd(src: string | ArrayBuffer, label: string) {
-    const face = new (globalThis as any).FontFace(name, src as any, {
+    const face = new FontFace(name, src, {
       weight: preferWeight,
       display: 'swap',
-    }) as FontFace;
+    });
     fontsDebug.info('loadFontFamily: FontFace.load() begin', {
       familyName: name,
       weight: preferWeight,
       source: label,
     });
     const loaded = await face.load();
-    safeFontsApi.add(loaded);
+    fontsApi.add(loaded);
     fontsDebug.info('loadFontFamily: loaded + added to document.fonts', {
       familyName: name,
       weight: preferWeight,
@@ -296,18 +291,18 @@ export async function loadFontFamily(
 
   try {
     const afterQuery = `${preferWeight} 16px "${name}"`;
-    const after = safeFontsApi.check(afterQuery);
+    const after = fontsApi.check(afterQuery);
     fontsDebug.info('loadFontFamily: document.fonts.check after add', {
       familyName: name,
       weight: preferWeight,
       result: after,
     });
     // Force the browser to "activate" the face for this query (and reveal errors if any).
-    if (typeof (safeFontsApi as any).load === 'function') {
+    if (typeof fontsApi.load === 'function') {
       fontsDebug.info('loadFontFamily: document.fonts.load begin', {
         query: afterQuery,
       });
-      await (safeFontsApi as any).load(afterQuery);
+      await fontsApi.load(afterQuery);
       fontsDebug.info('loadFontFamily: document.fonts.load done', {
         query: afterQuery,
       });

package/src/utils/logRenderStore.ts

@@ -67,20 +67,21 @@ export function logRenderStore(options: LogRenderStoreOptions = {}): void {
   const { label, includeLocalStorage = true, extra } = options;
 
   const state = useRenderStore.getState();
-  const keys = Object.keys(state as Record<string, unknown>).sort();
+  const stateRecord = state as Record<string, unknown>;
+  const keys = Object.keys(stateRecord).sort();
 
   const snapshot: Record<string, unknown> = {};
   const actions: string[] = [];
 
   for (const key of keys) {
-    const v = (state as any)[key];
+    const v = stateRecord[key];
     if (isFn(v)) actions.push(key);
     else snapshot[key] = v;
   }
 
   const title = `[RB Debug] Render store${label ? ` (${label})` : ''}`;
-  const groupCollapsed = (console as any).groupCollapsed as unknown;
-  const groupEnd = (console as any).groupEnd as unknown;
+  const groupCollapsed = console.groupCollapsed as unknown;
+  const groupEnd = console.groupEnd as unknown;
 
   if (isFn(groupCollapsed)) groupCollapsed(title);
   else {

package/src/utils/nodeTree.ts

@@ -19,7 +19,7 @@ export function deleteNodeFromTree(root: Node, target: Node): Node {
     return changed ? nextChildren : root;
   }
 
-  const data = root as any;
+  const data = root as NodeData;
   if ('children' in data) {
     const prev = data.children as Node;
     if (!prev) return root;