@developer_tribe/react-builder 1.2.22 → 1.2.23

package/src/utils/attributeStyle.ts

@@ -0,0 +1,26 @@
+/**
+ * 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);
+}

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;

package/src/utils/patterns.ts

@@ -61,7 +61,7 @@ type Pattern = {
   meta?: PatternMeta;
 };
 
-const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
+const patterns = generatedPatterns as unknown as Pattern[];
 
 export type BuilderPlatform = 'web' | 'native';
 
@@ -86,16 +86,22 @@ export const NON_STYLE_ATTRIBUTE_KEYS = new Set<string>([
  * known non-style props (behavior flags).
  */
 export function getStyleAttributeKeySet(): Set<string> {
-  const viewSchema = getAttributeSchema('View') ?? {};
-  const textSchema = getAttributeSchema('Text') ?? {};
-  const viewStyle =
-    typeof (viewSchema as any)?.style === 'object' && (viewSchema as any)?.style
-      ? Object.keys((viewSchema as any).style)
-      : Object.keys(viewSchema);
-  const textStyle =
-    typeof (textSchema as any)?.style === 'object' && (textSchema as any)?.style
-      ? Object.keys((textSchema as any).style)
-      : Object.keys(textSchema);
+  const viewSchema = (getAttributeSchema('View') ?? {}) as Record<
+    string,
+    unknown
+  >;
+  const textSchema = (getAttributeSchema('Text') ?? {}) as Record<
+    string,
+    unknown
+  >;
+  const getNestedStyleKeys = (schema: Record<string, unknown>): string[] => {
+    const nested = schema.style;
+    return typeof nested === 'object' && nested
+      ? Object.keys(nested)
+      : Object.keys(schema);
+  };
+  const viewStyle = getNestedStyleKeys(viewSchema);
+  const textStyle = getNestedStyleKeys(textSchema);
   const out = new Set<string>([...viewStyle, ...textStyle]);
   for (const k of NON_STYLE_ATTRIBUTE_KEYS) out.delete(k);
   return out;
@@ -209,23 +215,18 @@ export function getAttributeMeta(
   const attributes = p?.meta?.attributes;
 
   // Some patterns store style meta under `meta.attributes.styles` (nested) instead of `meta.styles`.
+  const attrsRecord = attributes as Record<string, unknown> | undefined;
   const nestedStyles =
-    attributes &&
-    typeof attributes === 'object' &&
-    (attributes as any).styles &&
-    typeof (attributes as any).styles === 'object'
-      ? ((attributes as any).styles as Record<string, AttributeMeta>)
+    attrsRecord && typeof attrsRecord.styles === 'object' && attrsRecord.styles
+      ? (attrsRecord.styles as Record<string, AttributeMeta>)
       : undefined;
 
   // When `meta.attributes.styles` exists, treat `meta.attributes` (minus `styles`) as non-style meta.
-  const attributesWithoutNestedStyles =
-    attributes && typeof attributes === 'object'
-      ? Object.fromEntries(
-          Object.entries(attributes as Record<string, unknown>).filter(
-            ([k]) => k !== 'styles',
-          ),
-        )
-      : attributes;
+  const attributesWithoutNestedStyles = attrsRecord
+    ? Object.fromEntries(
+        Object.entries(attrsRecord).filter(([k]) => k !== 'styles'),
+      )
+    : attributes;
 
   // schemaVersion=2 prefers `meta.styles` but some repos split UI meta into:
   // - meta.styles: style-tab fields
@@ -261,13 +262,7 @@ export function getTypeSchema(
 ): Record<string, string | string[]> | undefined {
   if (!componentType || !typeName) return undefined;
   const p = getPatternByType(componentType);
-  // Some JSON imports may not type-check "types" so we fallback to any access
-  const types: Record<string, Record<string, string | string[]>> | undefined = (
-    p as unknown as {
-      types?: Record<string, Record<string, string | string[]>>;
-    }
-  )?.types;
-  return types?.[typeName];
+  return p?.types?.[typeName];
 }
 
 /** Utility: returns true if the type name refers to a primitive scalar */

package/src/utils/repairNodeKeys.ts

@@ -2,13 +2,11 @@ import type { Node, NodeData } from '../types/Node';
 import { generateRandomKeyForNode } from './generateRandomKeyForNode';
 
 function isNodeDataLike(value: unknown): value is NodeData {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    !Array.isArray(value) &&
-    'type' in (value as any) &&
-    'children' in (value as any)
-  );
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const record = value as Record<string, unknown>;
+  return 'type' in record && 'children' in record;
 }
 
 function normalizeKey(value: unknown): string | undefined {

package/src/utils/wrapNodeInMain.ts

@@ -39,10 +39,10 @@ function stripNestedIsMain(node: Node, isRoot: boolean): Node {
   if (!shouldDemote && nextChildren === prevChildren) return node;
 
   return {
-    ...(node as any),
+    ...node,
     ...(shouldDemote ? { isMain: false } : null),
     children: nextChildren,
-  } as NodeData;
+  };
 }
 
 export function wrapNodeInMain(node: Node): NodeData {
@@ -50,7 +50,7 @@ export function wrapNodeInMain(node: Node): NodeData {
     // Ensure no nested nodes keep `isMain: true`.
     const cleaned = stripNestedIsMain(node, true) as NodeData;
     // Keep root as main.
-    if (cleaned.isMain !== true) return { ...(cleaned as any), isMain: true };
+    if (cleaned.isMain !== true) return { ...cleaned, isMain: true };
     return cleaned;
   }