@devvit/ui-renderer 0.8.11 → 0.9.0

package/blocks/attributes.d.ts

@@ -0,0 +1,30 @@
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { StyleInfo } from 'lit/directives/style-map.js';
+import { ButtonAppearance, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight } from '@devvit/protos';
+import { RenderContext } from './templates/index.js';
+export declare function stackDirectionClass(direction: BlockStackDirection, reverse: boolean | undefined): ClassInfo;
+export declare function sizingClass(sizing: BlockSize | undefined): ClassInfo;
+export declare function sizingStyle(sizing: BlockSize | undefined): StyleInfo;
+export declare function paddingClass(padding: BlockPadding | undefined): ClassInfo;
+export declare function gapClass(spacing: BlockGap | undefined): ClassInfo;
+export declare function alignmentClass(direction: BlockStackDirection, align: BlockAlignment | undefined): ClassInfo;
+export declare function backgroundStyle(background: string | undefined): StyleInfo;
+export declare function borderClass(border: BlockBorder | undefined): ClassInfo;
+export declare function borderStyle(border: BlockBorder | undefined): StyleInfo;
+export declare function radiusClass(radius: BlockRadius | undefined): ClassInfo;
+export declare function textSizeClass(size: BlockTextSize | undefined): ClassInfo;
+export declare function textAlignClass(alignment: BlockAlignment | undefined): ClassInfo;
+export declare function textWeightClass(weight: BlockTextWeight | undefined): ClassInfo;
+export declare function textOutlineClass(outline: BlockTextOutline, _textColor: string | undefined): ClassInfo;
+export declare function colorStyle(color: string | undefined): StyleInfo;
+export declare function spacerSizeClass(size: BlockSpacerSize | undefined, stackDirection: BlockStackDirection): ClassInfo;
+export declare function resizeModeClass(resizeMode: BlockImageResizeMode | undefined): ClassInfo;
+export declare function iconSizeClass(size: BlockIconSize | undefined): ClassInfo;
+export declare function avatarSizeClass(size: BlockAvatarSize | undefined): ClassInfo;
+export declare function facingClass(facing: BlockAvatarFacing | undefined): ClassInfo;
+export declare function fullSnooSizeClass(size: BlockFullSnooSize | undefined): ClassInfo;
+export declare function buttonAppearance(appearance: BlockButtonAppearance | undefined): ButtonAppearance;
+export declare function buttonSize(size: BlockButtonSize | undefined): ButtonSize;
+export declare function onClickAction(block: Block, ctx: RenderContext): (() => void) | undefined;
+//# sourceMappingURL=attributes.d.ts.map

package/blocks/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../src/blocks/attributes.ts"],"names":[],"mappings":"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"}

package/blocks/attributes.js

@@ -0,0 +1,275 @@
+import { ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+import { BlockActionType, BlockAvatarFacing, BlockAvatarSize, BlockBorderWidth, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockHorizontalAlignment, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockVerticalAlignment, } from '@devvit/protos';
+function findColor(color) {
+    // TODO: check CSS for color var and wrap in var(--color-${background}-background)
+    //       - will need access to shadow root
+    return color;
+}
+export function stackDirectionClass(direction, reverse) {
+    const vstack = direction === BlockStackDirection.STACK_VERTICAL;
+    const hstack = direction === BlockStackDirection.STACK_HORIZONTAL;
+    const zstack = direction === BlockStackDirection.STACK_DEPTH;
+    return {
+        flex: vstack || hstack,
+        'flex-row': hstack,
+        'flex-row-reverse': hstack && reverse === true,
+        'flex-col': vstack,
+        'flex-col-reverse': vstack && reverse === true,
+        'devvit-depth': zstack,
+    };
+}
+export function sizingClass(sizing) {
+    return {
+        grow: sizing?.grow === true,
+    };
+}
+export function sizingStyle(sizing) {
+    return {
+        width: sizing?.width === undefined ? undefined : `${sizing.width}%`,
+        height: sizing?.height === undefined ? undefined : `${sizing.height}%`,
+    };
+}
+export function paddingClass(padding) {
+    return {
+        'p-0': padding === undefined || padding == BlockPadding.PADDING_NONE,
+        'p-2xs': padding === BlockPadding.PADDING_XSMALL,
+        'p-xs': padding === BlockPadding.PADDING_SMALL,
+        'p-md': padding === BlockPadding.PADDING_MEDIUM,
+        'p-xl': padding === BlockPadding.PADDING_LARGE,
+    };
+}
+export function gapClass(spacing) {
+    return {
+        'gap-0': spacing === undefined || spacing === BlockGap.GAP_NONE,
+        'gap-xs': spacing === BlockGap.GAP_SMALL,
+        'gap-md': spacing === BlockGap.GAP_MEDIUM,
+        'gap-xl': spacing === BlockGap.GAP_LARGE,
+    };
+}
+export function alignmentClass(direction, align) {
+    const hstack = direction === BlockStackDirection.STACK_HORIZONTAL;
+    const vstack = direction === BlockStackDirection.STACK_VERTICAL;
+    const zstack = direction === BlockStackDirection.STACK_DEPTH;
+    const hnone = align === undefined || align.horizontal === undefined;
+    const start = align?.horizontal === BlockHorizontalAlignment.ALIGN_START;
+    const center = align?.horizontal === BlockHorizontalAlignment.ALIGN_CENTER;
+    const end = align?.horizontal === BlockHorizontalAlignment.ALIGN_END;
+    const vnone = align === undefined || align.vertical === undefined;
+    const top = align?.vertical === BlockVerticalAlignment.ALIGN_TOP;
+    const middle = align?.vertical === BlockVerticalAlignment.ALIGN_MIDDLE;
+    const bottom = align?.vertical === BlockVerticalAlignment.ALIGN_BOTTOM;
+    return {
+        // Primary axis alignment
+        'justify-start': (start && hstack) || (top && vstack),
+        'justify-center': (center && hstack) || (middle && vstack),
+        'justify-end': (end && hstack) || (bottom && vstack),
+        // Alternate for ZStack
+        'justify-items-start': start && zstack,
+        'justify-items-center': center && zstack,
+        'justify-items-end': end && zstack,
+        // Cross-axis alignment
+        'items-start': (top && hstack) || (start && vstack),
+        'items-center': (middle && hstack) || (center && vstack),
+        'items-stretch': (vnone && hstack) || (hnone && vstack),
+        'items-end': (bottom && hstack) || (end && vstack),
+        // Alternate for ZStack
+        'content-start': top && zstack,
+        'content-center': middle && zstack,
+        'content-end': bottom && zstack,
+    };
+}
+export function backgroundStyle(background) {
+    return {
+        backgroundColor: findColor(background),
+    };
+}
+export function borderClass(border) {
+    const hasBorder = border !== undefined && border.width !== BlockBorderWidth.BORDER_WIDTH_NONE;
+    return {
+        'border-0': !hasBorder,
+        'border-solid': hasBorder,
+        'border-dx-thin': border?.width === BlockBorderWidth.BORDER_WIDTH_THIN,
+        'border-dx-thick': border?.width === BlockBorderWidth.BORDER_WIDTH_THICK,
+        'border-neutral-border': border !== undefined &&
+            border.width !== BlockBorderWidth.BORDER_WIDTH_NONE &&
+            border.color === undefined,
+    };
+}
+export function borderStyle(border) {
+    return {
+        borderColor: border?.color, // TODO: check CSS for color var and wrap in var(--color-${border.color}-background)
+    };
+}
+export function radiusClass(radius) {
+    return {
+        'rounded-none': radius === undefined || radius === BlockRadius.RADIUS_NONE,
+        'rounded-dx-sm': radius === BlockRadius.RADIUS_SMALL,
+        'rounded-dx-md': radius === BlockRadius.RADIUS_MEDIUM,
+        'rounded-dx-lg': radius === BlockRadius.RADIUS_LARGE,
+        'rounded-full': radius === BlockRadius.RADIUS_FULL,
+    };
+}
+export function textSizeClass(size) {
+    return {
+        'text-10': size === BlockTextSize.TEXT_SIZE_XSMALL,
+        'text-12': size === BlockTextSize.TEXT_SIZE_SMALL,
+        'text-14': size === undefined || size === BlockTextSize.TEXT_SIZE_MEDIUM,
+        'text-16': size === BlockTextSize.TEXT_SIZE_LARGE,
+        'text-18': size === BlockTextSize.TEXT_SIZE_XLARGE,
+        'text-24': size === BlockTextSize.TEXT_SIZE_XXLARGE,
+    };
+}
+export function textAlignClass(alignment) {
+    return {
+        'text-start': alignment === undefined ||
+            alignment.horizontal === undefined ||
+            alignment.horizontal === BlockHorizontalAlignment.ALIGN_START,
+        'text-center': alignment?.horizontal === BlockHorizontalAlignment.ALIGN_CENTER,
+        'text-end': alignment?.horizontal === BlockHorizontalAlignment.ALIGN_END,
+    };
+}
+export function textWeightClass(weight) {
+    return {
+        'font-normal': weight === undefined || weight === BlockTextWeight.TEXT_WEIGHT_REGULAR,
+        'font-semibold': weight === BlockTextWeight.TEXT_WEIGHT_BOLD,
+    };
+}
+export function textOutlineClass(outline, _textColor) {
+    const thin = outline === BlockTextOutline.TEXT_OUTLINE_THIN;
+    const thick = outline === BlockTextOutline.TEXT_OUTLINE_THICK;
+    // TODO: hook into host lit element to determine final color and apply bright/dark outline
+    return {
+        'text-outline-thin-bright': thin,
+        'text-outline-thick-bright': thick,
+    };
+}
+export function colorStyle(color) {
+    return {
+        color: findColor(color),
+    };
+}
+export function spacerSizeClass(size, stackDirection) {
+    const xsmall = size === BlockSpacerSize.SPACER_XSMALL;
+    const small = size === BlockSpacerSize.SPACER_SMALL;
+    const medium = size === BlockSpacerSize.SPACER_MEDIUM;
+    const large = size === BlockSpacerSize.SPACER_LARGE;
+    const vstack = stackDirection === BlockStackDirection.STACK_VERTICAL;
+    const hstack = stackDirection === BlockStackDirection.STACK_HORIZONTAL;
+    return {
+        'w-2xs': xsmall && hstack,
+        'w-xs': small && hstack,
+        'w-md': medium && hstack,
+        'w-xl': large && hstack,
+        'h-2xs': xsmall && vstack,
+        'h-xs': small && vstack,
+        'h-md': medium && vstack,
+        'h-xl': large && vstack,
+    };
+}
+export function resizeModeClass(resizeMode) {
+    return {
+        'object-contain': resizeMode === undefined || resizeMode === BlockImageResizeMode.IMAGE_RESIZE_FIT,
+        'object-none': resizeMode === BlockImageResizeMode.IMAGE_RESIZE_NONE,
+        'object-cover': resizeMode === BlockImageResizeMode.IMAGE_RESIZE_COVER,
+        'object-fill': resizeMode === BlockImageResizeMode.IMAGE_RESIZE_FILL,
+        'object-scale-down': resizeMode === BlockImageResizeMode.IMAGE_RESIZE_SCALE_DOWN,
+    };
+}
+export function iconSizeClass(size) {
+    return {
+        'w-sm h-sm': size === BlockIconSize.ICON_SIZE_XSMALL,
+        'w-md h-md': size === BlockIconSize.ICON_SIZE_SMALL,
+        'w-[1.25rem] h-[1.25rem]': size === BlockIconSize.ICON_SIZE_MEDIUM,
+        'w-lg h-lg': size === BlockIconSize.ICON_SIZE_LARGE,
+    };
+}
+export function avatarSizeClass(size) {
+    return {
+        'aspect-square': true,
+        'w-md': size === BlockAvatarSize.AVATAR_SIZE_XXSMALL,
+        'w-lg': size === BlockAvatarSize.AVATAR_SIZE_XSMALL,
+        'w-xl': size === undefined || size === BlockAvatarSize.AVATAR_SIZE_SMALL,
+        'w-[2.5rem]': size === BlockAvatarSize.AVATAR_SIZE_MEDIUM,
+        'w-2xl': size === BlockAvatarSize.AVATAR_SIZE_LARGE,
+        'w-[3.5rem]': size === BlockAvatarSize.AVATAR_SIZE_XLARGE,
+        'w-3xl': size === BlockAvatarSize.AVATAR_SIZE_XXLARGE,
+        'w-[5.5rem]': size === BlockAvatarSize.AVATAR_SIZE_XXXLARGE,
+    };
+}
+export function facingClass(facing) {
+    return {
+        'scale-x-100': facing === undefined || facing === BlockAvatarFacing.AVATAR_FACING_RIGHT,
+        '-scale-x-100': facing === BlockAvatarFacing.AVATAR_FACING_LEFT,
+    };
+}
+export function fullSnooSizeClass(size) {
+    const xsmall = size === BlockFullSnooSize.FULLSNOO_XSMALL;
+    const small = size === BlockFullSnooSize.FULLSNOO_SMALL;
+    const medium = size === BlockFullSnooSize.FULLSNOO_MEDIUM;
+    const large = size === BlockFullSnooSize.FULLSNOO_LARGE;
+    const xlarge = size === BlockFullSnooSize.FULLSNOO_XLARGE;
+    const xxlarge = size === BlockFullSnooSize.FULLSNOO_XXLARGE;
+    return {
+        'aspect-square': true,
+        'w-2xl': xsmall,
+        'w-3xl': size === undefined || small,
+        'w-[5.5rem]': medium,
+        'w-[9rem]': large,
+        'w-[12rem]': xlarge,
+        'w-[20rem]': xxlarge,
+    };
+}
+export function buttonAppearance(appearance) {
+    let buttonAppearance;
+    switch (appearance) {
+        case BlockButtonAppearance.BUTTON_APPEARANCE_PRIMARY:
+            buttonAppearance = 'primary';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_PLAIN:
+            buttonAppearance = 'plain';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_BORDERED:
+            buttonAppearance = 'bordered';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_MEDIA:
+            buttonAppearance = 'media';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_SUCCESS:
+            buttonAppearance = 'success';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_DESTRUCTIVE:
+            buttonAppearance = 'destructive';
+            break;
+        case BlockButtonAppearance.BUTTON_APPEARANCE_SECONDARY:
+        default:
+            buttonAppearance = 'secondary';
+            break;
+    }
+    return buttonAppearance;
+}
+export function buttonSize(size) {
+    let buttonSize;
+    switch (size) {
+        case BlockButtonSize.BUTTON_SIZE_SMALL:
+            buttonSize = ButtonSize.Small;
+            break;
+        case BlockButtonSize.BUTTON_SIZE_LARGE:
+            buttonSize = ButtonSize.Large;
+            break;
+        case BlockButtonSize.BUTTON_SIZE_MEDIUM:
+        default:
+            buttonSize = ButtonSize.Medium;
+            break;
+    }
+    return buttonSize;
+}
+export function onClickAction(block, ctx) {
+    const clickAction = block.actions.find((a) => a.type === BlockActionType.ACTION_CLICK);
+    if (clickAction) {
+        return () => {
+            if (ctx.onAction) {
+                ctx.onAction(clickAction);
+            }
+        };
+    }
+}

package/blocks/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference lib="dom" />
+export * from './templates/index.js';
+//# sourceMappingURL=index.d.ts.map

package/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":";AAEA,cAAc,sBAAsB,CAAC"}

package/blocks/index.js

@@ -0,0 +1,2 @@
+/// <reference lib="dom"/>
+export * from './templates/index.js';

package/blocks/templates/index.d.ts

@@ -0,0 +1,13 @@
+import { classMap as clientClassMap } from 'lit/directives/class-map.js';
+import { TemplateLike, UnsafeString } from '@reddit/baseplate/html.js';
+import { Block, BlockAction, BlockRenderResponse, BlockStackDirection } from '@devvit/protos';
+import { ClassInfo } from 'lit/directives/class-map.js';
+export interface RenderContext {
+    blockRender?: BlockRenderResponse | undefined;
+    state?: unknown | undefined;
+    stackDirection: BlockStackDirection;
+    onAction?: ((action: BlockAction) => void) | undefined;
+}
+export declare function renderBlocks(block: Block, context?: Partial<RenderContext>): TemplateLike;
+export declare function classMap(classInfo: ClassInfo): UnsafeString | ReturnType<typeof clientClassMap>;
+//# sourceMappingURL=index.d.ts.map

package/blocks/templates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAW,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EACL,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,cAAc,EAAE,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,YAAY,CAsB7F;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAe/F"}

package/blocks/templates/index.js

@@ -0,0 +1,37 @@
+import { classMap as clientClassMap } from 'lit/directives/class-map.js';
+import { nothing } from '@reddit/baseplate/html.js';
+import { BlockStackDirection, BlockType, } from '@devvit/protos';
+import { renderBlock } from './renderBlock.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+export function renderBlocks(block, context = {}) {
+    if (block.type !== BlockType.BLOCK_ROOT) {
+        console.error('Invalid root block');
+        return nothing;
+    }
+    return renderBlock({
+        type: BlockType.BLOCK_STACK,
+        config: {
+            stackConfig: {
+                direction: BlockStackDirection.STACK_VERTICAL,
+                children: block.config?.rootConfig?.children ?? [],
+            },
+        },
+        actions: [],
+    }, {
+        ...context,
+        stackDirection: BlockStackDirection.UNRECOGNIZED,
+    });
+}
+export function classMap(classInfo) {
+    const { getType } = getTemplateRenderingStrategy();
+    if (getType() === 'client') {
+        return clientClassMap(classInfo);
+    }
+    let result = '';
+    for (const name in classInfo) {
+        if (classInfo[name]) {
+            result += `${name} `;
+        }
+    }
+    return result;
+}

package/blocks/templates/renderAnimationBlock.d.ts

@@ -0,0 +1,5 @@
+import { Block } from '@devvit/protos';
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { RenderContext } from './index.js';
+export declare function renderAnimationBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderAnimationBlock.d.ts.map

package/blocks/templates/renderAnimationBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BnF"}

package/blocks/templates/renderAnimationBlock.js

@@ -0,0 +1,26 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { onClickAction, sizingClass, sizingStyle } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderAnimationBlock(block, ctx) {
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (!block.config?.animationConfig) {
+        console.error('Invalid block: Animation missing AnimationConfig');
+        return nothing;
+    }
+    const { url, type } = block.config.animationConfig;
+    const classes = {
+        ...sizingClass(block.size),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `<devvit-animation-player
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    src="${url}"
+    type="${type}"
+    @click="${ifDefined(onClick)}"
+  ></devvit-animation-player>`;
+}

package/blocks/templates/renderAvatarBlock.d.ts

@@ -0,0 +1,5 @@
+import { Block } from '@devvit/protos';
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { RenderContext } from './index.js';
+export declare function renderAvatarBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderAvatarBlock.d.ts.map

package/blocks/templates/renderAvatarBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderAvatarBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAUlE,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BhF"}

package/blocks/templates/renderAvatarBlock.js

@@ -0,0 +1,26 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { avatarSizeClass, facingClass, onClickAction, sizingClass, sizingStyle, } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderAvatarBlock(block, ctx) {
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (!block.config?.avatarConfig) {
+        console.error('Invalid block: Avatar missing AvatarConfig');
+        return nothing;
+    }
+    const { thingId, facing, size, background } = block.config.avatarConfig;
+    const classes = {
+        ...sizingClass(block.size),
+        ...avatarSizeClass(size),
+        ...facingClass(facing),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `<div
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    @click="${ifDefined(onClick)}"
+  ></div>`;
+}

package/blocks/templates/renderBlock.d.ts

@@ -0,0 +1,5 @@
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { Block } from '@devvit/protos';
+import { RenderContext } from './index.js';
+export declare function renderBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderBlock.d.ts.map

package/blocks/templates/renderBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,KAAK,EAAa,MAAM,gBAAgB,CAAC;AAYlD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0B1E"}

package/blocks/templates/renderBlock.js

@@ -0,0 +1,39 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { BlockType } from '@devvit/protos';
+import { renderStackBlock } from './renderStackBlock.js';
+import { renderSpacerBlock } from './renderSpacerBlock.js';
+import { renderTextBlock } from './renderTextBlock.js';
+import { renderImageBlock } from './renderImageBlock.js';
+import { renderIconBlock } from './renderIconBlock.js';
+import { renderButtonBlock } from './renderButtonBlock.js';
+import { renderWebViewBlock } from './renderWebViewBlock.js';
+import { renderAnimationBlock } from './renderAnimationBlock.js';
+import { renderAvatarBlock } from './renderAvatarBlock.js';
+import { renderFullSnooBlock } from './renderFullSnooBlock.js';
+export function renderBlock(block, ctx) {
+    switch (block.type) {
+        case BlockType.BLOCK_STACK:
+            return renderStackBlock(block, ctx);
+        case BlockType.BLOCK_SPACER:
+            return renderSpacerBlock(block, ctx);
+        case BlockType.BLOCK_TEXT:
+            return renderTextBlock(block, ctx);
+        case BlockType.BLOCK_IMAGE:
+            return renderImageBlock(block, ctx);
+        case BlockType.BLOCK_ICON:
+            return renderIconBlock(block, ctx);
+        case BlockType.BLOCK_BUTTON:
+            return renderButtonBlock(block, ctx);
+        case BlockType.BLOCK_WEBVIEW:
+            return renderWebViewBlock(block, ctx);
+        case BlockType.BLOCK_ANIMATION:
+            return renderAnimationBlock(block, ctx);
+        case BlockType.BLOCK_AVATAR:
+            return renderAvatarBlock(block, ctx);
+        case BlockType.BLOCK_FULLSNOO:
+            return renderFullSnooBlock(block, ctx);
+        case BlockType.UNRECOGNIZED:
+        default:
+            return nothing;
+    }
+}

package/blocks/templates/renderButtonBlock.d.ts

@@ -0,0 +1,5 @@
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { Block } from '@devvit/protos';
+import { RenderContext } from './index.js';
+export declare function renderButtonBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderButtonBlock.d.ts.map

package/blocks/templates/renderButtonBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKzD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAyBhF"}

package/blocks/templates/renderButtonBlock.js

@@ -0,0 +1,26 @@
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { button } from '@reddit/faceplate-ui/templates/button.js';
+import { styleMap } from '@reddit/faceplate-ui/templateUtils/styleMap.js';
+import { backgroundStyle, buttonAppearance, buttonSize, colorStyle, onClickAction, } from '../attributes.js';
+export function renderButtonBlock(block, ctx) {
+    const { html, ifDefined } = getTemplateRenderingStrategy();
+    // let buttonIcon = block.config?.buttonConfig?.icon;
+    const disabled = block.config?.buttonConfig?.disabled === true;
+    const styles = {
+        ...colorStyle(block.config?.buttonConfig?.textColor),
+        ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `${button({
+        size: buttonSize(block.config?.buttonConfig?.buttonSize),
+        appearance: buttonAppearance(block.config?.buttonConfig?.buttonAppearance),
+        // leadingIcon: findIcon(buttonIcon),
+        children: ifDefined(block.config?.buttonConfig?.text),
+        attributes: {
+            disabled,
+            // convert from StyleInfo to CSSStyleDeclaration
+            style: styleMap(styles).string,
+            onclick: onClick ?? null,
+        },
+    })}`;
+}

package/blocks/templates/renderFullSnooBlock.d.ts

@@ -0,0 +1,5 @@
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { Block } from '@devvit/protos';
+import { RenderContext } from './index.js';
+export declare function renderFullSnooBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderFullSnooBlock.d.ts.map

package/blocks/templates/renderFullSnooBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderFullSnooBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0BlF"}

package/blocks/templates/renderFullSnooBlock.js

@@ -0,0 +1,26 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { facingClass, fullSnooSizeClass, onClickAction, sizingClass, sizingStyle, } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderFullSnooBlock(block, ctx) {
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (!block.config?.fullsnooConfig) {
+        console.error('Invalid block: FullSnoo missing FullSnooConfig');
+        return nothing;
+    }
+    const { userId, size, facing } = block.config.fullsnooConfig;
+    const classes = {
+        ...sizingClass(block.size),
+        ...fullSnooSizeClass(size),
+        ...facingClass(facing),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `<div
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    @click="${ifDefined(onClick)}"
+  ></div>`;
+}

package/blocks/templates/renderIconBlock.d.ts

@@ -0,0 +1,5 @@
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { Block } from '@devvit/protos';
+import { RenderContext } from './index.js';
+export declare function renderIconBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderIconBlock.d.ts.map

package/blocks/templates/renderIconBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmB9E"}

package/blocks/templates/renderIconBlock.js

@@ -0,0 +1,17 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { iconSizeClass, onClickAction } from '../attributes.js';
+export function renderIconBlock(block, ctx) {
+    const { html } = getTemplateRenderingStrategy();
+    if (!block.config?.iconConfig) {
+        console.error('Invalid block: Icon missing IconConfig');
+        return nothing;
+    }
+    const { icon, size, color } = block.config.iconConfig;
+    // adopt `icons-all.ts` from faceplate-ui storybook
+    const classes = {
+        ...iconSizeClass(size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `<div></div>`;
+}

package/blocks/templates/renderImageBlock.d.ts

@@ -0,0 +1,5 @@
+import { TemplateLike } from '@reddit/baseplate/html.js';
+import { Block } from '@devvit/protos';
+import { RenderContext } from './index.js';
+export declare function renderImageBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderImageBlock.d.ts.map

package/blocks/templates/renderImageBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+B/E"}