WRNexusJS/editors/vscode/snippets/wrn.json

{
  "WRN page": {
    "prefix": ["wrn-page", "page"],
    "description": "Create a WRN page",
    "body": [
      "page ${1:PageName} {",
      "    layout = \"${2:default}\"",
      "",
      "    seo {",
      "        title = \"${3:Page title}\"",
      "        description = \"${4:Page description}\"",
      "    }",
      "",
      "    view {",
      "        <main>",
      "            <h1>${5:Page heading}</h1>",
      "        </main>",
      "    }",
      "}"
    ]
  },

  "WRN dynamic page": {
    "prefix": ["wrn-dynamic-page", "dynamic-page"],
    "description": "Create a WRN page with a route parameter",
    "body": [
      "page ${1:DynamicPage} {",
      "    layout = \"${2:default}\"",
      "",
      "    state ${3:id} = ctx.params.${3:id}",
      "",
      "    view {",
      "        <main>",
      "            <h1>{${3:id}}</h1>",
      "        </main>",
      "    }",
      "}"
    ]
  },

  "WRN component": {
    "prefix": ["wrn-component", "component"],
    "description": "Create a WRN component",
    "body": [
      "component ${1:ComponentName} {",
      "    props {",
      "        ${2:title} = \"${3:Title}\"",
      "    }",
      "",
      "    view {",
      "        <div>",
      "            <h2>{${2:title}}</h2>",
      "        </div>",
      "    }",
      "}"
    ]
  },

  "WRN layout": {
    "prefix": ["wrn-layout", "layout"],
    "description": "Create a WRN layout",
    "body": [
      "layout ${1:LayoutName} {",
      "    view {",
      "        <main>",
      "            {content}",
      "        </main>",
      "    }",
      "}"
    ]
  },

  "WRN state": {
    "prefix": ["wrn-state", "state"],
    "description": "Create reactive state",
    "body": ["state ${1:name} = ${2:\"value\"}"]
  },

  "WRN SEO block": {
    "prefix": ["wrn-seo", "seo"],
    "description": "Create SEO metadata",
    "body": [
      "seo {",
      "    title = \"${1:Page title}\"",
      "    description = \"${2:Page description}\"",
      "}"
    ]
  },

  "WRN form": {
    "prefix": ["wrn-form", "form"],
    "description": "Create a POST form",
    "body": [
      "<form",
      "    method=\"post\"",
      "    action=\"${1:/api/action}\"",
      ">",
      "    ${2}",
      "",
      "    <button type=\"submit\">",
      "        ${3:Submit}",
      "    </button>",
      "</form>"
    ]
  },

  "WRN input": {
    "prefix": ["wrn-input", "input"],
    "description": "Create a labeled input",
    "body": [
      "<label>",
      "    <span>${1:Label}</span>",
      "",
      "    <input",
      "        type=\"${2|text,email,password,tel,url,number,date|}\"",
      "        name=\"${3:name}\"",
      "        value=\"${4}\"",
      "        ${5:required}",
      "    />",
      "</label>"
    ]
  },

  "WRN conditional class": {
    "prefix": ["wrn-class-if", "class-if"],
    "description": "Add a conditional class directive",
    "body": ["class:${1:border-indigo-500}=\"${2:condition}\""]
  },

  "WRN click event": {
    "prefix": ["wrn-click", "click"],
    "description": "Add a click handler",
    "body": ["@click=\"${1:handler()}\""]
  },

  "WRN show directive": {
    "prefix": ["wrn-show", "show"],
    "description": "Conditionally show an element",
    "body": ["data-show=\"${1:condition}\""]
  },

  "WRN loop": {
    "prefix": ["wrn-for", "for"],
    "description": "Create a reactive list loop",
    "body": ["<div data-for=\"${1:item} in ${2:items}\">", "    <span>{${1:item}}</span>", "</div>"]
  },

  "WRN dynamic link": {
    "prefix": ["wrn-route-link", "route-link"],
    "description": "Create a link using route state",
    "body": ["<a href=\"/${1:resource}/{${2:id}}\">", "    ${3:Open}", "</a>"]
  },

  "WRN API GET": {
    "prefix": ["wrn-api-get", "api-get"],
    "description": "Create a GET API route",
    "body": [
      "api GET ${1:/api/resource} {",
      "    return Response.json({",
      "        ${2:success}: true",
      "    });",
      "}"
    ]
  },

  "WRN API POST": {
    "prefix": ["wrn-api-post", "api-post"],
    "description": "Create a POST API route",
    "body": [
      "api POST ${1:/api/resource} {",
      "    const body = await ctx.request.json();",
      "",
      "    return Response.json({",
      "        success: true,",
      "        data: body",
      "    });",
      "}"
    ]
  },

  "WRN middleware": {
    "prefix": ["wrn-middleware", "middleware"],
    "description": "Create middleware",
    "body": [
      "middleware ${1:auth} {",
      "    async function handle(ctx, next) {",
      "        ${2}",
      "        return await next();",
      "    }",
      "}"
    ]
  },

  "WRN loading state": {
    "prefix": ["wrn-loading", "loading-state"],
    "description": "Create loading state and button",
    "body": [
      "state loading = false",
      "",
      "<button",
      "    type=\"submit\"",
      "    class:opacity-50=\"loading\"",
      "    class:cursor-not-allowed=\"loading\"",
      "    disabled=\"{loading}\"",
      ">",
      "    {loading ? \"Loading...\" : \"${1:Submit}\"}",
      "</button>"
    ]
  }
}