Skip to content
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

Open
wants to merge 8 commits into
base: integration/docs-site
Choose a base branch
from

Conversation

orteth01
Copy link
Contributor

✅ Pull Request Checklist:

  • Included link to corresponding GitHub Issue.
  • The commit message follows conventional commit extended guidelines.
  • Added/updated unit tests and storybook for this change (for bug fixes / features).
  • Added/updated documentation (for bug fixes / features)
  • Filled out test instructions.

📝 Test Instructions:

  • add a @playground block JSDoc comment in package code
  • `pnpm --filter=@accelint/docs run dev
  • verify that the playground is added to the document you expect

see packages/converters/src/boolean-to-number/index.ts for an example of a @playground comment

❓ Does this PR introduce a breaking change?

  • Yes
  • No

💬 Other information

  • using sandpack for the playground component (ty @kalisjoshua for the find)
  • i'm open to any ideas or feedback on the formatting of the @playground comment and how it works.


/** @type {Partial<import("typedoc").TypeDocOptions>} */
export default {
name: '@accelint/constants',
Copy link
Contributor Author

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....

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. Not too surprising.

apps/docs/typedoc.mjs Outdated Show resolved Hide resolved
template='vanilla-ts'
customSetup={{
dependencies: Object.fromEntries(
dependencies.map((dep) => [dep, 'latest']),
Copy link
Contributor Author

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

Comment on lines 22 to 41
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}']}
/>
`,
},
];
}
Copy link
Contributor Author

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

@orteth01 orteth01 marked this pull request as ready for review January 16, 2025 22:54
Comment on lines +19 to 26
* @playground
* import { booleanToNumber } from '@accelint/converters';
*
* console.log(booleanToNumber(true));
* // 1
*
* booleanToNumber(false);
* console.log(booleanToNumber(false));
* // 0
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

example @playground block

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome.

packages/math/typedoc.mjs Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants