[coderanac]

Docs: Fix broken web-components snippets in loaders documentation

What I did

The web-components examples in the loaders documentation were calling
TodoItem as a function without ever importing or defining it — a
copy-paste error from the React/Solid versions.

File: docs/_snippets/loader-story.md

Before:

render: (args, { loaded: { todo } }) => TodoItem({ ...args, ...todo }),

After:

import { html } from 'lit';

render: (args, { loaded: { todo } }) =>
  html`<demo-todo-item title=${todo.title} ?completed=${todo.completed}></demo-todo-item>`,

All 4 affected snippets (JS CSF 3, TS CSF 3, JS CSF Next, TS CSF Next) received the same fix. The pattern follows the html tagged template literal from lit already used in all other web-components snippets in the repository.

Checklist for Contributors

Testing

Manual testing

N/A - docs-only change

Documentation

• Add or update documentation reflecting your changes

Summary by CodeRabbit

• Documentation
  • Updated Storybook Web Components examples to use a template-based rendering approach for the todo item demo.
  • Improved the sample snippets to show binding values directly from loaded data, aligning the examples with current component usage.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 588c0e40-66c3-45fe-8196-48aca4cb5771

📥 Commits

Reviewing files that changed from the base of the PR and between fac05a5 and 8685efa.

📒 Files selected for processing (1)

• docs/_snippets/loader-story.md

---

📝 Walkthrough

Walkthrough

Updated Web Components code examples in docs/_snippets/loader-story.md to render demo-todo-item using lit's html template literal instead of calling TodoItem({...args, ...todo}). Changes span CSF 3 and CSF Next JavaScript/TypeScript snippets, adding necessary html imports.

Changes

Loader story documentation update

Layer / File(s)	Summary
CSF 3 Web Components render examples docs/_snippets/loader-story.md	The default/meta render functions for CSF 3 JavaScript and TypeScript examples now return a lit html template rendering <demo-todo-item> with title/completed from loaded.todo, replacing the prior TodoItem({...args, ...todo}) call.
CSF Next Web Components render examples docs/_snippets/loader-story.md	The CSF Next TypeScript and JavaScript snippets add a lit html import and replace the meta render function body with an html template binding title/completed from loaded.todo.

Estimated code review effort: 1 (Trivial) | ~5 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderanac]

Hi! This PR is failing the label check since I don't have permission to add labels myself. Could a maintainer please add documentation, ci:docs, and qa:skip?

[jonniebigodes]

@coderanac thanks for taking the time to put together this pull request and helping us improve the documentation by catching this small issue with the snippets. We appreciate it 🙏 !

I've checked and all is good on my end.

This will get merged shortly.

Hope you have a great day.

Stay safe