{
    "name": "myVueProject",
    "globals": {
      "settings": {
        "language": "en",
        "title": "teleportHQ"
      },
      "meta" : [
        { "name": "description", "content": "Free Web tutorials" },
        { "name": "keywords", "content": "prea bun, prea ca la tara" },
        { "name": "viewport", "content": "width=device-width, initial-scale=1.0" },
        { "property": "og:title", "content": "Free Web tutorials" },
        { "property": "og:url", "content": "/playground_assets/asdasd.png" }
      ],
      "manifest": {
        "icons": [
          {
            "src": "/playground_assets/icons-192.png",
            "type": "image/png",
            "sizes": "192x192"
          },
          {
            "src": "/playground_assets/icons-512.png",
            "type": "image/png",
            "sizes": "512x512"
          }
        ],
        "theme_color": "#822CEC",
        "background_color": "#822CEC"
      },
      "assets": [
        {
          "type": "style",
          "path": "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
          "options": {
            "target": "body"
          }
        },
        {
          "type": "script",
          "path": "https://www.googletagmanager.com/gtm.js",
          "options": {
            "defer": true
          }
        },
        {
          "type": "script",
          "content": "console.log(\"inline script\")",
          "options": {
            "target": "body"
          }
        },
        {
          "type": "font",
          "path": "https://fonts.googleapis.com/css?family=Roboto"
        },
        {
          "type": "style",
          "content": "body{font-family: 'Roboto', sans-serif;}"
        },
        {
          "type": "icon",
          "path": "/playground_assets/favicon-32x32.png",
          "options": {
            "iconType": "image/png",
            "iconSizes": "32x32"
          }
        }
      ],
      "variables": {
        "primaryColor": "#822CEC",
        "secondaryColor": "#414141",
        "spacing": "10px"
      }
    },
    "root": {
      "name": "App",
      "importDefinitions": {
        "antdCSS": {
            "type": "package",
            "path": "antd/dist/antd.css",
            "version": "^4.5.1",
            "meta": {
              "importJustPath": true
            }
          }
      },
      "stateDefinitions": {
        "route": {
          "type": "string",
          "defaultValue": "index",
          "values": [
            {
              "value": "index",
              "pageOptions": {
                "navLink": "/",
                "fileName": "index",
                "componentName": "Home"
              }
            },
            {
              "value": "about",
              "pageOptions": {
                "navLink": "/about",
                "fileName": "about",
                "componentName": "About"
              }
            },
            {
              "value": "contact-us",
              "pageOptions": {
                "navLink": "/here-we-are",
                "fileName": "contact-us",
                "componentName": "Us"
              }
            }
          ]
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "Router",
          "children": [
            {
              "type": "conditional",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "container",
                    "children": [
                      {
                        "type": "static",
                        "content": "Page 1"
                      }
                    ]
                  }
                },
                "value": "index",
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "route"
                  }
                }
              }
            },
            {
              "type": "conditional",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "container",
                    "children": [
                      {
                        "type": "static",
                        "content": "Page 2"
                      }
                    ]
                  }
                },
                "value": "about",
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "route"
                  }
                }
              }
            },{
              "type": "conditional",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "container",
                    "children": [
                      {
                        "type": "static",
                        "content": "Page 3"
                      }
                    ]
                  }
                },
                "value": "contact-us",
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "route"
                  }
                }
              }
            }
          ]
        }
      }
    },
    "components": {
      "OneComponent": {
        "name": "OneComponent",
        "propDefinitions": {
          "titleValue": {
            "type": "string",
            "defaultValue": "Hello"
          },
          "items": {
            "type": "array",
            "defaultValue": []
          }
        },
        "stateDefinitions": {
          "isVisible": {
            "type": "boolean",
            "defaultValue": true
          }
        },
        "node": {
          "type": "element",
          "content": {
            "elementType": "container",
            "attrs": {
              "data-static-attr": {
                "type": "static",
                "content": "test"
              },
              "data-dynamic-attr": {
                "type": "dynamic",
                "content": {
                  "referenceType": "prop",
                  "id": "titleValue"
                }
              }
            },
            "children": [
                {
                    "type": "element",
                    "content": {
                      "semanticType": "Button",
                      "elementType": "component",
                      "attrs": {
                        "type": "danger"
                      },
                      "dependency": {
                        "type": "package",
                        "version": "^4.5.1",
                        "path": "antd",
                        "meta": {
                          "namedImport": true
                        }
                      },
                      "children": ["Button from Antd"]
                    }
                  },
              {
                "type": "element",
                "content": {
                  "elementType": "text",
                  "children": [
                    {
                      "type": "static",
                      "content": "Hello World!"
                    },
                    {
                      "type": "dynamic",
                      "content": {
                        "referenceType": "prop",
                        "id": "titleValue"
                      }
                    }
                  ]
                }
              },
              {
                "type": "repeat",
                "content": {
                  "node": {
                    "type": "element",
                    "content": {
                      "elementType": "text",
                      "children": [
                        {
                          "type": "dynamic",
                          "content": {
                            "referenceType": "local",
                            "id": "item"
                          }
                        },
                        {
                          "type": "element",
                          "content": {
                            "elementType": "list",
                            "attrs": {
                              "items": {
                                "type": "static",
                                "content": ["angular", "react", "vue"]
                              }
                            }
                          }
                        }
                      ]
                    }
                  },
                  "dataSource": {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "prop",
                      "id": "items"
                    }
                  },
                  "meta": {
                    "useIndex": true,
                    "iteratorName": "item"
                  }
                }
              },
              {
                "type": "conditional",
                "content": {
                  "reference": {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "state",
                      "id": "isVisible"
                    }
                  },
                  "value": true,
                  "node": {
                    "type": "element",
                    "content": {
                      "elementType": "text",
                      "children": [{
                        "type": "static",
                        "content": "Now you see me!"
                      }]
                    }
                  }
                }
              }
            ]
          }
        }
      },
      "ExpandableArea": {
        "name": "ExpandableArea",
        "propDefinitions": {
          "titleValue": {
            "type": "string",
            "defaultValue": "Hello"
          },
          "text": {
            "type": "string",
            "defaultValue": "Is it me you're looking for?"
          }
        },
        "stateDefinitions": {
          "isExpanded": {
            "type": "boolean",
            "defaultValue": false
          }
        },
        "node": {
          "type": "element",
          "content": {
            "elementType": "container",
            "style": {
              "margin": "10px"
            },
            "children": [
              {
                "type": "element",
                "content": {
                  "elementType": "text",
                  "children": [{
                    "type": "dynamic",
                    "content": {
                      "referenceType": "prop",
                      "id": "titleValue"
                    }
                  }]
                }
              },
              {
                "type": "element",
                "content": {
                  "elementType": "button",
                  "children": [{
                    "type": "conditional",
                    "content": {
                      "node": {
                        "type": "static",
                        "content": "Hide me"
                      },
                      "value": true,
                      "reference": {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "state",
                          "id": "isExpanded"
                        }
                      }
                    }
                  },{
                    "type": "conditional",
                    "content": {
                      "node": {
                        "type": "static",
                        "content": "Show me"
                      },
                      "value": false,
                      "reference": {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "state",
                          "id": "isExpanded"
                        }
                      }
                    }
                  }],
                  "events": {
                    "click": [
                      {
                        "type": "stateChange",
                        "modifies": "isExpanded",
                        "newState": "$toggle"
                      }
                    ]
                  }
                }
              },
              {
                "type": "conditional",
                "content": {
                  "node": {
                    "type": "element",
                    "content": {
                      "elementType": "text",
                      "children": [{
                        "type": "dynamic",
                        "content": {
                          "referenceType": "prop",
                          "id": "text"
                        }
                      }]
                    }
                  },
                  "value": true,
                  "reference": {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "state",
                      "id": "isExpanded"
                    }
                  }
                }
              }
            ]
          }
        }
      },
      "Modal": {
        "name": "Modal",
        "stateDefinitions": {
          "isOpen": {
            "type": "boolean",
            "defaultValue": false
          }
        },
        "node": {
          "type": "element",
          "content": {
            "elementType": "group",
            "children": [
              {
                "type": "element",
                "content": {
                  "elementType": "button",
                  "name": "openmodal",
                  "children": [{
                    "type": "static",
                    "content": "Show Popup"
                  }],
                  "events": {
                    "click": [{
                      "type": "stateChange",
                      "modifies": "isOpen",
                      "newState": true
                    }]
                  }
                }
              },
              {
                "type": "conditional",
                "content": {
                  "node": {
                    "type": "element",
                    "content": {
                      "elementType": "component",
                      "semanticType": "ModalWindow",
                      "name": "window",
                      "dependency": {
                        "type": "local"
                      },
                      "events": {
                        "onClose": [{
                          "type": "stateChange",
                          "modifies": "isOpen",
                          "newState": false
                        }]
                      }
                    }
                  },
                  "value": true,
                  "reference": {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "state",
                      "id": "isOpen"
                    }
                  }
                }
              }
            ]
          }
        }
      },
      "ModalWindow": {
        "name": "ModalWindow",
        "propDefinitions": {
          "message": {
            "type": "string",
            "defaultValue": "Hello"
          },
          "onClose": {
            "type": "func",
            "defaultValue": "() => {}"
          }
        },
        "stateDefinitions": {
          "fakeState": {
            "type": "boolean",
            "defaultValue": false
          }
        },
        "node": {
          "type": "element",
          "content": {
            "elementType": "container",
            "children": [{
              "type": "dynamic",
              "content": {
                "referenceType": "prop",
                "id": "message"
              }
            },{
              "type": "element",
              "content": {
                "elementType": "button",
                "name": "close",
                "children": [{
                  "type": "static",
                  "content": "Close me"
                }],
                "events": {
                  "click": [{
                    "type": "propCall",
                    "calls": "onClose"
                  },{
                    "type": "stateChange",
                    "modifies": "fakeState",
                    "newState": false
                  }]
                }
              }
            }]
          }
        }
      }
    }
  }