dburles

function compileStyles(strings, ...expressions) {
  let styles = '';
  strings.forEach((string, i) => {
    const expression = expressions[i];
    let expressionResult = '';
    if (expression !== undefined) {
      expressionResult = expressions[i];
    }
    styles += string + expressionResult;
  });

dburles

import { useEffect, useState, useLayoutEffect, useRef } from '../lib/react.js';
import compileStyles from './compile-styles.js';

let globalIdentifier = 0;

function css(strings, ...expressions) {
  const styleElementRef = useRef(document.createElement('style'));
  const compiledStyles = compileStyles(strings, ...expressions);
  const [className, setClassName] = useState();

dburles

const DialogContainer = ({ visible, onClickOutside, children }) => {
  // ...
  return (
    <Transition
      in={visible}
      timeout={{
        enter: 0,
        exit: 400,
      }}
      appear

dburles

import React, { memo, useEffect, useState } from 'react';

export default function State(initialState, setterHandler = value => value) {
  const subscriptions = [];
  let shouldUpdate = true;
  let state = initialState;

  function subscribe(fn) {
    subscriptions.push(fn);
    return function() {

dburles

Before:

Executing (default): SELECT `id` FROM `authors` AS `author` ORDER BY `author`.`createdAt` DESC;
Executing (default): SELECT `id`, `name`, `createdAt`, `updatedAt` FROM `authors` AS `author` WHERE `author`.`id` IN (3, 2, 1);
Executing (default): SELECT `id` FROM `books` AS `book` WHERE `book`.`authorId` = 3 ORDER BY `book`.`createdAt` DESC;
Executing (default): SELECT `id` FROM `books` AS `book` WHERE `book`.`authorId` = 2 ORDER BY `book`.`createdAt` DESC;
Executing (default): SELECT `id` FROM `books` AS `book` WHERE `book`.`authorId` = 1 ORDER BY `book`.`createdAt` DESC;
Executing (default): SELECT `id`, `title`, `createdAt`, `updatedAt`, `authorId` FROM `books` AS `book` WHERE `book`.`id` IN (3);
Executing (default): SELECT `id`, `title`, `createdAt`, `updatedAt`, `authorId` FROM `books` AS `book` WHERE `book`.`id` IN (4);
Executing (default): SELECT `id`, `title`, `createdAt`, `updatedAt`, `authorId` FROM `books` AS `book` WHERE `book`.`id` IN (2, 1);

dburles

import React from 'react';
import styled from 'styled-components';

const Center = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
`;

const Spinner = () => (

dburles

import { useState } from 'react';

export const useFormState = initialState => {
  const [formState, setFormState] = useState(initialState);

  const onChange = event => {
    const target = event.currentTarget;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    if (!name) {

dburles

import PropTypes from 'prop-types';
import React from 'react';

const Icon = props => {
  return (
    <svg
      width={props.width}
      height={props.height}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 500 500"

dburles

{
  "scripts": {
    "build": "babel src -d dist",
    "start": "node -r dotenv/config dist",
    "watch": "NODE_ENV=development nodemon --watch src --exec babel-node src/index.js"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {

dburles

{
	// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log($1);"