fix: issue with generating uuid for every fragment (#2351)

db-ui · Mar 19, 2024 · a7cec19 · a7cec19
1 parent e53621e
commit a7cec19
Show file tree

Hide file tree

Showing 38 changed files with 114 additions and 484 deletions.
diff --git a/packages/components/_templates/mitosis/new/component/tsx.ejs.t b/packages/components/_templates/mitosis/new/component/tsx.ejs.t
@@ -1,10 +1,9 @@
 ---
 to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
-import { onMount, Show, useMetadata, useStore } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
-import { cls, uuid } from "../../utils";
-import {DEFAULT_ID} from "../../shared/constants";
+import { cls } from "../../utils";
 <% if(formValue!=="no"){   -%>
 import {ChangeEvent, InteractionEvent} from "../../shared/model";
 <% } -%>
@@ -18,7 +17,6 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
   const ref = useRef<HTMLDivElement>(null);
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
-		_id: DEFAULT_ID,
       <% if(formValue!=="no"){   -%>
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
@@ -58,29 +56,19 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 		}
       <% } -%>
   });
-
-  onMount(() => {
-  	state._id = props.id || '<%= name %>-' + uuid();
-    if (props.stylePath) {
-      state.stylePath = props.stylePath;
-    }
-  });
   // jscpd:ignore-end
 
   return (
     <div
     	ref={ref}
-    	id={state._id}
+    	id={props.id}
     	class={cls('db-<%= name %>', props.className)}
 <% if(formValue!=="no"){   -%>
 		onChange={(event: ChangeEvent<HTMLInputElement>) => state.handleChange(event)}
 		onBlur={(event: InteractionEvent<HTMLInputElement>) => state.handleBlur(event)}
 		onFocus={(event: InteractionEvent<HTMLInputElement>) => state.handleFocus(event)}
 <% } -%>
     	>
-      <Show when={state.stylePath}>
-        <link rel="stylesheet" href={state.stylePath} />
-      </Show>
       {props.children}
     </div>
   );

diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
@@ -19,6 +19,7 @@
  * 		},
  *     react?: {
  * 			propsPassingFilter?: string[];
+ * 			containsFragmentMap?: boolean;
  * 		}
  * }
  * }]}
@@ -131,6 +132,9 @@ const getComponents = () => [
 			},
 			angular: {
 				controlValueAccessor: 'value'
+			},
+			react: {
+				containsFragmentMap: true
 			}
 		}
 	},

diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
@@ -75,10 +75,6 @@ module.exports = (tmp) => {
 					from: '={true}',
 					to: ''
 				},
-				{
-					from: '{ cls }',
-					to: '{ cls, uuid }'
-				},
 				{
 					from: '} from "../../utils"',
 					to: ', filterPassingProps } from "../../utils"'
@@ -90,22 +86,33 @@ module.exports = (tmp) => {
 						`{...filterPassingProps(props,${JSON.stringify(
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
-				},
-				/**
-				 * Mitosis generates Fragments for each mapping function.
-				 * The following overwrites will prevent react from throwing duplicate key warnings.
-				 * uuid() should be part of every component
-				 */
-				{
-					from: /<>/g,
-					to: '<React.Fragment key={uuid()}>'
-				},
-				{
-					from: /<\/>/g,
-					to: '</React.Fragment>'
 				}
 			];
 
+			/**
+			 * Mitosis generates Fragments for each mapping function.
+			 * The following overwrites will prevent react from throwing duplicate key warnings.
+			 */
+			if (component.config?.react?.containsFragmentMap) {
+				if (!tsxFileContent.includes('uuid')) {
+					replacements.push({
+						from: '{ cls',
+						to: '{ cls, uuid'
+					});
+				}
+
+				replacements.push(
+					{
+						from: /<>/g,
+						to: '<React.Fragment key={uuid()}>'
+					},
+					{
+						from: /<\/>/g,
+						to: '</React.Fragment>'
+					}
+				);
+			}
+
 			runReplacements(replacements, component, 'react', tsxFile);
 		}
 	} catch (error) {

diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -7,7 +7,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBAccordionItemProps, DBAccordionItemState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -23,7 +23,6 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	const ref = useRef<HTMLDetailsElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
-		_id: 'accordion-item-' + uuid(),
 		_open: false,
 		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
@@ -37,12 +36,6 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	});
 
 	onMount(() => {
-		if (props.id) {
-			state._id = props.id;
-		}
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}
@@ -52,14 +45,11 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	return (
 		<details
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-accordion-item', props.className)}
 			aria-disabled={props.disabled}
 			open={state._open}
 			name={props.name}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<summary onClick={(event) => state.toggle(event)}>
 				<Show when={props.title}>{props.title}</Show>
 				<Show when={!props.title}>

diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -8,13 +8,12 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import {
-	DBAccordionState,
+	DBAccordionItemInterface,
 	DBAccordionProps,
-	DBAccordionItemInterface
+	DBAccordionState
 } from './model';
-import { cls, uuid } from '../../utils';
+import { cls } from '../../utils';
 import { DBAccordionItem } from '../accordion-item';
-import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -29,7 +28,6 @@ export default function DBAccordion(props: DBAccordionProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionState>({
-		_id: DEFAULT_ID,
 		openItems: [],
 		clickedId: '',
 		initialized: false,
@@ -68,11 +66,6 @@ export default function DBAccordion(props: DBAccordionProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'accordion-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
 		state.initialized = true;
 	});
 	// jscpd:ignore-end
@@ -132,11 +125,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-accordion', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			<Show when={!props.items}>{props.children}</Show>
 			<Show when={props.items}>
 				<For each={state.convertItems(props.items)}>

diff --git a/packages/components/src/components/alert/alert.lite.tsx b/packages/components/src/components/alert/alert.lite.tsx
@@ -1,15 +1,9 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBAlertProps, DBAlertState } from './model';
 import { DBButton } from '../button';
 import { DBLink } from '../link';
-import { DEFAULT_CLOSE_BUTTON, DEFAULT_ID } from '../../shared/constants';
-import { cls, uuid } from '../../utils';
+import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
+import { cls } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -20,36 +14,24 @@ export default function DBAlert(props: DBAlertProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAlertState>({
-		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
 			}
 		}
 	});
-
-	onMount(() => {
-		state._id = props.id || 'alert-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
 		<div
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
 			data-variant={props.variant}
 			data-type={props.type}
 			data-icon={props.icon}
 			data-elevation={props.elevation}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
 			<Show when={props.headline}>
 				<strong class="db-alert-headline">{props.headline}</strong>
 			</Show>

diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,45 +1,24 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DBBadgeState, DBBadgeProps } from './model';
-import { cls, uuid } from '../../utils';
-import { DEFAULT_ID } from '../../shared/constants';
+import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBBadgeProps, DBBadgeState } from './model';
+import { cls } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
 });
 
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBBadgeState>({
-		_id: DEFAULT_ID
-	});
-
-	onMount(() => {
-		state._id = props.id || 'badge-' + uuid();
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
-	// jscpd:ignore-end
+	const state = useStore<DBBadgeState>({});
 
 	return (
 		<span
 			ref={ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
 			data-size={props.size}
 			data-emphasis={props.emphasis}
 			data-placement={props.placement}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
 			{props.children}
 		</span>
 	);

diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,13 +1,6 @@
-import {
-	onMount,
-	Show,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { cls, uuid } from '../../utils';
-import { DBBrandState, DBBrandProps } from './model';
-import { DEFAULT_ID } from '../../shared/constants';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { cls } from '../../utils';
+import { DBBrandProps, DBBrandState } from './model';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,30 +10,17 @@ export default function DBBrand(props: DBBrandProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
-		_id: DEFAULT_ID,
 		defaultValues: {
 			anchorRef: '/',
 			src: './assets/images/db_logo.svg',
 			width: '34',
 			height: '24'
 		}
 	});
-
-	onMount(() => {
-		state._id = props.id || 'brand-' + uuid();
-
-		if (props.stylePath) {
-			state.stylePath = props.stylePath;
-		}
-	});
 	// jscpd:ignore-end
 
 	return (
-		<div ref={ref} id={state._id} class={cls('db-brand', props.className)}>
-			<Show when={state.stylePath}>
-				<link rel="stylesheet" href={state.stylePath} />
-			</Show>
-
+		<div ref={ref} id={props.id} class={cls('db-brand', props.className)}>
 			<a
 				href={props.anchorRef ?? state.defaultValues.anchorRef}
 				title={props.anchorTitle}