npm - create-nextblock - Versions diffs - 0.15.0 → 0.15.1 - Mend

create-nextblock 0.15.0 → 0.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/cms/settings/site-scripts/components/SiteScriptManager.tsx CHANGED Viewed

@@ -184,14 +184,22 @@ function ScriptEditor({
           page&apos;s CSP nonce.
         </p>
         <p className="text-xs text-muted-foreground">
-          Pages are React-hydrated. If your script changes text, classes, or attributes of existing
-          markup, wait for hydration or React will discard and re-render that part of the page:
+          Pages are React-hydrated. Do <strong>not</strong> change the text, classes, or attributes
+          of existing markup — React reconciles afterwards and reverts your change (a counter
+          animates, then snaps back). Waiting for the <code>load</code> event is not enough;
+          hydration can still be running. Animate with the Web Animations API instead, which writes
+          no attributes:
         </p>
         <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs">
-          <code>{`function run() { /* your DOM code */ }
-if (document.readyState === 'complete') run();
-else window.addEventListener('load', run);`}</code>
+          <code>{`el.animate(
+  [{ opacity: 0 }, { opacity: 1 }],
+  { duration: 600, fill: 'both' }
+);`}</code>
         </pre>
+        <p className="text-xs text-muted-foreground">
+          Appending your own new elements is always safe — React does not own those. So is anything
+          you can express in CSS.
+        </p>
       </div>
       <div className="grid gap-4 sm:grid-cols-2">

package/templates/nextblock-template/docs/08-NEXTBLOCK-CORTEX-AI-ARCHITECTURE.md CHANGED Viewed

@@ -1561,8 +1561,8 @@ When modifying Cortex AI, keep these invariants:
 15. A substituted actor identity is for attribution only, never authorization.
 16. The audit log for site scripts is append-only in the database. Reverting writes a
     new revision; it never removes one.
-17. Inline scripts in block HTML need the CSP nonce, and must wait for hydration
-    before touching server-rendered DOM.
+17. Inline scripts in block HTML need the CSP nonce, and must not mutate
+    server-rendered DOM at all — `load` is not a post-hydration signal.
 ## MCP Server: Security Model and Operator Guide
@@ -1638,15 +1638,30 @@ The site CSP carries a nonce, and per CSP Level 2 a browser **ignores
   authorized regardless of the CSP host allowlist. That is inherent to the feature
   and a reason it is ADMIN-only.
-Author scripts must also not fight React hydration: a script that changes text,
-classes, or attributes of server-rendered markup before hydration makes the client
-disagree with the SSR HTML and React discards that subtree. Wrap DOM work as:
-```js
-function run() { /* ... */ }
-if (document.readyState === 'complete') run();
-else window.addEventListener('load', run);
-```
+### Author scripts and React hydration
+Public pages are React-hydrated, and this is the single most common way an author
+script goes wrong. **Do not change the text, classes, or attributes of
+server-rendered markup.** React reconciles after the script runs and either reverts
+the change or logs a hydration mismatch — a counter visibly animates and then snaps
+back to its server value.
+Waiting for the `load` event is **not** a fix. With streaming and selective
+hydration, hydration can still be in flight when `load` fires; this was tried and
+still produced mismatches on `<section className=…>`.
+Patterns that are actually safe:
+- **Web Animations API.** `el.animate([...], {fill: 'both'})` creates an Animation
+  object and writes neither `class` nor `style`, so React has nothing to diff. A
+  paused animation held at `currentTime = 0` hides an element without a class.
+- **Append your own elements.** React does not own what the script creates, so a
+  progress bar or overlay appended to `<body>` is unconditionally safe.
+- **CSS.** Anything expressible in CSS carries no hydration risk at all.
+- **If text must change**, render the FINAL value server-side and animate toward it
+  once the element scrolls into view, so any reconciliation lands on the correct
+  value rather than resetting the animation. Format numbers with a fixed formatter,
+  not `toLocaleString()`, so the client string matches the server byte for byte.
 ### SSRF

package/templates/nextblock-template/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": true,
   "scripts": {
     "dev": "next dev",