Getting started React + improve snippetManager

[thomasarbona]

What does this PR do?

• add "Getting started: React" in Javascript SDK

How should this be manually tested?

• run npm run dev
• visit SDK -> Javascript -> Getting Started -> React

Other changes

Improve snippetManager (plugin to import tested snippets in .md):

• import snippet in another snippet:
  It is not possible with the current syntax to import a tested snippet in a non tested code. With this code for example:

function foo() {
  const x = 2;
  [snippet=random]
}

This produces a very ugly snippet in the browser because this imbricates <pre><code> in another <pre><code>. So, I've implemented a new syntax to import a snippet without wrapping it:

function foo() {
  const x = 2;
  [[snippet=random]]
}

This syntax keeps the indentation of the tag and auto indent the snippet content.

• only export a subpart of a snippet:
  In order to test a snippet with very specific code (unqualified code for a template), there was no possibility to export only a subpart of the snippet into the generated documentation snippet. So, I've implemented a new syntax in snippets files:

// part I don't want in documentation
this.props = {
  foo: () => {}
};

/* snippet:start */
kuzzle.realtime.subscribe('chat', 'messages', {}, notif => {
  if (notif.type === 'document' && notif.action === 'create') {
    const { _source: message } = notif.result;
    this.props.foo([message]);
  }
});
/* snippet:end */

When we import this snippet in the .md file like this:

async method() {
  [[snippet=subscribe]]
}

This produce the following output:

async method() {
  kuzzle.realtime.subscribe('chat', 'messages', {}, notif => {
    if (notif.type === 'document' && notif.action === 'create') {
      const { _source: message } = notif.result;
      this.props.foo([message]);
    }
  });
}

Boyscout

/

[kuzzle]

Snippets tests reports

SDK	Version	Tests overview
	v6	✔️
	v5	✔️
	v1	✔️
	v1	✔️
	v1	✔️
	v1	✔️

[Aschen]

Good work 🎉

I have another remark about your title, only h2 title are displayed in the right menu

It will be better if you split your getting started with h2 title for each subpart of Heart of the subject

[alexandrebouthinon]

A cool new feature for snippet templating! Good job 👍

[benoitvidis]

I don't understand the real difference between this template and the catch one.

[thomasarbona]

The catch template expects that the try block fails

[benoitvidis]

hum... the catch template usage is only for auth/createMyCredentials and should be improved but this is indeed out of the scope of the PR.
By having the console.log in the finally statement, the snippet tests will always succeed, regardless if the test actually works, no?

[thomasarbona]

indeed

[benoitvidis]

hum... the catch template usage is only for auth/createMyCredentials and should be improved but this is indeed out of the scope of the PR.
By having the console.log in the finally statement, the snippet tests will always succeed, regardless if the test actually works, no?