<h1>🐏 Webpack RAM plugin</h1>
In order to fine-tune the builds of your frontend applications, you need to concentrate on analysis
of the build process. One of such criteria is the usage of your system resources. To be able to find
the usage of your memory during the build, DeCODE have created a webpack plugin, which injects to
your build system and then sends the report to your terminal
<h2>Webpack hooks system</h2>
Based on the <a href="https://webpack.js.org/api/compiler-hooks/">official webpack documentation</a>, plugin needs to define, which <code>hooks</code> it needs to inject to. 
In this exact scenario, it was necessary to get analysis of RAM after webpack finished it&#39;s compilation, so 
hooks <code>done</code> and <code>failed</code> were used. 
<pre><code class="hljs language-javascript">class WebpackMemoryPlugin {
 apply(compiler) {
 compiler.hooks.failed.tap(
 &#x27;WebpackMemoryPlugin&#x27;,
 () =&gt; {
 const used = process.memoryUsage().heapUsed / 1024 / 1024;
 console.log(`🐏 Amount of RAM used: ${Math.round(used * 100) / 100} MB`);
 }
 );
 compiler.hooks.done.tap(
 &#x27;WebpackMemoryPlugin&#x27;,
 () =&gt; {
 const used = process.memoryUsage().heapUsed / 1024 / 1024;
 console.log(`🐏 Amount of RAM used: ${Math.round(used * 100) / 100} MB`);
 }
 );
 }
}
</code></pre><h2>Testing of webpack plugin</h2>
To make sure that the plugin works as expected, it was covered with unit test. 
In this case, unit testing was implemented with <code>mocha</code> and <code>sinon</code>. 
Because the plugin by itself is quite simple, and just outputs the amount of RAM
to the console, it can be done by spying on the console and verified by just
checking the expected output.
<pre><code class="hljs language-javascript">const webpack = require(&#x27;webpack&#x27;);
const WebpackMemoryPlugin = require(&#x27;../WebpackMemoryPlugin&#x27;);
const sinon = require(&#x27;sinon&#x27;);
const assert = require(&#x27;assert&#x27;);

describe(&#x27;WebpackMemoryPlugin&#x27;, () =&gt; {
 it(&#x27;should show the amount of RAM used after success&#x27;, (done) =&gt; {
 let spy = sinon.spy(console, &#x27;log&#x27;);
 webpack({
 plugins: [
 new WebpackMemoryPlugin()
 ],
 }, (err, stats) =&gt; {
 try {
 spy.restore();
 assert(spy.called);
 assert(spy.firstCall.firstArg.indexOf(&#x27;🐏 Amount of RAM used:&#x27;) !== -1);
 done();
 } catch (ex) {
 spy.restore();
 console.log(ex);
 done(ex);
 }
 });
 });
});
</code></pre>Full code can be found at <a href="https://github.com/FallenAngel97/webpack-memory-plugin">https://github.com/FallenAngel97/webpack-memory-plugin</a>

Webpack RAM plugin

<h1>Postman Swagger CLI</h1>
<h2>Postman and Swagger overview</h2>
In short, postman is the utility, which helps you to make a request via the UI. 
There you can setup the URL, where you want to reach, the method (GET/POST/DELETE...),
query parameters and so on. Very useful for the API testing and can be easily shared
to other team members with the concept of the collections. 
Swagger on the other side, is more positioned to the API documentation and 
should be running on some server. With Swagger you can set up the descriptions
for the API, what parameters it can take, response structure and much more. 
<h2>CLI</h2>
To be able to spin up the Swagger which can be run on the server based of the
postman collections, an npm package <code>@decodeapps/postman-swagger</code> was created. 
It takes as an input the collections of requests from Postman and spins up the
Express server. 
To be able to quickly spin up such server, create a folder with some schema:
<pre><code class="hljs language-bash">mkdir swagger-examples
touch swagger-examples/example.json
</code></pre>And fill it with such content:
<pre><code class="hljs language-json">{
 &quot;info&quot;: {
 &quot;_postman_id&quot;: &quot;9adb14d7-625e-4a02-828d-a5e2d044bfd0&quot;,
 &quot;name&quot;: &quot;Example Collection&quot;,
 &quot;schema&quot;: &quot;https://schema.getpostman.com/json/collection/v2.1.0/collection.json&quot;
 },
 &quot;item&quot;: [
 {
 &quot;name&quot;: &quot;GET example.com&quot;,
 &quot;request&quot;: {
 &quot;method&quot;: &quot;GET&quot;,
 &quot;header&quot;: [],
 &quot;url&quot;: {
 &quot;raw&quot;: &quot;https://example.com&quot;,
 &quot;protocol&quot;: &quot;https&quot;,
 &quot;host&quot;: [
 &quot;example&quot;,
 &quot;com&quot;
 ]
 },
 &quot;description&quot;: &quot;Making the simple GET request to a website&quot;
 },
 &quot;response&quot;: []
 }
 ],
 &quot;protocolProfileBehavior&quot;: {}
}
</code></pre>And then startup the utility:
<pre><code class="hljs language-bash">npx @decodeapps/postman-swagger -d ./examples/
</code></pre>As a result, upon navigating to <code>http://localhost:5000</code>, you will see the following:
<img src='/blog/postman-swagger-screenshot.png' alt='Postman swagger screenshot' style="max-width: 800px" />


Visit <a href="https://github.com/FallenAngel97/postman-swagger">https://github.com/FallenAngel97/postman-swagger</a> to learn more about the implementation and possible parameters
Author of the background photo: Magda Ehlers: <a href="https://www.pexels.com/photo/2114014/">https://www.pexels.com/photo/2114014/</a>

Postman Swagger CLI

<h1>Rego Treesitter implementation</h1>
For daily routine, I spend majority of the time in the NeoVim, where I write policies
for corporate application. By default, <a href="https://neovim.io/">NeoVim</a> provides the Regex system, which parses
default OPA policies. But I needed more of that, so I started on investigation
how can I achieve a better experience.
<h2>Treesitter libraries</h2>
I don&#39;t need to copy-paste the documentation from the official docs, so to get the 
general principle of it, you can see <a href="https://tree-sitter.github.io/tree-sitter/using-parsers#getting-started">this page</a>.
In short, you will need a repo. For this case, my repo will be <code>tree-sitter-rego</code>.
Initialize the reporisory for the npm
<pre><code class="hljs language-bash">yarn init -y
</code></pre>This will create a package.json with defaults, which you can modify
Then install the necessary dependencies:
<pre><code class="hljs language-bash">yarn add -D tree-sitter-cli nan
</code></pre>Then it&#39;s necessary to create a file for the grammar. Name it <code>grammar.js</code>, which is the convention to name for the tree-sitter.
Fill it with following to create a rego parser:
<pre><code class="hljs language-javascript">module.exports = grammar({
 name: &#x27;rego&#x27;,

 rules: {
 source_file: $ =&gt; repeat($._definition),

 _definition: $ =&gt; choice(
 $.package_definition,
 $.import_package,
 $.operator_check,
 $.comment,
 $.rego_block,
 $.builtin_function,
 $._junk
 ),

 operator: $ =&gt; choice(
 &#x27;==&#x27;,
 &#x27;:=&#x27;,
 &#x27;=&#x27;,
 &#x27;!=&#x27;,
 &#x27;&lt;&#x27;,
 &#x27;&gt;&#x27;,
 &#x27;/&#x27;,
 &#x27;-&#x27;,
 &#x27;+&#x27;,
 ),

 true: $ =&gt; &#x27;true&#x27;,
 false: $ =&gt; &#x27;false&#x27;,

 comma: $ =&gt; &#x27;,&#x27;,
 
 comment: $ =&gt; /\#.*?\n\r?/,

 function_name: $ =&gt; choice(
 &#x27;lower&#x27;,
 &#x27;is_string&#x27;,
 &#x27;object.get&#x27;,
 &#x27;print&#x27;,
 &#x27;concat&#x27;,
 &#x27;contains&#x27;,
 &#x27;time.now_ns&#x27;,
 &#x27;io.jwt.encode_sign_raw&#x27;,
 &#x27;io.jwt.encode_sign&#x27;,
 &#x27;io.jwt.decode&#x27;,
 &#x27;io.jwt.verify_es256&#x27;,
 &#x27;strings.replace_n&#x27;,
 &#x27;http.send&#x27;,
 ),

 opening_parameter: $ =&gt; &#x27;(&#x27;,

 closing_parameter: $ =&gt; &#x27;)&#x27;,

 builtin_function: $ =&gt; seq(
 field(&#x27;function_name&#x27;, 
 $.function_name
 ),
 field(&#x27;opening_parameter&#x27;, $.opening_parameter),
 field(&#x27;function_body&#x27;, 
 repeat(
 choice(
 $.identifier,
 $.array_definition,
 $.true,
 $.false,
 $.number,
 $.object_field,
 $.string_definition,
 $.identifier,
 $.comma,
 ),
 ),
 ),
 field(&#x27;closing_parameter&#x27;, $.closing_parameter),
 ),

 string_definition: $ =&gt; seq(
 &#x27;&quot;&#x27;,
 /[a-zA-Z0-9&lt;&gt;@\-._:=\s\/\\]*/,
 &#x27;&quot;&#x27;,
 ),

 _array_opening: $ =&gt; &#x27;[&#x27;,
 _array_closing: $ =&gt; &#x27;]&#x27;,

 object_field: $ =&gt; prec(
 1, 
 seq(
 /[a-zA-Z\._]+\[/,
 choice(
 $.identifier,
 $.number,
 $.object_field,
 $.string_definition
 ),
 $._array_closing,
 ),
 ),

 array_definition: $ =&gt; seq(
 $._array_opening,
 repeat(
 choice(
 $.array_definition,
 $.string_definition,
 $.identifier,
 $.identifier,
 $.number,
 $.object_field,
 $.true,
 $.false,
 $.comma,
 ),
 ),
 $._array_closing,
 ),

 operator_check: $ =&gt; seq(
 choice(
 $.identifier,
 $.builtin_function,
 $.string_definition,
 $.object_field,
 $.array_definition,
 $.true,
 $.false,
 ),
 $.operator,
 choice(
 $.identifier,
 $.builtin_function,
 $.string_definition,
 $.object_field,
 $.array_definition,
 $.true,
 $.false,
 ),
 ),

 rego_rule: $ =&gt; prec(1, choice(
 $.identifier,
 $.operator_check,
 $.array_definition,
 $.test_case,
 $.true,
 $.false,
 ),),

 test_case: $ =&gt; seq(
 $.identifier,
 repeat(
 seq(
 $.reserved_keywords,
 $.identifier,
 ),
 ),
 ),

 rego_block: $ =&gt; seq(
 field(&#x27;rego_rule_name&#x27;, $.identifier),
 optional(
 seq(
 $.operator,
 $.identifier,
 ),
 ),
 &#x27;{&#x27;,
 repeat($.rego_rule),
 &#x27;}&#x27;,
 ),

 _junk: $ =&gt; /\n/,

 reserved_keywords: $ =&gt; choice(
 &#x27;as&#x27;,
 &#x27;with&#x27;,
 ),
 
 as_keyword: $ =&gt; seq(
 $.reserved_keywords,
 field(&#x27;package_alias&#x27;, $.identifier),
 ),

 import_package: $ =&gt; seq(
 &#x27;import&#x27;,
 field(&#x27;imported_package_name&#x27;, 
 choice(
 $.identifier,
 ),
 ),
 optional($.as_keyword),
 ),

 package_definition: $ =&gt; seq(
 &#x27;package&#x27;,
 field(&#x27;package_name&#x27;, $.identifier),
 ),

 identifier: $ =&gt; /[a-zA-Z\._]+/,

 number: $ =&gt; /\d+/
 }
});
</code></pre>After this, you can execute a command <code>tree-sitter generate</code>. For convenience, you can even set up
the aliases in scripts for package.json, so you will be able to verify the correctness of your 
grammar.
<pre><code class="hljs language-json">{
 &quot;scripts&quot;: {
 &quot;generate&quot;: &quot;tree-sitter generate&quot;,
 &quot;build&quot;: &quot;tree-sitter generate &amp;&amp; node-gyp configure &amp;&amp; node-gyp build&quot;,
 &quot;test&quot;: &quot;tree-sitter test&quot;
 }
}
</code></pre>Complete source for the parser located here: <a href="https://github.com/FallenAngel97/tree-sitter-rego">https://github.com/FallenAngel97/tree-sitter-rego</a>
Photo by <a href="https://unsplash.com/@tanelah?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Taneli Lahtinen</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

open source