Repository: teleporthq/teleport-code-generators
Pull request #493 (2020-10-22 09:57:48)

fix: addAttributeToJSXTag  when attr's value is boolean

JayaKrishnaNamburu: Hi @good-father thanks for the PR 🎉 , can i ask for one more request. We have the same issue with template based syntaxes for `Angular` and  `Vue`. Can you have a look at them too 😄 . Would be very helpful. 
good-father: @JayaKrishnaNamburu of course, I will do it soon 😄 . 
good-father: @JayaKrishnaNamburu done, please review, thanks

Patch:
diff --git a/examples/uidl-samples/react-project.json b/examples/uidl-samples/react-project.json
new file mode 100644
index 00000000..b780a9b4
--- /dev/null
+++ b/examples/uidl-samples/react-project.json
@@ -0,0 +1,1486 @@
+{
+  "name": "teleportProject",
+  "globals": {
+    "settings": {
+      "language": "en",
+      "title": "Show-off for a few capabilities"
+    },
+    "assets": [
+      {
+        "type": "font",
+        "path": "https://fonts.googleapis.com/css?family=Roboto"
+      },
+      {
+        "type": "style",
+        "content": "body{font-family: 'Roboto', sans-serif; color: #2c3e50; -webkit-font-smoothing: antialiased; font-size: 16px;} a{color:inherit; text-decoration: none}"
+      },
+      {
+        "type": "icon",
+        "path": "/playground_assets/favicon-32x32.png",
+        "options": {
+          "iconType": "image/png",
+          "iconSizes": "32x32"
+        }
+      }
+    ],
+    "meta": [],
+    "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"
+    }
+  },
+  "root": {
+    "name": "App",
+    "styleSetDefinitions": {
+      "5ed0d05baa77d97673711820": {
+        "id": "5ed0d05baa77d97673711820",
+        "name": "primaryButton",
+        "type": "reusable-project-style-map",
+        "content": {
+          "background": "blue",
+          "width": "auto",
+          "color": "#fff",
+          "border": "1px solid #fff"
+        }
+      },
+      "5ed0d4923de727e93cb4efa2": {
+        "id": "5ed0d4923de727e93cb4efa2",
+        "name": "secondaryButton",
+        "type": "reusable-project-style-map",
+        "content": {
+          "background": "red",
+          "width": "auto",
+          "color": "#fff",
+          "border": "1px solid #fff"
+        }
+      }
+    },
+    "stateDefinitions": {
+      "route": {
+        "type": "string",
+        "defaultValue": "home",
+        "values": [
+          {
+            "value": "home",
+            "pageOptions": {
+              "navLink": "/",
+              "componentName": "Home"
+            },
+            "seo": {
+              "title": "Home Screen"
+            }
+          },
+          {
+            "value": "team",
+            "seo": {
+              "title": "About Screen",
+              "metaTags": [
+                { "name": "description", "content": "What is this about?" },
+                { "name": "keywords", "content": "prea bun, prea ca la tara" },
+                { "name": "viewport", "content": "width=device-width, initial-scale=1.0" },
+                { "property": "og:title", "content": "What is this about?" },
+                { "property": "og:url", "content": "/playground_assets/asdasd.png" }
+              ],
+              "assets": [
+                { "type": "canonical", "path": "https://teleporthq.io" }
+              ]
+            }
+          },
+          {
+            "value": "contact-us",
+            "pageOptions": {
+              "navLink": "/about-us-custom-link",
+              "componentName": "ContactPage"
+            },
+            "seo": {
+              "assets": [
+                { "type": "canonical", "path": "https://teleporthq.io" }
+              ]
+            }
+          }
+        ]
+      }
+    },
+    "peerDefinitions": {
+      "@emotion/core": {
+        "type": "package",
+        "path": "@emotion/core",
+        "version": "^10.0.34"
+      },
+      "@emotion/styled": {
+        "type": "package",
+        "path": "@emotion/styled",
+        "version": "^10.0.27"
+      },
+      "emotion-theming": {
+        "type": "package",
+        "path": "emotion-theming",
+        "version": "^10.0.27"
+      }
+    },
+    "importDefinitions": {
+      "antdCSS": {
+        "type": "package",
+        "path": "antd/dist/antd.css",
+        "version": "^4.5.1",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+    "node": {
+      "type": "element",
+      "content": {
+        "elementType": "Router",
+        "children": [
+          {
+            "type": "conditional",
+            "content": {
+              "node": {
+                "type": "element",
+                "content": {
+                  "elementType": "container",
+                  "children": [
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "container",
+                        "semanticType": "Navbar",
+                        "dependency": {
+                          "type": "local"
+                        }
+                      }
+                    },
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "main",
+                        "style": {
+                          "width": "960px",
+                          "text-align": "center"
+                        },
+                        "children": [{
+                          "type": "element",
+                          "content": {
+                            "elementType": "image",
+                            "attrs": {
+                              "url": "http://lorempixel.com/960/200/",
+                              "alt": "Main banner on the home page"
+                            }
+                          }
+                        },{
+                          "type": "element",
+                          "content": {
+                            "style": {
+                              "margin": "30px auto"
+                            },
+                            "elementType": "heading1",
+                            "children": ["Welcome to the teleportHQ sample website!"]
+                          }
+                        }, {
+                          "type": "element",
+                          "content": {
+                            "elementType": "textblock",
+                            "style": {
+                              "color": "#6a8bad",
+                              "fontSize": "26px",
+                              "maxWidth": "560px",
+                              "margin": "30px auto",
+                              "text-align": "center"
+                            },
+                            "children": ["Building the infrastructure for the next generation of web and mobile interfaces"]
+                          }
+                        }, {
+                          "type": "element",
+                          "content": {
+                            "elementType": "textblock",
+                            "children": [
+                              {
+                                "type": "element",
+                                "content": {
+                                  "elementType": "text",
+                                  "style": {
+                                    "color": "white",
+                                    "backgroundColor": "#822cec",
+                                    "padding": "12px 24px",
+                                    "borderRadius": "4px",
+                                    "margin": "auto",
+                                    "text-decoration": "none"
+                                  },
+                                  "abilities": {
+                                    "link": {
+                                      "type": "section",
+                                      "content": {
+                                        "id": "test"
+                                      }
+                                    }
+                                  },
+                                  "children": ["Get Started →"]
+                                }
+                              }
+                            ]
+                          }
+                        },{
+                          "type": "element",
+                          "content": {
+                            "elementType": "container",
+                            "name": "columns",
+                            "referencedStyles": {
+                              "5ed0cb9ff4fd989551c4edc0": {
+                                "id": "5ed0cb9ff4fd989551c4edc0",
+                                "type": "style-map",
+                                "content": {
+                                  "mapType": "inlined",
+                                  "conditions": [
+                                    { "conditionType": "screen-size", "maxWidth": 991 }
+                                  ],
+                                  "styles": {
+                                    "flex-wrap": "wrap"
+                                  } 
+                                }
+                              }
+                            },
+                            "style": {
+                              "display": "flex",
+                              "justify-content": "space-between",
+                              "margin-top": "50px",
+                              "border-top": "1px solid #ccc"
+                            },
+                            "children": [
+                              {
+                                "type": "element",
+                                "content": {
+                                  "elementType": "container",
+                                  "referencedStyles": {
+                                    "5ed0cc78c15bf36607fceff5": {
+                                      "id": "5ed0cc78c15bf36607fceff5",
+                                      "type": "style-map",
+                                      "content": {
+                                        "mapType": "inlined",
+                                        "conditions": [
+                                          { "conditionType": "screen-size", "maxWidth": 991 }
+                                        ],
+                                        "styles": {
+                                          "flex": "inherit"
+                                        }
+                                      }
+                                    }
+                                  },
+                                  "style": {
+                                    "flex": "1"
+                                  },
+                                  "children": [{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "heading2",
+                                      "children": ["Platform Independent"]
+                                    }
+                                  },{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "textblock",
+                                      "children": ["Using the same UI representation, you can build modern Web & Mobile applications."]
+                                    }
+                                  }]
+                                }
+                              },
+                              {
+                                "type": "element",
+                                "content": {
+                                  "elementType": "container",
+                                  "referencedStyles": {
+                                    "5ed0cd2ef0ece67901cc8f20": {
+                                      "id": "5ed0cd2ef0ece67901cc8f20",
+                                      "type": "style-map",
+                                      "content": {
+                                        "mapType": "inlined",
+                                        "conditions": [
+                                          { "conditionType": "screen-size", "maxWidth": 991 }
+                                        ],
+                                        "styles": {
+                                          "flex": "inherit"
+                                        }
+                                      }
+                                    }
+                                  },
+                                  "style": {
+                                    "flex": "1"
+                                  },
+                                  "children": [{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "heading2",
+                                      "children": ["Plugable Architecture"]
+                                    }
+                                  },{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "textblock",
+                                      "children": ["Our plugin system allows you to customize your exported code to the last detail."]
+                                    }
+                                  }]
+                                }
+                              },
+                              {
+                                "type": "element",
+                                "content": {
+                                  "elementType": "container",
+                                  "referencedStyles": {
+                                    "5ed0cd26bd7301de692957bf": {
+                                      "id": "5ed0cd26bd7301de692957bf",
+                                      "type": "style-map",
+                                      "content": {
+                                        "mapType": "inlined",
+                                        "conditions": [
+                                          { "conditionType": "screen-size", "maxWidth": 991 }
+                                        ],
+                                        "styles": {
+                                          "flex": "inherit"
+                                        }
+                                      }
+                                    }
+                                  },
+                                  "style": {
+                                    "flex": "1"
+                                  },
+                                  "children": [{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "heading2",
+                                      "children": ["An Open Community"]
+                                    }
+                                  },{
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "textblock",
+                                      "children": ["We open-sourced our entire ecosystem and we invite everyone to contribute to it!"]
+                                    }
+                                  }]
+                                }
+                              }
+                            ]
+                          }
+                        },
+                        {
+                          "type": "element",
+                          "content": {
+                            "elementType": "container",
+                              "style": {
+                                "width": "100%",
+                                "marginTop": 15,
+                                "marginBottom": 15,
+                                "line-height": 1.5
+                              },
+                              "children": [
+                                "We introcuded some new features to make your use your style sets defined once and use across the pages.",
+                                "Here are some of them, shown below as examples"
+                              ]
+                          }
+                        }, 
+                        {
+                          "type": "element",
+                          "content": {
+                            "elementType": "button",
+                            "style": {
+                              "font-size": "16px",
+                              "padding": "12px 24px",
+                              "border-radius": "6px"
+                            },
+                            "referencedStyles": {
+                              "5ed0d3daf36df4da926078ee": {
+                                "id": "5ed0d3daf36df4da926078ee",
+                                "type": "style-map",
+                                "content": {
+                                  "mapType": "project-referenced",
+                                  "referenceId": "5ed0d05baa77d97673711820"
+                                }
+                              }
+                            },
+                            "children": [ "Primary Button"]
+                          }
+                        }, {
+                          "type": "element",
+                          "content": {
+                            "elementType": "button",
+                            "style": {
+                              "font-size": "16px",
+                              "padding": "12px 24px",
+                              "border-radius": "6px"
+                            },
+                            "referencedStyles": {
+                              "5ed0d3daf36df4da926078ee": {
+                                "id": "5ed0d3daf36df4da926078ee",
+                                "type": "style-map",
+                                "content": {
+                                  "mapType": "project-referenced",
+                                  "referenceId": "5ed0d4923de727e93cb4efa2"
+                                }
+                              }
+                            },
+                            "children": [ "Secondary Button"]
+                          }
+                        }]
+                      }
+                    },
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "container",
+                        "children": [
+                          {
+                            "type": "element",
+                            "content": {
+                              "elementType": "component",
+                              "semanticType": "ExternalComponents",
+                              "dependency": {
+                                "type": "local"
+                              }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              "value": "home",
+              "reference": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType": "state",
+                  "id": "route"
+                }
+              }
+            }
+          },
+          {
+            "type": "conditional",
+            "content": {
+              "node": {
+                "type": "element",
+                "content": {
+                  "elementType": "container",
+                  "children": [
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "component",
+                        "semanticType": "Navbar",
+                        "dependency": {
+                          "type": "local"
+                        }
+                      }
+                    },
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "component",
+                        "semanticType": "PersonList",
+                        "dependency": {
+                          "type": "local"
+                        }
+                      }
+                    }
+                  ]
+                }
+              },
+              "value": "team",
+              "reference": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType": "state",
+                  "id": "route"
+                }
+              }
+            }
+          },
+          {
+            "type": "conditional",
+            "content": {
+              "node": {
+                "type": "element",
+                "content": {
+                  "elementType": "container",
+                  "children": [
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "component",
+                        "semanticType": "Navbar",
+                        "dependency": {
+                          "type": "local"
+                        }
+                      }
+                    },
+                    {
+                      "type": "element",
+                      "content": {
+                        "elementType": "component",
+                        "semanticType": "ContactForm",
+                        "dependency": {
+                          "type": "local"
+                        }
+                      }
+                    }
+                  ]
+                }
+              },
+              "value": "contact-us",
+              "reference": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType": "state",
+                  "id": "route"
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  "components": {
+    "ExternalComponents": {
+      "name": "ExternalComponents",
+      "peerDefinitions": {
+        "@emotion/core": {
+          "type": "package",
+          "path": "@emotion/core",
+          "version": "^10.0.34"
+        },
+        "@emotion/styled": {
+          "type": "package",
+          "path": "@emotion/styled",
+          "version": "^10.0.27"
+        },
+        "emotion-theming": {
+          "type": "package",
+          "path": "emotion-theming",
+          "version": "^10.0.27"
+        }
+      },
+      "importDefinitions": {
+        "theme": {
+          "type": "package",
+          "path": "@chakra-ui/core",
+          "version": "0.8.0",
+          "meta": {
+            "namedImport": true,
+            "useAsReference": true
+          }
+        },
+        "reactTheme": {
+          "type": "package",
+          "path": "react-ui",
+          "version": "1.0.0-beta.26",
+          "meta": {
+            "namedImport": true,
+            "useAsReference": true,
+            "originalName": "theme"
+          }
+        },
+        "tokens": {
+          "type": "package",
+          "path": "react-ui",
+          "version": "1.0.0-beta.26",
+          "meta": {
+            "namedImport": true,
+            "useAsReference": true
+          }
+        },
+        "components": {
+          "path": "react-ui",
+          "type": "package",
+          "version": "1.0.0-beta.26",
+          "meta": {
+            "namedImport": true,
+            "useAsReference": true
+          }
+        }
+      },
+      "node": {
+        "type": "element",
+        "content": {
+          "semanticType": "ThemeProvider",
+          "elementType": "component",
+          "attrs": {
+            "theme": {
+              "type": "import",
+              "content": {
+                "id": "theme"
+              }
+            },
+            "tokens": {
+              "type": "import",
+              "content": {
+                "id": "tokens"
+              }
+            },
+            "components": {
+              "type": "import",
+              "content": {
+                "id": "components"
+              }
+            }
+          },
+          "dependency": {
+            "type": "package",
+            "path": "react-ui",
+            "version": "1.0.0-beta.26",
+            "meta": {
+              "namedImport": true
+            }
+          },
+          "children": [
+            {
+              "type": "element",
+              "content": {
+                "semanticType": "Button",
+                "elementType": "component",
+                "attrs": {
+                  "variant": "secondary"
+                },
+                "children": ["Button from React UI"],
+                "dependency": {
+                  "type": "package",
+                  "path": "react-ui",
+                  "version": "1.0.0-beta.26",
+                  "meta": {
+                    "namedImport": true
+                  }
+                }
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "semanticType": "Avatar",
+                "elementType": "component",
+                "attrs": {
+                  "size": "xlarge",
+                  "src": "https://github.com/sameen-shi.png"
+                },
+                "dependency": {
+                  "type": "package",
+                  "path": "react-ui",
+                  "version": "1.0.0-beta.26",
+                  "meta": {
+                    "namedImport": true
+                  }
+                },
+                "children": [
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "semanticType": "Button",
+                "elementType": "component",
+                "attrs": {
+                  "type": "primary"
+                },
+                "children": ["Button from ANTD"],
+                "dependency": {
+                  "type": "package",
+                  "path": "antd",
+                  "version": "4.5.4",
+                  "meta": {
+                    "namedImport": true
+                  }
+                }
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "component",
+                "semanticType": "ThemeProvider",
+                "attrs": {
+                  "theme": {
+                    "type": "import",
+                    "content": {
+                      "id": "reactTheme"
+                    }
+                  }
+                },
+                "dependency": {
+                  "type": "package",
+                  "version": "0.8.0",
+                  "path": "@chakra-ui/core",
+                  "meta": {
+                    "namedImport": true
+                  }
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "component",
+                      "semanticType": "Button",
+                      "attrs": {
+                        "variantColor": "teal"
+                      },
+                      "dependency": {
+                        "type": "package",
+                        "path": "@chakra-ui/core",
+                        "version": "0.8.0",
+                        "meta": {
+                          "namedImport": true
+                        }
+                      },
+                      "children": [
+                        "Button from Chakra UI"
+                      ]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    },
+    "Navbar": {
+      "name": "Navbar",
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "nav",
+          "style": {
+            "border-bottom": {
+              "type": "static",
+              "content": "1px solid rgba(0,0,0,0.25)"
+            }
+          },
+          "children": [
+            {
+              "type": "element",
+              "content": {
+                "elementType": "ul",
+                "name": "list-container",
+                "style": {
+                  "list-style": "none",
+                  "margin": "0px",
+                  "padding": "0px",
+                  "display": "flex",
+                  "font-size": "18px"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "li",
+                      "name": "home-link",
+                      "referencedStyles": {
+                        "5ecf9f48c169f22eb26ce91d": {
+                          "id": "5ecf9f48c169f22eb26ce91d",
+                          "type": "style-map",
+                          "content": {
+                            "mapType": "inlined",
+                            "conditions": [
+                              { "conditionType": "element-state", "content": "hover"}
+                            ],
+                            "styles": {
+                              "color": { "type": "static", "content": "red"},
+                              "border-bottom": "3px solid red",
+                              "padding-bottom": "7px"
+                            }
+                          }
+                        }
+                      },
+                      "style": {
+                        "padding": "10px 20px",
+                        "transition": "all .15s ease-in-out",
+                        "cursor": "pointer"
+                      },
+                      "children": [{
+                        "type": "element",
+                        "content": {
+                          "elementType": "text",
+                          "abilities": {
+                            "link": {
+                              "type": "navlink",
+                              "content": {
+                                "routeName": "home"
+                              }
+                            }
+                          },
+                          "children": ["Home"]
+                        }
+                      }]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "name": "team-link",
+                      "elementType": "li",
+                      "referencedStyles": {
+                        "5ecfa07284d8848f05ef9c2d": {
+                          "id": "5ecfa07284d8848f05ef9c2d",
+                          "type": "style-map",
+                          "content": {
+                            "mapType": "inlined",
+                            "conditions": [
+                              { "conditionType": "element-state", "content": "hover"}
+                            ],
+                            "styles": {
+                              "color": { "type": "static", "content": "red"},
+                              "border-bottom": "3px solid red",
+                              "padding-bottom": "7px"
+                            }
+                          }
+                        }
+                      },
+                      "style": {
+                        "padding": "10px 20px",
+                        "transition": "all .15s ease-in-out",
+                        "cursor": "pointer"
+                      },
+                      "children": [{
+                        "type": "element",
+                        "content": {
+                          "elementType": "text",
+                          "abilities": {
+                            "link": {
+                              "type": "navlink",
+                              "content": {
+                                "routeName": "team"
+                              }
+                            }
+                          },
+                          "children": ["Team"]
+                        }
+                      }]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "li",
+                      "name": "contact-link",
+                      "referencedStyles": {
+                        "5ecfa0d2f9f29ada8482ff03": {
+                          "id": "5ecfa0d2f9f29ada8482ff03",
+                          "type": "style-map",
+                          "content": {
+                            "mapType": "inlined",
+                            "conditions": [
+                              { "conditionType": "element-state", "content": "hover"}
+                            ],
+                            "styles": {
+                              "color": { "type": "static", "content": "red"},
+                              "border-bottom": "3px solid red",
+                              "padding-bottom": "7px"
+                            }
+                          }
+                        }
+                      },
+                      "style": {
+                        "padding": "10px 20px",
+                        "transition": "all .15s ease-in-out",
+                        "cursor": "pointer"
+                      },
+                      "children": [{
+                        "type": "element",
+                        "content": {
+                          "elementType": "text",
+                          "abilities": {
+                            "link": {
+                              "type": "navlink",
+                              "content": {
+                                "routeName": "contact-us"
+                              }
+                            }
+                          },
+                          "children": ["Contact Us"]
+                        }
+                      }]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    },
+    "PersonSpotlight": {
+      "name": "PersonSpotlight",
+      "propDefinitions": {
+        "name": {
+          "type": "string",
+          "defaultValue": "John Doe"
+        },
+        "flag": {
+          "type": "string",
+          "defaultValue": "🇷🇴"
+        },
+        "link": {
+          "type": "string",
+          "defaultValue": "https://twitter.com/teleportHQio"
+        },
+        "displayLink": {
+          "type": "string",
+          "defaultValue": "@teleportHQ"
+        },
+        "bio": {
+          "type": "string",
+          "defaultValue": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        }
+      },
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "container",
+          "style": {
+            "width": "300px",
+            "border": "1px solid #ccc",
+            "padding": "10px",
+            "margin": "5px",
+            "color": "inherit"
+          },
+          "children": [
+            {
+              "type": "element",
+              "content": {
+                "elementType": "image",
+                "abilities": {
+                  "link": {
+                    "type": "url",
+                    "content": {
+                      "url": "$props.link",
+                      "newTab": true
+                    }
+                  }
+                },
+                "style": {
+                  "display": "block",
+                  "margin": "auto",
+                  "border-radius": "100%"
+                }
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "textblock",
+                "style": {
+                  "font-size": "22px",
+                  "font-weight": "900",
+                  "margin": "0",
+                  "text-align": "center"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "text",
+                      "style": {
+                        "margin-right": "7px",
+                        "font-size": "28px",
+                        "vertical-align": "middle"
+                      },
+                      "children": [
+                        {
+                          "type": "dynamic",
+                          "content": {
+                            "referenceType": "prop",
+                            "id": "flag"
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  {
+                    "type": "dynamic",
+                    "content": {
+                      "referenceType": "prop",
+                      "id": "name"
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "textblock",
+                "style": {
+                  "fontSize": "16px",
+                  "margin": "0",
+                  "text-align": "center"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "text",
+                      "style": {
+                        "text-decoration": "none",
+                        "color": "#822cec"
+                      },
+                      "abilities": {
+                        "link": {
+                          "type": "mail",
+                          "content": {
+                            "mail": "mail@teleporthq.io",
+                            "body": "Hello! is it me you're looking for?"
+                          }
+                        }
+                      },
+                      "children": [
+                        "$props.displayLink"
+                      ]
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "textblock",
+                "children": [
+                  {
+                    "type": "dynamic",
+                    "content": {
+                      "referenceType": "prop",
+                      "id": "bio"
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    },
+    "PersonList": {
+      "name": "PersonList",
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "container",
+          "name": "wrapper",
+          "style": {
+            "display": "flex",
+            "flex-wrap": "wrap",
+            "padding": "5px"
+          },
+          "children": [
+            {
+              "type": "repeat",
+              "content": {
+                "node": {
+                  "type": "element",
+                  "content": {
+                    "elementType": "component",
+                    "semanticType": "PersonSpotlight",
+                    "dependency": {
+                      "type": "local",
+                      "path": "./person-spotlight"
+                    },
+                    "attrs": {
+                      "name": "$local.person.name",
+                      "flag": "$local.person.flag",
+                      "displayLink": "$local.person.displayLink",
+                      "url": "$local.person.url"
+                    }
+                  }
+                },
+                "dataSource": {
+                  "type": "static",
+                  "content": [{
+                    "name": "Alice",
+                    "flag": "🇩🇪",
+                    "displayLink": "@alicecodes",
+                    "url": "https://picsum.photos/150?v=alice"
+                  },{
+                    "name": "Bob",
+                    "displayLink": "@bobthebest",
+                     "url": "https://picsum.photos/150?v=bob"
+                  },{
+                    "name": "Carol",
+                    "flag": "🇨🇱",
+                    "displayLink": "@oh.carol",
+                    "url": "https://picsum.photos/150?v=carol"
+                  }]
+                },
+                "meta":{
+                  "iteratorName": "person",
+                  "useIndex": true
+                }
+              }
+            }
+          ]
+        }
+      }
+    },
+    "ContactForm": {
+      "name": "ContactForm",
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "form",
+          "attrs": {
+            "type": "get",
+            "url": "/"
+          },
+          "style": {
+            "margin": "20px",
+            "font-size": "18px"
+          },
+          "children": [
+            {
+              "type": "element",
+              "content": {
+                "elementType": "image",
+                "name": "form-banner",
+                "attrs": {
+                  "url": "/playground_assets/some-banner.png"
+                }
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "container",
+                "name": "name-group",
+                "style": {
+                  "margin-bottom": "10px"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "label",
+                      "attrs": {
+                        "for": "name"
+                      },
+                      "style": {
+                        "vertical-align": "middle",
+                        "display": "inline-block",
+                        "width": "100px"
+                      },
+                      "children": ["Name:"]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "textinput",
+                      "style": {
+                        "padding": "5px",
+                        "fontSize": "16px"
+                      },
+                      "attrs": {
+                        "id": "name",
+                        "name": "name"
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "container",
+                "name": "email-group",
+                "style": {
+                  "margin-bottom": "10px"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "label",
+                      "attrs": {
+                        "for": "email"
+                      },
+                      "style": {
+                        "vertical-align": "middle",
+                        "display": "inline-block",
+                        "width": "100px"
+                      },
+                      "children": ["Email:"]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "textinput",
+                      "style": {
+                        "padding": "5px",
+                        "fontSize": "16px"
+                      },
+                      "attrs": {
+                        "type": "email",
+                        "id": "email",
+                        "name": "email"
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "container",
+                "name": "message-group",
+                "style": {
+                  "margin-bottom": "10px"
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "name": "message-label",
+                      "elementType": "label",
+                      "attrs": {
+                        "for": "message"
+                      },
+                      "style": {
+                        "vertical-align": "top",
+                        "display": "inline-block",
+                        "width": "100px",
+                        "marginTop": "5px"
+                      },
+                      "children": ["Message:"]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "textarea",
+                      "style": {
+                        "padding": "5px",
+                        "fontSize": "16px",
+                        "border-color": "#ccc"
+                      },
+                      "attrs": {
+                        "rows": 8,
+                        "cols": 30,
+                        "id": "message",
+                        "name": "message"
+                      }
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "button",
+                "referencedStyles": {
+                  "5ecfa1233b8e50f60ea2b64d": {
+                    "id": "5ecfa1233b8e50f60ea2b64d",
+                    "type": "style-map",
+                    "content": {
+                      "mapType": "inlined",
+                      "conditions": [
+                        { "conditionType": "element-state", "content": "hover"}
+                      ],
+                      "styles": {
+                        "background-color": "green",
+                        "color": "white"
+                      }
+                    }
+                  }
+                },
+                "style": {
+                  "font-size": "18px",
+                  "padding": "5px 10px",
+                  "background-color": "white",
+                  "color": "green",
+                  "marginLeft": "100px",
+                  "border": "1px solid grey",
+                  "transition": "all .35s ease-out",
+                  "border-radius": "3px",
+                  "cursor": "pointer"
+                },
+                "children": ["Send"]
+              }
+            }
+          ]
+        }
+      }
+    },
+    "ExpandableArea": {
+      "name": "ExpandableArea",
+      "propDefinitions": {
+        "header": {
+          "type": "string",
+          "defaultValue": "This whole area is clickable!"
+        },
+        "expandableHeight": {
+          "type": "string",
+          "defaultValue": "100px"
+        }
+      },
+      "stateDefinitions": {
+        "isExpanded": {
+          "type": "boolean",
+          "defaultValue": false
+        }
+      },
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "container",
+          "style": {
+            "border-bottom": "1px solid #ccc"
+          },
+          "children": [
+            {
+              "type": "element",
+              "content": {
+                "elementType": "container",
+                "name": "clickable-area",
+                "style": {
+                  "cursor": "pointer",
+                  "padding": "10px 0"
+                },
+                "events": {
+                  "click": [
+                    {
+                      "type": "stateChange",
+                      "modifies": "isExpanded",
+                      "newState": "$toggle"
+                    }
+                  ]
+                },
+                "children": [
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "text",
+                      "style": {
+                        "font-size": "20px",
+                        "font-weight": "600",
+                        "line-height": "1.5"
+                      },
+                      "children": [
+                        {
+                          "type": "dynamic",
+                          "content": {
+                            "referenceType": "prop",
+                            "id": "header"
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  {
+                    "type": "element",
+                    "content": {
+                      "elementType": "text",
+                      "style": {
+                        "float": "right",
+                        "margin-top": "4px",
+                        "line-height": "1.5"
+                      },
+                      "name": "button",
+                      "children": [
+                        {
+                          "type": "element",
+                          "content": {
+                            "elementType": "svg",
+                            "attrs": {
+                              "width": "15",
+                              "height": "15",
+                              "viewBox": "0 0 15 15",
+                              "fill": "none"
+                            },
+                            "children": [
+                              {
+                                "type": "element",
+                                "content": {
+                                  "elementType": "line",
+                                  "attrs": {
+                                    "x1": "15",
+                                    "y1": "7.5",
+                                    "x2": "0",
+                                    "y2": "7.5",
+                                    "stroke": "#000"
+                                  }
+                                }
+                              },
+                              {
+                                "type": "conditional",
+                                "content": {
+                                  "node": {
+                                    "type": "element",
+                                    "content": {
+                                      "elementType": "line",
+                                      "attrs": {
+                                        "x1": "7.5",
+                                        "y1": "0",
+                                        "x2": "7.5",
+                                        "y2": "15",
+                                        "stroke": "#000"
+                                      }
+                                    }
+                                  },
+                                  "reference": {
+                                    "type": "dynamic",
+                                    "content": {
+                                      "referenceType": "state",
+                                      "id": "isExpanded"
+                                    }
+                                  },
+                                  "value": false
+                                }
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "type": "element",
+              "content": {
+                "elementType": "container",
+                "name": "collapsible-area",
+                "attrs": {
+                  "data-is-expanded": "$state.isExpanded"
+                },
+                "style": {
+                  "height": "0",
+                  "overflow": "hidden",
+                  "transition": "height .2s ease-out"
+                },
+                "children": [
+                  {
+                    "type": "slot",
+                    "content": {}
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/teleport-plugin-common/src/node-handlers/node-to-html/index.ts b/packages/teleport-plugin-common/src/node-handlers/node-to-html/index.ts
index 894e92f3..63d92041 100644
--- a/packages/teleport-plugin-common/src/node-handlers/node-to-html/index.ts
+++ b/packages/teleport-plugin-common/src/node-handlers/node-to-html/index.ts
@@ -27,14 +27,14 @@ const generateElementNode: NodeToHTML<UIDLElementNode, HastNode> = (node, params
 
   if (dependency) {
     const existingDependency = dependencies[tagName]
-    safeTagName =
-      existingDependency && existingDependency?.path !== dependency?.path
-        ? `${StringUtils.dashCaseToUpperCamelCase(
-            StringUtils.removeIllegalCharacters(dependency.path)
-          )}${tagName}`
-        : tagName
-
     if (templateSyntax.dependencyHandling === 'import' && dependency.type !== 'local') {
+      safeTagName =
+        existingDependency && existingDependency?.path !== dependency?.path
+          ? `${StringUtils.dashCaseToUpperCamelCase(
+              StringUtils.removeIllegalCharacters(dependency.path)
+            )}${tagName}`
+          : tagName
+
       dependencies[safeTagName] = { ...dependency }
 
       if (existingDependency && existingDependency?.path !== dependency?.path) {
@@ -46,7 +46,7 @@ const generateElementNode: NodeToHTML<UIDLElementNode, HastNode> = (node, params
           },
         }
       }
-    } else if (dependency.type === 'local') {
+    } else if (dependency.type === 'local' && templateSyntax.dependencyHandling === 'import') {
       // local dependencies can be renamed based on their safety (eg: Header/header, Form/form)
       const safeImportName = StringUtils.dashCaseToUpperCamelCase(safeTagName)
       dependencies[safeImportName] = { ...dependency }
diff --git a/packages/teleport-plugin-common/src/node-handlers/node-to-html/utils.ts b/packages/teleport-plugin-common/src/node-handlers/node-to-html/utils.ts
index 68e03df0..2e588536 100644
--- a/packages/teleport-plugin-common/src/node-handlers/node-to-html/utils.ts
+++ b/packages/teleport-plugin-common/src/node-handlers/node-to-html/utils.ts
@@ -34,7 +34,9 @@ export const handleAttribute = (
         dataObject[dataObjectIdentifier] = attrValue.content
         hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, dataObjectIdentifier)
       } else if (typeof attrValue.content === 'boolean') {
-        hastUtils.addBooleanAttributeToNode(htmlNode, attrKey)
+        attrValue.content === true
+          ? hastUtils.addBooleanAttributeToNode(htmlNode, attrKey)
+          : hastUtils.addBooleanAttributeToNode(htmlNode, dynamicAttrKey, false)
       } else if (typeof attrValue.content === 'string') {
         hastUtils.addAttributeToNode(
           htmlNode,
diff --git a/packages/teleport-plugin-common/src/utils/ast-utils.ts b/packages/teleport-plugin-common/src/utils/ast-utils.ts
index 1b271c86..88244d4d 100644
--- a/packages/teleport-plugin-common/src/utils/ast-utils.ts
+++ b/packages/teleport-plugin-common/src/utils/ast-utils.ts
@@ -117,7 +117,10 @@ export const addAttributeToJSXTag = (
   const nameOfAttribute = t.jsxIdentifier(attrName)
   let attributeDefinition
   if (typeof attrValue === 'boolean') {
-    attributeDefinition = t.jsxAttribute(nameOfAttribute)
+    attributeDefinition = t.jsxAttribute(
+      nameOfAttribute,
+      attrValue === true ? undefined : t.jsxExpressionContainer(t.booleanLiteral(attrValue))
+    )
   } else {
     attributeDefinition = t.jsxAttribute(
       nameOfAttribute,
diff --git a/packages/teleport-plugin-common/src/utils/hast-utils.ts b/packages/teleport-plugin-common/src/utils/hast-utils.ts
index 8ab040cf..da496ff4 100644
--- a/packages/teleport-plugin-common/src/utils/hast-utils.ts
+++ b/packages/teleport-plugin-common/src/utils/hast-utils.ts
@@ -1,8 +1,8 @@
 import { HastNode } from '@teleporthq/teleport-types'
 import { createTextNode } from '../builders/hast-builders'
 
-export const addBooleanAttributeToNode = (node: HastNode, key: string) => {
-  node.properties[key] = ''
+export const addBooleanAttributeToNode = (node: HastNode, key: string, value: boolean = true) => {
+  node.properties[key] = value === true ? '' : false
   /* adding empty string as @starptech/prettyhtml-hast-to-html which we are currently
   using for generating HTML supports boolean way of adding attributes only for HTML
   attributes but not for Vue*/


Test patch:
diff --git a/examples/test-samples/project-sample-with-dependency.json b/examples/test-samples/project-sample-with-dependency.json
new file mode 100644
index 00000000..6a61109c
--- /dev/null
+++ b/examples/test-samples/project-sample-with-dependency.json
@@ -0,0 +1,586 @@
+{
+    "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"
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "Modal",
+                          "dependency": {
+                            "type": "local"
+                          }
+                        }
+                      }
+                    ]
+                  }
+                },
+                "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": {
+                  "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": {
+                  "semanticType": "Button",
+                  "elementType": "component",
+                  "attrs": {
+                    "type": "primary"
+                  },
+                  "name": "openmodal",
+                  "events": {
+                    "click": [{
+                      "type": "stateChange",
+                      "modifies": "isOpen",
+                      "newState": true
+                    }]
+                  },
+                  "children": [{
+                    "type": "static",
+                    "content": "Show Popup"
+                  }],
+                  "dependency": {
+                    "type": "package",
+                    "path": "antd",
+                    "version": "4.5.4",
+                    "meta": {
+                      "namedImport": true
+                    }
+                  }
+                }
+              },
+              {
+                "type": "conditional",
+                "content": {
+                  "node": {
+                    "type": "element",
+                    "content": {
+                      "elementType": "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
+                  }]
+                }
+              }
+            }]
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/examples/test-samples/project-with-import-global-styles.json b/examples/test-samples/project-with-import-global-styles.json
new file mode 100644
index 00000000..85a0ff4c
--- /dev/null
+++ b/examples/test-samples/project-with-import-global-styles.json
@@ -0,0 +1,607 @@
+{
+    "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",
+      "styleSetDefinitions": {
+        "5ed0d05baa77d97673711820": {
+          "id": "5ed0d05baa77d97673711820",
+          "name": "primaryButton",
+          "type": "reusable-project-style-map",
+          "content": {
+            "background": "blue",
+            "width": "auto",
+            "color": "#fff",
+            "border": "1px solid #fff"
+          }
+        },
+        "5ed0d4923de727e93cb4efa2": {
+          "id": "5ed0d4923de727e93cb4efa2",
+          "name": "secondaryButton",
+          "type": "reusable-project-style-map",
+          "content": {
+            "background": "red",
+            "width": "auto",
+            "color": "#fff",
+            "border": "1px solid #fff"
+          }
+        }
+      },
+      "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",
+                        "referencedStyles": {
+                          "5ed0d3daf36df4da926078ee": {
+                            "id": "5ed0d3daf36df4da926078ee",
+                            "type": "style-map",
+                            "content": {
+                              "mapType": "project-referenced",
+                              "referenceId": "5ed0d05baa77d97673711820"
+                            }
+                          }
+                        }
+                      }
+                    ]
+                  }
+                },
+                "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": "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
+                  }]
+                }
+              }
+            }]
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/packages/teleport-plugin-common/__tests__/node-handlers/node-to-html/utils.ts b/packages/teleport-plugin-common/__tests__/node-handlers/node-to-html/utils.ts
new file mode 100644
index 00000000..043933c6
--- /dev/null
+++ b/packages/teleport-plugin-common/__tests__/node-handlers/node-to-html/utils.ts
@@ -0,0 +1,50 @@
+import { UIDLAttributeValue, UIDLElementNode } from '@teleporthq/teleport-types'
+import { handleAttribute } from '../../../src/node-handlers/node-to-html/utils'
+import { createHTMLNode } from '../../../src/builders/hast-builders'
+import {
+  HTMLTemplateGenerationParams,
+  HTMLTemplateSyntax,
+} from '../../../src/node-handlers/node-to-html/types'
+import { DEFAULT_TEMPLATE_SYNTAX } from '../../../src/node-handlers/node-to-html/constants'
+
+describe('handleAttribute', () => {
+  it('handle an attribute with boolean value', () => {
+    const htmlNode = createHTMLNode('div')
+    const elementName = 'MyComponent'
+    const attrKey = 'isVisible'
+    const attrValue: UIDLAttributeValue = {
+      type: 'static',
+      content: false,
+    }
+    const params: HTMLTemplateGenerationParams = {
+      dependencies: {},
+      dataObject: {},
+      methodsObject: {},
+      templateLookup: {},
+    }
+    const templateSyntax: HTMLTemplateSyntax = DEFAULT_TEMPLATE_SYNTAX
+    const node: UIDLElementNode = {
+      type: 'element',
+      content: {
+        elementType: 'text',
+        children: [
+          {
+            type: 'static',
+            content: 'are you ok?',
+          },
+        ],
+      },
+    }
+    handleAttribute(htmlNode, elementName, attrKey, attrValue, params, templateSyntax, node)
+    expect(htmlNode.properties).toHaveProperty(`:${attrKey}`, attrValue.content)
+
+    const attrKey1 = 'isOpen'
+    const attrValue1: UIDLAttributeValue = {
+      type: 'static',
+      content: true,
+    }
+
+    handleAttribute(htmlNode, elementName, attrKey1, attrValue1, params, templateSyntax, node)
+    expect(htmlNode.properties).toHaveProperty(attrKey1, '')
+  })
+})
diff --git a/packages/teleport-plugin-common/__tests__/utils/ast-utils.ts b/packages/teleport-plugin-common/__tests__/utils/ast-utils.ts
index 4c194855..ac84c382 100644
--- a/packages/teleport-plugin-common/__tests__/utils/ast-utils.ts
+++ b/packages/teleport-plugin-common/__tests__/utils/ast-utils.ts
@@ -93,6 +93,19 @@ describe('addAttributeToJSXTag', () => {
     expect(classAttr.value).toBe(null)
   })
 
+  it('adds an attribute with false', () => {
+    const tag = createJSXTag('button')
+
+    addAttributeToJSXTag(tag, 'disabled', false)
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(classAttr.name.name).toBe('disabled')
+    expect(((classAttr.value as JSXExpressionContainer).expression as BooleanLiteral).value).toBe(
+      false
+    )
+  })
+
   it('adds an attribute with the selected value', () => {
     const tag = createJSXTag('button')
 
diff --git a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts b/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
index bded481b..b87e3160 100644
--- a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
@@ -1,8 +1,5 @@
-// @ts-ignore
-import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
+import uidlSample from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createAngularProjectGenerator } from '../../src'
 import { FileType } from '@teleporthq/teleport-types'
@@ -14,26 +11,58 @@ describe('Angular Project Generator', () => {
     const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
 
-    expect(assetsPath).toBeDefined()
-    expect(outputFolder.name).toBe(template.name)
-    expect(outputFolder.files[0].name).toBe('package')
-
+    const packageJSON = outputFolder.files[0]
     const srcFolder = outputFolder.subFolders[0]
     const appFolder = srcFolder.subFolders[0]
     const pagesFolder = appFolder.subFolders[0]
     const componentsFolder = appFolder.subFolders[1]
+    const modalComponent = componentsFolder.subFolders[2]
+    const componentsModule = componentsFolder.files[0]
 
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(outputFolder.files[0].name).toBe('package')
     expect(srcFolder.files[0].fileType).toBe(FileType.HTML)
     expect(srcFolder.files[0].content).toBeDefined()
     expect(appFolder.files[0].name).toBe('app.module')
     expect(appFolder.files[0].fileType).toBe(FileType.TS)
     expect(appFolder.files[0].content).toBeDefined()
     expect(componentsFolder.name).toBe('components')
-    expect(componentsFolder.files[0].name).toBe('components.module')
+    expect(componentsModule.name).toBe('components.module')
     expect(componentsFolder.files[0].content).toBeDefined()
     expect(componentsFolder.subFolders.length).toBeGreaterThan(0)
     expect(pagesFolder.name).toBe('pages')
     expect(pagesFolder.subFolders.length).toBeGreaterThan(0)
+
+    /*
+     * For angular by default we are adding all the external dependencies only in components module
+     * Since we can import once in module and use in all places for angular unlike
+     * other frameworks. External dependnecies don't have first class support in Angular yet in
+     * code-generators
+     *
+     * Any local dependency is also imported only once in the components module and direclty
+     * used in any other component
+     *
+     * Refer --> https://github.com/teleporthq/teleport-code-generators/pull/478
+     */
+
+    expect(componentsModule.content).toContain(`import { Button } from 'antd'`)
+    expect(componentsModule.content)
+      .toContain(`import { OneComponent } from './one-component/one-component.component'
+import { ExpandableArea } from './expandable-area/expandable-area.component'
+import { Modal } from './modal/modal.component'
+import { ModalWindow } from './modal-window/modal-window.component'`)
+    expect(modalComponent.files[0].content).toContain(
+      `<modal-window (onClose)="isOpen = false" *ngIf="isOpen"></modal-window>`
+    )
+    expect(pagesFolder.subFolders[0].files[0].content).toContain(`<app-modal></app-modal>`)
+    /*
+     * Modal is used in home page but don't need to import since all components are packed
+     * together as components module and imported at once in root module
+     */
+    expect(pagesFolder.subFolders[0].files[1].content).not.toContain(`import Modal`)
+    expect(modalComponent.files[1].content).not.toContain(`import Modal`)
+    expect(packageJSON.content).toContain(`"antd": "4.5.4"`)
   })
 
   it('throws error when invalid UIDL sample is used', async () => {
diff --git a/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts b/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts
index 63d7eb39..e92e65ad 100644
--- a/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts
@@ -1,5 +1,5 @@
-// @ts-ignore
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
+import uidlSampleWithExternalDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
 import template from './mocks'
 import { createGatsbyProjectGenerator } from '../../src'
@@ -28,6 +28,36 @@ describe('Gatsby Project Generator', () => {
     expect(componentsFolder.name).toBe('components')
   })
 
+  it('runs without crashing with external dependencies', async () => {
+    const outputFolder = await generator.generateProject(
+      uidlSampleWithExternalDependencies,
+      template
+    )
+    const assetsPath = generator.getAssetsPath()
+
+    const srcFolder = outputFolder.subFolders[0]
+    const pagesFolder = srcFolder.subFolders[1]
+    const componentsFolder = srcFolder.subFolders[2]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(outputFolder.files[0].name).toBe('package')
+    expect(outputFolder.files[0].content).toContain(`"antd": "4.5.4"`)
+    expect(srcFolder.files[0].name).toBe('html')
+    expect(srcFolder.files[0].fileType).toBe(FileType.JS)
+    expect(srcFolder.files[0].content).toBeDefined()
+    expect(pagesFolder.name).toBe('pages')
+    expect(pagesFolder.files.length).toBeGreaterThan(0)
+    expect(componentsFolder.files.length).toBeGreaterThan(0)
+    expect(componentsFolder.name).toBe('components')
+
+    /*
+     * Imports like css imports / or imports which are just inserted,
+     * are added in index file in pages
+     */
+    expect(pagesFolder.files[0].content).toContain(`import 'antd/dist/antd.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 
diff --git a/packages/teleport-project-generator-gridsome/__tests__/end2end/index.ts b/packages/teleport-project-generator-gridsome/__tests__/end2end/index.ts
index 1756c19c..3d87c999 100644
--- a/packages/teleport-project-generator-gridsome/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-gridsome/__tests__/end2end/index.ts
@@ -1,8 +1,7 @@
-// @ts-ignore
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
+import uidlSampleWithExternalDependency from '../../../../examples/test-samples/project-sample-with-dependency.json'
+import uidlWithProjectStyleSheet from '../../../../examples/test-samples/project-with-import-global-styles.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createGridsomeProjectGenerator } from '../../src'
 
@@ -14,12 +13,59 @@ describe('Gridsome Project Generator', () => {
     const assetsPath = generator.getAssetsPath()
 
     const srcFolder = outputFolder.subFolders[0]
+    const mainFile = srcFolder.files[0]
 
     expect(assetsPath).toBeDefined()
+    expect(mainFile.content).not.toContain(`import '~/assets/style.css'`)
     expect(outputFolder.name).toBe(template.name)
     expect(srcFolder.files[0].name).toBe('main')
     expect(srcFolder.files[0].fileType).toBe('js')
   })
+
+  it('runs without crashing with project style sheets', async () => {
+    const outputFolder = await generator.generateProject(uidlWithProjectStyleSheet, template)
+    const assetsPath = generator.getAssetsPath()
+
+    const srcFolder = outputFolder.subFolders[0]
+    const mainFile = srcFolder.files[0]
+    const assetsFoler = srcFolder.subFolders[0]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(srcFolder.files[0].name).toBe('main')
+    expect(srcFolder.files[0].fileType).toBe('js')
+    expect(mainFile.content).toContain(`import '~/assets/style.css'`)
+    expect(assetsFoler.files.length).toBe(1)
+    expect(assetsFoler.files[0].name).toBe('style')
+    expect(assetsFoler.files[0].content).toContain(`.primaryButton`)
+  })
+
+  it('runs without crashing with external dependencies with supported syntaxes', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithExternalDependency, template)
+    const assetsPath = generator.getAssetsPath()
+
+    const packageJSON = outputFolder.files[0]
+    const pages = outputFolder.subFolders[0].subFolders[0]
+    const components = outputFolder.subFolders[0].subFolders[1]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(packageJSON).toBeDefined()
+    expect(pages.files.length).toBe(3)
+    expect(components.files.length).toBe(4)
+
+    /*
+     * Support for external dependencies for Nuxt is same as Vue
+     * For further details, refer --> https://github.com/teleporthq/teleport-code-generators/pull/478
+     */
+
+    expect(components.files[2].content).toContain(`import { Button } from 'antd'`)
+    expect(packageJSON.content).toContain(`"antd": "4.5.4"`)
+
+    /** For Nuxt based projects, just imports are injected in index file of the routes */
+    expect(pages.files[0].content).toContain(`import 'antd/dist/antd.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 
diff --git a/packages/teleport-project-generator-next/__tests__/end2end/index.ts b/packages/teleport-project-generator-next/__tests__/end2end/index.ts
index 6a5c5ea3..9564d1a2 100644
--- a/packages/teleport-project-generator-next/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-next/__tests__/end2end/index.ts
@@ -1,10 +1,7 @@
-// @ts-ignore
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import uidlSampleWithoutProjectStyleesButImports from './project-with-import-without-global-styles.json'
-// @ts-ignore
+import uidlSampleWithProjectStyleSheet from '../../../../examples/test-samples/project-with-import-global-styles.json'
 import template from './template-definition.json'
 import { createNextProjectGenerator } from '../../src'
 
@@ -29,6 +26,21 @@ describe('React Next Project Generator', () => {
     expect(appFile.content).not.toContain(`import './style.css'`)
   })
 
+  it('runs without crashing and adding style sheet to _app.js file', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithProjectStyleSheet, template)
+    const assetsPath = generator.getAssetsPath()
+
+    const publicFolder = outputFolder.subFolders.find((folder) => folder.name === 'pages')
+    const appFile = publicFolder.files.find((file) => file.name === '_app')
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(outputFolder.files[0].name).toBe('package')
+    expect(appFile).toBeDefined()
+    expect(appFile.content).not.toContain(`import "antd/dist/antd.css`)
+    expect(appFile.content).toContain(`import './style.css'`)
+  })
+
   it('runs without crashing', async () => {
     const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
diff --git a/packages/teleport-project-generator-nuxt/__tests__/end2end/index.ts b/packages/teleport-project-generator-nuxt/__tests__/end2end/index.ts
index 185dd3fd..ecccc238 100644
--- a/packages/teleport-project-generator-nuxt/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-nuxt/__tests__/end2end/index.ts
@@ -1,8 +1,6 @@
-// @ts-ignore
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
+import uidlSampleWithDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createNuxtProjectGenerator } from '../../src'
 
@@ -13,8 +11,37 @@ describe('Vue Nuxt Project Generator', () => {
     const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
 
+    const packageJSON = outputFolder.files[1]
+
     expect(assetsPath).toBeDefined()
     expect(outputFolder.name).toBe(template.name)
+    expect(packageJSON).toBeDefined()
+  })
+
+  it('runs without crashing with external dependencies with supported syntaxes', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithDependencies, template)
+    const assetsPath = generator.getAssetsPath()
+
+    const packageJSON = outputFolder.files[1]
+    const pages = outputFolder.subFolders[1]
+    const components = outputFolder.subFolders[0]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(packageJSON).toBeDefined()
+    expect(pages.files.length).toBe(3)
+    expect(components.files.length).toBe(4)
+
+    /*
+     * Support for external dependencies for Nuxt is same as Vue
+     * For further details, refer --> https://github.com/teleporthq/teleport-code-generators/pull/478
+     */
+
+    expect(components.files[2].content).toContain(`import { Button } from 'antd'`)
+    expect(packageJSON.content).toContain(`"antd": "4.5.4"`)
+
+    /* For Nuxt based projects, just imports are injected in index file of the routes */
+    expect(pages.files[0].content).toContain(`import 'antd/dist/antd.css'`)
   })
 
   it('throws error when invalid UIDL sample is used', async () => {
diff --git a/packages/teleport-project-generator-preact/__tests__/end2end/index.ts b/packages/teleport-project-generator-preact/__tests__/end2end/index.ts
index 76eceeca..089a9c85 100644
--- a/packages/teleport-project-generator-preact/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-preact/__tests__/end2end/index.ts
@@ -1,34 +1,73 @@
-// @ts-ignore
+import uidlSampleWithDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createPreactProjectGenerator } from '../../src'
-import { ProjectUIDL } from '@teleporthq/teleport-types'
-
-const projectUIDL = uidlSample as ProjectUIDL
 
 describe('Preact Project Generator', () => {
   const generator = createPreactProjectGenerator()
 
-  it('runs without crashing', async () => {
-    const outputFolder = await generator.generateProject(projectUIDL, template)
+  it('runs without crashing with external dependencies', async () => {
+    const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
 
+    const srcFolder = outputFolder.subFolders[0]
+    const componentFiles = srcFolder.subFolders[0].files
+    const packageJSON = outputFolder.files[0]
+
     expect(assetsPath).toBeDefined()
     expect(outputFolder.name).toBe(template.name)
-    expect(outputFolder.files[0].name).toBe('package')
+    expect(packageJSON).toBeDefined()
+    expect(packageJSON.name).toBe('package')
+    expect(srcFolder.files[0].name).toBe('index')
+    expect(srcFolder.files[0].fileType).toBe('html')
+    expect(srcFolder.subFolders[0].name).toBe('components')
+    expect(srcFolder.subFolders[1].name).toBe('routes')
+    expect(componentFiles.length).toBe(6)
+    expect(componentFiles[componentFiles.length - 1].fileType).toBe('js')
+    expect(componentFiles[componentFiles.length - 1].name).toBe('app')
+  })
+
+  it('runs without crashing with external dependencies', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithDependencies, template)
+    const assetsPath = generator.getAssetsPath()
 
     const srcFolder = outputFolder.subFolders[0]
     const componentFiles = srcFolder.subFolders[0].files
+    const packageJSON = outputFolder.files[0]
+    const modalComponent = componentFiles[3]
 
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(packageJSON).toBeDefined()
+    expect(packageJSON.name).toBe('package')
+    expect(packageJSON.content).toContain(`{
+  "name": "myvueproject",
+  "version": "1.0.0",
+  "description": "Project generated based on a UIDL document",
+  "dependencies": {
+    "react-helmet": "^6.1.0",
+    "prop-types": "15.7.2",
+    "antd": "4.5.4"
+  }
+}`)
     expect(srcFolder.files[0].name).toBe('index')
     expect(srcFolder.files[0].fileType).toBe('html')
     expect(srcFolder.subFolders[0].name).toBe('components')
     expect(srcFolder.subFolders[1].name).toBe('routes')
+    expect(componentFiles.length).toBe(6)
     expect(componentFiles[componentFiles.length - 1].fileType).toBe('js')
     expect(componentFiles[componentFiles.length - 1].name).toBe('app')
+    expect(modalComponent.content).toContain(
+      `<Button type="primary" onClick={() => setIsOpen(true)}>
+        Show Popup
+      </Button>`
+    )
+    expect(modalComponent.content).toContain(`import { Button } from 'antd'`)
+    /** Imports which are just inserted and left like css one's are added directly in app.js file */
+    expect(componentFiles[componentFiles.length - 1].content).toContain(
+      `import 'antd/dist/antd.css'`
+    )
   })
 
   it('throws error when invalid UIDL sample is used', async () => {
diff --git a/packages/teleport-project-generator-react/__tests__/end2end/index.ts b/packages/teleport-project-generator-react/__tests__/end2end/index.ts
index 7bd93b7b..9b5fb81a 100644
--- a/packages/teleport-project-generator-react/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-react/__tests__/end2end/index.ts
@@ -1,37 +1,92 @@
-// @ts-ignore
+import uidlSampleWithExternalDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createReactProjectGenerator } from '../../src'
-import { ProjectUIDL } from '@teleporthq/teleport-types'
-
-const projectUIDL = uidlSample as ProjectUIDL
 
 describe('React Project Generator', () => {
   const generator = createReactProjectGenerator()
 
   it('runs without crashing', async () => {
-    const outputFolder = await generator.generateProject(projectUIDL, template)
+    const outputFolder = await generator.generateProject(
+      (uidlSample as unknown) as Record<string, unknown>,
+      template
+    )
     const assetsPath = generator.getAssetsPath()
+    const srcFolder = outputFolder.subFolders[0]
+    const publicFolder = outputFolder.subFolders[1]
+    const packageJSON = outputFolder.files[0]
+    const componentsFoler = srcFolder.subFolders[0]
 
     expect(assetsPath).toBeDefined()
     expect(outputFolder.name).toBe(template.name)
-    expect(outputFolder.files[0].name).toBe('package')
+    expect(packageJSON.name).toBe('package')
+    expect(srcFolder.files[0].name).toBe('index')
+    expect(srcFolder.files[0].fileType).toBe('js')
+    expect(publicFolder.files[0].name).toBe('manifest')
+    expect(publicFolder.files[0].fileType).toBe('json')
+    expect(publicFolder.files[1].name).toBe('index')
+    expect(publicFolder.files[1].fileType).toBe('html')
+    expect(componentsFoler.name).toBe('components')
+    expect(srcFolder.subFolders[1].name).toBe('pages')
+  })
 
+  it('runs without crashing with external dependencies', async () => {
+    const outputFolder = await generator.generateProject(
+      (uidlSampleWithExternalDependencies as unknown) as Record<string, unknown>,
+      template
+    )
+    const assetsPath = generator.getAssetsPath()
     const srcFolder = outputFolder.subFolders[0]
     const publicFolder = outputFolder.subFolders[1]
+    const viewsFolder = srcFolder.subFolders[3]
+    const packageJSON = outputFolder.files[0]
+    const componentsFoler = srcFolder.subFolders[0]
+    const modalComponent = componentsFoler.files[3]
 
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(packageJSON.name).toBe('package')
     expect(srcFolder.files[0].name).toBe('index')
     expect(srcFolder.files[0].fileType).toBe('js')
     expect(publicFolder.files[0].name).toBe('manifest')
     expect(publicFolder.files[0].fileType).toBe('json')
     expect(publicFolder.files[1].name).toBe('index')
     expect(publicFolder.files[1].fileType).toBe('html')
-    expect(srcFolder.subFolders[0].name).toBe('components')
+    expect(componentsFoler.name).toBe('components')
     expect(srcFolder.subFolders[1].name).toBe('pages')
+
+    /*
+     * For react based projects we just import the componetns wherever they are being used
+     * and external dependencies are added to package.json
+     *
+     * External dependencies have first class support for react. For other frameworks and variants,
+     * please refer --> https://github.com/teleporthq/teleport-code-generators/pull/478
+     */
+
+    expect(packageJSON.content).toContain(`{
+  "name": "myvueproject",
+  "version": "1.0.0",
+  "description": "Project generated based on a UIDL document",
+  "dependencies": {
+    "react-helmet": "^6.1.0",
+    "prop-types": "15.7.2",
+    "antd": "4.5.4"
+  }
+}`)
+    expect(modalComponent).toBeDefined()
+    expect(modalComponent.content).toContain(`import { Button } from 'antd'`)
+    expect(modalComponent.content).toContain(
+      `<Button type="primary" onClick={() => setIsOpen(true)}>
+        Show Popup
+      </Button>`
+    )
+    expect(viewsFolder.files[0].content).toContain(`import Modal from '../components/modal'`)
+    expect(viewsFolder.files[0].content).toContain(`Page 1<Modal></Modal>`)
+    /* Imports that are just need to be inserted are added to router file by default */
+    expect(srcFolder.files[0].content).toContain(`import 'antd/dist/antd.css'`)
   })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 
diff --git a/packages/teleport-project-generator-stencil/__tests__/end2end/index.ts b/packages/teleport-project-generator-stencil/__tests__/end2end/index.ts
index a78152d0..8609da50 100644
--- a/packages/teleport-project-generator-stencil/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-stencil/__tests__/end2end/index.ts
@@ -1,18 +1,14 @@
-// @ts-ignore
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
+import uidlSampleWithGlobalStyleSheet from '../../../../examples/test-samples/project-with-import-global-styles.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
 import template from './mocks'
 import { createStencilProjectGenerator } from '../../src'
-import { ProjectUIDL } from '@teleporthq/teleport-types'
-
-const projectUIDL = uidlSample as ProjectUIDL
 
 describe('Preact Project Generator', () => {
   const generator = createStencilProjectGenerator()
 
   it('runs without crashing', async () => {
-    const outputFolder = await generator.generateProject(projectUIDL, template)
+    const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
 
     expect(assetsPath).toBeDefined()
@@ -23,6 +19,7 @@ describe('Preact Project Generator', () => {
     const srcFolder = outputFolder.subFolders[0]
     const rootFiles = srcFolder.subFolders[0].files
 
+    expect(outputFolder.files.length).toBe(2)
     expect(srcFolder.files[0].name).toBe('index')
     expect(srcFolder.files[0].fileType).toBe('html')
     expect(srcFolder.files[0].content).toContain('<script type="module" src="/build/app.esm.js">')
@@ -31,6 +28,32 @@ describe('Preact Project Generator', () => {
     expect(srcFolder.subFolders[0].name).toBe('components')
   })
 
+  it('runs without crashing with global style sheet and added to stencil config', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithGlobalStyleSheet, template)
+    const assetsPath = generator.getAssetsPath()
+
+    const srcFolder = outputFolder.subFolders[0]
+    const rootFiles = srcFolder.subFolders[0].files
+    const stencilConfig = outputFolder.files[0]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.files.length).toBe(2)
+    expect(outputFolder.name).toBe(template.name)
+    expect(outputFolder.name).toBe('stencil')
+    expect(outputFolder.files[1].name).toBe('package')
+    expect(stencilConfig.name).toBe('stencil.config')
+    expect(stencilConfig.fileType).toBe('ts')
+
+    expect(srcFolder.files[0].name).toBe('style')
+    expect(srcFolder.files[0].fileType).toBe('css')
+    expect(srcFolder.files[1].name).toBe('index')
+    expect(srcFolder.files[1].fileType).toBe('html')
+    expect(srcFolder.files[1].content).toContain('<script type="module" src="/build/app.esm.js">')
+    expect(rootFiles[0].name).toBe('app-root')
+    expect(rootFiles[0].fileType).toBe('tsx')
+    expect(srcFolder.subFolders[0].name).toBe('components')
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 
diff --git a/packages/teleport-project-generator-vue/__tests__/end2end/index.ts b/packages/teleport-project-generator-vue/__tests__/end2end/index.ts
index 577682cf..e51e56e7 100644
--- a/packages/teleport-project-generator-vue/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-vue/__tests__/end2end/index.ts
@@ -1,8 +1,6 @@
-// @ts-ignore
+import uidlSampleWithDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
-// @ts-ignore
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-// @ts-ignore
 import template from './template-definition.json'
 import { createVueProjectGenerator } from '../../src'
 
@@ -12,10 +10,62 @@ describe('Vue Project Generator', () => {
   it('runs without crashing', async () => {
     const outputFolder = await generator.generateProject(uidlSample, template)
     const assetsPath = generator.getAssetsPath()
+    const srcFolder = outputFolder.subFolders[0]
+    const viewsFolder = srcFolder.subFolders[1]
+    const packageJSON = outputFolder.files[0]
+    const componentsFolder = srcFolder.subFolders[0]
+    const modalComponent = componentsFolder.files[2]
 
     expect(assetsPath).toBeDefined()
     expect(outputFolder.name).toBe(template.name)
+    expect(viewsFolder.files.length).toBe(3)
+    expect(packageJSON).toBeDefined()
+    expect(packageJSON.name).toBe('package')
+    expect(modalComponent.name).toBe('modal')
+    expect(componentsFolder.files.length).toBe(4)
   })
+
+  it('runs without crashing with supported syntax for external dependencies', async () => {
+    const outputFolder = await generator.generateProject(uidlSampleWithDependencies, template)
+    const assetsPath = generator.getAssetsPath()
+    const srcFolder = outputFolder.subFolders[0]
+    const viewsFolder = srcFolder.subFolders[1]
+    const packageJSON = outputFolder.files[0]
+    const componentsFolder = srcFolder.subFolders[0]
+    const modalComponent = componentsFolder.files[2]
+
+    expect(assetsPath).toBeDefined()
+    expect(outputFolder.name).toBe(template.name)
+    expect(viewsFolder.files.length).toBe(3)
+    expect(packageJSON).toBeDefined()
+    expect(packageJSON.name).toBe('package')
+
+    /*
+     * All external dependencies are imported whenver they are used,
+     * but we don't have a first class support for vue external dependencies
+     * Since we need to make some config changes whenever a external component
+     * is used from vue and the generators are not there yet.
+     *
+     * For further details refer --> https://github.com/teleporthq/teleport-code-generators/pull/478
+     */
+
+    expect(packageJSON.content).toContain(`{
+  "name": "myvueproject",
+  "version": "1.0.0",
+  "description": "Project generated based on a UIDL document",
+  "dependencies": {
+    "antd": "4.5.4"
+  }
+}`)
+    expect(modalComponent.name).toBe('modal')
+    expect(componentsFolder.files.length).toBe(4)
+    expect(modalComponent.content).toContain(`import { Button } from 'antd'`)
+    expect(viewsFolder.files[0].content).toContain(`<app-modal></app-modal>`)
+    expect(viewsFolder.files[0].content).toContain(`import AppModal from '../components/modal'`)
+    /** Imports that are just inserted like css are added to router file by default  */
+    expect(srcFolder.files[0].content).toContain(`import 'antd/dist/antd.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)