rabbit-playground v0.7.0
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-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-layout='{
"type":"row",
"content":[
{
"component": "file-panel",
"targetPath": "",
"isClosable": true,
"title": "Files",
"width": 18,
"props":{
"currentPath":"src/index/tsx",
"previewPath":"src/index.tsx"
}
},
{
"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"
}
]
}'></Wix-playground>
the playground expects layout in JSON format as seen above, supported panels: "code-editor", "preview", "file-panel"
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 |