Update component, add unit test, and update documentation

Author: joaopalmeiro

src/lib/components/relive.svelte

@@ -1,22 +1,34 @@
 <script lang="ts">
   import GeneralObserver from './general-observer.svelte'
 
-  export let reliveId: string
+  export let reliveId: string = ''
   export let width: string = '100%'
+
+  const defaultMargin: number = 2
 </script>
 
 <GeneralObserver>
-  <iframe
-    title={`relive-${reliveId}`}
-    src={`https://www.relive.cc/view/${reliveId}/widget`}
-  />
+  <div
+    style={`
+      position: relative;
+      width: ${width};
+      aspect-ratio: 1 / 0.7825;
+      overflow: hidden;
+    `}
+  >
+    <iframe
+      title={`relive-${reliveId}`}
+      src={`https://www.relive.cc/view/${reliveId}/widget`}
+      scrolling="no"
+      frameborder="0"
+      allowfullscreen
+      style={`
+        position: absolute;
+        top: -${defaultMargin}px;
+        left: -${defaultMargin}px;
+        width: calc(100% + ${defaultMargin * 2}px);
+        height: calc(100% + ${defaultMargin * 2}px);
+      `}
+    />
+  </div>
 </GeneralObserver>
-
-<style>
-  iframe {
-    /* 2 from margin + 1 from box-shadow */
-    aspect-ratio: 1000 / calc(782.5 + 3);
-    overflow: clip;
-    width: 100%;
-  }
-</style>

src/lib/components/relive.test.ts

@@ -0,0 +1,18 @@
+import Relive from '$lib/components/relive.svelte'
+import { cleanup, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+globalThis.IntersectionObserver = vi.fn(() => ({
+  observe: () => null,
+  unobserve: () => null,
+  disconnect: () => null,
+})) as unknown as typeof globalThis.IntersectionObserver
+
+describe('Relive', () => {
+  afterEach(() => cleanup())
+
+  it('mounts', () => {
+    const { container } = render(Relive)
+    expect(container).toBeTruthy()
+  })
+})

src/routes/+page.md

@@ -256,6 +256,19 @@ Output:
 
 ## Relive
 
+Props:
+
+```ts
+reliveId: string = ''
+width: string = '100%'
+```
+
+Usage:
+
+```html
+<Relive reliveId="vAOZokmYVo6" />
+```
+
 Output:
 
 <Relive reliveId="vAOZokmYVo6" />