<input type="${1:text}" value={${2:value}()} onInput={e => ${3:setValue}(e.currentTarget.value)}/>

 function ${1:${TM_FILENAME_BASE}}() {

  return (
    <div>${1:${TM_FILENAME_BASE}}</div>
  );
}
  export default ${1:${TM_FILENAME_BASE}};

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
  $0
  return <div></div>;
};

const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
  $0
  return <div>{props.children}</div>;
};

const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
  $0
  return <div>{props.children}</div>;
};

const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
  $0
  return <div></div>;
};

import { Component } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
  $0
  return <div></div>;
};

import { ParentComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
  $0
  return <div>{props.children}</div>;
};

import { FlowComponent, JSX } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
  $0
  return <div>{props.children}</div>;
};

import { VoidComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
  $0
  return <div></div>;
};

const ${1:${TM_FILENAME_BASE}}: ParentComponent<
  JSX.IntrinsicElements["${2:div}"] & {
    $0
  }
> = (props) => {
  const [local, attrs] = splitProps(props, []);

  return <${2:div} {...attrs}>{props.children}</${2:div}>;
};

import { ParentComponent, splitProps, JSX } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: ParentComponent<
  JSX.IntrinsicElements["${2:div}"] & {
    $0
  }
> = (props) => {
  const [local, attrs] = splitProps(props, []);

  return <${2:div} {...attrs}>{props.children}</${2:div}>;
};

import { createContext, createSignal, useContext } from "solid-js";

const ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context = createContext();

export function ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Provider(props) {
  const [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}] = createSignal(props.${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i} || ""),
    store = [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}];

  return (
    <${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider value={store}>{props.children}</${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider>
  );
}

export function use${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}() {
  return useContext(${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context);
}

import { createContext, useContext, ParentComponent } from "solid-js";
import { createStore } from "solid-js/store";

const defaultState = {};

const ${1:Name}Context = createContext<[state: typeof defaultState, actions: {}]>([
  defaultState,
  {},
]);

export const ${1/(.*)/${1:/capitalize}/}Provider: ParentComponent = (props) => {
  const [state, setState] = createStore(defaultState);

  return (
    <${1/(.*)/${1:/capitalize}/}Context.Provider value={[state, {}]}>
      {props.children}
    </${1/(.*)/${1:/capitalize}/}Context.Provider>
  );
};

export const use${1/(.*)/${1:/capitalize}/} = () => useContext(${1/(.*)/${1:/capitalize}/}Context);

const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2});

createEffect(() => {
  const value = ${1:source}();
  $0
});

createEffect(on(${1: source}, (value, prev) => {
  $0
}));