Skip to content

Instantly share code, notes, and snippets.

View souporserious's full-sized avatar

Travis Arnold souporserious

View GitHub Profile
/**
* Lock all scrollbars by disabling mousewheel and locking scrollbars in position
* Optionally provide an element to allow it to scroll when hovered
*/
const listenerOptions = supportsPassiveEvents
? { capture: true, passive: false }
: true
let lockedScrolls = []
function lockScroll(node) {
/** Get the closest element that scrolls */
function getClosestOverflowElement(node: HTMLElement, includeHidden?: boolean) {
if (node) {
const { overflow, overflowX, overflowY } = getComputedStyle(node)
const canScroll = (
includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/
).test(overflow + overflowX + overflowY)
if (node === document.body || canScroll) {
return node
} else {
@souporserious
souporserious / get-type-declarations.ts
Created April 4, 2023 15:19
Utility function to grab type declarations from an NPM package
import fs from 'node:fs/promises'
import path from 'node:path'
/** Fetches the types for a locally installed NPM package. */
export async function getTypeDeclarations(packageName) {
const [parentPackage, submodule] = packageName.split('/')
const parentPackagePath = path.resolve(
process.cwd(),
'node_modules',
parentPackage,
import * as React from 'react'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import ts from 'typescript'
import { setupTypeAcquisition } from '@typescript/ata'
import { signal } from '@preact/signals-core'
/** Type definitions for the current project. */
export const types = signal<{ code: string; path: string }[]>([])
const ata = setupTypeAcquisition({
@souporserious
souporserious / changed-pages.mjs
Last active July 11, 2023 16:11
Diffs the current checked out branch against main and returns the Next.js pages that have changed.
import { execSync } from 'node:child_process';
import parseGitDiff from 'parse-git-diff';
import { Node, Project, SyntaxKind } from 'ts-morph';
/**
* We're going to build a NextJS utility that compares two git branches and
* outputs a list of pages that have changed. We'll use TS-Morph to trace
* the references of the pages that are not obvious by the file name and directory
* structure that NextJS uses to render pages.
*/
@souporserious
souporserious / codemod.ts
Last active December 23, 2022 18:02
convert stack utility functions to components using TS Morph
#!/usr/bin/env node
import {
ReferencedSymbol,
Project,
ts,
Node,
SourceFile,
ImportDeclaration,
ImportClause,
JsxElement,
import { App } from '@tinyhttp/app'
import cors from 'cors'
import * as fs from 'fs/promises'
import * as prettier from 'prettier'
import * as codemod from '@codemod/core'
const app = new App()
const plugin = () => {
return {
@souporserious
souporserious / analyze.tsx
Last active January 22, 2025 18:17
Using TS Morph to analyze JSX
import React, { useState } from 'react';
import { Box, Text } from 'ink';
import TextInput from 'ink-text-input';
import Spinner from 'ink-spinner';
import Table from 'ink-table';
import type { ExportedDeclarations, ImportDeclaration } from 'ts-morph';
import { Project, SourceFile, ts } from 'ts-morph';
import { resolve } from 'node:path';
import { promises } from 'node:fs';
export function usePointer({
onStart,
onMove,
onEnd,
}: {
onStart: () => void
onMove: () => void
onEnd: () => void
}) {
const pressed = useSignal(false)
import * as React from "react"
import { useSnapshot } from "valtio"
import { TreeStateContext, TreeMapContext, createInitialTreeState } from "./contexts"
import { useServerComputedData } from "./server"
import { useIndex, useIndexedChildren } from "./use-indexed-children"
import { isServer, useIsomorphicLayoutEffect } from "./utils"
export function useTreeSnapshot<ComputedData extends any>(
computeData?: (treeMap: Map<string, any>) => ComputedData,