diff --git a/docs-src/documentation/is-isnot-helpers.page.ts b/docs-src/documentation/is-isnot-helpers.page.ts index 2e6eaead..8be9f543 100644 --- a/docs-src/documentation/is-isnot-helpers.page.ts +++ b/docs-src/documentation/is-isnot-helpers.page.ts @@ -20,32 +20,33 @@ export default ({ content: html` ${Heading(page.name)}

- 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.

All helpers are used to perform side effects, meaning, to react - to - state changes. Instead of using the - effect helper for everything, you can use ones with - very specific capabilities and that are more readable. + to state changes. Instead of using + the effect helper for everything, you can use ones + with specific capabilities that are more readable and easier to + use.

${Heading('is helper', 'h3')}

- The is helper will return a boolean whether the - check on a value or state matches. + The is helper will return a boolean whether it is + equal.

It takes two arguments and both are required.

is(VALUE_OR_STATE, CHECKER_OR_VALUE)

${CodeSnippet('html`${is(val, isNumber)}`', 'typescript')} @@ -54,7 +55,14 @@ export default ({ attribute values and even body content.

${CodeSnippet( - 'html``', + 'html``', + 'typescript' + )} +

+ You can also nest helpers to compose more complex render logic. +

+ ${CodeSnippet( + 'html`${when(is(status, \'logged\'), "Logged", "Not Logged")}`', 'typescript' )} ${Heading('isNot helper', 'h3')} @@ -62,6 +70,9 @@ export default ({ The isNot helper works the same as the is helper but checks the opposite.

- ${CodeSnippet('html`${isNot(val, isNumber)}`', 'typescript')} + ${CodeSnippet( + 'html`${isNot(val, n => n typeof "number")}`', + 'typescript' + )} `, }) diff --git a/docs-src/documentation/or-and-oneof-helpers.page.ts b/docs-src/documentation/or-and-oneof-helpers.page.ts index 8c33b155..f4097d94 100644 --- a/docs-src/documentation/or-and-oneof-helpers.page.ts +++ b/docs-src/documentation/or-and-oneof-helpers.page.ts @@ -23,7 +23,8 @@ export default ({ In addition to is and isNot helpers, - this library offers additional boolean helpers. + this library offers additional boolean helpers right out of the + box.

All these helpers will return true or diff --git a/docs-src/documentation/pick-helper.page.ts b/docs-src/documentation/pick-helper.page.ts index d845a9ce..8f50d1a7 100644 --- a/docs-src/documentation/pick-helper.page.ts +++ b/docs-src/documentation/pick-helper.page.ts @@ -19,7 +19,11 @@ export default ({ docsMenu, content: html` ${Heading(page.name)} -

The pick helper is a quick way to read

+

+ The pick helper is a quick way to read object key + values at any level without sacrificing readability and + reactivity of state. +

${Heading('The problem', 'h3')}

If you have a state value and try to read a deep value it would diff --git a/docs-src/documentation/repetition-and-lists.page.ts b/docs-src/documentation/repetition-and-lists.page.ts index 7b516daf..444d779d 100644 --- a/docs-src/documentation/repetition-and-lists.page.ts +++ b/docs-src/documentation/repetition-and-lists.page.ts @@ -20,14 +20,14 @@ export default ({ content: html` ${Heading(page.name)}

- 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.

- By default, the template will already render array of contents - for you: + As mentioned above, Markup already renders array of contents for + you:

${CodeSnippet( 'const todos = [\n' + @@ -43,13 +43,12 @@ export default ({ )}

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.

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.

${Heading('repeat helper', 'h3')}

@@ -90,8 +89,8 @@ export default ({

  • ITEM_RENDERER: 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.
    • @@ -104,8 +103,8 @@ export default ({ ${Heading('Why use the repeat helper?', 'h4')}

    - The repeat helper will keep an internal cache based - on the items in the list. This is done to only re-render the + The repeat 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.

    @@ -120,7 +119,7 @@ export default ({ 'html`${repeat([1, 3, 5, 3], (n) => html`item ${n}`)}`\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', @@ -130,9 +129,8 @@ export default ({ This is only true when you are trying to render Nodes - , 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 repeat tries to render the whole list.