@valbuild/next 0.44.0 → 0.46.0

package/dist/declarations/src/ValImage.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import NextImage from "next/image";
+import { Image } from "@valbuild/react/stega";
+export type ValImageProps = Omit<React.ComponentProps<typeof NextImage>, "src" | "srcset" | "layout" | "objectFit" | "objectPosition" | "lazyBoundary" | "lazyRoot"> & {
+    src: Image;
+    disableHotspot?: boolean;
+};
+export declare function ValImage(props: ValImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/declarations/src/decodeValPathOfString.d.ts

@@ -0,0 +1,2 @@
+import { ValEncodedString } from "@valbuild/react/stega";
+export declare function decodeValPathOfString(encodedString: ValEncodedString): string | undefined;

package/dist/declarations/src/index.d.ts

@@ -13,8 +13,9 @@ export { VAL_EXTENSION, type SourceArray } from "@valbuild/core";
 export { derefPatch } from "@valbuild/core";
 export { type SelectorSource, type SelectorOf, GenericSelector, } from "@valbuild/core";
 export { ValRichText } from "@valbuild/react/internal";
-export { type ValEncodedString } from "@valbuild/react/stega";
+export { type ValEncodedString, type Image } from "@valbuild/react/stega";
 export { ValProvider } from "./ValProvider.js";
+export { ValImage, type ValImageProps } from "./ValImage.js";
 export { initVal } from "./initVal.js";
 import type { UseValType } from "./client/initValClient.js";
 import { Schema, SelectorSource } from "@valbuild/core";

package/dist/declarations/src/initVal.d.ts

@@ -1,7 +1,9 @@
 import { type ValConfig, type InitVal, type ValConstructor } from "@valbuild/core";
-import { ValEncodedString } from "@valbuild/react/stega";
+import { raw } from "./raw.js";
+import { decodeValPathOfString } from "./decodeValPathOfString.js";
 export declare const initVal: (config?: ValConfig) => InitVal & {
     val: ValConstructor & {
-        raw: (encodedString: ValEncodedString) => string;
+        raw: typeof raw;
+        decodeValPathOfString: typeof decodeValPathOfString;
     };
 };

package/dist/declarations/src/raw.d.ts

@@ -0,0 +1,2 @@
+import { ValEncodedString } from "@valbuild/react/stega";
+export declare function raw(encodedString: ValEncodedString): string;

package/dist/valbuild-next.cjs.dev.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@valbuild/core');
 var internal = require('@valbuild/react/internal');
 var ValNextProvider = require('./ValNextProvider-49d2bec1.cjs.dev.js');
+var NextImage = require('next/image');
 var stega = require('@valbuild/react/stega');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,6 +30,7 @@ function _interopNamespace(e) {
 }
 
 var core__namespace = /*#__PURE__*/_interopNamespace(core);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 
 var ValProvider = ValNextProvider.ValNextProvider;
 
@@ -82,6 +87,83 @@ function _objectSpread2(e) {
   return e;
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+function raw(encodedString) {
+  return stega.stegaClean(encodedString);
+}
+
+function decodeValPathOfString(encodedString) {
+  return stega.stegaDecodeString(encodedString);
+}
+
+var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+function ValImage(props) {
+  var _src$metadata, _src$metadata2, _src$metadata3;
+  var src = props.src,
+    alt = props.alt,
+    style = props.style,
+    width = props.width,
+    disableHotspot = props.disableHotspot,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var valPathOfUrl = decodeValPathOfString(src.url);
+  var valPaths = [valPathOfUrl];
+  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  if (maybeValPathOfAlt) {
+    valPaths.push(maybeValPathOfAlt);
+  }
+  var hotspot = (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var imageStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  var useMetadataDimensions = src.metadata !== undefined && !rest.fill && !width && !height;
+  return /*#__PURE__*/jsxRuntime.jsx(NextImage__default["default"], _objectSpread2(_objectSpread2({}, _objectSpread2(_objectSpread2({}, rest), {}, {
+    layout: undefined,
+    objectFit: undefined,
+    objectPosition: undefined,
+    lazyBoundary: undefined,
+    lazyRoot: undefined
+  })), {}, {
+    src: valPathOfUrl ? raw(src.url) : src.url,
+    "data-val-path": valPaths.join(","),
+    "data-val-attr-alt": maybeValPathOfAlt,
+    "data-val-attr-src": valPathOfUrl,
+    style: imageStyle,
+    alt: raw(alt),
+    fill: rest.fill,
+    width: useMetadataDimensions ? (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.width : width,
+    height: useMetadataDimensions ? (_src$metadata3 = src.metadata) === null || _src$metadata3 === void 0 ? void 0 : _src$metadata3.height : height
+  }));
+}
+
 var initVal = function initVal(config) {
   var _createValSystem = core.initVal(),
     s = _createValSystem.s,
@@ -93,9 +175,8 @@ var initVal = function initVal(config) {
   return {
     s: s,
     val: _objectSpread2(_objectSpread2({}, val), {}, {
-      raw: function raw(encodedString) {
-        return stega.stegaClean(encodedString);
-      }
+      decodeValPathOfString: decodeValPathOfString,
+      raw: raw
     }),
     config: currentConfig
   };
@@ -133,5 +214,6 @@ Object.defineProperty(exports, 'ValRichText', {
   enumerable: true,
   get: function () { return internal.ValRichText; }
 });
+exports.ValImage = ValImage;
 exports.ValProvider = ValProvider;
 exports.initVal = initVal;

package/dist/valbuild-next.cjs.prod.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@valbuild/core');
 var internal = require('@valbuild/react/internal');
 var ValNextProvider = require('./ValNextProvider-7750e412.cjs.prod.js');
+var NextImage = require('next/image');
 var stega = require('@valbuild/react/stega');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,6 +30,7 @@ function _interopNamespace(e) {
 }
 
 var core__namespace = /*#__PURE__*/_interopNamespace(core);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 
 var ValProvider = ValNextProvider.ValNextProvider;
 
@@ -82,6 +87,83 @@ function _objectSpread2(e) {
   return e;
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+function raw(encodedString) {
+  return stega.stegaClean(encodedString);
+}
+
+function decodeValPathOfString(encodedString) {
+  return stega.stegaDecodeString(encodedString);
+}
+
+var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+function ValImage(props) {
+  var _src$metadata, _src$metadata2, _src$metadata3;
+  var src = props.src,
+    alt = props.alt,
+    style = props.style,
+    width = props.width,
+    disableHotspot = props.disableHotspot,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var valPathOfUrl = decodeValPathOfString(src.url);
+  var valPaths = [valPathOfUrl];
+  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  if (maybeValPathOfAlt) {
+    valPaths.push(maybeValPathOfAlt);
+  }
+  var hotspot = (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var imageStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  var useMetadataDimensions = src.metadata !== undefined && !rest.fill && !width && !height;
+  return /*#__PURE__*/jsxRuntime.jsx(NextImage__default["default"], _objectSpread2(_objectSpread2({}, _objectSpread2(_objectSpread2({}, rest), {}, {
+    layout: undefined,
+    objectFit: undefined,
+    objectPosition: undefined,
+    lazyBoundary: undefined,
+    lazyRoot: undefined
+  })), {}, {
+    src: valPathOfUrl ? raw(src.url) : src.url,
+    "data-val-path": valPaths.join(","),
+    "data-val-attr-alt": maybeValPathOfAlt,
+    "data-val-attr-src": valPathOfUrl,
+    style: imageStyle,
+    alt: raw(alt),
+    fill: rest.fill,
+    width: useMetadataDimensions ? (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.width : width,
+    height: useMetadataDimensions ? (_src$metadata3 = src.metadata) === null || _src$metadata3 === void 0 ? void 0 : _src$metadata3.height : height
+  }));
+}
+
 var initVal = function initVal(config) {
   var _createValSystem = core.initVal(),
     s = _createValSystem.s,
@@ -93,9 +175,8 @@ var initVal = function initVal(config) {
   return {
     s: s,
     val: _objectSpread2(_objectSpread2({}, val), {}, {
-      raw: function raw(encodedString) {
-        return stega.stegaClean(encodedString);
-      }
+      decodeValPathOfString: decodeValPathOfString,
+      raw: raw
     }),
     config: currentConfig
   };
@@ -133,5 +214,6 @@ Object.defineProperty(exports, 'ValRichText', {
   enumerable: true,
   get: function () { return internal.ValRichText; }
 });
+exports.ValImage = ValImage;
 exports.ValProvider = ValProvider;
 exports.initVal = initVal;

package/dist/valbuild-next.esm.js

@@ -4,7 +4,9 @@ export { core as expr };
 export { FILE_REF_PROP, GenericSelector, Schema, VAL_EXTENSION, derefPatch } from '@valbuild/core';
 export { ValRichText } from '@valbuild/react/internal';
 import { ValNextProvider } from './ValNextProvider-c5c9fcb0.esm.js';
-import { stegaClean, autoTagJSX } from '@valbuild/react/stega';
+import NextImage from 'next/image';
+import { stegaClean, stegaDecodeString, autoTagJSX } from '@valbuild/react/stega';
+import { jsx } from 'react/jsx-runtime';
 
 var ValProvider = ValNextProvider;
 
@@ -61,6 +63,83 @@ function _objectSpread2(e) {
   return e;
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+function raw(encodedString) {
+  return stegaClean(encodedString);
+}
+
+function decodeValPathOfString(encodedString) {
+  return stegaDecodeString(encodedString);
+}
+
+var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+function ValImage(props) {
+  var _src$metadata, _src$metadata2, _src$metadata3;
+  var src = props.src,
+    alt = props.alt,
+    style = props.style,
+    width = props.width,
+    disableHotspot = props.disableHotspot,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var valPathOfUrl = decodeValPathOfString(src.url);
+  var valPaths = [valPathOfUrl];
+  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  if (maybeValPathOfAlt) {
+    valPaths.push(maybeValPathOfAlt);
+  }
+  var hotspot = (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
+  var imageStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  var useMetadataDimensions = src.metadata !== undefined && !rest.fill && !width && !height;
+  return /*#__PURE__*/jsx(NextImage, _objectSpread2(_objectSpread2({}, _objectSpread2(_objectSpread2({}, rest), {}, {
+    layout: undefined,
+    objectFit: undefined,
+    objectPosition: undefined,
+    lazyBoundary: undefined,
+    lazyRoot: undefined
+  })), {}, {
+    src: valPathOfUrl ? raw(src.url) : src.url,
+    "data-val-path": valPaths.join(","),
+    "data-val-attr-alt": maybeValPathOfAlt,
+    "data-val-attr-src": valPathOfUrl,
+    style: imageStyle,
+    alt: raw(alt),
+    fill: rest.fill,
+    width: useMetadataDimensions ? (_src$metadata2 = src.metadata) === null || _src$metadata2 === void 0 ? void 0 : _src$metadata2.width : width,
+    height: useMetadataDimensions ? (_src$metadata3 = src.metadata) === null || _src$metadata3 === void 0 ? void 0 : _src$metadata3.height : height
+  }));
+}
+
 var initVal = function initVal(config) {
   var _createValSystem = initVal$1(),
     s = _createValSystem.s,
@@ -72,9 +151,8 @@ var initVal = function initVal(config) {
   return {
     s: s,
     val: _objectSpread2(_objectSpread2({}, val), {}, {
-      raw: function raw(encodedString) {
-        return stegaClean(encodedString);
-      }
+      decodeValPathOfString: decodeValPathOfString,
+      raw: raw
     }),
     config: currentConfig
   };
@@ -87,4 +165,4 @@ autoTagJSX();
 
 // Convenience types
 
-export { ValProvider, initVal };
+export { ValImage, ValProvider, initVal };

package/package.json

@@ -8,7 +8,7 @@
     "next",
     "react"
   ],
-  "version": "0.44.0",
+  "version": "0.46.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -45,9 +45,9 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.44.0",
-    "@valbuild/react": "~0.44.0",
-    "@valbuild/server": "~0.44.0",
+    "@valbuild/core": "~0.46.0",
+    "@valbuild/react": "~0.46.0",
+    "@valbuild/server": "~0.46.0",
     "client-only": "^0.0.1",
     "server-only": "^0.0.1"
   },