@devvit/public-api 0.11.0-next-2024-07-09-907b3322a.0 → 0.11.0-next-2024-07-09-2412ac001.0

package/devvit/internals/blocks/transformContext.js

@@ -0,0 +1,108 @@
+import { BlockSizeUnit, BlockStackDirection } from '@devvit/protos';
+// eslint-disable-next-line security/detect-unsafe-regex
+const SIZE_UNIT_REGEX = /^(\d+(?:\.\d+)?)(px|%)?$/;
+export const makeDimensionValue = (size, maxDimension) => {
+    if (size == null)
+        return undefined;
+    const pxValue = stackDimensionToPx(size, maxDimension);
+    return pxValue != null ? { value: pxValue, unit: BlockSizeUnit.SIZE_UNIT_PIXELS } : undefined;
+};
+export const calculateMaxDimensions = (props, parentMaxDimensions, stackDirection, childrenCount) => {
+    if (!props)
+        return parentMaxDimensions;
+    const paddingOffset = stackPaddingToPx(props.padding, parentMaxDimensions.fontScale) * 2;
+    const borderOffset = stackBorderToPx(props.border, props.borderColor) * 2;
+    const gapSize = stackGapToPx(props.gap);
+    // Calculate height
+    let childMaxHeight = parentMaxDimensions.height;
+    const hasHeightDefined = props.height != null || props.minHeight != null || props.maxHeight != null;
+    if (hasHeightDefined) {
+        childMaxHeight = getMaxForDimension(props.height, props.minHeight, props.maxHeight, parentMaxDimensions.height);
+    }
+    let heightOffset = paddingOffset + borderOffset;
+    if (stackDirection === BlockStackDirection.STACK_VERTICAL && gapSize && childrenCount > 0) {
+        heightOffset = heightOffset + gapSize * (childrenCount - 1);
+    }
+    // Calculate width
+    let childMaxWidth = parentMaxDimensions.width;
+    const hasWidthDefined = props.width != null || props.minWidth != null || props.maxWidth != null;
+    if (hasWidthDefined) {
+        childMaxWidth = getMaxForDimension(props.width, props.minWidth, props.maxWidth, parentMaxDimensions.width);
+    }
+    let widthOffset = paddingOffset + borderOffset;
+    if (stackDirection === BlockStackDirection.STACK_HORIZONTAL && gapSize && childrenCount > 0) {
+        widthOffset = widthOffset + gapSize * (childrenCount - 1);
+    }
+    return {
+        ...parentMaxDimensions,
+        height: childMaxHeight - heightOffset,
+        width: childMaxWidth - widthOffset,
+    };
+};
+/* As a result of DX-6656, all percent dimension values will be converted to px values. */
+const stackDimensionToPx = (value, maxDimension) => {
+    if (value == null)
+        return undefined;
+    if (typeof value === 'number') {
+        return (maxDimension * value) / 100;
+    }
+    else {
+        const parts = value.match(SIZE_UNIT_REGEX);
+        if (parts == null)
+            return undefined;
+        const dimensions = Number.parseFloat(parts[1]);
+        if (parts?.at(2) === '%') {
+            return (maxDimension * dimensions) / 100;
+        }
+        return dimensions;
+    }
+};
+const stackPaddingToPx = (padding, fontScale = 1 // fontScale is web only and refers to window browser font scaling, default to 1
+) => {
+    switch (padding) {
+        case 'xsmall':
+            return 4 * fontScale;
+        case 'small':
+            return 8 * fontScale;
+        case 'medium':
+            return 16 * fontScale;
+        case 'large':
+            return 32 * fontScale;
+        default:
+            return 0;
+    }
+};
+const stackGapToPx = (gap) => {
+    switch (gap) {
+        case 'small':
+            return 8;
+        case 'medium':
+            return 16;
+        case 'large':
+            return 32;
+    }
+    return 0;
+};
+const stackBorderToPx = (borderWidth, color) => {
+    if (!borderWidth && !color)
+        return 0;
+    switch (borderWidth) {
+        case 'none':
+            return 0;
+        case 'thin':
+            return 1;
+        case 'thick':
+            return 2;
+        default:
+            // Default to a thin border when a color was set, but no borderWidth.
+            return 1;
+    }
+};
+const getMaxForDimension = (value, min, max, maxDimension) => {
+    const pxValue = stackDimensionToPx(value, maxDimension) || 0;
+    const pxMin = stackDimensionToPx(min, maxDimension) || 0;
+    const pxMax = stackDimensionToPx(max, maxDimension) || 0;
+    const upperBound = Math.min(pxMax, pxValue);
+    const lowerBound = Math.max(pxMin, pxValue);
+    return Math.max(upperBound, lowerBound);
+};

package/devvit/internals/blocks/transformContext.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformContext.test.d.ts","sourceRoot":"","sources":["../../../../src/devvit/internals/blocks/transformContext.test.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,+BAA+B"}

package/meta.json

@@ -11783,6 +11783,11 @@
       ],
       "format": "esm"
     },
+    "../shared-types/dist/dimensions.js": {
+      "bytes": 108,
+      "imports": [],
+      "format": "esm"
+    },
     "src/apis/ui/helpers/getEffectsFromUIClient.ts": {
       "bytes": 368,
       "imports": [],
@@ -11809,8 +11814,19 @@
       ],
       "format": "esm"
     },
+    "src/devvit/internals/blocks/transformContext.ts": {
+      "bytes": 4619,
+      "imports": [
+        {
+          "path": "../protos/dist/index.js",
+          "kind": "import-statement",
+          "original": "@devvit/protos"
+        }
+      ],
+      "format": "esm"
+    },
     "src/devvit/internals/blocks/BlocksTransformer.ts": {
-      "bytes": 28076,
+      "bytes": 28949,
       "imports": [
         {
           "path": "../protos/dist/index.js",
@@ -11827,6 +11843,11 @@
           "kind": "import-statement",
           "original": "../helpers/color.js"
         },
+        {
+          "path": "src/devvit/internals/blocks/transformContext.ts",
+          "kind": "import-statement",
+          "original": "./transformContext.js"
+        },
         {
           "path": "<runtime>",
           "kind": "import-statement",
@@ -11836,13 +11857,18 @@
       "format": "esm"
     },
     "src/devvit/internals/blocks/BlocksReconciler.ts": {
-      "bytes": 19366,
+      "bytes": 19878,
       "imports": [
         {
           "path": "../protos/dist/index.js",
           "kind": "import-statement",
           "original": "@devvit/protos"
         },
+        {
+          "path": "../shared-types/dist/dimensions.js",
+          "kind": "import-statement",
+          "original": "@devvit/shared-types/dimensions.js"
+        },
         {
           "path": "../shared-types/dist/Header.js",
           "kind": "import-statement",
@@ -12465,13 +12491,18 @@
       "format": "esm"
     },
     "src/devvit/internals/blocks/handler/BlocksHandler.ts": {
-      "bytes": 18262,
+      "bytes": 18665,
       "imports": [
         {
           "path": "@devvit/protos",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "../shared-types/dist/dimensions.js",
+          "kind": "import-statement",
+          "original": "@devvit/shared-types/dimensions.js"
+        },
         {
           "path": "../../node_modules/lodash.isequal/index.js",
           "kind": "import-statement",
@@ -14353,6 +14384,9 @@
         "src/devvit/internals/app-settings.ts": {
           "bytesInOutput": 614
         },
+        "../shared-types/dist/dimensions.js": {
+          "bytesInOutput": 98
+        },
         "src/apis/ui/helpers/getEffectsFromUIClient.ts": {
           "bytesInOutput": 69
         },
@@ -14365,11 +14399,14 @@
         "src/devvit/internals/helpers/color.ts": {
           "bytesInOutput": 5194
         },
+        "src/devvit/internals/blocks/transformContext.ts": {
+          "bytesInOutput": 3618
+        },
         "src/devvit/internals/blocks/BlocksTransformer.ts": {
-          "bytesInOutput": 22653
+          "bytesInOutput": 23029
         },
         "src/devvit/internals/blocks/BlocksReconciler.ts": {
-          "bytesInOutput": 14179
+          "bytesInOutput": 14530
         },
         "src/devvit/internals/custom-post.ts": {
           "bytesInOutput": 697
@@ -14396,7 +14433,7 @@
           "bytesInOutput": 3085
         },
         "src/devvit/internals/blocks/handler/BlocksHandler.ts": {
-          "bytesInOutput": 15311
+          "bytesInOutput": 15750
         },
         "../shared-types/dist/useForm.js": {
           "bytesInOutput": 162
@@ -14519,7 +14556,7 @@
           "bytesInOutput": 4450
         }
       },
-      "bytes": 14973768
+      "bytes": 14991189
     }
   }
 }

package/meta.min.json

@@ -3071,6 +3071,11 @@
       ],
       "format": "esm"
     },
+    "../shared-types/dist/dimensions.js": {
+      "bytes": 108,
+      "imports": [],
+      "format": "esm"
+    },
     "src/apis/ui/helpers/getEffectsFromUIClient.ts": {
       "bytes": 368,
       "imports": [],
@@ -3097,8 +3102,19 @@
       ],
       "format": "esm"
     },
+    "src/devvit/internals/blocks/transformContext.ts": {
+      "bytes": 4619,
+      "imports": [
+        {
+          "path": "@devvit/protos",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/devvit/internals/blocks/BlocksTransformer.ts": {
-      "bytes": 28076,
+      "bytes": 28949,
       "imports": [
         {
           "path": "@devvit/protos",
@@ -3115,6 +3131,11 @@
           "kind": "import-statement",
           "original": "../helpers/color.js"
         },
+        {
+          "path": "src/devvit/internals/blocks/transformContext.ts",
+          "kind": "import-statement",
+          "original": "./transformContext.js"
+        },
         {
           "path": "<runtime>",
           "kind": "import-statement",
@@ -3124,13 +3145,18 @@
       "format": "esm"
     },
     "src/devvit/internals/blocks/BlocksReconciler.ts": {
-      "bytes": 19366,
+      "bytes": 19878,
       "imports": [
         {
           "path": "@devvit/protos",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "../shared-types/dist/dimensions.js",
+          "kind": "import-statement",
+          "original": "@devvit/shared-types/dimensions.js"
+        },
         {
           "path": "../shared-types/dist/Header.js",
           "kind": "import-statement",
@@ -3753,13 +3779,18 @@
       "format": "esm"
     },
     "src/devvit/internals/blocks/handler/BlocksHandler.ts": {
-      "bytes": 18262,
+      "bytes": 18665,
       "imports": [
         {
           "path": "@devvit/protos",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "../shared-types/dist/dimensions.js",
+          "kind": "import-statement",
+          "original": "@devvit/shared-types/dimensions.js"
+        },
         {
           "path": "../../node_modules/lodash.isequal/index.js",
           "kind": "import-statement",
@@ -4689,7 +4720,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1168831
+      "bytes": 1178681
     },
     "dist/public-api.min.js": {
       "imports": [
@@ -4798,6 +4829,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@devvit/protos",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@devvit/protos",
           "kind": "import-statement",
@@ -5326,7 +5362,10 @@
           "bytesInOutput": 350
         },
         "src/devvit/internals/blocks/BlocksReconciler.ts": {
-          "bytesInOutput": 7153
+          "bytesInOutput": 7323
+        },
+        "../shared-types/dist/dimensions.js": {
+          "bytesInOutput": 50
         },
         "src/apis/ui/helpers/getEffectsFromUIClient.ts": {
           "bytesInOutput": 34
@@ -5335,7 +5374,7 @@
           "bytesInOutput": 101
         },
         "src/devvit/internals/blocks/BlocksTransformer.ts": {
-          "bytesInOutput": 12253
+          "bytesInOutput": 11875
         },
         "src/devvit/internals/semanticColors.ts": {
           "bytesInOutput": 11055
@@ -5343,6 +5382,9 @@
         "src/devvit/internals/helpers/color.ts": {
           "bytesInOutput": 3463
         },
+        "src/devvit/internals/blocks/transformContext.ts": {
+          "bytesInOutput": 1319
+        },
         "src/devvit/internals/installation-settings.ts": {
           "bytesInOutput": 401
         },
@@ -5368,7 +5410,7 @@
           "bytesInOutput": 260
         },
         "src/devvit/internals/blocks/handler/BlocksHandler.ts": {
-          "bytesInOutput": 6990
+          "bytesInOutput": 7130
         },
         "src/devvit/internals/blocks/handler/UIClient.ts": {
           "bytesInOutput": 974
@@ -5485,7 +5527,7 @@
           "bytesInOutput": 2135
         }
       },
-      "bytes": 249359
+      "bytes": 250660
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/public-api",
-  "version": "0.11.0-next-2024-07-09-907b3322a.0",
+  "version": "0.11.0-next-2024-07-09-2412ac001.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -30,8 +30,8 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.11.0-next-2024-07-09-907b3322a.0",
-    "@devvit/shared-types": "0.11.0-next-2024-07-09-907b3322a.0",
+    "@devvit/protos": "0.11.0-next-2024-07-09-2412ac001.0",
+    "@devvit/shared-types": "0.11.0-next-2024-07-09-2412ac001.0",
     "base64-js": "1.5.1",
     "clone-deep": "4.0.1",
     "core-js": "3.27.2",
@@ -39,9 +39,9 @@
   },
   "devDependencies": {
     "@ampproject/filesize": "4.3.0",
-    "@devvit/eslint-config": "0.11.0-next-2024-07-09-907b3322a.0",
-    "@devvit/repo-tools": "0.11.0-next-2024-07-09-907b3322a.0",
-    "@devvit/tsconfig": "0.11.0-next-2024-07-09-907b3322a.0",
+    "@devvit/eslint-config": "0.11.0-next-2024-07-09-2412ac001.0",
+    "@devvit/repo-tools": "0.11.0-next-2024-07-09-2412ac001.0",
+    "@devvit/tsconfig": "0.11.0-next-2024-07-09-2412ac001.0",
     "@microsoft/api-extractor": "7.41.0",
     "@reddit/faceplate-ui": "11.3.3",
     "@types/clone-deep": "4.0.1",
@@ -64,5 +64,5 @@
     }
   },
   "source": "./src/index.ts",
-  "gitHead": "d60d8455e5abc81fa293f2c697afc9b3f83a73d9"
+  "gitHead": "be7fc1259d1499e7dbdc209d7779e2e7541afba2"
 }