rabbit-playground

Rabbit :rabbit:

Copyright (C) Wix.com, Inc - All Rights Reserved Unauthorized copying of this project, via any medium is strictly prohibited Proprietary and confidential Written by Amir Arad [e-mail], January 2018

playground

the playground loader looks for a Wix-playground element, extracts the needed config from its data-* attributes and renders a playground inside it.

attribute name	required	default	description
data-code-path	true		path to load extra playground bundles
data-recipe-path	true		path to playground-recipe
data-start-path	true		file to render in preview
data-allow-fullscreen	false	false	show button to toggle fullscreen mode
data-layout	true		the wanted layout of the playground

 <Wix-playground data-code-path="/dist" 
                        data-recipe-path="playground-recipe.json"
                        data-project-files="/example-bundles/case9.json"
                        style="display:block;height:600px;"
                        data-sort-tabs="stylableFirst"
                        data-layout='{
                            "type":"row",
                            "content":[
                                {
                                    "type":"stack",
                                    "content":[
                                        {
                                            "component":"code-editor",
                                            "targetPath":"src/index.tsx, src/index.st.css, src/button.tsx, src/button.st.css"
                                        }
                                        
                                    ]
                                },{
                                    "component":"preview",
                                    "targetPath":"src/index.tsx"   
                                }
                            ]
                        }'
                        data-start-path="src/index.tsx"></Wix-playground>

the playground expects layout in JSON format as seen above, supported panels: "code-editor", "preview"

installing

in order for the playground to function properly it must have access to a number of assets.

scripts

the playground expects some scripts to be preloaded in the page.

recipe

a recipe is a json bundle including the dependencies of the running example. a prebuilt one is provided in '/recipe/recipe.json'. set data-recipe-path attribute to point to the wanted recipe.

code-bundles

the playground uses multiple bundles, you can find them all at '/dist'. set data-code-path attribute to point to them.

project files

the playground uses a JSON format to load the project files. use the provided cli to build your wanted examples. set data-project-files attribute to point to the wanted example.

watch mode

the playground looks for a watch url param. if it exists it polls updates on the project files. use this with the cli watch option to update your playgrounds while working

tools

the playground provides a CLI tool which you can use to build playground project files

build-project-files

this command builds content for the playground from a directory structure. each folder in the srcFolder is built into a separate json file according to the folder name

usage

$ playground-cli build-project-files --rootDir ./ --srcDir playgrounds --outDir build-playgrounds --w

arguments

name	required	default	description
rootDir	false	process.cmd	root path to search for srcDir outDir
srcDir	true		folder to build from
outDir	true		folder to build to
w	false	false	if watch on any change in srcDir will trigger rebuild