fix(builder): deterministic ids for NumberCounter + form-relay marker
Two components of the det-id bug class were missed in the earlier migration: NumberCounter's wrapper/counter ids and count-up script, and the shared form-relay-wiring fid (used by ContactForm/FormContainer). Both used Math.random() for exported HTML ids, breaking caching/diffing across exports. Migrate both to scopeId(nodeId, fallbackSeed, prefix), threading nodeId through NumberCounter.toHtml and relayFormWiring (via ContactForm.toHtml and FormContainer.toHtml, both now passing nodeId as their 3rd arg).
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { useNode, UserComponent } from '@craftjs/core';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeHtml, escapeAttr } from '../../utils/escape';
|
||||
import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
|
||||
|
||||
interface Counter {
|
||||
number: number;
|
||||
@@ -109,7 +109,7 @@ NumberCounter.craft = {
|
||||
|
||||
/* ---------- HTML export ---------- */
|
||||
|
||||
(NumberCounter as any).toHtml = (props: NumberCounterProps, _childrenHtml: string) => {
|
||||
(NumberCounter as any).toHtml = (props: NumberCounterProps, _childrenHtml: string, nodeId?: string) => {
|
||||
const {
|
||||
counters = defaultCounters,
|
||||
columns = 4,
|
||||
@@ -120,7 +120,13 @@ NumberCounter.craft = {
|
||||
} = props;
|
||||
|
||||
const items = counters.length > 0 ? counters : defaultCounters;
|
||||
const uid = 'nc_' + Math.random().toString(36).slice(2, 8);
|
||||
|
||||
// Deterministic AND unique id for this counter instance's wrapper/span
|
||||
// ids and getElementById() calls inside its inline script -- scoped on
|
||||
// the Craft node id so two NumberCounter instances (e.g. both left at
|
||||
// default props) don't collide and end up animating each other's digits.
|
||||
const seed = items.map((c) => `${c.number}${c.suffix}::${c.label}`).join('|');
|
||||
const uid = scopeId(nodeId, seed, 'nc');
|
||||
|
||||
const sectionStyle = cssPropsToString({
|
||||
padding: '60px 20px',
|
||||
|
||||
Reference in New Issue
Block a user