Ryan Kahn shiftyp

## womp-womp.ts
interface RefHandles {
  scrollToIntent: HTMLElement['scrollTo'];
}

const targetElement = document.createElement('div');

const handles: RefHandles = {
  scrollToIntent(...args: any[]) {
    targetElement.scrollTo(...args);
  }

## state.js
let state = 1

const update = (value) => {
  state = value
  document.innerHTML = Array(value % 4).fill('Hello')
}

setInterval(() => update(Date.now()), 1000)

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <style>
    li { cursor: pointer }
  </style>
  <!--
    The first place JS and HTML intersect is a script tag

## example.tsx
import React from 'react'

import { useStable, useWatch } from '@objects/hooks'
import { through, map, debounce } from '@objects/operators'

interface Search {
  title: string
}

interface Data {

## example.js
wickedElements.define('.my-counter', (element, { events, changes, values }) => {
  const counter = element.querySelector('.count')
  const minus = element.querySelector('.minus')
  const plus = element.querySelector('.plus')

  changes(values).count(count => {
    counter.textContent = count
  })

  values.count = 0

## lazyAnalytics.ts
import { useInstance } from 'object-hooks';

class Analytics {
   private api = () => {
     const raceError = new Error('handler called before loaded');
     bugsnagClient.notify(raceError);
   };

   public log = (...args: any[]) => {
     return this.api(...args);

## gallery.js
import { useState, useReducer, useEffect } from 'react'

export function useGallery(
  collectionUrl,
  initialTag,
  initialPageNumber = 0
) {
  const [pageNumber, updatePageNumber] = useState(
    initialPageNumber,
  )

## snake.js
import { useReducer, useEffect, useRef, useCallback } from 'react'

const offsets = {
  n: [0, 1],
  s: [0, -1],
  e: [1, 0],
  w: [-1, 0],
}

const equals = (a, b) =>

## cart.js
import { useReducer, useState, useEffect } from "react";

const reduceCartFromOrders = (current, [id, quantity]) => {
  if (current === null) current = {};

  if (quantity === null) {
    delete current[id];

    return current;
  }

## settings.json
{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "meta.type.declaration",
          "meta.type.declaration entity",
          "meta.type.declaration entity.name.function",
          "meta.type.declaration entity.name.type",
          "meta.type.declaration keyword",
	interface RefHandles {
	scrollToIntent: HTMLElement['scrollTo'];
	}

	const targetElement = document.createElement('div');

	const handles: RefHandles = {
	scrollToIntent(...args: any[]) {
	targetElement.scrollTo(...args);
	}
	let state = 1

	const update = (value) => {
	state = value
	document.innerHTML = Array(value % 4).fill('Hello')
	}

	setInterval(() => update(Date.now()), 1000)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>My Page</title>
	<style>
	li { cursor: pointer }
	</style>
	<!--
	The first place JS and HTML intersect is a script tag
	import React from 'react'

	import { useStable, useWatch } from '@objects/hooks'
	import { through, map, debounce } from '@objects/operators'

	interface Search {
	title: string
	}

	interface Data {
	wickedElements.define('.my-counter', (element, { events, changes, values }) => {
	const counter = element.querySelector('.count')
	const minus = element.querySelector('.minus')
	const plus = element.querySelector('.plus')

	changes(values).count(count => {
	counter.textContent = count
	})

	values.count = 0
	import { useInstance } from 'object-hooks';

	class Analytics {
	private api = () => {
	const raceError = new Error('handler called before loaded');
	bugsnagClient.notify(raceError);
	};

	public log = (...args: any[]) => {
	return this.api(...args);
	import { useState, useReducer, useEffect } from 'react'

	export function useGallery(
	collectionUrl,
	initialTag,
	initialPageNumber = 0
	) {
	const [pageNumber, updatePageNumber] = useState(
	initialPageNumber,
	)
	import { useReducer, useEffect, useRef, useCallback } from 'react'

	const offsets = {
	n: [0, 1],
	s: [0, -1],
	e: [1, 0],
	w: [-1, 0],
	}

	const equals = (a, b) =>
	import { useReducer, useState, useEffect } from "react";

	const reduceCartFromOrders = (current, [id, quantity]) => {
	if (current === null) current = {};

	if (quantity === null) {
	delete current[id];

	return current;
	}
	{
	"editor.tokenColorCustomizations": {
	"textMateRules": [
	{
	"scope": [
	"meta.type.declaration",
	"meta.type.declaration entity",
	"meta.type.declaration entity.name.function",
	"meta.type.declaration entity.name.type",
	"meta.type.declaration keyword",