feat: h2 snippets package

packages/vscode-snippets/.vscode/launch.json

@@ -0,0 +1,16 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
+    }
+  ]
+}

packages/vscode-snippets/README.md

@@ -0,0 +1,63 @@
+# Hydrogen VSCode Snippets
+
+## `usq`
+
+Use `useShopQuery()`
+
+```ts
+const {data} = useShopQuery({query: QUERY});
+```
+
+## `sq`
+
+New Storefront query
+
+```ts
+import gql from 'graphql-tag';
+
+const QUERY = gql`
+  query Query {
+    ...
+  }
+`;
+```
+
+## `imph`
+
+Import from hydrogen
+
+```ts
+import {...} from '@shopify/hydrogen';
+```
+
+## `hp`
+
+New Hydrogen page
+
+```tsx
+function Page {
+  return (
+    <div>
+      ...
+    </div>
+  )
+}
+
+export default Page;
+```
+
+## `ppfv`
+
+`ProductProviderFragment` variables
+
+```graphql
+  $country: CountryCode
+  $handle: String!
+  $numProductMetafields: Int = 20
+  $numProductVariants: Int = 250
+  $numProductMedia: Int = 6
+  $numProductVariantMetafields: Int = 10
+  $numProductVariantSellingPlanAllocations: Int = 0
+  $numProductSellingPlanGroups: Int = 0
+  $numProductSellingPlans: Int = 0
+```

packages/vscode-snippets/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "hydrogen-vscode-snippets",
+  "displayName": "@shopify/hydrogen VSCode Snippets",
+  "description": "Snippets for use in @shopify/hydrogen apps",
+  "version": "0.0.0",
+  "publisher": "@shopify",
+  "icon": "HydrogenLogo.png",
+  "license": "MIT",
+  "engines": {
+    "vscode": "^1.28.0"
+  },
+  "categories": [
+    "Snippets"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shopify/hydrogen.git",
+    "directory": "packages/snippets"
+  },
+  "contributes": {
+    "snippets": [
+      {
+        "language": "javascript",
+        "path": "./snippets.json"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./snippets.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets.json"
+      }
+    ]
+  }
+}

packages/vscode-snippets/snippets.json

@@ -0,0 +1,60 @@
+{
+  "useShopQuery": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "usq",
+    "body": ["const {data} = useShopQuery({query: ${2:QUERY}});"],
+    "description": "Use useShopQuery"
+  },
+  "New Storefront query": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "sq",
+    "body": [
+      "import gql from 'graphql-tag';",
+      "",
+      "const QUERY = gql`",
+      "\tquery ${1:${TM_FILENAME_BASE/[\\.-]//g}}Query$2 {",
+      "\t\t$3",
+      "\t}",
+      "`"
+    ],
+    "description": "New Storefront query"
+  },
+  "importFromHydrogen": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "imph",
+    "body": "import { $2 } from '@shopify/hydrogen$0'",
+    "description": "Import from hydrogen"
+  },
+  "New Hydrogen page": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "hp",
+    "body": [
+      "function ${1:${TM_FILENAME_BASE/[\\.-]//g}}($2) {",
+      "\treturn (",
+      "\t\t<div>",
+      "\t\t\t$0",
+      "\t\t</div>",
+      "\t)",
+      "}",
+      "",
+      "export default ${1:${TM_FILENAME_BASE/[\\.-]//g}}"
+    ],
+    "description": "Create a new Hydrogen Page"
+  },
+  "ProductProviderFragment variables": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "ppfv",
+    "body": [
+      "$country: CountryCode",
+      "$handle: String!",
+      "$numProductMetafields: Int = 20",
+      "$numProductVariants: Int = 250",
+      "$numProductMedia: Int = 6",
+      "$numProductVariantMetafields: Int = 10",
+      "$numProductVariantSellingPlanAllocations: Int = 0",
+      "$numProductSellingPlanGroups: Int = 0",
+      "$numProductSellingPlans: Int = 0"
+    ],
+    "description": "Output ProductProviderFragment variables"
+  }
+}