npm - @sprawlify/svelte - Versions diffs - 0.0.45 → 0.0.46 - Mend

@sprawlify/svelte 0.0.45 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/dist/components/frame/frame.svelte ADDED Viewed

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLIframeAttributes } from 'svelte/elements'
+  import type { Assign } from '../../types'
+  export interface FrameBaseProps {
+    head?: Snippet
+    onMount?: () => void
+    onUnmount?: () => void
+    srcdoc?: string
+    ref?: HTMLIFrameElement | null
+  }
+  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 '../../providers/environment'
+  import Portal from '../portal/portal.svelte'
+  import FrameContent from './frame-content.svelte'
+  let { head, onMount, onUnmount, srcdoc, ref = $bindable(null), ...localProps }: FrameProps = $props()
+  let frameRef: HTMLIFrameElement | null = $state(null)
+  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 = () => {
+      win.requestAnimationFrame(() => {
+        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()
+    }
+  })
+  function setFrameNode(node: HTMLIFrameElement | null) {
+    frameRef = node
+  }
+</script>
+<iframe bind:this={ref} {@attach setFrameNode} {...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>

package/dist/components/frame/frame.svelte.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLIframeAttributes } from 'svelte/elements';
+import type { Assign } from '../../types';
+export interface FrameBaseProps {
+    head?: Snippet;
+    onMount?: () => void;
+    onUnmount?: () => void;
+    srcdoc?: string;
+    ref?: HTMLIFrameElement | null;
+}
+export interface FrameProps extends Assign<HTMLIframeAttributes, FrameBaseProps> {
+}
+declare const Frame: import("svelte").Component<FrameProps, {}, "ref">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/frame/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Frame } from './frame.svelte';
2	+ export type { FrameBaseProps, FrameProps } from './frame.svelte';

package/dist/components/frame/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as Frame } from './frame.svelte';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/svelte",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "description": "Svelte wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -107,6 +107,31 @@
       "svelte": "./dist/components/fieldset/index.js",
       "default": "./dist/components/fieldset/index.js"
     },
+    "./file-upload": {
+      "types": "./dist/components/file-upload/index.d.ts",
+      "svelte": "./dist/components/file-upload/index.js",
+      "default": "./dist/components/file-upload/index.js"
+    },
+    "./floating-panel": {
+      "types": "./dist/components/floating-panel/index.d.ts",
+      "svelte": "./dist/components/floating-panel/index.js",
+      "default": "./dist/components/floating-panel/index.js"
+    },
+    "./focus-trap": {
+      "types": "./dist/components/focus-trap/index.d.ts",
+      "svelte": "./dist/components/focus-trap/index.js",
+      "default": "./dist/components/focus-trap/index.js"
+    },
+    "./format": {
+      "types": "./dist/components/format/index.d.ts",
+      "svelte": "./dist/components/format/index.js",
+      "default": "./dist/components/format/index.js"
+    },
+    "./frame": {
+      "types": "./dist/components/frame/index.d.ts",
+      "svelte": "./dist/components/frame/index.js",
+      "default": "./dist/components/frame/index.js"
+    },
     "./highlight": {
       "types": "./dist/components/highlight/index.d.ts",
       "svelte": "./dist/components/highlight/index.js",
@@ -135,7 +160,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.45"
+    "@sprawlify/primitives": "0.0.46"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"