Skip to content

[internal] Add playground#29423

Merged
siriwatknp merged 1 commit into
mui:masterfrom
oliviertassinari:add-playground
Nov 9, 2021
Merged

[internal] Add playground#29423
siriwatknp merged 1 commit into
mui:masterfrom
oliviertassinari:add-playground

Conversation

@oliviertassinari

@oliviertassinari oliviertassinari commented Oct 31, 2021

Copy link
Copy Markdown
Member

This is a continuation of mui/mui-x#3057. I have been using the following workflow for as long as I can remember since we have the Next.js documentation (for 3 years?):

  1. There is a change I want to try
  2. Got to /docs/pages/index.tsx, copy and paste the component I need to work on
  3. Try changes

Since then, I haven't found anything better. For instance, editing demos in the documentation was feeling slower. However, this approach has one important downside, I had to make sure I wasn't committing /docs/pages/index.tsx. This was painful.

This PR is about improving this and sharing the pattern with this possible workflow with the rest of the team. Now, we can copy the /docs/pages/playground.example.tsx file into /docs/pages/playground.tsx and make all the changes we want in http://0.0.0.0:3000/playground without having to care about git.

@oliviertassinari oliviertassinari added the internal Behind-the-scenes enhancement. Formerly called “core”. label Oct 31, 2021
@mui-pr-bot

mui-pr-bot commented Oct 31, 2021

Copy link
Copy Markdown

No bundle size changes

Generated by 🚫 dangerJS against 1418421

@siriwatknp

Copy link
Copy Markdown
Member

One question, docs/pages/playground.example.tsx will be deploy to production?

@mnajdova mnajdova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

👍

@oliviertassinari

Copy link
Copy Markdown
Member Author

One question, docs/pages/playground.example.tsx will be deployed to production?

It does currently https://deploy-preview-29423--material-ui.netlify.app/playground.example. We can remove it from the export.

@siriwatknp

siriwatknp commented Nov 2, 2021

Copy link
Copy Markdown
Member

I have another way of adding the playground (without committing the file to docs).

We can try hygen. The flow is something like this:

  • create a template in folder _templates/docs/playground
  • npx hygen docs new playground
  • open a prompt asking the playground name
  • A playground file is created from the template under /playground

In the future, we can use this method to create other templates, not only about the docs playground.

@oliviertassinari Can I try this? I would like to use the playground when developing Joy also.

@oliviertassinari

oliviertassinari commented Nov 2, 2021

Copy link
Copy Markdown
Member Author

@siriwatknp I leave this question to @flaviendelangle, as he was iterating on the playground too. To be clear, the objective of the playground was to be one isolated blank page.

If the objective is to avoid page generation when we deploy, I think that I have a one-line fix. Personally, I think that we can have a cp instruction, it might be even simpler, I would wait for a stronger need to introduce a new tool (hygen).

I would like to use the playground when developing Joy also.

Speaking of which, I think that there is another issue, the _app.js injects the MUI branding by default, IMHO, it's shouldn't, it breaks the isolation property.

@flaviendelangle

Copy link
Copy Markdown
Member

We could ignore /docs/pages/playgrounds to let people create several playground, than can be useful for major features where you want to compare several scenarios.

But for the global idea, I am in favor of keeping things simple. I'm not sure introducing a new tool is useful right now.

@siriwatknp

Copy link
Copy Markdown
Member

We could ignore /docs/pages/playgrounds to let people create several playground, than can be useful for major features where you want to compare several scenarios.

But for the global idea, I am in favor of keeping things simple. I'm not sure introducing a new tool is useful right now.

Fine for me. 👍

@siriwatknp
siriwatknp merged commit 5c79f3d into mui:master Nov 9, 2021
@oliviertassinari

oliviertassinari commented Nov 9, 2021

Copy link
Copy Markdown
Member Author

@siriwatknp I will follow up on this as I wasn't done. I still need to 1. Update the contribution guide 2. disable the static generation of the template page.

@michaldudak

Copy link
Copy Markdown
Member

We could also add playground.js to gitignore, for even dirtier playgrounds without type checking.

@oliviertassinari
oliviertassinari deleted the add-playground branch June 12, 2022 20:58
@oliviertassinari oliviertassinari changed the title [core] Add playground [internal] Add playground Feb 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants