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 amira@wix.com, 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 |