social components
inlay.at
atproto
components
sdui
change embed api to take type
+28
-25
+13
-18
app/embed/page.tsx
+13
-18
app/embed/page.tsx
···
1
1
import { createElement } from "react";
2
-
import { renderNode, createContext } from "@/app/sandbox/render/render";
3
-
import { $ } from "@inlay/core";
4
-
import { fetchComponentByUri } from "@/data/queries";
5
-
import { parseAtUri } from "@/data/uri";
2
+
import { renderNode, toHostContext } from "@/app/sandbox/render/render";
3
+
import { $, deserializeTree } from "@inlay/core";
6
4
import { EmbedResize } from "./resize";
7
5
import { BrowseProvider } from "@/app/sandbox/render/client";
6
+
import type { RenderContext } from "@inlay/render";
7
+
import type { DidString } from "@atproto/syntax";
8
8
9
9
export default async function EmbedPage({
10
10
searchParams,
···
12
12
searchParams: Promise<Record<string, string | undefined>>;
13
13
}) {
14
14
const sp = await searchParams;
15
-
const componentUri = sp.component;
15
+
const type = sp.type;
16
16
const propsParam = sp.props;
17
+
const importsParam = sp.imports;
17
18
18
-
if (!componentUri) {
19
-
return <div style={{ padding: 16, color: "#888" }}>Missing component</div>;
19
+
if (!type) {
20
+
return <div style={{ padding: 16, color: "#888" }}>Missing type</div>;
20
21
}
21
22
22
-
const component = await fetchComponentByUri(decodeURIComponent(componentUri));
23
-
if (!component) {
24
-
return (
25
-
<div style={{ padding: 16, color: "#888" }}>Component not found</div>
26
-
);
27
-
}
23
+
const imports = (importsParam ? importsParam.split(",") : []) as DidString[];
24
+
const props = propsParam ? deserializeTree(JSON.parse(atob(propsParam))) : {};
25
+
const element = $(type, props);
28
26
29
-
const props = propsParam ? JSON.parse(atob(propsParam)) : {};
30
-
const decodedUri = decodeURIComponent(componentUri);
31
-
const nsid = parseAtUri(decodedUri)!.rkey!;
32
-
const element = $(nsid, props);
33
-
const ctx = createContext(component, decodedUri);
27
+
const context: RenderContext = { imports };
28
+
const ctx = toHostContext(context);
34
29
const rendered = renderNode(element, ctx);
35
30
36
31
return (
+7
-5
public/inlay.js
+7
-5
public/inlay.js
···
1
1
// <inlay-at> web component
2
-
// Usage: <inlay-at component="at://..." props='{"uri":"at://..."}'>
2
+
// Usage: <inlay-at type="com.example.Post" imports='["did:..."]' props='{"uri":"at://..."}'>
3
3
(function () {
4
4
const EMBED_ORIGIN = (() => {
5
5
const script = document.currentScript;
···
11
11
})();
12
12
13
13
class InlayEmbed extends HTMLElement {
14
-
static observedAttributes = ["component", "props"];
14
+
static observedAttributes = ["type", "imports", "props"];
15
15
16
16
#iframe = null;
17
17
#props = null;
···
40
40
}
41
41
42
42
#update() {
43
-
const component = this.getAttribute("component");
44
-
if (!component) return;
43
+
const type = this.getAttribute("type");
44
+
if (!type) return;
45
45
46
+
const imports = JSON.parse(this.getAttribute("imports") || "[]");
46
47
const props =
47
48
this.#props ?? JSON.parse(this.getAttribute("props") || "{}");
48
49
const url = new URL("/embed", EMBED_ORIGIN);
49
-
url.searchParams.set("component", component);
50
+
url.searchParams.set("type", type);
51
+
url.searchParams.set("imports", imports.join(","));
50
52
url.searchParams.set("props", btoa(JSON.stringify(props)));
51
53
52
54
if (!this.#iframe) {