refactor(client): refactor and performance improve of MkSpacer

packages/frontend/src/components/global/MkSpacer.vue

@@ -1,6 +1,6 @@
 <template>
-<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
-	<div ref="content" :class="$style.content">
+<div :class="[$style.root, { [$style.rootMin]: forceSpacerMin }]">
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </div>
@@ -14,84 +14,13 @@ const props = withDefaults(defineProps<{
 	contentMax?: number | null;
 	marginMin?: number;
 	marginMax?: number;
-
-	// MkFolderとかで開閉アニメーションの際にheightを正しく伝えるため
-	container?: HTMLElement,
 }>(), {
 	contentMax: null,
 	marginMin: 12,
 	marginMax: 24,
 });
 
-let ro: ResizeObserver;
-let root = $shallowRef<HTMLElement>();
-let content = $shallowRef<HTMLElement>();
-let margin = $ref(props.marginMin);
-const widthHistory = [null, null] as [number | null, number | null];
-const heightHistory = [null, null] as [number | null, number | null];
-const shouldSpacerMin = inject('shouldSpacerMin', false);
-
-const adjust = (rect: { width: number; height: number; }) => {
-	if (shouldSpacerMin || deviceKind === 'smartphone') {
-		margin = props.marginMin;
-		return;
-	}
-
-	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
-		margin = props.marginMax;
-	} else {
-		margin = props.marginMin;
-	}
-};
-
-if (props.container) {
-	const width = props.container.offsetWidth;
-	const height = props.container.offsetHeight;
-	adjust({
-		width,
-		height,
-	});
-}
-
-onMounted(() => {
-	ro = new ResizeObserver((entries) => {
-		/* iOSが対応していない
-		adjust({
-			width: entries[0].borderBoxSize[0].inlineSize,
-			height: entries[0].borderBoxSize[0].blockSize,
-		});
-		*/
-
-		const width = props.container ? props.container.offsetWidth : root!.offsetWidth;
-		const height = props.container ? props.container.offsetHeight : root!.offsetHeight;
-
-		//#region Prevent infinite resizing
-		// https://github.com/misskey-dev/misskey/issues/9076
-		const pastWidth = widthHistory.pop();
-		widthHistory.unshift(width);
-		const pastHeight = heightHistory.pop();
-		heightHistory.unshift(height);
-
-		if (pastWidth === width && pastHeight === height) {
-			return;
-		}
-		//#endregion
-
-		adjust({
-			width,
-			height,
-		});
-	});
-	ro.observe(root!);
-
-	if (props.contentMax) {
-		content!.style.maxWidth = `${props.contentMax}px`;
-	}
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
+const forceSpacerMin = inject('forceSpacerMin', false) || deviceKind === 'smartphone';
 </script>
 
 <style lang="scss" module>
@@ -99,9 +28,25 @@ onUnmounted(() => {
 	box-sizing: border-box;
 	width: 100%;
 }
+.rootMin {
+	padding: v-bind('props.marginMin + "px"') !important;
+}
 
 .content {
 	margin: 0 auto;
+	max-width: v-bind('props.contentMax + "px"');
 	container-type: inline-size;
 }
+
+@container (max-width: 360px) {
+	.root {
+		padding: v-bind('props.marginMin + "px"');
+	}
+}
+
+@container (min-width: 361px) {
+	.root {
+		padding: v-bind('props.marginMax + "px"');
+	}
+}
 </style>