@developer_tribe/react-builder 1.2.23 → 1.2.25

package/dist/pages/ProjectPage.d.ts

@@ -1,10 +1,10 @@
-import type { Project, ProjectColors } from '../types/Project';
+import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { AppConfig } from '../types/PreviewConfig';
 import type { LogLevel } from '../types/Project';
 import type { Fonts } from '../types/Fonts';
 export type ProjectPageProps = {
     project: Project;
-    onSaveProject: (project: Project) => void;
+    onSaveProject: (project: ProjectMeta) => void;
     appConfig?: AppConfig;
     logLevel?: LogLevel;
     projectColors?: ProjectColors;

package/dist/pages/projectPageUtils.d.ts

@@ -1,7 +1,13 @@
-import type { Project } from '../types/Project';
+import type { Project, ProjectMeta } from '../types/Project';
 import type { Node } from '../types/Node';
 export declare function resolveProjectForSave(args: {
     project: Project;
     overrideProject?: Project | null;
     data: Node;
 }): Project;
+/**
+ * Strips a full Project down to its essential persistence fields.
+ * Use before handing the project to onSaveProject so consumers only
+ * receive the canonical metadata (name, version, type, data).
+ */
+export declare function toProjectMeta(project: Project): ProjectMeta;

package/dist/types/Project.d.ts

@@ -24,6 +24,12 @@ export interface ProjectBase<T> {
 }
 export interface Project extends ProjectBase<Node> {
 }
+/**
+ * Lightweight subset of Project containing only the essential metadata
+ * needed for persistence (name, version, type, data).
+ * Excludes runtime/editor-only fields like appConfig and projectColors.
+ */
+export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
 export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
 export type LogSource = string;
 export interface LogEntry {

package/dist/utils/attributeStyle.d.ts

@@ -7,3 +7,15 @@ import type { NodeDefaultAttribute } from '../types/Node';
 export declare function getStyleBag(attributes: NodeDefaultAttribute | undefined): Record<string, unknown> | undefined;
 /** Safe indexed access to attributes. Use for reading style/direct props. */
 export declare function toAttributeRecord(attributes: unknown): Record<string, unknown>;
+/**
+ * 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.
+ */
+declare const STYLE_ATTR_KEYS_LIST: readonly ["style", "styles", "flexDirection", "flexWrap", "alignItems", "justifyContent", "gap", "padding", "paddingHorizontal", "paddingVertical", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginHorizontal", "marginVertical", "marginTop", "marginBottom", "marginLeft", "marginRight", "backgroundColor", "borderRadius", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "flex", "position", "top", "bottom", "left", "right", "zIndex", "color", "fontSize", "fontFamily", "fontWeight", "textAlign", "resizeMode"];
+/** Type-level union of all style attribute keys. Use with `Omit<T, StyleAttrKey>`. */
+export type StyleAttrKey = (typeof STYLE_ATTR_KEYS_LIST)[number];
+/** Strips all visual-style keys from an attributes record, returning only non-style keys. */
+export declare function stripStyleKeys(attrs: Record<string, unknown>): Record<string, unknown>;
+export {};

package/dist/utils/patterns.d.ts

@@ -41,6 +41,8 @@ type Pattern = {
     schemaVersion: number;
     pattern: {
         type: string;
+        title?: string;
+        description?: string;
         children: unknown;
         attributes?: Record<string, string | string[]>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,
@@ -73,6 +73,7 @@
     "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
+    "react-native": "^0.83.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.52.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -90,12 +91,16 @@
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17",
+    "react-native": ">=0.70",
     "react-router-dom": ">=6.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     },
+    "react-native": {
+      "optional": true
+    },
     "react-router-dom": {
       "optional": true
     }

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -120,11 +120,20 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
-  if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
+  // pattern.attributes is optional – components that only declare title/description
+  // (now at pattern level) may have no extra attributes at all.
+  if (
+    Object.prototype.hasOwnProperty.call(pattern, 'attributes') &&
+    (typeof pattern.attributes !== 'object' || pattern.attributes == null)
+  ) {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object`
+      `[${componentName}] pattern.json -> 'pattern.attributes' must be an object (or omitted)`
     );
   }
+  // Normalise missing attributes to empty object for the rest of the validation
+  if (!pattern.attributes) {
+    pattern.attributes = {};
+  }
 
   // Helpers for validating custom types
   const isPrimitive = t =>

package/src/AttributesEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import type { AttributesEditorProps } from './attributes-editor/attributesEditorModelTypes';
 import { useLogRender } from './utils/useLogRender';
 import { AttributesEditorView } from './attributes-editor/AttributesEditorView';
@@ -8,11 +8,22 @@ export function AttributesEditor(props: AttributesEditorProps) {
   useLogRender('AttributesEditor');
   const model = useAttributesEditorModel(props);
   const titleValue = model.attributes?.title;
+  const hasTitleField = model.hasTitleField;
+
+  // Keep a stable ref so the effect doesn't re-run when the callback
+  // reference changes (which happens every render due to unstable onChange prop).
+  const handleAttributeChangeRef = useRef(model.handleAttributeChange);
+  handleAttributeChangeRef.current = model.handleAttributeChange;
+
   useEffect(() => {
-    if (typeof titleValue === 'string' && titleValue.length > 20) {
-      model.handleAttributeChange('title', titleValue.slice(0, 20));
+    if (
+      hasTitleField &&
+      typeof titleValue === 'string' &&
+      titleValue.length > 20
+    ) {
+      handleAttributeChangeRef.current('title', titleValue.slice(0, 20));
     }
-  }, [titleValue, model.handleAttributeChange]);
+  }, [hasTitleField, titleValue]);
   return <AttributesEditorView {...model} />;
 }
 

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.22"
+  "reactBuilderVersion": "1.2.24"
 }

package/src/assets/samples/paywall-1.json

@@ -146,7 +146,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#1)",
                           "title": "text 1",
@@ -190,7 +190,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#2)",
                           "title": "text 2",
@@ -234,7 +234,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Metin öğesi. (#3)",
                           "title": "text 3",
@@ -273,7 +273,7 @@
                     "children": null
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Metin öğesi. (#4)",
                       "title": "Product Desc(s)",
@@ -284,7 +284,7 @@
                     "children": "@productDescription — Unlock all premium features for a month."
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Metin öğesi. (#5)",
                       "title": "Product Price(s)",

package/src/assets/samples/paywall-2.json

@@ -144,7 +144,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 1",
@@ -188,7 +188,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 2",
@@ -232,7 +232,7 @@
                         "children": null
                       },
                       {
-                        "type": "text",
+                        "type": "Text",
                         "attributes": {
                           "description": "Text item.",
                           "title": "text 3",
@@ -271,7 +271,7 @@
                     "children": null
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Product description.",
                       "title": "Product Desc(s)",
@@ -282,7 +282,7 @@
                     "children": "@productDescription — Unlock all premium features for a month."
                   },
                   {
-                    "type": "text",
+                    "type": "Text",
                     "attributes": {
                       "description": "Product price.",
                       "title": "Product Price(s)",

package/src/assets/samples/paywall-app-delete-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-app-open-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-back-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1470770903676-69b98201ea1c?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/paywall-notification-offer.json

@@ -68,7 +68,6 @@
             "type": "PaywallBackground",
             "attributes": {
               "src": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
-              "resizeMode": "cover",
               "description": "Paywall background.",
               "title": "Paywall Background"
             },

package/src/assets/samples/simple-2.json

@@ -104,7 +104,6 @@
         "type": "image",
         "attributes": {
           "src": "https://picsum.photos/720/320",
-          "resizeMode": "cover",
           "description": "image element 1 in sample.",
           "title": "image 1",
           "styles": {

package/src/attribute-analyser/style/native/useExtractImageStyle.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { ImageStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type {
   ImagePropsGenerated,
@@ -7,11 +8,21 @@ import type {
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractImageStyleNative } from '../../../utils/extractImageStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
-import { getStyleBag } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
->(node: NodeData<T>) {
+>(
+  node: NodeData<T>,
+): {
+  style: ImageStyle;
+  other: Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType };
+} {
   const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
@@ -23,26 +34,19 @@ export function useExtractImageStyle<
       extractImageStyleNative(node, { theme, projectColors });
 
     const attrs = node.attributes;
-
-    // Prefer the typed resizeMode from attributes, fall back to extracted style value.
+    const stripped = stripStyleKeys(toAttributeRecord(attrs));
     const imgStylesBag = getStyleBag(attrs);
+
+    // Prefer the typed resizeMode from style bag, fall back to extracted style value.
     const resizeMode = ((imgStylesBag?.resizeMode as string | undefined) ??
       resizeModeFromStyle) as ResizeModeOptionType | undefined;
 
-    // Forward all non-style attributes; style bag is already consumed above.
-    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
-    const forwardedAttrs = Object.fromEntries(
-      Object.entries(attrs ?? {}).filter(
-        ([key]) => key !== 'style' && key !== 'styles',
-      ),
-    );
-
     return {
-      style,
+      style: style as ImageStyle,
       other: {
-        ...forwardedAttrs,
+        ...stripped,
         resizeMode,
-      },
+      } as Omit<T, StyleAttrKey> & { resizeMode?: ResizeModeOptionType },
     };
   }, [node, theme, projectColors]);
 }

package/src/attribute-analyser/style/native/useExtractTextStyle.ts

@@ -1,14 +1,26 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type { TextPropsGenerated } from '../../../build-components/Text/TextProps.generated';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractTextStyleNative } from '../../../utils/extractTextStyle';
-import { getStyleBag } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
-) {
+): {
+  style: TextStyle;
+  other: Omit<T, StyleAttrKey> & {
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+  };
+} {
   const {
     appConfig: builderAppConfig,
     projectColors: builderProjectColors,
@@ -27,25 +39,23 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
         fonts,
       });
 
-      const attrs = node.attributes ?? {};
+      const attrs = node.attributes;
+      const stripped = stripStyleKeys(toAttributeRecord(attrs));
       const styleBag = getStyleBag(attrs);
-      const {
-        style: _style,
-        styles: _styles,
-        ...rest
-      } = attrs as Record<string, unknown>;
-      void _style;
-      void _styles;
 
       return {
-        style,
+        style: style as TextStyle,
         other: {
-          ...rest,
-          // These are "behavior" flags stored under style in the schema.
-          adjustsFontSizeToFit: styleBag?.adjustsFontSizeToFit as
+          ...stripped,
+          // These are "behavior" flags that may reside in the style bag.
+          adjustsFontSizeToFit: (stripped.adjustsFontSizeToFit ??
+            styleBag?.adjustsFontSizeToFit) as boolean | undefined,
+          showEllipsis: (stripped.showEllipsis ?? styleBag?.showEllipsis) as
             | boolean
             | undefined,
-          showEllipsis: styleBag?.showEllipsis as boolean | undefined,
+        } as Omit<T, StyleAttrKey> & {
+          adjustsFontSizeToFit?: boolean;
+          showEllipsis?: boolean;
         },
       };
     },

package/src/attribute-analyser/style/native/useExtractViewStyle.ts

@@ -1,44 +1,42 @@
 import { useMemo } from 'react';
+import type { ViewStyle } from 'react-native';
 import type { NodeData } from '../../../types/Node';
 import type { ViewPropsGenerated } from '../../../build-components/View/ViewProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractViewStyleNative } from '../../../utils/extractViewStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
-import { getStyleBag, toAttributeRecord } from '../../../utils/attributeStyle';
+import {
+  getStyleBag,
+  toAttributeRecord,
+  stripStyleKeys,
+  type StyleAttrKey,
+} from '../../../utils/attributeStyle';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
-) {
+): {
+  style: ViewStyle;
+  other: Omit<T, StyleAttrKey> & { scrollable?: boolean };
+} {
   const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
   const theme = appConfig?.theme ?? defaultAppConfig.theme;
   const projectColors = builderProjectColors;
 
   return useMemo(() => {
     const style = extractViewStyleNative(node, { theme, projectColors });
-
     const attrs = node.attributes;
-
-    // Forward all non-style attributes; style bag is already consumed by extractViewStyleNative.
-    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
-    const forwardedAttrs = Object.fromEntries(
-      Object.entries(attrs ?? {}).filter(
-        ([key]) => key !== 'style' && key !== 'styles',
-      ),
-    );
-
-    // scrollable may reside inside the styles bag at runtime (not on ViewStyleGenerated).
-    const attrRecord = toAttributeRecord(attrs);
+    const stripped = stripStyleKeys(toAttributeRecord(attrs));
     const styleBag = getStyleBag(attrs);
-    const scrollable = (attrRecord.scrollable ?? styleBag?.scrollable) as
-      | boolean
-      | undefined;
 
     return {
-      style,
+      style: style as ViewStyle,
       other: {
-        ...forwardedAttrs,
-        scrollable,
-      },
+        ...stripped,
+        // scrollable may reside inside the styles bag at runtime.
+        scrollable: (stripped.scrollable ?? styleBag?.scrollable) as
+          | boolean
+          | undefined,
+      } as Omit<T, StyleAttrKey> & { scrollable?: boolean },
     };
   }, [node, theme, projectColors]);
 }

package/src/attributes-editor/AttributesEditorView.tsx

@@ -63,6 +63,8 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     firstAvailableTab,
     activeEntries,
     activeSpecialSections,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
     handleChildrenChange,
@@ -94,37 +96,46 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
 
   const titleValue = getAttributeValue('title');
   const descriptionValue = getAttributeValue('description');
-  const topFieldsSection = !isInvalidNode ? (
+  const showTopFields =
+    !isInvalidNode && (hasTitleField || hasDescriptionField);
+  const topFieldsSection = showTopFields ? (
     <section className="attributes-editor__top-fields">
-      <div className="attributes-editor__field-wrapper">
-        <label className="attributes-editor__field-label" htmlFor="title">
-          Title (max 20 characters for display purposes)
-        </label>
-        <input
-          id="title"
-          className="input"
-          type="text"
-          maxLength={20}
-          value={typeof titleValue === 'string' ? titleValue : ''}
-          onChange={(event) =>
-            handleAttributeChange('title', event.target.value)
-          }
-        />
-      </div>
-      <div className="attributes-editor__field-wrapper">
-        <label className="attributes-editor__field-label" htmlFor="description">
-          Description (for display purposes)
-        </label>
-        <input
-          id="description"
-          className="input"
-          type="text"
-          value={typeof descriptionValue === 'string' ? descriptionValue : ''}
-          onChange={(event) =>
-            handleAttributeChange('description', event.target.value)
-          }
-        />
-      </div>
+      {hasTitleField ? (
+        <div className="attributes-editor__field-wrapper">
+          <label className="attributes-editor__field-label" htmlFor="title">
+            Title (max 20 characters for display purposes)
+          </label>
+          <input
+            id="title"
+            className="input"
+            type="text"
+            maxLength={20}
+            value={typeof titleValue === 'string' ? titleValue : ''}
+            onChange={(event) =>
+              handleAttributeChange('title', event.target.value)
+            }
+          />
+        </div>
+      ) : null}
+      {hasDescriptionField ? (
+        <div className="attributes-editor__field-wrapper">
+          <label
+            className="attributes-editor__field-label"
+            htmlFor="description"
+          >
+            Description (for display purposes)
+          </label>
+          <input
+            id="description"
+            className="input"
+            type="text"
+            value={typeof descriptionValue === 'string' ? descriptionValue : ''}
+            onChange={(event) =>
+              handleAttributeChange('description', event.target.value)
+            }
+          />
+        </div>
+      ) : null}
     </section>
   ) : null;
 
@@ -346,18 +357,14 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
       );
     }
 
-    const sectionAttributes =
-      section.meta?.category === 'style'
-        ? ((styleBag ?? {}) as unknown as NodeDefaultAttribute)
-        : attributes;
-
     return (
       <SpecialCategorySection
         key={section.key}
         category={section.key}
         entries={section.entries}
         attributeMeta={attributeMeta}
-        attributes={sectionAttributes}
+        attributes={attributes}
+        getAttributeValue={getAttributeValue}
         onAttributeChange={handleAttributeChange}
         componentType={data?.type}
         projectColors={projectColorsForPicker}

package/src/attributes-editor/SpecialCategorySection.tsx

@@ -16,6 +16,7 @@ type SpecialCategorySectionProps = {
   entries: SchemaEntry[];
   attributeMeta?: AttributeMetaMap;
   attributes: NodeDefaultAttribute;
+  getAttributeValue: (name: string) => unknown;
   onAttributeChange: (name: string, value: unknown) => void;
   componentType?: string;
   projectColors?: ProjectColors;
@@ -41,6 +42,7 @@ export function SpecialCategorySection({
   entries,
   attributeMeta,
   attributes,
+  getAttributeValue,
   onAttributeChange,
   componentType,
   projectColors,
@@ -96,7 +98,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -175,7 +177,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -220,7 +222,7 @@ export function SpecialCategorySection({
             const preferredScale = toPreferredScale(
               attributeMeta?.[name]?.preferedScale,
             );
-            const currentValue = (attributes as Record<string, unknown>)[name];
+            const currentValue = getAttributeValue(name);
             const isBoolean = isBooleanFieldType(type);
             const wrapperClassNames = [
               'attributes-editor__field-wrapper',

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -81,6 +81,8 @@ export type AttributesEditorModel = {
   mockableFeatureKeys: string[];
   activeMockableFeature: string | null;
   setActiveMockableFeature: (next: string | null) => void;
+  hasTitleField: boolean;
+  hasDescriptionField: boolean;
   hasStringChildren: boolean;
   childrenValue: string;
 };