@devvit/ui-renderer 0.8.5

package/LICENSE

@@ -0,0 +1,26 @@
+Copyright (c) 2023 Reddit Inc.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
+OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGE.

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

@@ -0,0 +1,27 @@
+/// <reference lib="dom" />
+/**
+ * Component that renders wraps a rendering of devvit ui and makes it interactive.
+ *
+ * Needs to handle
+ * 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;
+export declare class DevvitInteractiveUI extends LitElement {
+    #private;
+    actor?: CustomPost;
+    metadata?: Metadata;
+    onRender?: RenderStateChange;
+    runtime?: CommonRuntimeLike;
+    renderResponse?: RenderResponse;
+    static get styles(): import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=devvit-ui-interactive.d.ts.map

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

@@ -0,0 +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"}

package/client/devvit-ui-interactive.js

@@ -0,0 +1,193 @@
+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.
+ *
+ * Needs to handle
+ * 1 - not getting slotted content and IT triggers the first render
+ * 2 - getting slotted content from SSR and then replacing it when interactivity happens
+ */
+/// <reference lib="dom" />
+import { html, css, 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 tailwind from '@reddit/shreddit.styles';
+let DevvitInteractiveUI = class DevvitInteractiveUI extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DevvitInteractiveUI_instances.add(this);
+        _DevvitInteractiveUI_context.set(this, {});
+        _DevvitInteractiveUI_realtime.set(this, undefined);
+        _DevvitInteractiveUI_realtimeHandle.set(this, void 0);
+        _DevvitInteractiveUI_rerenderHandle.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"),
+                };
+                void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
+            }
+        });
+    }
+    static get styles() {
+        return [
+            tailwind,
+            // dynamic mode styles only. 99% of things should come statically from tailwind
+            css ``,
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_triggerFirstRender).call(this);
+        window.addEventListener('message', __classPrivateFieldGet(this, _DevvitInteractiveUI_onMessage, "f"));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        console.log('disconnected from custom post preview');
+        window.removeEventListener('message', __classPrivateFieldGet(this, _DevvitInteractiveUI_onMessage, "f"));
+    }
+    render() {
+        // TODO make this handle slotted content from SSR
+        if (!this.renderResponse) {
+            // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+            return html `<div>Loading...</div>`;
+        }
+        const uiRoot = this.renderResponse.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>`;
+    }
+};
+_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() {
+    const req = {
+        event: {
+            type: BlocksEventType.INITIAL_RENDER,
+            key: "initial-render",
+            data: {},
+        },
+        context: {},
+    };
+    await __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);
+        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);
+        }
+        else {
+            console.warn('No response from custom post');
+        }
+    }
+    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
+    let target = event.target;
+    let actionId;
+    while (target) {
+        actionId = target.dataset.actionId;
+        if (actionId) {
+            break;
+        }
+        target = target.parentElement || undefined;
+    }
+    if (actionId) {
+        const req = {
+            event: {
+                type: BlocksEventType.USER_ACTION,
+                key: actionId,
+                data: {},
+            }, context: __classPrivateFieldGet(this, _DevvitInteractiveUI_context, "f"),
+        };
+        void __classPrivateFieldGet(this, _DevvitInteractiveUI_instances, "m", _DevvitInteractiveUI_requestRender).call(this, req);
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitInteractiveUI.prototype, "actor", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitInteractiveUI.prototype, "metadata", void 0);
+__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([
+    customElement('devvit-ui-interactive')
+], DevvitInteractiveUI);
+export { DevvitInteractiveUI };

package/client/renderer.d.ts

@@ -0,0 +1,3 @@
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+export * from '../render-core.js';
+//# sourceMappingURL=renderer.d.ts.map

package/client/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/client/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC;AAC1E,cAAc,mBAAmB,CAAC"}

package/client/renderer.js

@@ -0,0 +1,2 @@
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+export * from '../render-core.js';

package/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@devvit/ui-renderer",
+  "version": "0.8.5",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://developers.reddit.com/"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "scripts": {
+    "build": "tsc && yarn styles:copy",
+    "clean": "rm -rf .turbo coverage dist",
+    "clobber": "yarn clean && rm -rf node_modules",
+    "dev": "yarn styles:copy && tsc -w",
+    "lint": "redlint .",
+    "lint:fix": "yarn lint --fix",
+    "prepublishOnly": "publish-package-json",
+    "styles:clean": "rm -f dist/styles.css",
+    "styles:copy": "yarn styles:clean && cp styles.css dist/styles.css",
+    "styles:dev": "echo 'todo make a filewatcher for styles.css or build it in less and use the preprocessor watch mode'",
+    "test": "yarn test:unit && yarn test:types && yarn lint",
+    "test:types": "tsc --noEmit",
+    "test:unit": "vitest run",
+    "test:unit-with-coverage": "vitest run --coverage"
+  },
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@devvit/protos": "0.8.5",
+    "@devvit/runtimes": "0.8.5",
+    "rxjs": "7.8.0"
+  },
+  "peerDependencies": {
+    "@reddit/faceplate-ui": "1.0.5-6",
+    "@reddit/shreddit.styles": "^1.0.8"
+  },
+  "optionalDependencies": {
+    "@reddit/baseplate": "^0.12.1",
+    "lit": "^2.0.0"
+  },
+  "devDependencies": {
+    "@devvit/eslint-config": "0.8.5",
+    "@devvit/public-api": "0.8.5",
+    "@devvit/repo-tools": "0.8.5",
+    "@devvit/tsconfig": "0.8.5",
+    "@reddit/baseplate": "^0.12.1",
+    "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
+    "@reddit/faceplate-ui": "1.0.5-6",
+    "eslint": "8.9.0",
+    "lit": "^2.0.0",
+    "typescript": "4.9.3",
+    "vitest": "0.8.2"
+  },
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "source": "./src/index.ts",
+  "gitHead": "4f506a30c6af7ad2caeb7b0192129c63d4ebbd84"
+}

package/render-core.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Core rendering functions for devvit UI elements.
+ *
+ * This uses @reddit/faceplate-ui's renderStrategies to render the UI. This is necessary
+ * because we need to render the UI on the server-side shreddit style, and also client-side.
+ * Examples of where this will be used:
+ *   - dev-server's preview components
+ *   - shreddit
+ *   - d2x
+ *   - other reddit clients
+ *
+ * All styling will be done with tailwind classes whenever possible.
+ *
+ * Styling not feasible with tailwind classes will be done with inline styles or css classes
+ */
+import { Element, RenderResponse } 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;
+//# sourceMappingURL=render-core.d.ts.map

package/render-core.d.ts.map

@@ -0,0 +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"}

package/render-core.js

@@ -0,0 +1,271 @@
+/* eslint-disable @reddit/i18n-shreddit/no-unwrapped-strings */
+/**
+ * Core rendering functions for devvit UI elements.
+ *
+ * This uses @reddit/faceplate-ui's renderStrategies to render the UI. This is necessary
+ * because we need to render the UI on the server-side shreddit style, and also client-side.
+ * Examples of where this will be used:
+ *   - dev-server's preview components
+ *   - shreddit
+ *   - d2x
+ *   - other reddit clients
+ *
+ * All styling will be done with tailwind classes whenever possible.
+ *
+ * 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 { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+export const renderRoot = (element, rsp) => {
+    const { html } = getTemplateRenderingStrategy();
+    return html `<div class="font-semibold p-sm text-12 font-sans tracking-tight leading-5">
+    ${renderElement(element, rsp)}
+  </div>`;
+};
+export const renderElement = (element, rsp) => {
+    switch (element.type) {
+        case ElementType.STACK:
+            return renderStack(element, rsp);
+        case ElementType.IMAGE:
+            return renderImage(element);
+        case ElementType.BUTTON:
+            return renderButton(element);
+        case ElementType.SPACER:
+            return renderSpacer(element);
+        case ElementType.FRAGMENT:
+            return renderFragment(element, rsp);
+        case ElementType.TEXT:
+            return renderText(element);
+        case ElementType.WEB_VIEW:
+            return renderWebView(element, rsp);
+    }
+    const { html } = getTemplateRenderingStrategy();
+    return html `DEBUG ME, unknown element type: ${element.type}`;
+};
+const refBySrc = {};
+const renderWebView = (element, rsp) => {
+    const { html, styleMap } = getTemplateRenderingStrategy();
+    console.log('rendering webview', 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)}
+    sandbox="allow-scripts"
+    src=${element.src}
+    style=${styleMap({
+        backgroundColor: element.backgroundColor,
+        borderColor: element.borderColor,
+        borderWidth: element.borderColor ? '1px' : "0",
+        borderRadius: element.roundedCornerSize
+            ? `${element.roundedCornerSize}px`
+            : undefined,
+    })}
+  ></iframe>`;
+};
+const postMessageToIframe = (src, rsp) => {
+    const iframe = refBySrc[src];
+    console.log('posting message to iframe', iframe, rsp);
+    iframe?.contentWindow?.postMessage(rsp, '*');
+};
+const renderStack = (element, rsp) => {
+    const layoutClass = getStackLayoutClass(element);
+    const flexDirection = getFlexDirectionClass(element);
+    const justifyContent = justifyContentClass(element);
+    const alignContent = alignContentClass(element.crossAlign);
+    const borderRadiusClass = getBorderRadiusClass(element.roundedCornerSize);
+    const paddingClass = getPaddingClass(element);
+    const style = {
+        backgroundColor: element.backgroundColor,
+        border: element.borderColor && `1px ${element.borderColor} solid`,
+    };
+    if (element.sizePercent) {
+        if (element.stackDirection === StackDirection.VERTICAL) {
+            style.height = `${element.sizePercent}%`;
+        }
+        else {
+            style.width = `${element.sizePercent}%`;
+        }
+    }
+    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}
+  >
+    ${repeat(element.children, (e) => renderElement(e, rsp))}
+  </div>`;
+};
+const grow = (element) => {
+    return element.grow ? 'grow' : '';
+};
+const getPaddingClass = (element) => {
+    if (element.stackDirection === StackDirection.DEPTH) {
+        return '';
+    }
+    if (element.padding === Padding.PADDING_LARGE) {
+        return 'p-lg';
+    }
+    else if (element.padding === Padding.PADDING_MEDIUM) {
+        return 'p-md';
+    }
+    else if (element.padding === Padding.PADDING_SMALL) {
+        return 'p-sm';
+    }
+    else {
+        return '';
+    }
+};
+const getFlexDirectionClass = (element) => {
+    let flexDirection = 'flex-row';
+    if (element.stackDirection === StackDirection.VERTICAL) {
+        if (element.stackReverse) {
+            flexDirection = 'flex-col-reverse';
+        }
+        else {
+            flexDirection = 'flex-col';
+        }
+    }
+    else if (element.stackDirection === StackDirection.DEPTH) {
+        flexDirection = 'devvit-depth';
+    }
+    else {
+        if (element.stackReverse) {
+            flexDirection = 'flex-row-reverse';
+        }
+    }
+    return flexDirection;
+};
+const getStackLayoutClass = (element) => {
+    if (element.stackDirection === StackDirection.DEPTH) {
+        return 'devvit-depth';
+    }
+    return 'flex';
+};
+const justifyContentClass = (element) => {
+    const zStack = element.stackDirection === StackDirection.DEPTH;
+    switch (element.stackAlign) {
+        case StackAlign.STACK_START:
+            return zStack ? 'justify-items-start' : 'justify-start';
+        case StackAlign.STACK_END:
+            return zStack ? 'justify-items-end' : `justify-end`;
+        case StackAlign.STACK_CENTER:
+            return zStack ? 'justify-items-center' : `justify-center`;
+        case undefined:
+        default:
+            return zStack ? '' : 'justify-center';
+    }
+};
+const alignContentClass = (align) => {
+    switch (align) {
+        case StackAlign.STACK_START:
+            return 'items-start';
+        case StackAlign.STACK_END:
+            return 'items-end';
+        case StackAlign.STACK_CENTER:
+            return 'items-center';
+        case undefined:
+        default:
+            return 'items-stretch';
+    }
+};
+const getBorderRadiusClass = (rounding) => {
+    switch (rounding) {
+        case StackRoundedCornerSize.CORNER_NONE:
+            return 'rounded-none';
+        case StackRoundedCornerSize.CORNER_SMALL:
+            return 'rounded-sm';
+        case StackRoundedCornerSize.CORNER_MEDIUM:
+            // TODO this might not work in faceplate's tailwind config
+            // see https://faceplate-ui.snooguts.net/tailwind/#Border%20Radius
+            return 'rounded-md';
+        case StackRoundedCornerSize.CORNER_LARGE:
+            return 'rounded-lg';
+        case StackRoundedCornerSize.CORNER_FULL:
+            return 'rounded-full';
+        default:
+            return 'rounded-none';
+    }
+    return '';
+};
+const renderImage = (element) => {
+    const { html } = getTemplateRenderingStrategy();
+    return html `<img
+    referrerpolicy="no-referrer"
+    crossorigin="anonymous"
+    loading="lazy"
+    class="${getObjectFitClass(element.objectFit)} ${grow(element)}"
+    src=${element.src}
+    data-action-id=${element.actionId}
+  />`;
+};
+const getObjectFitClass = (fit) => {
+    switch (fit) {
+        case ObjectFit.CONTAIN:
+            return 'object-contain';
+        case ObjectFit.COVER:
+            return 'object-cover';
+        case ObjectFit.FILL:
+            return 'object-fill';
+        case ObjectFit.SCALE_DOWN:
+            return 'object-scale-down';
+        case ObjectFit.NONE:
+            return 'object-none';
+    }
+    return '';
+};
+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>`;
+};
+const getSpacerPaddingClass = (element) => {
+    if (element.padding === Padding.PADDING_LARGE) {
+        return 'pr-lg pb-lg';
+    }
+    else if (element.padding === Padding.PADDING_MEDIUM) {
+        return 'pr-md pb-md';
+    }
+    else if (element.padding === Padding.PADDING_SMALL) {
+        return 'pr-sm pb-sm';
+    }
+    else {
+        return '';
+    }
+};
+const renderSpacer = (element) => {
+    const paddingClass = getSpacerPaddingClass(element);
+    const { html } = getTemplateRenderingStrategy();
+    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))})}`;
+};
+const renderText = (element) => {
+    const style = {
+        fontSize: element.fontSize && element.fontSize !== 0 ? `${element.fontSize}em` : undefined,
+        color: element.color,
+        width: element.sizePercent ? `${element.sizePercent}%` : undefined,
+    };
+    const textAlignClass = getTextAlignClass(element.textAlign);
+    const { html, styleMap } = getTemplateRenderingStrategy();
+    return html `<div class="${textAlignClass} ${grow(element)}" style=${styleMap(style)}>
+    ${element.text}
+  </div>`;
+};
+const getTextAlignClass = (align) => {
+    switch (align) {
+        case TextAlign.TEXT_ALIGN_CENTER:
+            return 'text-center';
+        case TextAlign.TEXT_ALIGN_END:
+            return 'text-end';
+        case TextAlign.TEXT_ALIGN_START:
+        case undefined:
+        default:
+            return 'text-start';
+    }
+};

package/server/renderer.d.ts

@@ -0,0 +1,3 @@
+import '@reddit/faceplate-ui/templateRenderingStrategy/serverStrategy.js';
+export * from '../render-core.js';
+//# sourceMappingURL=renderer.d.ts.map

package/server/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/server/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC;AAC1E,cAAc,mBAAmB,CAAC"}

package/server/renderer.js

@@ -0,0 +1,4 @@
+import '@reddit/faceplate-ui/templateRenderingStrategy/serverStrategy.js';
+export * from '../render-core.js';
+// TODO (schwers): In the future WebViews (and others) will probably need
+// a different server-side render method to avoid hydration issues

package/styles.css

@@ -0,0 +1,13 @@
+/**
+ * devvit-depth powers ZStack. 
+ * Requires real CSS classes for ease of implementation 
+ */
+.devvit-depth {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.devvit-depth > div {
+  grid-row-start: 1;
+  grid-column-start: 1;
+}