@absolutejs/absolute 0.19.0-beta.301 → 0.19.0-beta.302

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 (5) hide show
  1. package/dist/Island-c38gqq3d.svelte +71 -0
  2. package/dist/svelte/components/Island.svelte +41 -7
  3. package/dist/svelte/index.js +1 -1
  4. package/package.json +1 -1
  5. package/dist/Island-gx1kc3d5.svelte +0 -37
package/dist/Island-c38gqq3d.svelte ADDED
@@ -0,0 +1,71 @@
1
+ <script context="module" lang="ts">
2
+ let islandSlotIndex = 0;
3
+
4
+ const createSlotId = () => {
5
+ const current = islandSlotIndex;
6
+ islandSlotIndex += 1;
7
+
8
+ return `absolute-svelte-island-${current.toString(36)}`;
9
+ };
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import type { RuntimeIslandRenderProps } from '../../../types/island';
14
+
15
+ let {
16
+ component,
17
+ framework,
18
+ hydrate = 'load',
19
+ props
20
+ }: RuntimeIslandRenderProps = $props();
21
+
22
+ const slotId = createSlotId();
23
+
24
+ const escapeHtmlAttribute = (value: string) =>
25
+ value
26
+ .replaceAll('&', '&amp;')
27
+ .replaceAll('"', '&quot;')
28
+ .replaceAll('<', '&lt;')
29
+ .replaceAll('>', '&gt;');
30
+
31
+ const buildFallbackMarkup = (runtimeProps: RuntimeIslandRenderProps) => {
32
+ const attributes = [
33
+ ['data-component', runtimeProps.component],
34
+ ['data-framework', runtimeProps.framework],
35
+ ['data-hydrate', runtimeProps.hydrate ?? 'load'],
36
+ ['data-island', 'true'],
37
+ ['data-props', JSON.stringify(runtimeProps.props ?? {})]
38
+ ];
39
+
40
+ const serialized = attributes
41
+ .map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`)
42
+ .join(' ');
43
+
44
+ return `<div ${serialized}></div>`;
45
+ };
46
+
47
+ const html = $derived(
48
+ (() => {
49
+ const runtimeProps = {
50
+ component,
51
+ framework,
52
+ hydrate,
53
+ props
54
+ };
55
+
56
+ if (typeof document === 'undefined') {
57
+ return buildFallbackMarkup(runtimeProps);
58
+ }
59
+
60
+ const slot = document.querySelector<HTMLElement>(
61
+ `[data-absolute-island-slot="${slotId}"]`
62
+ );
63
+
64
+ return slot?.innerHTML ?? buildFallbackMarkup(runtimeProps);
65
+ })()
66
+ );
67
+ </script>
68
+
69
+ <div data-absolute-island-slot={slotId} style="display: contents">
70
+ {@html html}
71
+ </div>
package/dist/svelte/components/Island.svelte CHANGED
@@ -11,7 +11,6 @@
11
11
 
12
12
  <script lang="ts">
13
13
  import type { RuntimeIslandRenderProps } from '../../../types/island';
14
- import { resolveIslandHtml } from '../resolveIslandHtml.browser';
15
14
 
16
15
  let {
17
16
  component,
@@ -22,13 +21,48 @@
22
21
 
23
22
  const slotId = createSlotId();
24
23
 
24
+ const escapeHtmlAttribute = (value: string) =>
25
+ value
26
+ .replaceAll('&', '&amp;')
27
+ .replaceAll('"', '&quot;')
28
+ .replaceAll('<', '&lt;')
29
+ .replaceAll('>', '&gt;');
30
+
31
+ const buildFallbackMarkup = (runtimeProps: RuntimeIslandRenderProps) => {
32
+ const attributes = [
33
+ ['data-component', runtimeProps.component],
34
+ ['data-framework', runtimeProps.framework],
35
+ ['data-hydrate', runtimeProps.hydrate ?? 'load'],
36
+ ['data-island', 'true'],
37
+ ['data-props', JSON.stringify(runtimeProps.props ?? {})]
38
+ ];
39
+
40
+ const serialized = attributes
41
+ .map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`)
42
+ .join(' ');
43
+
44
+ return `<div ${serialized}></div>`;
45
+ };
46
+
25
47
  const html = $derived(
26
- resolveIslandHtml(slotId, {
27
- component,
28
- framework,
29
- hydrate,
30
- props
31
- })
48
+ (() => {
49
+ const runtimeProps = {
50
+ component,
51
+ framework,
52
+ hydrate,
53
+ props
54
+ };
55
+
56
+ if (typeof document === 'undefined') {
57
+ return buildFallbackMarkup(runtimeProps);
58
+ }
59
+
60
+ const slot = document.querySelector<HTMLElement>(
61
+ `[data-absolute-island-slot="${slotId}"]`
62
+ );
63
+
64
+ return slot?.innerHTML ?? buildFallbackMarkup(runtimeProps);
65
+ })()
32
66
  );
33
67
  </script>
34
68
 
package/dist/svelte/index.js CHANGED
@@ -30776,7 +30776,7 @@ var getIslandState = (key, fallback) => ({
30776
30776
  }
30777
30777
  });
30778
30778
  // src/svelte/components/Island.svelte
30779
- var Island_default = "../Island-gx1kc3d5.svelte";
30779
+ var Island_default = "../Island-c38gqq3d.svelte";
30780
30780
  // src/svelte/renderIsland.ts
30781
30781
  init_renderIslandMarkup();
30782
30782
  var renderIsland = (props) => renderIslandMarkup(requireCurrentIslandRegistry(), props);
package/package.json CHANGED
@@ -310,5 +310,5 @@
310
310
  "typecheck": "bun run src/cli/index.ts typecheck --config example/absolute.config.ts"
311
311
  },
312
312
  "types": "./dist/src/index.d.ts",
313
- "version": "0.19.0-beta.301"
313
+ "version": "0.19.0-beta.302"
314
314
  }
package/dist/Island-gx1kc3d5.svelte DELETED
@@ -1,37 +0,0 @@
1
- <script context="module" lang="ts">
2
- let islandSlotIndex = 0;
3
-
4
- const createSlotId = () => {
5
- const current = islandSlotIndex;
6
- islandSlotIndex += 1;
7
-
8
- return `absolute-svelte-island-${current.toString(36)}`;
9
- };
10
- </script>
11
-
12
- <script lang="ts">
13
- import type { RuntimeIslandRenderProps } from '../../../types/island';
14
- import { resolveIslandHtml } from '../resolveIslandHtml.browser';
15
-
16
- let {
17
- component,
18
- framework,
19
- hydrate = 'load',
20
- props
21
- }: RuntimeIslandRenderProps = $props();
22
-
23
- const slotId = createSlotId();
24
-
25
- const html = $derived(
26
- resolveIslandHtml(slotId, {
27
- component,
28
- framework,
29
- hydrate,
30
- props
31
- })
32
- );
33
- </script>
34
-
35
- <div data-absolute-island-slot={slotId} style="display: contents">
36
- {@html html}
37
- </div>