@devvit/ui-renderer 0.8.7 → 0.8.8

package/client/devvit-animation-player.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { AnimationFormat } from '@devvit/protos';
+import '@lottiefiles/lottie-player';
+/**
+ * @description a simple wrapper for lottie-player
+ */
+export declare class DevvitAnimationPlayer extends LitElement {
+    src: string;
+    format?: AnimationFormat;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=devvit-animation-player.d.ts.map

package/client/devvit-animation-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-animation-player.d.ts","sourceRoot":"","sources":["../../src/client/devvit-animation-player.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,4BAA4B,CAAC;AAEpC;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACvB,GAAG,EAAE,MAAM,CAAM;IACjB,MAAM,CAAC,EAAE,eAAe,CAA0B;IAErE,MAAM;CAQhB"}

package/client/devvit-animation-player.js

@@ -0,0 +1,34 @@
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AnimationFormat } from '@devvit/protos';
+import '@lottiefiles/lottie-player';
+/**
+ * @description a simple wrapper for lottie-player
+ */
+let DevvitAnimationPlayer = class DevvitAnimationPlayer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = '';
+        this.format = AnimationFormat.LOTTIE;
+    }
+    render() {
+        if (this.format === AnimationFormat.LOTTIE) {
+            return html `<lottie-player autoplay loop mode="normal" src="${this.src}"></lottie-player>`;
+        }
+        // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+        return html `<div>Unsupported animation format</div>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DevvitAnimationPlayer.prototype, "src", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], DevvitAnimationPlayer.prototype, "format", void 0);
+DevvitAnimationPlayer = __decorate([
+    customElement('devvit-animation-player')
+], DevvitAnimationPlayer);
+export { DevvitAnimationPlayer };

package/client/devvit-ui-interactive.d.ts

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /**
  * Component that renders wraps a rendering of devvit ui and makes it interactive.
  *
@@ -6,21 +5,29 @@
  * 1 - not getting slotted content and IT triggers the first render
  * 2 - getting slotted content from SSR and then replacing it when interactivity happens
  */
-import { LitElement } from 'lit';
-import { RenderResponse } from '@devvit/protos';
-import type { CustomPost, Metadata } from '@devvit/protos';
-import type { CommonRuntimeLike } from '@devvit/runtimes/common/runtime/CommonRuntime.js';
-type RenderStateChange = (state: RenderResponse) => void;
+/// <reference lib="dom" />
+import { LitElement, PropertyValues } from 'lit';
+import type { Metadata, Realtime } from '@devvit/protos';
+import { RenderPostResponse } from '@devvit/protos';
+import type { ActorRef } from '@devvit/runtimes/common/runtime/ActorRef.js';
+import './devvit-animation-player.js';
+type RenderStateChange = (state: RenderPostResponse) => void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'devvit-ui-interactive': DevvitInteractiveUI;
+    }
+}
 export declare class DevvitInteractiveUI extends LitElement {
     #private;
-    actor?: CustomPost;
+    actorRef?: ActorRef;
+    realtime?: Realtime;
     metadata?: Metadata;
     onRender?: RenderStateChange;
-    runtime?: CommonRuntimeLike;
-    renderResponse?: RenderResponse;
+    renderResponse?: RenderPostResponse;
     static get styles(): import("lit").CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/client/devvit-ui-interactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-ui-interactive.d.ts","sourceRoot":"","sources":["../../src/client/devvit-ui-interactive.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAA4F,cAAc,EAAc,MAAM,gBAAgB,CAAC;AACtJ,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAS1F,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAKzD,qBACa,mBAAoB,SAAQ,UAAU;;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAI5D,cAAc,CAAC,EAAE,cAAc,CAAC;IAMhC,WAAoB,MAAM,8BAMzB;IAIQ,iBAAiB;IAQjB,oBAAoB;IAkIpB,MAAM;CAiBhB"}
+{"version":3,"file":"devvit-ui-interactive.d.ts","sourceRoot":"","sources":["../../src/client/devvit-ui-interactive.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAGH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,KAAK,EAGV,QAAQ,EACR,QAAQ,EAMT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAKL,kBAAkB,EAGnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAO5E,OAAO,8BAA8B,CAAC;AAItC,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAK7D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF;AAED,qBACa,mBAAoB,SAAQ,UAAU;;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAG7D,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAQpC,WAAoB,MAAM,8BAMzB;IAEQ,iBAAiB;IAOjB,oBAAoB;cAOV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAwKtD,MAAM;CAiBhB"}

package/client/devvit-ui-interactive.js

@@ -1,5 +1,3 @@
-var _DevvitInteractiveUI_instances, _DevvitInteractiveUI_context, _DevvitInteractiveUI_realtime, _DevvitInteractiveUI_realtimeHandle, _DevvitInteractiveUI_rerenderHandle, _DevvitInteractiveUI_onMessage, _DevvitInteractiveUI_triggerFirstRender, _DevvitInteractiveUI_requestRender, _DevvitInteractiveUI_updateSubscriptions, _DevvitInteractiveUI_handleRenderAgainFromResponse, _DevvitInteractiveUI_onClick;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
 /**
  * Component that renders wraps a rendering of devvit ui and makes it interactive.
  *
@@ -8,30 +6,48 @@ import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata
  * 2 - getting slotted content from SSR and then replacing it when interactivity happens
  */
 /// <reference lib="dom" />
-import { html, css, LitElement } from 'lit';
+var _DevvitInteractiveUI_instances, _DevvitInteractiveUI_customPost, _DevvitInteractiveUI_uiEventHandler, _DevvitInteractiveUI_context, _DevvitInteractiveUI_rerenderTimeout, _DevvitInteractiveUI_realtimeSubscription, _DevvitInteractiveUI_onMessage, _DevvitInteractiveUI_triggerFirstRender, _DevvitInteractiveUI_requestRender, _DevvitInteractiveUI_onClick, _DevvitInteractiveUI_handleEffects, _DevvitInteractiveUI_handleEvents, _DevvitInteractiveUI_rerenderEffect, _DevvitInteractiveUI_realtimeSubscriptionsEffect, _DevvitInteractiveUI_showToastEffect;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { BlocksEvent, BlocksEventType, RealtimeDefinition, RenderResponse } from '@devvit/protos';
-import { renderRoot } from './renderer.js';
+import { BlocksEvent, BlocksEventType, CustomPostDefinition, RenderPostResponse, ToastAppearance, UIEventHandlerDefinition, } from '@devvit/protos';
 import tailwind from '@reddit/shreddit.styles';
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+import { Severity } from '@reddit/faceplate/types.js';
+import { renderRoot } from './renderer.js';
+import './devvit-animation-player.js';
 let DevvitInteractiveUI = class DevvitInteractiveUI extends LitElement {
     constructor() {
         super(...arguments);
         _DevvitInteractiveUI_instances.add(this);
+        _DevvitInteractiveUI_customPost.set(this, void 0);
+        _DevvitInteractiveUI_uiEventHandler.set(this, void 0);
         _DevvitInteractiveUI_context.set(this, {});
-        _DevvitInteractiveUI_realtime.set(this, undefined);
-        _DevvitInteractiveUI_realtimeHandle.set(this, void 0);
-        _DevvitInteractiveUI_rerenderHandle.set(this, void 0);
+        _DevvitInteractiveUI_rerenderTimeout.set(this, void 0);
+        _DevvitInteractiveUI_realtimeSubscription.set(this, void 0);
         _DevvitInteractiveUI_onMessage.set(this, (event) => {
             console.log('got message', event);
             const evt = BlocksEvent.fromJSON(event.data);
             if (evt.type === BlocksEventType.USER_ACTION) {
                 const req = {
-                    event: evt,
                     context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+                    blocks: {
+                        event: evt,
+                    },
                 };
                 void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
             }
         });
+        _DevvitInteractiveUI_handleEvents.set(this, async (event) => {
+            const res = await __classPrivateFieldGet(this, _DevvitInteractiveUI_uiEventHandler, "f")?.HandleUIEvent({
+                context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+                event,
+            });
+            if (res) {
+                __classPrivateFieldSet(this, _DevvitInteractiveUI_context, res.context, "f");
+                await __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_handleEffects).call(this, res.effects);
+            }
+        });
     }
     static get styles() {
         return [
@@ -42,50 +58,65 @@ let DevvitInteractiveUI = class DevvitInteractiveUI extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_triggerFirstRender).call(this);
         window.addEventListener('message', __classPrivateFieldGet(this, _DevvitInteractiveUI_onMessage, "f"));
+        __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_triggerFirstRender).call(this);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         console.log('disconnected from custom post preview');
         window.removeEventListener('message', __classPrivateFieldGet(this, _DevvitInteractiveUI_onMessage, "f"));
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('actorRef')) {
+            __classPrivateFieldSet(this, _DevvitInteractiveUI_customPost, this.actorRef?.As(CustomPostDefinition), "f");
+            __classPrivateFieldSet(this, _DevvitInteractiveUI_uiEventHandler, this.actorRef?.As(UIEventHandlerDefinition), "f");
+            __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_triggerFirstRender).call(this);
+        }
+    }
     render() {
-        // TODO make this handle slotted content from SSR
+        // At first, we don't have a render response. In the meantime allow
+        // slot'd content to be rendered. This lets SSR work.
         if (!this.renderResponse) {
-            // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
-            return html `<div>Loading...</div>`;
+            return html `<slot></slot>`;
         }
-        const uiRoot = this.renderResponse.ui;
+        const uiRoot = this.renderResponse.blocks?.ui;
         // TODO better handle case where there is no UI to render
         if (!uiRoot) {
             // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
             return html `<div>No UI to render</div>`;
         }
-        return html `<div @click=${__classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_onClick)}>${renderRoot(uiRoot, this.renderResponse)}</div>`;
+        return html `<div @click="${__classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_onClick)}">${renderRoot(uiRoot, this.renderResponse)}</div>`;
     }
 };
-_DevvitInteractiveUI_context = new WeakMap(), _DevvitInteractiveUI_realtime = new WeakMap(), _DevvitInteractiveUI_realtimeHandle = new WeakMap(), _DevvitInteractiveUI_rerenderHandle = new WeakMap(), _DevvitInteractiveUI_onMessage = new WeakMap(), _DevvitInteractiveUI_instances = new WeakSet(), _DevvitInteractiveUI_triggerFirstRender = async function _DevvitInteractiveUI_triggerFirstRender() {
+_DevvitInteractiveUI_customPost = new WeakMap(), _DevvitInteractiveUI_uiEventHandler = new WeakMap(), _DevvitInteractiveUI_context = new WeakMap(), _DevvitInteractiveUI_rerenderTimeout = new WeakMap(), _DevvitInteractiveUI_realtimeSubscription = new WeakMap(), _DevvitInteractiveUI_onMessage = new WeakMap(), _DevvitInteractiveUI_handleEvents = new WeakMap(), _DevvitInteractiveUI_instances = new WeakSet(), _DevvitInteractiveUI_triggerFirstRender = function _DevvitInteractiveUI_triggerFirstRender() {
+    if (!this.actorRef || !__classPrivateFieldGet(this, _DevvitInteractiveUI_customPost, "f")) {
+        return;
+    }
     const req = {
-        event: {
-            type: BlocksEventType.INITIAL_RENDER,
-            key: "initial-render",
-            data: {},
+        blocks: {
+            event: {
+                type: BlocksEventType.INITIAL_RENDER,
+                key: 'initial-render',
+                data: {},
+            },
         },
         context: {},
     };
-    await __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
+    void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
 }, _DevvitInteractiveUI_requestRender = 
 // TODO block on only one render request going through at a time
 async function _DevvitInteractiveUI_requestRender(req) {
     try {
-        const response = await this.actor?.Render(req, this.metadata);
+        const response = await __classPrivateFieldGet(this, _DevvitInteractiveUI_customPost, "f")?.RenderPost(req, this.metadata);
         if (response) {
             __classPrivateFieldSet(this, _DevvitInteractiveUI_context, response.context, "f");
-            this.renderResponse = response;
-            __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_handleRenderAgainFromResponse).call(this, response);
-            __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_updateSubscriptions).call(this, response?.subscriptions || []);
-            this.onRender?.(response);
+            if (response.blocks) {
+                this.renderResponse = response;
+                this.onRender?.(response);
+            }
+            if (response.effects) {
+                await __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_handleEffects).call(this, response.effects);
+            }
         }
         else {
             console.warn('No response from custom post');
@@ -94,55 +125,6 @@ async function _DevvitInteractiveUI_requestRender(req) {
     catch (err) {
         console.error('Error while running custom post', err);
     }
-}, _DevvitInteractiveUI_updateSubscriptions = function _DevvitInteractiveUI_updateSubscriptions(subscriptions) {
-    if (!__classPrivateFieldGet(this, _DevvitInteractiveUI_realtime, "f")) {
-        if (this.runtime) {
-            __classPrivateFieldSet(this, _DevvitInteractiveUI_realtime, this.runtime.getPlugin(RealtimeDefinition), "f");
-        }
-        else {
-            console.error('No runtime found');
-            return;
-        }
-    }
-    if (__classPrivateFieldGet(this, _DevvitInteractiveUI_realtimeHandle, "f")) {
-        __classPrivateFieldGet(this, _DevvitInteractiveUI_realtimeHandle, "f").unsubscribe();
-    }
-    if (!__classPrivateFieldGet(this, _DevvitInteractiveUI_realtime, "f")) {
-        return;
-    }
-    const obs = __classPrivateFieldGet(this, _DevvitInteractiveUI_realtime, "f").Subscribe({ channels: subscriptions });
-    __classPrivateFieldSet(this, _DevvitInteractiveUI_realtimeHandle, obs.subscribe((event) => {
-        console.log('got realtime event', event);
-        const req = {
-            event: {
-                type: BlocksEventType.SUBSCRIPTION_EVENT,
-                key: event.channel,
-                data: event.data,
-            }, context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
-        };
-        void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
-    }), "f");
-}, _DevvitInteractiveUI_handleRenderAgainFromResponse = function _DevvitInteractiveUI_handleRenderAgainFromResponse(response) {
-    // TODO: This could keep the app running indefinitely when you switch tabs and aren't
-    // focused on it (bad for battery / cpu).
-    if (__classPrivateFieldGet(this, _DevvitInteractiveUI_rerenderHandle, "f")) {
-        window.clearTimeout(__classPrivateFieldGet(this, _DevvitInteractiveUI_rerenderHandle, "f"));
-        __classPrivateFieldSet(this, _DevvitInteractiveUI_rerenderHandle, undefined, "f");
-    }
-    let tick = response.renderAgainInSeconds;
-    if (tick && tick > 0) {
-        tick = Math.round(tick * 1000);
-        const req = {
-            event: {
-                type: BlocksEventType.SCHEDULED_EVENT,
-                key: "scheduled-event",
-                data: {},
-            }, context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
-        };
-        __classPrivateFieldSet(this, _DevvitInteractiveUI_rerenderHandle, window.setTimeout(() => {
-            void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
-        }, tick), "f");
-    }
 }, _DevvitInteractiveUI_onClick = function _DevvitInteractiveUI_onClick(event) {
     // walk the tree and find the nearest data-action-id
     // and use that to send a new render request into the app
@@ -157,19 +139,78 @@ async function _DevvitInteractiveUI_requestRender(req) {
     }
     if (actionId) {
         const req = {
-            event: {
-                type: BlocksEventType.USER_ACTION,
-                key: actionId,
-                data: {},
-            }, context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+            context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+            blocks: {
+                event: {
+                    type: BlocksEventType.USER_ACTION,
+                    key: actionId,
+                    data: {},
+                },
+            },
         };
         void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
     }
+}, _DevvitInteractiveUI_handleEffects = async function _DevvitInteractiveUI_handleEffects(effects) {
+    const running = [];
+    for (const effect of effects) {
+        if (effect.rerenderUi) {
+            running.push(__classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_rerenderEffect).call(this, effect.rerenderUi));
+        }
+        else if (effect.realtimeSubscriptions) {
+            __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_realtimeSubscriptionsEffect).call(this, effect.realtimeSubscriptions);
+        }
+        else if (effect.showToast) {
+            __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_showToastEffect).call(this, effect.showToast);
+        }
+        else {
+            // Can't handle this directly. Bubble effect up.
+            this.dispatchEvent(customEvent('devvit-ui-effect', { effect, onEvent: __classPrivateFieldGet(this, _DevvitInteractiveUI_handleEvents, "f") }));
+        }
+    }
+    await Promise.allSettled(running);
+}, _DevvitInteractiveUI_rerenderEffect = async function _DevvitInteractiveUI_rerenderEffect(effect) {
+    const rerender = async () => {
+        __classPrivateFieldSet(this, _DevvitInteractiveUI_rerenderTimeout, undefined, "f");
+        await __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, {
+            context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+            blocks: {
+                event: {
+                    type: BlocksEventType.EFFECT_ACTION,
+                    key: 'rerender-effect',
+                },
+            },
+        });
+    };
+    // Rerender already queued. Resolve it early and queue another.
+    if (__classPrivateFieldGet(this, _DevvitInteractiveUI_rerenderTimeout, "f")) {
+        window.clearTimeout(__classPrivateFieldGet(this, _DevvitInteractiveUI_rerenderTimeout, "f"));
+        await rerender();
+    }
+    __classPrivateFieldSet(this, _DevvitInteractiveUI_rerenderTimeout, window.setTimeout(() => void rerender(), (effect.delaySeconds ?? 0) * 1000), "f");
+}, _DevvitInteractiveUI_realtimeSubscriptionsEffect = function _DevvitInteractiveUI_realtimeSubscriptionsEffect(effect) {
+    __classPrivateFieldSet(this, _DevvitInteractiveUI_realtimeSubscription, this.realtime
+        ?.Subscribe({ channels: effect.subscriptionIds }, this.metadata)
+        .subscribe((event) => {
+        void __classPrivateFieldGet(this, _DevvitInteractiveUI_handleEvents, "f").call(this, { realtimeEvent: { event } });
+    }), "f");
+}, _DevvitInteractiveUI_showToastEffect = function _DevvitInteractiveUI_showToastEffect(effect) {
+    // TODO:
+    //   - effect.toast.leadingElement
+    //   - effect.toast.trailingElement
+    //   - onAction
+    this.dispatchEvent(customEvent('faceplate-alert', {
+        level: effect.toast?.appearance === ToastAppearance.SUCCESS ? Severity.success : Severity.info,
+        message: effect.toast?.text,
+    }));
 };
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
-], DevvitInteractiveUI.prototype, "actor", void 0);
+], DevvitInteractiveUI.prototype, "actorRef", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitInteractiveUI.prototype, "realtime", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
@@ -178,13 +219,8 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
 ], DevvitInteractiveUI.prototype, "onRender", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], DevvitInteractiveUI.prototype, "runtime", void 0);
 __decorate([
     state(),
-    property({ attribute: false, reflect: true }),
     __metadata("design:type", Object)
 ], DevvitInteractiveUI.prototype, "renderResponse", void 0);
 DevvitInteractiveUI = __decorate([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -26,15 +26,20 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.8.7",
-    "@devvit/runtimes": "0.8.7",
-    "rxjs": "7.8.0"
+    "@devvit/protos": "0.8.8",
+    "@devvit/runtimes": "0.8.8",
+    "@lottiefiles/lottie-player": "1.7.1",
+    "rxjs": "7.5.7"
   },
   "peerDependencies": {
+    "@reddit/faceplate": "2.0.0",
     "@reddit/faceplate-ui": "1.0.5-6",
     "@reddit/shreddit.styles": "^1.0.8"
   },
   "peerDependenciesMeta": {
+    "@reddit/faceplate": {
+      "optional": true
+    },
     "@reddit/faceplate-ui": {
       "optional": true
     },
@@ -47,12 +52,13 @@
     "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@devvit/eslint-config": "0.8.7",
-    "@devvit/public-api": "0.8.7",
-    "@devvit/repo-tools": "0.8.7",
-    "@devvit/tsconfig": "0.8.7",
+    "@devvit/eslint-config": "0.8.8",
+    "@devvit/public-api": "0.8.8",
+    "@devvit/repo-tools": "0.8.8",
+    "@devvit/tsconfig": "0.8.8",
     "@reddit/baseplate": "^0.13.0",
     "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
+    "@reddit/faceplate": "2.0.0",
     "@reddit/faceplate-ui": "1.0.5-6",
     "eslint": "8.9.0",
     "lit": "^2.0.0",
@@ -63,5 +69,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "8c1191bae1046f840e05bbceed7d638d15acb131"
+  "gitHead": "495020478f831cb7235b2dbdb494a9cd67b59e14"
 }

package/render-core.d.ts

@@ -13,8 +13,8 @@
  *
  * Styling not feasible with tailwind classes will be done with inline styles or css classes
  */
-import { Element, RenderResponse } from '@devvit/protos';
+import { Element, RenderPostResponse } from '@devvit/protos';
 import type { TemplateLike } from '@reddit/baseplate/html.js';
-export declare const renderRoot: (element: Element, rsp: RenderResponse) => TemplateLike;
-export declare const renderElement: (element: Element, rsp: RenderResponse) => TemplateLike;
+export declare const renderRoot: (element: Element, rsp: RenderPostResponse) => TemplateLike;
+export declare const renderElement: (element: Element, rsp: RenderPostResponse) => TemplateLike;
 //# sourceMappingURL=render-core.d.ts.map

package/render-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-core.d.ts","sourceRoot":"","sources":["../src/render-core.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,OAAO,EAIP,cAAc,EAKf,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,eAAO,MAAM,UAAU,YAAa,OAAO,OAAO,cAAc,KAAG,YAKlE,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,OAAO,cAAc,KAAG,YAoBrE,CAAC"}
+{"version":3,"file":"render-core.d.ts","sourceRoot":"","sources":["../src/render-core.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,OAAO,EAOP,kBAAkB,EAKnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAc9D,eAAO,MAAM,UAAU,YAAa,OAAO,OAAO,kBAAkB,KAAG,YAKtE,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,OAAO,kBAAkB,KAAG,YAsBzE,CAAC"}

package/render-core.js

@@ -14,8 +14,15 @@
  *
  * Styling not feasible with tailwind classes will be done with inline styles or css classes
  */
-import { ElementType, ObjectFit, Padding, StackAlign, StackDirection, StackRoundedCornerSize, TextAlign, } from '@devvit/protos';
+import { AnimationFormat, ElementType, ButtonAppearance, ButtonShape, ButtonSize, ObjectFit, Padding, StackAlign, StackDirection, StackRoundedCornerSize, TextAlign, } from '@devvit/protos';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+// Faceplate Client|Server agnostic templates.
+// These cannot be called reliably until the faceplate rendering strategy is set.
+// To make sure that works, callers should import the render functions from the client/server
+// directories instead of this file.
+import { button as faceplateButton } from '@reddit/faceplate-ui/templates/button.js';
+import { ButtonSize as FPButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+// Rendering functions
 export const renderRoot = (element, rsp) => {
     const { html } = getTemplateRenderingStrategy();
     return html `<div class="font-semibold p-sm text-12 font-sans tracking-tight leading-5">
@@ -28,6 +35,8 @@ export const renderElement = (element, rsp) => {
             return renderStack(element, rsp);
         case ElementType.IMAGE:
             return renderImage(element);
+        case ElementType.ANIMATION:
+            return renderAnimation(element);
         case ElementType.BUTTON:
             return renderButton(element);
         case ElementType.SPACER:
@@ -49,18 +58,19 @@ const renderWebView = (element, rsp) => {
     postMessageToIframe(element.src, rsp);
     return html `<iframe
     class="border-box ${grow(element)}"
-    @load="${(evt) => { refBySrc[element.src] = evt.target; postMessageToIframe(element.src, rsp); }}"
-    ref=${(el) => (refBySrc[element.src] = el)}
+    @load="${(evt) => {
+        refBySrc[element.src] = evt.target;
+        postMessageToIframe(element.src, rsp);
+    }}"
+    ref="${(el) => (refBySrc[element.src] = el)}"
     sandbox="allow-scripts"
-    src=${element.src}
-    style=${styleMap({
+    src="${element.src}"
+    style="${styleMap({
         backgroundColor: element.backgroundColor,
         borderColor: element.borderColor,
-        borderWidth: element.borderColor ? '1px' : "0",
-        borderRadius: element.roundedCornerSize
-            ? `${element.roundedCornerSize}px`
-            : undefined,
-    })}
+        borderWidth: element.borderColor ? '1px' : '0',
+        borderRadius: element.roundedCornerSize ? `${element.roundedCornerSize}px` : undefined,
+    })}"
   ></iframe>`;
 };
 const postMessageToIframe = (src, rsp) => {
@@ -90,8 +100,8 @@ const renderStack = (element, rsp) => {
     const { html, repeat, styleMap } = getTemplateRenderingStrategy();
     return html `<div
     class="border-box ${layoutClass} ${grow(element)} ${flexDirection} ${alignContent} ${justifyContent} ${borderRadiusClass} ${paddingClass}"
-    style=${styleMap(style)}
-    data-action-id=${element.actionId}
+    style="${styleMap(style)}"
+    data-action-id="${element.actionId}"
   >
     ${repeat(element.children, (e) => renderElement(e, rsp))}
   </div>`;
@@ -186,19 +196,32 @@ const getBorderRadiusClass = (rounding) => {
         default:
             return 'rounded-none';
     }
-    return '';
 };
 const renderImage = (element) => {
     const { html } = getTemplateRenderingStrategy();
+    // note: empty ' ' at start of `class` to avoid false-positive in
+    // lit/quoted-expressions rule
     return html `<img
+    class=" ${getObjectFitClass(element.objectFit)} ${grow(element)}"
     referrerpolicy="no-referrer"
     crossorigin="anonymous"
     loading="lazy"
-    class="${getObjectFitClass(element.objectFit)} ${grow(element)}"
-    src=${element.src}
-    data-action-id=${element.actionId}
+    src="${element.src}"
+    data-action-id="${element.actionId}"
   />`;
 };
+const renderAnimation = (element) => {
+    const { html } = getTemplateRenderingStrategy();
+    const { src, animationFormat } = element;
+    return html `
+    <devvit-animation-player
+      class=" ${getObjectFitClass(element.objectFit)} ${grow(element)}"
+      src="${src}"
+      format="${animationFormat ?? AnimationFormat.LOTTIE}"
+    >
+    </devvit-animation-player>
+  `;
+};
 const getObjectFitClass = (fit) => {
     switch (fit) {
         case ObjectFit.CONTAIN:
@@ -218,9 +241,58 @@ const renderButton = (element) => {
     // TODO improve button rendering
     // TODO figure out how to dynamically pick the client vs server faceplate template
     const { html } = getTemplateRenderingStrategy();
-    return html `<button class="${grow(element)}" data-action-id=${element.actionId}>
-    ${element.text}
-  </button>`;
+    return faceplateButton({
+        attributes: {
+            className: grow(element),
+            'data-action-id': element.actionId,
+        },
+        children: html `${element.text}`,
+        shape: getFPButtonShape(element),
+        appearance: getFPButtonAppearance(element),
+        size: getFPButtonSize(element),
+    });
+};
+const getFPButtonShape = (element) => {
+    switch (element.buttonShape) {
+        case ButtonShape.SQUARE:
+            return 'square';
+        case ButtonShape.PILL:
+        case ButtonShape.UNRECOGNIZED:
+        default:
+            return 'pill';
+    }
+};
+const getFPButtonAppearance = (element) => {
+    switch (element.buttonAppearance) {
+        case ButtonAppearance.BUTTON_PRIMARY:
+            return 'primary';
+        case ButtonAppearance.BUTTON_PLAIN:
+            return 'plain';
+        case ButtonAppearance.BUTTON_OUTLINE:
+            return 'outline';
+        case ButtonAppearance.BUTTON_DESTRUCTIVE:
+            return 'destructive';
+        case ButtonAppearance.BUTTON_MEDIA:
+            return 'media';
+        case ButtonAppearance.BUTTON_BRAND:
+            return 'brand';
+        case ButtonAppearance.BUTTON_SUCCESS:
+            return 'success';
+        case ButtonAppearance.BUTTON_SECONDARY:
+        default:
+            return 'secondary';
+    }
+};
+const getFPButtonSize = (element) => {
+    switch (element.buttonSize) {
+        case ButtonSize.BUTTON_SMALL:
+            return FPButtonSize.Small;
+        case ButtonSize.BUTTON_LARGE:
+            return FPButtonSize.Large;
+        case ButtonSize.BUTTON_MEDIUM:
+        default:
+            return FPButtonSize.Medium;
+    }
 };
 const getSpacerPaddingClass = (element) => {
     if (element.padding === Padding.PADDING_LARGE) {
@@ -239,11 +311,13 @@ const getSpacerPaddingClass = (element) => {
 const renderSpacer = (element) => {
     const paddingClass = getSpacerPaddingClass(element);
     const { html } = getTemplateRenderingStrategy();
-    return html `<div class="${grow(element)} ${paddingClass}"></div>`;
+    // note: empty ' ' at start of `class` to avoid false-positive in
+    // lit/quoted-expressions rule
+    return html `<div class=" ${grow(element)} ${paddingClass}"></div>`;
 };
 const renderFragment = (element, rsp) => {
     const { html, repeat } = getTemplateRenderingStrategy();
-    return html `${repeat(element.children, (e) => renderElement(e, rsp))})}`;
+    return html `${repeat(element.children, (e) => renderElement(e, rsp))}`;
 };
 const renderText = (element) => {
     const style = {
@@ -253,7 +327,9 @@ const renderText = (element) => {
     };
     const textAlignClass = getTextAlignClass(element.textAlign);
     const { html, styleMap } = getTemplateRenderingStrategy();
-    return html `<div class="${textAlignClass} ${grow(element)}" style=${styleMap(style)}>
+    // note: empty ' ' at start of `class` to avoid false-positive in
+    // lit/quoted-expressions rule
+    return html `<div class=" ${textAlignClass} ${grow(element)}" style="${styleMap(style)}">
     ${element.text}
   </div>`;
 };

package/styles.css

@@ -1,6 +1,14 @@
 /**
  * devvit-depth powers ZStack. 
  * Requires real CSS classes for ease of implementation 
+ *
+ * TODO (schwers)
+ * We could refactor this tailwind by doing the following
+ *   - `grid grid-cols-1` on the stack
+ *   - and then `col-start-1 row-start-1` on all children
+ * 
+ * This could make it easier to consume this everywhere.
+ * I want to setup visual testing before doing this though.
  */
 .devvit-depth {
   display: grid;