Issues fix - Chore/migrate render html

packages/css-processor/src/CSSNativeParseRun.ts

@@ -2,6 +2,7 @@ import { CSSParseRun } from './CSSParseRun';
 import { MixedStyleDeclaration } from './CSSProcessor';
 import { CSSPropertiesValidationRegistry } from './CSSPropertiesValidationRegistry';
 import { lookupRecord } from './helpers';
+import { ValidatorsType } from './makepropertiesValidators';
 import {
   ExtraNativeTextStyle,
   NativeDirectionalStyleKeys,
@@ -42,9 +43,6 @@ const extraLongViewStyles: Record<ExtraNativeLongViewStyleKeys, 'block'> = {
   shadowRadius: 'block',
   tintColor: 'block',
   transformMatrix: 'block',
-  translateX: 'block',
-  translateY: 'block',
-  borderCurve: 'block',
   gap: 'block',
   inset: 'block',
   insetBlock: 'block',
@@ -83,16 +81,16 @@ export class CSSNativeParseRun extends CSSParseRun {
 
   private fillProp<K extends keyof MixedStyleDeclaration>(
     key: K,
-    value: any
+    value: MixedStyleDeclaration[K]
   ): void {
     const validator = this.validationMap.getValidatorForProperty(
-      String(key)
-    ) as any;
+      String(key) as keyof ValidatorsType
+    );
     if (validator && 'normalizeNativeValue' in validator) {
       const normalizedValue = validator.normalizeNativeValue(value);
       if (normalizedValue instanceof ShortMergeRequest) {
         normalizedValue.forEach(([innerKey, innerValue]) => {
-          this.fillProp(innerKey as any, innerValue);
+          this.fillProp(innerKey, innerValue);
         });
       } else {
         // assume longhand merge
@@ -123,10 +121,8 @@ export class CSSNativeParseRun extends CSSParseRun {
 
   protected fillProcessedProps(): void {
     const declaration = this.declaration;
-    for (const key of Object.keys(declaration) as Array<
-      keyof MixedStyleDeclaration
-    >) {
-      this.fillProp(key, this.declaration[key]);
+    for (const [key, value] of Object.entries(declaration)) {
+      this.fillProp(key as keyof MixedStyleDeclaration, value);
     }
   }
 }

packages/css-processor/src/makepropertiesValidators.ts

@@ -138,6 +138,46 @@ export default function makepropertiesValidators(config: CSSProcessorConfig) {
       model: nativeTranslatableBlockRetainModel,
       propertyName: 'flexFlow'
     }),
+    gap: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'gap',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    inset: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'inset',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    insetBlock: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'insetBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    insetInline: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'insetInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    marginBlock: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'marginBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    marginInline: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'marginInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    paddingBlock: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'paddingBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    paddingInline: new LongSizeCSSPropertyValidator({
+      config,
+      propertyName: 'paddingInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
     font: new ShortFontCSSValidator({
       config,
       model: nativeTranslatableTextFlowModel,

packages/css-processor/src/native-types.ts

@@ -45,6 +45,8 @@ export type ExtraNativeUntranslatedLongStyles = Pick<
   CSSLongNativeUntranslatableBlockPropKey
 >;
 
+type UnimplementedNativeStyleKeys = 'translateX' | 'translateY' | 'borderCurve';
+
 /**
  * Extraneous React Native ViewStyle keys.
  */
@@ -53,6 +55,7 @@ export type ExtraNativeLongViewStyleKeys = Exclude<
   | CSSLongNativeBlockPropKey
   | NativeDirectionalStyleKeys
   | ExtraNativeShortViewStyleKeys
+  | UnimplementedNativeStyleKeys
 >;
 
 /**

packages/render-html/src/TNodeRenderer.tsx

@@ -1,5 +1,11 @@
-import React, { memo, ReactElement } from 'react';
-import { TDefaultRenderer, TNodeRendererProps } from './shared-types';
+import React, { ComponentType, memo, ReactElement } from 'react';
+import {
+  CustomRendererProps,
+  InternalRendererProps,
+  TDefaultRenderer,
+  TDefaultRendererProps,
+  TNodeRendererProps
+} from './shared-types';
 import { useSharedProps } from './context/SharedPropsProvider';
 import {
   TText,
@@ -54,18 +60,19 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
     TNodeChildrenRenderer,
     sharedProps
   };
-  const renderer =
+  const renderer = (
     tnode.type === 'block' || tnode.type === 'document'
       ? TDefaultBlockRenderer
       : tnode.type === 'text'
       ? TDefaultTextRenderer
       : tnode.type === 'phrasing'
       ? TDefaultPhrasingRenderer
-      : renderEmptyContent;
+      : renderEmptyContent
+  ) as TDefaultRenderer<TNode>;
 
-  const { assembledProps, Renderer } = useAssembledCommonProps(
+  const { assembledProps, Renderer } = useAssembledCommonProps<TNode>(
     tnodeProps,
-    renderer as any
+    renderer
   );
   switch (tnode.type) {
     case 'empty':
@@ -112,13 +119,20 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
       }
       break;
   }
-  const renderFn =
-    tnode.type === 'block' || tnode.type === 'document'
-      ? renderBlockContent
-      : renderTextualContent;
-  return Renderer === null
-    ? renderFn(assembledProps as any)
-    : React.createElement(Renderer as any, assembledProps);
+
+  if (Renderer !== null)
+    return React.createElement(
+      Renderer as ComponentType<
+        CustomRendererProps<TNode> | InternalRendererProps<TNode>
+      >,
+      assembledProps
+    );
+  if (tnode.type === 'block' || tnode.type === 'document') {
+    return renderBlockContent(assembledProps as TDefaultRendererProps<TBlock>);
+  }
+  return renderTextualContent(
+    assembledProps as TDefaultRendererProps<TPhrasing | TText>
+  );
 });
 
 export {

packages/render-html/src/hooks/useAssembledCommonProps.ts

@@ -24,7 +24,7 @@ export default function useAssembledCommonProps<T extends TNode>(
     renderLength,
     TNodeChildrenRenderer
   }: TNodeSubRendererProps<T>,
-  TDefault: TDefaultRenderer<T> | null
+  TDefault: TDefaultRenderer<TNode> | null
 ): {
   Renderer: CustomRenderer<T> | InternalRenderer<T> | null;
   assembledProps: CustomRendererProps<T> &
@@ -33,7 +33,7 @@ export default function useAssembledCommonProps<T extends TNode>(
 } {
   const { Default, Custom } = useRendererConfig(tnode);
   const containerProps = useDefaultContainerProps();
-  const assembledProps: CustomRendererProps<T> & TDefaultRendererProps<T> = {
+  const assembledProps = {
     tnode,
     propsFromParent,
     sharedProps,
@@ -45,11 +45,12 @@ export default function useAssembledCommonProps<T extends TNode>(
     ) as any,
     type: tnode.type === 'text' || tnode.type === 'phrasing' ? 'text' : 'block',
     propsForChildren: tnode.tagName ? {} : propsFromParent,
-    InternalRenderer: Default || (TDefault as any),
     renderIndex,
     renderLength,
     ...containerProps
-  };
+  } as CustomRendererProps<T> &
+    TDefaultRendererProps<T> &
+    InternalRendererProps<T>;
   return {
     assembledProps,
     Renderer: Custom || Default || null