Code snippets for Svelte projects

example.svelte

<script lang="ts">
  let foo = 1;
  let lastFoo: typeof foo;
  $: {
    fooChanged(foo, lastFoo);
    lastFoo = foo;
  }
  
  function fooChanged(current: typeof foo, previous?: typeof foo) {
      console.log(current, previous);
  }
</script>

<button on:click={() => foo++}>Click me!</button>

svelte-patterns.code-snippets

{
	"Change Listener Pattern (Typed)": {
		"scope": "typescript",
		"prefix": "change",
		"body": [
			"let last${1/(.*)/${1:/capitalize}/}: typeof $1;",
			"\\$: {",
			"\t$1Changed($1, last${1/(.*)/${1:/capitalize}/});",
			"\tlast${1/(.*)/${1:/capitalize}/} = $1;",
			"}",
			"",
			"function $1Changed(current: typeof $1, previous?: typeof $1) {",
			"\t$2",
			"}"
		]
	},
	"Change Listener Pattern (Untyped)": {
		"scope": "javascript",
		"prefix": "change",
		"body": [
			"let last${1/(.*)/${1:/capitalize}/};",
			"\\$: {",
			"\t$1Changed($1, last${1/(.*)/${1:/capitalize}/});",
			"\tlast${1/(.*)/${1:/capitalize}/} = $1;",
			"}",
			"",
			"function $1Changed(current, previous) {",
			"\t$2",
			"}"
		]
	},
	"Change Listener Pattern (Store, Typed)": {
		"scope": "typescript",
		"prefix": "store-change",
		"body": [
			"let last${1/(.*)/${1:/capitalize}/}: typeof \\$$1;",
			"\\$: {",
			"\t$1Changed(\\$$1, last${1/(.*)/${1:/capitalize}/});",
			"\tlast${1/(.*)/${1:/capitalize}/} = \\$$1;",
			"}",
			"",
			"function $1Changed(current: typeof \\$$1, previous?: typeof \\$$1) {",
			"\t$2",
			"}"
		]
	},
	"Change Listener Pattern (Store, Untyped)": {
		"scope": "javascript",
		"prefix": "store-change",
		"body": [
			"let last${1/(.*)/${1:/capitalize}/};",
			"\\$: {",
			"\t$1Changed(\\$$1, last${1/(.*)/${1:/capitalize}/});",
			"\tlast${1/(.*)/${1:/capitalize}/} = \\$$1;",
			"}",
			"",
			"function $1Changed(current, previous) {",
			"\t$2",
			"}"
		]
	},
	"Script (Typed)": {
		"scope": "svelte",
		"prefix": "ts",
		"body": [
			"<script lang=\"ts\">",
			"\t$1",
			"</script>"
		]
	},
	"Script (Untyped)": {
		"scope": "svelte",
		"prefix": "js",
		"body": [
			"<script>",
			"\t$1",
			"</script>"
		]
	},
	"Script (Module, Typed)": {
		"scope": "svelte",
		"prefix": "module-ts",
		"body": [
			"<script lang=\"ts\" context=\"module\">",
			"\t$1",
			"</script>"
		]
	},
	"Script (Module, Untyped)": {
		"scope": "svelte",
		"prefix": "module-js",
		"body": [
			"<script context=\"module\">",
			"\t$1",
			"</script>"
		]
	},
}