@adhese/sdk-devtools 0.13.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @adhese/sdk-devtools
 
+## 1.0.0
+
+### Major Changes
+
+- ff93b63: 🎉🎉🎉 – Release 1.0.0 – 🎉🎉🎉
+
+  This release marks the first stable release of the Adhese SDK packages. From here on out we will follow semantic
+  versioning, meaning that all patch and minor updates will be backwards compatible. Major updates will introduce
+  breaking changes.
+
+### Patch Changes
+
+- a5e39f1: Fix badges not being removed when debug mode is disabled
+- e05a09c: Make sure that DALE slots also have useful data visible in the devtools
+- Updated dependencies [ff93b63]
+- Updated dependencies [21aad18]
+  - @adhese/sdk@1.0.0
+  - @adhese/sdk-shared@1.0.0
+
 ## 0.13.0
 
 ### Minor Changes

package/dist/cjs/components/slotsTable.cjs

@@ -49,11 +49,22 @@ function SlotsTable() {
     var _a, _b;
     return !((_b = (_a = slot.pluginOptions) == null ? void 0 : _a.devtools) == null ? void 0 : _b.hijackedSlot);
   }).map((slot) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);
     const hijackedSlot = adheseContext && hijackedSlotOptions && ((_a = adheseContext.get) == null ? void 0 : _a.call(adheseContext, sdkShared.generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot)));
+    let interimSlot = hijackedSlot ?? slot;
+    if (((_b = interimSlot.data) == null ? void 0 : _b.origin) === "DALE") {
+      const nestedAdheseData = (_g = (_f = (_e = (_d = (_c = interimSlot.data) == null ? void 0 : _c.originData) == null ? void 0 : _d.seatbid[0]) == null ? void 0 : _e.bid[0]) == null ? void 0 : _f.ext) == null ? void 0 : _g.adhese;
+      interimSlot = {
+        ...interimSlot,
+        data: {
+          ...interimSlot.data,
+          ...nestedAdheseData
+        }
+      };
+    }
     return {
-      ...hijackedSlot ?? slot,
+      ...interimSlot,
       parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),
       hijackedSlot,
       originalSlot: slot

package/dist/cjs/components/slotsTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotsTable.cjs","sources":["../../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      return ({\n        ...(hijackedSlot ?? slot),\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["useState","useAdheseContext","useEffect","watch","useModifiedSlots","useMemo","generateName","Table","jsx","TableHeader","TableRow","TableHead","TableBody","Fragment","jsxs","TableCell","Badge","cn","buttonVariants","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","EditSlot","Button","ResetIcon"],"mappings":"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"}
+{"version":3,"file":"slotsTable.cjs","sources":["../../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseAd, AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      let interimSlot = hijackedSlot ?? slot;\n\n      if (interimSlot.data?.origin === 'DALE') {\n        // @ts-expect-error - Data structure is not typed and very messy to type\n        // eslint-disable-next-line ts/no-unsafe-member-access\n        const nestedAdheseData = interimSlot.data?.originData?.seatbid[0]?.bid[0]?.ext?.adhese as AdheseAd;\n\n        interimSlot = {\n          ...interimSlot,\n          data: {\n            ...interimSlot.data,\n            ...nestedAdheseData,\n          },\n        };\n      }\n\n      return ({\n        ...interimSlot,\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["useState","useAdheseContext","useEffect","watch","useModifiedSlots","useMemo","generateName","Table","jsx","TableHeader","TableRow","TableHead","TableBody","Fragment","jsxs","TableCell","Badge","cn","buttonVariants","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","EditSlot","Button","ResetIcon"],"mappings":"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"}

package/dist/cjs/devtools.composables.cjs

@@ -196,6 +196,14 @@ function useSlotBadge(context, hooks) {
       sdkShared.watch(() => context.slots, async () => {
         await renderBadges();
       }, { immediate: false, deep: true });
+      sdkShared.watch(() => context.debug, async (debug) => {
+        var _a2;
+        if (debug) {
+          await renderBadges();
+        } else {
+          (_a2 = element.value) == null ? void 0 : _a2.remove();
+        }
+      }, { immediate: true });
     }
   }));
 }

package/dist/cjs/devtools.composables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.composables.cjs","sources":["../../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["watch","ref","computed","_a","omit","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"devtools.composables.cjs","sources":["../../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n\n      watch(() => context.debug, async (debug) => {\n        if (debug) {\n          await renderBadges();\n        }\n        else {\n          element.value?.remove();\n        }\n      }, { immediate: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["watch","ref","computed","_a","omit","jsxs","jsx"],"mappings":"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"}

package/dist/cjs/package.json.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const name = "@adhese/sdk-devtools";
-const version = "0.13.0";
+const version = "1.0.0";
 exports.name = name;
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.map

package/dist/components/slotsTable.js

@@ -47,11 +47,22 @@ function SlotsTable() {
     var _a, _b;
     return !((_b = (_a = slot.pluginOptions) == null ? void 0 : _a.devtools) == null ? void 0 : _b.hijackedSlot);
   }).map((slot) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);
     const hijackedSlot = adheseContext && hijackedSlotOptions && ((_a = adheseContext.get) == null ? void 0 : _a.call(adheseContext, generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot)));
+    let interimSlot = hijackedSlot ?? slot;
+    if (((_b = interimSlot.data) == null ? void 0 : _b.origin) === "DALE") {
+      const nestedAdheseData = (_g = (_f = (_e = (_d = (_c = interimSlot.data) == null ? void 0 : _c.originData) == null ? void 0 : _d.seatbid[0]) == null ? void 0 : _e.bid[0]) == null ? void 0 : _f.ext) == null ? void 0 : _g.adhese;
+      interimSlot = {
+        ...interimSlot,
+        data: {
+          ...interimSlot.data,
+          ...nestedAdheseData
+        }
+      };
+    }
     return {
-      ...hijackedSlot ?? slot,
+      ...interimSlot,
       parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),
       hijackedSlot,
       originalSlot: slot

package/dist/components/slotsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"slotsTable.js","sources":["../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      return ({\n        ...(hijackedSlot ?? slot),\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"slotsTable.js","sources":["../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseAd, AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      let interimSlot = hijackedSlot ?? slot;\n\n      if (interimSlot.data?.origin === 'DALE') {\n        // @ts-expect-error - Data structure is not typed and very messy to type\n        // eslint-disable-next-line ts/no-unsafe-member-access\n        const nestedAdheseData = interimSlot.data?.originData?.seatbid[0]?.bid[0]?.ext?.adhese as AdheseAd;\n\n        interimSlot = {\n          ...interimSlot,\n          data: {\n            ...interimSlot.data,\n            ...nestedAdheseData,\n          },\n        };\n      }\n\n      return ({\n        ...interimSlot,\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/devtools.composables.js

@@ -172,6 +172,14 @@ function useSlotBadge(context, hooks) {
       watch(() => context.slots, async () => {
         await renderBadges();
       }, { immediate: false, deep: true });
+      watch(() => context.debug, async (debug) => {
+        var _a2;
+        if (debug) {
+          await renderBadges();
+        } else {
+          (_a2 = element.value) == null ? void 0 : _a2.remove();
+        }
+      }, { immediate: true });
     }
   }));
 }

package/dist/devtools.composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.composables.js","sources":["../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"devtools.composables.js","sources":["../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n\n      watch(() => context.debug, async (debug) => {\n        if (debug) {\n          await renderBadges();\n        }\n        else {\n          element.value?.remove();\n        }\n      }, { immediate: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/package.json.js

@@ -1,5 +1,5 @@
 const name = "@adhese/sdk-devtools";
-const version = "0.13.0";
+const version = "1.0.0";
 export {
   name,
   version

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-devtools",
   "type": "module",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "description": "Adhese SDK Devtools",
   "license": "GPL-3.0",
   "repository": {
@@ -26,13 +26,13 @@
     "prepareRelease": "npm run build"
   },
   "peerDependencies": {
-    "@adhese/sdk": ">= 0.19 < 1",
+    "@adhese/sdk": ">=1.0.0",
     "react": ">=16.13",
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk-shared": "^0.10.0",
-    "@hookform/resolvers": "^3.4.2",
+    "@adhese/sdk-shared": "^1.0.0",
+    "@hookform/resolvers": "^3.5.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",