Todo app 5

snippets/snippets/todo/lgci.ts

@@ -0,0 +1,11 @@
+// Same as before
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>
+
+// Input is an array of Todo items: Todo[]
+function completeAll(todos: Todo[]) {
+  // ...
+}

snippets/snippets/todo/mnmy.ts

@@ -0,0 +1,4 @@
+// Output is an array of Todo items: Todo[]
+function completeAll(todos: Todo[]): Todo[] {
+  // ...
+}

snippets/snippets/todo/mwrj.ts

@@ -0,0 +1,8 @@
+// After declaring todos as: readonly Todo[],
+// the following code WILL NOT compile:
+
+// Compile error - modifies the array
+todos[0] = { id: 1, text: '…', done: true }
+
+// Compile error - push() modifies the array
+todos.push({ id: 1, text: '…', done: true })

snippets/snippets/todo/szan.ts

@@ -0,0 +1,6 @@
+// Make input todos as readonly array
+function completeAll(
+  todos: readonly Todo[]
+): Todo[] {
+  // ...
+}

snippets/snippets/todo/tdbp.ts

@@ -0,0 +1,5 @@
+// Takes an array of todo items and returns
+// a new array where "done" is all true
+function completeAll(todos) {
+  // ...
+}

src/components/CodeBlock.tsx

@@ -20,7 +20,8 @@ const CodeBlock = ({
   compile,
   shouldHighlightResult,
   resultError,
-  tokenIndexIndentWorkaround
+  tokenIndexIndentWorkaround,
+  defaultErrorHighlight
 }: {
   snippet: string
   shouldHighlight?: (lineIndex: number, tokenIndex: number) => boolean
@@ -33,6 +34,7 @@ const CodeBlock = ({
   shouldHighlightResult?: (lineIndex: number, tokenIndex: number) => boolean
   resultError?: boolean
   tokenIndexIndentWorkaround?: number
+  defaultErrorHighlight?: boolean
 }) => {
   const [resultVisible, setResultVisible] = useState(defaultResultVisible)
   const { radii, colors, ns, maxWidths, spaces, fontSizes } = useTheme()
@@ -88,21 +90,16 @@ const CodeBlock = ({
               shouldHighlightResult(lineIndex, tokenIndex))) &&
           css`
             font-weight: bold;
-            background: ${shouldHighlightResult && resultVisible && resultError
+            background: ${((shouldHighlightResult && resultVisible) ||
+              defaultErrorHighlight) &&
+            resultError
               ? colors('white')
               : colors('yellowHighlight')};
-            border-bottom: ${shouldHighlightResult &&
-            resultVisible &&
+            border-bottom: ${((shouldHighlightResult && resultVisible) ||
+              defaultErrorHighlight) &&
             resultError
-              ? 'none'
+              ? `3px solid ${colors('red')}`
               : `2px solid ${colors('darkOrange')}`};
-            text-decoration: ${shouldHighlightResult &&
-            resultVisible &&
-            resultError
-              ? 'underline'
-              : 'none'};
-            text-decoration-style: wavy;
-            text-decoration-color: ${colors('red')};
           `
         }
         language={noHighlight ? 'diff' : 'typescript'}

src/lib/snippets.ts

@@ -530,6 +530,18 @@ function toggleTodo(
   // ...
 }`
 
+export const lgci = `// Same as before
+type Todo = Readonly<{
+  id: number
+  text: string
+  done: boolean
+}>
+
+// Input is an array of Todo items: Todo[]
+function completeAll(todos: Todo[]) {
+  // ...
+}`
+
 export const lieq = `type Todo = {
   id: number
   text: string
@@ -547,6 +559,20 @@ console.log(\`{ id: 1, text: '…', done: false }\`)
 console.log('Actual:')
 console.log(result)`
 
+export const mnmy = `// Output is an array of Todo items: Todo[]
+function completeAll(todos: Todo[]): Todo[] {
+  // ...
+}`
+
+export const mwrj = `// After declaring todos as: readonly Todo[],
+// the following code WILL NOT compile:
+
+// Compile error - modifies the array
+todos[0] = { id: 1, text: '…', done: true }
+
+// Compile error - push() modifies the array
+todos.push({ id: 1, text: '…', done: true })`
+
 export const njgr = `function toggleTodo(todo: Todo): Todo {
   // Little Duckling’s refactoring is a
   // bad refactoring because it modifies
@@ -605,6 +631,19 @@ export const reel = `function toggleTodo(todo) {
   }
 }`
 
+export const szan = `// Make input todos as readonly array
+function completeAll(
+  todos: readonly Todo[]
+): Todo[] {
+  // ...
+}`
+
+export const tdbp = `// Takes an array of todo items and returns
+// a new array where "done" is all true
+function completeAll(todos) {
+  // ...
+}`
+
 export const tgvw = `const bar: Todo = {
   text: '…',
   done: true