app-devtools 0.1.0

package/src/pages/api-explorer/ApiExplorerMenu.tsx

@@ -0,0 +1,136 @@
+import Icon from '@src/components/Icon'
+import {
+  ApiExplorerMenuItem,
+  MenuItem,
+} from '@src/pages/api-explorer/ApiExplorerMenuItem'
+import { callsStore } from '@src/stores/callsStore'
+import { uiStore } from '@src/stores/uiStore'
+import { inline } from '@src/style/helpers/inline'
+import { stack } from '@src/style/helpers/stack'
+import { colors, fonts } from '@src/style/theme'
+import { createReconciledArray, createSignalRef } from '@utils/solid'
+import { css } from 'solid-styled-components'
+
+const containerStyle = css`
+  &&& {
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
+
+    > h1 {
+      font-size: 18px;
+      padding-left: 12px;
+      padding-top: 10px;
+      font-family: ${fonts.decorative};
+      color: ${colors.secondary.var};
+      padding-bottom: 16px;
+    }
+  }
+`
+
+const menuContainerStyle = css`
+  &&& {
+    ${stack()};
+    flex: 1 1;
+    overflow-y: auto;
+    padding-bottom: 16px;
+  }
+`
+
+const searchStyle = css`
+  &&& {
+    ${inline({ gap: 8 })};
+    margin: 0 10px;
+    margin-bottom: 8px;
+
+    display: grid;
+    grid-template-columns: 14px 1fr;
+    background: ${colors.white.alpha(0.05)};
+    border-radius: 4px;
+    --icon-size: 16px;
+    padding: 4px 0;
+    padding-left: 6px;
+
+    .icon {
+      color: ${colors.secondary.var};
+    }
+
+    input {
+      border: none;
+      background: transparent;
+      color: ${colors.white.var};
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+`
+
+export const ApiExplorerMenu = () => {
+  const search = createSignalRef('')
+
+  const menuItems = createReconciledArray(() => {
+    const callsEntries = Object.entries(callsStore.calls)
+
+    const filtered: MenuItem[] = []
+
+    for (const [key, value] of callsEntries.reverse()) {
+      if (
+        search.value.trim() &&
+        !value.name.includes(search.value.toLowerCase())
+      ) {
+        continue
+      }
+
+      const subitemsWithAlias = new Set<string>()
+
+      for (const request of value.requests) {
+        if (request.alias) {
+          subitemsWithAlias.add(request.alias)
+        }
+      }
+
+      filtered.push({
+        id: key,
+        subitemsWithAlias: [...subitemsWithAlias],
+        ...value,
+      })
+    }
+
+    return filtered
+  }, 'id')
+
+  const currentCallId = $(uiStore.selectedCall)
+
+  return (
+    <div class={containerStyle}>
+      <h1>API EXPLORER</h1>
+
+      <label class={searchStyle}>
+        <Icon name="search" />
+        <input
+          type="text"
+          placeholder="Search"
+          value={search.value}
+          onInput={(e) => {
+            search.value = e.currentTarget.value
+          }}
+        />
+      </label>
+
+      <div class={menuContainerStyle}>
+        <For each={menuItems()}>
+          {(item, i) => {
+            return (
+              <ApiExplorerMenuItem
+                index={i()}
+                item={item}
+                currentCallId={currentCallId}
+              />
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/pages/api-explorer/ApiExplorerMenuItem.tsx

@@ -0,0 +1,208 @@
+import ButtonElement from '@src/components/ButtonElement'
+import Icon from '@src/components/Icon'
+import { ApiCall, RequestSubTypes, RequestTypes } from '@src/stores/callsStore'
+import { setUiStore, uiStore } from '@src/stores/uiStore'
+import { ellipsis } from '@src/style/helpers/ellipsis'
+import { inline } from '@src/style/helpers/inline'
+import { stack } from '@src/style/helpers/stack'
+import { colors, fonts } from '@src/style/theme'
+import { createSignalRef } from '@utils/solid'
+import { css } from 'solid-styled-components'
+
+const menuItemStyle = css`
+  &&& {
+    font-size: 14px;
+    ${stack()};
+
+    > .call {
+      padding: 4px 12px;
+      ${inline()};
+      opacity: 0.8;
+
+      &.selected {
+        opacity: 1;
+        background-color: ${colors.secondary.alpha(0.16)};
+      }
+
+      > button {
+        text-align: left;
+        ${inline({ gap: 8 })};
+
+        > .tag {
+          font-weight: 600;
+          font-family: ${fonts.decorative};
+        }
+
+        > span {
+          ${ellipsis};
+          flex-shrink: 1;
+        }
+      }
+    }
+
+    .subitem {
+      text-align: left;
+      padding: 4px 12px;
+      padding-left: 14px;
+      margin-left: 16px;
+      border-left: 1px solid ${colors.white.alpha(0.1)};
+
+      span {
+        opacity: 0.6;
+        padding: 4px 8px;
+        margin-left: -8px;
+        border-radius: 4px;
+      }
+
+      &.selected span {
+        opacity: 1;
+        background-color: ${colors.secondary.alpha(0.16)};
+      }
+
+      &:first-of-type {
+        margin-top: 2px;
+      }
+
+      &:last-of-type {
+        border-radius: 0 0 0 10px;
+        border-bottom: 1px solid ${colors.white.alpha(0.1)};
+        padding-bottom: 10px;
+        margin-bottom: 4px;
+      }
+    }
+
+    .expand-button {
+      margin-left: auto;
+      --icon-size: 16px;
+
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+  }
+`
+
+type ApiExplorerMenuItemProps = {
+  index: number
+  currentCallId: string | null
+  item: MenuItem
+}
+
+export type MenuItem = ApiCall & {
+  id: string
+  subitemsWithAlias: string[]
+}
+
+export const ApiExplorerMenuItem = (props: ApiExplorerMenuItemProps) => {
+  const { item, currentCallId } = $destructure(props)
+
+  const showSubitems = createSignalRef(props.item.subitemsWithAlias.length < 4)
+
+  const typeIcon = getTypeIcon(item.type, item.subType)
+
+  return (
+    <div class={menuItemStyle}>
+      <div
+        class="call"
+        classList={{
+          selected: currentCallId
+            ? currentCallId === item.id
+            : props.index === 0,
+        }}
+      >
+        <ButtonElement
+          onClick={() => {
+            setUiStore({ selectedCall: item.id, selectedSubitem: null })
+          }}
+        >
+          <div
+            class="tag"
+            title={`${item.type}${item.subType ? ` (${item.subType})` : ''}`}
+            style={{ color: typeIcon.color }}
+          >
+            {typeIcon.icon}
+          </div>
+
+          <span title={item.name}>{item.name}</span>
+        </ButtonElement>
+
+        {item.subitemsWithAlias.length > 0 && (
+          <ButtonElement
+            class="expand-button"
+            classList={{
+              expanded: showSubitems.value,
+            }}
+            onClick={() => {
+              showSubitems.value = !showSubitems.value
+            }}
+          >
+            <Icon name="caret-down" />
+          </ButtonElement>
+        )}
+      </div>
+
+      <Show when={showSubitems.value}>
+        <For each={item.subitemsWithAlias}>
+          {(subitem) => (
+            <ButtonElement
+              class="subitem"
+              classList={{
+                selected:
+                  currentCallId === item.id &&
+                  uiStore.selectedSubitem === subitem,
+              }}
+              onClick={() => {
+                setUiStore({
+                  selectedCall: item.id,
+                  selectedSubitem: subitem,
+                })
+              }}
+            >
+              <span>{subitem}</span>
+            </ButtonElement>
+          )}
+        </For>
+      </Show>
+    </div>
+  )
+}
+
+function getTypeIcon(
+  type: RequestTypes,
+  subType: RequestSubTypes | undefined,
+): {
+  icon: string
+  color: string
+} {
+  let icon = ''
+  let color = ''
+
+  if (type === 'fetch') {
+    icon = 'F'
+    color = '#FDE047'
+  } else {
+    if (subType) {
+      if (subType === 'create') {
+        icon = 'C'
+        color = '#6EE7B7'
+      } else if (subType === 'update') {
+        icon = 'U'
+        color = '#A78BFA'
+      } else if (subType === 'delete') {
+        icon = 'D'
+        color = '#E53558'
+      } else {
+        icon = subType[0]?.toUpperCase() || '?'
+        color = '#FDE047'
+      }
+    } else {
+      icon = 'M'
+      color = '#A78BFA'
+    }
+  }
+
+  return {
+    icon,
+    color,
+  }
+}

package/src/pages/api-explorer/Diff.tsx

@@ -0,0 +1,223 @@
+import { Section } from '@src/components/Section'
+import Select from '@src/components/Select'
+import { getRequestPayload } from '@src/pages/api-explorer/getRequestPayload'
+import { ApiRequest, callsStore } from '@src/stores/callsStore'
+import { uiStore } from '@src/stores/uiStore'
+import { stack } from '@src/style/helpers/stack'
+import { colors, fonts } from '@src/style/theme'
+import { reverseCopy } from '@utils/arrayUtils'
+import { getDiff } from '@utils/getDiff'
+import { createReconciledArray, createSignalRef } from '@utils/solid'
+import { truncateText } from '@utils/truncateText'
+import dayjs from 'dayjs'
+import { createMemo } from 'solid-js'
+import { css } from 'solid-styled-components'
+
+const containerStyle = css`
+  &&& {
+    ${stack({ gap: 14 })};
+
+    .changes-count {
+      color: ${colors.white.alpha(0.5)};
+      font-size: 14px;
+
+      .additions {
+        color: ${colors.success.var};
+      }
+
+      .removals {
+        color: ${colors.error.var};
+      }
+    }
+  }
+`
+
+const diffContainerStyle = css`
+  &&& {
+    ${stack({ gap: 0 })};
+    font-size: 14px;
+    font-family: ${fonts.decorative};
+    white-space: pre;
+    overflow-x: auto;
+
+    .line {
+      opacity: 0.7;
+      padding-left: 10px;
+
+      &.added {
+        opacity: 1;
+        color: ${colors.success.var};
+        background: ${colors.success.alpha(0.1)};
+
+        &::before {
+          content: '+';
+          position: absolute;
+          left: 0;
+        }
+      }
+
+      &.removed {
+        opacity: 1;
+        color: ${colors.error.var};
+        background: ${colors.error.alpha(0.1)};
+
+        &::before {
+          content: '-';
+          position: absolute;
+          left: 0;
+        }
+      }
+    }
+  }
+`
+
+export const Diff = () => {
+  const currentCall = createMemo(() => {
+    const { selectedCall } = uiStore
+
+    if (!selectedCall) return Object.values(callsStore.calls).at(-1)
+
+    return callsStore.calls[selectedCall]
+  })
+
+  const requestOptions = createReconciledArray(() => {
+    const call = currentCall()
+
+    if (!call) return []
+
+    return reverseCopy(call.requests)
+      .map((request) => {
+        return {
+          value: request.id,
+          label: `${dayjs(request.startTime).format(
+            'HH:mm:ss',
+          )} | ${truncateText(getRequestPayload(request), 50)}`,
+        }
+      })
+      .filter((request) => request.value !== uiStore.selectedRequest)
+  }, 'value')
+
+  const compareRequest = createSignalRef<null | string>(null)
+
+  const activeRequest = createMemo(() => {
+    if (!uiStore.selectedRequest) return null
+
+    return currentCall()?.requests.find(
+      (request) => request.id === uiStore.selectedRequest,
+    )
+  })
+
+  const compareFromRequest = createMemo(() => {
+    if (!compareRequest.value) return null
+
+    return currentCall()?.requests.find(
+      (request) => request.id === compareRequest.value,
+    )
+  })
+
+  const responseDiff = createMemo(() => {
+    if (!compareRequest.value || !uiStore.selectedRequest) return []
+
+    const activeResponse = activeRequest()?.response
+
+    const compareFromResponse = compareFromRequest()?.response
+
+    const diffParts = getDiff(compareFromResponse, activeResponse)
+
+    return diffParts === 'no changes' ? [] : diffParts
+  })
+
+  const payloadDiff = createMemo(() => {
+    if (!compareRequest.value || !uiStore.selectedRequest) return []
+
+    const activePayload = getPayload(activeRequest())
+
+    const compareFromPayload = getPayload(compareFromRequest())
+
+    const diffParts = getDiff(compareFromPayload, activePayload)
+
+    return diffParts === 'no changes' ? [] : diffParts
+  })
+
+  return (
+    <div class={containerStyle}>
+      <Select
+        value={compareRequest.value}
+        label="Select a request to compare with"
+        options={requestOptions()}
+        onChange={(value) => {
+          compareRequest.value = value
+        }}
+      />
+
+      <Show when={compareRequest.value}>
+        <div class="changes-count">
+          <span class="additions">
+            + <b>{responseDiff().filter((item) => item.added).length}</b> lines
+          </span>{' '}
+          |{' '}
+          <span class="removals">
+            - <b>{responseDiff().filter((item) => item.removed).length}</b>{' '}
+            lines
+          </span>
+        </div>
+
+        <Section
+          title={
+            activeRequest()?.payload
+              ? 'Payload Diff'
+              : activeRequest()?.searchParams
+              ? 'Search Params Diff'
+              : 'Path Params Diff'
+          }
+        >
+          <div class={diffContainerStyle}>
+            <For
+              each={payloadDiff()}
+              fallback={<div>No changes</div>}
+            >
+              {(item) => (
+                <div
+                  class="line"
+                  classList={{
+                    added: item.added,
+                    removed: item.removed,
+                  }}
+                >
+                  {item.value}
+                </div>
+              )}
+            </For>
+          </div>
+        </Section>
+
+        <Section title={'Response Diff'}>
+          <div class={diffContainerStyle}>
+            <For
+              each={responseDiff()}
+              fallback={<div>No changes</div>}
+            >
+              {(item) => (
+                <div
+                  class="line"
+                  classList={{
+                    added: item.added,
+                    removed: item.removed,
+                  }}
+                >
+                  {item.value}
+                </div>
+              )}
+            </For>
+          </div>
+        </Section>
+      </Show>
+    </div>
+  )
+}
+
+function getPayload(request: ApiRequest | undefined | null) {
+  if (!request) return null
+
+  return request.payload || request.searchParams || request.pathParams
+}