@devvit/ui-renderer 0.8.11 → 0.9.1

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"}