@valbuild/next 0.64.0 → 0.65.1

package/dist/ValNextProvider-0b711372.esm.js

@@ -0,0 +1,430 @@
+'use client';
+import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
+import { Internal } from '@valbuild/core';
+import { VAL_APP_PATH, VAL_OVERLAY_ID } from '@valbuild/ui';
+import { useRouter } from 'next/navigation';
+import Script from 'next/script';
+import React, { useEffect } from 'react';
+import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-a2fdbce0.esm.js';
+import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
+import { createValClient } from '@valbuild/shared/internal';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './unsupportedIterableToArray-5baabfdc.esm.js';
+
+var ValNextProvider = function ValNextProvider(props) {
+  // TODO: use config:
+  var route = "/api/val";
+  var client = React.useMemo(function () {
+    return createValClient(route);
+  }, [route]);
+
+  // TODO: move below into react package
+  var valStore = React.useMemo(function () {
+    return new ValExternalStore();
+  }, []);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showOverlay = _React$useState2[0],
+    setShowOverlay = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    draftMode = _React$useState4[0],
+    setDraftMode = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    spaReady = _React$useState6[0],
+    setSpaReady = _React$useState6[1];
+  var router = useRouter();
+  var _React$useTransition = React.useTransition(),
+    _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
+    startTransition = _React$useTransition2[1];
+  var rerenderCounterRef = React.useRef(0);
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    iframeSrc = _React$useState8[0],
+    setIframeSrc = _React$useState8[1];
+  useConsoleLogEnableVal(showOverlay);
+  React.useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      console.warn("In message mode");
+      return;
+    }
+    if (isValStudioPath(location.pathname)) {
+      setShowOverlay(false);
+      return;
+    }
+    setShowOverlay(document.cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+  }, []);
+  React.useEffect(function () {
+    if (!showOverlay) {
+      return;
+    }
+    var interval = setInterval(function () {
+      if (rerenderCounterRef.current > 0) {
+        if (!props.disableRefresh) {
+          rerenderCounterRef.current = 0;
+          startTransition(function () {
+            router.refresh();
+          });
+        }
+      }
+    }, 500);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [showOverlay, props.disableRefresh]);
+  React.useEffect(function () {
+    if (!showOverlay) {
+      return;
+    }
+    if (draftMode === null) {
+      return;
+    }
+    var valProviderOverlayListener = function valProviderOverlayListener(event) {
+      if (event instanceof CustomEvent) {
+        if (!(event !== null && event !== void 0 && event.detail.type)) {
+          console.error("Val: invalid event detail (val-overlay-provider)", event);
+        }
+        if (event.detail.type === "spa-ready") {
+          setSpaReady(true);
+        } else if (event.detail.type === "draftMode" && (typeof event.detail.value === "boolean" || event.detail.value === null)) {
+          var _draftMode = event.detail.value;
+          if (_draftMode === true) {
+            setIframeSrc(function (prev) {
+              if (prev === null) {
+                return "".concat(route, "/draft/enable?redirect_to=").concat(encodeURIComponent(window.location.origin + "/val?message_onready=true"));
+              }
+              return prev;
+            });
+          } else if (_draftMode === false) {
+            setIframeSrc(function (prev) {
+              if (prev === null) {
+                return "".concat(route, "/draft/disable?redirect_to=").concat(encodeURIComponent(window.location.origin + "/val?message_onready=true"));
+              }
+              return prev;
+            });
+          }
+        } else {
+          console.error("Val: invalid event detail (val-overlay-provider)", event.detail);
+        }
+      } else {
+        console.error("Val: invalid event (val-overlay-provider)", event);
+      }
+    };
+    window.addEventListener("val-overlay-provider", valProviderOverlayListener);
+    return function () {
+      window.removeEventListener("val-overlay-provider", valProviderOverlayListener);
+    };
+  }, [showOverlay, draftMode]);
+  var pollDraftStatIdRef = React.useRef(0);
+  useEffect(function () {
+    // continous polling to check for updates:
+
+    var timeout;
+    function pollCurrentDraftMode() {
+      if (!showOverlay) {
+        return;
+      }
+      window.dispatchEvent(new CustomEvent("val-overlay-spa", {
+        detail: {
+          type: "draftModeLoading",
+          value: iframeSrc !== null
+        }
+      }));
+      var pollDraftStatId = ++pollDraftStatIdRef.current;
+      client("/draft/stat", "GET", {}).then(function (res) {
+        if (pollDraftStatIdRef.current !== pollDraftStatId) {
+          return;
+        }
+        if (res.status === null) {
+          // ignore network errors
+          return;
+        }
+        if (res.status !== 200) {
+          console.error("Val: could not get draft mode status", res);
+          return;
+        }
+        setDraftMode(function (prev) {
+          if (prev !== res.json.draftMode) {
+            rerenderCounterRef.current++;
+            return res.json.draftMode;
+          }
+          return prev;
+        });
+      })["catch"](function (err) {
+        console.error("Val: could not get draft mode status", err);
+      })["finally"](function () {
+        if (pollDraftStatIdRef.current !== pollDraftStatId) {
+          return;
+        }
+        pollDraftStatIdRef.current--;
+        timeout = setTimeout(pollCurrentDraftMode, iframeSrc === null ? 1000 : 100);
+      });
+    }
+    pollCurrentDraftMode();
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [showOverlay, iframeSrc]);
+  React.useEffect(function () {
+    if (!showOverlay) {
+      return;
+    }
+    window.dispatchEvent(new CustomEvent("val-overlay-spa", {
+      detail: {
+        type: "draftMode",
+        value: draftMode
+      }
+    }));
+  }, [showOverlay, draftMode, spaReady]);
+  React.useEffect(function () {
+    if (!showOverlay) {
+      SET_AUTO_TAG_JSX_ENABLED(false);
+    } else {
+      if (draftMode) {
+        SET_AUTO_TAG_JSX_ENABLED(true);
+        var reactServerComponentRefreshListener = function reactServerComponentRefreshListener(event) {
+          if (event instanceof CustomEvent) {
+            var _event$detail;
+            if (((_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.type) === "source-update") {
+              var _event$detail2, _event$detail3;
+              var moduleFilePath = (_event$detail2 = event.detail) === null || _event$detail2 === void 0 ? void 0 : _event$detail2.moduleFilePath;
+              var source = (_event$detail3 = event.detail) === null || _event$detail3 === void 0 ? void 0 : _event$detail3.source;
+              if (typeof moduleFilePath === "string" && source !== undefined) {
+                valStore.update(moduleFilePath, source);
+                if (!props.disableRefresh) {
+                  rerenderCounterRef.current++;
+                }
+              } else {
+                console.error("Val: invalid event detail", event.detail);
+              }
+            } else {
+              console.error("Val: invalid custom event details (val-event)", event.detail);
+            }
+          } else {
+            console.error("Val: invalid custom event (val-event)", event);
+          }
+        };
+        window.addEventListener("val-event", reactServerComponentRefreshListener);
+        return function () {
+          window.removeEventListener("val-event", reactServerComponentRefreshListener);
+        };
+      }
+    }
+  }, [showOverlay, draftMode, props.disableRefresh]);
+  React.useEffect(function () {
+    if (!showOverlay) {
+      return;
+    }
+    var listener = function listener(event) {
+      if (event.origin === location.origin && event.data.type === "val-ready") {
+        setIframeSrc(null);
+      }
+    };
+    window.addEventListener("message", listener);
+    return function () {
+      window.removeEventListener("message", listener);
+    };
+  }, [showOverlay]);
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    dropZone = _React$useState10[0],
+    setDropZone = _React$useState10[1];
+  React.useEffect(function () {
+    var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
+    if (storedDropZone) {
+      setDropZone(storedDropZone);
+    } else {
+      setDropZone("val-menu-right-center");
+    }
+  }, []);
+  return /*#__PURE__*/jsxs(ValOverlayProvider, {
+    draftMode: draftMode,
+    store: valStore,
+    children: [props.children, !spaReady && showOverlay && dropZone && /*#__PURE__*/jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsx("style", {
+        children: "\n".concat(positionStyles, "\n.backdrop-blur {\n  backdrop-filter: blur(10px);\n}\n.text-white {\n  color: white;\n}\n.bg-black {\n  background: black;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.fixed {\n  position: fixed;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.right-12 {\n  right: 3rem;\n}\n.right-16 {\n  right: 4rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.animate-spin {\n  animation: spin 2s linear infinite;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+      }), /*#__PURE__*/jsx("div", {
+        className: getPositionClassName(dropZone) + " p-4",
+        children: /*#__PURE__*/jsx("div", {
+          className: "flex items-center justify-center p-2 text-white bg-black rounded backdrop-blur",
+          children: /*#__PURE__*/jsx(Clock, {
+            className: "animate-spin",
+            size: 16
+          })
+        })
+      })]
+    }), showOverlay && draftMode !== undefined && /*#__PURE__*/jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsx(Script, {
+        type: "module",
+        src: "".concat(route, "/static").concat(VAL_APP_PATH)
+      }), /*#__PURE__*/jsx("div", {
+        id: VAL_OVERLAY_ID
+      })]
+    }), iframeSrc && draftMode !== null && showOverlay && /*#__PURE__*/jsx("iframe", {
+      style: {
+        top: 0,
+        left: 0,
+        position: "absolute",
+        width: 0,
+        height: 0
+      },
+      src: iframeSrc
+    }, iframeSrc)]
+  });
+};
+function useConsoleLogEnableVal(showOverlay) {
+  React.useEffect(function () {
+    if (process.env["NODE_ENV"] === "development" && showOverlay === false && !isValStudioPath(location.pathname)) {
+      console.warn("\n###########\n###########\n###########                           @@@@\n###########                             @@\n###########    @@      @@  @@@@@@ @     @@\n###########     @@    @@  @@     @@     @@\n###########     @@    @@ %@       @     @@\n####  #####      @@  @@  .@      .@     @@\n###    ####       @@@@    @@:   @@@.    @@\n####  #####       @@@@      @@@@  =@@@@@@@@@\n###########\n\nThis page is built with Val Build - the lightweight CMS where content is code.\n\nVal is currently hidden.\n\nTo show Val, go to the following URL:\n".concat(window.location.origin, "/api/val/enable?redirect_to=").concat(encodeURIComponent(window.location.href), "\n        \nYou are seeing this message because you are in development mode."));
+    }
+  }, [showOverlay]);
+}
+var positionStyles = "\n.left-0 {\n  left: 0;\n}\n.top-0 {\n  top: 0;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.top-1\\/2 {\n  top: 50%;\n}\n.-translate-y-1\\/2 {\n  transform: translateY(-50%);\n}\n.-translate-x-1\\/2 {\n  transform: translateX(-50%);\n}\n.right-0 {\n  right: 0;\n}\n.bottom-0 {\n  bottom: 0;\n}";
+// This is a copy of the function from the ValMenu component.
+function getPositionClassName(dropZone) {
+  var className = "fixed transform";
+  if (dropZone === "val-menu-left-top") {
+    className += " left-0 top-0";
+  } else if (dropZone === "val-menu-left-center") {
+    className += " left-0 top-1/2 -translate-y-1/2";
+  } else if (dropZone === "val-menu-left-bottom") {
+    className += " left-0 bottom-0";
+  } else if (dropZone === "val-menu-center-top") {
+    className += " left-1/2 -translate-x-1/2 top-0";
+  } else if (dropZone === "val-menu-center-bottom") {
+    className += " left-1/2 -translate-x-1/2 bottom-0";
+  } else if (dropZone === "val-menu-right-top") {
+    className += " right-0 top-0";
+  } else if (dropZone === "val-menu-right-center") {
+    className += " right-0 top-1/2 -translate-y-1/2";
+  } else if (dropZone === "val-menu-right-bottom") {
+    className += " right-0 bottom-0";
+  } else {
+    className += " right-0 bottom-0";
+  }
+  return className;
+}
+function isValStudioPath(pathname) {
+  return pathname.startsWith("/val");
+}
+
+// function ValIcon() {
+//   return (
+//     <svg
+//       width="32"
+//       height="32"
+//       viewBox="0 0 105 149"
+//       fill="none"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <g filter="url(#filter0_d_14_634)">
+//         <path
+//           d="M21.4768 23.3474C21.4768 22.4628 22.1939 21.7457 23.0785 21.7457H77.1357C78.0203 21.7457 78.7374 22.4628 78.7374 23.3474V125.055C78.7374 125.94 78.0203 126.657 77.1357 126.657H23.0785C22.1939 126.657 21.4768 125.94 21.4768 125.055V23.3474Z"
+//           fill="#38CD98"
+//         />
+//       </g>
+//       <g filter="url(#filter1_i_14_634)">
+//         <circle cx="49.9068" cy="104.233" r="9.61017" fill="#1E1F2A" />
+//       </g>
+//       <defs>
+//         <filter
+//           id="filter0_d_14_634"
+//           x="0.0397091"
+//           y="0.30863"
+//           width="100.135"
+//           height="147.785"
+//           filterUnits="userSpaceOnUse"
+//           colorInterpolationFilters="sRGB"
+//         >
+//           <feFlood floodOpacity="0" result="BackgroundImageFix" />
+//           <feColorMatrix
+//             in="SourceAlpha"
+//             type="matrix"
+//             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+//             result="hardAlpha"
+//           />
+//           <feOffset />
+//           <feGaussianBlur stdDeviation="10.7185" />
+//           <feComposite in2="hardAlpha" operator="out" />
+//           <feColorMatrix
+//             type="matrix"
+//             values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in2="BackgroundImageFix"
+//             result="effect1_dropShadow_14_634"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in="SourceGraphic"
+//             in2="effect1_dropShadow_14_634"
+//             result="shape"
+//           />
+//         </filter>
+//         <filter
+//           id="filter1_i_14_634"
+//           x="40.2966"
+//           y="94.6229"
+//           width="19.2205"
+//           height="19.2204"
+//           filterUnits="userSpaceOnUse"
+//           colorInterpolationFilters="sRGB"
+//         >
+//           <feFlood floodOpacity="0" result="BackgroundImageFix" />
+//           <feBlend
+//             mode="normal"
+//             in="SourceGraphic"
+//             in2="BackgroundImageFix"
+//             result="shape"
+//           />
+//           <feColorMatrix
+//             in="SourceAlpha"
+//             type="matrix"
+//             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+//             result="hardAlpha"
+//           />
+//           <feOffset />
+//           <feGaussianBlur stdDeviation="2.40254" />
+//           <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+//           <feColorMatrix
+//             type="matrix"
+//             values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in2="shape"
+//             result="effect1_innerShadow_14_634"
+//           />
+//         </filter>
+//       </defs>
+//     </svg>
+//   );
+// }
+
+function Clock(_ref) {
+  var className = _ref.className,
+    size = _ref.size;
+  return /*#__PURE__*/jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-clock " + className,
+    children: [/*#__PURE__*/jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /*#__PURE__*/jsx("polyline", {
+      points: "12 6 12 12 16 14"
+    })]
+  });
+}
+
+export { ValNextProvider };

package/dist/ValNextProvider-313af7bb.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValNextProvider-313af7bb.cjs.prod.js");
+} else {
+  module.exports = require("./ValNextProvider-313af7bb.cjs.dev.js");
+}