Replies: 3 comments
-
Personally, I'm not convinced that the code with I don't think the code: function ArticleComponent(articles : Article[]) {
return IfElse(articles.length == 0, () =>
p("No Available articles")
).ElseIf(() => articles.filter(a => a.need_subscription == false).length == 0, () =>
p("There are no free articles")
).Else(() => [
p("Available articles:"),
ul(
Each(articles, (article, index) =>
IfElse(!article.need_subscription, () =>
li(`${index + 1}. ${article.title}`)
).End()
)
)
]).End();
} is actually better than: function ArticleComponent(articles : Article[]) {
if (articles.length === 0)
return p("No Available articles")
else if (articles.filter(a => a.need_subscription == false).length === 0)
return p("There are no free articles")
else return [
p("Available articles:"),
ul(
articles.map((article, index) => {
if (!article.need_subscription)
return li(`${index + 1}. ${article.title}`)
}),
),
]
} or (more compact code): const ArticleComponent = (articles : Article[]) =>
articles.length === 0 ?
p("No Available articles") :
articles.filter(a => a.need_subscription == false).length === 0 ?
p("There are no free articles") :
[
p("Available articles:"),
ul(
articles.map((article, index) =>
article.need_subscription ? null : li(`${index + 1}. ${article.title}`))
),
] |
Beta Was this translation helpful? Give feedback.
-
Actually it's not. this example isn't really good. In my opinion for more complex component with multiple div layers and condition it could be useful. Adding a simple div makes thing more complex for if else function ArticleComponent(articles: Article[]) {
const mydiv = div({ style: "..." });
if (articles.length === 0)
van.add(div, p("No Available articles"))
else if (articles.filter(a => a.need_subscription == false).length === 0)
van.add(div, p("There are no free articles"))
else
van.add(div, [
p("Available articles:"),
ul(
articles.map((article, index) => {
if (!article.need_subscription)
return li(`${index + 1}. ${article.title}`)
}),
),
])
return mydiv;
} rather than function ArticleComponent(articles: Article[]) {
return div({ style: "..." },
IfElse(articles.length == 0, () =>
p("No Available articles")
).ElseIf(() => articles.filter(a => a.need_subscription == false).length == 0, () =>
p("There are no free articles")
).Else(() => [
p("Available articles:"),
ul(
Each(articles, (article, index) =>
IfElse(!article.need_subscription, () =>
li(`${index + 1}. ${article.title}`)
).End()
)
)
]).End()
);
} If you think it's not necessary it's a fair choice. I can still use my utils.js so there is no problems I'm probably influenced by the fact that I come from template engine world . |
Beta Was this translation helpful? Give feedback.
-
Thanks @Duffscs for your perspective! I think the root cause is in JS, if statements are not expression, unlike some other more modern programming languages. Thus people need to either choose tenery operators (which some people consider too compact) or if statements (sometimes it can be too verbose).
We have an addons directory in VanJS. You're welcome to contribute your code there :-) As for |
Beta Was this translation helpful? Give feedback.
-
I suggest adding a vanjs-utils library.
You can put toStyleStr function :
van/components/van-ui.ts
Lines 6 to 9 in 48de9b2
Also toStylesheetStr function (not merge yet) :
van/components/van-ui.ts
Lines 11 to 17 in 52382a3
I also suggest 2 function :
example of usage :
I think this two function will made the flow easier to read compared to map and ternary operator.
It's highly inspired by handlebars, svelte etc... syntax
I already made an implementation for my own project
Beta Was this translation helpful? Give feedback.
All reactions