fix [react]: Recursion loop in Xray

packages/react/components/Pattern/index.mjs

@@ -1,7 +1,4 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
-// Components that can be swizzled
 import { Svg as DefaultSvg } from './svg.mjs'
 import { Defs as DefaultDefs } from './defs.mjs'
 import { Group as DefaultGroup } from './group.mjs'
@@ -13,11 +10,12 @@ import { Path as DefaultPath } from './path.mjs'
 import { Grid as DefaultGrid } from './grid.mjs'
 import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs'
 import { Circle as DefaultCircle } from './circle.mjs'
+import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs'
 
 /*
- * Allow people to swizzle these components
+ * Allow people to override these components
  */
-export const defaultPatternComponents = {
+const defaultComponents = {
   Svg: DefaultSvg,
   Defs: DefaultDefs,
   Group: DefaultGroup,
@@ -32,26 +30,29 @@ export const defaultPatternComponents = {
   Circle: DefaultCircle,
 }
 
-export const Pattern = forwardRef(
-  (
-    {
+/*
+ * The pattern component
+ * FIXME: document props
+ */
+const Pattern = forwardRef((props, ref) => {
+  if (!props.renderProps) return null
+
+  // Destructure props
+  const {
     renderProps = false,
     t = (string) => string,
-      components = {},
     children = false,
     className = 'freesewing pattern',
-    },
-    ref
-  ) => {
-    if (!renderProps) return null
+    components = {},
+  } = props
 
   // Merge default and swizzled components
-    components = {
-      ...defaultPatternComponents,
+  const mergedComponents = {
+    ...defaultComponents,
     ...components,
   }
 
-    const { Svg, Defs, Stack, Group } = components
+  const { Svg, Defs, Stack, Group } = mergedComponents
 
   const optionalProps = {}
   if (className) optionalProps.className = className
@@ -77,14 +78,23 @@ export const Pattern = forwardRef(
                 stackName={stackName}
                 stack={renderProps.stacks[stackName]}
                 settings={renderProps.settings}
-                  components={components}
+                components={mergedComponents}
                 t={t}
               />
             ))}
       </Group>
     </Svg>
   )
-  }
-)
+})
 
-Pattern.displayName = 'Pattern'
+export {
+  // utils
+  getId,
+  getProps,
+  withinPartBounds,
+  translateStrings,
+  // default components
+  defaultComponents,
+  // The Pattern component itself
+  Pattern,
+}

packages/react/components/Pattern/utils.mjs

@@ -1,5 +1,3 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 export const getProps = (obj) => {

packages/react/components/Xray/index.mjs

@@ -1,39 +1,36 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
-import { defaultPatternComponents } from '../pattern/index.mjs'
-// Components that can be swizzled
+import { defaultComponents as patternComponents } from '@freesewing/react/components/Pattern'
 import { PointXray } from './point.mjs'
 import { PathXray } from './path.mjs'
+
 /*
- * Allow people to swizzle these components
+ * Allow people to override these components
  */
-export const defaultPatternXrayComponents = {
-  ...defaultPatternComponents,
+const defaultComponents = {
   Point: PointXray,
   Path: PathXray,
 }
 
-export const PatternXray = forwardRef(
-  (
-    {
+export const Xray = forwardRef((props, ref) => {
+  if (!props.renderProps) return null
+
+  // desctructure props
+  const {
     renderProps = false,
     t = (string) => string,
-      components = {},
     children = false,
     className = 'freesewing pattern',
-    },
-    ref
-  ) => {
-    if (!renderProps) return null
+    components = {},
+  } = props
 
-    // Merge default and swizzled components
-    components = {
-      ...defaultPatternXrayComponents,
+  // Merge pattern, default, and custom components
+  const mergedComponents = {
+    ...patternComponents,
+    ...defaultComponents,
     ...components,
   }
 
-    const { Svg, Defs, Stack, Group } = components
+  const { Svg, Defs, Stack, Group } = mergedComponents
 
   const optionalProps = {}
   if (className) optionalProps.className = className
@@ -59,14 +56,11 @@ export const PatternXray = forwardRef(
                 stackName={stackName}
                 stack={renderProps.stacks[stackName]}
                 settings={renderProps.settings}
-                  components={components}
+                components={mergedComponents}
                 t={t}
               />
             ))}
       </Group>
     </Svg>
   )
-  }
-)
-
-PatternXray.displayName = 'PatternXray'
+})

packages/react/components/Xray/path.mjs

@@ -1,8 +1,8 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
 import React from 'react'
-// Components
-import { Path } from '../pattern/path.mjs'
-import { getProps } from '../pattern/utils.mjs'
+import {
+  getProps,
+  defaultComponents as patternComponents,
+} from '@freesewing/react/components/Pattern'
 
 const coords = (point) => `${point.x},${point.y}`
 
@@ -10,7 +10,7 @@ const Cp = ({ at }) => (
   <circle cx={at.x} cy={at.y} r={0.75} className="stroke-md opacity-50  text-warning" />
 )
 
-const Xray = ({ path }) => {
+export const Xray = ({ path, components }) => {
   const output = []
   let prev
   let i = 0
@@ -38,9 +38,18 @@ const Xray = ({ path }) => {
   return output
 }
 
-export const PathXray = ({ stackName, pathName, part, path, settings, components, t }) => (
-  <>
+export const PathXray = ({ stackName, pathName, part, path, settings, components, t }) => {
+  /*
+   * We use the Path component from Pattern here
+   * If we would extract Path from the components passed down,
+   * we'd create a recursion loop as the Path we call below
+   * would be this very PathXray component.
+   */
+  const { Path } = patternComponents
+  return (
+    <g>
       <Xray path={path} />
       <Path {...{ stackName, pathName, path, part, settings, components, t }} />
-  </>
-)
+    </g>
+  )
+}

packages/react/components/Xray/point.mjs

@@ -1,12 +1,20 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
 import React from 'react'
-// Components
-import { Point } from '../pattern/point.mjs'
-import { withinPartBounds } from '../pattern/utils.mjs'
+import {
+  withinPartBounds,
+  defaultComponents as patternComponents,
+} from '@freesewing/react/components/Pattern'
 
 export const PointXray = ({ stackName, pointName, part, point, settings, components, t }) => {
   // Don't include parts outside the part bounding box
   if (!withinPartBounds(point, part)) return null
+
+  /*
+   * We use the Point component from Pattern here
+   * If we would extract Point from the components passed down,
+   * we'd create a recursion loop as the Point we call below
+   * would be this very PointXray component.
+   */
+  const { Point } = patternComponents
   return (
     <>
       <Point {...{ stackName, pointName, part, point, settings, components, t }} />