Skip to content

Commit

Permalink
Add the link to @ArcaneEngineer's TODO App
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tao-VanJS
Tao-VanJS committed May 2, 2024
1 parent 995f81d commit 09faad7
Show file tree
Hide file tree
Showing 7 changed files with 16 additions and 15 deletions.
4 changes: 2 additions & 2 deletions code/diff.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i < diffVal.length; ) {
let line
if (diffVal[i].added && diffVal[i + 1].removed) {
if (diffVal[i].added && diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed && diffVal[i + 1].added) {
} else if (diffVal[i].removed && diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
6 changes: 3 additions & 3 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
div(appState.val.todos.map(TodoItem)),
)
}
</code></pre><p><b>Demo:</b></p><p id="demo-todo-fully-reactive"></p><p><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1" class="w3-hover-opacity">Try on CodeSandbox</a></p><p>With the help of <a href="/x" class="w3-hover-opacity"><b>VanX</b></a>, the code above can be simplified to just 10+ lines:</p><pre><code class="language-js">const TodoList = () =&gt; {
</code></pre><p><b>Demo:</b></p><p id="demo-todo-fully-reactive"></p><p><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1" class="w3-hover-opacity">Try on CodeSandbox</a></p><p><i>You can also check <a href="https://github.com/vanjs-org/van/discussions/316" class="w3-hover-opacity">the example</a> by <a href="https://github.com/ArcaneEngineer" class="w3-hover-opacity">@ArcaneEngineer</a>, which is a slight variation of this <code class="symbol">TODO App</code> to allow TODO items to be editable.</i></p><p>With the help of <a href="/x" class="w3-hover-opacity"><b>VanX</b></a>, the code above can be simplified to just 10+ lines:</p><p></p><pre><code class="language-js">const TodoList = () =&gt; {
const items = vanX.reactive(JSON.parse(localStorage.getItem("appState") ?? "[]"))
van.derive(() =&gt; localStorage.setItem("appState", JSON.stringify(vanX.compact(items))))
const inputDom = input({type: "text"})
Expand Down Expand Up @@ -467,10 +467,10 @@ <h1 class="w3-padding-16 w3-xxxlarge">
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i &lt; diffVal.length; ) {
let line
if (diffVal[i].added &amp;&amp; diffVal[i + 1].removed) {
if (diffVal[i].added &amp;&amp; diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed &amp;&amp; diffVal[i + 1].added) {
} else if (diffVal[i].removed &amp;&amp; diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
4 changes: 2 additions & 2 deletions demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,10 +349,10 @@ document.getElementById("random-demo").addEventListener("click", () => {
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i < diffVal.length; ) {
let line
if (diffVal[i].added && diffVal[i + 1].removed) {
if (diffVal[i].added && diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed && diffVal[i + 1].added) {
} else if (diffVal[i].removed && diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
6 changes: 3 additions & 3 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
div(appState.val.todos.map(TodoItem)),
)
}
</code></pre><p><b>Demo:</b></p><p id="demo-todo-fully-reactive"></p><p><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1" class="w3-hover-opacity">Try on CodeSandbox</a></p><p>With the help of <a href="/x" class="w3-hover-opacity"><b>VanX</b></a>, the code above can be simplified to just 10+ lines:</p><pre><code class="language-js">const TodoList = () =&gt; {
</code></pre><p><b>Demo:</b></p><p id="demo-todo-fully-reactive"></p><p><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1" class="w3-hover-opacity">Try on CodeSandbox</a></p><p><i>You can also check <a href="https://github.com/vanjs-org/van/discussions/316" class="w3-hover-opacity">the example</a> by <a href="https://github.com/ArcaneEngineer" class="w3-hover-opacity">@ArcaneEngineer</a>, which is a slight variation of this <code class="symbol">TODO App</code> to allow TODO items to be editable.</i></p><p>With the help of <a href="/x" class="w3-hover-opacity"><b>VanX</b></a>, the code above can be simplified to just 10+ lines:</p><p></p><pre><code class="language-js">const TodoList = () =&gt; {
const items = vanX.reactive(JSON.parse(localStorage.getItem("appState") ?? "[]"))
van.derive(() =&gt; localStorage.setItem("appState", JSON.stringify(vanX.compact(items))))
const inputDom = input({type: "text"})
Expand Down Expand Up @@ -467,10 +467,10 @@ <h1 class="w3-padding-16 w3-xxxlarge">
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i &lt; diffVal.length; ) {
let line
if (diffVal[i].added &amp;&amp; diffVal[i + 1].removed) {
if (diffVal[i].added &amp;&amp; diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed &amp;&amp; diffVal[i + 1].added) {
} else if (diffVal[i].removed &amp;&amp; diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
4 changes: 2 additions & 2 deletions diff.code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ const DiffApp = () => {
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i < diffVal.length; ) {
let line
if (diffVal[i].added && diffVal[i + 1].removed) {
if (diffVal[i].added && diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed && diffVal[i + 1].added) {
} else if (diffVal[i].removed && diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
4 changes: 2 additions & 2 deletions jsfiddle/demo/diff/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ const DiffApp = () => {
const diffVal = diff.val, showMergedVal = showMerged.val, resultDom = div()
for (let i = 0; i < diffVal.length; ) {
let line
if (diffVal[i].added && diffVal[i + 1].removed) {
if (diffVal[i].added && diffVal[i + 1]?.removed) {
line = DiffLine(diffVal[i + 1].value, diffVal[i].value, showMergedVal)
i += 2
} else if (diffVal[i].removed && diffVal[i + 1].added) {
} else if (diffVal[i].removed && diffVal[i + 1]?.added) {
line = DiffLine(diffVal[i].value, diffVal[i + 1].value, showMergedVal)
i += 2
} else if (diffVal[i].added) {
Expand Down
3 changes: 2 additions & 1 deletion sitegen/demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,8 @@ const TodoList = () => {
p(Demo()),
p({id: "demo-todo-fully-reactive"}),
p(Link("Try on CodeSandbox", "https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/code/todo-app?file=/src/main.ts:1,1")),
p("With the help of ", Link(VanX(), "/x"), ", the code above can be simplified to just 10+ lines:"),
p(i("You can also check ", Link("the example", "https://github.com/vanjs-org/van/discussions/316"), " by ", Link("@ArcaneEngineer", "https://github.com/ArcaneEngineer"), ", which is a slight variation of this ", Symbol("TODO App"), " to allow TODO items to be editable."),
p("With the help of ", Link(VanX(), "/x"), ", the code above can be simplified to just 10+ lines:")),
JsFile("todo-app.code.js"),
p(Demo()),
p({id: "demo-todo-fully-reactive-vanx"}),
Expand Down

0 comments on commit 09faad7

Please sign in to comment.