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,59 +30,71 @@ export const defaultPatternComponents = {
   Circle: DefaultCircle,
 }
 
-export const Pattern = forwardRef(
-  (
-    {
-      renderProps = false,
-      t = (string) => string,
-      components = {},
-      children = false,
-      className = 'freesewing pattern',
-    },
-    ref
-  ) => {
-    if (!renderProps) return null
+/*
+ * The pattern component
+ * FIXME: document props
+ */
+const Pattern = forwardRef((props, ref) => {
+  if (!props.renderProps) return null
 
-    // Merge default and swizzled components
-    components = {
-      ...defaultPatternComponents,
-      ...components,
-    }
+  // Destructure props
+  const {
+    renderProps = false,
+    t = (string) => string,
+    children = false,
+    className = 'freesewing pattern',
+    components = {},
+  } = props
 
-    const { Svg, Defs, Stack, Group } = components
-
-    const optionalProps = {}
-    if (className) optionalProps.className = className
-
-    return (
-      <Svg
-        viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
-        embed={renderProps.settings.embed}
-        {...renderProps}
-        {...optionalProps}
-        ref={ref}
-      >
-        <Defs {...renderProps} />
-        <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
-          renderProps.svg.style
-        }`}</style>
-        <Group>
-          {children
-            ? children
-            : Object.keys(renderProps.stacks).map((stackName) => (
-                <Stack
-                  key={stackName}
-                  stackName={stackName}
-                  stack={renderProps.stacks[stackName]}
-                  settings={renderProps.settings}
-                  components={components}
-                  t={t}
-                />
-              ))}
-        </Group>
-      </Svg>
-    )
+  // Merge default and swizzled components
+  const mergedComponents = {
+    ...defaultComponents,
+    ...components,
   }
-)
 
-Pattern.displayName = 'Pattern'
+  const { Svg, Defs, Stack, Group } = mergedComponents
+
+  const optionalProps = {}
+  if (className) optionalProps.className = className
+
+  return (
+    <Svg
+      viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
+      embed={renderProps.settings.embed}
+      {...renderProps}
+      {...optionalProps}
+      ref={ref}
+    >
+      <Defs {...renderProps} />
+      <style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
+        renderProps.svg.style
+      }`}</style>
+      <Group>
+        {children
+          ? children
+          : Object.keys(renderProps.stacks).map((stackName) => (
+              <Stack
+                key={stackName}
+                stackName={stackName}
+                stack={renderProps.stacks[stackName]}
+                settings={renderProps.settings}
+                components={mergedComponents}
+                t={t}
+              />
+            ))}
+      </Group>
+    </Svg>
+  )
+})
+
+export {
+  // utils
+  getId,
+  getProps,
+  withinPartBounds,
+  translateStrings,
+  // default components
+  defaultComponents,
+  // The Pattern component itself
+  Pattern,
+}