Skip to content

Commit

Permalink
update and fix additional docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ECorreia45
ECorreia45 committed Nov 28, 2023
1 parent 522d6ff commit 78745e8
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 34 deletions.
41 changes: 26 additions & 15 deletions docs-src/documentation/is-isnot-helpers.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,33 @@ export default ({
content: html`
${Heading(page.name)}
<p>
This library is extremely function-oriented and things can get
messy when you try to check things in the template. However,
that is not the reason the most of the helpers exist.
This library is function-oriented but things can get messy when
you try to perform multiple logic directly in the template.
However, that is not the reason the most of the helpers exist.
</p>
<p>
All helpers are used to perform side effects, meaning, to react
to
<a href="./state-values">state</a> changes. Instead of using the
<code>effect</code> helper for everything, you can use ones with
very specific capabilities and that are more readable.
to <a href="./state-values">state</a> changes. Instead of using
the <code>effect</code> helper for everything, you can use ones
with specific capabilities that are more readable and easier to
use.
</p>
${Heading('is helper', 'h3')}
<p>
The <code>is</code> helper will return a boolean whether the
check on a value or state matches.
The <code>is</code> helper will return a boolean whether it is
equal.
</p>
<p>It takes two arguments and both are required.</p>
<p><code>is(VALUE_OR_STATE, CHECKER_OR_VALUE)</code></p>
<ul>
<li>
<strong>VALUE_OR_STATE</strong>: It can be any raw value or
a value defined by the state.
<strong>VALUE_OR_STATE</strong>: It can be any value or a
<code>StateGetter</code> for any value.
</li>
<li>
<strong>CHECKER_OR_VALUE</strong>: A value to check against
or a function that does the checking.
<strong>CHECKER_OR_VALUE</strong>: A static value to check
against, or a function that does the checking and return
true or false.
</li>
</ul>
${CodeSnippet('html`${is(val, isNumber)}`', 'typescript')}
Expand All @@ -54,14 +55,24 @@ export default ({
attribute values and even body content.
</p>
${CodeSnippet(
'html`<button attr.disabled="is(status, \'logged\')">login</button>`',
'html`<button attr.disabled="${is(status, \'logged\')}">login</button>`',
'typescript'
)}
<p>
You can also nest helpers to compose more complex render logic.
</p>
${CodeSnippet(
'html`${when(is(status, \'logged\'), "Logged", "Not Logged")}`',
'typescript'
)}
${Heading('isNot helper', 'h3')}
<p>
The <code>isNot</code> helper works the same as the
<code>is</code> helper but checks the opposite.
</p>
${CodeSnippet('html`${isNot(val, isNumber)}`', 'typescript')}
${CodeSnippet(
'html`${isNot(val, n => n typeof "number")}`',
'typescript'
)}
`,
})
3 changes: 2 additions & 1 deletion docs-src/documentation/or-and-oneof-helpers.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export default ({
In addition to
<a href="./is-isnot-helpers#is-helper">is</a> and
<a href="./is-isnot-helpers#isnot-helper">isNot</a> helpers,
this library offers additional boolean helpers.
this library offers additional boolean helpers right out of the
box.
</p>
<p>
All these helpers will return <code>true</code> or
Expand Down
6 changes: 5 additions & 1 deletion docs-src/documentation/pick-helper.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ export default ({
docsMenu,
content: html`
${Heading(page.name)}
<p>The <code>pick</code> helper is a quick way to read</p>
<p>
The <code>pick</code> helper is a quick way to read object key
values at any level without sacrificing readability and
reactivity of state.
</p>
${Heading('The problem', 'h3')}
<p>
If you have a state value and try to read a deep value it would
Expand Down
32 changes: 15 additions & 17 deletions docs-src/documentation/repetition-and-lists.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ export default ({
content: html`
${Heading(page.name)}
<p>
Pages can get super complex with a lot of repetitive markup and
long lists. Using a template makes the work much easier since
you can use data and logic to create long lists or repeat things
with small variations much easier.
An area where templates shine is dealing with repeating parts of
the content. Markup template already handles Arrays of content
for you, but it goes further to support you with even more
optimal and simpler way to deal with things that repeat.
</p>
<p>
By default, the template will already render array of contents
for you:
As mentioned above, Markup already renders array of contents for
you:
</p>
${CodeSnippet(
'const todos = [\n' +
Expand All @@ -43,13 +43,12 @@ export default ({
)}
<p>
The above example will correctly render the list just fine and
all need in the template was a single line.
all that was needed in the template was a single line.
</p>
<p>
Using the natively supported array rendering of the template is
perfect for static lists but not so much if the list content or
size keeps changing. Fortunately, the system offers a helper for
that.
size keeps changing. Fortunately, there is a helper for that.
</p>
${Heading('repeat helper', 'h3')}
<p>
Expand Down Expand Up @@ -90,8 +89,8 @@ export default ({
<li>
<strong>ITEM_RENDERER</strong>: A function that will be
called for every item and must return what to render. If a
number ws specified as the first argument, this function
will be get called with a number value and the index,
number was specified as the first argument, this function
will get called with a number value and the index,
otherwise, it will get called with the item in the array and
its index.
</li>
Expand All @@ -104,8 +103,8 @@ export default ({
</ul>
${Heading('Why use the repeat helper?', 'h4')}
<p>
The <code>repeat</code> helper will keep an internal cache based
on the items in the list. This is done to only re-render the
The <code>repeat</code> helper will keep an internal cache keyed
by the items in the list. This is done to only re-render the
items that change and not the whole list every time there is a
change.
</p>
Expand All @@ -120,7 +119,7 @@ export default ({
'html`${repeat([1, 3, 5, 3], (n) => html`<span>item ${n}</span>`)}`\n' +
'// renders: item 1 item 3 item 5' +
'\n\n' +
"html`${repeat([1, 3, 5, 3], (n) => element('li', {\n" +
"html`${repeat([1, 3, 5, 3], (n) => element('span', {\n" +
' textContent: `item ${n}`\n' +
'}))}`\n' +
'// renders: item 1 item 3 item 5',
Expand All @@ -130,9 +129,8 @@ export default ({
This is only true when you are trying to render
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node"
>Nodes</a
>
, and it is not specific to this library. You can't render the
same nodes in multiple places. Because each template or node are
>, and it is not specific to Markup. You can't render the same
nodes in multiple places. Because each template or node are
mapped to the same value reference even when the
<code>repeat</code> tries to render the whole list.
</p>
Expand Down

0 comments on commit 78745e8

Please sign in to comment.