Add VSCode snippets to docs

[ybelenko]

I would like to share few VSCode snippets which I found very useful.

Snippets in Visual Studio Code - Create your own snippets

Route declaration snippet

    "slim4 skeleton route": {
        "prefix": [
            "$app->get",
            "$group->get"
        ],
        "body": [
            "// Route for /$1",
            "\\$${2|app,group|}->${3|get,post,put,patch,delete|}('/$1', \\App\\Action\\\\$4::class)->setName('${1/[^A-z^0-9^-]/:downcase/g}');"
        ],
        "description": "Route declaration for Slim4 skeleton"
    },

Generates line like:

// Route for /
$app->get('/', \App\Action\::class)->setName('');

Action Controller snippet

    "slim4 skeleton action class": {
        "prefix": "class",
        "body": [
            "namespace App\\Action\\\\${TM_DIRECTORY/^.+\\/(.*)$/$1/};",
            "",
            "use App\\Responder\\Responder;",
            "use Psr\\Http\\Message\\ResponseInterface;",
            "use Psr\\Http\\Message\\ServerRequestInterface;",
            "",
            "/**",
            " * Action.",
            " */",
            "final class $TM_FILENAME_BASE",
            "{",
            "    /**",
            "     * @var Responder",
            "     */",
            "    private \\$responder;",
            "",
            "    /**",
            "     * The constructor.",
            "     *",
            "     * @param Responder \\$responder The responder",
            "     */",
            "    public function __construct(Responder \\$responder)",
            "    {",
            "        \\$this->responder = \\$responder;",
            "    }",
            "",
            "    /**",
            "     * Action.",
            "     *",
            "     * @param ServerRequestInterface \\$request The request",
            "     * @param ResponseInterface \\$response The response",
            "     *",
            "     * @return ResponseInterface The response",
            "     */",
            "    public function __invoke(ServerRequestInterface \\$request, ResponseInterface \\$response): ResponseInterface",
            "    {",
            "        return \\$this->responder->withTemplate(\\$response, '${TM_DIRECTORY/^.+\\/(.*)$/${1:/downcase}/}/$0.twig');",
            "    }",
            "}",
            ""
        ],
        "description": "Slim4 skeleton action class"
    },

Generates file like:

<?php

namespace App\Action\Home;

use App\Responder\Responder;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;

/**
 * Action.
 */
final class HelloWorld
{
    /**
     * @var Responder
     */
    private $responder;

    /**
     * The constructor.
     *
     * @param Responder $responder The responder
     */
    public function __construct(Responder $responder)
    {
        $this->responder = $responder;
    }

    /**
     * Action.
     *
     * @param ServerRequestInterface $request The request
     * @param ResponseInterface $response The response
     *
     * @return ResponseInterface The response
     */
    public function __invoke(ServerRequestInterface $request, ResponseInterface $response): ResponseInterface
    {
        return $this->responder->withTemplate($response, 'home/.twig');
    }
}

Twig template snippet

    "slim4 skeleton Twig template": {
        "prefix": "extends",
        "body": [
            "{% extends \"layout/${1|layout-empty,layout|}.twig\" %}",
            "",
            "{% block css %}",
            "    {% webpack_entry_css '${TM_DIRECTORY/^.+\\/(.*)$/$1/}/$TM_FILENAME_BASE' %}",
            "{% endblock %}",
            "",
            "{% block js %}",
            "    {% webpack_entry_js '${TM_DIRECTORY/^.+\\/(.*)$/$1/}/$TM_FILENAME_BASE' %}",
            "{% endblock %}",
            "",
            "{% block content %}",
            "",
            "    <div class=\"container\">",
            "        $0",
            "    </div>",
            "",
            "{% endblock %}",
            ""
        ],
        "description": "slim4 skeleton Twig template"
    },

Generates file like:

{% extends "layout/layout-empty.twig" %}

{% block css %}
    {% webpack_entry_css 'home/hello-world' %}
{% endblock %}

{% block js %}
    {% webpack_entry_js 'home/hello-world' %}
{% endblock %}

{% block content %}

    <div class="container">

    </div>

{% endblock %}

[sonarcloud[bot]]

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
29.6% Duplication

[odan]

I'm not sure if this is the right place for such code snippets. Personally I don't use VSCode, and I'm not able to verify and maintain these snippets in the long run. In the next version of the Slim-Skeleton I will remove all the frontend specific code examples to make it usable for pure backend API's as well. Thank you very much ybelenko, but this change cannot be merged.

[ybelenko]

@odan What if I'll create my own gists(maybe repo, but gist seems more reasonable) with these snippets... would you add links in main doc to them? With disclaimer that you're not going to support them.

[odan]

I think we can put it into the documentation.

For this purpose I could create a new section like Development > VSCode. Then you could share or link the VSCode snippets in one place.

What do you think?

[ybelenko]

That was my first thought about VSCode doc section 😄 I changed my mind just because there are many people reading docs for a first time and it's pretty handy when you see action controller example and snippet close to it while Development -> VSCode section maybe not popular at all 😆. When I read docs I usually start with code examples and the sections like Tools/SDKs/Useful links don't attract my attention.

Anyway, I get your point, you don't want to be responsible for these piece of code and I'm totally ok with it. I'll create gists or maybe one gist and will attach it to this conversation. Please, add it the way you like.

[ybelenko]

Here is my gist: https://gist.github.com/ybelenko/3b0b9d99404393dbd9bf1a474726c0b4

[odan]

Ok cool. Thank you. I will add it to the documentation.