Playground Parser

The Playground Parser helps generate dynamic component preview pages for Lightning Web Components (LWC) and Aura components. It reads metadata and example files, processes them, and generates HTML, JavaScript, and CSS files for each component example to be displayed in a playground environment.

The generated preview pages include dynamic code previews, allowing developers to view and interact with different component examples. It supports both LWC and Aura model types (with screenshots for previews) and generates the appropriate content for each example.

Setup

yarn install

Assumptions

• To extract example metadata from the Markdown document file, it is assumed that the file name will end with the component name, either in camel case or kebab case.

Environment Variables

Set the following environment variables before running the setup and start scripts:

• IN_PLAYGROUND_DIR: The folder path of the input folder, defaults to in-playground.
• OUT_PLAYGROUND_DIR: The folder path of the output folder, defaults to out-playground.

IN_PLAYGROUND_DIR Folder Format

model1/namespace1/
   component1/
   component2/
model2/namespace2/
   component1/
   component2/

Example:

lwc/
   lightning/
      button/
         button.md
         examples/
aura/
   lightning/
      button/
         button.md
         examples/

OUT_PLAYGROUND_DIR Folder Format

model1/namespace1/
   examples/
   playground/
   example-metadata.json
model2/namespace2/
   examples/
   playground/
   example-metadata.json

Example:

lwc/
   lightning/
      examples/
      playground/
      example-metadata.json
aura/
   lightning/
      examples/
      playground/
      example-metadata.json

Scripts

Parse

This script reads examples from IN_PLAYGROUND_DIR and generates the playground pages and example metadata into OUT_PLAYGROUND_DIR.

yarn parse

During development, you can pass the path to the lightning-design-system content repository as a variable. This will create the in-playground directory.

Example:

LIGHTNING_DESIGN_SYSTEM_REPO_PATH='/Users/smopada/Desktop/work/doc-repos/lightning-design-system' yarn parse

Alternatively, if you have extracted the folder from the ui-lightning-components jar, you can pass its path as a variable. This will also create the in-playground directory.

Example:

UI_LIGHTNING_COMPONENTS_PATH='../ui-lightning-components-254.7.17' yarn parse