refactor: better naming for lists internals

packages/render-html/src/elements/ListElement.tsx

@@ -11,13 +11,13 @@ import { DefaultTagRendererProps, TChildProps } from '../shared-types';
 import { useTChildrenRenderer } from '../context/TChildrenRendererContext';
 import { DEFAULT_TEXT_COLOR } from '../constants';
 import pick from 'ramda/src/pick';
-import defaultMarkers, { UnitaryListStyleSpec } from './defaultMarkers';
-import { SupportedListStyleType } from './list-types';
+import defaultListStyleSpecs, { UnitaryListStyleSpec } from './defaultListStyleSpecs';
+import { DefaultSupportedListStyleType } from './list-types';
 
 export interface ListElementProps<T extends 'ol' | 'ul'>
   extends DefaultTagRendererProps<TBlock> {
   listType: T;
-  getListStyleTypeFromNestLevel: (nestLevel: number) => SupportedListStyleType;
+  getListStyleTypeFromNestLevel: (nestLevel: number) => DefaultSupportedListStyleType;
   getStyleFromNestLevel?: (nestLevel: number) => ViewStyle | null;
   /**
    * If `true`:
@@ -110,18 +110,18 @@ export default function ListElement({
   const nestLevelStyle = getStyleFromNestLevel?.call(null, nestLevel);
   const selectedListType = getListStyleTypeFromNestLevel(nestLevel);
   const listStyleType =
-    (tnode.styles.webTextFlow.listStyleType as SupportedListStyleType) ||
+    (tnode.styles.webTextFlow.listStyleType as DefaultSupportedListStyleType) ||
     selectedListType;
-  if (__DEV__ && !(listStyleType in defaultMarkers)) {
+  if (__DEV__ && !(listStyleType in defaultListStyleSpecs)) {
     console.warn(
       `list-style-type "${listStyleType}" is not handled by react-native-render-html.` +
         'You can register a custom list marker renderer with the appropriate prop.'
     );
   }
   const spec =
-    listStyleType in defaultMarkers
-      ? defaultMarkers[listStyleType]
-      : defaultMarkers[selectedListType];
+    listStyleType in defaultListStyleSpecs
+      ? defaultListStyleSpecs[listStyleType]
+      : defaultListStyleSpecs[selectedListType];
   const counterRenderer = spec.counterStyleRenderer;
   const startIndex = getStartIndex(tnode);
   const markerTextStyle = extractMarkerTextStyle(tnode);
@@ -133,7 +133,7 @@ export default function ListElement({
     rtlMarkerReversed: rtl,
     length: tnode.children.length,
     renderMarker:
-      spec.type === 'cyclic'
+      spec.type === 'unitary'
         ? createSymbolicMarkerRenderer(spec.Component)
         : undefined
   });

packages/render-html/src/elements/defaultMarkers.ts → packages/render-html/src/elements/defaultListStyleSpecs.ts

@@ -12,13 +12,18 @@ import DisclosureOpenSymbolRenderer from './symbolic/DisclosureOpenSymbolRendere
 import CircleSymbolRenderer from './symbolic/CircleSymbolRenderer';
 import DiscSymbolRenderer from './symbolic/DiscSymbolRenderer';
 import SquareSymbolRenderer from './symbolic/SquareSymbolRenderer';
-import { ListPrefixRendererProps, SupportedListStyleType } from './list-types';
+import {
+  ListCounterRendererProps,
+  DefaultSupportedListStyleType
+} from './list-types';
 
-const symbolicRenderer = CounterStyle.cyclic('*').withSuffix('  ');
+const unitaryRenderer = CounterStyle.cyclic('*').withSuffix(' ');
 
 /**
  * Specs for a list item marker renderer backed by a `CounterStyleRenderer`
  * from `@jsamr/counter-style`.
+ *
+ * @public
  */
 export interface TextualListStyleSpec {
   type: 'textual';
@@ -30,13 +35,20 @@ export interface TextualListStyleSpec {
  * "Component" should render this representation, minus prefix and suffix. The
  * rendered component should have a maximum width of `0.6 * fontSize`, and a height of
  * `lineHeight`.
+ *
+ * @public
  */
 export interface UnitaryListStyleSpec {
   counterStyleRenderer: CounterStyleRenderer;
-  type: 'cyclic';
-  Component: ComponentType<ListPrefixRendererProps>;
+  type: 'unitary';
+  Component: ComponentType<ListCounterRendererProps>;
 }
 
+/**
+ * An object to specify how to render list markers.
+ *
+ * @public
+ */
 export type ListStyleSpec = TextualListStyleSpec | UnitaryListStyleSpec;
 
 const lowerAlphaSpec = {
@@ -49,19 +61,22 @@ const upperAlphaSpec = {
   counterStyleRenderer: upperAlpha
 } as const;
 
-const defaultMarkers: Record<SupportedListStyleType, ListStyleSpec> = {
+const defaultListStyleSpecs: Record<
+  DefaultSupportedListStyleType,
+  ListStyleSpec
+> = {
   'decimal-leading-zero': {
     type: 'textual',
     counterStyleRenderer: decimalLeadingZero
   },
   'disclosure-closed': {
-    counterStyleRenderer: symbolicRenderer,
-    type: 'cyclic',
+    counterStyleRenderer: unitaryRenderer,
+    type: 'unitary',
     Component: DisclosureClosedSymbolRenderer
   },
   'disclosure-open': {
-    counterStyleRenderer: symbolicRenderer,
-    type: 'cyclic',
+    counterStyleRenderer: unitaryRenderer,
+    type: 'unitary',
     Component: DisclosureOpenSymbolRenderer
   },
   'lower-alpha': lowerAlphaSpec,
@@ -81,29 +96,29 @@ const defaultMarkers: Record<SupportedListStyleType, ListStyleSpec> = {
     counterStyleRenderer: upperRoman
   },
   circle: {
-    counterStyleRenderer: symbolicRenderer,
-    type: 'cyclic',
+    counterStyleRenderer: unitaryRenderer,
+    type: 'unitary',
     Component: CircleSymbolRenderer
   },
   decimal: {
     type: 'textual',
     counterStyleRenderer: decimal
   },
   disc: {
-    counterStyleRenderer: symbolicRenderer,
-    type: 'cyclic',
+    counterStyleRenderer: unitaryRenderer,
+    type: 'unitary',
     Component: DiscSymbolRenderer
   },
   none: {
     counterStyleRenderer: CounterStyle.symbolic('').withSuffix(null),
-    type: 'cyclic',
+    type: 'unitary',
     Component: () => null
   },
   square: {
-    counterStyleRenderer: symbolicRenderer,
-    type: 'cyclic',
+    counterStyleRenderer: unitaryRenderer,
+    type: 'unitary',
     Component: SquareSymbolRenderer
   }
 };
 
-export default defaultMarkers;
+export default defaultListStyleSpecs;

packages/render-html/src/elements/list-types.ts

@@ -1,7 +1,7 @@
 import type { MixedStyleDeclaration } from '@native-html/css-processor';
 
-export type ListPrefixRendererProps = {
-  color?: string;
+export type ListCounterRendererProps = {
+  color: string;
   fontSize: number;
   lineHeight: number;
   index: number;
@@ -10,7 +10,7 @@ export type ListPrefixRendererProps = {
   'fontFamily' | 'fontStyle' | 'fontWeight' | 'fontVariant'
 >;
 
-export type SupportedListStyleType =
+export type DefaultSupportedListStyleType =
   | 'none'
   | 'disc'
   | 'circle'

packages/render-html/src/elements/symbolic/CircleSymbolRenderer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 import useSymbolicMarkerRendererProps from './useSymbolicMarkerRendererStyles';
 
-export default function CircleSymbolRenderer(props: ListPrefixRendererProps) {
+export default function CircleSymbolRenderer(props: ListCounterRendererProps) {
   const { prefixSize, prefixStyle } = useSymbolicMarkerRendererProps(props);
   const style = {
     borderColor: props.color,

packages/render-html/src/elements/symbolic/DiscSymbolRenderer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 import useSymbolicMarkerRendererProps from './useSymbolicMarkerRendererStyles';
 
-export default function DiscSymbolRenderer(props: ListPrefixRendererProps) {
+export default function DiscSymbolRenderer(props: ListCounterRendererProps) {
   const { prefixSize, prefixStyle } = useSymbolicMarkerRendererProps(props);
   const style = {
     borderRadius: prefixSize,

packages/render-html/src/elements/symbolic/DisclosureClosedSymbolRenderer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 import useSymbolicMarkerRendererProps from './useSymbolicMarkerRendererStyles';
 
 export default function DisclosureClosedSymbolRenderer(
-  props: ListPrefixRendererProps
+  props: ListCounterRendererProps
 ) {
   const {
     prefixStyle: { top },

packages/render-html/src/elements/symbolic/DisclosureOpenSymbolRenderer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 import useSymbolicMarkerRendererProps from './useSymbolicMarkerRendererStyles';
 
 export default function DisclosureOpenSymbolRenderer(
-  props: ListPrefixRendererProps
+  props: ListCounterRendererProps
 ) {
   const {
     prefixStyle: { top },

packages/render-html/src/elements/symbolic/SquareSymbolRenderer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 import useSymbolicMarkerRendererProps from './useSymbolicMarkerRendererStyles';
 
-export default function SquareSymbolRenderer(props: ListPrefixRendererProps) {
+export default function SquareSymbolRenderer(props: ListCounterRendererProps) {
   const { prefixStyle } = useSymbolicMarkerRendererProps(props, 1.2);
   return React.createElement(View, {
     style: {

packages/render-html/src/elements/symbolic/useSymbolicMarkerRendererStyles.ts

@@ -1,7 +1,7 @@
-import { ListPrefixRendererProps } from '../list-types';
+import { ListCounterRendererProps } from '../list-types';
 
 export default function useSymbolicMarkerRendererProps(
-  props: ListPrefixRendererProps,
+  props: ListCounterRendererProps,
   shrinkFactor = 1
 ) {
   const prefixSize = props.fontSize / (shrinkFactor * 2.8);

packages/render-html/src/renderers/OLRenderer.tsx

@@ -6,11 +6,11 @@ import {
 import { DefaultBlockRenderer } from '../render/render-types';
 import { DefaultTagRendererProps } from '../shared-types';
 import OLElement, { OLElementProps } from '../elements/OLElement';
-import { SupportedListStyleType } from '../elements/list-types';
+import { DefaultSupportedListStyleType } from '../elements/list-types';
 
 function getListStyleTypeFromNestLevel(
   nestLevel: number
-): SupportedListStyleType {
+): DefaultSupportedListStyleType {
   switch (nestLevel % 3) {
     case 0:
       return 'decimal';

packages/render-html/src/renderers/ULRenderer.tsx

@@ -4,11 +4,11 @@ import { DefaultBlockRenderer } from '../render/render-types';
 import { DefaultTagRendererProps } from '../shared-types';
 import { TBlock } from '@native-html/transient-render-engine';
 import ULElement, { ULElementProps } from '../elements/ULElement';
-import { SupportedListStyleType } from '../elements/list-types';
+import { DefaultSupportedListStyleType } from '../elements/list-types';
 
 function getListStyleTypeFromNestLevel(
   nestLevel: number
-): SupportedListStyleType {
+): DefaultSupportedListStyleType {
   switch (nestLevel % 3) {
     case 0:
       return 'disc';