@tanstack/solid-router/dist/cjs/CatchBoundary.cjs.map

Modern and scalable routing for Solid applications

{"version":3,"file":"CatchBoundary.cjs","names":["Solid","Dynamic","ErrorRouteComponent","CatchBoundary","props","getResetKey","children","JSX","Element","errorComponent","onCatch","error","Error","ParentProps","_$createComponent","Errored","fallback","reset","createEffect","component","ErrorComponent","show","setShow","createSignal","process","env","NODE_ENV","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","$$click","d","_$insert","_c$","_$memo","_el$7","_tmpl$2","_el$8","_c$2","message","_el$9","_tmpl$3","_$delegateEvents"],"sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from '@solidjs/web'\nimport type { ErrorRouteComponent } from './route'\n\nexport function CatchBoundary(\n  props: {\n    getResetKey: () => number | string\n    children: Solid.JSX.Element\n    errorComponent?: ErrorRouteComponent\n    onCatch?: (error: Error) => void\n  } & Solid.ParentProps,\n) {\n  return (\n    <Solid.Errored\n      fallback={(error, reset) => {\n        props.onCatch?.(error)\n\n        Solid.createEffect(props.getResetKey, () => {\n          // We trigger reset here. For a fully deferred effect we might need usePrevious,\n          // but calling reset on key change is the main goal.\n          reset()\n        })\n\n        return (\n          <Dynamic\n            component={props.errorComponent ?? ErrorComponent}\n            error={error}\n            reset={reset}\n          />\n        )\n      }}\n    >\n      {props.children}\n    </Solid.Errored>\n  )\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n  const [show, setShow] = Solid.createSignal(\n    process.env.NODE_ENV !== 'production',\n  )\n\n  return (\n    <div style={{ padding: '.5rem', 'max-width': '100%' }}>\n      <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>\n        ∂<strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>\n        <button\n          style={{\n            appearance: 'none',\n            'font-size': '.6em',\n            border: '1px solid currentColor',\n            padding: '.1rem .2rem',\n            'font-weight': 'bold',\n            'border-radius': '.25rem',\n          }}\n          onClick={() => setShow((d) => !d)}\n        >\n          {show() ? 'Hide Error' : 'Show Error'}\n        </button>\n      </div>\n      <div style={{ height: '.25rem' }} />\n      {show() ? (\n        <div>\n          <pre\n            style={{\n              'font-size': '.7em',\n              border: '1px solid red',\n              'border-radius': '.25rem',\n              padding: '.3rem',\n              color: 'red',\n              overflow: 'auto',\n            }}\n          >\n            {error.message ? <code>{error.message}</code> : null}\n          </pre>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAIA,SAAgBG,cACdC,OAMA;AACA,SAAA,GAAA,aAAA,iBACGJ,SAAMe,SAAO;EACZC,WAAWL,OAAOM,UAAU;AAC1Bb,SAAMM,UAAUC,MAAM;AAEtBX,YAAMkB,aAAad,MAAMC,mBAAmB;AAG1CY,WAAO;KACP;AAEF,WAAA,GAAA,aAAA,iBACGhB,aAAAA,SAAO;IAAA,IACNkB,YAAS;AAAA,YAAEf,MAAMK,kBAAkBW;;IAC5BT;IACAM;IAAK,CAAA;;EAGjB,IAAAX,WAAA;AAAA,UAEAF,MAAME;;EAAQ,CAAA;;AAKrB,SAAgBc,eAAe,EAAET,SAAyB;CACxD,MAAM,CAACU,MAAMC,WAAWtB,SAAMuB,aAAAA,QAAAA,IAAAA,aACH,aAC1B;AAED,eAAA;EAAA,IAAAI,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAI,QAAAL,MAAAC,WAAAG,YAAAA;AAAAJ,QAAAI;AAAAC,QAAAE,gBAauBd,SAASe,MAAM,CAACA,EAAE;AAAAC,GAAAA,GAAAA,aAAAA,QAAAJ,aAEhCb,MAAM,GAAG,eAAe,aAAY;AAAAiB,GAAAA,GAAAA,aAAAA,QAAAX,aAAA;GAAA,IAAAY,OAAAA,GAAAA,aAAAA,YAAA,CAAA,CAIxClB,MAAM,CAAA;AAAA,gBAANkB,KAAA,UAAA;IAAA,IAAAE,QAAAC,SAAA,EAAAC,QAAAF,MAAAX;AAAAQ,KAAAA,GAAAA,aAAAA,QAAAK,cAAA;KAAA,IAAAC,QAAAA,GAAAA,aAAAA,YAAA,CAAA,CAYMjC,MAAMkC,QAAO;AAAA,kBAAbD,MAAA,UAAA;MAAA,IAAAE,QAAAC,SAAA;AAAAT,OAAAA,GAAAA,aAAAA,QAAAQ,aAAuBnC,MAAMkC,QAAO;AAAA,aAAAC;SAAA,GAAW;QAAI,CAAA;AAAA,WAAAL;OAAA,GAGtD;MAAI,EAAA,KAAA;AAAA,SAAAd;KAAA;;iCAGb,CAAA,QAAA,CAAA"}