dadamssg

Interacting with the API

fetchTyped

The application is using getLoadContext which gets the user and creates an api client bound to the current user. This api client, fetchTyped, wraps the native fetch function and will automatically include the jwt token stored in the session for that request. It also accepts a zod schema to validate the returned json. This is located on the app context object that can be retrieved in actions and loaders.

export async function loader({ context }: Route.LoaderArgs) {
  const ctx = getAppContext(context)

dadamssg

test

dadamssg

type MockArgs = {
  path: string
  method: 'get' | 'post' | 'put' | 'delete'
  once?: boolean
  response: any
}

export async function mock(args: MockArgs) {
  const url = args.path.startsWith('http') ? args.path : `http://localhost:6000${args.path}`
  return fetch('http://localhost:3000/app/playwright', {

dadamssg

import { expect, test } from '@playwright/test'
import { login } from './auth'
import { mock } from './utils'

test('can view contacts', async ({ page }) => {
  await login({ page })
  await mock({
    path: '/people',
    method: 'post',
    once: true,

dadamssg

import { expect, test } from '@playwright/test'
import { login } from './auth'

test('can view contacts', async ({ page }) => {
  await login({ page })
  // remix is running on port 3000
  await fetch('http://localhost:3000/app/playwright', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({

dadamssg

// app/routes/app/playwright.ts
import type { ActionFunctionArgs } from '@remix-run/node'
import { server } from '~/mocks/node'
import { z } from 'zod'
import { http, HttpResponse } from 'msw'

export async function action({ request }: ActionFunctionArgs) {
  if (process.env.NODE_ENV === 'production') {
    throw new Error('No mocking in prod, silly.')
  }

dadamssg

// Name: Move code left
// Shortcut: cmd shift t
// Author: David Adams
// Twitter: @dadamssg

import "@johnlindquist/kit"

let text = await getSelectedText()
let lines = text.split("\n")
let lineStarts = lines.map(line => line.search(/\S/))

dadamssg

// Name: format-json
// Shortcut: cmd shift j
// Author: David Adams
// Twitter: @dadamssg

import "@johnlindquist/kit"
let jsonabc = await npm("jsonabc")

let text = await getSelectedText()

dadamssg

The problem

Time Machine will backup your files. For a developer, and having loads of node_modules and vendor directories for projects, this is huge time suck and waste since those can be brought back with npm, yarn, composer, etc.

The solution

Directories can be excluded from Time Machine using the cli.

Adding exclusions

First, verify that you can get a list of directories that you want to exclude:

cd "$HOME/code" && find $(pwd) -maxdepth 3 -type d \( -name vendor -o -name node_modules \)

dadamssg

Live Templates

Component boilerplate

Uses file name to generate component.

Template text:

import React, {Fragment} from 'react'