Addon-docs: Add transformCode option to apply transform to code prop#34519
Open
adam-sajko wants to merge 2 commits intostorybookjs:nextfrom
Open
Addon-docs: Add transformCode option to apply transform to code prop#34519adam-sajko wants to merge 2 commits intostorybookjs:nextfrom
adam-sajko wants to merge 2 commits intostorybookjs:nextfrom
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdded optional Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/Source.tsx`:
- Around line 154-160: The hook useTransformCode must be called unconditionally
to keep hook order stable: always invoke useTransformCode (passing props.code
and the transformer value derived from props.transform ??
sourceParameters.transform or undefined) and then conditionally use its returned
transformed code only when transformer and props.code are present; update the
code variable assignment (currently using transformer ? useTransformCode(...) :
props.code) so useTransformCode is called every render and its result is
selected conditionally, leaving transformCode, transformer, props.code,
props.transform, sourceParameters.transform, storyContext, argsForSource, and
code as the relevant symbols to locate and update.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8076e744-a2b1-4060-8339-ea6ac38ba203
📒 Files selected for processing (2)
code/addons/docs/src/blocks/blocks/Source.tsxdocs/api/doc-blocks/doc-block-source.mdx
adam-sajko
force-pushed
the
feat/source-block-transform-code-option
branch
from
d79b66b to
14aa612
Compare
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/addons/docs/src/blocks/blocks/Source.tsx (1)
139-165:⚠️ Potential issue | 🟠 Major
parameters.docs.source.codestill skipstransformCode.This only fixes the
props.codebranch.useCode()still returnssourceParameters.codeunchanged on Line 93-Line 95, soparameters.docs.source.transformCode = truewill not transform story/globalparameters.docs.source.code. That leaves one of the advertised entry points for the feature non-functional.🔧 Suggested direction
const useCode = ({ snippet, storyContext, typeFromProps, transformFromProps, + transformCodeFromProps, }: { snippet: string; storyContext: ReturnType<DocsContextProps['getStoryContext']>; typeFromProps: SourceType; transformFromProps?: SourceProps['transform']; + transformCodeFromProps?: SourceProps['transformCode']; }): string => { const parameters = storyContext.parameters ?? {}; const { __isArgsStory: isArgsStory } = parameters; const sourceParameters = (parameters.docs?.source || {}) as SourceParameters; @@ const code = useSnippet ? snippet : sourceParameters.originalSource || ''; const transformer = transformFromProps ?? sourceParameters.transform; + const providedCode = sourceParameters.code; + const shouldTransformProvidedCode = + transformCodeFromProps ?? sourceParameters.transformCode ?? false; + const providedCodeTransformer = shouldTransformProvidedCode + ? (transformFromProps ?? sourceParameters.transform) + : undefined; const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code; + const transformedProvidedCode = useTransformCode( + providedCode ?? '', + providedCodeTransformer ?? ((c) => c), + storyContext + ); - if (sourceParameters.code !== undefined) { - return sourceParameters.code; + if (providedCode !== undefined) { + return providedCodeTransformer ? transformedProvidedCode : providedCode; }const transformedCode = useCode({ snippet: source ? source.code : '', storyContext: { ...storyContext, args: argsForSource }, typeFromProps: props.type as SourceType, transformFromProps: props.transform, + transformCodeFromProps: props.transformCode, });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/addons/docs/src/blocks/blocks/Source.tsx` around lines 139 - 165, The parameters.docs.source.code path isn't being passed through the transformCode logic; update the code that reads sourceParameters.code (e.g., inside useCode or wherever sourceParameters.code is returned) to mirror the props.code branch: detect shouldTransformCode (from props.transformCode ?? sourceParameters.transformCode), pick the transformer (props.transform ?? sourceParameters.transform), run useTransformCode on sourceParameters.code (or apply the transformer) and return the transformed result (use transformedCodeProp-like value) instead of returning sourceParameters.code unchanged; ensure you reference sourceParameters, shouldTransformCode, codeTransformer, useTransformCode, and transformedCodeProp so the global/story-level parameters.docs.source.code honors transformCode.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@code/addons/docs/src/blocks/blocks/Source.tsx`:
- Around line 139-165: The parameters.docs.source.code path isn't being passed
through the transformCode logic; update the code that reads
sourceParameters.code (e.g., inside useCode or wherever sourceParameters.code is
returned) to mirror the props.code branch: detect shouldTransformCode (from
props.transformCode ?? sourceParameters.transformCode), pick the transformer
(props.transform ?? sourceParameters.transform), run useTransformCode on
sourceParameters.code (or apply the transformer) and return the transformed
result (use transformedCodeProp-like value) instead of returning
sourceParameters.code unchanged; ensure you reference sourceParameters,
shouldTransformCode, codeTransformer, useTransformCode, and transformedCodeProp
so the global/story-level parameters.docs.source.code honors transformCode.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9cb00aab-82b4-4cf2-95b1-0169b41d9b57
📒 Files selected for processing (2)
code/addons/docs/src/blocks/blocks/Source.tsxdocs/api/doc-blocks/doc-block-source.mdx
adam-sajko
force-pushed
the
feat/source-block-transform-code-option
branch
from
14aa612 to
730ed19
Compare
adam-sajko
force-pushed
the
feat/source-block-transform-code-option
branch
from
730ed19 to
73e927f
Compare
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/addons/docs/src/blocks/blocks/Source.tsx (1)
135-163: Add tests for the newtransformCodebranch matrix.Lines 136-163 add multiple precedence paths (
props.codevs parameter code,transformCodeprop vs parameter, and transform origin). Please add focused unit coverage for these combinations to prevent regressions.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/addons/docs/src/blocks/blocks/Source.tsx` around lines 135 - 163, Add unit tests for the Source component covering the transformCode precedence matrix: create focused tests that exercise (1) directCode provided via props vs code via sourceParameters, (2) transformCode true/false/undefined from props vs sourceParameters, and (3) transform function coming from props vs sourceParameters. For each combination assert whether useTransformCode (transformedDirectCode) is used or the raw code is returned, and also verify format selection logic when props.code is set vs when it falls back to format/ source?.format; reference the variables/source operators in the component (sourceParameters, directCode, shouldTransformCode, codeTransformer, transformedDirectCode, useTransformCode, props.code, props.transformCode) to guide test setup and expected outcomes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/Source.tsx`:
- Around line 138-145: The code may call user-provided transformers even when
directCode is empty; change the logic so the transformer is only selected when
shouldTransformCode is true AND directCode is non-empty. Concretely update the
computation of codeTransformer (used by useTransformCode for
transformedDirectCode) to require directCode (e.g., codeTransformer =
shouldTransformCode && directCode ? (props.transform ??
sourceParameters.transform) : undefined), and make the same guard for the other
transformer usage (the highlighted/other transformed code block) so
useTransformCode receives an identity/undefined transformer when there's no
direct code to avoid running user transforms unnecessarily.
---
Nitpick comments:
In `@code/addons/docs/src/blocks/blocks/Source.tsx`:
- Around line 135-163: Add unit tests for the Source component covering the
transformCode precedence matrix: create focused tests that exercise (1)
directCode provided via props vs code via sourceParameters, (2) transformCode
true/false/undefined from props vs sourceParameters, and (3) transform function
coming from props vs sourceParameters. For each combination assert whether
useTransformCode (transformedDirectCode) is used or the raw code is returned,
and also verify format selection logic when props.code is set vs when it falls
back to format/ source?.format; reference the variables/source operators in the
component (sourceParameters, directCode, shouldTransformCode, codeTransformer,
transformedDirectCode, useTransformCode, props.code, props.transformCode) to
guide test setup and expected outcomes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1d008f6d-1aaf-4c33-b4de-75fea958c75a
📒 Files selected for processing (2)
code/addons/docs/src/blocks/blocks/Source.tsxdocs/api/doc-blocks/doc-block-source.mdx
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
transformis currently ignored whencodeis provided (via prop or parameter). This makes sense as a default, you don't want a global Prettier transform reformatting your hand-written snippets.But sometimes you do want
transformapplied tocode. This PR adds atransformCodeboolean (defaults tofalse) to opt in.Works as a prop, story parameter, or globally in
preview.ts:What I did
transformCode?: booleantoSourceParameterstrue,transformruns on thecodeprop before renderingtransformCodesection, clarifiedtransform/codeinteractionChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
yarn task --task sandbox --start-from auto --template react-vite/default-ts<Source code="..." transform={fn} />— should render raw code (unchanged behavior)<Source code="..." transform={fn} transformCode />— should apply transformparameters.docs.source.transformCode: trueinpreview.ts— should apply globallyMy Sandbox
Documentation
MIGRATION.MD
Summary by CodeRabbit
New Features
Documentation