chore(render): update demo for render components

demo/src/Components/BottomSheet/ContentSection.tsx

@@ -17,13 +17,16 @@ const BottomSheetContentSection = (props: HvComponentProps) => {
     [key, setContentSectionHeight],
   );
 
-  const children = Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
+  return (
+    <View onLayout={onLayout}>
+      <Hyperview.HvChildren
+        element={props.element}
+        onUpdate={props.onUpdate}
+        options={props.options}
+        stylesheets={props.stylesheets}
+      />
+    </View>
   );
-  return <View onLayout={onLayout}>{children}</View>;
 };
 
 BottomSheetContentSection.namespaceURI = namespace;

demo/src/Components/BottomSheet/StopPoint.tsx

@@ -5,13 +5,16 @@ import { View } from 'react-native';
 import { namespace } from './types';
 
 const BottomSheetStopPoint = (props: HvComponentProps) => {
-  const children = Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
+  return (
+    <View>
+      <Hyperview.HvChildren
+        element={props.element}
+        onUpdate={props.onUpdate}
+        options={props.options}
+        stylesheets={props.stylesheets}
+      />
+    </View>
   );
-  return <View>{children}</View>;
 };
 
 BottomSheetStopPoint.namespaceURI = namespace;

demo/src/Components/BottomTabBar/BottomTabBarItem.tsx

@@ -1,7 +1,7 @@
-import * as Render from 'hyperview/src/services/render';
-import type { HvComponentOnUpdate, HvComponentProps } from 'hyperview';
+import React, { useState } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { createElement, useState } from 'react';
+import type { HvComponentProps } from 'hyperview';
+import Hyperview from 'hyperview';
 import { createEventHandler } from 'hyperview/src/core/hyper-ref';
 import { createProps } from 'hyperview/src/services';
 import { namespaceURI } from './constants';
@@ -36,17 +36,24 @@ const BottomTabBarItem = (props: HvComponentProps) => {
     // component to ensure proper layout.
     outerProps.style = { flex: p.style.flex };
   }
-  const component = createElement(
-    View,
-    p,
-    ...Render.renderChildren(
-      props.element,
-      props.stylesheets,
-      props.onUpdate as HvComponentOnUpdate,
-      newOptions,
-    ),
+  return (
+    <TouchableWithoutFeedback
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...outerProps}
+    >
+      <View
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...p}
+      >
+        <Hyperview.HvChildren
+          element={props.element}
+          onUpdate={props.onUpdate}
+          options={newOptions}
+          stylesheets={props.stylesheets}
+        />
+      </View>
+    </TouchableWithoutFeedback>
   );
-  return createElement(TouchableWithoutFeedback, outerProps, component);
 };
 
 BottomTabBarItem.namespaceURI = namespaceURI;

demo/src/Components/Filter/Filter.tsx

@@ -1,8 +1,8 @@
 import * as Logging from 'hyperview/src/services/logging';
 import Hyperview, { Events, LOCAL_NAME, Namespaces } from 'hyperview';
+import React, { useEffect } from 'react';
 import type { HvComponentProps } from 'hyperview';
 import { findElements } from '../../Helpers';
-import { useEffect } from 'react';
 
 type FormDataPart = {
   fieldName: string;
@@ -101,12 +101,14 @@ const Filter = (props: HvComponentProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.element]);
 
-  return (Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
-  ) as unknown) as JSX.Element;
+  return (
+    <Hyperview.HvChildren
+      element={props.element}
+      onUpdate={props.onUpdate}
+      options={props.options}
+      stylesheets={props.stylesheets}
+    />
+  );
 };
 
 Filter.namespaceURI = FILTER_NS;

demo/src/Components/Map/Map.tsx

@@ -81,13 +81,6 @@ const Map = (props: HvComponentProps) => {
     });
   };
 
-  const children = Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
-  );
-
   return (
     <MapView
       ref={ref}
@@ -110,7 +103,12 @@ const Map = (props: HvComponentProps) => {
       toolbarEnabled={false}
       zoomEnabled={false}
     >
-      {children}
+      <Hyperview.HvChildren
+        element={props.element}
+        onUpdate={props.onUpdate}
+        options={props.options}
+        stylesheets={props.stylesheets}
+      />
     </MapView>
   );
 };

demo/src/Components/Map/MapMarker.tsx

@@ -16,11 +16,14 @@ const MapMarker = (props: HvComponentProps) => {
     latitude: parseFloat(getAttribute('latitude') || '0'),
     longitude: parseFloat(getAttribute('longitude') || '0'),
   };
-  const children = Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
+
+  const children = (
+    <Hyperview.HvChildren
+      element={props.element}
+      onUpdate={props.onUpdate}
+      options={props.options}
+      stylesheets={props.stylesheets}
+    />
   );
   if (Platform.OS === 'web') {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

demo/src/Components/NavBack/NavBack.tsx

@@ -1,8 +1,8 @@
+import React, { useContext } from 'react';
 import type { HvComponentProps } from 'hyperview';
 import Hyperview from 'hyperview';
 import { NavigationContext } from '@react-navigation/native';
 import { findElements } from '../../Helpers';
-import { useContext } from 'react';
 
 export const namespaceURI = 'https://hyperview.org/navigation';
 
@@ -25,12 +25,14 @@ const NavBack = (props: HvComponentProps) => {
   if (!element) {
     return null;
   }
-  return (Hyperview.renderElement(
-    element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
-  ) as unknown) as JSX.Element;
+  return (
+    <Hyperview.HvElement
+      element={element}
+      onUpdate={props.onUpdate}
+      options={props.options}
+      stylesheets={props.stylesheets}
+    />
+  );
 };
 
 NavBack.namespaceURI = namespaceURI;

demo/src/Components/SafeAreaView/SafeAreaView.tsx

@@ -34,12 +34,6 @@ const SafeAreaView = (props: HvComponentProps) => {
     props.element.getAttributeNS(namespaceURI, 'mode') || defaultMode;
   const insets =
     props.element.getAttributeNS(namespaceURI, 'insets') || defaultInsets;
-  const children = Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
-  );
   const extraStyle = Hyperview.createStyleProp(
     props.element,
     props.stylesheets,
@@ -91,7 +85,12 @@ const SafeAreaView = (props: HvComponentProps) => {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <View key={key} style={style}>
-      {children}
+      <Hyperview.HvChildren
+        element={props.element}
+        onUpdate={props.onUpdate}
+        options={props.options}
+        stylesheets={props.stylesheets}
+      />
     </View>
   );
 };

demo/src/Components/ScrollOpacity/ScrollOpacity.tsx

@@ -54,13 +54,16 @@ const ScrollOpacity = (props: HvComponentProps) => {
     }).start();
   }, [duration, opacity, opacityRange, position, scrollRange]);
 
-  const children = (Hyperview.renderChildren(
-    props.element,
-    props.stylesheets,
-    props.onUpdate,
-    props.options,
-  ) as unknown) as JSX.Element;
-  return <Animated.View style={[style, { opacity }]}>{children}</Animated.View>;
+  return (
+    <Animated.View style={[style, { opacity }]}>
+      <Hyperview.HvChildren
+        element={props.element}
+        onUpdate={props.onUpdate}
+        options={props.options}
+        stylesheets={props.stylesheets}
+      />
+    </Animated.View>
+  );
 };
 
 ScrollOpacity.namespaceURI = namespaceURI;

demo/src/Core/BottomTabBar/index.tsx

@@ -1,8 +1,8 @@
-import * as Render from 'hyperview/src/services/render';
+import React, { useCallback } from 'react';
 import type { HvComponentOnUpdate } from 'hyperview';
+import Hyperview from 'hyperview';
 import type { Props } from './types';
 import { useBottomTabBarContext } from '../../Contexts';
-import { useCallback } from 'react';
 
 /**
  * Component used by Hyperview to render a custom bottom tab bar.
@@ -40,18 +40,20 @@ export const BottomTabBar = (navProps: Props): JSX.Element | null => {
     return null;
   }
 
-  return (Render.renderChildren(
-    props.element,
-    props.stylesheets,
-    onUpdateCustom,
-    {
-      ...props.options,
-      onSelect: (route: string | null | undefined) => {
-        if (route) {
-          navigation.navigate(route);
-        }
-      },
-      targetId: state.routes[state.index].name,
-    },
-  ) as unknown) as JSX.Element;
+  return (
+    <Hyperview.HvChildren
+      element={props.element}
+      onUpdate={onUpdateCustom}
+      options={{
+        ...props.options,
+        onSelect: (route: string | null | undefined) => {
+          if (route) {
+            navigation.navigate(route);
+          }
+        },
+        targetId: state.routes[state.index].name,
+      }}
+      stylesheets={props.stylesheets}
+    />
+  );
 };

src/components/hv-list/index.tsx

@@ -3,7 +3,6 @@ import * as Dom from 'hyperview/src/services/dom';
 import * as Keyboard from 'hyperview/src/services/keyboard';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
-import * as Render from 'hyperview/src/services/render';
 import type {
   DOMString,
   HvComponentOnUpdate,
@@ -20,6 +19,7 @@ import { createTestProps, getAncestorByTagName } from 'hyperview/src/services';
 import { DOMParser } from '@instawork/xmldom';
 import type { ElementRef } from 'react';
 import { FlatList } from 'hyperview/src/core/components/scroll';
+import HvElement from 'hyperview/src/core/components/hv-element';
 import { LOCAL_NAME } from 'hyperview/src/types';
 
 export default class HvList extends PureComponent<HvComponentProps, State> {
@@ -265,12 +265,13 @@ export default class HvList extends PureComponent<HvComponentProps, State> {
               removeClippedSubviews={false}
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               renderItem={({ item }: any) =>
-                item &&
-                Render.renderElement(
-                  item,
-                  this.props.stylesheets,
-                  this.onUpdate,
-                  this.props.options,
+                item && (
+                  <HvElement
+                    element={item as Element}
+                    onUpdate={this.onUpdate}
+                    options={this.props.options}
+                    stylesheets={this.props.stylesheets}
+                  />
                 )
               }
               scrollIndicatorInsets={scrollIndicatorInsets}

src/components/hv-option/index.ts → src/components/hv-option/index.tsx

@@ -1,12 +1,9 @@
 import * as Behaviors from 'hyperview/src/services/behaviors';
 import * as Namespaces from 'hyperview/src/services/namespaces';
-import * as Render from 'hyperview/src/services/render';
-import type {
-  HvComponentOnUpdate,
-  HvComponentProps,
-} from 'hyperview/src/types';
 import React, { PureComponent } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
+import HvChildren from 'hyperview/src/core/components/hv-children';
+import type { HvComponentProps } from 'hyperview/src/types';
 import { LOCAL_NAME } from 'hyperview/src/types';
 import type { State } from './types';
 import { createEventHandler } from 'hyperview/src/core/hyper-ref';
@@ -56,6 +53,7 @@ export default class HvOption extends PureComponent<HvComponentProps, State> {
       this.props.stylesheets,
       newOptions,
     );
+    const { key, ...otherProps } = props;
 
     // Option renders as an outer TouchableWithoutFeedback view and inner view.
     // The outer view handles presses, the inner view handles styling.
@@ -82,19 +80,24 @@ export default class HvOption extends PureComponent<HvComponentProps, State> {
       outerProps.style = { flex: props.style.flex };
     }
 
-    return React.createElement(
-      TouchableWithoutFeedback,
-      outerProps,
-      React.createElement(
-        View,
-        props,
-        ...Render.renderChildren(
-          this.props.element,
-          this.props.stylesheets,
-          this.props.onUpdate as HvComponentOnUpdate,
-          newOptions,
-        ),
-      ),
+    return (
+      <TouchableWithoutFeedback
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...outerProps}
+      >
+        <View
+          key={key}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...otherProps}
+        >
+          <HvChildren
+            element={this.props.element}
+            onUpdate={this.props.onUpdate}
+            options={newOptions}
+            stylesheets={this.props.stylesheets}
+          />
+        </View>
+      </TouchableWithoutFeedback>
     );
   }
 }