wana/dist/debug.mjs.map

Easy observable state for React

{"version":3,"file":"debug.mjs","sources":["../src/debug/format.ts","../src/debug/logChange.ts","../src/debug/logChanges.ts","../src/debug/useChangeLog.ts","../src/debug/useObserverLog.ts","../src/debug/logRender.ts","../src/debug/useRenderLog.ts"],"sourcesContent":["import { is } from '@alloc/is'\n\ntype Indexable<T> = { [key: string]: T }\n\nexport function format(\n  message: string,\n  values: Indexable<any>,\n  styles: Indexable<string> = {}\n) {\n  const args: any[] = []\n  const formatted = message.replace(/\\$(\\w+)/g, (_, key) => {\n    const value =\n      key in styles && typeof values[key] == 'object'\n        ? JSON.stringify(values[key])\n        : values[key]\n\n    const style =\n      key in styles ? styles[key] : is.string(value) ? 'color: #5162FF' : null\n\n    if (is.string(style)) {\n      args.push(style, String(value), '')\n      return '%c%s%c'\n    }\n\n    args.push(value)\n    return '%O'\n  })\n  return [formatted].concat(args)\n}\n","import { is } from '@alloc/is'\nimport { isDev } from '@alloc/is-dev'\nimport { getDebug } from '../debug'\nimport { Change } from '../observable'\nimport { format } from './format'\n\nlet prevTime = Date.now()\n\nexport function logChange(change: Change, targetId?: string) {\n  let verb: string\n  let meta: object\n  if (change.op == 'add') {\n    verb = 'Added'\n    meta = { value: change.value }\n  } else if (change.op == 'remove') {\n    verb = 'Removed'\n    meta = { oldValue: change.oldValue }\n  } else if (change.op == 'replace') {\n    verb = 'Replaced'\n    meta = { value: change.value, oldValue: change.oldValue }\n  } else if (change.op == 'splice') {\n    verb = 'Spliced'\n    meta = { value: change.value, oldValue: change.oldValue }\n  } else {\n    verb = 'Cleared'\n    meta = { oldValue: change.oldValue }\n  }\n\n  console.log(\n    ...format(\n      '$verb $key of $targetId with',\n      {\n        verb,\n        key: is.string(change.key) ? `\"${change.key}\"` : change.key,\n        targetId:\n          targetId ||\n          (getDebug(change.target) || change.target.constructor).name,\n      },\n      {\n        verb: '',\n        targetId: 'color: #7BB347',\n      }\n    ),\n    meta,\n    change.target\n  )\n\n  if (isDev && console.groupCollapsed) {\n    const now = Date.now()\n    console.groupCollapsed(`Stack trace (+${now - prevTime}ms)`)\n    console.trace()\n    console.groupEnd()\n    prevTime = now\n  }\n}\n\ndeclare global {\n  interface Console {\n    groupCollapsed(name: string): void\n    groupEnd(): void\n  }\n}\n","import { Change, ObserverTarget } from '../observable'\nimport { $O } from '../symbols'\nimport { logChange } from './logChange'\n\nexport type ChangeLogConfig = {\n  name?: string\n  onChange?: (change: Change) => void\n}\n\nexport function logChanges(\n  target: ObserverTarget,\n  { name, onChange }: ChangeLogConfig = {}\n) {\n  const observable = target[$O]\n  if (!observable) {\n    throw Error('Expected an observable object')\n  }\n\n  const observers = observable.get($O)\n  const observer = {\n    onChange: (change: Change) => {\n      if (onChange) {\n        onChange(change)\n      }\n      logChange(change, name)\n    },\n    dispose: () => {\n      observers.delete(observer)\n    },\n  }\n\n  observers.add(observer)\n  return observer\n}\n","import { useChanges } from '../ui/useChanges'\nimport { logChange } from './logChange'\nimport { ChangeLogConfig } from './logChanges'\n\ndeclare const process: any\n\n/**\n * Log any shallow changes to the given observable object.\n */\nexport function useChangeLog(\n  target: object,\n  { name, onChange }: ChangeLogConfig = {}\n) {\n  useChanges(target, change => {\n    if (onChange) {\n      onChange(change)\n    }\n    if (process.env.NODE_ENV !== 'test') {\n      logChange(change, name)\n    }\n  })\n}\n","import { is } from '@alloc/is'\nimport { useEffect } from 'react'\nimport { getCurrentAuto, getDebug } from '../debug'\nimport { $O } from '../symbols'\nimport { format } from './format'\n\nexport function useObserverLog(name?: string) {\n  const auto = getCurrentAuto()\n  if (!auto) {\n    throw Error('Cannot call \"useObserverLog\" outside a \"withAuto\" component')\n  }\n  useEffect(() => {\n    const { observer } = auto\n    if (observer) {\n      const { observed } = observer\n\n      let [message, ...args] = format(\n        '$count values were observed by $name',\n        { count: observed.size, name: name || getDebug(auto).name },\n        { name: 'color: #7BB347' }\n      )\n\n      observed.forEach(({ key, owner }) => {\n        const [line, ...vars] = format(\n          '\\n    $key of $target',\n          {\n            key: key == $O ? 'all' : is.string(key) ? `\"${key}\"` : key,\n            target: owner.source,\n          },\n          key == $O ? { key: '' } : undefined\n        )\n        message += line\n        args.push(...vars)\n      })\n\n      console.log(message, ...args)\n    }\n  })\n}\n","import { Auto } from '../auto'\nimport { getDebug } from '../debug'\n\nexport function logRender(\n  auto: Auto,\n  depth: number,\n  component: React.ComponentType<any> & { __render?: any }\n) {\n  if (!component.displayName) {\n    console.warn(\n      'Component without \"displayName\" is harder to debug',\n      component.__render || component\n    )\n  }\n  const indent = ' '.repeat(depth)\n  const debug = getDebug(auto)\n  console.debug(indent + '<' + debug.name + ' />', '⚛️' + debug.renders, [\n    ...debug.actions!,\n  ])\n}\n","import { isDev } from '@alloc/is-dev'\nimport { getCurrentAuto } from '../debug'\nimport { globals } from '../globals'\nimport { useAutoDepth } from '../ui/context'\nimport { logRender } from './logRender'\n\n// Track which component began rendering most recently.\nlet lastComponent: React.ComponentType | undefined\n\nif (isDev) {\n  const { onRender } = globals\n  globals.onRender = (auto, depth, component) => {\n    lastComponent = component\n    if (onRender) {\n      onRender(auto, depth, component)\n    }\n  }\n}\n\nexport function useRenderLog() {\n  const depth = useAutoDepth()\n  if (isDev) {\n    const auto = getCurrentAuto()\n    if (!auto || !lastComponent) {\n      throw Error('Cannot call \"useRenderLog\" outside a \"withAuto\" component')\n    }\n    logRender(auto, depth, lastComponent)\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;gBAKE,SACA,QACA,SAA4B,IAC5B;AACA,QAAM,OAAc;AACpB,QAAM,YAAY,QAAQ,QAAQ,YAAY,CAAC,GAAG,QAAQ;AACxD,UAAM,QACJ,OAAO,UAAU,OAAO,OAAO,QAAQ,WACnC,KAAK,UAAU,OAAO,QACtB,OAAO;AAEb,UAAM,QACJ,OAAO,SAAS,OAAO,OAAO,GAAG,OAAO,SAAS,mBAAmB;AAEtE,QAAI,GAAG,OAAO,QAAQ;AACpB,WAAK,KAAK,OAAO,OAAO,QAAQ;AAChC,aAAO;AAAA;AAGT,SAAK,KAAK;AACV,WAAO;AAAA;AAET,SAAO,CAAC,WAAW,OAAO;AAAA;;ACrB5B,IAAI,WAAW,KAAK;mBAEM,QAAgB,UAAmB;AAC3D,MAAI;AACJ,MAAI;AACJ,MAAI,OAAO,MAAM,OAAO;AACtB,WAAO;AACP,WAAO,CAAE,OAAO,OAAO;AAAA,aACd,OAAO,MAAM,UAAU;AAChC,WAAO;AACP,WAAO,CAAE,UAAU,OAAO;AAAA,aACjB,OAAO,MAAM,WAAW;AACjC,WAAO;AACP,WAAO,CAAE,OAAO,OAAO,OAAO,UAAU,OAAO;AAAA,aACtC,OAAO,MAAM,UAAU;AAChC,WAAO;AACP,WAAO,CAAE,OAAO,OAAO,OAAO,UAAU,OAAO;AAAA,SAC1C;AACL,WAAO;AACP,WAAO,CAAE,UAAU,OAAO;AAAA;AAG5B,UAAQ,IACN,GAAG,OACD,gCACA;AAAA,IACE;AAAA,IACA,KAAK,GAAG,OAAO,OAAO,OAAO,IAAI,OAAO,SAAS,OAAO;AAAA,IACxD,UACE,YACC,UAAS,OAAO,WAAW,OAAO,OAAO,aAAa;AAAA,KAE3D;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,MAGd,MACA,OAAO;AAGT,MAAI,SAAS,QAAQ,gBAAgB;AACnC,UAAM,MAAM,KAAK;AACjB,YAAQ,eAAe,iBAAiB,MAAM;AAC9C,YAAQ;AACR,YAAQ;AACR,eAAW;AAAA;AAAA;;oBC1Cb,QACA,CAAE,MAAM,YAA8B,IACtC;AACA,QAAM,aAAa,OAAO;AAC1B,MAAI,CAAC,YAAY;AACf,UAAM,MAAM;AAAA;AAGd,QAAM,YAAY,WAAW,IAAI;AACjC,QAAM,WAAW;AAAA,IACf,UAAU,CAAC,WAAmB;AAC5B,UAAI,UAAU;AACZ,iBAAS;AAAA;AAEX,gBAAU,QAAQ;AAAA;AAAA,IAEpB,SAAS,MAAM;AACb,gBAAU,OAAO;AAAA;AAAA;AAIrB,YAAU,IAAI;AACd,SAAO;AAAA;;sBCtBP,QACA,CAAE,MAAM,YAA8B,IACtC;AACA,aAAW,QAAQ,YAAU;AAC3B,QAAI,UAAU;AACZ,eAAS;AAAA;AAEX,QAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,gBAAU,QAAQ;AAAA;AAAA;AAAA;;wBCZO,MAAe;AAC5C,QAAM,OAAO;AACb,MAAI,CAAC,MAAM;AACT,UAAM,MAAM;AAAA;AAEd,YAAU,MAAM;AACd,UAAM,CAAE,YAAa;AACrB,QAAI,UAAU;AACZ,YAAM,CAAE,YAAa;AAErB,UAAI,CAAC,YAAY,QAAQ,OACvB,wCACA,CAAE,OAAO,SAAS,MAAM,MAAM,QAAQ,SAAS,MAAM,OACrD,CAAE,MAAM;AAGV,eAAS,QAAQ,CAAC,CAAE,KAAK,WAAY;AACnC,cAAM,CAAC,SAAS,QAAQ,OACtB,yBACA;AAAA,UACE,KAAK,OAAO,KAAK,QAAQ,GAAG,OAAO,OAAO,IAAI,SAAS;AAAA,UACvD,QAAQ,MAAM;AAAA,WAEhB,OAAO,KAAK,CAAE,KAAK,MAAO;AAE5B,mBAAW;AACX,aAAK,KAAK,GAAG;AAAA;AAGf,cAAQ,IAAI,SAAS,GAAG;AAAA;AAAA;AAAA;;mBC/B5B,MACA,OACA,WACA;AACA,MAAI,CAAC,UAAU,aAAa;AAC1B,YAAQ,KACN,sDACA,UAAU,YAAY;AAAA;AAG1B,QAAM,SAAS,IAAI,OAAO;AAC1B,QAAM,QAAQ,SAAS;AACvB,UAAQ,MAAM,SAAS,MAAM,MAAM,OAAO,OAAO,iBAAO,MAAM,SAAS;AAAA,IACrE,GAAG,MAAM;AAAA;AAAA;;ACVb,IAAI;AAEJ,IAAI,OAAO;AACT,QAAM,CAAE,YAAa;AACrB,UAAQ,WAAW,CAAC,MAAM,OAAO,cAAc;AAC7C,oBAAgB;AAChB,QAAI,UAAU;AACZ,eAAS,MAAM,OAAO;AAAA;AAAA;AAAA;wBAKG;AAC7B,QAAM,QAAQ;AACd,MAAI,OAAO;AACT,UAAM,OAAO;AACb,QAAI,CAAC,QAAQ,CAAC,eAAe;AAC3B,YAAM,MAAM;AAAA;AAEd,cAAU,MAAM,OAAO;AAAA;AAAA;;;;"}