-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (80 loc) · 18.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Introduction | Nanoutils</title>
<meta name="description" content="">
<link rel="preload" href="/assets/css/0.styles.fefdbcd3.css" as="style"><link rel="preload" href="/assets/js/app.da847142.js" as="script"><link rel="preload" href="/assets/js/4.cee1feab.js" as="script"><link rel="prefetch" href="/assets/js/2.d512ec45.js"><link rel="prefetch" href="/assets/js/3.7eef38f1.js"><link rel="prefetch" href="/assets/js/5.3de77f44.js"><link rel="prefetch" href="/assets/js/6.7e10c4bd.js">
<link rel="stylesheet" href="/assets/css/0.styles.fefdbcd3.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">Nanoutils</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/nanoutils/nanoutils" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"> <a href="https://github.com/nanoutils/nanoutils" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>Nanoutils</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/" class="active sidebar-link">Introduction</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/#examples" class="sidebar-link">Examples</a></li><li class="sidebar-sub-header"><a href="/#inspiration" class="sidebar-link">Inspiration</a></li><li class="sidebar-sub-header"><a href="/#basic-ideas" class="sidebar-link">Basic ideas</a></li><li class="sidebar-sub-header"><a href="/#can-i-use-it-in-my-project" class="sidebar-link">Can I use it in my project?</a></li></ul></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>Documentation</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>Development helpers</span> <span class="arrow right"></span></p> <!----></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="introduction"><a href="#introduction" aria-hidden="true" class="header-anchor">#</a> Introduction</h1> <p>Tiniest JavaScript utils library</p> <h2 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h2> <p>First, install <code>nanoutils</code>:</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> <span class="token function">install</span> --save nanoutils
</code></pre></div><p>or install it with <code>yarn</code>:</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$ yarn add nanoutils
</code></pre></div><p>To use ES modules we wrote a plugin <a href="https://github.com/nanoutils/babel-plugin-nanoutils" target="_blank" rel="noopener noreferrer"><code>babel-plugin-nanoutils</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>To install:</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> <span class="token function">install</span> --save-dev babel-plugin-nanoutils
</code></pre></div><p>or</p> <div class="language-bash extra-class"><pre class="language-bash"><code>$ yarn add --dev babel-plugin-nanoutils
</code></pre></div><p>Using <code>.babelrc</code>:</p> <div class="language-diff extra-class"><pre class="language-diff"><code>{
"preset": ["env"]
<span class="token inserted">+ "plugins": ["nanoutils"]</span>
}
</code></pre></div><p>via CLI:</p> <div class="language-diff extra-class"><pre class="language-diff"><code>{
"scripts": {
<span class="token inserted">+ "babel": "babel --plugins nanoutils app.js",</span>
"test": "jest && eslint ."
}
}
</code></pre></div><p>or with Node API:</p> <div class="language-diff extra-class"><pre class="language-diff"><code>const babel = require('babel-core')
babel.transform('code', {
<span class="token inserted">+ plugins: ['nanoutils']</span>
})
</code></pre></div><h2 id="examples"><a href="#examples" aria-hidden="true" class="header-anchor">#</a> Examples</h2> <h3 id="sort-array-of-values-by-name-alphabetically-or-by-age"><a href="#sort-array-of-values-by-name-alphabetically-or-by-age" aria-hidden="true" class="header-anchor">#</a> Sort array of values by name alphabetically or by age</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ascend<span class="token punctuation">,</span> az<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> sortBy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'nanoutils'</span>
<span class="token keyword">const</span> sortByName <span class="token operator">=</span> <span class="token function">sortBy</span><span class="token punctuation">(</span><span class="token function">az</span><span class="token punctuation">(</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> sortByAge <span class="token operator">=</span> <span class="token function">sortBy</span><span class="token punctuation">(</span><span class="token function">ascend</span><span class="token punctuation">(</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> consultants <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Mike'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'David'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">35</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Alex'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">25</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token function">sortByName</span><span class="token punctuation">(</span>consultants<span class="token punctuation">)</span> <span class="token comment">// [{ name: 'Alex', age: 25 }, { name: 'David', age: 35 }, { name: 'Mike', age: 30 }]</span>
<span class="token function">sortByAge</span><span class="token punctuation">(</span>consultants<span class="token punctuation">)</span> <span class="token comment">// [{ name: 'Alex', age: 25 }, { name: 'Mike', age: 30 }, { name: 'David', age: 35 }]</span>
</code></pre></div><h3 id="find-sum-of-all-ages-which-will-be-even-next-year"><a href="#find-sum-of-all-ages-which-will-be-even-next-year" aria-hidden="true" class="header-anchor">#</a> Find sum of all ages which will be even next year</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add<span class="token punctuation">,</span> filterT<span class="token punctuation">,</span> mapT<span class="token punctuation">,</span> pipeT<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> transduce <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'nanoutils'</span>
<span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> value <span class="token operator">=></span> value <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span>
<span class="token keyword">const</span> <span class="token function-variable function">sumOfAllEvenAgesNextYear</span> <span class="token operator">=</span> array <span class="token operator">=></span> <span class="token function">transduce</span><span class="token punctuation">(</span>
<span class="token function">pipeT</span><span class="token punctuation">(</span>
<span class="token function">mapT</span><span class="token punctuation">(</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">mapT</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">filterT</span><span class="token punctuation">(</span>isEven<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
add<span class="token punctuation">,</span>
<span class="token number">0</span><span class="token punctuation">,</span>
array
<span class="token punctuation">)</span>
<span class="token keyword">const</span> consultants <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Mike'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'David'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">35</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Alex'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">25</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token function">sumOfAllEvenAgesNextYear</span><span class="token punctuation">(</span>ages<span class="token punctuation">)</span> <span class="token comment">// 62</span>
</code></pre></div><h3 id="return-memoized-mean"><a href="#return-memoized-mean" aria-hidden="true" class="header-anchor">#</a> Return memoized mean</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ascend<span class="token punctuation">,</span> identity<span class="token punctuation">,</span> join<span class="token punctuation">,</span> mean<span class="token punctuation">,</span> memoizeWith<span class="token punctuation">,</span> sort <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'nanoutils'</span>
<span class="token keyword">const</span> getHash <span class="token operator">=</span> <span class="token function">pipe</span><span class="token punctuation">(</span>
<span class="token function">sort</span><span class="token punctuation">(</span><span class="token function">ascend</span><span class="token punctuation">(</span>identity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span>
<span class="token keyword">const</span> memoizedMean <span class="token operator">=</span> <span class="token function">memoizeWith</span><span class="token punctuation">(</span>getHash<span class="token punctuation">,</span> mean<span class="token punctuation">)</span>
<span class="token function">memoizedMean</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 2</span>
<span class="token function">memoizedMean</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 2 (extracts from memoizeWith function with hash='1-2-3')</span>
<span class="token function">memoizedMean</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 2 (extracts from memoizeWith function with hash='1-2-3')</span>
</code></pre></div><h2 id="inspiration"><a href="#inspiration" aria-hidden="true" class="header-anchor">#</a> Inspiration</h2> <p>We support nano-hype in JavaScript and want to create as much nano-things as possible.<br>
So we're starting a challenge - write Ramda clone where no one method will be over 1KB size.<br>
More nano's for the God of nano's!</p> <h2 id="basic-ideas"><a href="#basic-ideas" aria-hidden="true" class="header-anchor">#</a> Basic ideas</h2> <ul><li><strong>Functional style</strong>. FP is cool, isn't it? 😎 So we'll add some Ramda methods too.</li> <li><strong>No ES6 features</strong>. We don't use Babel to save support in older browsers and save a status of nano-library.</li> <li>Use <strong>methods composition</strong> only if it won't greatly increase the size of method</li></ul> <h2 id="can-i-use-it-in-my-project"><a href="#can-i-use-it-in-my-project" aria-hidden="true" class="header-anchor">#</a> Can I use it in my project?</h2> <p>It's production-ready but still has following drawbacks:</p> <ul><li>No TS/Flow types</li></ul> <p>It's also a Ramda-supportive, you can see both docs and types here: <a href="https://ramdajs.com/docs/" target="_blank" rel="noopener noreferrer">Ramda docs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/docs/methods.html">
Methods
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/assets/js/4.cee1feab.js" defer></script><script src="/assets/js/app.da847142.js" defer></script>
</body>
</html>