@devvit/ui-renderer 0.8.10 → 0.9.0

package/client/devvit-ui-interactive.js

@@ -1,229 +0,0 @@
-/**
- * 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" />
-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, 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_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 = {
-                    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 [
-            tailwind,
-            // dynamic mode styles only. 99% of things should come statically from tailwind
-            css ``,
-        ];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        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() {
-        // 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) {
-            return html `<slot></slot>`;
-        }
-        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>`;
-    }
-};
-_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 = {
-        blocks: {
-            event: {
-                type: BlocksEventType.INITIAL_RENDER,
-                key: 'initial-render',
-                data: {},
-            },
-        },
-        context: {},
-    };
-    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 __classPrivateFieldGet(this, _DevvitInteractiveUI_customPost, "f")?.RenderPost(req, this.metadata);
-        if (response) {
-            __classPrivateFieldSet(this, _DevvitInteractiveUI_context, response.context, "f");
-            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');
-        }
-    }
-    catch (err) {
-        console.error('Error while running custom post', err);
-    }
-}, _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 = {
-            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, "actorRef", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], DevvitInteractiveUI.prototype, "realtime", 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([
-    state(),
-    __metadata("design:type", Object)
-], DevvitInteractiveUI.prototype, "renderResponse", void 0);
-DevvitInteractiveUI = __decorate([
-    customElement('devvit-ui-interactive')
-], DevvitInteractiveUI);
-export { DevvitInteractiveUI };

package/client/renderer.d.ts.map

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

package/render-core.d.ts

@@ -1,20 +0,0 @@
-/**
- * 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, RenderPostResponse } from '@devvit/protos';
-import type { TemplateLike } from '@reddit/baseplate/html.js';
-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 +0,0 @@
-{"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

@@ -1,347 +0,0 @@
-/* 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 { 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">
-    ${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.ANIMATION:
-            return renderAnimation(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';
-    }
-};
-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"
-    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:
-            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 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) {
-        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();
-    // 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))}`;
-};
-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();
-    // 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>`;
-};
-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.map

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