The templates in this directory are intended to be used with hygen to generate boilerplate files. Check out the root package.json to see if there are any custom commands to use them (e.g. npm run playground:new). You can also run e.g. hygen playground new to use a generator.
Some helpful docs links for updating/creating templates:
- enquirer for building command line prompts
- inflection and change case for e.g. changing the case of variables submitted via the prompts
To create a new playground, run npm run playground:new. This will walk you through some prompts to decide what files for the generator to create for the playground, and what their paths should be:
- Component or guide: a component playground goes under the component's name, such as
button. Any other playground goes under a guide section, such asanimations, and starts with anion-card. - Path: the folder for the playground under that name, such as
basicortheming/colors. Usebasicfor a component's first playground. - Version: the Ionic Framework version the playground is for.
- CSS: adds extra files if you need to include custom CSS in your playground.
If you need a component for multiple versions of Ionic Framework, you (currently) need to run the generator once for each version.
If the version you pick is not published to npm yet, such as the next major on a major branch, the generated demo.html loads the latest published version from the CDN instead, since the CDN has nothing to serve for an unpublished version. The demo renders, but APIs new in that version do not work in it until the version is published. The generator also adds a TODO(FW-XXXX) comment above the CDN links. Replace FW-XXXX with the ticket that tracks the update, and create one if it does not exist yet.
Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. docs/api/button.mdx). The generator prints the snippet to paste when it finishes, which looks similar to the following example:
## Feature
import Feature from '@site/static/usage/v9/button/feature/index.mdx';
<Feature />