You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
fix(problems): comprehensive audit fixes across all frameworks
CRITICAL fixes:
- fe-react-render-nothing: remove incorrect NaN claim, simplify willRender
- fe-js-async-await-pattern: rename to "Function-Based Data Extraction",
fix hints that falsely referenced async/await
- fe-js-request-queue: fix text saying process() when sample uses run()
- fe-react-memo-shallow: fix text "return true if changed" to match
shallowEqual semantics (returns true when equal)
- codeValidator: always wrap return expressions in parens so object
literals with trailing semicolons are not parsed as blocks
WARNING fixes:
- fe-vue-watch-effect: fix text "changes from 5 to 10" when counter is 10
- fe-react-fetch-race-condition: clarify isStale/isFresh semantics in text
- 14 native-js problems: fix "implement X" text where setupCode already
provides the implementation (curry, pipe, compose, partial, iterator,
strategy, decorator, deep-clone, immutable-update, conditional-render,
lazy-render, promise-all-sim)
- 2 react problems: fix "implement" text (effect-deps-compare,
useSyncExternalStore)
- 2 vue problems: fix "no setup needed" when setupCode provides functions
(event-once, event-bus)
- Angular signal-update: accept any variable name in update callback
instead of hardcoding "v"
- Angular decorator patterns: accept TypeScript definite assignment (!)
for @input, @ViewChild, @ViewChildren, @ContentChild
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
'In a YouTube-style app, a VideoCard component receives a video title and thumbnail URL from its parent via @Input -- this is how parent components pass data down to children.',
'Notion auto-focuses the title input when you create a new page -- @ViewChild grabs a reference to that input element so the component can call .focus() on it.',
'A Kanban board like Trello needs references to all card components in a column to calculate drag-drop positions -- @ViewChildren returns a live QueryList of matching children.',
"A reusable modal component in an Angular Material-style library accesses the projected header template via @ContentChild to position it in the modal's title bar.",
621
626
hints: [
@@ -888,7 +893,7 @@ count.set(5);`,
888
893
setupCode: `const signal = (val: any) => { const s = () => val; s.set = (v: any) => { val = v; }; s.update = (fn: any) => { val = fn(val); }; return s; };\nconst count = signal(10);`,
"A 'Like' button on Instagram increments a counter based on the current value -- signal.update() derives the new state from the old without a separate read step.",
Copy file name to clipboardExpand all lines: lib/frontend-drills/problems/native-js.ts
+19-19Lines changed: 19 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -219,8 +219,8 @@ typeof mockFetch`,
219
219
framework: 'native-js',
220
220
category: 'Data Fetching',
221
221
difficulty: 'medium',
222
-
title: 'Async/Await Data Extraction',
223
-
text: 'Create a function that calls mockFetch() and returns the data property from the result.',
222
+
title: 'Function-Based Data Extraction',
223
+
text: 'Create a function that calls mockFetch() and returns the data property from the result. The validator checks that you defined a function (via typeof).',
224
224
setup: 'A mockFetch function that returns { data: [1, 2, 3] } synchronously.',
text: 'Implement a curry function that transforms a function taking 3 arguments into a chain of single-argument functions. Return the result.',
1078
+
text: 'A curry utility is provided that transforms a 3-argument function into a chain of single-argument calls. Use the curried add3 to compute the sum of three values.',
text: 'Implement a partial function that pre-fills some arguments. Return the result of calling the partially applied function.',
1098
+
text: 'A partial application utility is provided along with a double function (multiply pre-filled with 2). Call double with the remaining arguments to get the product.',
1099
1099
setup: 'A partial application utility.',
1100
1100
setupCode: `function partial(fn, ...preArgs) {\n return function(...laterArgs) {\n return fn(...preArgs, ...laterArgs);\n };\n}\nconst multiply = (a, b, c) => a * b * c;\nconst double = partial(multiply, 2);`,
text: 'Implement a pipe function that composes functions left to right. Pass a value through the pipeline and return the result.',
1118
+
text: 'A pipe function is provided that composes functions left to right. A transform pipeline is built from three operations (+1, *2, -3). Pass 4 through the pipeline and return the result.',
1119
1119
setup: 'A pipe utility.',
1120
1120
setupCode: `function pipe(...fns) {\n return (x) => fns.reduce((acc, fn) => fn(acc), x);\n}\nconst transform = pipe(\n x => x + 1,\n x => x * 2,\n x => x - 3\n);`,
text: 'Implement a compose function that composes functions right to left (opposite of pipe). Return the result.',
1135
+
text: 'A compose function is provided that composes functions right to left (opposite of pipe). A transform pipeline is built from three operations. Pass 4 through it and return the result.',
1136
1136
setup: 'A compose utility.',
1137
1137
setupCode: `function compose(...fns) {\n return (x) => fns.reduceRight((acc, fn) => fn(acc), x);\n}\nconst transform = compose(\n x => x - 3,\n x => x * 2,\n x => x + 1\n);`,
text: 'Implement a range iterator that yields numbers from start to end (exclusive). Use Symbol.iterator protocol. Spread it into an array.',
1197
+
text: 'A range iterator is provided that yields numbers from start to end (exclusive) using the Symbol.iterator protocol. Spread range(2, 7) into an array and return it.',
text: 'Implement a sorter that accepts different comparison strategies. Sort an array with ascending and descending strategies. Return both results.',
1280
+
text: 'A strategy-based sorter is provided with ascending and descending comparators. Use sortWith to sort the data array with both strategies and return both results as an object.',
1281
1281
setup: 'A strategy-based sorter.',
1282
1282
setupCode: `const strategies = {\n ascending: (a, b) => a - b,\n descending: (a, b) => b - a\n};\nfunction sortWith(arr, strategyName) {\n return [...arr].sort(strategies[strategyName]);\n}\nconst data = [3, 1, 4, 1, 5, 9];`,
text: 'Implement decorators that wrap a base function to add logging and timing metadata. Chain two decorators and return the enriched result.',
1297
+
text: 'Decorators withLogging and withTimestamp are provided, along with a base function already wrapped in both. Call the decorated function with 5 and return the enriched result.',
text: 'Update a nested object immutably: change user.address.city to "Seattle" without mutating the original. Return both the original city and the new city.',
1317
+
text: 'An immutable update is demonstrated: the original object and an updated copy (with city changed to "Seattle") are provided. Return both the original and new city values to verify independence.',
text: 'Implement a deepClone function that handles objects, arrays, and primitives. Clone a nested structure and verify independence.',
1334
+
text: 'A deepClone function is provided. A source object has been cloned and the clone mutated. Return properties from both source and clone to verify they are independent.',
text: 'Given a user object that may or may not have a name, render a greeting or a login prompt. Return the HTML string.',
1439
+
text: 'A renderGreeting function is provided that returns a greeting for named users or a login prompt otherwise. It has been called with a logged-in user and null. Return both results.',
text: 'Implement a render queue that collects render tasks and processes them in batches of a given size. Return the rendered batch results.',
1548
+
text: 'A render queue with add and flush methods is provided (batch size 2). Three render tasks have been queued. Two flushes have been called. Return both batch results.',
text: 'Implement a synchronous version of Promise.all: given an array of values, apply a transform to each and collect the results into a single array.',
1778
+
text: 'A collectAll function is provided that applies a transform to each item in an array. Use it to multiply each value by 10 and return the results.',
text: 'Write a createQueue() returning {add(fn), process(), getResults()}. add enqueues a function. process runs all queued functions in order, collecting return values. Add three functions, process them, and return the results.',
1858
+
text: 'Write a createQueue() returning {add(fn), run(), getResults()}. add enqueues a function. run executes all queued functions in order, collecting return values. Add three functions, run them, and return the results.',
1859
1859
setup: 'No setup needed.',
1860
1860
setupCode: `// Implement a sequential request queue`,
0 commit comments