diff --git a/content/2-templating/4-event-click/ripple/Counter.ripple b/content/2-templating/4-event-click/ripple/Counter.ripple index c52621f..1512237 100644 --- a/content/2-templating/4-event-click/ripple/Counter.ripple +++ b/content/2-templating/4-event-click/ripple/Counter.ripple @@ -1,10 +1,12 @@ +import { track } from "ripple"; + export component Counter() { - let $count = 0; + let count = track(0); function incrementCount() { - $count++; + @count++; } -

{`Count: ${$count}`}

+

{`Count: ${@count}`}

} \ No newline at end of file diff --git a/content/3-lifecycle/1-on-mount/ripple/PageTitle.ripple b/content/3-lifecycle/1-on-mount/ripple/PageTitle.ripple index 6f58135..4685212 100644 --- a/content/3-lifecycle/1-on-mount/ripple/PageTitle.ripple +++ b/content/3-lifecycle/1-on-mount/ripple/PageTitle.ripple @@ -1,11 +1,11 @@ -import { effect } from "ripple"; +import { track, effect } from "ripple"; export component PageTitle() { - let $pageTitle = ""; + let pageTitle = track(""); effect(() => { - $pageTitle = document.title; + @pageTitle = document.title; }); -

{`Page title: ${$pageTitle}`}

+

{`Page title: ${@pageTitle}`}

} \ No newline at end of file diff --git a/content/3-lifecycle/2-on-unmount/ripple/Time.ripple b/content/3-lifecycle/2-on-unmount/ripple/Time.ripple index 4e66d9c..5a5e739 100644 --- a/content/3-lifecycle/2-on-unmount/ripple/Time.ripple +++ b/content/3-lifecycle/2-on-unmount/ripple/Time.ripple @@ -1,15 +1,15 @@ -import { effect } from "ripple"; +import { track, effect } from "ripple"; export component Time() { - let $time = new Date().toLocaleTimeString(); + let time = track(new Date().toLocaleTimeString()); effect(() => { const timer = setInterval(() => { - $time = new Date().toLocaleTimeString(); + @time = new Date().toLocaleTimeString(); }, 1000); return () => clearInterval(timer); }); -

{`Current time: ${$time}`}

+

{`Current time: ${@time}`}

} \ No newline at end of file