@valbuild/react 0.150.1 → 0.150.3

package/stega/dist/valbuild-react-stega.cjs.prod.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-64c83d56.cjs.prod.js');
+var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-598a2f85.cjs.prod.js');
 var _typeof = require('../../dist/typeof-16428c61.cjs.prod.js');
-var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-6f9dc6fa.cjs.prod.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
 var React = require('react');
 var stega = require('@vercel/stega');
-var raw = require('../../dist/raw-4870e29f.cjs.prod.js');
+var raw = require('../../dist/raw-1617ec66.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -22,6 +22,70 @@ var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
   return typeof type === "string";
 };
+var FRAGMENT = Symbol["for"]("react.fragment");
+
+/**
+ * The paths a fragment's text named, by the fragment element. A fragment has
+ * no DOM element to carry `data-val-path`, so its text is cleaned and its
+ * paths go to the element it is a child of: `<li>{a} <>— {b}</></li>` tags
+ * the `<li>` with both. Without this its text kept its edit tag, on the page.
+ */
+var fragmentPaths = new WeakMap();
+
+/** The paths of the fragments among `children`, when it holds any. */
+function pathsOfFragmentChildren(children) {
+  var found = [];
+  // `.flat`: a list of keyed fragments from `.map()` is an array among them.
+  var _iterator = createForOfIteratorHelper._createForOfIteratorHelper([children].flat(Infinity)),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      if (_typeof._typeof(child) === "object" && child !== null) {
+        var paths = fragmentPaths.get(child);
+        if (paths) {
+          found.push.apply(found, createForOfIteratorHelper._toConsumableArray(paths));
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return found;
+}
+
+/**
+ * Takes the edit tags out of a fragment's text, and returns the paths they
+ * named -- its own and its fragment children's -- for its parent to carry.
+ */
+function cleanFragment(props) {
+  if (!props || _typeof._typeof(props) !== "object") {
+    return [];
+  }
+  var paths = pathsOfFragmentChildren(props.children);
+  var clean = function clean(value) {
+    if (typeof value === "string" && value.match(stega.VERCEL_STEGA_REGEX)) {
+      var found = raw.stegaDecodeStrings(value);
+      if (found) {
+        paths.push.apply(paths, createForOfIteratorHelper._toConsumableArray(found));
+        return stega.vercelStegaSplit(value).cleaned;
+      }
+    }
+    return value;
+  };
+  if (Array.isArray(props.children)) {
+    if (!Object.isFrozen(props.children)) {
+      props.children.forEach(function (child, index) {
+        props.children[index] = clean(child);
+      });
+    }
+  } else if (!Object.isFrozen(props)) {
+    props.children = clean(props.children);
+  }
+  return paths;
+}
 var addValPathIfFound = function addValPathIfFound(type, props) {
   // TODO: increases performance. Unsure about the implications right now - seems to work. Remember to look at RSC and client (and pages/?).
   if (!IS_AUTO_TAG_JSX_ENABLED()) {
@@ -29,9 +93,9 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
   }
   var valSources = new Set();
 
-  // skip auto-tagging fragments since we can't add attributes to them
-  if (type === Symbol["for"]("react.fragment")) {
-    return;
+  // A fragment cannot carry attributes: what it held goes to its parent.
+  if (type === FRAGMENT) {
+    return cleanFragment(props);
   }
   function updateValSources(key, value, props, container) {
     if (!key) {
@@ -49,17 +113,17 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
       //   if this is an intrinsic element (a, div, etc.), add data attrs will be on the DOM element
       //   always add to sources (intrinsic or not)
       //   if this is not an intrinsic element, we pass the stega encoded value downwards until we hit an intrinsic element
-      var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(valPaths),
-        _step;
+      var _iterator2 = createForOfIteratorHelper._createForOfIteratorHelper(valPaths),
+        _step2;
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _valPath = _step.value;
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _valPath = _step2.value;
           valSources.add(_valPath);
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
       if (isIntrinsicElement(type) && !Object.isFrozen(container)) {
         // clean values before adding them to the props
@@ -80,17 +144,17 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
           var _cleanValue = stega.vercelStegaSplit(value).cleaned;
           if (typeof key === "string" && !Array.isArray(container)) {
             container[key] = _cleanValue;
-            var _iterator2 = createForOfIteratorHelper._createForOfIteratorHelper(valPaths),
-              _step2;
+            var _iterator3 = createForOfIteratorHelper._createForOfIteratorHelper(valPaths),
+              _step3;
             try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                var valPath = _step2.value;
+              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                var valPath = _step3.value;
                 valSources.add(valPath);
               }
             } catch (err) {
-              _iterator2.e(err);
+              _iterator3.e(err);
             } finally {
-              _iterator2.f();
+              _iterator3.f();
             }
           }
         }
@@ -98,6 +162,20 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
     }
   }
   if (props && _typeof._typeof(props) === "object") {
+    if (isIntrinsicElement(type)) {
+      var _iterator4 = createForOfIteratorHelper._createForOfIteratorHelper(pathsOfFragmentChildren(props.children)),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var path = _step4.value;
+          valSources.add(path);
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
     for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = slicedToArray._slicedToArray(_Object$entries[_i], 2),
         key = _Object$entries$_i[0],
@@ -137,11 +215,15 @@ var addValPathIfFound = function addValPathIfFound(type, props) {
 function WrapJsx(jsx) {
   if (typeof jsx !== "function") return jsx;
   return function (type, props) {
-    addValPathIfFound(type, props);
+    var fragmentPathsFound = addValPathIfFound(type, props);
     for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       rest[_key - 2] = arguments[_key];
     }
-    return jsx.call.apply(jsx, [jsx, type, props].concat(rest));
+    var element = jsx.call.apply(jsx, [jsx, type, props].concat(rest));
+    if (fragmentPathsFound && fragmentPathsFound.length > 0 && _typeof._typeof(element) === "object" && element !== null) {
+      fragmentPaths.set(element, fragmentPathsFound);
+    }
+    return element;
   };
 }
 function autoTagJSX() {
@@ -170,6 +252,201 @@ function autoTagJSX() {
   JsxPro.jsxDEV && (/**/JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
 }
 
+/**
+ * Edit tags that left React: content whose invisible characters reached the
+ * page somewhere `autoTagJSX` could not take them out -- JSON-LD written with
+ * `dangerouslySetInnerHTML`, a `<title>` or `<meta>` set from a string,
+ * `encodeURIComponent(title)` in a share link. Every visitor of a site with
+ * content analytics on gets them after hydration, and so does any crawler
+ * that runs the page. See `docs/plans/analytics.md`, "The leak warning".
+ *
+ * Anything that went through `autoTagJSX` is clean -- its tags were moved to
+ * `data-val-path` -- so a tag found anywhere in the document is a leak.
+ */
+
+/** The attributes that tell an element apart from its siblings, in the order tried. */
+var NAMING_ATTRIBUTES = ["type", "name", "property", "rel", "id"];
+function describeElement(element) {
+  var tag = element.tagName.toLowerCase();
+  var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(NAMING_ATTRIBUTES),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var name = _step.value;
+      var value = element.getAttribute(name);
+      if (value !== null && value !== "" && !hasTag(value)) {
+        return "<".concat(tag, " ").concat(name, "=\"").concat(value, "\">");
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return "<".concat(tag, ">");
+}
+function hasTag(value) {
+  return value.match(stega.VERCEL_STEGA_REGEX) !== null;
+}
+
+/**
+ * The paths tagged in `value`. A URL can carry a tag percent-encoded --
+ * `encodeURIComponent` keeps the invisible characters, as `%E2%80%8B` -- so
+ * that is decoded and looked in as well.
+ */
+function taggedPaths(value) {
+  if (hasTag(value)) {
+    var _stegaDecodeStrings;
+    return (_stegaDecodeStrings = raw.stegaDecodeStrings(value)) !== null && _stegaDecodeStrings !== void 0 ? _stegaDecodeStrings : [];
+  }
+  if (value.includes("%")) {
+    var decoded;
+    try {
+      decoded = decodeURIComponent(value);
+    } catch (_unused) {
+      return [];
+    }
+    if (decoded !== value && hasTag(decoded)) {
+      var _stegaDecodeStrings2;
+      return (_stegaDecodeStrings2 = raw.stegaDecodeStrings(decoded)) !== null && _stegaDecodeStrings2 !== void 0 ? _stegaDecodeStrings2 : [];
+    }
+  }
+  return [];
+}
+
+/** Every edit tag in `root`'s document, in document order, each path and place once. */
+function findStegaLeaks(root) {
+  var leaks = [];
+  var seen = new Set();
+  var add = function add(paths, where) {
+    var _iterator2 = createForOfIteratorHelper._createForOfIteratorHelper(paths),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var path = _step2.value;
+        var key = "".concat(path, "\0").concat(where);
+        if (!seen.has(key)) {
+          seen.add(key);
+          leaks.push({
+            path: path,
+            where: where
+          });
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  };
+  var top = root.documentElement;
+  if (!top) {
+    return leaks;
+  }
+  var walker = root.createTreeWalker(top, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+  for (var node = walker.currentNode; node;) {
+    if (isElement(node)) {
+      for (var _i = 0, _Array$from = Array.from(node.attributes); _i < _Array$from.length; _i++) {
+        var attribute = _Array$from[_i];
+        if (attribute.name === "data-val-path") continue;
+        add(taggedPaths(attribute.value), "the ".concat(attribute.name, " attribute of ").concat(describeElement(node)));
+      }
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      var parent = node.parentElement;
+      var text = node.nodeValue;
+      if (parent && text) {
+        add(taggedPaths(text), isOwnText(parent) ? describeElement(parent) : "text in ".concat(describeElement(parent)));
+      }
+    }
+    node = walker.nextNode();
+  }
+  return leaks;
+}
+function isElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+/** Elements whose text is a value of its own, rather than text on the page. */
+function isOwnText(element) {
+  var tag = element.tagName.toLowerCase();
+  return tag === "script" || tag === "style" || tag === "title";
+}
+
+/**
+ * Whether the page runs React's development build: the one signal of
+ * "development" that holds in every bundler. `process.env.NODE_ENV` does not
+ * -- TanStack Start's dev server hands the browser a `process.env` without
+ * it -- but the bundler resolved React's own copy of that check to pick a
+ * build, and the production build's `react/jsx-dev-runtime` has no `jsxDEV`.
+ */
+function isReactDevelopmentBuild() {
+  var runtime = jsxRuntimeDev__default["default"];
+  return typeof runtime.jsxDEV === "function";
+}
+function stegaLeakMessage(leak) {
+  return "Content from ".concat(leak.path, " reached ").concat(leak.where, " with its edit tag still in it. Wrap the value in val.raw() where it leaves React.");
+}
+
+/**
+ * Looks for leaks once the page has settled after a change -- after load,
+ * after the render that adds edit tags, after every route change -- and
+ * reports each path and place the first time it is found. For development:
+ * walking the whole document is not something to do to a visitor.
+ *
+ * Returns what stops it.
+ */
+function watchStegaLeaks(report) {
+  var _options$root, _options$settleMs;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var root = (_options$root = options.root) !== null && _options$root !== void 0 ? _options$root : document;
+  var settleMs = (_options$settleMs = options.settleMs) !== null && _options$settleMs !== void 0 ? _options$settleMs : 1000;
+  var reported = new Set();
+  var timer = null;
+  var scan = function scan() {
+    timer = null;
+    var _iterator3 = createForOfIteratorHelper._createForOfIteratorHelper(findStegaLeaks(root)),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var leak = _step3.value;
+        var key = "".concat(leak.path, "\0").concat(leak.where);
+        if (!reported.has(key)) {
+          reported.add(key);
+          report(leak);
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  };
+  var schedule = function schedule() {
+    // At most one scan per `settleMs`, however busy the page: the first
+    // change starts the wait, later ones ride along with it.
+    if (timer === null) {
+      timer = setTimeout(scan, settleMs);
+    }
+  };
+  var observer = new MutationObserver(schedule);
+  if (root.documentElement) {
+    observer.observe(root.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+  schedule();
+  return function () {
+    observer.disconnect();
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+}
+
 // NOTE: the exports of this file needs to be kept in sync with the stubs in loadValModules
 var isRSC = false;
 var autoTagJSXEnabled = false;
@@ -197,3 +474,7 @@ exports.IS_RSC = IS_RSC;
 exports.SET_AUTO_TAG_JSX_ENABLED = SET_AUTO_TAG_JSX_ENABLED;
 exports.SET_RSC = SET_RSC;
 exports.autoTagJSX = autoTagJSX;
+exports.findStegaLeaks = findStegaLeaks;
+exports.isReactDevelopmentBuild = isReactDevelopmentBuild;
+exports.stegaLeakMessage = stegaLeakMessage;
+exports.watchStegaLeaks = watchStegaLeaks;