add docs for using SDK in Solid#898
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds Solid to SDK documentation and site: new Solid docs page, links and navigation updates, README update, and homepage copy changes. Enhances code example components to support a Solid tab by extending ShowCode props and rendering, and wiring Solid snippets in LiveCodes. Updates sidebar to include Solid under SDK. Changes
Sequence Diagram(s)sequenceDiagram
participant Page as Docs Page
participant LiveCodes as LiveCodes Component
participant ShowCode as ShowCode Component
participant UI as Tabs UI
Page->>LiveCodes: Render with examples
LiveCodes->>ShowCode: Pass props { js, ts, react, vue, svelte, solid }
Note over ShowCode: Initialize state for each code sample<br/>Format with tsx where applicable
ShowCode->>UI: Render tabs (JS, TS, React, Vue, Svelte, Solid)
UI-->>User: Display Solid tab with TSX sample
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
|
Size Change: +77 B (+0.01%) Total Size: 956 kB ℹ️ View Unchanged
|
Deploying livecodes with
|
| Latest commit: |
064b529
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f21a03e2.livecodes.pages.dev |
| Branch Preview URL: | https://solid-sdk.livecodes.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/docs/sdk/solid.mdx (1)
16-41: Consider adding a note about proper cleanup with async playground creation.The code example has a potential race condition: if the component unmounts before
createPlaygroundresolves, the cleanup function will run withplaygroundbeingnull, leaving the playground instance without proper cleanup.This is similar to the first Svelte example in
docs/docs/sdk/svelte.mdx. However, the Svelte docs include a second, recommended approach (lines 68-88) that properly handles cleanup by waiting for the promise to resolve.Consider adding a similar note and recommended pattern for Solid:
const onMounted = (container: HTMLElement) => { const playgroundPromise = createPlayground(container, options); playgroundPromise.then((sdk) => { playground = sdk; }); // Ensure cleanup waits for playground creation onCleanup(async () => { const sdk = await playgroundPromise; sdk?.destroy(); }); };Or add a note: "For proper cleanup that handles async initialization, see the recommended pattern in the Svelte documentation."
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
README.md(2 hunks)docs/docs/sdk/index.mdx(2 hunks)docs/docs/sdk/react.mdx(1 hunks)docs/docs/sdk/solid.mdx(1 hunks)docs/docs/sdk/svelte.mdx(1 hunks)docs/docs/sdk/vue.mdx(1 hunks)docs/sidebars.ts(1 hunks)docs/src/components/HomepageFeatures.tsx(1 hunks)docs/src/components/LiveCodes.tsx(2 hunks)docs/src/components/ShowCode.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (11)
- GitHub Check: Redirect rules - livecodes
- GitHub Check: Header rules - livecodes
- GitHub Check: Pages changed - livecodes
- GitHub Check: tests (18.x, 2)
- GitHub Check: tests (18.x, 5)
- GitHub Check: tests (18.x, 1)
- GitHub Check: tests (18.x, 4)
- GitHub Check: tests (18.x, 3)
- GitHub Check: build (18.x)
- GitHub Check: build
- GitHub Check: build (18.x)
🔇 Additional comments (16)
README.md (2)
122-122: LGTM!The SDK feature list has been correctly updated to include Solid alongside the other supported frameworks.
159-159: LGTM!The JavaScript SDK description now accurately reflects that both Svelte and Solid can be used directly without wrappers, which aligns with the documentation structure.
docs/docs/sdk/react.mdx (1)
151-151: LGTM!The related links section has been correctly updated to include a reference to the Solid SDK documentation, maintaining consistency with the other SDK framework docs.
docs/sidebars.ts (1)
88-88: LGTM!The sidebar configuration correctly adds the Solid SDK documentation page to the navigation. The placement before
sdk/headlesskeeps all framework-specific SDK docs grouped together logically.docs/docs/sdk/svelte.mdx (1)
100-100: LGTM!The related links section has been updated to include the Solid SDK documentation reference, maintaining cross-linking consistency across all SDK framework docs.
docs/docs/sdk/vue.mdx (1)
166-166: LGTM!The related links section correctly includes the Solid SDK documentation, completing the cross-reference pattern across all SDK framework docs.
docs/src/components/HomepageFeatures.tsx (1)
154-156: LGTM!The SDK feature description has been properly updated to include Solid in the list of supported frameworks. The revised sentence structure improves readability by grouping all framework links together before mentioning the headless mode.
docs/docs/sdk/index.mdx (2)
13-13: LGTM!The introductory paragraph now correctly states that both Svelte and Solid can be used directly without wrappers, which accurately represents the SDK's capabilities.
109-109: LGTM!The Usage section has been properly updated to include Solid in the list of available SDK variations, completing the documentation structure.
docs/docs/sdk/solid.mdx (1)
1-86: LGTM with minor suggestion!The Solid SDK documentation follows the established pattern from other framework docs and provides clear, working examples. The code uses appropriate SolidJS patterns (
onCleanup, ref callbacks), imports are correct, and the related links section is complete.docs/src/components/LiveCodes.tsx (2)
76-88: LGTM! Solid code snippet follows best practices.The SolidJS integration code is well-structured and uses the correct ref callback pattern for executing code when the element mounts. The TypeScript syntax with type annotations aligns with SolidJS best practices.
113-113: LGTM! Consistent integration with ShowCode component.The
solidprop is correctly passed to theShowCodecomponent, following the same pattern used for other frameworks.docs/src/components/ShowCode.tsx (4)
17-17: LGTM! Props correctly extended.The
solid: stringprop is properly added to the component's props interface, maintaining consistency with other framework props.
24-24: LGTM! State initialization follows established pattern.The
solidCodestate is properly initialized from props, consistent with the state management pattern used for other frameworks.
62-62: LGTM! Appropriate parser choice for Solid code.Using the
tsxparser for formattingsolidCodeis correct, as the SolidJS example uses TypeScript with JSX syntax.
103-105: LGTM! Solid tab properly configured.The Solid tab is correctly implemented with appropriate language highlighting (
tsx) and resize handler, maintaining consistency with other framework tabs.
1 participant
Summary by CodeRabbit
New Features
Documentation