@devvit/ui-renderer 0.8.11 → 0.9.1

package/blocks/templates/renderIconBlock.js

@@ -0,0 +1,21 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { defaultClasses, iconSizeClass, onClickAction, sizingClass, stackChildClass, } from '../attributes.js';
+import { classMap } from './index.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 = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+        ...iconSizeClass(size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `<div class="${classMap(classes)}" data-debug-block-type="icon"></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;AAUvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkC/E"}

package/blocks/templates/renderImageBlock.js

@@ -0,0 +1,34 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { defaultClasses, onClickAction, resizeModeClass, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderImageBlock(block, ctx) {
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (!block.config?.imageConfig) {
+        console.error('Invalid block: Image missing ImageConfig');
+        return nothing;
+    }
+    const { width, height, url, description, resizeMode } = block.config.imageConfig;
+    const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+        ...resizeModeClass(resizeMode),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    const onClick = onClickAction(block, ctx);
+    return html `
+    <img
+      src="${url}"
+      width="${width}"
+      height="${height}"
+      alt="${description}"
+      class="${classMap(classes)}"
+      style="${styleMap(styles)}"
+      @click="${ifDefined(onClick)}"
+      data-debug-block-type="image"
+    />
+  `;
+}

package/blocks/templates/renderSpacerBlock.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 renderSpacerBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderSpacerBlock.d.ts.map

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

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

package/blocks/templates/renderSpacerBlock.js

@@ -0,0 +1,20 @@
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { defaultClasses, sizingClass, sizingStyle, spacerSizeClass, stackChildClass, } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderSpacerBlock(block, ctx) {
+    const { html, styleMap } = getTemplateRenderingStrategy();
+    const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+        ...spacerSizeClass(block.config?.spacerConfig?.size, ctx.stackDirection),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    return html `<div
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    data-debug-block-type="spacer"
+  ></div>`;
+}

package/blocks/templates/renderStackBlock.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 renderStackBlock(block: Block, ctx?: RenderContext): TemplateLike;
+//# sourceMappingURL=renderStackBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAkB5D,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,GAAE,aAAoE,GACxE,YAAY,CAoEd"}

package/blocks/templates/renderStackBlock.js

@@ -0,0 +1,57 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { BlockStackDirection } from '@devvit/protos';
+import { alignmentClass, backgroundStyle, borderClass, borderStyle, defaultClasses, gapClass, onClickAction, paddingClass, radiusClass, sizingClass, sizingStyle, stackChildClass, stackDirectionClass, } from '../attributes.js';
+import { renderBlock } from './renderBlock.js';
+import { classMap } from './index.js';
+export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }) {
+    const { html, repeat, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (block.config?.stackConfig === undefined) {
+        console.error('Invalid block: Stack missing StackConfig');
+        return nothing;
+    }
+    const { children, direction, padding, gap, alignment, reverse, backgroundColor, border, cornerRadius, } = block.config.stackConfig;
+    const classes = {
+        ...defaultClasses(block.type),
+        ...stackDirectionClass(direction, reverse),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+        ...paddingClass(padding),
+        ...gapClass(gap),
+        ...alignmentClass(direction, alignment),
+        ...borderClass(border),
+        ...radiusClass(cornerRadius),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+        ...backgroundStyle(backgroundColor),
+        ...borderStyle(border),
+    };
+    const newCtx = {
+        ...ctx,
+        stackDirection: direction,
+    };
+    const onClick = onClickAction(block, ctx);
+    let blockType = '';
+    switch (direction) {
+        case BlockStackDirection.STACK_DEPTH:
+            blockType = 'zstack';
+            break;
+        case BlockStackDirection.STACK_VERTICAL:
+            blockType = 'vstack';
+            break;
+        case BlockStackDirection.STACK_HORIZONTAL:
+            blockType = 'hstack';
+            break;
+    }
+    return html `
+    <div
+      class="${classMap(classes)}"
+      style="${styleMap(styles)}"
+      @click="${ifDefined(onClick)}"
+      data-debug-block-type="${blockType}"
+    >
+      ${repeat(children, (block) => renderBlock(block, newCtx))}
+    </div>
+  `;
+}

package/blocks/templates/renderTextBlock.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 renderTextBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderTextBlock.d.ts.map

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

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

package/blocks/templates/renderTextBlock.js

@@ -0,0 +1,62 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { BlockTextSize, BlockTextStyle, BlockTextWeight } from '@devvit/protos';
+import { colorStyle, defaultClasses, onClickAction, sizingClass, stackChildClass, textAlignClass, textOutlineClass, textSizeClass, textWeightClass, } from '../attributes.js';
+import { classMap } from './index.js';
+export function renderTextBlock(block, ctx) {
+    const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
+    if (!block.config?.textConfig) {
+        console.error('Invalid block: Text missing TextConfig');
+        return nothing;
+    }
+    const { text, color, size, alignment, weight, style, outline } = block.config.textConfig;
+    let textColor = 'neutral-content';
+    let baseStyle = {};
+    switch (style) {
+        case BlockTextStyle.TEXT_STYLE_METADATA:
+            textColor = 'neutral-content-weak';
+            baseStyle = {
+                ...textSizeClass(BlockTextSize.TEXT_SIZE_SMALL),
+                ...textWeightClass(BlockTextWeight.TEXT_WEIGHT_REGULAR),
+            };
+            break;
+        case BlockTextStyle.TEXT_STYLE_BODY:
+            textColor = 'neutral-content';
+            baseStyle = {
+                ...textSizeClass(BlockTextSize.TEXT_SIZE_MEDIUM),
+                ...textWeightClass(BlockTextWeight.TEXT_WEIGHT_REGULAR),
+            };
+            break;
+        case BlockTextStyle.TEXT_STYLE_HEADING:
+            textColor = 'neutral-content-strong';
+            baseStyle = {
+                ...textSizeClass(BlockTextSize.TEXT_SIZE_LARGE),
+                ...textWeightClass(BlockTextWeight.TEXT_WEIGHT_BOLD),
+            };
+            break;
+    }
+    textColor = color ?? textColor;
+    const styles = {
+        ...colorStyle(textColor),
+    };
+    const classes = {
+        ...defaultClasses(block.type),
+        ...baseStyle,
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+        ...textSizeClass(size),
+        ...textAlignClass(alignment),
+        ...textWeightClass(weight),
+    };
+    if (outline !== undefined) {
+        Object.assign(classes, textOutlineClass(outline, textColor));
+    }
+    const onClick = onClickAction(block, ctx);
+    return html `<span
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    @click="${ifDefined(onClick)}"
+    data-debug-block-type="text"
+    >${text}</span
+  >`;
+}

package/blocks/templates/renderWebViewBlock.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 renderWebViewBlock(block: Block, ctx: RenderContext): TemplateLike;
+//# sourceMappingURL=renderWebViewBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderWebViewBlock.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;AASrD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmCjF"}

package/blocks/templates/renderWebViewBlock.js

@@ -0,0 +1,39 @@
+import { nothing } from '@reddit/baseplate/html.js';
+import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
+import { defaultClasses, sizingClass, sizingStyle, stackChildClass } from '../attributes.js';
+import { classMap } from './index.js';
+const iframeRefs = {};
+const postMessage = (src, ctx) => {
+    const iframe = iframeRefs[src];
+    iframe?.contentWindow?.postMessage(ctx, '*');
+};
+export function renderWebViewBlock(block, ctx) {
+    const { html, styleMap } = getTemplateRenderingStrategy();
+    if (!block.config?.webviewConfig) {
+        console.error('Invalid block: WebView missing WebViewConfig');
+        return nothing;
+    }
+    const { url } = block.config.webviewConfig;
+    const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(block.size),
+    };
+    const styles = {
+        ...sizingStyle(block.size),
+    };
+    const onLoad = (evt) => {
+        iframeRefs[url] = evt.target;
+        postMessage(url, ctx);
+    };
+    const saveRef = (el) => (iframeRefs[url] = el);
+    return html `<iframe
+    src="${url}"
+    sandbox="allow-scripts"
+    class="${classMap(classes)}"
+    style="${styleMap(styles)}"
+    @load="${onLoad}"
+    ref="${saveRef}"
+    data-debug-block-type="webview"
+  ></iframe>`;
+}

package/client/assets/snooBlocks.d.ts

@@ -0,0 +1,2 @@
+export declare const snooBlocks: import("lit-html").TemplateResult<2>;
+//# sourceMappingURL=snooBlocks.d.ts.map

package/client/assets/snooBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snooBlocks.d.ts","sourceRoot":"","sources":["../../../src/client/assets/snooBlocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,sCAAy37K,CAAC"}