-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: non-react playgrounds for docs #171
base: integration/docs-site
Are you sure you want to change the base?
Conversation
|
||
/** @type {Partial<import("typedoc").TypeDocOptions>} */ | ||
export default { | ||
name: '@accelint/constants', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think there may be a bug in typedoc related to using the 'packages' entry point strategy. for whatever reason, context.project.name in the createSignature
event was an empty string, unless we explicitly set the name like this in each package. in theory, it should just be getting this from package.json....
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting. Not too surprising.
template='vanilla-ts' | ||
customSetup={{ | ||
dependencies: Object.fromEntries( | ||
dependencies.map((dep) => [dep, 'latest']), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i just pinned to latest... i'm open to a more complex/flexible structure for the dependencies
prop, if that's preferable
function convertPlaygroundBlockToComponent(context, reflection) { | ||
const playgroundTag = reflection?.comment?.blockTags?.find( | ||
({ tag }) => tag === '@playground', | ||
); | ||
|
||
if (playgroundTag) { | ||
const code = playgroundTag.content[0].text.trim(); | ||
playgroundTag.content = [ | ||
{ | ||
kind: 'text', | ||
text: `import { Playground } from '@site/src/components/playground'; | ||
|
||
<Playground | ||
code={\`${code}\`} | ||
dependencies={['${context.project.name}']} | ||
/> | ||
`, | ||
}, | ||
]; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ended up being fairly simple
- look for the
@playground
tag - if it's there, replace the content w/ our playground component, passing the original content of the block as the
code
prop
* @playground | ||
* import { booleanToNumber } from '@accelint/converters'; | ||
* | ||
* console.log(booleanToNumber(true)); | ||
* // 1 | ||
* | ||
* booleanToNumber(false); | ||
* console.log(booleanToNumber(false)); | ||
* // 0 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
example @playground
block
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome.
✅ Pull Request Checklist:
📝 Test Instructions:
@playground
block JSDoc comment in package codesee
packages/converters/src/boolean-to-number/index.ts
for an example of a@playground
comment❓ Does this PR introduce a breaking change?
💬 Other information
@playground
comment and how it works.