{"record":{"id":"9f8a2a1524221d26","repo":"pbakaus/impeccable","slug":"impeccable-invalid-data-impeccable-params-json","errorCode":null,"errorMessage":"[impeccable] Invalid data-impeccable-params JSON:","messagePattern":"\\[impeccable\\] Invalid data-impeccable-params JSON:","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"skill/scripts/live-browser.js","lineNumber":3181,"sourceCode":"\n  function parseVariantParams(variantEl) {\n    // Svelte component variants can't carry a `data-impeccable-params` attribute:\n    // the compiler reads `{` inside attribute values as expression delimiters, so\n    // JSON-with-braces breaks the build. For that path the params live in a sidecar\n    // params.json keyed by variant number, loaded into the session at mount time.\n    if (svelteComponentSession?.sessionId === currentSessionId) {\n      const byVariant = svelteComponentSession.paramsByVariant || {};\n      const params = byVariant[String(visibleVariant)] || byVariant[visibleVariant];\n      return Array.isArray(params) ? params : [];\n    }\n    if (!variantEl) return [];\n    const raw = variantEl.getAttribute('data-impeccable-params');\n    if (!raw) return [];\n    try {\n      const parsed = JSON.parse(raw);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch (err) {\n      console.warn('[impeccable] Invalid data-impeccable-params JSON:', err.message);\n      return [];\n    }\n  }\n\n  function applyParamValue(variantEl, param, value) {\n    if (!variantEl) return;\n    const attr = 'data-p-' + param.id;\n    if (param.kind === 'toggle') {\n      const on = !!value;\n      if (on) variantEl.setAttribute(attr, 'on');\n      else variantEl.removeAttribute(attr);\n    } else if (param.kind === 'steps') {\n      variantEl.setAttribute(attr, String(value));\n    }\n    // Svelte component variants are client-mounted into\n    // [data-impeccable-component-mount] with no [data-impeccable-variant=\"N\"]\n    // wrapper for the state stylesheet to target, and the element is not SSR'd,\n    // so there is no React hydration to mismatch. Drive range/toggle --p-* inline","sourceCodeStart":3163,"sourceCodeEnd":3199,"githubUrl":"https://github.com/pbakaus/impeccable/blob/2bc2879276c1f321a53c4ca99d3371e411329b52/skill/scripts/live-browser.js#L3163-L3199","documentation":"In-page live-mode JS warns that the `data-impeccable-params` attribute on a variant element is not valid JSON. The parse error is caught, the attribute is ignored (returns []), and no variants are generated from params.","triggerScenarios":"A variant element's data-impeccable-params attribute contains malformed JSON (JSON.parse throws) or is valid JSON but not an array; the warning fires at skill/scripts/live-browser.js:3181 and the function returns an empty array.","commonSituations":"Hand-written attribute with single quotes or unescaped characters; HTML-escaping corrupting quotes ("); params serialized as an object instead of an array.","solutions":["Inspect element.getAttribute('data-impeccable-params') in devtools and fix the JSON syntax.","Ensure the value is a JSON array (e.g. '[{\"x\":1}]'), not an object.","Serialize with JSON.stringify on the generating side instead of hand-writing the attribute.","Check that the template engine isn't HTML-escaping the quotes in the attribute."],"exampleFix":"// before\ndiv.setAttribute('data-impeccable-params', \"{'color':'red'}\");\n// after\ndiv.setAttribute('data-impeccable-params', JSON.stringify([{ color: 'red' }]));","handlingStrategy":"validation","validationCode":"function paramsAreValid(el) {\n  const raw = el.getAttribute('data-impeccable-params');\n  if (!raw) return true;\n  try { return Array.isArray(JSON.parse(raw)); } catch { return false; }\n}","typeGuard":"function isVariantParamArray(v) {\n  return Array.isArray(v) && v.every(p => p !== null && typeof p === 'object');\n}","tryCatchPattern":"try {\n  const params = JSON.parse(el.getAttribute('data-impeccable-params'));\n} catch (err) {\n  console.warn('[impeccable] Invalid data-impeccable-params JSON:', err.message);\n}","preventionTips":["Always generate the attribute with JSON.stringify, never hand-write it","Ensure the value is an array, not an object","Disable HTML escaping for the attribute when templating","Add a smoke test that parses every data-impeccable-params fixture"],"tags":["json","browser","attributes"],"backgroundTag":"json-parse-error","analyzedSha":"2bc2879276c1f321a53c4ca99d3371e411329b52","analyzedAt":"2026-09-08T04:51:14.109Z","contentChangedAt":"2026-09-08T04:51:14.109Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}