@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","ErrorBoundary","fallback","reset","createEffect","on","defer","component","ErrorComponent","show","setShow","createSignal","process","env","NODE_ENV","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","$$click","d","_$insert","_c$","_$memo","_el$6","_tmpl$2","_el$7","_c$2","message","_el$8","_tmpl$3","_$delegateEvents"],"sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from 'solid-js/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.ErrorBoundary\n      fallback={(error, reset) => {\n        props.onCatch?.(error)\n\n        Solid.createEffect(\n          Solid.on([props.getResetKey], () => reset(), { defer: true }),\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.ErrorBoundary>\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,eAAa;EAClBC,WAAWL,OAAOM,UAAU;AAC1Bb,SAAMM,UAAUC,MAAM;AAEtBX,YAAMkB,aACJlB,SAAMmB,GAAG,CAACf,MAAMC,YAAY,QAAQY,OAAO,EAAE,EAAEG,OAAO,MAAM,CAC9D,CAAC;AAED,WAAA,GAAA,aAAA,iBACGnB,aAAAA,SAAO;IAAA,IACNoB,YAAS;AAAA,YAAEjB,MAAMK,kBAAkBa;;IAC5BX;IACAM;IAAK,CAAA;;EAGjB,IAAAX,WAAA;AAAA,UAEAF,MAAME;;EAAQ,CAAA;;AAKrB,SAAgBgB,eAAe,EAAEX,SAAyB;CACxD,MAAM,CAACY,MAAMC,WAAWxB,SAAMyB,aAAAA,QAAAA,IAAAA,aACH,aAC1B;AAED,eAAA;EAAA,IAAAI,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAE,QAAAH,MAAAC,WAAAG;AAAAJ,QAAAI;AAAAD,QAAAG,gBAauBb,SAASc,MAAM,CAACA,EAAE;AAAAC,GAAAA,GAAAA,aAAAA,QAAAL,aAEhCX,MAAM,GAAG,eAAe,aAAY;AAAAgB,GAAAA,GAAAA,aAAAA,QAAAV,aAAA;GAAA,IAAAW,OAAAA,GAAAA,aAAAA,YAAA,CAAA,CAIxCjB,MAAM,CAAA;AAAA,gBAANiB,KAAA,UAAA;IAAA,IAAAE,QAAAC,SAAA,EAAAC,QAAAF,MAAAV;AAAAO,KAAAA,GAAAA,aAAAA,QAAAK,cAAA;KAAA,IAAAC,QAAAA,GAAAA,aAAAA,YAAA,CAAA,CAYMlC,MAAMmC,QAAO;AAAA,kBAAbD,MAAA,UAAA;MAAA,IAAAE,QAAAC,SAAA;AAAAT,OAAAA,GAAAA,aAAAA,QAAAQ,aAAuBpC,MAAMmC,QAAO;AAAA,aAAAC;SAAA,GAAW;QAAI,CAAA;AAAA,WAAAL;OAAA,GAGtD;MAAI,EAAA,KAAA;AAAA,SAAAb;KAAA;;iCAGb,CAAA,QAAA,CAAA"}