ecmascript.snippets

priority -50

############
#  COMMON  #
############

# The smart snippets use a global options called
# "g:ultisnips_javascript.{option}" which can control the format
# of trailing semicolon, space before function paren, etc.
#
# e.g.
# let g:ultisnips_javascript = {
#      \ 'keyword-spacing': 'always',
#      \ 'semi': 'never',
#      \ 'space-before-function-paren': 'always',
#      \ }


global !p
ALWAYS = 'always'
NEVER = 'never'


def get_option(snip, option, default=None):
    return snip.opt('g:ultisnips_javascript["{}"]'.format(option), default)


def semi(snip):
    option = get_option(snip, 'semi', ALWAYS)

    if option == NEVER:
        ret = ''
    elif option == ALWAYS:
        ret = ';'
    else:
        ret = ';'
    return ret


def space_before_function_paren(snip):
    option = get_option(snip, 'space-before-function-paren', NEVER)

    if option == NEVER:
        ret = ''
    elif option == ALWAYS:
        ret = ' '
    else:
        ret = ''
    return ret


def keyword_spacing(snip):
    option = get_option(snip, 'keyword-spacing', ALWAYS)

    if option == NEVER:
        ret = ''
    elif option == ALWAYS:
        ret = ' '
    else:
        ret = ''
    return ret

def upperfirst(t):
	if len(t) < 2:
		return '' if len(t) < 1 else t.capitalize()
	return t[0].capitalize() + t[1:]

def lowerdash(t):
	return '-'.join([ w.lower() for w in re.findall('[a-z]+|[A-Z]+[a-z]*', t) ])

endglobal

###########################################################################
#                            TextMate Snippets                            #
###########################################################################
snippet => "Arrow Function bare"
const ${1:fn} = ${2:arg} => ${3:retStatement};
endsnippet

snippet =>{} "Arrow Function curly return"
const ${1:fn} =  ${2:arg} => {
  $0

  return $3;
}
endsnippet

snippet =>() "Arrow Function full"
const ${1:fn} = (${2:args}) => {
  $0

  return $3;
}
endsnippet

snippet fetch:G "fetch with GET"
const headers = new Headers();
headers.append('Content-Type', 'application/json');

const req = new Request(
  ${1:url},
  {
    method: 'GET',
    headers,
    mode: 'cors',
    cache: 'default',
  }
);

fetch(req)
  .then(response => {
    if (!response.ok) {
      throw new Error(response.status + ': ' + response.statusText);
    }

    return response.json();
  })
  .then(transformData)
  .catch(e => console.log(e.message))
  .finally(d => {
    if (!d instanceof Error) {
        $0
    }
  })
endsnippet

snippet fetch:P "fetch with POST"
const headers = new Headers();
headers.append('Content-Type', 'application/json');

const req = new Request(
  ${1:url},
  {
    method: 'POST',
    headers,
    body: ${2:jsonObj}
    mode: 'cors',
    cache: 'default',
  }
);

fetch(req)
  .then(response => {
    if (!response.ok) {
      throw new Error(response.status + ': ' + response.statusText);
    }

    return response.json();
  })
  .then(transformData)
  .catch(e => console.log(e.message))
  .finally(d => {
    if (!d instanceof Error) {
        $0
    }
  })
endsnippet

snippet sortBy "Array sortBy proxyfied"
const by = (propAccessor, builtinType) => {
  let accessor;
  const traveller = (prop) => {
    if (!propAccessor) {
      return prop;
    }

    let deepProp = prop;
    let breadCrumbs = propAccessor.split('.');

    for (let p of breadCrumbs) {
      deepProp = deepProp[p];
    }

    return deepProp;
  }

  switch (builtinType) {
    case Date:
      accessor = p => {
        _p = traveller(p);

        return _p instanceof Date ? _p.getTime() : new Date(_p).getTime();
      }
      break;
    default:
      accessor = p => traveller(p);
  }

  return {
    ascending(a, b) {
      return builtinType === String ?
        accessor(a).localeCompare(accessor(b)) :
        accessor(a) - accessor(b);
    },
    descending(a, b) {
      return builtinType === String ?
        accessor(b).localeCompare(accessor(a)) :
        accessor(b) - accessor(a);
    }
  }
}
endsnippet

snippet get "Get Elements"
getElement${1/(T)|(C)|.*/(?1:s)(?2:s)/}By${1:T}${1/(T)|(I)|(C).*/(?1:agName)(?2:d)(?3:lassName)/}('$2')
endsnippet

snippet '':f "object method string"
'${1:${2:#thing}:${3:click}}': function`!p snip.rv = space_before_function_paren(snip)`(element) {
	${VISUAL}$0
}${10:,}
endsnippet

snippet :f "Object Method"
${1:method_name}: function`!p snip.rv = space_before_function_paren(snip)`(${3:attribute}) {
	${VISUAL}$0
}${10:,}
endsnippet

snippet :, "Object Value JS"
${1:value_name}: ${0:value},
endsnippet

snippet : "Object key key: 'value'"
${1:key}: ${2:"${3:value}"}${4:, }
endsnippet

snippet proto "Prototype (proto)"
${1:class_name}.prototype.${2:method_name} = function`!p snip.rv = space_before_function_paren(snip)`(${3:first_argument}) {
	${VISUAL}$0
}`!p snip.rv = semi(snip)`

endsnippet

snippet fun "function (named)" b
function ${1:function_name}`!p snip.rv = space_before_function_paren(snip)`(${2:argument}) {
	${VISUAL}$0
}
endsnippet

snippet vf "function (assigned to var)"
${1:var }${2:function_name} = function $2`!p snip.rv = space_before_function_paren(snip)`($3) {
	${VISUAL}$0
}`!p snip.rv = semi(snip)`
endsnippet

# Drop priority so this only triggers when not beginning of line.
priority -51
snippet fun "function (anonymous)" w
function`!p snip.rv = space_before_function_paren(snip)`($1) {
	${VISUAL}$0
}$2
endsnippet
priority -50

snippet anf "function (anonymous)" i
function`!p snip.rv = space_before_function_paren(snip)`($1) {
	${VISUAL}$0
}
endsnippet

snippet iife "Immediately-Invoked Function Expression (iife)"
(function`!p snip.rv = space_before_function_paren(snip)`(${1:window}) {
	${VISUAL}$0
}(${2:$1}))`!p snip.rv = semi(snip)`
endsnippet

snippet ;fe "Minify safe iife"
;(function`!p snip.rv = space_before_function_paren(snip)`(${1}) {
	${VISUAL}$0
}(${2}))
endsnippet

snippet timeout "setTimeout function"
setTimeout(function`!p snip.rv = space_before_function_paren(snip)`() {
	${VISUAL}$0
}${2:.bind(${3:this})}, ${1:10})`!p snip.rv = semi(snip)`
endsnippet

snippet fi "for prop in obj using hasOwnProperty" b
for`!p snip.rv = keyword_spacing(snip)`(${1:prop} in ${2:obj}){
	if`!p snip.rv = keyword_spacing(snip)`($2.hasOwnProperty($1)) {
		${VISUAL}$0
	}
}
endsnippet

snippet if "if (condition) { ... }"
if`!p snip.rv = keyword_spacing(snip)`(${1:true}) {
	${VISUAL}$0
}
endsnippet

snippet ife "if (condition) { ... } else { ... }"
if`!p snip.rv = keyword_spacing(snip)`(${1:true}) {
	${VISUAL}$0
}`!p snip.rv = keyword_spacing(snip)`else`!p snip.rv = keyword_spacing(snip)`{
	${2}
}
endsnippet

snippet switch
switch`!p snip.rv = keyword_spacing(snip)`(${VISUAL}${1:expression}) {
	case '${VISUAL}${3:case}':
		${4}
		break`!p snip.rv = semi(snip)`
	${0}
	default:
		${2}
}
endsnippet

snippet case "case 'xyz': ... break"
case`!p snip.rv = keyword_spacing(snip)`'${VISUAL}${1:case}':
	${VISUAL}$0
	break`!p snip.rv = semi(snip)`
endsnippet

snippet do "do { ... } while (condition)"
do`!p snip.rv = keyword_spacing(snip)`{
	${VISUAL}$0
}`!p snip.rv = keyword_spacing(snip)`while`!p snip.rv = keyword_spacing(snip)`(${1:/* condition */})`!p snip.rv = semi(snip)`
endsnippet

snippet ret "Return statement"
return ${VISUAL}$0`!p snip.rv = semi(snip)`
endsnippet

snippet us
'use strict'`!p snip.rv = semi(snip)`
endsnippet

# vim:ft=snippets:

snippet im:RF "usual import state for FP in React" b
import React, {
  FC,
  PropsWithChildren,
  useState,
} from "react";
endsnippet

snippet im:ROOP "usual import for OOP in React" b
import React, { Component } from "react";
endsnippet

snippet im:. "import classnames package" b
import classnames from "classnames";
endsnippet

snippet im:_ "import lodash package" b
import lodash from "lodash";
endsnippet

snippet us:S "useState"
const [ ${1:my}State, set${1/\w+/\u$0/}State ] = useState($2);
endsnippet

snippet us:E "useEffect"
useEffect(() => {
	$0
}, [${1:updateIndicator}])
endsnippet

snippet testSetupTeardown "usual setup teardown boilerplate" b
import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

$0
endsnippet

snippet testIt "minimal function boilerplate" b
it("renders $0", () => {
	act(() => {
		render($1, container);
	});
	expect(container$2);
});
endsnippet

snippet testAct "minimal function boilerplate" b
	act(() => {
		render($1, container);
	});
	expect(container$2);
endsnippet

snippet testExpectQuerySelectorText "minimal function boilerplate" b
  expect(container.querySelector("summary").textContent).toBe();
endsnippet

snippet testExpectQuerySelectorAttribute "minimal function boilerplate" b
  expect(container.querySelector("summary").getAttribute("$0")).toEqual("$1");
endsnippet

snippet testExpectTextToBe "minimal function boilerplate" b
	expect(container.textContent).toBe();
endsnippet

snippet testExpectTextToContain "minimal function boilerplate" b
	expect(container.textContent).toContain();
endsnippet

snippet testFetch "usual setup to test mock API fetch" b
it("renders dynamic data driven stuff", async () => {
  const fakeJSON = {};
  jest.spyOn(global, "fetch").mockImplementation(() =>
    Promise.resolve({
      json: () => Promise.resolve(fakeJSON)
    })
  );

  // Use the asynchronous version of act to apply resolved promises
  await act(async () => {
    render(<Component />, container);
  });

  // remove the mock to ensure tests are completely isolated
  global.fetch.mockRestore();
});
endsnippet

snippet testHandleEvent "event checking boilerplate" b
it("changes value when clicked", () => {
  const onHandle = jest.fn();
  act(() => {
    render(<Component on$0={onHandle} />, container);
  });

  const component = document.querySelector("[$1]");
  expect(component.innerHTML).toBe($2);

  act(() => {
    component.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

  expect(onHandle).toHaveBeenCalledTimes(1);
  expect(button.innerHTML).toBe($3);
});
endsnippet