app-devtools 0.1.0 → 0.3.0

package/src/style/reset.ts

@@ -1,75 +0,0 @@
-export const resetStyle = `
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  min-height: 0;
-  min-width: 0;
-  flex-shrink: 0;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Remove default padding */
-ul[class],
-ol[class] {
-  padding: 0;
-}
-
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-ul[class],
-ol[class],
-li,
-figure,
-figcaption,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Set core body defaults */
-body {
-  scroll-behavior: smooth;
-}
-
-/* Natural flow and rhythm in articles by default */
-article > * + * {
-  margin-top: 1em;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-  cursor: pointer;
-}
-
-a:visited {
-  color: inherit;
-}
-
-button {
-  background: transparent;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  -webkit-appearance: none;
-}
-`

package/src/style/scrollBar.ts

@@ -1,37 +0,0 @@
-import { mq } from '@src/style/mediaQueries'
-import { colors } from '@src/style/theme'
-
-export const scrollBarStyle = `
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-
-  }
-
-  ${mq.mobile} {
-    *::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-  }
-
-  ::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    margin: 2px;
-    background-color: ${colors.bg.alpha(0.5)};
-
-    &:hover {
-      background-color: ${colors.bg.lighter(6)};
-    }
-
-    &:active {
-      background-color: ${colors.bg.lighter(11)};
-    }
-  }
-
-`

package/src/style/theme.ts

@@ -1,35 +0,0 @@
-import { createThemeColors } from '@utils/createThemev2'
-
-export const colors = createThemeColors({
-  bgPrimary: '#0F172A',
-  bgSecondary: '#1E293B',
-  textPrimary: '#fff',
-  primary: '#F472B6',
-  secondary: '#7DD3FC',
-  warning: '#FDE047',
-  error: '#f87171',
-  successDarker: '#0d9488',
-  success: '#4ADE80',
-  bg: '#EAEFFF',
-  white: '#fff',
-  black: '#000',
-})
-
-export const gradients = {
-  primary: `linear-gradient(90deg, #A78BFA, #00D4FF);`,
-  secondary: `linear-gradient(90deg, #448cfd , #6ee7b7);`,
-  red: `linear-gradient(90deg, #E53558 , #E75590);`,
-}
-
-export const shadows = {
-  modal: '0px 8px 16px rgba(26, 34, 46, 0.04)',
-  button: '0px 1px 8px rgba(26, 34, 46, 0.06)',
-  hardShadow: '0px 1px 8px rgba(26, 34, 46, 0.16)',
-}
-
-export type ThemeColors = keyof typeof colors
-
-export const fonts = {
-  primary: 'Work Sans, sans-serif',
-  decorative: '"Fira Code", monospaced',
-}

package/src/types/global.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="babel-plugin-solid-labels" />
-
-import * as oslu from 'oslu'
-
-declare global {
-  const watchValue: typeof oslu.watchValue
-}

package/src/utils/initializeScreenLogger.ts

@@ -1,12 +0,0 @@
-if (import.meta.env.DEV) {
-  const oslu = await import('oslu')
-
-  oslu.initializeTempLogs({ ignoreErrors: [] })
-
-  oslu.initializePersistentLogs()
-
-  const anyGlobalThis = globalThis as any
-
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  anyGlobalThis.watchValue = oslu.watchValue
-}

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "jsxImportSource": "solid-js",
-    "skipLibCheck": true,
-    "types": ["node"],
-    "noEmit": true,
-    "esModuleInterop": true,
-    "strictNullChecks": true,
-    "noImplicitReturns": true,
-    "resolveJsonModule": true,
-    "noImplicitAny": true,
-    "alwaysStrict": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "forceConsistentCasingInFileNames": true,
-    "strictPropertyInitialization": true,
-
-    "baseUrl": ".",
-    "paths": {
-      "@src/*": ["src/*"],
-      "@utils/*": ["utils/*"]
-    },
-
-    "plugins": [
-      {
-        "name": "typescript-styled-plugin",
-        "tags": ["css"]
-      }
-    ]
-  }
-}

package/tsconfig.prod.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "noEmit": false,
-    "declaration": true
-  },
-  "files": ["src/main.ts"],
-  "include": ["src/types/*.ts"]
-}

package/tsup.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'tsup'
-import glob from 'tiny-glob'
-
-export default defineConfig({
-  entry: ['src/main.ts'],
-  format: ['esm'],
-})

package/utils/arrayUtils.ts

@@ -1,29 +0,0 @@
-export function reverseCopy<T>(array: T[] | null | undefined): T[] {
-  if (!array) return []
-
-  return array.slice().reverse()
-}
-
-export function withIndex<T>(array: T[]): [T, number][] {
-  return array.map((item, index) => [item, index])
-}
-
-export function mapArrayToMap<
-  K extends string | number,
-  T extends any[] | readonly any[],
-  O,
->(
-  array: T,
-  mapFunction: (item: T[number], index: number) => [key: K, value: O],
-): Map<K, O> {
-  const map = new Map<K, O>()
-
-  for (let i = 0; i < array.length; i++) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const [key, value] = mapFunction(array[i], i)
-
-    map.set(key, value)
-  }
-
-  return map
-}

package/utils/assertions.ts

@@ -1,7 +0,0 @@
-export function assertIsNotNullish<T>(
-  value: T,
-): asserts value is NonNullable<T> {
-  if (value === null || value === undefined) {
-    throw new Error('Value is null or undefined')
-  }
-}

package/utils/autoIncrementId.ts

@@ -1,5 +0,0 @@
-let id = 0;
-
-export function autoIncrementId() {
-  return id++;
-}

package/utils/createThemev2.ts

@@ -1,64 +0,0 @@
-import { hexToRgb } from '@utils/hexToRgb'
-import { typedObjectEntries } from '@utils/typed'
-
-const rootStyle = document.documentElement.style
-
-type ColorProps = {
-  var: string
-  raw: string
-  red: number
-  green: number
-  blue: number
-  alpha: (alpha: number) => string
-  darker: (percentage: number, alpha?: number) => string
-  lighter: (percentage: number, alpha?: number) => string
-}
-
-let autoId = 1
-
-export function createThemeColors<C extends Record<string, string>>(colors: C) {
-  const themeColors: Record<keyof C, ColorProps> = {} as any
-
-  for (const [name, color] of typedObjectEntries(colors)) {
-    const [red, green, blue] = hexToRgb(color)
-
-    const colorId = `c${autoId}`
-    autoId++
-
-    rootStyle.setProperty(`--${colorId}-r`, String(red))
-    rootStyle.setProperty(`--${colorId}-g`, String(green))
-    rootStyle.setProperty(`--${colorId}-b`, String(blue))
-    rootStyle.setProperty(`--${colorId}`, color)
-
-    themeColors[name] = {
-      red: red!,
-      green: green!,
-      blue: blue!,
-      var: `var(--${colorId})`,
-      raw: color,
-      alpha: (alpha) =>
-        `rgba(var(--${colorId}-r), var(--${colorId}-g), var(--${colorId}-b), ${alpha})`,
-      darker: (percentage, alpha) => {
-        const weight = percentage / 100
-
-        return `${alpha ? 'rgba' : 'rgb'}(${[
-          `calc(var(--${colorId}-r) - var(--${colorId}-r) * ${weight})`,
-          `calc(var(--${colorId}-g) - var(--${colorId}-g) * ${weight})`,
-          `calc(var(--${colorId}-b) - var(--${colorId}-b) * ${weight})`,
-        ].join(',')}${alpha !== undefined ? `, ${alpha}` : ''})`
-      },
-      lighter: (percentage, alpha) => {
-        const weight = percentage / 100
-
-        // mix function = c1r + (c2r - c1r) * weight, for each rgb value
-        return `${alpha ? 'rgba' : 'rgb'}(${[
-          `calc(var(--${colorId}-r) + (255 - var(--${colorId}-r)) * ${weight})`,
-          `calc(var(--${colorId}-g) + (255 - var(--${colorId}-g)) * ${weight})`,
-          `calc(var(--${colorId}-b) + (255 - var(--${colorId}-b)) * ${weight})`,
-        ].join(',')}${alpha !== undefined ? `, ${alpha}` : ''})`
-      },
-    }
-  }
-
-  return themeColors
-}

package/utils/cx.ts

@@ -1,27 +0,0 @@
-import { anyObj } from '@utils/typings'
-
-/**
- * Utility for conditionally joining classNames together
- */
-export function cx(...args: (string | false | undefined | null | anyObj)[]) {
-  const classNames = []
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]
-    if (!arg) continue
-
-    const argType = typeof arg
-
-    if (argType === 'string' || argType === 'number') {
-      classNames.push(arg)
-    } else if (argType === 'object') {
-      for (let i2 = 0, keys = Object.keys(arg); i2 < keys.length; i2++) {
-        if ((arg as anyObj<boolean>)[keys[i2]!]) {
-          classNames.push(keys[i2])
-        }
-      }
-    }
-  }
-
-  return classNames.join(' ')
-}

package/utils/getDiff.ts

@@ -1,15 +0,0 @@
-import { dequal } from 'dequal'
-import * as diff from 'diff'
-
-export function getDiff(from: unknown, to: unknown) {
-  if (dequal(from, to)) {
-    return 'no changes'
-  }
-
-  const diffs = diff.diffJson(
-    typeof from === 'object' && from !== null ? from : String(from),
-    typeof to === 'object' && to !== null ? to : String(to),
-  )
-
-  return diffs
-}

package/utils/hexToRgb.ts

@@ -1,14 +0,0 @@
-export function hexToRgb(hex: string) {
-  if (hex.length < 4) throw new Error('Invalid hex value');
-
-  return (
-    hex
-      .replace(
-        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-        (m: string, r: string, g: string, b: string) =>
-          `#${r}${r}${g}${g}${b}${b}`,
-      )
-      .substring(1)
-      .match(/.{2}/g) || []
-  ).map((x: string) => parseInt(x, 16));
-}

package/utils/objectUtils.ts

@@ -1,3 +0,0 @@
-export function isObject(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === 'object'
-}

package/utils/parseUnit.ts

@@ -1,10 +0,0 @@
-export function parseUnit(
-  value: string | number | number[],
-  defaultUnit = 'px',
-) {
-  return typeof value === 'string'
-    ? String(value)
-    : Array.isArray(value)
-    ? value.map((item) => `${item}${defaultUnit}`).join(' ')
-    : `${value}${defaultUnit}`;
-}

package/utils/solid.ts

@@ -1,76 +0,0 @@
-import { dequal } from 'dequal'
-import { createEffect, createMemo, createRoot, createSignal } from 'solid-js'
-
-export function subscribe(callback: () => any) {
-  let disposer: (() => void) | null = null
-
-  createRoot((dispose) => {
-    createEffect(() => {
-      disposer = dispose
-      callback()
-    })
-  })
-
-  return disposer!
-}
-
-export type ReconcileItems<T> = T[]
-
-export function reconcile<T>(
-  original: readonly T[] | undefined | null,
-  newItems: ReconcileItems<T>,
-  key: keyof T,
-): T[] {
-  if (!original) {
-    return newItems
-  }
-
-  const final: T[] = []
-
-  const originalMap = new Map<any, T>(original.map((item) => [item[key], item]))
-
-  for (const item of newItems) {
-    const currentValue = originalMap.get(item[key])
-
-    if (!currentValue) {
-      final.push(item)
-    } else if (dequal(currentValue, item)) {
-      final.push(currentValue)
-    } else {
-      final.push(item)
-    }
-  }
-
-  return final
-}
-
-export function createReconciledArray<T>(
-  array: T[] | (() => T[]),
-  key: keyof T,
-) {
-  return createMemo<T[]>((prev) => {
-    return reconcile(prev, typeof array === 'function' ? array() : array, key)
-  })
-}
-
-export function createElemRef<E extends HTMLElement>() {
-  const ref = undefined as E | undefined
-
-  return ref
-}
-
-export function createSignalRef<T>(initialValue: T) {
-  const [value, setValue] = createSignal(initialValue)
-
-  return {
-    get value() {
-      return value()
-    },
-    set value(newValue) {
-      setValue(() => newValue)
-    },
-    set(newValue: T) {
-      setValue(() => newValue)
-    },
-  }
-}

package/utils/truncateText.ts

@@ -1,7 +0,0 @@
-export function truncateText(text: string, max: number) {
-  if (text.length > max) {
-    return `${text.slice(0, max)}...`
-  }
-
-  return text
-}

package/utils/tryExpression.ts

@@ -1,14 +0,0 @@
-export function tryExpression<T>(
-  expression: () => T,
-  onError?: (error: unknown) => void,
-): T | null {
-  try {
-    return expression()
-  } catch (error) {
-    if (onError) {
-      onError(error)
-    }
-
-    return null
-  }
-}

package/utils/typed.ts

@@ -1,23 +0,0 @@
-/** a wrapper to Object.entries with a better typing inference */
-export function typedObjectEntries<T extends object>(
-  obj: T,
-): NonNullable<
-  {
-    [K in keyof T]: [K, T[K]]
-  }[keyof T]
->[] {
-  return Object.entries(obj) as any
-}
-
-/** a wrapper to Object.keys with a better typing inference */
-export function typedObjectKeys<T extends object>(obj: T): (keyof T)[] {
-  return Object.keys(obj) as any
-}
-
-export function arrayIsNotEmpty<T>(arr: T[] | null | undefined): arr is T[] {
-  return !!arr && arr.length !== 0
-}
-
-export function asType<T>(value: T): T {
-  return value as T
-}

package/utils/typings.ts

@@ -1,40 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type anyObj<T = any> = {
-  [key: string]: T
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type anyFunction = {
-  (...params: any): any
-}
-
-export type Serializable =
-  | boolean
-  | number
-  | string
-  | null
-  | undefined
-  | Serializable[]
-  | { [key: string]: Serializable }
-
-export type StrictEqualTypes = string | number | undefined
-
-export type PartialRecord<K extends keyof any, T> = {
-  [P in K]?: T
-}
-
-export type ObjectPropValue<T extends anyObj> = T[keyof T]
-
-export type MutuallyAssignable<T extends U, U extends V, V = T> = void
-
-export type Modify<T, R> = Omit<T, keyof R> & R
-
-export type StrictPropertyCheck<
-  T,
-  TExpected,
-  TError = 'Type does not satisfies the expected shape',
-> = T extends TExpected
-  ? Exclude<keyof T, keyof TExpected> extends never
-    ? T
-    : TError
-  : TExpected

package/utils/urlPattern.ts

@@ -1,25 +0,0 @@
-import { parse } from 'regexparam'
-
-export function matchURLPattern(url: string, pattern: string) {
-  const regex = parse(pattern)
-
-  return exec(url, regex)
-}
-
-function exec(
-  path: string,
-  result: { keys: string[]; pattern: RegExp },
-): Record<string, string | null> | null {
-  let i = 0
-  const out = {} as Record<string, string | null>
-
-  const matches = result.pattern.exec(path)
-
-  if (!matches) return null
-
-  while (i < result.keys.length) {
-    out[result.keys[i]!] = matches[++i] || null
-  }
-
-  return out
-}

package/vite.config.ts

@@ -1,46 +0,0 @@
-import solidLabels from 'babel-plugin-solid-labels'
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
-import packageJson from './package.json'
-
-export default defineConfig((config) => ({
-  plugins: [
-    solidPlugin({
-      babel: {
-        plugins: [[solidLabels, { dev: config.command === 'serve' }]],
-      },
-    }),
-  ],
-  build: {
-    target: 'esnext',
-    assetsInlineLimit: 0,
-    lib: {
-      entry: resolve(__dirname, 'src/main.ts'),
-      name: 'App Devtools',
-      // the proper extensions will be added
-      fileName: 'main',
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: [...Object.keys(packageJson.dependencies)],
-      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {},
-      },
-    },
-  },
-  resolve: {
-    alias: [
-      { find: '@src', replacement: '/src' },
-      { find: '@utils', replacement: '/utils' },
-    ],
-  },
-  test: {
-    include: ['test/*.test.{ts,tsx}'],
-    testTimeout: 5_000,
-    environment: 'happy-dom',
-  },
-}))