chore: use custom attribute instead of id

BearToCode · Feb 15, 2024 · ac68691 · ac68691
1 parent 61e323c
commit ac68691
Show file tree

Hide file tree

Showing 15 changed files with 26 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ Here is a basic explanation of how the the rendered html looks like:
 					<!-- Blocks wrapper -->
 					<div class="msm__wrapper">
 						<!-- Blocks -->
-						<div id="@abcdef" class="msm__block block-type">
+						<div data-component-id="abcdefgh" class="msm__block block-type">
 							<!-- Lines -->
 							<div class="msm__line">
 								<!-- ... -->

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -103,7 +103,7 @@ Here is a basic explanation of how the the rendered html looks like:
 					<!-- Blocks wrapper -->
 					<div class="msm__wrapper">
 						<!-- Blocks -->
-						<div id="@abcdef" class="msm__block block-type">
+						<div data-component-id="abcdefgh" class="msm__block block-type">
 							<!-- Lines -->
 							<div class="msm__line">
 								<!-- ... -->

diff --git a/packages/core/src/lib/components/blocks/AddedBlock.svelte b/packages/core/src/lib/components/blocks/AddedBlock.svelte
@@ -8,7 +8,7 @@
 	export let lines: Line[];
 </script>
 
-<div class="msm__block {block.type}" id={component.id}>
+<div class="msm__block {block.type}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/components/blocks/AddedBlockPlaceholder.svelte b/packages/core/src/lib/components/blocks/AddedBlockPlaceholder.svelte
@@ -6,4 +6,4 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.placeholderType}" id={component.id} />
+<div class="msm__block {block.placeholderType}" data-component-id={component.id} />
diff --git a/packages/core/src/lib/components/blocks/MergeConflictBlock.svelte b/packages/core/src/lib/components/blocks/MergeConflictBlock.svelte
@@ -8,7 +8,7 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.type}" id={component.id}>
+<div class="msm__block {block.type}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/components/blocks/MergeConflictPlaceholder.svelte b/packages/core/src/lib/components/blocks/MergeConflictPlaceholder.svelte
@@ -6,4 +6,4 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.placeholderType}" id={component.id} />
+<div class="msm__block {block.placeholderType}" data-component-id={component.id} />
diff --git a/packages/core/src/lib/components/blocks/ModifiedBlock.svelte b/packages/core/src/lib/components/blocks/ModifiedBlock.svelte
@@ -9,7 +9,7 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.type}" id={component.id}>
+<div class="msm__block {block.type}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/components/blocks/RemovedBlock.svelte b/packages/core/src/lib/components/blocks/RemovedBlock.svelte
@@ -8,7 +8,7 @@
 	export let lines: Line[];
 </script>
 
-<div class="msm__block {block.type}" id={component.id}>
+<div class="msm__block {block.type}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/components/blocks/RemovedBlockPlaceholder.svelte b/packages/core/src/lib/components/blocks/RemovedBlockPlaceholder.svelte
@@ -6,4 +6,4 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.placeholderType}" id={component.id} />
+<div class="msm__block {block.placeholderType}" data-component-id={component.id} />
diff --git a/packages/core/src/lib/components/blocks/ResolvedConflictBlock.svelte b/packages/core/src/lib/components/blocks/ResolvedConflictBlock.svelte
@@ -8,7 +8,7 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.resolvedType}" id={component.id}>
+<div class="msm__block {block.resolvedType}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/components/blocks/ResolvedConflictPlaceholder.svelte b/packages/core/src/lib/components/blocks/ResolvedConflictPlaceholder.svelte
@@ -6,4 +6,4 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {block.resolvedPlaceholderType}" id={component.id} />
+<div class="msm__block {block.resolvedPlaceholderType}" data-component-id={component.id} />
diff --git a/packages/core/src/lib/components/blocks/UnchangedBlock.svelte b/packages/core/src/lib/components/blocks/UnchangedBlock.svelte
@@ -6,7 +6,7 @@
 	export let component: BlockComponent;
 </script>
 
-<div class="msm__block {component.type}" id={component.id}>
+<div class="msm__block {component.type}" data-component-id={component.id}>
 	{#each lines as line}
 		<div class="msm__line">
 			<div class="msm__content">

diff --git a/packages/core/src/lib/internal/editor/component.ts b/packages/core/src/lib/internal/editor/component.ts
@@ -23,7 +23,7 @@ export class BlockComponent<
 	BlockProps extends Record<string, unknown> = Record<string, unknown>,
 	SideActionProps extends Record<string, unknown> = Record<string, unknown>
 > {
-	public readonly id = '@' + nanoid(6);
+	public readonly id = nanoid(8);
 	public readonly blockId: string;
 	public readonly component: typeof SvelteComponent<
 		{ component: BlockComponent<BlockProps> } & BlockProps

diff --git a/packages/core/src/lib/internal/editor/connection.ts b/packages/core/src/lib/internal/editor/connection.ts
@@ -57,12 +57,12 @@ export function drawConnections(
 
 	const width = canvas.width;
 
-	const blocks = Array.from(container.querySelectorAll('.msm__block'));
+	const blocks = Array.from(container.querySelectorAll('.msm__block')) as HTMLDivElement[];
 
 	ctx.reset();
 	for (const connection of connections) {
-		const fromElem = blocks.find((elem) => elem.id === connection.from.id);
-		const toElem = blocks.find((elem) => elem.id === connection.to.id);
+		const fromElem = blocks.find((elem) => elem.dataset.componentId === connection.from.id);
+		const toElem = blocks.find((elem) => elem.dataset.componentId === connection.to.id);
 		if (
 			!fromElem ||
 			!toElem ||

diff --git a/packages/core/src/lib/internal/editor/merging.ts b/packages/core/src/lib/internal/editor/merging.ts
@@ -17,7 +17,7 @@ export function mergeComponent(data: {
 	components: BlockComponent[];
 	container: HTMLElement;
 }) {
-	const sourceElem = data.container.querySelector(`[id="${data.source.id}"]`);
+	const sourceElem = data.container.querySelector(`[data-component-id="${data.source.id}"]`);
 
 	if (!sourceElem) {
 		if (dev) console.error('Failed to merge component: source element not found');
@@ -37,7 +37,9 @@ export function mergeComponent(data: {
 
 	if (!targetComponent) return;
 
-	const targetElem = data.container.querySelector(`[id="${targetComponent.id}"]`);
+	const targetElem = data.container.querySelector(
+		`[data-component-id="${targetComponent.id}"]`
+	) as HTMLDivElement | null;
 
 	if (!targetElem) {
 		if (dev) console.error('Failed to merge component: corresponding component element not found');
@@ -63,7 +65,12 @@ export function mergeComponent(data: {
 	let elemFound = false;
 
 	for (const child of parent.children) {
-		if (child.id === targetElem.id) {
+		if (!(child instanceof HTMLDivElement)) {
+			if (dev) console.error('Failed to merge component: child is not an HTMLDivElement');
+			continue;
+		}
+
+		if (child.dataset.componentId === targetElem.dataset.componentId) {
 			elemFound = true;
 			continue;
 		}