fix: Button loader, Datepicker range color, example code etc. #1838
Conversation
|
@shinokada is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughRemoves a local HighlightCompo and its theme export, adopts svelte-rune-highlight across docs and pages, switches examples/pages to eager import.meta.glob loading for example sources/components, adds Button.spinnerProps and a button theme spinner slot, tweaks datepicker dayButton colors, fixes spinner type name, and bumps svelte-rune-highlight in package.json. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Page as Doc / Example Page
participant Importer as import.meta.glob (eager)
participant Transformer as transformModules/transformComponents
participant HighlightPkg as svelte-rune-highlight
participant HLJS as highlight.js (typescript)
Page->>Importer: eager import raw example modules & components
Importer-->>Transformer: provide module & component entries
Transformer-->>Page: produce `examples` and `components` maps
Page->>HLJS: import & register TypeScript language -> build tsLang object
Page->>HighlightPkg: render HighlightCompo with code=examples[key], language=tsLang
HighlightPkg->>HLJS: register/format using provided language
HighlightPkg-->>Page: highlighted code block rendered
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 inconclusive)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/routes/docs/pages/typescript.md (1)
29-29: Add error handling for missing or failed file load.The code assumes
examples["../../../lib/types.ts"]exists and is accessible. If the file fails to load or the glob pattern doesn't match, this will passundefinedto HighlightCompo, which may cause runtime errors. Consider adding a fallback or validation.-<HighlightCompo codeLang={tsLang} code={examples["../../../lib/types.ts"] as string} class="max-w-7xl bg-white" numberLine/> +<HighlightCompo codeLang={tsLang} code={examples["../../../lib/types.ts"] as string ?? ""} class="max-w-7xl bg-white" numberLine/>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/pages/typescript.md(1 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (1)
src/routes/docs/pages/typescript.md (1)
14-18: No issues found — Vite syntax is correct.Vite's
import.meta.globsupports thequery: '?raw'parameter for loading files as raw text, along with theimport: 'default'option used in your code. The implementation follows standard Vite v4 patterns and will correctly load the TypeScript file as raw text.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
package.json(1 hunks)src/routes/docs/pages/typescript.md(1 hunks)src/routes/utils/HighlightCompo.svelte(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/docs/pages/typescript.md
⏰ 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (4)
src/routes/utils/HighlightCompo.svelte (3)
7-12: LGTM! Strong type definition.The
HighlightLanguagetype provides excellent encapsulation by bundling the language name with its registration function, improving type safety and API clarity.
32-32: LGTM! Proper prop forwarding pattern.The destructuring correctly implements the new API with
languageand uses the spread operator to capture remaining props for forwarding, which improves component flexibility.
76-79: LGTM! Improved flexibility and prop forwarding.The updated logic correctly uses the new
language.nameproperty and accepts both "markdown" and "md" for better flexibility. The{...restProps}forwarding ensures all additional props reach the child components.package.json (1)
95-95: Verifysvelte-rune-highlight0.8.0 availability and breaking changes manually.Shell script confirmed version 0.8.0 exists on npm registry with no security vulnerabilities, but web sources indicate the latest published version is 0.7.1. Unable to locate changelog or breaking change documentation for 0.8.0. Before merging, confirm:
- The version 0.8.0 is stable and publicly available (not pre-release)
- No breaking changes exist in the API used by
HighlightCompo- Dependencies are compatible with your current setup
| wrapLines?: boolean; | ||
| startingLineNumber?: number; | ||
| highlightedLines?: number[]; | ||
| backgroudColor?: string; |
There was a problem hiding this comment.
Fix typo in prop name.
The prop name is misspelled as backgroudColor instead of backgroundColor.
Apply this diff to fix the typo:
- backgroudColor?: string;
+ backgroundColor?: string;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| backgroudColor?: string; | |
| backgroundColor?: string; |
🤖 Prompt for AI Agents
In src/routes/utils/HighlightCompo.svelte around line 28, the prop name is
misspelled as "backgroudColor"; rename the prop to "backgroundColor" everywhere
it's declared and referenced (including type annotations, props export, and any
usages within the component and its consumers) to ensure consistency and avoid
runtime/typing errors.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/utils/HighlightCompo.svelte(2 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (3)
src/routes/utils/HighlightCompo.svelte (3)
7-12: LGTM! Well-structured type definition.The
HighlightLanguagetype provides clear type safety for language configuration and properly integrates with highlight.js'sLanguageFntype.
32-32: LGTM! Props destructuring with rest operator.The destructuring correctly extracts the new
languageprop and uses...restPropsto capture and forward additional Highlight.js props to child components, maintaining type safety through thePropsinterface.
76-79: Verify prop precedence: explicitlanguagevsrestPropsspread.Line 77 explicitly passes
language={mdLang}and then spreads{...restProps}, which also containslanguage. In JSX/Svelte, props appearing later typically override earlier ones, sorestProps.languagewould overridemdLang.This may not be the intended behavior. Consider either:
- Excluding
languagefromrestPropsbefore spreading, or- Reversing the order to
{...restProps} language={mdLang}to ensuremdLangtakes precedenceApply this diff to fix the prop precedence:
- {#if ["markdown", "md"].includes(language.name)} - <Highlight language={mdLang} code={processedCode} {...restProps} /> + {#if ["markdown", "md"].includes(language.name)} + <Highlight {...restProps} language={mdLang} code={processedCode} />Or extract language from restProps:
- let { code, language, badgeClass, buttonClass, replaceLib = true, class: className, ...restProps }: Props = $props(); + let { code, language, badgeClass, buttonClass, replaceLib = true, class: className, ...restProps }: Props = $props(); + // Ensure language is not in restProps to avoid conflicts + const { language: _, ...propsWithoutLanguage } = { language, ...restProps };And then use
propsWithoutLanguageinstead ofrestPropsin the template.Likely an incorrect or invalid review comment.
| badgeClass?: string; | ||
| buttonClass?: string; | ||
| codeLang?: string; | ||
| language: HighlightLanguage; |
There was a problem hiding this comment.
🧩 Analysis chain
Verify all usages have been updated for the breaking API change.
The prop has changed from optional codeLang?: string to required language: HighlightLanguage. According to previous review comments, 18+ component usages in the codebase had not been updated. Please verify all usages now pass the correct language prop.
🏁 Script executed:
#!/bin/bash
# Description: Verify all HighlightCompo usages now use the new language prop
# Search for HighlightCompo component usages
echo "=== HighlightCompo usages ==="
rg -nP --glob='*.svelte' -C3 '<HighlightCompo'
# Search for any remaining references to deprecated codeLang prop
echo -e "\n=== Deprecated codeLang usage ==="
rg -nP --glob='*.svelte' 'codeLang='
# Check for HighlightCompo usages without language prop
echo -e "\n=== Checking for missing language prop ==="
rg -nPU --glob='*.svelte' '<HighlightCompo(?:(?!language=)[^>])*>'Length of output: 20682
Fix incompatible HighlightCompo usages across the codebase.
The component change to require language: HighlightLanguage has not been fully applied. 20 usages remain incompatible:
- 6 usages in
src/routes/builder/skeleton/+page.svelte(lines 142, 159, 174, 189, 200, 229): missinglanguageprop entirely - 13 usages in
src/routes/docs-examples/extend/clipboard-manager/+page.svelte(lines 28, 42, 61, 79, 99, 119, 133, 172, 189, 202, 216, 233, 247): still using deprecatedcodeLangprop - 1 usage in
src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte(line 21): still using deprecatedcodeLangprop
Update all instances to pass the new language prop with a valid HighlightLanguage value.
🤖 Prompt for AI Agents
In src/routes/utils/HighlightCompo.svelte around line 18 the prop signature was
changed to require language: HighlightLanguage; but many call sites still omit
it or use deprecated codeLang; update all listed usages to pass the new language
prop with a valid HighlightLanguage value: in
src/routes/builder/skeleton/+page.svelte (lines 142, 159, 174, 189, 200, 229)
add language="..." appropriate to the snippet; in
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (lines 28, 42,
61, 79, 99, 119, 133, 172, 189, 202, 216, 233, 247) replace codeLang={...} with
language={...} using the correct HighlightLanguage enum/value; and in
src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte (line 21) likewise
replace codeLang with language; ensure values are valid HighlightLanguage
entries and run typecheck to confirm no remaining incompatibilities.
shinokada
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/lib/types.ts (1)
627-627: Consider consistent formatting for empty interfaces.Several empty interface definitions have whitespace-only changes. For consistency and readability, consider either keeping them on a single line or using a consistent multi-line format across the codebase.
Also applies to: 786-786, 982-982, 1171-1171, 1488-1488, 1498-1498, 1899-1899
src/lib/buttons/Button.svelte (2)
12-12: Consider consistent spacing in object literal.The default value
{size:"4"}lacks spacing around the colon. For consistency with typical JavaScript style, consider{ size: "4" }.Apply this diff:
- let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, loading = false, spinnerProps = {size:"4"}, class: className, ...restProps }: ButtonProps = $props(); + let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, loading = false, spinnerProps = { size: "4" }, class: className, ...restProps }: ButtonProps = $props();
42-59: Add spinnerProps to the props documentation.The component documentation block is missing the newly added
spinnerPropsprop.Add after line 56:
@prop disabled @prop loading = false +@prop spinnerProps = { size: "4" } @prop class: className
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
package.json(1 hunks)src/lib/buttons/Button.svelte(2 hunks)src/lib/buttons/theme.ts(1 hunks)src/lib/datepicker/theme.ts(1 hunks)src/lib/types.ts(8 hunks)src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte(2 hunks)src/routes/builder/skeleton/+page.svelte(1 hunks)src/routes/docs-examples/components/buttons/Loader.svelte(1 hunks)src/routes/docs-examples/components/datepicker/Range.svelte(1 hunks)src/routes/docs-examples/extend/clipboard-manager/+page.svelte(14 hunks)src/routes/docs/pages/typescript.md(1 hunks)src/routes/utils/HighlightCompo.svelte(0 hunks)src/routes/utils/theme.ts(0 hunks)
💤 Files with no reviewable changes (2)
- src/routes/utils/theme.ts
- src/routes/utils/HighlightCompo.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2024-11-22T08:37:27.996Z
Learnt from: mrh1997
Repo: themesberg/flowbite-svelte PR: 1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.
Applied to files:
src/lib/buttons/Button.svelte
📚 Learning: 2024-10-18T09:38:03.879Z
Learnt from: Chizaruu
Repo: themesberg/flowbite-svelte PR: 1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In `Timepicker.svelte`, the `Dropdown` opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.
Applied to files:
src/routes/docs-examples/components/datepicker/Range.svelte
📚 Learning: 2024-10-15T22:41:47.429Z
Learnt from: Chizaruu
Repo: themesberg/flowbite-svelte PR: 1464
File: src/routes/component-data/Datepicker.json:0-0
Timestamp: 2024-10-15T22:41:47.429Z
Learning: The component should be named 'Datepicker' (with lowercase 'p') throughout the codebase to maintain consistency.
Applied to files:
src/routes/docs-examples/components/datepicker/Range.svelte
📚 Learning: 2025-03-20T12:47:33.307Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.
Applied to files:
src/lib/datepicker/theme.ts
📚 Learning: 2025-03-20T11:52:09.106Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components, both the regular focus styling (controlled by ringClasses) and focus-within styling need to be dynamically adjusted based on validation state. For proper validation styling, create separate objects for focus-within classes (like focusWithinClasses) that use the same color as ringClasses when inputInvalid=true.
Applied to files:
src/lib/datepicker/theme.ts
📚 Learning: 2025-03-20T11:52:09.106Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components like MultiInput, when handling focus states for validation, avoid hardcoding focus-within classes like 'focus-within:border-primary-500'. Instead, create a dynamic mapping object (e.g., focusWithinClasses) that changes the focus ring color based on the current color state, especially when inputInvalid=true.
Applied to files:
src/lib/datepicker/theme.ts
🧬 Code graph analysis (1)
src/lib/types.ts (5)
src/lib/drawer/theme.ts (1)
DrawerHandleVariants(78-78)src/lib/forms/helper/theme.ts (1)
HelperVariants(4-4)src/lib/toolbar/theme.ts (1)
ToolbarGroupVariants(6-6)src/lib/skeleton/theme.ts (2)
TestimonialPlaceholderVariants(9-9)WidgetPlaceholderVariants(12-12)src/lib/tooltip/theme.ts (1)
TooltipVariants(4-4)
⏰ 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (13)
src/lib/datepicker/theme.ts (1)
25-47: LGTM! Consistent theming update across all color variants.The dayButton background colors have been uniformly updated from lighter shades (e.g.,
bg-*-100) to mid-range shades (bg-*-300for light mode,bg-*-900for dark mode) across all 23 color variants. This provides better visual contrast and consistency for selected dates.src/routes/docs-examples/components/datepicker/Range.svelte (1)
11-11: LGTM! Example color update.The color change from
"pink"to"blue"aligns with the datepicker theming updates and provides a standard color variant for the range example.src/routes/docs-examples/components/buttons/Loader.svelte (1)
5-10: LGTM! Clear examples of the new loading button functionality.The new examples effectively demonstrate:
- Basic loading state (lines 5-7)
- Customized spinner with size and color props (lines 8-10)
These examples align with the
spinnerPropsaddition toButtonPropsin types.ts and provide clear documentation for developers.src/routes/builder/skeleton/+page.svelte (1)
23-23: LGTM! Consistent migration to external highlighting package.The import change from the local
HighlightCompocomponent tosvelte-rune-highlightis consistent with the broader migration across the codebase (also seen in quickstart and typescript pages). The component usages throughout the file remain compatible with the external package's API.src/lib/buttons/theme.ts (1)
11-12: LGTM! Proper theme slot addition for spinner support.The new
spinnerslot with"ms-2"(margin-start) class provides appropriate spacing for the spinner component within buttons. This change properly extends the button theme to support thespinnerPropsfunctionality added toButtonProps.src/routes/docs/pages/typescript.md (2)
30-30: Clean migration to external highlighting component.The
HighlightCompousage properly integrates the TypeScript language registration and dynamically loaded code content. The removal of the undefinednumberLineprop (mentioned in past reviews) and the switch to thelanguageprop represents a clean migration to the externalsvelte-rune-highlightpackage, pending verification of the API compatibility.
12-23: The code is correct and requires no changes.The
languageprop expects an object with anamestring and aregisterfunction, which matches the implementation at lines 20-23:{ name: 'typescript', register: typescript }. The code properly follows the documented API.src/lib/buttons/Button.svelte (2)
20-20: LGTM!The spinner property is correctly extracted from the button theme and aligns with the new Spinner component integration.
30-35: LGTM!The Spinner component is correctly integrated with proper conditional rendering and theme application. The use of spread props allows flexible customization via spinnerProps.
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (4)
2-3: LGTM!The migration to
svelte-rune-highlightpackage aligns with the broader codebase refactoring to adopt external highlighting utilities.
8-21: LGTM!The eager glob imports with proper type assertions enable a clean data-driven approach. Using
transformComponentsandtransformModuleshelpers should provide normalized keys for consistent component and code access.
32-201: LGTM!The ExampleWrapper components are used consistently throughout with proper component and code prop bindings. This data-driven approach significantly improves maintainability compared to static per-example blocks.
44-44: Update line 44 to use transformed modules for consistency.All other example renderings use the transformed
modulesobject (with simplified keys like'Interactive','TargetSpecific'), but line 44 directly accessesexampleModuleswith the raw path"./examples/EnableSelectionMenu.svelte". This inconsistency should be resolved:<HighlightCompo code={modules['EnableSelectionMenu']} class="max-w-7xl bg-white" />Ensure the transformed module key matches the filename (without path/extension).
⛔ Skipped due to learnings
Learnt from: mrh1997 Repo: themesberg/flowbite-svelte PR: 1442 File: src/lib/utils/Popper.svelte:144-145 Timestamp: 2024-11-22T08:37:27.996Z Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (2)
44-45: Consider reusingmodules['EnableSelectionMenu']instead of rawexampleModulesFor the “Enable Selection Menu” snippet you still reference the raw glob map (
exampleModules["./examples/EnableSelectionMenu.svelte"]) while other examples use the transformedmodulesmap. Functionally this is fine, but for consistency and future refactors it might be cleaner to rely onmodules['EnableSelectionMenu']here as well (assumingtransformModulesexposes that key).If
transformModulesalready exposes anEnableSelectionMenuentry, a refactor would look like:- <HighlightCompo code={exampleModules["./examples/EnableSelectionMenu.svelte"] as string} class="max-w-7xl bg-white" /> + <HighlightCompo code={modules['EnableSelectionMenu']} class="max-w-7xl bg-white" />
23-24: RenamesentitiveExfor clarity; HighlightCompo usage looks fineThe inline example for
detectSensitiveDatais helpful, but the variable namesentitiveExis likely a typo and slightly hurts readability. Renaming it tosensitiveEx(or similar) keeps things clearer; theHighlightCompousage with a plain stringcodeprop is otherwise straightforward.Suggested tweak:
- const sentitiveEx = "detectSensitiveData=(text) => (/confidential|secret/i).test(text)"; + const sensitiveEx = "detectSensitiveData=(text) => (/confidential|secret/i).test(text)"; … - <HighlightCompo code={sentitiveEx} class="my-2 max-w-7xl bg-white" /> + <HighlightCompo code={sensitiveEx} class="my-2 max-w-7xl bg-white" />Please just confirm in the svelte-rune-highlight docs that the
codeprop is still the recommended way to pass a literal string snippet.Also applies to: 160-161
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
package.json(1 hunks)src/routes/docs-examples/extend/clipboard-manager/+page.svelte(14 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
⏰ 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (1)
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (1)
32-32: Key naming verified—all ExampleWrapper usages are correctThe
transformComponentsandtransformModulesfunctions usedefaultPathToNameto extract component names from glob paths, converting'./examples/Interactive.svelte'to'Interactive'. All 11 ExampleWrapper usages at the specified lines use keys that match actual.sveltefiles in the examples directory:
- Interactive ✓
- TargetSpecific ✓
- WithModal ✓
- DocumentationSite ✓
- BlogReader ✓
- EmailClient ✓
- SaveToStorage ✓
- CodeEditor ✓
- MultipleContent ✓
- NoManualInput ✓
- CustomEmptyState ✓
No runtime key mismatches will occur.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (1)
44-44: Consider refining the transformModules return type.The
as stringtype assertion suggeststransformModulesmay return a loosely typed result. If you control thetransformModulesfunction, consider having it returnRecord<string, string>to eliminate the need for assertions at call sites.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs-examples/extend/clipboard-manager/+page.svelte(14 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-22T08:37:27.996Z
Learnt from: mrh1997
Repo: themesberg/flowbite-svelte PR: 1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.
Applied to files:
src/routes/docs-examples/extend/clipboard-manager/+page.svelte
⏰ 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). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (4)
src/routes/docs-examples/extend/clipboard-manager/+page.svelte (4)
8-21: LGTM: Glob setup and transforms follow the intended pattern.The eager loading of both component modules and raw source, followed by transformation, is appropriate for a documentation page where all examples should be immediately available. The type assertions are necessary for Vite's glob import typing.
23-23: LGTM: Typo fixed.The variable name is now correctly spelled
sensitiveEx(previouslysentitiveExper past review comments).
32-201: LGTM: Consistent usage of transformed component and module maps.All examples now consistently reference the transformed
componentsandmodulesmaps throughout the file. The mix ofExampleWrapper(for interactive demos with source) and standaloneHighlightCompo(for code snippets likesensitiveEx) is appropriate for the different presentation contexts.
2-2: All imports are valid exports from svelte-rune-highlight.Verification confirms that
ExampleWrapper,HighlightCompo,transformComponents, andtransformModulesare all properly exported from the package (confirmed in dist/index.d.ts). No runtime import errors will occur.
1 participant
🔗 Related issue (optional)
Closes: #1841, #1839
📑 Description
🔍 PR Type
🚦 PR Status
✅ Checklist
pnpm check && pnpm test:e2eand all tests passapi-checkdirectory if a component API changedmainbranch (not the published npm version)🧪 Screenshots / Demos (optional)
ℹ️ Additional Information
Summary by CodeRabbit
New Features
Documentation
Style
Chores