From 056b64bda6416568a87878ab3f51b3c5ef7b441f Mon Sep 17 00:00:00 2001
From: domuk-k <dannyworks102@gmail.com>
Date: Wed, 25 Dec 2024 21:04:26 +0900
Subject: [PATCH 1/2] feat: svelte portal

---
 packages/svelte/src/lib/components/index.ts   |  1 +
 .../svelte/src/lib/components/portal/index.ts |  2 ++
 .../components/portal/portal-consumer.svelte  |  9 +++++++
 .../src/lib/components/portal/portal.svelte   | 25 +++++++++++++++++++
 4 files changed, 37 insertions(+)
 create mode 100644 packages/svelte/src/lib/components/portal/index.ts
 create mode 100644 packages/svelte/src/lib/components/portal/portal-consumer.svelte
 create mode 100644 packages/svelte/src/lib/components/portal/portal.svelte

diff --git a/packages/svelte/src/lib/components/index.ts b/packages/svelte/src/lib/components/index.ts
index 616a4140eb..d3276ccbc4 100644
--- a/packages/svelte/src/lib/components/index.ts
+++ b/packages/svelte/src/lib/components/index.ts
@@ -5,3 +5,4 @@ export * from './presence'
 export * from './qr-code'
 export * from './slider'
 export * from './timer'
+export * from './portal'
diff --git a/packages/svelte/src/lib/components/portal/index.ts b/packages/svelte/src/lib/components/portal/index.ts
new file mode 100644
index 0000000000..946627eaf8
--- /dev/null
+++ b/packages/svelte/src/lib/components/portal/index.ts
@@ -0,0 +1,2 @@
+export { default as Portal } from './portal.svelte'
+export type { PortalProps } from './portal.svelte'
diff --git a/packages/svelte/src/lib/components/portal/portal-consumer.svelte b/packages/svelte/src/lib/components/portal/portal-consumer.svelte
new file mode 100644
index 0000000000..d4068b5cd4
--- /dev/null
+++ b/packages/svelte/src/lib/components/portal/portal-consumer.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  const { children }: { children: Snippet } = $props()
+</script>
+
+{#if children}
+  {@render children()}
+{/if}
diff --git a/packages/svelte/src/lib/components/portal/portal.svelte b/packages/svelte/src/lib/components/portal/portal.svelte
new file mode 100644
index 0000000000..1b2eaec14d
--- /dev/null
+++ b/packages/svelte/src/lib/components/portal/portal.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  export interface PortalProps {
+    container?: HTMLElement
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * @see https://github.com/sveltejs/svelte/issues/7082
+   */
+  import { getAllContexts, mount, unmount } from 'svelte'
+  import PortalConsumer from './portal-consumer.svelte'
+
+  const { container = document.body, children }: PortalProps = $props()
+
+  const context = getAllContexts()
+
+  $effect(() => {
+    mount(PortalConsumer, { target: container, props: { children }, context })
+
+    return () => unmount(PortalConsumer)
+  })
+</script>

From 8046c42e83614071338b3016e1e90aa9838c8447 Mon Sep 17 00:00:00 2001
From: domuk-k <dannyworks102@gmail.com>
Date: Wed, 25 Dec 2024 21:06:10 +0900
Subject: [PATCH 2/2] feat: Frame for svelte

---
 .../components/frame/examples/basic.svelte    |  17 +++
 .../components/frame/examples/script.svelte   |  23 ++++
 .../components/frame/examples/src-doc.svelte  |  20 ++++
 .../lib/components/frame/frame-content.svelte |  19 ++++
 .../lib/components/frame/frame.stories.tsx    |  28 +++++
 .../src/lib/components/frame/frame.svelte     | 101 ++++++++++++++++++
 .../svelte/src/lib/components/frame/index.ts  |   2 +
 packages/svelte/src/lib/components/index.ts   |   3 +-
 8 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/src/lib/components/frame/examples/basic.svelte
 create mode 100644 packages/svelte/src/lib/components/frame/examples/script.svelte
 create mode 100644 packages/svelte/src/lib/components/frame/examples/src-doc.svelte
 create mode 100644 packages/svelte/src/lib/components/frame/frame-content.svelte
 create mode 100644 packages/svelte/src/lib/components/frame/frame.stories.tsx
 create mode 100644 packages/svelte/src/lib/components/frame/frame.svelte
 create mode 100644 packages/svelte/src/lib/components/frame/index.ts

diff --git a/packages/svelte/src/lib/components/frame/examples/basic.svelte b/packages/svelte/src/lib/components/frame/examples/basic.svelte
new file mode 100644
index 0000000000..914229c1bc
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/examples/basic.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Frame } from '@ark-ui/svelte/frame'
+</script>
+
+<Frame title="Custom Frame" style="border: 1px solid #ccc; width: 100%; height: var(--height)">
+  {#snippet head()}
+    <style>
+      body {
+        color: #f96743;
+      }
+    </style>
+  {/snippet}
+  <div style="padding: 40px">
+    <h1>Hello from inside the frame!</h1>
+    <p>This content is rendered within our custom frame component using a Portal.</p>
+  </div>
+</Frame>
diff --git a/packages/svelte/src/lib/components/frame/examples/script.svelte b/packages/svelte/src/lib/components/frame/examples/script.svelte
new file mode 100644
index 0000000000..3855af2911
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/examples/script.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Frame } from '@ark-ui/svelte/frame'
+
+  let frameRef: HTMLIFrameElement | undefined
+</script>
+
+<Frame
+  title="Custom Frame"
+  bind:ref={frameRef}
+  onMount={() => {
+    const doc = frameRef?.contentDocument
+    if (!doc) return
+    const script = doc.createElement('script')
+    script.innerHTML = 'console.log("Hello from inside the frame!")'
+    doc.body.appendChild(script)
+  }}
+  style="border: 1px solid #ccc; width: 100%; height: var(--height)"
+>
+  <div style="padding: 40px">
+    <h1>Hello from inside the frame!</h1>
+    <p>This content is rendered within our custom frame component using a Portal.</p>
+  </div>
+</Frame>
diff --git a/packages/svelte/src/lib/components/frame/examples/src-doc.svelte b/packages/svelte/src/lib/components/frame/examples/src-doc.svelte
new file mode 100644
index 0000000000..fe3847216e
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/examples/src-doc.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Frame } from '@ark-ui/svelte/frame'
+
+  const srcDoc = `<html>
+        <head>
+          <link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+          <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+          <base target=_blank>
+        </head>
+        <body style='overflow: hidden'>
+          <div></div>
+        </body>
+    </html>`
+</script>
+
+<Frame title="Custom Frame" style="border: 1px solid #ccc; width: 100%;" srcdoc={srcDoc}>
+  <h1 style="font-family: Open Sans, sans-serif;">Hello from inside the frame!</h1>
+  <p>This content is rendered within our custom frame component using a Portal.</p>
+  <p>The frame has custom initial content, including Font Awesome and Open Sans font.</p>
+</Frame>
diff --git a/packages/svelte/src/lib/components/frame/frame-content.svelte b/packages/svelte/src/lib/components/frame/frame-content.svelte
new file mode 100644
index 0000000000..b42e236a81
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/frame-content.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface FrameContentProps {
+    onMount?(): void
+    onUnmount?(): void
+    children: Snippet
+  }
+
+  const { onMount, onUnmount, children }: FrameContentProps = $props()
+
+  $effect(() => {
+    onMount?.()
+
+    return onUnmount
+  })
+</script>
+
+{@render children()}
diff --git a/packages/svelte/src/lib/components/frame/frame.stories.tsx b/packages/svelte/src/lib/components/frame/frame.stories.tsx
new file mode 100644
index 0000000000..9ea142d5af
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/frame.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import ScriptExample from './examples/script.svelte'
+import SrcDocExample from './examples/src-doc.svelte'
+
+const meta = {
+  title: 'Components / Frame',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    Component: BasicExample,
+  }),
+}
+
+export const Script = {
+  render: () => ({
+    Component: ScriptExample,
+  }),
+}
+
+export const SrcDoc = {
+  render: () => ({
+    Component: SrcDocExample,
+  }),
+}
diff --git a/packages/svelte/src/lib/components/frame/frame.svelte b/packages/svelte/src/lib/components/frame/frame.svelte
new file mode 100644
index 0000000000..f3b225854b
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/frame.svelte
@@ -0,0 +1,101 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLIframeAttributes } from 'svelte/elements'
+
+  import type { Assign } from '../../types'
+
+  export interface FrameBaseProps {
+    /** Additional content to be inserted into the frame's <head> */
+    head?: Snippet
+    /** Callback function to be executed when the frame is mounted */
+    onMount?: () => void
+    /** Callback function to be executed when the frame is unmounted */
+    onUnmount?: () => void
+    srcdoc?: string
+    ref?: HTMLIFrameElement
+  }
+  export interface FrameProps extends Assign<HTMLIframeAttributes, FrameBaseProps> {}
+
+  const CUSTOM_ROOT_CLASS = 'frame-root'
+  const resetStyle =
+    '<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>'
+  const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="${CUSTOM_ROOT_CLASS}"></div></body></html>`
+
+  function getMountNode(frame: HTMLIFrameElement) {
+    const doc = frame.contentWindow?.document
+    if (!doc) return null
+    return doc.body.querySelector<HTMLElement>(`.${CUSTOM_ROOT_CLASS}`) || doc.body
+  }
+</script>
+
+<script lang="ts">
+  import { EnvironmentProvider } from '@ark-ui/svelte/environment'
+
+  import Portal from '$lib/components/portal/portal.svelte'
+
+  import FrameContent from './frame-content.svelte'
+
+  let { head, onMount, onUnmount, srcdoc, ref = $bindable(), ...localProps }: FrameProps = $props()
+
+  let frameRef: HTMLIFrameElement | undefined = $state()
+  let mountNode: HTMLElement | null = $derived(frameRef ? getMountNode(frameRef) : null)
+
+  $effect(() => {
+    if (!frameRef) return
+
+    const doc = frameRef.contentWindow?.document
+    if (!doc) return
+
+    doc.open()
+    doc.write(srcdoc ?? initialSrcDoc)
+    doc.close()
+  })
+
+  $effect(() => {
+    if (!frameRef || !frameRef.contentDocument) return
+
+    const win = frameRef.contentWindow as Window & typeof globalThis
+
+    if (!win || !mountNode) return
+
+    const exec = () => {
+      if (!(mountNode && frameRef && frameRef.contentDocument)) return
+
+      const rootEl = frameRef.contentDocument?.documentElement
+      if (!rootEl) return
+      frameRef.style.setProperty('--width', `${mountNode.scrollWidth}px`)
+      frameRef.style.setProperty('--height', `${mountNode.scrollHeight}px`)
+    }
+
+    const resizeObserver = new win.ResizeObserver(exec)
+
+    exec()
+
+    if (frameRef.contentDocument) {
+      resizeObserver.observe(mountNode)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  })
+</script>
+
+<iframe bind:this={frameRef} bind:this={ref} {...localProps}>
+  <EnvironmentProvider value={() => frameRef?.contentDocument ?? document}>
+    {#if mountNode}
+      <Portal container={mountNode}>
+        <FrameContent {onMount} {onUnmount}>
+          {#if localProps?.children}
+            {@render localProps.children()}
+          {/if}
+        </FrameContent>
+      </Portal>
+    {/if}
+    {#if mountNode && head && frameRef?.contentDocument?.head}
+      <Portal container={frameRef.contentDocument.head}>
+        {@render head()}
+      </Portal>
+    {/if}
+  </EnvironmentProvider>
+</iframe>
diff --git a/packages/svelte/src/lib/components/frame/index.ts b/packages/svelte/src/lib/components/frame/index.ts
new file mode 100644
index 0000000000..1ba2d1e8f5
--- /dev/null
+++ b/packages/svelte/src/lib/components/frame/index.ts
@@ -0,0 +1,2 @@
+export { default as Frame } from './frame.svelte'
+export type { FrameBaseProps, FrameProps } from './frame.svelte'
diff --git a/packages/svelte/src/lib/components/index.ts b/packages/svelte/src/lib/components/index.ts
index d3276ccbc4..c895ee6aa4 100644
--- a/packages/svelte/src/lib/components/index.ts
+++ b/packages/svelte/src/lib/components/index.ts
@@ -1,8 +1,9 @@
 export * from './avatar'
 export * from './factory'
+export * from './frame'
 export * from './highlight'
+export * from './portal'
 export * from './presence'
 export * from './qr-code'
 export * from './slider'
 export * from './timer'
-export * from './portal'