Repository: teleporthq/teleport-code-generators
Pull request #366 (2019-09-19 12:25:29)

Refactor/shared imports

codecov[bot]: # [Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=h1) Report
> Merging [#366](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=desc) into [master](https://codecov.io/gh/teleporthq/teleport-code-generators/commit/af52288cb7c89c53111dca678868026a3f4acd10?src=pr&el=desc) will **decrease** coverage by `0.72%`.
> The diff coverage is `77.82%`.

[![Impacted file tree graph](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/graphs/tree.svg?width=650&token=LI2WPEFm1R&height=150&src=pr)](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master     #366      +/-   ##
==========================================
- Coverage   82.88%   82.16%   -0.73%     
==========================================
  Files         126      128       +2     
  Lines        4050     4025      -25     
  Branches      845      845              
==========================================
- Hits         3357     3307      -50     
- Misses        651      676      +25     
  Partials       42       42
```


| [Impacted Files](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [...ges/teleport-uidl-builders/src/project-builders.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC1idWlsZGVycy9zcmMvcHJvamVjdC1idWlsZGVycy50cw==) | `66.66% <ø> (ø)` | |
| [packages/teleport-shared/src/constants/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtc2hhcmVkL3NyYy9jb25zdGFudHMvaW5kZXgudHM=) | `100% <ø> (ø)` | :arrow_up: |
| [...port-shared/src/node-handlers/node-to-jsx/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtc2hhcmVkL3NyYy9ub2RlLWhhbmRsZXJzL25vZGUtdG8tanN4L2luZGV4LnRz) | `88.29% <ø> (ø)` | :arrow_up: |
| [...s/teleport-uidl-builders/src/component-builders.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC1idWlsZGVycy9zcmMvY29tcG9uZW50LWJ1aWxkZXJzLnRz) | `91.3% <ø> (ø)` | |
| [packages/teleport-shared/src/utils/style-utils.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtc2hhcmVkL3NyYy91dGlscy9zdHlsZS11dGlscy50cw==) | `100% <ø> (ø)` | |
| [packages/teleport-github-gateway/src/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtZ2l0aHViLWdhdGV3YXkvc3JjL2luZGV4LnRz) | `44.44% <ø> (ø)` | :arrow_up: |
| [packages/teleport-publisher-github/src/utils.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtcHVibGlzaGVyLWdpdGh1Yi9zcmMvdXRpbHMudHM=) | `72.72% <ø> (ø)` | :arrow_up: |
| [packages/teleport-uidl-builders/src/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtdWlkbC1idWlsZGVycy9zcmMvaW5kZXgudHM=) | `0% <0%> (ø)` | |
| [packages/teleport-shared/src/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtc2hhcmVkL3NyYy9pbmRleC50cw==) | `0% <0%> (ø)` | |
| [...es/teleport-postprocessor-prettier-js/src/index.ts](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree#diff-cGFja2FnZXMvdGVsZXBvcnQtcG9zdHByb2Nlc3Nvci1wcmV0dGllci1qcy9zcmMvaW5kZXgudHM=) | `100% <100%> (ø)` | :arrow_up: |
| ... and [60 more](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366/diff?src=pr&el=tree-more) | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=footer). Last update [af52288...18c0abc](https://codecov.io/gh/teleporthq/teleport-code-generators/pull/366?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/packages/teleport-code-generator/src/index.ts b/packages/teleport-code-generator/src/index.ts
index eafd539a..c011abb7 100644
--- a/packages/teleport-code-generator/src/index.ts
+++ b/packages/teleport-code-generator/src/index.ts
@@ -7,7 +7,7 @@ import {
   GeneratorOptions,
 } from '@teleporthq/teleport-types'
 import { createProjectPacker } from '@teleporthq/teleport-project-packer'
-import { ASSETS_IDENTIFIER } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { Constants } from '@teleporthq/teleport-shared'
 
 import reactProjectGenerator, { ReactTemplate } from '@teleporthq/teleport-project-generator-react'
 import nextProjectGenerator, {
@@ -137,7 +137,7 @@ const createCodeGenerator = (factoryOptions: PackerOptions & GenerateOptions = {
 
     packer.setAssets({
       assets: packAssets,
-      path: [ASSETS_IDENTIFIER],
+      path: [Constants.ASSETS_IDENTIFIER],
     })
     packer.setGenerator(projectGenerator)
     packer.setTemplate(projectTemplate)
diff --git a/packages/teleport-component-generator-angular/src/index.ts b/packages/teleport-component-generator-angular/src/index.ts
index 4a2d29c0..3183a52c 100644
--- a/packages/teleport-component-generator-angular/src/index.ts
+++ b/packages/teleport-component-generator-angular/src/index.ts
@@ -6,15 +6,14 @@ import {
 import angularComponentPlugin from '@teleporthq/teleport-plugin-angular-base-component'
 import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'
 import { createPlugin as createStylePlugin } from '@teleporthq/teleport-plugin-css'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 import { createPlugin as createImportPlugin } from '@teleporthq/teleport-plugin-import-statements'
 import { createPostProcessor } from '@teleporthq/teleport-postprocessor-prettier-js'
 
 import AngularMapping from './angular-mapping.json'
-import { ComponentGenerator } from '@teleporthq/teleport-types'
+import { ComponentGenerator, FileType } from '@teleporthq/teleport-types'
 
-const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TS })
-const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TS })
+const importStatementsPlugin = createImportPlugin({ fileType: FileType.TS })
+const prettierJS = createPostProcessor({ fileType: FileType.TS })
 const stylePlugin = createStylePlugin({
   inlineStyleAttributeKey: '[ngStyle]',
   declareDependency: 'decorator',
diff --git a/packages/teleport-component-generator-stencil/src/index.ts b/packages/teleport-component-generator-stencil/src/index.ts
index 85380b87..954c844d 100644
--- a/packages/teleport-component-generator-stencil/src/index.ts
+++ b/packages/teleport-component-generator-stencil/src/index.ts
@@ -1,7 +1,6 @@
 import stencilComponentPlugin from '@teleporthq/teleport-plugin-stencil-base-component'
 import { createPlugin as createCSSPlugin } from '@teleporthq/teleport-plugin-css'
 import { createPlugin as createImportPlugin } from '@teleporthq/teleport-plugin-import-statements'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 import { createPostProcessor } from '@teleporthq/teleport-postprocessor-prettier-js'
 
 import {
@@ -9,17 +8,17 @@ import {
   GeneratorFactoryParams,
 } from '@teleporthq/teleport-component-generator'
 
-import { ComponentGenerator } from '@teleporthq/teleport-types'
+import { ComponentGenerator, FileType } from '@teleporthq/teleport-types'
 
 import StencilMapping from './stencil-mapping.json'
 
-const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TSX })
+const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
 const stencilStylePlugin = createCSSPlugin({
   declareDependency: 'decorator',
   templateStyle: 'jsx',
   templateChunkName: 'jsx-component',
 })
-const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TSX })
+const prettierJS = createPostProcessor({ fileType: FileType.TSX })
 
 const createStencilComponentGenerator = ({
   mappings = [],
diff --git a/packages/teleport-component-generator/src/builder/index.ts b/packages/teleport-component-generator/src/builder/index.ts
index 74f73e6a..cd047ce1 100644
--- a/packages/teleport-component-generator/src/builder/index.ts
+++ b/packages/teleport-component-generator/src/builder/index.ts
@@ -1,15 +1,19 @@
 import { generator as babelCodeGenerator } from './generators/js-ast-to-code'
 import { generator as htmlGenerator } from './generators/html-to-string'
-import { ChunkDefinition, CodeGeneratorFunction, ChunkContent } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import {
+  ChunkDefinition,
+  CodeGeneratorFunction,
+  ChunkContent,
+  ChunkType,
+} from '@teleporthq/teleport-types'
 
 export default class Builder {
   private chunkDefinitions: ChunkDefinition[] = []
 
   private generators: { [key: string]: CodeGeneratorFunction<ChunkContent> } = {
-    [CHUNK_TYPE.AST]: babelCodeGenerator,
-    [CHUNK_TYPE.HAST]: htmlGenerator,
-    [CHUNK_TYPE.STRING]: (str: string) => str, // no-op for string chunks
+    [ChunkType.AST]: babelCodeGenerator,
+    [ChunkType.HAST]: htmlGenerator,
+    [ChunkType.STRING]: (str: string) => str, // no-op for string chunks
   }
 
   constructor(chunkDefinitions: ChunkDefinition[] = []) {
diff --git a/packages/teleport-component-generator/src/index.ts b/packages/teleport-component-generator/src/index.ts
index 8593a82c..d6b04dbc 100644
--- a/packages/teleport-component-generator/src/index.ts
+++ b/packages/teleport-component-generator/src/index.ts
@@ -3,13 +3,8 @@ import AssemblyLine from './assembly-line'
 import Builder from './builder'
 import Resolver from './resolver'
 
-import {
-  getComponentFileName,
-  getStyleFileName,
-  getTemplateFileName,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 import {
   ChunkDefinition,
   ComponentGenerator,
@@ -17,6 +12,7 @@ import {
   ComponentPlugin,
   PostProcessor,
   Mapping,
+  FileType,
   GeneratorOptions,
 } from '@teleporthq/teleport-types'
 
@@ -75,9 +71,9 @@ const createComponentGenerator = ({
       codeChunks = processor(codeChunks)
     })
 
-    const fileName = getComponentFileName(resolvedUIDL)
-    const styleFileName = getStyleFileName(resolvedUIDL)
-    const templateFileName = getTemplateFileName(resolvedUIDL)
+    const fileName = UIDLUtils.getComponentFileName(resolvedUIDL)
+    const styleFileName = UIDLUtils.getStyleFileName(resolvedUIDL)
+    const templateFileName = UIDLUtils.getTemplateFileName(resolvedUIDL)
     const files = fileBundler(codeChunks, fileName, styleFileName, templateFileName)
 
     return {
@@ -146,11 +142,11 @@ const getFileName = (
   styleFileName: string,
   templateFileName: string
 ) => {
-  if (fileType === FILE_TYPE.CSS) {
+  if (fileType === FileType.CSS) {
     return styleFileName || fileName
   }
 
-  if (fileType === FILE_TYPE.HTML) {
+  if (fileType === FileType.HTML) {
     return templateFileName || fileName
   }
 
diff --git a/packages/teleport-component-generator/src/resolver/index.ts b/packages/teleport-component-generator/src/resolver/index.ts
index 9e90fb5b..7bd0741d 100644
--- a/packages/teleport-component-generator/src/resolver/index.ts
+++ b/packages/teleport-component-generator/src/resolver/index.ts
@@ -1,6 +1,5 @@
 import * as utils from './utils'
-import { sanitizeVariableName } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import { cloneObject } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import { ComponentUIDL, UIDLElement, Mapping, GeneratorOptions } from '@teleporthq/teleport-types'
 
 /**
@@ -32,7 +31,7 @@ export default class Resolver {
       mapping,
     }
 
-    const node = cloneObject(uidl.node)
+    const node = UIDLUtils.cloneObject(uidl.node)
 
     if (options.projectRouteDefinition) {
       utils.resolveNavlinks(node, options.projectRouteDefinition)
@@ -46,7 +45,7 @@ export default class Resolver {
 
     utils.ensureDataSourceUniqueness(node)
 
-    const name = sanitizeVariableName(uidl.name)
+    const name = StringUtils.sanitizeVariableName(uidl.name)
 
     // There might be urls that need to be prefixed in the metaTags of the component
     utils.resolveMetaTags(uidl, options)
@@ -65,7 +64,7 @@ export default class Resolver {
       ...options,
       mapping,
     }
-    const returnElement = cloneObject(element)
+    const returnElement = UIDLUtils.cloneObject(element)
     utils.resolveElement(returnElement, newOptions)
     return returnElement
   }
diff --git a/packages/teleport-component-generator/src/resolver/utils.ts b/packages/teleport-component-generator/src/resolver/utils.ts
index fb6a044d..e542ecfe 100644
--- a/packages/teleport-component-generator/src/resolver/utils.ts
+++ b/packages/teleport-component-generator/src/resolver/utils.ts
@@ -1,11 +1,4 @@
-import {
-  prefixAssetsPath,
-  traverseElements,
-  traverseNodes,
-  traverseRepeats,
-  cloneObject,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { ASSETS_IDENTIFIER } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { UIDLUtils, StringUtils, Constants } from '@teleporthq/teleport-shared'
 import {
   UIDLEventDefinitions,
   UIDLElement,
@@ -19,7 +12,6 @@ import {
   GeneratorOptions,
   ComponentUIDL,
 } from '@teleporthq/teleport-types'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
 import deepmerge from 'deepmerge'
 
 const STYLE_PROPERTIES_WITH_URL = ['background', 'backgroundImage']
@@ -45,7 +37,7 @@ export const mergeMappings = (oldMapping: Mapping, newMapping?: Mapping, deepMer
 // Finds all the navlink elements and converts the content of the transitionTo attribute
 // to the actual route value that is defined in the project UIDL, in the routing definition
 export const resolveNavlinks = (uidlNode: UIDLNode, routesDefinition: UIDLStateDefinition) => {
-  traverseElements(uidlNode, (element) => {
+  UIDLUtils.traverseElements(uidlNode, (element) => {
     if (element.elementType === 'navlink') {
       const transitionAttribute = element.attrs.transitionTo
       if (transitionAttribute.type !== 'static') {
@@ -87,13 +79,13 @@ export const resolveMetaTags = (uidl: ComponentUIDL, options: GeneratorOptions)
 
   uidl.seo.metaTags.forEach((tag) => {
     Object.keys(tag).forEach((key) => {
-      tag[key] = prefixAssetsPath(options.assetsPrefix, tag[key])
+      tag[key] = UIDLUtils.prefixAssetsPath(options.assetsPrefix, tag[key])
     })
   })
 }
 
 export const resolveNode = (uidlNode: UIDLNode, options: GeneratorOptions) => {
-  traverseNodes(uidlNode, (node, parentNode) => {
+  UIDLUtils.traverseNodes(uidlNode, (node, parentNode) => {
     if (node.type === 'element') {
       resolveElement(node.content, options)
     }
@@ -146,7 +138,10 @@ export const resolveElement = (element: UIDLElement, options: GeneratorOptions)
     Object.keys(originalElement.attrs).forEach((attrKey) => {
       const attrValue = originalElement.attrs[attrKey]
       if (attrValue.type === 'static' && typeof attrValue.content === 'string') {
-        originalElement.attrs[attrKey].content = prefixAssetsPath(assetsPrefix, attrValue.content)
+        originalElement.attrs[attrKey].content = UIDLUtils.prefixAssetsPath(
+          assetsPrefix,
+          attrValue.content
+        )
       }
     })
   }
@@ -173,11 +168,11 @@ export const resolveElement = (element: UIDLElement, options: GeneratorOptions)
 }
 
 export const resolveChildren = (mappedChildren: UIDLNode[], originalChildren: UIDLNode[] = []) => {
-  let newChildren = cloneObject(mappedChildren)
+  let newChildren = UIDLUtils.cloneObject(mappedChildren)
 
   let placeholderFound = false
   newChildren.forEach((childNode) => {
-    traverseNodes(childNode, (node, parentNode) => {
+    UIDLUtils.traverseNodes(childNode, (node, parentNode) => {
       if (!isPlaceholderNode(node)) {
         return // we're only interested in placeholder nodes
       }
@@ -249,7 +244,7 @@ const resolveRepeat = (repeatContent: UIDLRepeatContent, parentNode: UIDLNode) =
 // container, container1, container2, etc. OR
 // container, container01, container02, ... container10, container11,... in case the number is higher
 export const generateUniqueKeys = (node: UIDLNode, lookup: ElementsLookup) => {
-  traverseElements(node, (element) => {
+  UIDLUtils.traverseElements(node, (element) => {
     // If a certain node name (ex: "container") is present multiple times in the component, it will be counted here
     // NextKey will be appended to the node name to ensure uniqueness inside the component
     const nodeOcurrence = lookup[element.name]
@@ -281,7 +276,7 @@ const generateNextIncrementalKey = (currentKey: string): string => {
 }
 
 export const createNodesLookup = (node: UIDLNode, lookup: ElementsLookup) => {
-  traverseElements(node, (element) => {
+  UIDLUtils.traverseElements(node, (element) => {
     const elementName = element.name
     if (!lookup[elementName]) {
       lookup[elementName] = {
@@ -311,7 +306,7 @@ const isPowerOfTen = (value: number) => {
 export const ensureDataSourceUniqueness = (node: UIDLNode) => {
   let index = 0
 
-  traverseRepeats(node, (repeat) => {
+  UIDLUtils.traverseRepeats(node, (repeat) => {
     if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
       repeat.meta = repeat.meta || {}
       repeat.meta.dataSourceIdentifier = index === 0 ? 'items' : `items${index}`
@@ -351,13 +346,16 @@ const prefixAssetURLs = (
         if (
           typeof staticContent === 'string' &&
           STYLE_PROPERTIES_WITH_URL.includes(styleKey) &&
-          staticContent.includes(ASSETS_IDENTIFIER)
+          staticContent.includes(Constants.ASSETS_IDENTIFIER)
         ) {
           // split the string at the beginning of the ASSETS_IDENTIFIER string
-          const startIndex = staticContent.indexOf(ASSETS_IDENTIFIER) - 1 // account for the leading '/'
+          const startIndex = staticContent.indexOf(Constants.ASSETS_IDENTIFIER) - 1 // account for the leading '/'
           const newStyleValue =
             staticContent.slice(0, startIndex) +
-            prefixAssetsPath(assetsPrefix, staticContent.slice(startIndex, staticContent.length))
+            UIDLUtils.prefixAssetsPath(
+              assetsPrefix,
+              staticContent.slice(startIndex, staticContent.length)
+            )
           acc[styleKey] = {
             type: 'static',
             content: newStyleValue,
@@ -434,7 +432,7 @@ const resolveDependency = (
 
     // ex: PrimaryButton component should be written in a file called primary-button
     const componentName = mappedElement.elementType
-    const componentFileName = camelCaseToDashCase(componentName)
+    const componentFileName = StringUtils.camelCaseToDashCase(componentName)
 
     // concatenate a trailing slash in case it's missing
     if (localDependenciesPrefix[localDependenciesPrefix.length - 1] !== '/') {
diff --git a/packages/teleport-github-gateway/src/index.ts b/packages/teleport-github-gateway/src/index.ts
index 4c197edf..1afd14ea 100644
--- a/packages/teleport-github-gateway/src/index.ts
+++ b/packages/teleport-github-gateway/src/index.ts
@@ -56,4 +56,6 @@ export const createGithubGateway: GithubGatewayFactory = (auth: ServiceAuth = {}
   }
 }
 
+export { GithubFile, RepositoryIdentity, GithubCommitMeta }
+
 export default createGithubGateway()
diff --git a/packages/teleport-plugin-angular-base-component/src/index.ts b/packages/teleport-plugin-angular-base-component/src/index.ts
index ff1dceb2..66297bf9 100644
--- a/packages/teleport-plugin-angular-base-component/src/index.ts
+++ b/packages/teleport-plugin-angular-base-component/src/index.ts
@@ -1,14 +1,17 @@
-import createHTMLTemplateSyntax from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-html'
 import {
   ComponentPluginFactory,
   ComponentPlugin,
   UIDLElementNode,
   UIDLEventHandlerStatement,
+  ChunkType,
+  FileType,
 } from '@teleporthq/teleport-types'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { createComponentDecorator } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { getComponentFileName } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
+import {
+  ASTBuilders,
+  UIDLUtils,
+  StringUtils,
+  createHTMLTemplateSyntax,
+} from '@teleporthq/teleport-shared'
 
 import { generateExportAST } from './utils'
 
@@ -76,9 +79,9 @@ export const createPlugin: ComponentPluginFactory<AngularPluginConfig> = (config
     )
 
     chunks.push({
-      type: CHUNK_TYPE.HAST,
+      type: ChunkType.HAST,
       name: angularTemplateChunkName,
-      fileType: FILE_TYPE.HTML,
+      fileType: FileType.HTML,
       meta: {
         nodesLookup: templateLookup,
       },
@@ -87,15 +90,15 @@ export const createPlugin: ComponentPluginFactory<AngularPluginConfig> = (config
     })
 
     const params = {
-      selector: `app-${camelCaseToDashCase(uidl.name)}`,
-      templateUrl: `${getComponentFileName(uidl)}.${FILE_TYPE.HTML}`,
+      selector: `app-${StringUtils.camelCaseToDashCase(uidl.name)}`,
+      templateUrl: `${UIDLUtils.getComponentFileName(uidl)}.${FileType.HTML}`,
     }
-    const componentDecoratorAST = createComponentDecorator(params)
+    const componentDecoratorAST = ASTBuilders.createComponentDecorator(params)
 
     chunks.push({
-      type: CHUNK_TYPE.AST,
+      type: ChunkType.AST,
       name: componentDecoratorChunkName,
-      fileType: FILE_TYPE.TS,
+      fileType: FileType.TS,
       linkAfter: tsChunkAfter,
       content: componentDecoratorAST,
     })
@@ -126,9 +129,9 @@ export const createPlugin: ComponentPluginFactory<AngularPluginConfig> = (config
     )
 
     chunks.push({
-      type: CHUNK_TYPE.AST,
+      type: ChunkType.AST,
       name: exportClassChunk,
-      fileType: FILE_TYPE.TS,
+      fileType: FileType.TS,
       linkAfter: tsChunkAfter,
       content: exportAST,
     })
diff --git a/packages/teleport-plugin-angular-base-component/src/utils.ts b/packages/teleport-plugin-angular-base-component/src/utils.ts
index 0ac7b65e..d0e6397d 100644
--- a/packages/teleport-plugin-angular-base-component/src/utils.ts
+++ b/packages/teleport-plugin-angular-base-component/src/utils.ts
@@ -1,9 +1,5 @@
 import * as types from '@babel/types'
-import {
-  convertValueToLiteral,
-  getTSAnnotationForType,
-  createStateChangeStatement,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils, ASTBuilders } from '@teleporthq/teleport-shared'
 import {
   UIDLPropDefinition,
   UIDLStateDefinition,
@@ -41,8 +37,8 @@ export const generateExportAST = (
     }
     return t.classProperty(
       t.identifier(propKey),
-      convertValueToLiteral(propDefinitions[propKey].defaultValue),
-      t.tsTypeAnnotation(getTSAnnotationForType(propDefinitions[propKey].type)),
+      ASTUtils.convertValueToLiteral(propDefinitions[propKey].defaultValue),
+      t.tsTypeAnnotation(ASTUtils.getTSAnnotationForType(propDefinitions[propKey].type)),
       [t.decorator(t.callExpression(t.identifier('Input'), []))]
     )
   })
@@ -50,16 +46,16 @@ export const generateExportAST = (
   const propertyDecleration = Object.keys(stateDefinitions).map((stateKey) =>
     t.classProperty(
       t.identifier(stateKey),
-      convertValueToLiteral(stateDefinitions[stateKey].defaultValue),
-      t.tsTypeAnnotation(getTSAnnotationForType(stateDefinitions[stateKey].type))
+      ASTUtils.convertValueToLiteral(stateDefinitions[stateKey].defaultValue),
+      t.tsTypeAnnotation(ASTUtils.getTSAnnotationForType(stateDefinitions[stateKey].type))
     )
   )
 
   const dataDeclaration = Object.keys(dataObject).map((dataKey) => {
     return t.classProperty(
       t.identifier(dataKey),
-      convertValueToLiteral(dataObject[dataKey]),
-      t.tsTypeAnnotation(getTSAnnotationForType(typeof dataObject[dataKey]))
+      ASTUtils.convertValueToLiteral(dataObject[dataKey]),
+      t.tsTypeAnnotation(ASTUtils.getTSAnnotationForType(typeof dataObject[dataKey]))
     )
   })
 
@@ -95,7 +91,7 @@ const createMethodsObject = (
       const astStatement =
         statement.type === 'propCall'
           ? createPropCallStatement(statement, propDefinitions)
-          : createStateChangeStatement(statement)
+          : ASTBuilders.createStateChangeStatement(statement)
 
       if (astStatement) {
         astStatements.push(astStatement)
diff --git a/packages/teleport-plugin-angular-module/src/index.ts b/packages/teleport-plugin-angular-module/src/index.ts
index da92f94a..c7a59765 100644
--- a/packages/teleport-plugin-angular-module/src/index.ts
+++ b/packages/teleport-plugin-angular-module/src/index.ts
@@ -1,8 +1,11 @@
 import * as types from '@babel/types'
-import { extractRoutes } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
+import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 import {
   createRoutesAST,
@@ -61,7 +64,7 @@ export const createPlugin: ComponentPluginFactory<AngularRoutingConfig> = (confi
           dependencies.ComponentsModule = constructRouteForComponentsModule('.')
           dependencies.AppComponent = APP_COMPONENT
 
-          const routes = extractRoutes(uidl)
+          const routes = UIDLUtils.extractRoutes(uidl)
           routesAST = createRoutesAST(routes, stateDefinitions)
           ngModuleAST = createRootModuleDecorator()
           moduleDecoratorAST = createExportModuleAST('AppModule')
@@ -89,7 +92,7 @@ export const createPlugin: ComponentPluginFactory<AngularRoutingConfig> = (confi
           moduleComponents.forEach(
             (component) =>
               (dependencies[`${component}Component`] = constructComponentDependency(
-                camelCaseToDashCase(component)
+                StringUtils.camelCaseToDashCase(component)
               ))
           )
 
@@ -103,8 +106,8 @@ export const createPlugin: ComponentPluginFactory<AngularRoutingConfig> = (confi
     if (routesAST) {
       chunks.push({
         name: moduleChunkName,
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.TS,
+        type: ChunkType.AST,
+        fileType: FileType.TS,
         content: routesAST,
         linkAfter: [importChunkName],
       })
@@ -112,8 +115,8 @@ export const createPlugin: ComponentPluginFactory<AngularRoutingConfig> = (confi
 
     chunks.push({
       name: decoratorChunkName,
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TS,
+      type: ChunkType.AST,
+      fileType: FileType.TS,
       content: [ngModuleAST, moduleDecoratorAST],
       linkAfter: [importChunkName],
     })
diff --git a/packages/teleport-plugin-angular-module/src/utils.ts b/packages/teleport-plugin-angular-module/src/utils.ts
index c7e2e242..160e6e43 100644
--- a/packages/teleport-plugin-angular-module/src/utils.ts
+++ b/packages/teleport-plugin-angular-module/src/utils.ts
@@ -4,8 +4,7 @@ import {
   UIDLConditionalNode,
   UIDLStateDefinition,
 } from '@teleporthq/teleport-types'
-import { dashCaseToUpperCamelCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import { extractPageOptions } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
 
 export const createPageModuleModuleDecorator = (componentName: string, t = types) => {
   const imports: types.ObjectProperty = t.objectProperty(
@@ -111,7 +110,7 @@ export const createRoutesAST = (
   // TODO: Need to generate type annotation for routes variable, currently babel throwing erro
   const routesObject = routes.map((conditionalNode) => {
     const { value: routeKey } = conditionalNode.content
-    const { fileName: pageName, navLink } = extractPageOptions(
+    const { fileName: pageName, navLink } = UIDLUtils.extractPageOptions(
       stateDefinitions.route,
       routeKey.toString()
     )
@@ -121,7 +120,9 @@ export const createRoutesAST = (
       t.objectProperty(
         t.identifier('loadChildren'),
         t.stringLiteral(
-          `./pages/${pageName}/${pageName}.module#${dashCaseToUpperCamelCase(`${pageName}-module`)}`
+          `./pages/${pageName}/${pageName}.module#${StringUtils.dashCaseToUpperCamelCase(
+            `${pageName}-module`
+          )}`
         )
       ),
     ])
diff --git a/packages/teleport-plugin-css-modules/src/index.ts b/packages/teleport-plugin-css-modules/src/index.ts
index 5a9d0744..96372116 100644
--- a/packages/teleport-plugin-css-modules/src/index.ts
+++ b/packages/teleport-plugin-css-modules/src/index.ts
@@ -1,26 +1,17 @@
 import {
-  camelCaseToDashCase,
-  dashCaseToCamelCase,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import {
-  addDynamicAttributeToJSXTag,
-  addAttributeToJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import {
-  traverseElements,
-  splitDynamicAndStaticStyles,
-  cleanupNestedStyles,
-  transformDynamicStyles,
-  getStyleFileName,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import {
-  createCSSClass,
-  createDynamicStyleExpression,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/css-builders'
-import { getContentOfStyleObject } from '@teleporthq/teleport-shared/dist/cjs/utils/jss-utils'
+  StringUtils,
+  ASTUtils,
+  UIDLUtils,
+  StyleBuilders,
+  StyleUtils,
+} from '@teleporthq/teleport-shared'
 
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  FileType,
+  ChunkType,
+} from '@teleporthq/teleport-types'
 
 interface CSSModulesConfig {
   componentChunkName?: string
@@ -68,17 +59,22 @@ export const createPlugin: ComponentPluginFactory<CSSModulesConfig> = (config =
     const astNodesLookup = componentChunk.meta.nodesLookup || {}
     const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
 
-    traverseElements(uidl.node, (element) => {
+    UIDLUtils.traverseElements(uidl.node, (element) => {
       const { style, key } = element
       if (style) {
         const root = astNodesLookup[key]
-        const { staticStyles, dynamicStyles } = splitDynamicAndStaticStyles(style)
+        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
 
         if (Object.keys(staticStyles).length > 0) {
-          const className = camelCaseToDashCase(key)
-          const jsFriendlyClassName = dashCaseToCamelCase(className)
-
-          cssClasses.push(createCSSClass(className, getContentOfStyleObject(staticStyles)))
+          const className = StringUtils.camelCaseToDashCase(key)
+          const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)
+
+          cssClasses.push(
+            StyleBuilders.createCSSClass(
+              className,
+              StyleUtils.getContentOfStyleObject(staticStyles)
+            )
+          )
 
           // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.<className>`
           const classNameIsJSFriendly = className === jsFriendlyClassName
@@ -87,19 +83,19 @@ export const createPlugin: ComponentPluginFactory<CSSModulesConfig> = (config =
               ? `styles.${jsFriendlyClassName}`
               : `styles['${className}']`
 
-          addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
+          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
         }
 
         if (Object.keys(dynamicStyles).length) {
-          const rootStyles = cleanupNestedStyles(dynamicStyles)
+          const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)
 
-          const inlineStyles = transformDynamicStyles(rootStyles, (styleValue) =>
-            createDynamicStyleExpression(styleValue, propsPrefix)
+          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
+            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
           )
 
           // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
           if (Object.keys(inlineStyles).length > 0) {
-            addAttributeToJSXTag(root, 'style', inlineStyles)
+            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
           }
         }
       }
@@ -117,7 +113,7 @@ export const createPlugin: ComponentPluginFactory<CSSModulesConfig> = (config =
      * The name of the file is either in the meta of the component generator
      * or we fallback to the name of the component
      */
-    let cssFileName = getStyleFileName(uidl)
+    let cssFileName = UIDLUtils.getStyleFileName(uidl)
 
     /**
      * In case the moduleExtension flag is passed, the file name should be in the form [fileName].module.css
@@ -130,13 +126,13 @@ export const createPlugin: ComponentPluginFactory<CSSModulesConfig> = (config =
 
     dependencies[styleObjectImportName] = {
       type: 'local',
-      path: `./${cssFileName}.${FILE_TYPE.CSS}`,
+      path: `./${cssFileName}.${FileType.CSS}`,
     }
 
     structure.chunks.push({
       name: styleChunkName,
-      type: CHUNK_TYPE.STRING,
-      fileType: FILE_TYPE.CSS,
+      type: ChunkType.STRING,
+      fileType: FileType.CSS,
       content: cssClasses.join('\n'),
       linkAfter: [],
     })
diff --git a/packages/teleport-plugin-css/src/index.ts b/packages/teleport-plugin-css/src/index.ts
index 654f4821..e8a5b84a 100644
--- a/packages/teleport-plugin-css/src/index.ts
+++ b/packages/teleport-plugin-css/src/index.ts
@@ -1,33 +1,20 @@
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
 import {
-  splitDynamicAndStaticStyles,
-  cleanupNestedStyles,
-  traverseElements,
-  transformDynamicStyles,
-  getStyleFileName,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import {
-  createCSSClass,
-  createDynamicStyleExpression,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/css-builders'
+  StringUtils,
+  UIDLUtils,
+  StyleUtils,
+  StyleBuilders,
+  HASTUtils,
+  ASTUtils,
+} from '@teleporthq/teleport-shared'
 
-import { getContentOfStyleObject } from '@teleporthq/teleport-shared/dist/cjs/utils/jss-utils'
-import {
-  addClassToNode,
-  addAttributeToNode,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/html-utils'
-import {
-  addClassStringOnJSXTag,
-  addAttributeToJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { addPropertyToASTObject } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
 import {
   ComponentPluginFactory,
   ComponentPlugin,
   UIDLDynamicReference,
   UIDLStyleDefinitions,
+  ChunkType,
+  FileType,
 } from '@teleporthq/teleport-types'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 interface CSSPluginConfig {
   chunkName: string
@@ -69,42 +56,44 @@ export const createPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) =>
 
     const jssStylesArray: string[] = []
 
-    traverseElements(node, (element) => {
+    UIDLUtils.traverseElements(node, (element) => {
       const { style, key } = element
 
       if (!style) {
         return
       }
 
-      const { staticStyles, dynamicStyles } = splitDynamicAndStaticStyles(style)
+      const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
       const root = templateLookup[key]
 
       if (Object.keys(staticStyles).length > 0) {
-        const className = camelCaseToDashCase(key)
-        jssStylesArray.push(createCSSClass(className, getContentOfStyleObject(staticStyles)))
+        const className = StringUtils.camelCaseToDashCase(key)
+        jssStylesArray.push(
+          StyleBuilders.createCSSClass(className, StyleUtils.getContentOfStyleObject(staticStyles))
+        )
 
         if (templateStyle === 'html') {
-          addClassToNode(root, className)
+          HASTUtils.addClassToNode(root, className)
         } else {
-          addClassStringOnJSXTag(root, className, classAttributeName)
+          ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
         }
       }
 
       if (Object.keys(dynamicStyles).length > 0) {
-        const rootStyles = cleanupNestedStyles(dynamicStyles)
+        const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)
 
         // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
         if (Object.keys(rootStyles).length > 0) {
           if (templateStyle === 'html') {
             // simple string expression
             const inlineStyles = createDynamicInlineStyle(rootStyles)
-            addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`)
+            HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`)
           } else {
             // jsx object expression
-            const inlineStyles = transformDynamicStyles(rootStyles, (styleValue) =>
-              createDynamicStyleExpression(styleValue, propsPrefix)
+            const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
+              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
             )
-            addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
+            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
           }
         }
       }
@@ -112,9 +101,9 @@ export const createPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) =>
 
     if (jssStylesArray.length > 0) {
       chunks.push({
-        type: CHUNK_TYPE.STRING,
+        type: ChunkType.STRING,
         name: chunkName,
-        fileType: FILE_TYPE.CSS,
+        fileType: FileType.CSS,
         content: jssStylesArray.join('\n'),
         linkAfter: [],
       })
@@ -124,19 +113,21 @@ export const createPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) =>
        * The name of the file is either in the meta of the component generator
        * or we fallback to the name of the component
        */
-      const cssFileName = getStyleFileName(uidl)
+      const cssFileName = UIDLUtils.getStyleFileName(uidl)
 
       if (declareDependency === 'decorator' && componentDecoratorChunk) {
         const decoratorAST = componentDecoratorChunk.content
         const decoratorParam = decoratorAST.expression.arguments[0]
-        addPropertyToASTObject(decoratorParam, 'styleUrls', [`${cssFileName}.${FILE_TYPE.CSS}`])
+        ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
+          `${cssFileName}.${FileType.CSS}`,
+        ])
       }
 
       if (declareDependency === 'import') {
         dependencies.styles = {
           // styles will not be used in this case as we have importJustPath flag set
           type: 'local',
-          path: `./${cssFileName}.${FILE_TYPE.CSS}`,
+          path: `./${cssFileName}.${FileType.CSS}`,
           meta: {
             importJustPath: true,
           },
diff --git a/packages/teleport-plugin-import-statements/src/index.ts b/packages/teleport-plugin-import-statements/src/index.ts
index 3f51de39..6d7f057f 100644
--- a/packages/teleport-plugin-import-statements/src/index.ts
+++ b/packages/teleport-plugin-import-statements/src/index.ts
@@ -1,12 +1,13 @@
-import { createGenericImportStatement } from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
+import { ASTBuilders } from '@teleporthq/teleport-shared'
 import {
   ComponentPluginFactory,
   ComponentPlugin,
   ChunkDefinition,
   UIDLDependency,
   ImportIdentifier,
+  ChunkType,
+  FileType,
 } from '@teleporthq/teleport-types'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 interface ImportPluginConfig {
   importLibsChunkName?: string
@@ -19,7 +20,7 @@ export const createPlugin: ComponentPluginFactory<ImportPluginConfig> = (config)
     importLibsChunkName = 'import-lib',
     importPackagesChunkName = 'import-pack',
     importLocalsChunkName = 'import-local',
-    fileType = FILE_TYPE.JS,
+    fileType = FileType.JS,
   } = config || {}
 
   const importPlugin: ComponentPlugin = async (structure) => {
@@ -78,14 +79,14 @@ const addImportChunk = (
   chunks: ChunkDefinition[],
   dependencies: Record<string, ImportIdentifier[]>,
   newChunkName: string,
-  fileType: string
+  fileType: FileType
 ) => {
   const importASTs = Object.keys(dependencies).map((key) =>
-    createGenericImportStatement(key, dependencies[key])
+    ASTBuilders.createGenericImportStatement(key, dependencies[key])
   )
 
   chunks.push({
-    type: CHUNK_TYPE.AST,
+    type: ChunkType.AST,
     name: newChunkName,
     fileType,
     content: importASTs,
diff --git a/packages/teleport-plugin-jsx-head-config/src/index.ts b/packages/teleport-plugin-jsx-head-config/src/index.ts
index c8a045c2..1d15cd03 100644
--- a/packages/teleport-plugin-jsx-head-config/src/index.ts
+++ b/packages/teleport-plugin-jsx-head-config/src/index.ts
@@ -1,13 +1,6 @@
 import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import {
-  createJSXTag,
-  createSelfClosingJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
+import { ASTBuilders, ASTUtils } from '@teleporthq/teleport-shared'
 import * as types from '@babel/types'
-import {
-  addChildJSXText,
-  addAttributeToJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
 
 interface JSXHeadPluginConfig {
   componentChunkName?: string
@@ -39,16 +32,16 @@ export const createPlugin: ComponentPluginFactory<JSXHeadPluginConfig> = (config
     const headASTTags = []
 
     if (uidl.seo.title) {
-      const titleAST = createJSXTag('title')
-      addChildJSXText(titleAST, uidl.seo.title)
+      const titleAST = ASTBuilders.createJSXTag('title')
+      ASTUtils.addChildJSXText(titleAST, uidl.seo.title)
       headASTTags.push(titleAST)
     }
 
     if (uidl.seo.metaTags) {
       uidl.seo.metaTags.forEach((tag) => {
-        const metaAST = createSelfClosingJSXTag('meta')
+        const metaAST = ASTBuilders.createSelfClosingJSXTag('meta')
         Object.keys(tag).forEach((key) => {
-          addAttributeToJSXTag(metaAST, key, tag[key])
+          ASTUtils.addAttributeToJSXTag(metaAST, key, tag[key])
         })
         headASTTags.push(metaAST)
       })
@@ -58,16 +51,16 @@ export const createPlugin: ComponentPluginFactory<JSXHeadPluginConfig> = (config
       uidl.seo.assets.forEach((asset) => {
         // TODO: Handle other asset types when needed
         if (asset.type === 'canonical') {
-          const canonicalLink = createSelfClosingJSXTag('link')
-          addAttributeToJSXTag(canonicalLink, 'rel', 'canonical')
-          addAttributeToJSXTag(canonicalLink, 'href', asset.path)
+          const canonicalLink = ASTBuilders.createSelfClosingJSXTag('link')
+          ASTUtils.addAttributeToJSXTag(canonicalLink, 'rel', 'canonical')
+          ASTUtils.addAttributeToJSXTag(canonicalLink, 'href', asset.path)
           headASTTags.push(canonicalLink)
         }
       })
     }
 
     if (headASTTags.length > 0) {
-      const headConfigTag = createJSXTag(configTagIdentifier, headASTTags)
+      const headConfigTag = ASTBuilders.createJSXTag(configTagIdentifier, headASTTags)
 
       const rootKey = uidl.node.content.key
       const rootElement = componentChunk.meta.nodesLookup[rootKey] as types.JSXElement
diff --git a/packages/teleport-plugin-jsx-inline-styles/src/index.ts b/packages/teleport-plugin-jsx-inline-styles/src/index.ts
index e145e9d8..e123362e 100644
--- a/packages/teleport-plugin-jsx-inline-styles/src/index.ts
+++ b/packages/teleport-plugin-jsx-inline-styles/src/index.ts
@@ -1,10 +1,4 @@
-import { addAttributeToJSXTag } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { createDynamicStyleExpression } from '@teleporthq/teleport-shared/dist/cjs/builders/css-builders'
-import {
-  cleanupNestedStyles,
-  transformDynamicStyles,
-  traverseElements,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { ASTUtils, StyleBuilders, UIDLUtils } from '@teleporthq/teleport-shared'
 import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
 
 interface InlineStyleConfig {
@@ -26,7 +20,7 @@ export const createPlugin: ComponentPluginFactory<InlineStyleConfig> = (config)
       return structure
     }
 
-    traverseElements(uidl.node, (element) => {
+    UIDLUtils.traverseElements(uidl.node, (element) => {
       const { style, key } = element
 
       if (style && Object.keys(style).length > 0) {
@@ -37,12 +31,12 @@ export const createPlugin: ComponentPluginFactory<InlineStyleConfig> = (config)
         }
 
         // Nested styles are ignored
-        const rootStyles = cleanupNestedStyles(style)
-        const inlineStyles = transformDynamicStyles(rootStyles, (styleValue) =>
-          createDynamicStyleExpression(styleValue, propsPrefix)
+        const rootStyles = UIDLUtils.cleanupNestedStyles(style)
+        const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
+          StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
         )
 
-        addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)
+        ASTUtils.addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)
       }
     })
 
diff --git a/packages/teleport-plugin-jsx-proptypes/src/index.ts b/packages/teleport-plugin-jsx-proptypes/src/index.ts
index a7d288b6..448dd68c 100644
--- a/packages/teleport-plugin-jsx-proptypes/src/index.ts
+++ b/packages/teleport-plugin-jsx-proptypes/src/index.ts
@@ -1,6 +1,10 @@
 import { buildDefaultPropsAst, buildTypesOfPropsAst } from './utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 interface PropTypesConfig {
   componentChunkName?: string
@@ -54,8 +58,8 @@ export const createPlugin: ComponentPluginFactory<PropTypesConfig> = (config) =>
     if (hasDefaultProps) {
       const defaultPropsAst = buildDefaultPropsAst(name, uidl.propDefinitions)
       chunks.push({
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.JS,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
         name: defaultPropsChunkName,
         linkAfter: [componentChunkName],
         content: defaultPropsAst,
@@ -64,8 +68,8 @@ export const createPlugin: ComponentPluginFactory<PropTypesConfig> = (config) =>
     }
 
     chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: typesOfPropsChunkName,
       linkAfter: [componentChunkName],
       content: typesOfPropsAst,
diff --git a/packages/teleport-plugin-jsx-proptypes/src/utils.ts b/packages/teleport-plugin-jsx-proptypes/src/utils.ts
index 2bd67f7a..efd9b6d9 100644
--- a/packages/teleport-plugin-jsx-proptypes/src/utils.ts
+++ b/packages/teleport-plugin-jsx-proptypes/src/utils.ts
@@ -1,8 +1,5 @@
 import * as types from '@babel/types'
-import {
-  objectToObjectExpression,
-  ParsedASTNode,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils, ParsedASTNode } from '@teleporthq/teleport-shared'
 import { UIDLPropDefinition } from '@teleporthq/teleport-types'
 
 export const buildDefaultPropsAst = (
@@ -35,7 +32,7 @@ export const buildDefaultPropsAst = (
     t.identifier('defaultProps')
   )
 
-  const memberExpressionValue = objectToObjectExpression(defaultValuesSearch.values)
+  const memberExpressionValue = ASTUtils.objectToObjectExpression(defaultValuesSearch.values)
 
   const assignmentExpression = t.assignmentExpression('=', memberExpression, memberExpressionValue)
 
@@ -75,7 +72,7 @@ export const buildTypesOfPropsAst = (
     t.identifier('propTypes')
   )
 
-  const memberExpressionValue = objectToObjectExpression(defaultValuesSearch.values)
+  const memberExpressionValue = ASTUtils.objectToObjectExpression(defaultValuesSearch.values)
 
   const assignmentExpression = t.assignmentExpression('=', memberExpression, memberExpressionValue)
 
diff --git a/packages/teleport-plugin-preact-base-component/src/index.ts b/packages/teleport-plugin-preact-base-component/src/index.ts
index 3b4a3940..a787efc3 100644
--- a/packages/teleport-plugin-preact-base-component/src/index.ts
+++ b/packages/teleport-plugin-preact-base-component/src/index.ts
@@ -1,9 +1,12 @@
-import { createDefaultExport } from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-
 import { createClassComponent, createPureComponent } from './utils'
-import createJSXSyntax from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx'
+import { createJSXSyntax, JSXGenerationOptions, ASTBuilders } from '@teleporthq/teleport-shared'
 
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 import {
   DEFAULT_COMPONENT_CHUNK_NAME,
@@ -11,8 +14,6 @@ import {
   DEFAULT_IMPORT_CHUNK_NAME,
   PREACT_COMPONENT_DEPENDENCY,
 } from './constants'
-import { JSXGenerationOptions } from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx/types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 interface PreactPluginConfig {
   componentChunkName: string
@@ -66,8 +67,8 @@ export const createPlugin: ComponentPluginFactory<PreactPluginConfig> = (config)
       : createClassComponent(uidl.name, propDefinitions, stateDefinitions, jsxTagStructure)
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: componentChunkName,
       meta: {
         nodesLookup,
@@ -78,10 +79,10 @@ export const createPlugin: ComponentPluginFactory<PreactPluginConfig> = (config)
     })
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: exportChunkName,
-      content: createDefaultExport(uidl.name),
+      content: ASTBuilders.createDefaultExport(uidl.name),
       linkAfter: [componentChunkName],
     })
 
diff --git a/packages/teleport-plugin-preact-base-component/src/utils.ts b/packages/teleport-plugin-preact-base-component/src/utils.ts
index 6e121916..9be64dc3 100644
--- a/packages/teleport-plugin-preact-base-component/src/utils.ts
+++ b/packages/teleport-plugin-preact-base-component/src/utils.ts
@@ -1,6 +1,6 @@
 import * as types from '@babel/types'
 
-import { convertValueToLiteral } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils } from '@teleporthq/teleport-shared'
 import { UIDLStateDefinition, UIDLPropDefinition } from '@teleporthq/teleport-types'
 
 export const createClassComponent = (
@@ -23,7 +23,7 @@ export const createClassComponent = (
       const stateDefinition = stateDefinitions[stateKey]
       return t.objectProperty(
         t.identifier(stateKey),
-        convertValueToLiteral(stateDefinition.defaultValue)
+        ASTUtils.convertValueToLiteral(stateDefinition.defaultValue)
       )
     })
 
diff --git a/packages/teleport-plugin-react-app-routing/src/index.ts b/packages/teleport-plugin-react-app-routing/src/index.ts
index 0cc4d252..8a611de6 100644
--- a/packages/teleport-plugin-react-app-routing/src/index.ts
+++ b/packages/teleport-plugin-react-app-routing/src/index.ts
@@ -1,21 +1,16 @@
-import {
-  createSelfClosingJSXTag,
-  createFunctionCall,
-  createFunctionalComponent,
-  createDefaultExport,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-import {
-  extractPageOptions,
-  extractRoutes,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { ASTBuilders, UIDLUtils } from '@teleporthq/teleport-shared'
 import {
   registerReactRouterDeps,
   registerPreactRouterDeps,
   constructRouteJSX,
   createRouteRouterTag,
 } from './utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 interface AppRoutingComponentConfig {
   componentChunkName: string
@@ -43,14 +38,14 @@ export const createPlugin: ComponentPluginFactory<AppRoutingComponentConfig> = (
 
     const { stateDefinitions = {} } = uidl
 
-    const routes = extractRoutes(uidl)
+    const routes = UIDLUtils.extractRoutes(uidl)
     const strategy = options.strategy
     const pageDependencyPrefix = options.localDependenciesPrefix || './'
 
     const routeJSXDefinitions = routes.map((conditionalNode) => {
       const { value: routeKey } = conditionalNode.content
 
-      const { fileName: pageName, componentName, navLink } = extractPageOptions(
+      const { fileName: pageName, componentName, navLink } = UIDLUtils.extractPageOptions(
         stateDefinitions.route,
         routeKey.toString()
       )
@@ -77,35 +72,35 @@ export const createPlugin: ComponentPluginFactory<AppRoutingComponentConfig> = (
 
     const rootRouterTag = createRouteRouterTag(flavor, routeJSXDefinitions)
 
-    const pureComponent = createFunctionalComponent(uidl.name, rootRouterTag)
+    const pureComponent = ASTBuilders.createFunctionalComponent(uidl.name, rootRouterTag)
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: componentChunkName,
       content: pureComponent,
       linkAfter: [importChunkName],
     })
 
     if (flavor === 'preact') {
-      const exportJSXApp = createDefaultExport('App')
+      const exportJSXApp = ASTBuilders.createDefaultExport('App')
 
       structure.chunks.push({
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.JS,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
         name: domRenderChunkName,
         content: exportJSXApp,
         linkAfter: [componentChunkName],
       })
     } else {
-      const reactDomBind = createFunctionCall('ReactDOM.render', [
-        createSelfClosingJSXTag(uidl.name),
-        createFunctionCall('document.getElementById', ['app']),
+      const reactDomBind = ASTBuilders.createFunctionCall('ReactDOM.render', [
+        ASTBuilders.createSelfClosingJSXTag(uidl.name),
+        ASTBuilders.createFunctionCall('document.getElementById', ['app']),
       ])
 
       structure.chunks.push({
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.JS,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
         name: domRenderChunkName,
         content: reactDomBind,
         linkAfter: [componentChunkName],
diff --git a/packages/teleport-plugin-react-app-routing/src/utils.ts b/packages/teleport-plugin-react-app-routing/src/utils.ts
index 175cecf6..ae0a736b 100644
--- a/packages/teleport-plugin-react-app-routing/src/utils.ts
+++ b/packages/teleport-plugin-react-app-routing/src/utils.ts
@@ -1,25 +1,17 @@
 import * as types from '@babel/types'
 import { UIDLDependency } from '@teleporthq/teleport-types'
-import {
-  createSelfClosingJSXTag,
-  createJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-import {
-  addChildJSXTag,
-  addAttributeToJSXTag,
-  addDynamicAttributeToJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
+import { ASTBuilders, ASTUtils } from '@teleporthq/teleport-shared'
 
 export const createRouteRouterTag = (flavour: string, routeJSXDefinitions: types.JSXElement[]) => {
-  const routerTag = createJSXTag('Router')
+  const routerTag = ASTBuilders.createJSXTag('Router')
 
   if (flavour === 'preact') {
-    routeJSXDefinitions.forEach((route) => addChildJSXTag(routerTag, route))
+    routeJSXDefinitions.forEach((route) => ASTUtils.addChildJSXTag(routerTag, route))
     return routerTag
   }
-  const divContainer = createJSXTag('div')
-  addChildJSXTag(routerTag, divContainer)
-  routeJSXDefinitions.forEach((route) => addChildJSXTag(divContainer, route))
+  const divContainer = ASTBuilders.createJSXTag('div')
+  ASTUtils.addChildJSXTag(routerTag, divContainer)
+  routeJSXDefinitions.forEach((route) => ASTUtils.addChildJSXTag(divContainer, route))
 
   return routerTag
 }
@@ -30,15 +22,15 @@ export const constructRouteJSX = (flavour: string, componentName: string, path:
 
   if (flavour === 'preact') {
     JSXRoutePrefix = componentName
-    route = createSelfClosingJSXTag(JSXRoutePrefix)
+    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
   } else {
     JSXRoutePrefix = 'Route'
-    route = createSelfClosingJSXTag(JSXRoutePrefix)
-    addAttributeToJSXTag(route, 'exact')
-    addDynamicAttributeToJSXTag(route, 'component', componentName)
+    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
+    ASTUtils.addAttributeToJSXTag(route, 'exact')
+    ASTUtils.addDynamicAttributeToJSXTag(route, 'component', componentName)
   }
 
-  addAttributeToJSXTag(route, 'path', path)
+  ASTUtils.addAttributeToJSXTag(route, 'path', path)
 
   return route
 }
diff --git a/packages/teleport-plugin-react-base-component/src/index.ts b/packages/teleport-plugin-react-base-component/src/index.ts
index bcddc8a1..dae2c220 100644
--- a/packages/teleport-plugin-react-base-component/src/index.ts
+++ b/packages/teleport-plugin-react-base-component/src/index.ts
@@ -1,9 +1,12 @@
-import { createDefaultExport } from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-
 import { createPureComponent } from './utils'
-import createJSXSyntax from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx'
+import { createJSXSyntax, JSXGenerationOptions, ASTBuilders } from '@teleporthq/teleport-shared'
 
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 import {
   DEFAULT_COMPONENT_CHUNK_NAME,
@@ -12,8 +15,6 @@ import {
   REACT_LIBRARY_DEPENDENCY,
   USE_STATE_DEPENDENCY,
 } from './constants'
-import { JSXGenerationOptions } from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx/types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 interface ReactPluginConfig {
   componentChunkName: string
@@ -65,8 +66,8 @@ export const createPlugin: ComponentPluginFactory<ReactPluginConfig> = (config)
     const pureComponent = createPureComponent(uidl.name, stateDefinitions, jsxTagStructure)
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: componentChunkName,
       meta: {
         nodesLookup,
@@ -77,10 +78,10 @@ export const createPlugin: ComponentPluginFactory<ReactPluginConfig> = (config)
     })
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: exportChunkName,
-      content: createDefaultExport(uidl.name),
+      content: ASTBuilders.createDefaultExport(uidl.name),
       linkAfter: [componentChunkName],
     })
 
diff --git a/packages/teleport-plugin-react-base-component/src/utils.ts b/packages/teleport-plugin-react-base-component/src/utils.ts
index 0b20f7e2..c9ce49e9 100644
--- a/packages/teleport-plugin-react-base-component/src/utils.ts
+++ b/packages/teleport-plugin-react-base-component/src/utils.ts
@@ -1,7 +1,6 @@
 import * as types from '@babel/types'
 
-import { convertValueToLiteral } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
-import { capitalize } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
+import { ASTUtils, StringUtils } from '@teleporthq/teleport-shared'
 import { UIDLStateDefinition } from '@teleporthq/teleport-types'
 
 export const createPureComponent = (
@@ -38,14 +37,17 @@ const createReturnExpressionSyntax = (
  * Creates an AST line for defining a single state hook
  */
 const createStateHookAST = (stateKey: string, stateDefinition: UIDLStateDefinition, t = types) => {
-  const defaultValueArgument = convertValueToLiteral(
+  const defaultValueArgument = ASTUtils.convertValueToLiteral(
     stateDefinition.defaultValue,
     stateDefinition.type
   )
 
   return t.variableDeclaration('const', [
     t.variableDeclarator(
-      t.arrayPattern([t.identifier(stateKey), t.identifier(`set${capitalize(stateKey)}`)]),
+      t.arrayPattern([
+        t.identifier(stateKey),
+        t.identifier(`set${StringUtils.capitalize(stateKey)}`),
+      ]),
       t.callExpression(t.identifier('useState'), [defaultValueArgument])
     ),
   ])
diff --git a/packages/teleport-plugin-react-jss/src/index.ts b/packages/teleport-plugin-react-jss/src/index.ts
index e1c1c58e..5a159f6e 100644
--- a/packages/teleport-plugin-react-jss/src/index.ts
+++ b/packages/teleport-plugin-react-jss/src/index.ts
@@ -1,22 +1,17 @@
-import { addDynamicAttributeToJSXTag } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
 import {
+  ASTUtils,
+  ASTBuilders,
+  StringUtils,
+  UIDLUtils,
   ParsedASTNode,
-  objectToObjectExpression,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+} from '@teleporthq/teleport-shared'
 
 import {
-  createConstAssignment,
-  createReactJSSDefaultExport,
-  createArrowFunctionWithMemberExpression,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import {
-  traverseElements,
-  transformDynamicStyles,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 interface JSSConfig {
   styleChunkName?: string
@@ -50,22 +45,22 @@ export const createPlugin: ComponentPluginFactory<JSSConfig> = (config) => {
     const jsxNodesLookup = componentChunk.meta.nodesLookup
     const jssStyleMap: Record<string, any> = {}
 
-    traverseElements(node, (element) => {
+    UIDLUtils.traverseElements(node, (element) => {
       const { style, key } = element
       if (style && Object.keys(style).length > 0) {
         const root = jsxNodesLookup[key]
-        const className = camelCaseToDashCase(key)
-        jssStyleMap[className] = transformDynamicStyles(style, (styleValue) => {
+        const className = StringUtils.camelCaseToDashCase(key)
+        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
           if (styleValue.content.referenceType === 'prop') {
             return new ParsedASTNode(
-              createArrowFunctionWithMemberExpression('props', styleValue.content.id)
+              ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
             )
           }
           throw new Error(
             `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
           )
         })
-        addDynamicAttributeToJSXTag(
+        ASTUtils.addDynamicAttributeToJSXTag(
           root,
           classAttributeName,
           `classes['${className}']`,
@@ -86,24 +81,27 @@ export const createPlugin: ComponentPluginFactory<JSSConfig> = (config) => {
     }
 
     chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: styleChunkName,
       linkAfter: [importChunkName],
-      content: createConstAssignment(jssDeclarationName, objectToObjectExpression(jssStyleMap)),
+      content: ASTBuilders.createConstAssignment(
+        jssDeclarationName,
+        ASTUtils.objectToObjectExpression(jssStyleMap)
+      ),
     })
 
     const exportChunk = chunks.find((chunk) => chunk.name === exportChunkName)
 
-    const exportStatement = createReactJSSDefaultExport(uidl.name, jssDeclarationName)
+    const exportStatement = ASTBuilders.createReactJSSDefaultExport(uidl.name, jssDeclarationName)
 
     if (exportChunk) {
       exportChunk.content = exportStatement
       exportChunk.linkAfter = [importChunkName, styleChunkName]
     } else {
       chunks.push({
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.JS,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
         name: exportChunkName,
         content: exportStatement,
         linkAfter: [importChunkName, styleChunkName],
diff --git a/packages/teleport-plugin-react-styled-components/src/index.ts b/packages/teleport-plugin-react-styled-components/src/index.ts
index 5d88a046..97260187 100644
--- a/packages/teleport-plugin-react-styled-components/src/index.ts
+++ b/packages/teleport-plugin-react-styled-components/src/index.ts
@@ -1,19 +1,11 @@
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { generateStyledComponent, countPropReferences } from './utils'
-import {
-  traverseElements,
-  transformDynamicStyles,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import {
-  dashCaseToUpperCamelCase,
-  dashCaseToCamelCase,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
 import {
-  addDynamicAttributeToJSXTag,
-  addSpreadAttributeToJSXTag,
-  renameJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
+import { generateStyledComponent, countPropReferences } from './utils'
+import { UIDLUtils, StringUtils, ASTUtils } from '@teleporthq/teleport-shared'
 
 interface StyledComponentsConfig {
   componentChunkName: string
@@ -35,44 +27,47 @@ export const createPlugin: ComponentPluginFactory<StyledComponentsConfig> = (con
     const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
     const jssStyleMap: Record<string, any> = {}
 
-    traverseElements(node, (element) => {
+    UIDLUtils.traverseElements(node, (element) => {
       const { style, key, elementType } = element
       if (style && Object.keys(style).length > 0) {
         const root = jsxNodesLookup[key]
-        const className = `${dashCaseToUpperCamelCase(key)}`
+        const className = `${StringUtils.dashCaseToUpperCamelCase(key)}`
         const timesReferred = countPropReferences(style, 0)
 
-        jssStyleMap[className] = transformDynamicStyles(style, (styleValue, attribute) => {
-          if (styleValue.content.referenceType === 'prop') {
-            const dashCaseAttribute = dashCaseToCamelCase(attribute)
-            switch (timesReferred) {
-              case 1:
-                addDynamicAttributeToJSXTag(
-                  root,
-                  dashCaseAttribute,
-                  styleValue.content.id,
-                  propsPrefix
-                )
-                return `\$\{props => props.${dashCaseAttribute}\}`
-              default:
-                return `\$\{props => props.${styleValue.content.id}\}`
+        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(
+          style,
+          (styleValue, attribute) => {
+            if (styleValue.content.referenceType === 'prop') {
+              const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
+              switch (timesReferred) {
+                case 1:
+                  ASTUtils.addDynamicAttributeToJSXTag(
+                    root,
+                    dashCaseAttribute,
+                    styleValue.content.id,
+                    propsPrefix
+                  )
+                  return `\$\{props => props.${dashCaseAttribute}\}`
+                default:
+                  return `\$\{props => props.${styleValue.content.id}\}`
+              }
             }
-          }
 
-          throw new Error(
-            `Error running transformDynamicStyles in reactStyledComponentsPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
-          )
-        })
+            throw new Error(
+              `Error running transformDynamicStyles in reactStyledComponentsPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
+            )
+          }
+        )
 
         if (timesReferred > 1) {
-          addSpreadAttributeToJSXTag(root, propsPrefix)
+          ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix)
         }
 
-        renameJSXTag(root, className)
+        ASTUtils.renameJSXTag(root, className)
 
         const code = {
-          type: CHUNK_TYPE.AST,
-          fileType: FILE_TYPE.JS,
+          type: ChunkType.AST,
+          fileType: FileType.JS,
           name: className,
           linkAfter: [importChunkName],
           content: generateStyledComponent(className, elementType, jssStyleMap[className]),
diff --git a/packages/teleport-plugin-react-styled-components/src/utils.ts b/packages/teleport-plugin-react-styled-components/src/utils.ts
index 0b73da6c..94f8a0a6 100644
--- a/packages/teleport-plugin-react-styled-components/src/utils.ts
+++ b/packages/teleport-plugin-react-styled-components/src/utils.ts
@@ -1,6 +1,5 @@
 import * as t from '@babel/types'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import { stringAsTemplateLiteral } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
+import { ASTUtils, StringUtils } from '@teleporthq/teleport-shared'
 import { UIDLStyleValue } from '@teleporthq/teleport-types'
 
 export const generateStyledComponent = (
@@ -13,7 +12,7 @@ export const generateStyledComponent = (
       t.identifier(name),
       t.taggedTemplateExpression(
         t.memberExpression(t.identifier('styled'), t.identifier(type)),
-        stringAsTemplateLiteral(mapStyles(styles))
+        ASTUtils.stringAsTemplateLiteral(mapStyles(styles))
       )
     ),
   ])
@@ -24,7 +23,7 @@ const mapStyles = (styles: Record<string, any>) => {
   Object.keys(styles).forEach((item) => {
     if (typeof styles[item] === 'string') {
       style = `${style}
-      ${camelCaseToDashCase(item)}: ${styles[item]};`
+      ${StringUtils.camelCaseToDashCase(item)}: ${styles[item]};`
     } else {
       style = `${style}
       ${item} {
diff --git a/packages/teleport-plugin-react-styled-jsx/src/index.ts b/packages/teleport-plugin-react-styled-jsx/src/index.ts
index cc466ea2..a9fde70c 100644
--- a/packages/teleport-plugin-react-styled-jsx/src/index.ts
+++ b/packages/teleport-plugin-react-styled-jsx/src/index.ts
@@ -1,10 +1,4 @@
-import { addClassStringOnJSXTag } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import {
-  transformDynamicStyles,
-  traverseElements,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { createCSSClass } from '@teleporthq/teleport-shared/dist/cjs/builders/css-builders'
+import { ASTUtils, StringUtils, UIDLUtils, StyleBuilders } from '@teleporthq/teleport-shared'
 import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
 import { generateStyledJSXTag } from './utils'
 
@@ -29,13 +23,13 @@ export const createPlugin: ComponentPluginFactory<StyledJSXConfig> = (config) =>
 
     const styleJSXString: string[] = []
 
-    traverseElements(node, (element) => {
+    UIDLUtils.traverseElements(node, (element) => {
       const { style, key } = element
       if (style && Object.keys(style).length > 0) {
         const root = jsxNodesLookup[key]
-        const className = camelCaseToDashCase(key)
+        const className = StringUtils.camelCaseToDashCase(key)
         // Generating the string templates for the dynamic styles
-        const styleRules = transformDynamicStyles(style, (styleValue) => {
+        const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
           if (styleValue.content.referenceType === 'prop') {
             return `\$\{${propsPrefix}.${styleValue.content.id}\}`
           }
@@ -43,8 +37,8 @@ export const createPlugin: ComponentPluginFactory<StyledJSXConfig> = (config) =>
             `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
           )
         })
-        styleJSXString.push(createCSSClass(className, styleRules))
-        addClassStringOnJSXTag(root, className)
+        styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
+        ASTUtils.addClassStringOnJSXTag(root, className)
       }
     })
 
diff --git a/packages/teleport-plugin-react-styled-jsx/src/utils.ts b/packages/teleport-plugin-react-styled-jsx/src/utils.ts
index 3d3585ba..b25e243b 100644
--- a/packages/teleport-plugin-react-styled-jsx/src/utils.ts
+++ b/packages/teleport-plugin-react-styled-jsx/src/utils.ts
@@ -1,20 +1,11 @@
 import * as types from '@babel/types'
-import {
-  stringAsTemplateLiteral,
-  addAttributeToJSXTag,
-  addChildJSXText,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-
-import {
-  createJSXTag,
-  createJSXExpresionContainer,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
+import { ASTUtils, ASTBuilders } from '@teleporthq/teleport-shared'
 
 export const generateStyledJSXTag = (content: string): types.JSXElement => {
-  const templateLiteral = stringAsTemplateLiteral(content)
-  const styleContent = createJSXExpresionContainer(templateLiteral)
-  const styleTag = createJSXTag('style', [styleContent])
-  addChildJSXText(styleTag, '\n') // for better formatting
-  addAttributeToJSXTag(styleTag, 'jsx')
+  const templateLiteral = ASTUtils.stringAsTemplateLiteral(content)
+  const styleContent = ASTBuilders.createJSXExpresionContainer(templateLiteral)
+  const styleTag = ASTBuilders.createJSXTag('style', [styleContent])
+  ASTUtils.addChildJSXText(styleTag, '\n') // for better formatting
+  ASTUtils.addAttributeToJSXTag(styleTag, 'jsx')
   return styleTag
 }
diff --git a/packages/teleport-plugin-stencil-app-routing/src/index.ts b/packages/teleport-plugin-stencil-app-routing/src/index.ts
index 4d369825..e1964ba3 100644
--- a/packages/teleport-plugin-stencil-app-routing/src/index.ts
+++ b/packages/teleport-plugin-stencil-app-routing/src/index.ts
@@ -1,7 +1,10 @@
-import { extractRoutes } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { createComponentDecorator } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
+import { UIDLUtils, ASTBuilders } from '@teleporthq/teleport-shared'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import {
   STENCIL_CORE_DEPENDENCY,
   DEFAULT_COMPONENT_DECORATOR_CHUNK_NAME,
@@ -29,7 +32,7 @@ export const createPlugin: ComponentPluginFactory<StencilRouterConfig> = (config
     dependencies.Component = STENCIL_CORE_DEPENDENCY
     dependencies.h = STENCIL_CORE_DEPENDENCY
 
-    const routes = extractRoutes(uidl)
+    const routes = UIDLUtils.extractRoutes(uidl)
     const routeDefinitions = uidl.stateDefinitions.route
 
     /* The name should be injected only with AppRoot only then it acts as entry point,
@@ -38,12 +41,12 @@ export const createPlugin: ComponentPluginFactory<StencilRouterConfig> = (config
       tag: 'app-root',
       shadow: true,
     }
-    const decoratorAST = createComponentDecorator(params)
+    const decoratorAST = ASTBuilders.createComponentDecorator(params)
 
     chunks.push({
       name: componentDecoratorChunkName,
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       content: [decoratorAST],
       linkAfter: [importChunkName],
     })
@@ -52,8 +55,8 @@ export const createPlugin: ComponentPluginFactory<StencilRouterConfig> = (config
 
     chunks.push({
       name: componentChunkName,
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       content: classDeclarationAST,
       linkAfter: [componentDecoratorChunkName],
     })
diff --git a/packages/teleport-plugin-stencil-app-routing/src/utils.ts b/packages/teleport-plugin-stencil-app-routing/src/utils.ts
index c8bd836d..6aedb1d1 100644
--- a/packages/teleport-plugin-stencil-app-routing/src/utils.ts
+++ b/packages/teleport-plugin-stencil-app-routing/src/utils.ts
@@ -1,11 +1,5 @@
 import * as types from '@babel/types'
-import { createJSXTag } from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
-import {
-  addChildJSXTag,
-  addAttributeToJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { extractPageOptions } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
+import { ASTBuilders, ASTUtils, UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
 import { UIDLStateDefinition, UIDLConditionalNode } from '@teleporthq/teleport-types'
 
 export const createClassDeclaration = (
@@ -13,27 +7,31 @@ export const createClassDeclaration = (
   routeDefinitions: UIDLStateDefinition,
   t = types
 ) => {
-  const stencilRouterTag = createJSXTag('stencil-router')
-  const stencilRouteSwitchTag = createJSXTag('stencil-route-switch')
-  addChildJSXTag(stencilRouterTag, stencilRouteSwitchTag)
+  const stencilRouterTag = ASTBuilders.createJSXTag('stencil-router')
+  const stencilRouteSwitchTag = ASTBuilders.createJSXTag('stencil-route-switch')
+  ASTUtils.addChildJSXTag(stencilRouterTag, stencilRouteSwitchTag)
 
   routes.forEach((routeNode) => {
     const pageKey = routeNode.content.value.toString()
-    const { componentName, navLink } = extractPageOptions(routeDefinitions, pageKey)
+    const { componentName, navLink } = UIDLUtils.extractPageOptions(routeDefinitions, pageKey)
 
-    const stencilRouteTag = createJSXTag('stencil-route')
-    addAttributeToJSXTag(stencilRouteTag, 'url', navLink)
+    const stencilRouteTag = ASTBuilders.createJSXTag('stencil-route')
+    ASTUtils.addAttributeToJSXTag(stencilRouteTag, 'url', navLink)
     if (navLink === '/') {
-      addAttributeToJSXTag(stencilRouteTag, 'exact', true)
+      ASTUtils.addAttributeToJSXTag(stencilRouteTag, 'exact', true)
     }
-    addAttributeToJSXTag(stencilRouteTag, 'component', `app-${camelCaseToDashCase(componentName)}`)
-    addChildJSXTag(stencilRouteSwitchTag, stencilRouteTag)
+    ASTUtils.addAttributeToJSXTag(
+      stencilRouteTag,
+      'component',
+      `app-${StringUtils.camelCaseToDashCase(componentName)}`
+    )
+    ASTUtils.addChildJSXTag(stencilRouteSwitchTag, stencilRouteTag)
   })
 
-  const mainTag = createJSXTag('main')
-  addChildJSXTag(mainTag, stencilRouterTag)
-  const divTag = createJSXTag('div')
-  addChildJSXTag(divTag, mainTag)
+  const mainTag = ASTBuilders.createJSXTag('main')
+  ASTUtils.addChildJSXTag(mainTag, stencilRouterTag)
+  const divTag = ASTBuilders.createJSXTag('div')
+  ASTUtils.addChildJSXTag(divTag, mainTag)
 
   const returnAST = divTag as types.JSXElement
 
diff --git a/packages/teleport-plugin-stencil-base-component/src/index.ts b/packages/teleport-plugin-stencil-base-component/src/index.ts
index df1f0442..99aa26eb 100644
--- a/packages/teleport-plugin-stencil-base-component/src/index.ts
+++ b/packages/teleport-plugin-stencil-base-component/src/index.ts
@@ -1,8 +1,16 @@
 import { createClassDeclaration } from './utils'
-import { createComponentDecorator } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import createJSXSyntax from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx'
-import { JSXGenerationOptions } from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-jsx/types'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
+import {
+  createJSXSyntax,
+  JSXGenerationOptions,
+  ASTBuilders,
+  StringUtils,
+} from '@teleporthq/teleport-shared'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 import {
   DEFAULT_COMPONENT_CHUNK_NAME,
@@ -10,8 +18,6 @@ import {
   DEFAULT_COMPONENT_DECORATOR_CHUNK_NAME,
   STENCIL_CORE_DEPENDENCY,
 } from './constants'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { camelCaseToDashCase } from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
 
 interface StencilPluginConfig {
   componentChunkName: string
@@ -61,7 +67,7 @@ export const createPlugin: ComponentPluginFactory<StencilPluginConfig> = (config
       dependencyHandling: 'ignore',
       stateHandling: 'mutation',
       slotHandling: 'native',
-      customElementTag: (name: string) => `app-${camelCaseToDashCase(name)}`,
+      customElementTag: (name: string) => `app-${StringUtils.camelCaseToDashCase(name)}`,
     }
 
     const jsxTagStructure = createJSXSyntax(uidl.node, jsxParams, jsxOptions)
@@ -73,15 +79,15 @@ export const createPlugin: ComponentPluginFactory<StencilPluginConfig> = (config
     )
 
     const params = {
-      tag: `app-${camelCaseToDashCase(uidl.name)}`,
+      tag: `app-${StringUtils.camelCaseToDashCase(uidl.name)}`,
       shadow: true,
     }
 
-    const decoratorAST = createComponentDecorator(params)
+    const decoratorAST = ASTBuilders.createComponentDecorator(params)
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       name: componentDecoratorChunkName,
       meta: {
         nodesLookup,
@@ -91,8 +97,8 @@ export const createPlugin: ComponentPluginFactory<StencilPluginConfig> = (config
     })
 
     structure.chunks.push({
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       name: componentChunkName,
       meta: {
         nodesLookup,
diff --git a/packages/teleport-plugin-stencil-base-component/src/utils.ts b/packages/teleport-plugin-stencil-base-component/src/utils.ts
index 9a429d4a..4c2903bb 100644
--- a/packages/teleport-plugin-stencil-base-component/src/utils.ts
+++ b/packages/teleport-plugin-stencil-base-component/src/utils.ts
@@ -1,9 +1,6 @@
 import * as types from '@babel/types'
 
-import {
-  convertValueToLiteral,
-  getTSAnnotationForType,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils } from '@teleporthq/teleport-shared'
 import { UIDLStateDefinition, UIDLPropDefinition } from '@teleporthq/teleport-types'
 
 export const createClassDeclaration = (
@@ -16,8 +13,8 @@ export const createClassDeclaration = (
   const propDeclaration = Object.keys(propDefinitions).map((propKey) =>
     t.classProperty(
       t.identifier(propKey),
-      convertValueToLiteral(propDefinitions[propKey].defaultValue),
-      types.tsTypeAnnotation(getTSAnnotationForType(propDefinitions[propKey].type)),
+      ASTUtils.convertValueToLiteral(propDefinitions[propKey].defaultValue),
+      types.tsTypeAnnotation(ASTUtils.getTSAnnotationForType(propDefinitions[propKey].type)),
       [t.decorator(t.callExpression(t.identifier('Prop'), []))]
     )
   )
@@ -25,8 +22,8 @@ export const createClassDeclaration = (
   const stateDeclaration = Object.keys(stateDefinitions).map((stateKey) =>
     t.classProperty(
       t.identifier(stateKey),
-      convertValueToLiteral(stateDefinitions[stateKey].defaultValue),
-      t.tsTypeAnnotation(getTSAnnotationForType(stateDefinitions[stateKey].type)),
+      ASTUtils.convertValueToLiteral(stateDefinitions[stateKey].defaultValue),
+      t.tsTypeAnnotation(ASTUtils.getTSAnnotationForType(stateDefinitions[stateKey].type)),
       [t.decorator(t.callExpression(t.identifier('State'), []))]
     )
   )
diff --git a/packages/teleport-plugin-vue-app-routing/src/index.ts b/packages/teleport-plugin-vue-app-routing/src/index.ts
index acdee954..1942b8c5 100644
--- a/packages/teleport-plugin-vue-app-routing/src/index.ts
+++ b/packages/teleport-plugin-vue-app-routing/src/index.ts
@@ -1,10 +1,11 @@
 import * as t from '@babel/types'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 import {
-  extractPageOptions,
-  extractRoutes,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+  ComponentPluginFactory,
+  ComponentPlugin,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 
 interface VueRouterConfig {
   codeChunkName: string
@@ -38,7 +39,7 @@ export const createPlugin: ComponentPluginFactory<VueRouterConfig> = (config) =>
       t.callExpression(t.identifier('Vue.use'), [t.identifier('Meta')])
     )
 
-    const routes = extractRoutes(uidl)
+    const routes = UIDLUtils.extractRoutes(uidl)
     const routeDefinitions = uidl.stateDefinitions.route
     const pageDependencyPrefix = options.localDependenciesPrefix || './'
 
@@ -56,7 +57,10 @@ export const createPlugin: ComponentPluginFactory<VueRouterConfig> = (config) =>
 
     const routesAST = routes.map((routeNode) => {
       const pageKey = routeNode.content.value.toString()
-      const { fileName, componentName, navLink } = extractPageOptions(routeDefinitions, pageKey)
+      const { fileName, componentName, navLink } = UIDLUtils.extractPageOptions(
+        routeDefinitions,
+        pageKey
+      )
 
       dependencies[componentName] = {
         type: 'local',
@@ -82,8 +86,8 @@ export const createPlugin: ComponentPluginFactory<VueRouterConfig> = (config) =>
     chunks.push({
       name: codeChunkName,
       linkAfter: [importChunkName],
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       content: [routerDeclaration, metaDeclaration, exportStatement],
     })
 
diff --git a/packages/teleport-plugin-vue-base-component/src/index.ts b/packages/teleport-plugin-vue-base-component/src/index.ts
index 4f494063..74594bbe 100644
--- a/packages/teleport-plugin-vue-base-component/src/index.ts
+++ b/packages/teleport-plugin-vue-base-component/src/index.ts
@@ -1,7 +1,11 @@
 import { generateVueComponentJS, extractStateObject } from './utils'
-import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import createHTMLTemplateSyntax from '@teleporthq/teleport-shared/dist/cjs/node-handlers/node-to-html'
+import {
+  ComponentPluginFactory,
+  ComponentPlugin,
+  FileType,
+  ChunkType,
+} from '@teleporthq/teleport-types'
+import { createHTMLTemplateSyntax } from '@teleporthq/teleport-shared'
 
 import {
   DEFAULT_VUE_TEMPLATE_CHUNK_NAME,
@@ -53,9 +57,9 @@ export const createPlugin: ComponentPluginFactory<VueComponentConfig> = (config)
     )
 
     chunks.push({
-      type: CHUNK_TYPE.HAST,
+      type: ChunkType.HAST,
       name: vueTemplateChunkName,
-      fileType: FILE_TYPE.HTML,
+      fileType: FileType.HTML,
       meta: {
         nodesLookup: templateLookup,
       },
@@ -75,9 +79,9 @@ export const createPlugin: ComponentPluginFactory<VueComponentConfig> = (config)
     )
 
     chunks.push({
-      type: CHUNK_TYPE.AST,
+      type: ChunkType.AST,
       name: vueJSChunkName,
-      fileType: FILE_TYPE.JS,
+      fileType: FileType.JS,
       linkAfter: jsChunkAfter,
       content: jsContent,
     })
diff --git a/packages/teleport-plugin-vue-base-component/src/utils.ts b/packages/teleport-plugin-vue-base-component/src/utils.ts
index 121a50f8..67aa4bf6 100644
--- a/packages/teleport-plugin-vue-base-component/src/utils.ts
+++ b/packages/teleport-plugin-vue-base-component/src/utils.ts
@@ -1,11 +1,6 @@
 import * as types from '@babel/types'
 
-import {
-  ParsedASTNode,
-  convertValueToLiteral,
-  objectToObjectExpression,
-  createStateChangeStatement,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils, ASTBuilders, ParsedASTNode } from '@teleporthq/teleport-shared'
 import {
   UIDLPropDefinition,
   UIDLStateDefinition,
@@ -31,7 +26,7 @@ export const generateVueComponentJS = (
 
   if (uidl.propDefinitions) {
     const props = createVuePropsDefinition(uidl.propDefinitions)
-    const propsAST = objectToObjectExpression(props)
+    const propsAST = ASTUtils.objectToObjectExpression(props)
     vueObjectProperties.push(t.objectProperty(t.identifier('props'), propsAST))
   }
 
@@ -50,7 +45,7 @@ export const generateVueComponentJS = (
   }
 
   if (Object.keys(dataObject).length > 0) {
-    const dataAST = objectToObjectExpression(dataObject)
+    const dataAST = ASTUtils.objectToObjectExpression(dataObject)
     vueObjectProperties.push(
       t.objectMethod(
         'method',
@@ -116,7 +111,9 @@ const createVuePropsDefinition = (
     if (defaultValue !== undefined) {
       defaultPropValue =
         type === 'array' || type === 'object'
-          ? new ParsedASTNode(t.arrowFunctionExpression([], convertValueToLiteral(defaultValue)))
+          ? new ParsedASTNode(
+              t.arrowFunctionExpression([], ASTUtils.convertValueToLiteral(defaultValue))
+            )
           : defaultValue
     }
 
@@ -138,7 +135,7 @@ const createMethodsObject = (
       const astStatement =
         statement.type === 'propCall'
           ? createPropCallStatement(statement, propDefinitions)
-          : createStateChangeStatement(statement)
+          : ASTBuilders.createStateChangeStatement(statement)
 
       if (astStatement) {
         astStatements.push(astStatement)
@@ -171,7 +168,7 @@ export const createPropCallStatement = (
   return t.expressionStatement(
     t.callExpression(t.identifier('this.$emit'), [
       t.stringLiteral(propFunctionKey),
-      ...args.map((arg) => convertValueToLiteral(arg)),
+      ...args.map((arg) => ASTUtils.convertValueToLiteral(arg)),
     ])
   )
 }
diff --git a/packages/teleport-plugin-vue-head-config/src/index.ts b/packages/teleport-plugin-vue-head-config/src/index.ts
index b70d9e45..79349a0a 100644
--- a/packages/teleport-plugin-vue-head-config/src/index.ts
+++ b/packages/teleport-plugin-vue-head-config/src/index.ts
@@ -1,6 +1,6 @@
 import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types'
 import * as types from '@babel/types'
-import { objectToObjectExpression } from '@teleporthq/teleport-shared/dist/cjs/utils/ast-js-utils'
+import { ASTUtils } from '@teleporthq/teleport-shared'
 
 interface VueMetaPluginConfig {
   vueJSChunkName?: string
@@ -44,7 +44,10 @@ export const createPlugin: ComponentPluginFactory<VueMetaPluginConfig> = (config
     if (Object.keys(headObject).length > 0) {
       const exportObjectAST = componentChunk.content.declaration as types.ObjectExpression
       exportObjectAST.properties.push(
-        types.objectProperty(types.identifier(metaObjectKey), objectToObjectExpression(headObject))
+        types.objectProperty(
+          types.identifier(metaObjectKey),
+          ASTUtils.objectToObjectExpression(headObject)
+        )
       )
     }
 
diff --git a/packages/teleport-postprocessor-prettier-html/src/index.ts b/packages/teleport-postprocessor-prettier-html/src/index.ts
index c9061953..ccd0b8c9 100644
--- a/packages/teleport-postprocessor-prettier-html/src/index.ts
+++ b/packages/teleport-postprocessor-prettier-html/src/index.ts
@@ -3,8 +3,8 @@ import { format } from 'prettier/standalone'
 import parserHTML from 'prettier/parser-html'
 import parserPostCSS from 'prettier/parser-postcss'
 
-import { PRETTIER_CONFIG, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { PostProcessor, PrettierFormatOptions } from '@teleporthq/teleport-types'
+import { Constants } from '@teleporthq/teleport-shared'
+import { PostProcessor, PrettierFormatOptions, FileType } from '@teleporthq/teleport-types'
 
 interface PostProcessorFactoryOptions {
   fileType?: string
@@ -12,8 +12,8 @@ interface PostProcessorFactoryOptions {
 }
 
 export const createPostProcessor = (options: PostProcessorFactoryOptions = {}) => {
-  const fileType = options.fileType || FILE_TYPE.HTML
-  const formatOptions = { ...PRETTIER_CONFIG, ...options.formatOptions }
+  const fileType = options.fileType || FileType.HTML
+  const formatOptions = { ...Constants.PRETTIER_CONFIG, ...options.formatOptions }
 
   const processor: PostProcessor = (codeChunks) => {
     if (codeChunks[fileType]) {
diff --git a/packages/teleport-postprocessor-prettier-js/src/index.ts b/packages/teleport-postprocessor-prettier-js/src/index.ts
index f9506724..90b107f2 100644
--- a/packages/teleport-postprocessor-prettier-js/src/index.ts
+++ b/packages/teleport-postprocessor-prettier-js/src/index.ts
@@ -3,8 +3,8 @@ import { format } from 'prettier/standalone'
 import parserBabylon from 'prettier/parser-babylon'
 import parserPostCSS from 'prettier/parser-postcss'
 
-import { PRETTIER_CONFIG, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { PostProcessor, PrettierFormatOptions } from '@teleporthq/teleport-types'
+import { Constants } from '@teleporthq/teleport-shared'
+import { PostProcessor, PrettierFormatOptions, FileType } from '@teleporthq/teleport-types'
 
 interface PostProcessorFactoryOptions {
   fileType?: string
@@ -12,8 +12,8 @@ interface PostProcessorFactoryOptions {
 }
 
 export const createPostProcessor = (options: PostProcessorFactoryOptions = {}) => {
-  const fileType = options.fileType || FILE_TYPE.JS
-  const formatOptions = { ...PRETTIER_CONFIG, ...options.formatOptions }
+  const fileType = options.fileType || FileType.JS
+  const formatOptions = { ...Constants.PRETTIER_CONFIG, ...options.formatOptions }
 
   const processor: PostProcessor = (codeChunks) => {
     if (codeChunks[fileType]) {
diff --git a/packages/teleport-postprocessor-vue-file/src/index.ts b/packages/teleport-postprocessor-vue-file/src/index.ts
index b6da7a95..48cd25f0 100644
--- a/packages/teleport-postprocessor-vue-file/src/index.ts
+++ b/packages/teleport-postprocessor-vue-file/src/index.ts
@@ -1,9 +1,5 @@
-import { PostProcessor } from '@teleporthq/teleport-types'
-import {
-  removeLastEmptyLine,
-  addSpacesToEachLine,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { PostProcessor, FileType } from '@teleporthq/teleport-types'
+import { StringUtils } from '@teleporthq/teleport-shared'
 
 export const createPostProcessor = () => {
   const processor: PostProcessor = (codeChunks) => {
@@ -11,28 +7,28 @@ export const createPostProcessor = () => {
     let cssCode
     let htmlCode
 
-    if (codeChunks[FILE_TYPE.HTML]) {
-      htmlCode = removeLastEmptyLine(codeChunks[FILE_TYPE.HTML])
+    if (codeChunks[FileType.HTML]) {
+      htmlCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.HTML])
     } else {
       throw new Error('No code chunk of type HTML found, vue file concatenation aborded')
     }
 
-    if (codeChunks[FILE_TYPE.JS]) {
-      jsCode = removeLastEmptyLine(codeChunks[FILE_TYPE.JS])
+    if (codeChunks[FileType.JS]) {
+      jsCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.JS])
     } else {
       throw new Error('No code chunk of type JS found, vue file concatenation aborded')
     }
 
     // if no CSS, skip the <style></style>
-    if (codeChunks[FILE_TYPE.CSS]) {
-      cssCode = removeLastEmptyLine(codeChunks[FILE_TYPE.CSS])
+    if (codeChunks[FileType.CSS]) {
+      cssCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.CSS])
     }
 
-    const formattedHTMLCode = addSpacesToEachLine(' '.repeat(2), htmlCode)
+    const formattedHTMLCode = StringUtils.addSpacesToEachLine(' '.repeat(2), htmlCode)
     const vueCode = buildVueFile(formattedHTMLCode, jsCode, cssCode)
 
     return {
-      [FILE_TYPE.VUE]: vueCode,
+      [FileType.VUE]: vueCode,
     }
   }
 
diff --git a/packages/teleport-project-generator-angular/src/index.ts b/packages/teleport-project-generator-angular/src/index.ts
index 4b695038..f92735c5 100644
--- a/packages/teleport-project-generator-angular/src/index.ts
+++ b/packages/teleport-project-generator-angular/src/index.ts
@@ -3,8 +3,7 @@ import { createAngularComponentGenerator } from '@teleporthq/teleport-component-
 import { createPostProcessor } from '@teleporthq/teleport-postprocessor-prettier-js'
 import { createComponentGenerator } from '@teleporthq/teleport-component-generator'
 import { createProjectGenerator } from '@teleporthq/teleport-project-generator'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { Mapping } from '@teleporthq/teleport-types'
+import { Mapping, FileType } from '@teleporthq/teleport-types'
 
 import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'
 import { createPlugin as createImportPlugin } from '@teleporthq/teleport-plugin-import-statements'
@@ -14,8 +13,8 @@ import AngularProjectMapping from './angular-mapping.json'
 import AngularTemplate from './project-template'
 
 const createAngularProjectGenerator = () => {
-  const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TS })
-  const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TS })
+  const prettierJS = createPostProcessor({ fileType: FileType.TS })
+  const importStatementsPlugin = createImportPlugin({ fileType: FileType.TS })
 
   const rootModuleGeneratorAngular = createModuleGenerator({ moduleType: 'root' })
   const componentModuleGeneratorAngular = createModuleGenerator({ moduleType: 'component' })
diff --git a/packages/teleport-project-generator-next/src/utils.ts b/packages/teleport-project-generator-next/src/utils.ts
index 7a6af819..7859bf42 100644
--- a/packages/teleport-project-generator-next/src/utils.ts
+++ b/packages/teleport-project-generator-next/src/utils.ts
@@ -1,115 +1,117 @@
-import {
-  addAttributeToJSXTag,
-  addChildJSXTag,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/ast-jsx-utils'
-import { createJSXTag } from '@teleporthq/teleport-shared/dist/cjs/builders/ast-builders'
+import { ASTUtils, ASTBuilders, UIDLUtils } from '@teleporthq/teleport-shared'
 
 import * as types from '@babel/types'
 
-import { prefixAssetsPath } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import { ProjectUIDL, ChunkDefinition, EntryFileOptions } from '@teleporthq/teleport-types'
+import {
+  ProjectUIDL,
+  ChunkDefinition,
+  EntryFileOptions,
+  FileType,
+  ChunkType,
+} from '@teleporthq/teleport-types'
 
 export const createDocumentFileChunks = (uidl: ProjectUIDL, options: EntryFileOptions) => {
   const { settings, meta, assets, manifest } = uidl.globals
 
-  const htmlNode = createJSXTag('html')
-  const headNode = createJSXTag('Head')
-  const bodyNode = createJSXTag('body')
+  const htmlNode = ASTBuilders.createJSXTag('html')
+  const headNode = ASTBuilders.createJSXTag('Head')
+  const bodyNode = ASTBuilders.createJSXTag('body')
 
-  const mainNode = createJSXTag('Main')
-  const nextScriptNode = createJSXTag('NextScript')
-  addChildJSXTag(bodyNode, mainNode)
-  addChildJSXTag(bodyNode, nextScriptNode)
+  const mainNode = ASTBuilders.createJSXTag('Main')
+  const nextScriptNode = ASTBuilders.createJSXTag('NextScript')
+  ASTUtils.addChildJSXTag(bodyNode, mainNode)
+  ASTUtils.addChildJSXTag(bodyNode, nextScriptNode)
 
-  addChildJSXTag(htmlNode, headNode)
-  addChildJSXTag(htmlNode, bodyNode)
+  ASTUtils.addChildJSXTag(htmlNode, headNode)
+  ASTUtils.addChildJSXTag(htmlNode, bodyNode)
 
   if (settings.language) {
-    addAttributeToJSXTag(htmlNode, 'lang', settings.language)
+    ASTUtils.addAttributeToJSXTag(htmlNode, 'lang', settings.language)
   }
 
   // NOTE: Title is added in per page, not in the layout file
 
   if (manifest) {
-    const linkTag = createJSXTag('link')
-    addAttributeToJSXTag(linkTag, 'rel', 'manifest')
-    addAttributeToJSXTag(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
-    addChildJSXTag(headNode, linkTag)
+    const linkTag = ASTBuilders.createJSXTag('link')
+    ASTUtils.addAttributeToJSXTag(linkTag, 'rel', 'manifest')
+    ASTUtils.addAttributeToJSXTag(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
+    ASTUtils.addChildJSXTag(headNode, linkTag)
   }
 
   meta.forEach((metaItem) => {
-    const metaTag = createJSXTag('meta')
+    const metaTag = ASTBuilders.createJSXTag('meta')
     Object.keys(metaItem).forEach((key) => {
-      const metaValue = prefixAssetsPath(options.assetsPrefix, metaItem[key])
-      addAttributeToJSXTag(metaTag, key, metaValue)
+      const metaValue = UIDLUtils.prefixAssetsPath(options.assetsPrefix, metaItem[key])
+      ASTUtils.addAttributeToJSXTag(metaTag, key, metaValue)
     })
-    addChildJSXTag(headNode, metaTag)
+    ASTUtils.addChildJSXTag(headNode, metaTag)
   })
 
   assets.forEach((asset) => {
-    const assetPath = prefixAssetsPath(options.assetsPrefix, asset.path)
+    const assetPath = UIDLUtils.prefixAssetsPath(options.assetsPrefix, asset.path)
 
     // link canonical for SEO
     if (asset.type === 'canonical' && assetPath) {
-      const linkTag = createJSXTag('link')
-      addAttributeToJSXTag(linkTag, 'rel', 'canonical')
-      addAttributeToJSXTag(linkTag, 'href', assetPath)
-      addChildJSXTag(headNode, linkTag)
+      const linkTag = ASTBuilders.createJSXTag('link')
+      ASTUtils.addAttributeToJSXTag(linkTag, 'rel', 'canonical')
+      ASTUtils.addAttributeToJSXTag(linkTag, 'href', assetPath)
+      ASTUtils.addChildJSXTag(headNode, linkTag)
     }
 
     // link stylesheet (external css, font)
     if ((asset.type === 'style' || asset.type === 'font') && assetPath) {
-      const linkTag = createJSXTag('link')
-      addAttributeToJSXTag(linkTag, 'rel', 'stylesheet')
-      addAttributeToJSXTag(linkTag, 'href', assetPath)
-      addChildJSXTag(headNode, linkTag)
+      const linkTag = ASTBuilders.createJSXTag('link')
+      ASTUtils.addAttributeToJSXTag(linkTag, 'rel', 'stylesheet')
+      ASTUtils.addAttributeToJSXTag(linkTag, 'href', assetPath)
+      ASTUtils.addChildJSXTag(headNode, linkTag)
     }
 
     // inline style
     if (asset.type === 'style' && asset.content) {
-      const styleTag = createJSXTag('style')
-      addAttributeToJSXTag(styleTag, 'dangerouslySetInnerHTML', { __html: asset.content })
-      addChildJSXTag(headNode, styleTag)
+      const styleTag = ASTBuilders.createJSXTag('style')
+      ASTUtils.addAttributeToJSXTag(styleTag, 'dangerouslySetInnerHTML', { __html: asset.content })
+      ASTUtils.addChildJSXTag(headNode, styleTag)
     }
 
     // script (external or inline)
     if (asset.type === 'script') {
-      const scriptTag = createJSXTag('script')
-      addAttributeToJSXTag(scriptTag, 'type', 'text/javascript')
+      const scriptTag = ASTBuilders.createJSXTag('script')
+      ASTUtils.addAttributeToJSXTag(scriptTag, 'type', 'text/javascript')
       if (assetPath) {
-        addAttributeToJSXTag(scriptTag, 'src', assetPath)
+        ASTUtils.addAttributeToJSXTag(scriptTag, 'src', assetPath)
         if (asset.options && asset.options.defer) {
-          addAttributeToJSXTag(scriptTag, 'defer', true)
+          ASTUtils.addAttributeToJSXTag(scriptTag, 'defer', true)
         }
         if (asset.options && asset.options.async) {
-          addAttributeToJSXTag(scriptTag, 'async', true)
+          ASTUtils.addAttributeToJSXTag(scriptTag, 'async', true)
         }
       } else if (asset.content) {
-        addAttributeToJSXTag(scriptTag, 'dangerouslySetInnerHTML', { __html: asset.content })
+        ASTUtils.addAttributeToJSXTag(scriptTag, 'dangerouslySetInnerHTML', {
+          __html: asset.content,
+        })
       }
 
       if (asset.options && asset.options.target === 'body') {
-        addChildJSXTag(bodyNode, scriptTag)
+        ASTUtils.addChildJSXTag(bodyNode, scriptTag)
       } else {
-        addChildJSXTag(headNode, scriptTag)
+        ASTUtils.addChildJSXTag(headNode, scriptTag)
       }
     }
 
     // icon
     if (asset.type === 'icon' && assetPath) {
-      const iconTag = createJSXTag('link')
-      addAttributeToJSXTag(iconTag, 'rel', 'shortcut icon')
-      addAttributeToJSXTag(iconTag, 'href', assetPath)
+      const iconTag = ASTBuilders.createJSXTag('link')
+      ASTUtils.addAttributeToJSXTag(iconTag, 'rel', 'shortcut icon')
+      ASTUtils.addAttributeToJSXTag(iconTag, 'href', assetPath)
 
       if (asset.options && asset.options.iconType) {
-        addAttributeToJSXTag(iconTag, 'type', asset.options.iconType)
+        ASTUtils.addAttributeToJSXTag(iconTag, 'type', asset.options.iconType)
       }
       if (asset.options && asset.options.iconSizes) {
-        addAttributeToJSXTag(iconTag, 'sizes', asset.options.iconSizes)
+        ASTUtils.addAttributeToJSXTag(iconTag, 'sizes', asset.options.iconSizes)
       }
 
-      addChildJSXTag(headNode, iconTag)
+      ASTUtils.addChildJSXTag(headNode, iconTag)
     }
   })
 
@@ -118,11 +120,11 @@ export const createDocumentFileChunks = (uidl: ProjectUIDL, options: EntryFileOp
   const fileAST = createDocumentWrapperAST(htmlNode)
 
   const chunks: Record<string, ChunkDefinition[]> = {
-    [FILE_TYPE.JS]: [
+    [FileType.JS]: [
       {
         name: 'document',
-        type: CHUNK_TYPE.AST,
-        fileType: FILE_TYPE.JS,
+        type: ChunkType.AST,
+        fileType: FileType.JS,
         content: fileAST,
         linkAfter: [],
       },
diff --git a/packages/teleport-project-generator-stencil/src/index.ts b/packages/teleport-project-generator-stencil/src/index.ts
index d58da532..f8a02ee8 100644
--- a/packages/teleport-project-generator-stencil/src/index.ts
+++ b/packages/teleport-project-generator-stencil/src/index.ts
@@ -1,21 +1,20 @@
 import { createProjectGenerator } from '@teleporthq/teleport-project-generator'
 import { createStencilComponentGenerator } from '@teleporthq/teleport-component-generator-stencil'
 import { createComponentGenerator } from '@teleporthq/teleport-component-generator'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 import { createPostProcessor } from '@teleporthq/teleport-postprocessor-prettier-js'
 import { createPlugin as createImportPlugin } from '@teleporthq/teleport-plugin-import-statements'
 
 import stencilAppRouting from '@teleporthq/teleport-plugin-stencil-app-routing'
 import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'
 
-import { Mapping } from '@teleporthq/teleport-types'
+import { Mapping, FileType } from '@teleporthq/teleport-types'
 
 import StencilProjectMapping from './stencil-mapping.json'
 import StencilTemplate from './project-template'
 
 const createStencilProjectGenerator = () => {
-  const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TSX })
-  const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TSX })
+  const prettierJS = createPostProcessor({ fileType: FileType.TSX })
+  const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
 
   const stencilComponentGenerator = createStencilComponentGenerator()
   stencilComponentGenerator.addMapping(StencilProjectMapping as Mapping)
diff --git a/packages/teleport-project-generator/package.json b/packages/teleport-project-generator/package.json
index b82cf3ec..ce1a86f9 100644
--- a/packages/teleport-project-generator/package.json
+++ b/packages/teleport-project-generator/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@teleporthq/teleport-shared": "^0.10.0-alpha.0",
     "@teleporthq/teleport-types": "^0.10.0-alpha.0",
-    "@teleporthq/teleport-uidl-validator": "^0.10.0-alpha.0"
+    "@teleporthq/teleport-uidl-validator": "^0.10.0-alpha.0",
+    "@teleporthq/teleport-uidl-builders": "^0.10.0-alpha.0"
   }
 }
diff --git a/packages/teleport-project-generator/src/file-handlers.ts b/packages/teleport-project-generator/src/file-handlers.ts
index 9c4e2569..a7f60952 100644
--- a/packages/teleport-project-generator/src/file-handlers.ts
+++ b/packages/teleport-project-generator/src/file-handlers.ts
@@ -1,16 +1,4 @@
-import {
-  addAttributeToNode,
-  addChildNode,
-  addTextNode,
-  addBooleanAttributeToNode,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/html-utils'
-import { prefixAssetsPath } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
-import {
-  slugify,
-  dashCaseToUpperCamelCase,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/string-utils'
-import { createHTMLNode } from '@teleporthq/teleport-shared/dist/cjs/builders/html-builders'
-import { FILE_TYPE, CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { HASTUtils, UIDLUtils, StringUtils, HASTBuilers } from '@teleporthq/teleport-shared'
 
 import {
   GeneratedFile,
@@ -24,6 +12,8 @@ import {
   EntryFileOptions,
   CustomTag,
   Attribute,
+  FileType,
+  ChunkType,
 } from '@teleporthq/teleport-types'
 
 import { DEFAULT_PACKAGE_JSON, DEFAULT_ROUTER_FILE_NAME } from './constants'
@@ -76,7 +66,7 @@ export const createPageModule = async (
 ) => {
   pageUIDL.outputOptions = pageUIDL.outputOptions || {}
   pageUIDL.outputOptions.fileName = pageUIDL.outputOptions.folderPath[0]
-  pageUIDL.outputOptions.moduleName = `${dashCaseToUpperCamelCase(
+  pageUIDL.outputOptions.moduleName = `${StringUtils.dashCaseToUpperCamelCase(
     pageUIDL.outputOptions.folderPath[0]
   )}Module`
   return strategy.pages.moduleGenerator.generateComponent(pageUIDL, options)
@@ -131,31 +121,31 @@ const createHTMLEntryFileChunks = (uidl: ProjectUIDL, options: EntryFileOptions)
   const { assetsPrefix = '', appRootOverride, customHeadContent, customTags } = options
   const { settings, meta, assets, manifest } = uidl.globals
 
-  const htmlNode = createHTMLNode('html')
-  const headNode = createHTMLNode('head')
-  const bodyNode = createHTMLNode('body')
+  const htmlNode = HASTBuilers.createHTMLNode('html')
+  const headNode = HASTBuilers.createHTMLNode('head')
+  const bodyNode = HASTBuilers.createHTMLNode('body')
 
-  addChildNode(htmlNode, headNode)
-  addChildNode(htmlNode, bodyNode)
+  HASTUtils.addChildNode(htmlNode, headNode)
+  HASTUtils.addChildNode(htmlNode, bodyNode)
 
   // Vue and React use a standard <div id="app"/> in the body tag.
   // Nuxt has an internal templating so requires an override
   if (appRootOverride) {
-    addTextNode(bodyNode, appRootOverride)
+    HASTUtils.addTextNode(bodyNode, appRootOverride)
   } else {
-    const appRootNode = createHTMLNode('div')
-    addAttributeToNode(appRootNode, 'id', 'app')
-    addChildNode(bodyNode, appRootNode)
+    const appRootNode = HASTBuilers.createHTMLNode('div')
+    HASTUtils.addAttributeToNode(appRootNode, 'id', 'app')
+    HASTUtils.addChildNode(bodyNode, appRootNode)
   }
 
   if (settings.language) {
-    addAttributeToNode(htmlNode, 'lang', settings.language)
+    HASTUtils.addAttributeToNode(htmlNode, 'lang', settings.language)
   }
 
   if (settings.title) {
-    const titleTag = createHTMLNode('title')
-    addTextNode(titleTag, settings.title)
-    addChildNode(headNode, titleTag)
+    const titleTag = HASTBuilers.createHTMLNode('title')
+    HASTUtils.addTextNode(titleTag, settings.title)
+    HASTUtils.addChildNode(headNode, titleTag)
   }
 
   /* For frameworks that need to inject and point out the generated build files
@@ -164,125 +154,125 @@ const createHTMLEntryFileChunks = (uidl: ProjectUIDL, options: EntryFileOptions)
     customTags.forEach((tag: CustomTag) => {
       const { targetTag, tagName, attributes, content } = tag
       const targetNode = targetTag === 'head' ? headNode : bodyNode
-      const createdNode = createHTMLNode(tagName)
+      const createdNode = HASTBuilers.createHTMLNode(tagName)
 
       if (content) {
-        addTextNode(createdNode, content)
+        HASTUtils.addTextNode(createdNode, content)
       }
 
       if (attributes && attributes.length > 0) {
         attributes.forEach((attribute: Attribute) => {
           const { attributeKey, attributeValue } = attribute
           if (attributeValue) {
-            addAttributeToNode(createdNode, attributeKey, attributeValue)
+            HASTUtils.addAttributeToNode(createdNode, attributeKey, attributeValue)
           } else {
-            addBooleanAttributeToNode(createdNode, attributeKey)
+            HASTUtils.addBooleanAttributeToNode(createdNode, attributeKey)
           }
         })
       }
 
-      addChildNode(targetNode, createdNode)
+      HASTUtils.addChildNode(targetNode, createdNode)
     })
   }
 
   if (manifest) {
-    const linkTag = createHTMLNode('link')
-    addAttributeToNode(linkTag, 'rel', 'manifest')
-    addAttributeToNode(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
-    addChildNode(headNode, linkTag)
+    const linkTag = HASTBuilers.createHTMLNode('link')
+    HASTUtils.addAttributeToNode(linkTag, 'rel', 'manifest')
+    HASTUtils.addAttributeToNode(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
+    HASTUtils.addChildNode(headNode, linkTag)
   }
 
   meta.forEach((metaItem) => {
-    const metaTag = createHTMLNode('meta')
+    const metaTag = HASTBuilers.createHTMLNode('meta')
     Object.keys(metaItem).forEach((key) => {
-      const prefixedURL = prefixAssetsPath(assetsPrefix, metaItem[key])
-      addAttributeToNode(metaTag, key, prefixedURL)
+      const prefixedURL = UIDLUtils.prefixAssetsPath(assetsPrefix, metaItem[key])
+      HASTUtils.addAttributeToNode(metaTag, key, prefixedURL)
     })
-    addChildNode(headNode, metaTag)
+    HASTUtils.addChildNode(headNode, metaTag)
   })
 
   assets.forEach((asset) => {
-    const assetPath = prefixAssetsPath(assetsPrefix, asset.path)
+    const assetPath = UIDLUtils.prefixAssetsPath(assetsPrefix, asset.path)
 
     // link canonical for SEO
     if (asset.type === 'canonical' && assetPath) {
-      const linkTag = createHTMLNode('link')
-      addAttributeToNode(linkTag, 'rel', 'canonical')
-      addAttributeToNode(linkTag, 'href', assetPath)
-      addChildNode(headNode, linkTag)
+      const linkTag = HASTBuilers.createHTMLNode('link')
+      HASTUtils.addAttributeToNode(linkTag, 'rel', 'canonical')
+      HASTUtils.addAttributeToNode(linkTag, 'href', assetPath)
+      HASTUtils.addChildNode(headNode, linkTag)
     }
 
     // link stylesheet (external css, font)
     if ((asset.type === 'style' || asset.type === 'font') && assetPath) {
-      const linkTag = createHTMLNode('link')
-      addAttributeToNode(linkTag, 'rel', 'stylesheet')
-      addAttributeToNode(linkTag, 'href', assetPath)
-      addChildNode(headNode, linkTag)
+      const linkTag = HASTBuilers.createHTMLNode('link')
+      HASTUtils.addAttributeToNode(linkTag, 'rel', 'stylesheet')
+      HASTUtils.addAttributeToNode(linkTag, 'href', assetPath)
+      HASTUtils.addChildNode(headNode, linkTag)
     }
 
     // inline style
     if (asset.type === 'style' && asset.content) {
-      const styleTag = createHTMLNode('style')
-      addTextNode(styleTag, asset.content)
-      addChildNode(headNode, styleTag)
+      const styleTag = HASTBuilers.createHTMLNode('style')
+      HASTUtils.addTextNode(styleTag, asset.content)
+      HASTUtils.addChildNode(headNode, styleTag)
     }
 
     // script (external or inline)
     if (asset.type === 'script') {
       const scriptInBody = (asset.options && asset.options.target === 'body') || false
-      const scriptTag = createHTMLNode('script')
-      addAttributeToNode(scriptTag, 'type', 'text/javascript')
+      const scriptTag = HASTBuilers.createHTMLNode('script')
+      HASTUtils.addAttributeToNode(scriptTag, 'type', 'text/javascript')
       if (assetPath) {
-        addAttributeToNode(scriptTag, 'src', assetPath)
+        HASTUtils.addAttributeToNode(scriptTag, 'src', assetPath)
         if (asset.options && asset.options.defer) {
-          addBooleanAttributeToNode(scriptTag, 'defer')
+          HASTUtils.addBooleanAttributeToNode(scriptTag, 'defer')
         }
         if (asset.options && asset.options.async) {
-          addBooleanAttributeToNode(scriptTag, 'async')
+          HASTUtils.addBooleanAttributeToNode(scriptTag, 'async')
         }
       } else if (asset.content) {
-        addTextNode(scriptTag, asset.content)
+        HASTUtils.addTextNode(scriptTag, asset.content)
       }
       if (scriptInBody) {
-        addChildNode(bodyNode, scriptTag)
+        HASTUtils.addChildNode(bodyNode, scriptTag)
       } else {
-        addChildNode(headNode, scriptTag)
+        HASTUtils.addChildNode(headNode, scriptTag)
       }
     }
 
     // icon
     if (asset.type === 'icon' && assetPath) {
-      const iconTag = createHTMLNode('link')
-      addAttributeToNode(iconTag, 'rel', 'shortcut icon')
-      addAttributeToNode(iconTag, 'href', assetPath)
+      const iconTag = HASTBuilers.createHTMLNode('link')
+      HASTUtils.addAttributeToNode(iconTag, 'rel', 'shortcut icon')
+      HASTUtils.addAttributeToNode(iconTag, 'href', assetPath)
 
       if (asset.options && asset.options.iconType) {
-        addAttributeToNode(iconTag, 'type', asset.options.iconType)
+        HASTUtils.addAttributeToNode(iconTag, 'type', asset.options.iconType)
       }
       if (asset.options && asset.options.iconSizes) {
-        addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
+        HASTUtils.addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
       }
-      addChildNode(headNode, iconTag)
+      HASTUtils.addChildNode(headNode, iconTag)
     }
   })
 
   if (customHeadContent) {
-    addTextNode(headNode, customHeadContent)
+    HASTUtils.addTextNode(headNode, customHeadContent)
   }
 
   const chunks: Record<string, ChunkDefinition[]> = {
-    [FILE_TYPE.HTML]: [
+    [FileType.HTML]: [
       {
         name: 'doctype',
-        type: CHUNK_TYPE.STRING,
-        fileType: FILE_TYPE.HTML,
+        type: ChunkType.STRING,
+        fileType: FileType.HTML,
         content: '<!DOCTYPE html>',
         linkAfter: [],
       },
       {
         name: 'html-node',
-        type: CHUNK_TYPE.HAST,
-        fileType: FILE_TYPE.HTML,
+        type: ChunkType.HAST,
+        fileType: FileType.HTML,
         content: htmlNode,
         linkAfter: ['doctype'],
       },
@@ -304,7 +294,7 @@ export const createManifestJSONFile = (uidl: ProjectUIDL, assetsPrefix?: string)
   }
 
   const icons = manifest.icons.map((icon) => {
-    const src = prefixAssetsPath(assetsPrefix || '', icon.src)
+    const src = UIDLUtils.prefixAssetsPath(assetsPrefix || '', icon.src)
     return { ...icon, src }
   })
 
@@ -316,7 +306,7 @@ export const createManifestJSONFile = (uidl: ProjectUIDL, assetsPrefix?: string)
 
   return {
     name: 'manifest',
-    fileType: FILE_TYPE.JSON,
+    fileType: FileType.JSON,
     content: JSON.stringify(content, null, 2),
   }
 }
@@ -327,13 +317,13 @@ export const handlePackageJSON = (
   dependencies: Record<string, string>
 ) => {
   const inputPackageJSONFile = template.files.find(
-    (file) => file.name === 'package' && file.fileType === FILE_TYPE.JSON
+    (file) => file.name === 'package' && file.fileType === FileType.JSON
   )
 
   if (inputPackageJSONFile) {
     const packageJSONContent = JSON.parse(inputPackageJSONFile.content) as PackageJSON
 
-    packageJSONContent.name = slugify(uidl.name)
+    packageJSONContent.name = StringUtils.slugify(uidl.name)
     packageJSONContent.dependencies = {
       ...packageJSONContent.dependencies,
       ...dependencies,
@@ -343,13 +333,13 @@ export const handlePackageJSON = (
   } else {
     const content: PackageJSON = {
       ...DEFAULT_PACKAGE_JSON,
-      name: slugify(uidl.name),
+      name: StringUtils.slugify(uidl.name),
       dependencies,
     }
 
     template.files.push({
       name: 'package',
-      fileType: FILE_TYPE.JSON,
+      fileType: FileType.JSON,
       content: JSON.stringify(content, null, 2),
     })
   }
diff --git a/packages/teleport-project-generator/src/index.ts b/packages/teleport-project-generator/src/index.ts
index e069c886..6b6914cc 100644
--- a/packages/teleport-project-generator/src/index.ts
+++ b/packages/teleport-project-generator/src/index.ts
@@ -18,10 +18,7 @@ import {
 
 import { DEFAULT_TEMPLATE } from './constants'
 
-import {
-  cloneObject,
-  getComponentPath,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
 import { Validator, Parser } from '@teleporthq/teleport-uidl-validator'
 
@@ -144,7 +141,7 @@ export class ProjectGenerator {
     resolveLocalDependencies(pageUIDLs, components, this.strategy)
 
     // Initialize output folder and other reusable structures
-    const rootFolder = cloneObject(template || DEFAULT_TEMPLATE)
+    const rootFolder = UIDLUtils.cloneObject(template || DEFAULT_TEMPLATE)
     let collectedDependencies: Record<string, string> = {}
 
     // If static prefix is not specified, compute it from the path, but if the string is empty it should work
@@ -164,7 +161,7 @@ export class ProjectGenerator {
       const { files, dependencies } = await createPage(pageUIDL, this.strategy, options)
 
       // Pages might be generated inside subfolders in the main pages folder
-      const relativePath = getComponentPath(pageUIDL)
+      const relativePath = UIDLUtils.getComponentPath(pageUIDL)
       const path = this.strategy.pages.path.concat(relativePath)
 
       injectFilesToPath(rootFolder, path, files)
@@ -184,7 +181,7 @@ export class ProjectGenerator {
       const { files, dependencies } = await createComponent(componentUIDL, this.strategy, options)
 
       // Components might be generated inside subfolders in the main components folder
-      const relativePath = getComponentPath(componentUIDL)
+      const relativePath = UIDLUtils.getComponentPath(componentUIDL)
       const path = this.strategy.components.path.concat(relativePath)
 
       injectFilesToPath(rootFolder, path, files)
diff --git a/packages/teleport-project-generator/src/utils.ts b/packages/teleport-project-generator/src/utils.ts
index 65c0b73b..f69407b7 100644
--- a/packages/teleport-project-generator/src/utils.ts
+++ b/packages/teleport-project-generator/src/utils.ts
@@ -1,10 +1,4 @@
-import {
-  traverseElements,
-  getComponentFileName,
-  getComponentPath,
-  extractRoutes,
-  extractPageOptions,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
 import {
   GeneratedFile,
@@ -15,10 +9,10 @@ import {
   UIDLConditionalNode,
   ProjectStrategy,
 } from '@teleporthq/teleport-types'
-import { elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { elementNode } from '@teleporthq/teleport-uidl-builders'
 
 export const createPageUIDLs = (uidl: ProjectUIDL, strategy: ProjectStrategy): ComponentUIDL[] => {
-  const routeNodes = extractRoutes(uidl.root)
+  const routeNodes = UIDLUtils.extractRoutes(uidl.root)
   return routeNodes.map((routeNode) => createPageUIDL(routeNode, uidl, strategy))
 }
 
@@ -32,7 +26,7 @@ const createPageUIDL = (
   const routeDefinition = uidl.root.stateDefinitions.route
   const pagesStrategyOptions = strategy.pages.options || {}
 
-  const { componentName, fileName } = extractPageOptions(
+  const { componentName, fileName } = UIDLUtils.extractPageOptions(
     routeDefinition,
     pageName,
     pagesStrategyOptions.useFileNameForNavigation
@@ -95,8 +89,8 @@ export const prepareComponentOutputOptions = (
 
   Object.keys(components).forEach((componentKey) => {
     const component = components[componentKey]
-    const fileName = getComponentFileName(component)
-    const folderPath = getComponentPath(component)
+    const fileName = UIDLUtils.getComponentFileName(component)
+    const folderPath = UIDLUtils.getComponentPath(component)
 
     // If the component has its own folder, name is 'index' or an override from the strategy.
     // In this case, the file name (dash converted) is used as the folder name
@@ -131,9 +125,9 @@ export const resolveLocalDependencies = (
   strategy: ProjectStrategy
 ) => {
   pageUIDLs.forEach((pageUIDL) => {
-    const pagePath = getComponentPath(pageUIDL)
+    const pagePath = UIDLUtils.getComponentPath(pageUIDL)
     const fromPath = strategy.pages.path.concat(pagePath)
-    traverseElements(pageUIDL.node, (element) => {
+    UIDLUtils.traverseElements(pageUIDL.node, (element) => {
       if (isLocalDependency(element)) {
         setLocalDependencyPath(element, components, fromPath, strategy.components.path)
       }
@@ -142,10 +136,10 @@ export const resolveLocalDependencies = (
 
   Object.keys(components).forEach((componentKey) => {
     const component = components[componentKey]
-    const componentPath = getComponentPath(component)
+    const componentPath = UIDLUtils.getComponentPath(component)
     const fromPath = strategy.components.path.concat(componentPath)
 
-    traverseElements(component.node, (element) => {
+    UIDLUtils.traverseElements(component.node, (element) => {
       if (isLocalDependency(element)) {
         setLocalDependencyPath(element, components, fromPath, strategy.components.path)
       }
@@ -164,11 +158,11 @@ const setLocalDependencyPath = (
 ) => {
   const componentKey = element.elementType
   const component = components[componentKey]
-  const componentPath = getComponentPath(component)
+  const componentPath = UIDLUtils.getComponentPath(component)
 
   const toPath = toBasePath.concat(componentPath)
 
-  const importFileName = getComponentFileName(component)
+  const importFileName = UIDLUtils.getComponentFileName(component)
   const importPath = generateLocalDependenciesPrefix(fromPath, toPath)
   element.dependency.path = `${importPath}${importFileName}`
 }
diff --git a/packages/teleport-publisher-github/src/types.ts b/packages/teleport-publisher-github/src/types.ts
index df822a44..6a2aa04e 100644
--- a/packages/teleport-publisher-github/src/types.ts
+++ b/packages/teleport-publisher-github/src/types.ts
@@ -4,7 +4,7 @@ import {
   Publisher,
   GeneratedFolder,
 } from '@teleporthq/teleport-types'
-import { GithubFile } from '@teleporthq/teleport-github-gateway/dist/cjs/types'
+import { GithubFile } from '@teleporthq/teleport-github-gateway'
 
 export interface GithubFactoryParams extends PublisherFactoryParams {
   authMeta?: ServiceAuth
diff --git a/packages/teleport-publisher-github/src/utils.ts b/packages/teleport-publisher-github/src/utils.ts
index 08c10238..5d2a334e 100644
--- a/packages/teleport-publisher-github/src/utils.ts
+++ b/packages/teleport-publisher-github/src/utils.ts
@@ -1,10 +1,10 @@
 import { GeneratedFolder, GeneratedFile } from '@teleporthq/teleport-types'
 import {
+  createGithubGateway,
   GithubFile,
   RepositoryIdentity,
   GithubCommitMeta,
-} from '@teleporthq/teleport-github-gateway/dist/cjs/types'
-import { createGithubGateway } from '@teleporthq/teleport-github-gateway'
+} from '@teleporthq/teleport-github-gateway'
 
 import { GithubPublishMeta, ProjectFolderInfo } from './types'
 
diff --git a/packages/teleport-shared/src/builders/ast-builders.ts b/packages/teleport-shared/src/builders/ast-builders.ts
index 63a0a247..23c3f412 100644
--- a/packages/teleport-shared/src/builders/ast-builders.ts
+++ b/packages/teleport-shared/src/builders/ast-builders.ts
@@ -1,6 +1,6 @@
 import * as types from '@babel/types'
-import { convertValueToLiteral } from '../utils/ast-js-utils'
-import { ImportIdentifier } from '@teleporthq/teleport-types'
+import { convertValueToLiteral, objectToObjectExpression } from '../utils/ast-utils'
+import { ImportIdentifier, UIDLEventHandlerStatement } from '@teleporthq/teleport-types'
 
 export const createConstAssignment = (constName: string, asignment: any = null, t = types) => {
   const declarator = t.variableDeclarator(t.identifier(constName), asignment)
@@ -142,3 +142,26 @@ export const createFunctionalComponent = (
 
   return component
 }
+
+export const createComponentDecorator = (params: Record<string, any>, t = types) => {
+  return t.decorator(
+    t.callExpression(t.identifier('Component'), [objectToObjectExpression(params)])
+  )
+}
+
+export const createStateChangeStatement = (statement: UIDLEventHandlerStatement, t = types) => {
+  const { modifies, newState } = statement
+
+  const rightOperand =
+    newState === '$toggle'
+      ? t.unaryExpression('!', t.memberExpression(t.identifier('this'), t.identifier(modifies)))
+      : convertValueToLiteral(newState)
+
+  return t.expressionStatement(
+    t.assignmentExpression(
+      '=',
+      t.memberExpression(t.identifier('this'), t.identifier(modifies)),
+      rightOperand
+    )
+  )
+}
diff --git a/packages/teleport-shared/src/builders/html-builders.ts b/packages/teleport-shared/src/builders/hast-builders.ts
similarity index 70%
rename from packages/teleport-shared/src/builders/html-builders.ts
rename to packages/teleport-shared/src/builders/hast-builders.ts
index 7825e938..8d35c7b3 100644
--- a/packages/teleport-shared/src/builders/html-builders.ts
+++ b/packages/teleport-shared/src/builders/hast-builders.ts
@@ -1,6 +1,9 @@
 import { HastNode, HastText } from '@teleporthq/teleport-types'
 
-export const createHTMLNode = (tagName: string, children: HastNode[] = []): HastNode => {
+export const createHTMLNode = (
+  tagName: string,
+  children: Array<HastNode | HastText> = []
+): HastNode => {
   return {
     type: 'element',
     tagName,
diff --git a/packages/teleport-shared/src/builders/css-builders.ts b/packages/teleport-shared/src/builders/style-builders.ts
similarity index 95%
rename from packages/teleport-shared/src/builders/css-builders.ts
rename to packages/teleport-shared/src/builders/style-builders.ts
index 159aadcd..c6114776 100644
--- a/packages/teleport-shared/src/builders/css-builders.ts
+++ b/packages/teleport-shared/src/builders/style-builders.ts
@@ -2,7 +2,7 @@ import jss from 'jss'
 import preset from 'jss-preset-default'
 import * as types from '@babel/types'
 import { UIDLDynamicReference } from '@teleporthq/teleport-types'
-import { ParsedASTNode } from '../utils/ast-js-utils'
+import ParsedASTNode from '../utils/parsed-ast'
 
 jss.setup(preset())
 
diff --git a/packages/teleport-shared/src/constants/index.ts b/packages/teleport-shared/src/constants/index.ts
index e06ca84d..eabee086 100644
--- a/packages/teleport-shared/src/constants/index.ts
+++ b/packages/teleport-shared/src/constants/index.ts
@@ -11,18 +11,3 @@ export const PRETTIER_CONFIG: PrettierFormatOptions = {
   trailingComma: 'es5',
   bracketSpacing: true,
 }
-export const FILE_TYPE = {
-  CSS: 'css',
-  HTML: 'html',
-  JS: 'js',
-  JSON: 'json',
-  VUE: 'vue',
-  TS: 'ts',
-  TSX: 'tsx',
-}
-
-export const CHUNK_TYPE = {
-  AST: 'ast',
-  HAST: 'hast',
-  STRING: 'string',
-}
diff --git a/packages/teleport-shared/src/index.ts b/packages/teleport-shared/src/index.ts
new file mode 100644
index 00000000..97dca3bd
--- /dev/null
+++ b/packages/teleport-shared/src/index.ts
@@ -0,0 +1,30 @@
+import * as Constants from './constants'
+import * as ASTBuilders from './builders/ast-builders'
+import * as StyleBuilders from './builders/style-builders'
+import * as HASTBuilers from './builders/hast-builders'
+
+import * as ASTUtils from './utils/ast-utils'
+import * as StyleUtils from './utils/style-utils'
+import * as HASTUtils from './utils/hast-utils'
+import * as StringUtils from './utils/string-utils'
+import * as UIDLUtils from './utils/uidl-utils'
+import ParsedASTNode from './utils/parsed-ast'
+
+export {
+  Constants,
+  ASTBuilders,
+  StyleBuilders,
+  HASTBuilers,
+  ASTUtils,
+  StyleUtils,
+  HASTUtils,
+  StringUtils,
+  UIDLUtils,
+  ParsedASTNode,
+}
+
+export { default as createHTMLTemplateSyntax } from './node-handlers/node-to-html'
+export { default as createJSXSyntax } from './node-handlers/node-to-jsx'
+
+export * from './node-handlers/node-to-html/types'
+export * from './node-handlers/node-to-jsx/types'
diff --git a/packages/teleport-shared/src/node-handlers/node-to-html/index.ts b/packages/teleport-shared/src/node-handlers/node-to-html/index.ts
index 48a96e19..59d6d153 100644
--- a/packages/teleport-shared/src/node-handlers/node-to-html/index.ts
+++ b/packages/teleport-shared/src/node-handlers/node-to-html/index.ts
@@ -1,5 +1,5 @@
-import * as htmlUtils from '../../utils/html-utils'
-import { createHTMLNode } from '../../builders/html-builders'
+import * as hastUtils from '../../utils/hast-utils'
+import { createHTMLNode } from '../../builders/hast-builders'
 import { getRepeatIteratorNameAndKey } from '../../utils/uidl-utils'
 import {
   UIDLRepeatNode,
@@ -44,9 +44,9 @@ const generateElementNode: NodeToHTML<UIDLElementNode, HastNode> = (node, params
       const childTag = generateNode(child, params, templateSyntax)
 
       if (typeof childTag === 'string') {
-        htmlUtils.addTextNode(htmlNode, childTag)
+        hastUtils.addTextNode(htmlNode, childTag)
       } else {
-        htmlUtils.addChildNode(htmlNode, childTag)
+        hastUtils.addChildNode(htmlNode, childTag)
       }
     })
   }
@@ -106,8 +106,8 @@ const generateRepeatNode: NodeToHTML<UIDLRepeatNode, HastNode> = (node, params,
     meta.useIndex
   )
 
-  htmlUtils.addAttributeToNode(repeatContentTag, templateSyntax.repeatAttr, repeatIterator)
-  htmlUtils.addAttributeToNode(repeatContentTag, templateSyntax.valueBinding('key'), iteratorKey)
+  hastUtils.addAttributeToNode(repeatContentTag, templateSyntax.repeatAttr, repeatIterator)
+  hastUtils.addAttributeToNode(repeatContentTag, templateSyntax.valueBinding('key'), iteratorKey)
   return repeatContentTag
 }
 
@@ -121,12 +121,12 @@ const generateConditionalNode: NodeToHTML<UIDLConditionalNode, HastNode> = (
   // a 'span' which is the less intrusive of all
   if (typeof conditionalTag === 'string') {
     const wrappingSpan = createHTMLNode('span')
-    htmlUtils.addTextNode(wrappingSpan, conditionalTag)
+    hastUtils.addTextNode(wrappingSpan, conditionalTag)
     conditionalTag = wrappingSpan
   }
 
   const conditionalStatement = createConditionalStatement(node)
-  htmlUtils.addAttributeToNode(conditionalTag, templateSyntax.conditionalAttr, conditionalStatement)
+  hastUtils.addAttributeToNode(conditionalTag, templateSyntax.conditionalAttr, conditionalStatement)
   return conditionalTag
 }
 
@@ -134,7 +134,7 @@ const generateSlotNode: NodeToHTML<UIDLSlotNode, HastNode> = (node, params, temp
   const slotNode = createHTMLNode('slot')
 
   if (node.content.name) {
-    htmlUtils.addAttributeToNode(slotNode, 'name', node.content.name)
+    hastUtils.addAttributeToNode(slotNode, 'name', node.content.name)
   }
 
   if (node.content.fallback) {
@@ -142,9 +142,9 @@ const generateSlotNode: NodeToHTML<UIDLSlotNode, HastNode> = (node, params, temp
     const fallbackContent = generateNode(fallback, params, templateSyntax)
 
     if (typeof fallbackContent === 'string') {
-      htmlUtils.addTextNode(slotNode, fallbackContent)
+      hastUtils.addTextNode(slotNode, fallbackContent)
     } else {
-      htmlUtils.addChildNode(slotNode, fallbackContent)
+      hastUtils.addChildNode(slotNode, fallbackContent)
     }
   }
 
diff --git a/packages/teleport-shared/src/node-handlers/node-to-html/utils.ts b/packages/teleport-shared/src/node-handlers/node-to-html/utils.ts
index 87584f98..9fd2186e 100644
--- a/packages/teleport-shared/src/node-handlers/node-to-html/utils.ts
+++ b/packages/teleport-shared/src/node-handlers/node-to-html/utils.ts
@@ -1,4 +1,4 @@
-import * as htmlUtils from '../../utils/html-utils'
+import * as hastUtils from '../../utils/hast-utils'
 import { capitalize, dashCaseToUpperCamelCase } from '../../utils/string-utils'
 import {
   UIDLConditionalExpression,
@@ -23,7 +23,7 @@ export const handleAttribute = (
   const dynamicAttrKey = templateSyntax.valueBinding(attrKey, node)
   switch (attrValue.type) {
     case 'dynamic':
-      htmlUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrValue.content.id)
+      hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrValue.content.id)
       break
     case 'static':
       if (Array.isArray(attrValue.content)) {
@@ -31,14 +31,14 @@ export const handleAttribute = (
         // The array will be placed on the dataObject and the data reference is placed on the node
         const dataObjectIdentifier = `${elementName}${capitalize(attrKey)}`
         dataObject[dataObjectIdentifier] = attrValue.content
-        htmlUtils.addAttributeToNode(htmlNode, dynamicAttrKey, dataObjectIdentifier)
+        hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, dataObjectIdentifier)
       } else if (typeof attrValue.content === 'boolean') {
-        htmlUtils.addBooleanAttributeToNode(htmlNode, attrKey)
+        hastUtils.addBooleanAttributeToNode(htmlNode, attrKey)
       } else if (typeof attrValue.content === 'string') {
-        htmlUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content.toString())
+        hastUtils.addAttributeToNode(htmlNode, attrKey, attrValue.content.toString())
       } else {
         // For numbers and values that are passed to components and maintain their type
-        htmlUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrValue.content.toString())
+        hastUtils.addAttributeToNode(htmlNode, dynamicAttrKey, attrValue.content.toString())
       }
       break
     default:
@@ -67,9 +67,9 @@ export const handleEvent = (
 
     if (isPropEvent) {
       const eventEmitter = templateSyntax.eventEmmitter(statement.calls)
-      htmlUtils.addAttributeToNode(htmlNode, eventHandlerKey, eventEmitter)
+      hastUtils.addAttributeToNode(htmlNode, eventHandlerKey, eventEmitter)
     } else {
-      htmlUtils.addAttributeToNode(
+      hastUtils.addAttributeToNode(
         htmlNode,
         eventHandlerKey,
         statement.newState === '$toggle'
@@ -86,7 +86,7 @@ export const handleEvent = (
       : methodName
 
     methodsObject[methodName] = eventHandlerStatements
-    htmlUtils.addAttributeToNode(htmlNode, eventHandlerKey, eventNameBiding)
+    hastUtils.addAttributeToNode(htmlNode, eventHandlerKey, eventNameBiding)
   }
 }
 
diff --git a/packages/teleport-shared/src/node-handlers/node-to-jsx/index.ts b/packages/teleport-shared/src/node-handlers/node-to-jsx/index.ts
index be5369fa..a76d62bd 100644
--- a/packages/teleport-shared/src/node-handlers/node-to-jsx/index.ts
+++ b/packages/teleport-shared/src/node-handlers/node-to-jsx/index.ts
@@ -26,7 +26,7 @@ import {
   addChildJSXTag,
   addAttributeToJSXTag,
   addDynamicAttributeToJSXTag,
-} from '../../utils/ast-jsx-utils'
+} from '../../utils/ast-utils'
 import { createJSXTag, createSelfClosingJSXTag } from '../../builders/ast-builders'
 import { DEFAULT_JSX_OPTIONS } from './constants'
 
diff --git a/packages/teleport-shared/src/node-handlers/node-to-jsx/utils.ts b/packages/teleport-shared/src/node-handlers/node-to-jsx/utils.ts
index 2f1a71bf..8183e761 100644
--- a/packages/teleport-shared/src/node-handlers/node-to-jsx/utils.ts
+++ b/packages/teleport-shared/src/node-handlers/node-to-jsx/utils.ts
@@ -1,6 +1,6 @@
 import * as types from '@babel/types'
 
-import { convertValueToLiteral } from '../../utils/ast-js-utils'
+import { convertValueToLiteral } from '../../utils/ast-utils'
 import { capitalize } from '../../utils/string-utils'
 import {
   UIDLPropDefinition,
diff --git a/packages/teleport-shared/src/utils/ast-js-utils.ts b/packages/teleport-shared/src/utils/ast-js-utils.ts
deleted file mode 100644
index 6885fc72..00000000
--- a/packages/teleport-shared/src/utils/ast-js-utils.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as types from '@babel/types'
-import { UIDLEventHandlerStatement } from '@teleporthq/teleport-types'
-/**
- * A tricky way to pass down custom configuration into
- * the objectToObjectExpression values, to allow for member expressions like
- * Proptypes.String.isRequired to be handled by the function.
- */
-export class ParsedASTNode {
-  public ast: any
-
-  constructor(ast: any) {
-    this.ast = ast
-  }
-}
-
-export const objectToObjectExpression = (objectMap: { [key: string]: any }, t = types) => {
-  const props = Object.keys(objectMap).reduce((acc: any[], key) => {
-    const keyIdentifier = t.stringLiteral(key)
-    const value = objectMap[key]
-    let computedLiteralValue: any = null
-
-    if (value instanceof ParsedASTNode || value.constructor.name === 'ParsedASTNode') {
-      computedLiteralValue = value.ast
-    } else if (typeof value === 'boolean') {
-      computedLiteralValue = t.booleanLiteral(value)
-    } else if (typeof value === 'string') {
-      computedLiteralValue = t.stringLiteral(value)
-    } else if (typeof value === 'number') {
-      computedLiteralValue = t.numericLiteral(value)
-    } else if (Array.isArray(value)) {
-      computedLiteralValue = t.arrayExpression(
-        value.map((element) => convertValueToLiteral(element))
-      )
-    } else if (value === Object) {
-      computedLiteralValue = t.identifier('Object')
-    } else if (typeof value === 'object') {
-      computedLiteralValue = objectToObjectExpression(value, t)
-    } else if (value === String) {
-      computedLiteralValue = t.identifier('String')
-    } else if (value === Number) {
-      computedLiteralValue = t.identifier('Number')
-    } else if (value === Array) {
-      computedLiteralValue = t.identifier('Array')
-    }
-
-    if (computedLiteralValue) {
-      acc.push(t.objectProperty(keyIdentifier, computedLiteralValue))
-    }
-
-    return acc
-  }, [])
-
-  const objectExpression = t.objectExpression(props)
-  return objectExpression
-}
-
-type ExpressionLiteral =
-  | types.StringLiteral
-  | types.BooleanLiteral
-  | types.NumberLiteral
-  | types.Identifier
-  | types.ArrayExpression
-  | types.ObjectExpression
-  | types.NullLiteral
-
-export const convertValueToLiteral = (
-  value: any,
-  explicitType: string = '',
-  t = types
-): ExpressionLiteral => {
-  if (value === undefined || value === null) {
-    return t.nullLiteral()
-  }
-
-  if (Array.isArray(value)) {
-    return t.arrayExpression(value.map((val) => convertValueToLiteral(val)))
-  }
-
-  const typeToCompare = explicitType ? explicitType : typeof value
-  switch (typeToCompare) {
-    case 'string':
-      return t.stringLiteral(value)
-    case 'boolean':
-      return t.booleanLiteral(value)
-    case 'number':
-      return t.numericLiteral(value)
-    case 'object':
-      return objectToObjectExpression(value)
-    default:
-      return t.identifier(value.toString())
-  }
-}
-
-export const addPropertyToASTObject = (
-  obj: types.ObjectExpression,
-  key: string,
-  value: any,
-  t = types
-) => {
-  obj.properties.push(t.objectProperty(t.identifier(key), convertValueToLiteral(value)))
-}
-
-export const getTSAnnotationForType = (type: any, t = types) => {
-  switch (type) {
-    case 'string':
-      return t.tsStringKeyword()
-    case 'number':
-      return t.tsNumberKeyword()
-    case 'boolean':
-      return t.tsBooleanKeyword()
-    default:
-      return t.tsUnknownKeyword()
-  }
-}
-
-export const createStateChangeStatement = (statement: UIDLEventHandlerStatement, t = types) => {
-  const { modifies, newState } = statement
-
-  const rightOperand =
-    newState === '$toggle'
-      ? t.unaryExpression('!', t.memberExpression(t.identifier('this'), t.identifier(modifies)))
-      : convertValueToLiteral(newState)
-
-  return t.expressionStatement(
-    t.assignmentExpression(
-      '=',
-      t.memberExpression(t.identifier('this'), t.identifier(modifies)),
-      rightOperand
-    )
-  )
-}
diff --git a/packages/teleport-shared/src/utils/ast-jsx-utils.ts b/packages/teleport-shared/src/utils/ast-utils.ts
similarity index 56%
rename from packages/teleport-shared/src/utils/ast-jsx-utils.ts
rename to packages/teleport-shared/src/utils/ast-utils.ts
index 48bbc462..bfefdac1 100644
--- a/packages/teleport-shared/src/utils/ast-jsx-utils.ts
+++ b/packages/teleport-shared/src/utils/ast-utils.ts
@@ -1,6 +1,5 @@
 import * as types from '@babel/types'
-import { convertValueToLiteral, objectToObjectExpression } from './ast-js-utils'
-
+import ParsedASTNode from './parsed-ast'
 /**
  * Adds a class definition string to an existing string of classes
  */
@@ -147,8 +146,102 @@ export const renameJSXTag = (jsxTag: types.JSXElement, newName: string, t = type
   }
 }
 
-export const createComponentDecorator = (params: Record<string, any>, t = types) => {
-  return t.decorator(
-    t.callExpression(t.identifier('Component'), [objectToObjectExpression(params)])
-  )
+export const objectToObjectExpression = (objectMap: { [key: string]: any }, t = types) => {
+  const props = Object.keys(objectMap).reduce((acc: any[], key) => {
+    const keyIdentifier = t.stringLiteral(key)
+    const value = objectMap[key]
+    let computedLiteralValue: any = null
+
+    if (value instanceof ParsedASTNode || value.constructor.name === 'ParsedASTNode') {
+      computedLiteralValue = value.ast
+    } else if (typeof value === 'boolean') {
+      computedLiteralValue = t.booleanLiteral(value)
+    } else if (typeof value === 'string') {
+      computedLiteralValue = t.stringLiteral(value)
+    } else if (typeof value === 'number') {
+      computedLiteralValue = t.numericLiteral(value)
+    } else if (Array.isArray(value)) {
+      computedLiteralValue = t.arrayExpression(
+        value.map((element) => convertValueToLiteral(element))
+      )
+    } else if (value === Object) {
+      computedLiteralValue = t.identifier('Object')
+    } else if (typeof value === 'object') {
+      computedLiteralValue = objectToObjectExpression(value, t)
+    } else if (value === String) {
+      computedLiteralValue = t.identifier('String')
+    } else if (value === Number) {
+      computedLiteralValue = t.identifier('Number')
+    } else if (value === Array) {
+      computedLiteralValue = t.identifier('Array')
+    }
+
+    if (computedLiteralValue) {
+      acc.push(t.objectProperty(keyIdentifier, computedLiteralValue))
+    }
+
+    return acc
+  }, [])
+
+  const objectExpression = t.objectExpression(props)
+  return objectExpression
+}
+
+type ExpressionLiteral =
+  | types.StringLiteral
+  | types.BooleanLiteral
+  | types.NumberLiteral
+  | types.Identifier
+  | types.ArrayExpression
+  | types.ObjectExpression
+  | types.NullLiteral
+
+export const convertValueToLiteral = (
+  value: any,
+  explicitType: string = '',
+  t = types
+): ExpressionLiteral => {
+  if (value === undefined || value === null) {
+    return t.nullLiteral()
+  }
+
+  if (Array.isArray(value)) {
+    return t.arrayExpression(value.map((val) => convertValueToLiteral(val)))
+  }
+
+  const typeToCompare = explicitType ? explicitType : typeof value
+  switch (typeToCompare) {
+    case 'string':
+      return t.stringLiteral(value)
+    case 'boolean':
+      return t.booleanLiteral(value)
+    case 'number':
+      return t.numericLiteral(value)
+    case 'object':
+      return objectToObjectExpression(value)
+    default:
+      return t.identifier(value.toString())
+  }
+}
+
+export const addPropertyToASTObject = (
+  obj: types.ObjectExpression,
+  key: string,
+  value: any,
+  t = types
+) => {
+  obj.properties.push(t.objectProperty(t.identifier(key), convertValueToLiteral(value)))
+}
+
+export const getTSAnnotationForType = (type: any, t = types) => {
+  switch (type) {
+    case 'string':
+      return t.tsStringKeyword()
+    case 'number':
+      return t.tsNumberKeyword()
+    case 'boolean':
+      return t.tsBooleanKeyword()
+    default:
+      return t.tsUnknownKeyword()
+  }
 }
diff --git a/packages/teleport-shared/src/utils/html-utils.ts b/packages/teleport-shared/src/utils/hast-utils.ts
similarity index 93%
rename from packages/teleport-shared/src/utils/html-utils.ts
rename to packages/teleport-shared/src/utils/hast-utils.ts
index cc0af2de..8ab040cf 100644
--- a/packages/teleport-shared/src/utils/html-utils.ts
+++ b/packages/teleport-shared/src/utils/hast-utils.ts
@@ -1,5 +1,5 @@
 import { HastNode } from '@teleporthq/teleport-types'
-import { createTextNode } from '../builders/html-builders'
+import { createTextNode } from '../builders/hast-builders'
 
 export const addBooleanAttributeToNode = (node: HastNode, key: string) => {
   node.properties[key] = ''
diff --git a/packages/teleport-shared/src/utils/parsed-ast.ts b/packages/teleport-shared/src/utils/parsed-ast.ts
new file mode 100644
index 00000000..e2456198
--- /dev/null
+++ b/packages/teleport-shared/src/utils/parsed-ast.ts
@@ -0,0 +1,12 @@
+/**
+ * A tricky way to pass down custom configuration into
+ * the objectToObjectExpression values, to allow for member expressions like
+ * Proptypes.String.isRequired to be handled by the function.
+ */
+export default class ParsedASTNode {
+  public ast: any
+
+  constructor(ast: any) {
+    this.ast = ast
+  }
+}
diff --git a/packages/teleport-shared/src/utils/jss-utils.ts b/packages/teleport-shared/src/utils/style-utils.ts
similarity index 100%
rename from packages/teleport-shared/src/utils/jss-utils.ts
rename to packages/teleport-shared/src/utils/style-utils.ts
diff --git a/packages/teleport-types/src/generators.ts b/packages/teleport-types/src/generators.ts
index b57c656f..0819b9ba 100644
--- a/packages/teleport-types/src/generators.ts
+++ b/packages/teleport-types/src/generators.ts
@@ -7,6 +7,22 @@ import {
   UIDLStateDefinition,
 } from './uidl'
 
+export enum FileType {
+  CSS = 'css',
+  HTML = 'html',
+  JS = 'js',
+  JSON = 'json',
+  VUE = 'vue',
+  TS = 'ts',
+  TSX = 'tsx',
+}
+
+export enum ChunkType {
+  AST = 'ast',
+  HAST = 'hast',
+  STRING = 'string',
+}
+
 export type ChunkContent = string | any | any[]
 
 /**
@@ -15,9 +31,9 @@ export type ChunkContent = string | any | any[]
  * chunk and a style chunk
  */
 export interface ChunkDefinition {
-  type: string
+  type: ChunkType
   name: string
-  fileType: string
+  fileType: FileType
   meta?: any
   content: ChunkContent
   linkAfter: string[]
@@ -37,7 +53,7 @@ export interface ComponentStructure {
 export type ComponentPlugin = (structure: ComponentStructure) => Promise<ComponentStructure>
 
 export interface ComponentDefaultPluginParams {
-  fileType: string
+  fileType: FileType
 }
 
 export type ComponentPluginFactory<T> = (
diff --git a/packages/teleport-uidl-builders/README.md b/packages/teleport-uidl-builders/README.md
new file mode 100644
index 00000000..68b344c4
--- /dev/null
+++ b/packages/teleport-uidl-builders/README.md
@@ -0,0 +1,14 @@
+# teleport-uidl-builders
+
+A set of functions used for constructing UIDL structures.
+
+> This package is part of the [teleport ecosystem](https://github.com/teleporthq/teleport-code-generators). For a complete guide, check out the [official documentation](https://docs.teleporthq.io/).
+
+## Install
+```bash
+npm install @teleporthq/teleport-uidl-builders
+```
+or
+```bash
+yarn add @teleporthq/teleport-uidl-builders
+```
diff --git a/packages/teleport-uidl-builders/package.json b/packages/teleport-uidl-builders/package.json
new file mode 100644
index 00000000..8afb5337
--- /dev/null
+++ b/packages/teleport-uidl-builders/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@teleporthq/teleport-uidl-builders",
+  "version": "0.10.0-alpha.0",
+  "description": "A set of functions used for constructing UIDL structures",
+  "author": "teleportHQ",
+  "license": "MIT",
+  "homepage": "https://teleporthq.io/",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/teleporthq/teleport-code-generators.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teleporthq/teleport-code-generators/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run build:cjs & npm run build:esm",
+    "build:cjs": "tsc -p tsconfig-cjs.json",
+    "build:esm": "tsc -p tsconfig-esm.json"
+  },
+  "dependencies": {
+    "@teleporthq/teleport-types": "^0.10.0-alpha.0"
+  }
+}
diff --git a/packages/teleport-shared/src/builders/uidl-builders.ts b/packages/teleport-uidl-builders/src/component-builders.ts
similarity index 100%
rename from packages/teleport-shared/src/builders/uidl-builders.ts
rename to packages/teleport-uidl-builders/src/component-builders.ts
diff --git a/packages/teleport-uidl-builders/src/index.ts b/packages/teleport-uidl-builders/src/index.ts
new file mode 100644
index 00000000..dcb5096e
--- /dev/null
+++ b/packages/teleport-uidl-builders/src/index.ts
@@ -0,0 +1,2 @@
+export * from './project-builders'
+export * from './component-builders'
diff --git a/packages/teleport-shared/src/builders/project-builders.ts b/packages/teleport-uidl-builders/src/project-builders.ts
similarity index 100%
rename from packages/teleport-shared/src/builders/project-builders.ts
rename to packages/teleport-uidl-builders/src/project-builders.ts
diff --git a/packages/teleport-uidl-builders/tsconfig-cjs.json b/packages/teleport-uidl-builders/tsconfig-cjs.json
new file mode 100755
index 00000000..c66b615a
--- /dev/null
+++ b/packages/teleport-uidl-builders/tsconfig-cjs.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "commonjs",
+    "target": "es5"
+  },
+  "include": [
+    "./src"
+  ]
+}
\ No newline at end of file
diff --git a/packages/teleport-uidl-builders/tsconfig-esm.json b/packages/teleport-uidl-builders/tsconfig-esm.json
new file mode 100755
index 00000000..f8bed582
--- /dev/null
+++ b/packages/teleport-uidl-builders/tsconfig-esm.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": [
+    "./src"
+  ]
+}
\ No newline at end of file
diff --git a/packages/teleport-uidl-validator/src/parser/index.ts b/packages/teleport-uidl-validator/src/parser/index.ts
index 593d6b39..08c3f685 100644
--- a/packages/teleport-uidl-validator/src/parser/index.ts
+++ b/packages/teleport-uidl-validator/src/parser/index.ts
@@ -1,9 +1,4 @@
-import {
-  transformStylesAssignmentsToJson,
-  transformAttributesAssignmentsToJson,
-  transformStringAssignmentToJson,
-  cloneObject,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
 import {
   UIDLDynamicReference,
@@ -25,7 +20,7 @@ export const parseComponentJSON = (
   input: Record<string, unknown>,
   params: ParseComponentJSONParams = {}
 ): ComponentUIDL => {
-  const safeInput = params.noClone ? input : cloneObject(input)
+  const safeInput = params.noClone ? input : UIDLUtils.cloneObject(input)
 
   const node = safeInput.node as Record<string, unknown>
   const result: ComponentUIDL = {
@@ -46,7 +41,7 @@ export const parseProjectJSON = (
   input: Record<string, unknown>,
   params: ParseProjectJSONParams = {}
 ): ProjectUIDL => {
-  const safeInput = params.noClone ? input : cloneObject(input)
+  const safeInput = params.noClone ? input : UIDLUtils.cloneObject(input)
   const root = safeInput.root as Record<string, unknown>
 
   const result = {
@@ -76,23 +71,21 @@ const parseComponentNode = (node: Record<string, unknown>): UIDLNode => {
       const elementContent = node.content as Record<string, unknown>
 
       if (elementContent.style) {
-        elementContent.style = transformStylesAssignmentsToJson(elementContent.style as Record<
-          string,
-          unknown
-        >)
+        elementContent.style = UIDLUtils.transformStylesAssignmentsToJson(
+          elementContent.style as Record<string, unknown>
+        )
       }
 
       if (elementContent.attrs) {
-        elementContent.attrs = transformAttributesAssignmentsToJson(elementContent.attrs as Record<
-          string,
-          unknown
-        >)
+        elementContent.attrs = UIDLUtils.transformAttributesAssignmentsToJson(
+          elementContent.attrs as Record<string, unknown>
+        )
       }
 
       if (Array.isArray(elementContent.children)) {
         elementContent.children = elementContent.children.map((child) => {
           if (typeof child === 'string') {
-            return transformStringAssignmentToJson(child)
+            return UIDLUtils.transformStringAssignmentToJson(child)
           } else {
             return parseComponentNode(child)
           }
@@ -109,7 +102,7 @@ const parseComponentNode = (node: Record<string, unknown>): UIDLNode => {
         .node as unknown) as Record<string, unknown>)
 
       if (typeof reference === 'string') {
-        conditionalNode.content.reference = transformStringAssignmentToJson(
+        conditionalNode.content.reference = UIDLUtils.transformStringAssignmentToJson(
           reference
         ) as UIDLDynamicReference
       }
@@ -126,7 +119,7 @@ const parseComponentNode = (node: Record<string, unknown>): UIDLNode => {
       >) as UIDLElementNode
 
       if (typeof dataSource === 'string') {
-        repeatNode.content.dataSource = transformStringAssignmentToJson(dataSource)
+        repeatNode.content.dataSource = UIDLUtils.transformStringAssignmentToJson(dataSource)
       }
 
       return repeatNode
diff --git a/packages/teleport-uidl-validator/src/validator/utils.ts b/packages/teleport-uidl-validator/src/validator/utils.ts
index fd9c491e..781b1319 100644
--- a/packages/teleport-uidl-validator/src/validator/utils.ts
+++ b/packages/teleport-uidl-validator/src/validator/utils.ts
@@ -1,9 +1,5 @@
 import Ajv from 'ajv'
-import {
-  traverseNodes,
-  traverseRepeats,
-  traverseElements,
-} from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
 import { ProjectUIDL, UIDLElement, ComponentUIDL } from '@teleporthq/teleport-types'
 
@@ -27,8 +23,8 @@ export const checkForDuplicateDefinitions = (input: ComponentUIDL) => {
 export const checkForLocalVariables = (input: ComponentUIDL) => {
   const errors: string[] = []
 
-  traverseRepeats(input.node, (repeatContent) => {
-    traverseNodes(repeatContent.node, (childNode) => {
+  UIDLUtils.traverseRepeats(input.node, (repeatContent) => {
+    UIDLUtils.traverseNodes(repeatContent.node, (childNode) => {
       if (childNode.type === 'dynamic' && childNode.content.referenceType === 'local') {
         if (childNode.content.id === 'index') {
           if (!repeatContent.meta.useIndex) {
@@ -72,7 +68,7 @@ export const checkDynamicDefinitions = (input: any) => {
   const usedStateKeys: string[] = []
   const errors: string[] = []
 
-  traverseNodes(input.node, (node) => {
+  UIDLUtils.traverseNodes(input.node, (node) => {
     if (node.type === 'dynamic' && node.content.referenceType === 'prop') {
       if (!dynamicPathExistsInDefinitions(node.content.id, propKeys)) {
         const errorMsg = `"${node.content.id}" is used but not defined. Please add it in propDefinitions`
@@ -143,7 +139,7 @@ export const checkComponentExistence = (input: ProjectUIDL) => {
   const errors: string[] = []
   const components = Object.keys(input.components)
 
-  traverseElements(input.root.node, (element) => {
+  UIDLUtils.traverseElements(input.root.node, (element) => {
     if (
       element.dependency &&
       element.dependency.type === 'local' &&


Test patch:
diff --git a/packages/teleport-code-generator/__tests__/index.ts b/packages/teleport-code-generator/__tests__/index.ts
index e947538c..05ced6a5 100644
--- a/packages/teleport-code-generator/__tests__/index.ts
+++ b/packages/teleport-code-generator/__tests__/index.ts
@@ -3,7 +3,7 @@ import { join } from 'path'
 
 import projectJson from '../../../examples/test-samples/project-sample.json'
 import { ProjectUIDL } from '@teleporthq/teleport-types'
-import { element } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { element } from '@teleporthq/teleport-uidl-builders'
 
 import { createCodeGenerator, PackerOptions, PublisherType, ProjectType } from '../src/index'
 import { GenerateOptions, ComponentType } from '../src/types'
diff --git a/packages/teleport-component-generator-angular/__tests__/end2end/index.ts b/packages/teleport-component-generator-angular/__tests__/end2end/index.ts
index 2fd054ef..5c0df387 100644
--- a/packages/teleport-component-generator-angular/__tests__/end2end/index.ts
+++ b/packages/teleport-component-generator-angular/__tests__/end2end/index.ts
@@ -10,12 +10,7 @@ import {
   UIDLEventDefinitions,
   UIDLPropDefinition,
 } from '@teleporthq/teleport-types'
-import {
-  component,
-  elementNode,
-  dynamicNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, elementNode, dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 
 const uidlSample = uidlSampleJSON as ComponentUIDL
 const invalidUidlSample = invalidUidlSampleJSON as ComponentUIDL
diff --git a/packages/teleport-component-generator-angular/__tests__/integration/component-conditional.ts b/packages/teleport-component-generator-angular/__tests__/integration/component-conditional.ts
index f168f043..9630a3a2 100644
--- a/packages/teleport-component-generator-angular/__tests__/integration/component-conditional.ts
+++ b/packages/teleport-component-generator-angular/__tests__/integration/component-conditional.ts
@@ -7,7 +7,7 @@ import {
   dynamicNode,
   elementNode,
   conditionalNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const generator = createAngularComponentGenerator()
 
diff --git a/packages/teleport-component-generator-angular/__tests__/integration/component-repeat.ts b/packages/teleport-component-generator-angular/__tests__/integration/component-repeat.ts
index 9bad4b8c..43b1cc90 100644
--- a/packages/teleport-component-generator-angular/__tests__/integration/component-repeat.ts
+++ b/packages/teleport-component-generator-angular/__tests__/integration/component-repeat.ts
@@ -7,7 +7,7 @@ import {
   repeatNode,
   dynamicNode,
   elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const TS_FILE = 'ts'
 const HTML_FILE = 'html'
diff --git a/packages/teleport-component-generator-angular/__tests__/integration/component-style.ts b/packages/teleport-component-generator-angular/__tests__/integration/component-style.ts
index d931f505..eb6d739d 100644
--- a/packages/teleport-component-generator-angular/__tests__/integration/component-style.ts
+++ b/packages/teleport-component-generator-angular/__tests__/integration/component-style.ts
@@ -2,12 +2,7 @@ import ComponentWithNestedStyle from './component-with-nested-styles.json'
 
 import { createAngularComponentGenerator } from '../../src/index'
 import { ComponentUIDL, GeneratedFile } from '@teleporthq/teleport-types'
-import {
-  component,
-  elementNode,
-  dynamicNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, elementNode, dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 
 const ComponentWithValidStyle: ComponentUIDL = component(
   'ComponentWithAttrProp',
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-attrs.ts b/packages/teleport-component-generator-react/__tests__/integration/component-attrs.ts
index 4c27be0b..85f8eba3 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-attrs.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-attrs.ts
@@ -11,7 +11,7 @@ import {
   dynamicNode,
   elementNode,
   staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const uidl = component(
   'ComponentWithAttrProp',
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-conditional.ts b/packages/teleport-component-generator-react/__tests__/integration/component-conditional.ts
index dc5764c2..052e42ef 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-conditional.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-conditional.ts
@@ -7,7 +7,7 @@ import {
   dynamicNode,
   elementNode,
   conditionalNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const generator = createReactComponentGenerator()
 
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-dependency.ts b/packages/teleport-component-generator-react/__tests__/integration/component-dependency.ts
index 5889ad2a..6bf445dd 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-dependency.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-dependency.ts
@@ -6,7 +6,7 @@ import {
   definition,
   elementNode,
   componentDependency,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const generator = createReactComponentGenerator()
 
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-repeat.ts b/packages/teleport-component-generator-react/__tests__/integration/component-repeat.ts
index ffb306e6..2c21d16d 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-repeat.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-repeat.ts
@@ -7,7 +7,7 @@ import {
   repeatNode,
   dynamicNode,
   elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const JS_FILE = 'js'
 const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-slot.ts b/packages/teleport-component-generator-react/__tests__/integration/component-slot.ts
index 696bea71..23660d77 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-slot.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-slot.ts
@@ -1,9 +1,4 @@
-import {
-  component,
-  staticNode,
-  slotNode,
-  elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, staticNode, slotNode, elementNode } from '@teleporthq/teleport-uidl-builders'
 
 import { createReactComponentGenerator } from '../../src'
 
diff --git a/packages/teleport-component-generator-react/__tests__/integration/component-style.ts b/packages/teleport-component-generator-react/__tests__/integration/component-style.ts
index 8f62abe7..453227bf 100644
--- a/packages/teleport-component-generator-react/__tests__/integration/component-style.ts
+++ b/packages/teleport-component-generator-react/__tests__/integration/component-style.ts
@@ -17,14 +17,9 @@ import {
   GeneratedFile,
   UIDLPropDefinition,
   UIDLStyleDefinitions,
+  FileType,
 } from '@teleporthq/teleport-types'
-import {
-  staticNode,
-  dynamicNode,
-  component,
-  elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { staticNode, dynamicNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'
 
 const ComponentWithValidStyle: ComponentUIDL = component(
   'ComponentWithAttrProp',
@@ -48,7 +43,7 @@ const ComponentWithValidStyle: ComponentUIDL = component(
   {}
 )
 
-const findFileByType = (files: GeneratedFile[], type: string = FILE_TYPE.JS) =>
+const findFileByType = (files: GeneratedFile[], type: string = FileType.JS) =>
   files.find((file) => file.fileType === type)
 
 describe('React Styles in Component', () => {
@@ -56,7 +51,7 @@ describe('React Styles in Component', () => {
     it('Inline Styles should refer state in styles when state is mapped', async () => {
       const generator = createReactComponentGenerator(ReactStyleVariation.InlineStyles)
       const result = await generator.generateComponent(ComponentWithStateReference)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain('display: active')
@@ -66,8 +61,8 @@ describe('React Styles in Component', () => {
     it('CSSModules should refer state in styles when state is mapped', async () => {
       const generator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
       const result = await generator.generateComponent(ComponentWithStateReference)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
-      const cssFile = findFileByType(result.files, FILE_TYPE.CSS)
+      const jsFile = findFileByType(result.files, FileType.JS)
+      const cssFile = findFileByType(result.files, FileType.CSS)
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
@@ -79,8 +74,8 @@ describe('React Styles in Component', () => {
     it('Basic CSS should refer state in styles when state is mapped', async () => {
       const generator = createReactComponentGenerator(ReactStyleVariation.CSS)
       const result = await generator.generateComponent(ComponentWithStateReference)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
-      const cssFile = findFileByType(result.files, FILE_TYPE.CSS)
+      const jsFile = findFileByType(result.files, FileType.JS)
+      const cssFile = findFileByType(result.files, FileType.CSS)
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
@@ -105,7 +100,7 @@ describe('React Styles in Component', () => {
 
     it('should add attributes on component', async () => {
       const result = await generator.generateComponent(ComponentWithValidStyle)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain('props.direction')
@@ -115,7 +110,7 @@ describe('React Styles in Component', () => {
     it('should support object props in styledjsx', async () => {
       const styledJSXGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)
       const result = await styledJSXGenerator.generateComponent(ComponentWithValidStyle)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain(`align-self: center`)
@@ -126,7 +121,7 @@ describe('React Styles in Component', () => {
       const result = await styledJSXGenerator.generateComponent(
         ComponentWithNestedStyles as ComponentUIDL
       )
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       // tslint:disable-next-line:no-invalid-template-strings
@@ -155,7 +150,7 @@ describe('React Styles in Component', () => {
       const result = await styledComponentsGenerator.generateComponent(
         ComponentWithValidSingleStlye
       )
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain('<Container height={props.config.height}')
@@ -184,7 +179,7 @@ describe('React Styles in Component', () => {
         ReactStyleVariation.StyledComponents
       )
       const result = await styledComponentsGenerator.generateComponent(uidl)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain('<Container backgroundColor={props.backgroundColor}')
@@ -219,7 +214,7 @@ describe('React Styles in Component', () => {
       )
       const result = await styledComponentsGenerator.generateComponent(uidl)
 
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain('<Container {...props}')
@@ -234,7 +229,7 @@ describe('React Styles in Component', () => {
         ReactStyleVariation.StyledComponents
       )
       const result = await styledComponentsGenerator.generateComponent(ComponentWithValidStyle)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain(`align-self: center`)
@@ -247,7 +242,7 @@ describe('React Styles in Component', () => {
       const result = await styledComponentsGenerator.generateComponent(
         ComponentWithNestedStyles as ComponentUIDL
       )
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       // tslint:disable-next-line:no-invalid-template-strings
@@ -264,7 +259,7 @@ describe('React Styles in Component', () => {
       const result = await styledComponentsGenerator.generateComponent(
         ComponentWithNestedMultiplePropRef as ComponentUIDL
       )
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       // tslint:disable-next-line:no-invalid-template-strings
@@ -283,7 +278,7 @@ describe('React Styles in Component', () => {
       const result = await styledComponentsGenerator.generateComponent(
         ComponentWithNestedSinglePropRef as ComponentUIDL
       )
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
       expect(jsFile.content).toContain(`align-self: center`)
@@ -298,7 +293,7 @@ describe('React Styles in Component', () => {
     it('should inject props only once for styled components', async () => {
       const styledJSXGenerator = createReactComponentGenerator(ReactStyleVariation.StyledComponents)
       const result = await styledJSXGenerator.generateComponent(ComponentWithValidStyle)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
+      const jsFile = findFileByType(result.files, FileType.JS)
       expect(jsFile.content).toContain('<Container {...props}')
     })
 
@@ -320,8 +315,8 @@ describe('React Styles in Component', () => {
 
     it('should return code in an array of files', async () => {
       const result = await generator.generateComponent(ComponentWithValidStyle)
-      const jsFile = findFileByType(result.files, FILE_TYPE.JS)
-      const cssFile = findFileByType(result.files, FILE_TYPE.CSS)
+      const jsFile = findFileByType(result.files, FileType.JS)
+      const cssFile = findFileByType(result.files, FileType.CSS)
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
diff --git a/packages/teleport-component-generator-vue/__tests__/end2end/index.ts b/packages/teleport-component-generator-vue/__tests__/end2end/index.ts
index 61494c54..c19ccaeb 100644
--- a/packages/teleport-component-generator-vue/__tests__/end2end/index.ts
+++ b/packages/teleport-component-generator-vue/__tests__/end2end/index.ts
@@ -10,12 +10,7 @@ import {
   UIDLPropDefinition,
   UIDLEventDefinitions,
 } from '@teleporthq/teleport-types'
-import {
-  component,
-  elementNode,
-  dynamicNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, elementNode, dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 
 const uidlSample = uidlSampleJSON as ComponentUIDL
 const invalidUidlSample = invalidUidlSampleJSON as ComponentUIDL
diff --git a/packages/teleport-component-generator-vue/__tests__/integration/component-attrs.ts b/packages/teleport-component-generator-vue/__tests__/integration/component-attrs.ts
index bac18aa9..852449ce 100644
--- a/packages/teleport-component-generator-vue/__tests__/integration/component-attrs.ts
+++ b/packages/teleport-component-generator-vue/__tests__/integration/component-attrs.ts
@@ -10,7 +10,7 @@ import {
   dynamicNode,
   elementNode,
   staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const VUE_FILE = 'vue'
 const findFileByType = (files: GeneratedFile[], type: string = VUE_FILE) =>
diff --git a/packages/teleport-component-generator-vue/__tests__/integration/component-conditional.ts b/packages/teleport-component-generator-vue/__tests__/integration/component-conditional.ts
index 91042894..0b0efedb 100644
--- a/packages/teleport-component-generator-vue/__tests__/integration/component-conditional.ts
+++ b/packages/teleport-component-generator-vue/__tests__/integration/component-conditional.ts
@@ -5,7 +5,7 @@ import {
   dynamicNode,
   elementNode,
   conditionalNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 import { createVueComponentGenerator } from '../../src'
 
diff --git a/packages/teleport-component-generator-vue/__tests__/integration/component-dependency.ts b/packages/teleport-component-generator-vue/__tests__/integration/component-dependency.ts
index 7c8c59ba..95716fe1 100644
--- a/packages/teleport-component-generator-vue/__tests__/integration/component-dependency.ts
+++ b/packages/teleport-component-generator-vue/__tests__/integration/component-dependency.ts
@@ -3,7 +3,7 @@ import {
   definition,
   elementNode,
   componentDependency,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 import { createVueComponentGenerator } from '../../src'
 
diff --git a/packages/teleport-component-generator-vue/__tests__/integration/component-repeat.ts b/packages/teleport-component-generator-vue/__tests__/integration/component-repeat.ts
index 13e99c9c..94d5323b 100644
--- a/packages/teleport-component-generator-vue/__tests__/integration/component-repeat.ts
+++ b/packages/teleport-component-generator-vue/__tests__/integration/component-repeat.ts
@@ -4,7 +4,7 @@ import {
   repeatNode,
   dynamicNode,
   elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 import { createVueComponentGenerator } from '../../src'
 
diff --git a/packages/teleport-component-generator-vue/__tests__/integration/component-slot.ts b/packages/teleport-component-generator-vue/__tests__/integration/component-slot.ts
index fc3680ef..0797b499 100644
--- a/packages/teleport-component-generator-vue/__tests__/integration/component-slot.ts
+++ b/packages/teleport-component-generator-vue/__tests__/integration/component-slot.ts
@@ -1,9 +1,4 @@
-import {
-  component,
-  staticNode,
-  slotNode,
-  elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, staticNode, slotNode, elementNode } from '@teleporthq/teleport-uidl-builders'
 
 import { createVueComponentGenerator } from '../../src'
 
diff --git a/packages/teleport-component-generator/__tests__/index.ts b/packages/teleport-component-generator/__tests__/index.ts
index d84ada21..cd358923 100644
--- a/packages/teleport-component-generator/__tests__/index.ts
+++ b/packages/teleport-component-generator/__tests__/index.ts
@@ -1,11 +1,6 @@
 import { createComponentGenerator } from '../src/index'
-import {
-  elementNode,
-  element,
-  component,
-} from '../../teleport-shared/dist/cjs/builders/uidl-builders'
-import { ChunkDefinition } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { elementNode, element, component } from '@teleporthq/teleport-uidl-builders'
+import { ChunkDefinition, ChunkType, FileType, ComponentPlugin } from '@teleporthq/teleport-types'
 
 describe('component generator', () => {
   it('creates a new instance of the generator', () => {
@@ -52,14 +47,14 @@ describe('component generator', () => {
 
       let pluginCalls = 0
       // dummy plugins
-      const plugin1 = (structure) => {
+      const plugin1: ComponentPlugin = (structure) => {
         pluginCalls++
-        return structure
+        return Promise.resolve(structure)
       }
 
-      const plugin2 = (structure) => {
+      const plugin2: ComponentPlugin = (structure) => {
         pluginCalls++
-        return structure
+        return Promise.resolve(structure)
       }
 
       generator.addPlugin(plugin1)
@@ -77,8 +72,8 @@ describe('component generator', () => {
       const codeChunks: Record<string, ChunkDefinition[]> = {
         js: [
           {
-            type: CHUNK_TYPE.STRING,
-            fileType: FILE_TYPE.JS,
+            type: ChunkType.STRING,
+            fileType: FileType.JS,
             name: 'chunk',
             content: 'import lib from "lib"',
             linkAfter: [],
diff --git a/packages/teleport-component-generator/__tests__/resolver/index.ts b/packages/teleport-component-generator/__tests__/resolver/index.ts
index b839b58c..21ca20e6 100644
--- a/packages/teleport-component-generator/__tests__/resolver/index.ts
+++ b/packages/teleport-component-generator/__tests__/resolver/index.ts
@@ -11,7 +11,7 @@ import {
   dynamicNode,
   elementNode,
   conditionalNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const mapping = mappingJSON as Mapping
 
diff --git a/packages/teleport-component-generator/__tests__/resolver/utils.ts b/packages/teleport-component-generator/__tests__/resolver/utils.ts
index 48cc5d1e..a9b83a4a 100644
--- a/packages/teleport-component-generator/__tests__/resolver/utils.ts
+++ b/packages/teleport-component-generator/__tests__/resolver/utils.ts
@@ -3,7 +3,7 @@ import {
   repeatNode,
   elementNode,
   dynamicNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 import {
   generateUniqueKeys,
   createNodesLookup,
diff --git a/packages/teleport-plugin-angular-base-component/__tests__/index.ts b/packages/teleport-plugin-angular-base-component/__tests__/index.ts
index de2a5524..7a6edc2a 100644
--- a/packages/teleport-plugin-angular-base-component/__tests__/index.ts
+++ b/packages/teleport-plugin-angular-base-component/__tests__/index.ts
@@ -1,6 +1,6 @@
 import { createPlugin } from '../src/index'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
 
 describe('plugin-angular-base-component', () => {
   const plugin = createPlugin({
@@ -11,7 +11,7 @@ describe('plugin-angular-base-component', () => {
   })
 
   it('outputs two AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component('Test', elementNode('container')),
@@ -24,19 +24,19 @@ describe('plugin-angular-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(3)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.HAST)
+    expect(result.chunks[0].type).toBe(ChunkType.HAST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('template-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('component-decorator')
-    expect(result.chunks[2].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[2].type).toBe(ChunkType.AST)
     expect(result.chunks[2].content).toBeDefined()
     expect(result.chunks[2].name).toBe('angular-ts-chunk')
   })
 
   it('works with state definitions', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -56,13 +56,13 @@ describe('plugin-angular-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(3)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.HAST)
+    expect(result.chunks[0].type).toBe(ChunkType.HAST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('template-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('component-decorator')
-    expect(result.chunks[2].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[2].type).toBe(ChunkType.AST)
     expect(result.chunks[2].content).toBeDefined()
     expect(result.chunks[2].name).toBe('angular-ts-chunk')
   })
diff --git a/packages/teleport-plugin-angular-module/__tests__/index.ts b/packages/teleport-plugin-angular-module/__tests__/index.ts
index 372cf163..b4f73420 100644
--- a/packages/teleport-plugin-angular-module/__tests__/index.ts
+++ b/packages/teleport-plugin-angular-module/__tests__/index.ts
@@ -1,7 +1,6 @@
-import { ComponentStructure, ComponentUIDL } from '@teleporthq/teleport-types'
+import { ComponentStructure, ComponentUIDL, ChunkType, FileType } from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
 import projectUIDL from '../../../examples/test-samples/project-sample.json'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('Testing the functionality for Angular Modules', () => {
   it('Should add Angular dependencies for root module', async () => {
@@ -18,11 +17,11 @@ describe('Testing the functionality for Angular Modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(Object.keys(dependencies).length).toBe(5)
-    expect(chunks[0].type).toBe(CHUNK_TYPE.AST)
-    expect(chunks[0].fileType).toBe(FILE_TYPE.TS)
+    expect(chunks[0].type).toBe(ChunkType.AST)
+    expect(chunks[0].fileType).toBe(FileType.TS)
     expect(chunks[0].content).toBeDefined()
-    expect(chunks[1].type).toBe(CHUNK_TYPE.AST)
-    expect(chunks[1].fileType).toBe(FILE_TYPE.TS)
+    expect(chunks[1].type).toBe(ChunkType.AST)
+    expect(chunks[1].fileType).toBe(FileType.TS)
     expect(chunks[1].content).toBeDefined()
   })
 
@@ -40,8 +39,8 @@ describe('Testing the functionality for Angular Modules', () => {
 
     expect(Object.keys(dependencies).length).toBe(4)
     expect(chunks.length).toBe(1)
-    expect(chunks[0].type).toBe(CHUNK_TYPE.AST)
-    expect(chunks[0].fileType).toBe(FILE_TYPE.TS)
+    expect(chunks[0].type).toBe(ChunkType.AST)
+    expect(chunks[0].fileType).toBe(FileType.TS)
     expect(chunks[0].content).toBeDefined()
   })
 
@@ -65,11 +64,11 @@ describe('Testing the functionality for Angular Modules', () => {
 
     expect(Object.keys(dependencies).length).toBe(5)
     expect(chunks.length).toBe(2)
-    expect(chunks[0].type).toBe(CHUNK_TYPE.AST)
-    expect(chunks[0].fileType).toBe(FILE_TYPE.TS)
+    expect(chunks[0].type).toBe(ChunkType.AST)
+    expect(chunks[0].fileType).toBe(FileType.TS)
     expect(chunks[0].content).toBeDefined()
-    expect(chunks[1].type).toBe(CHUNK_TYPE.AST)
-    expect(chunks[1].fileType).toBe(FILE_TYPE.TS)
+    expect(chunks[1].type).toBe(ChunkType.AST)
+    expect(chunks[1].fileType).toBe(FileType.TS)
     expect(chunks[1].content).toBeDefined()
     expect(pageComponent.type).toBe('local')
   })
diff --git a/packages/teleport-plugin-css-modules/__tests__/index.ts b/packages/teleport-plugin-css-modules/__tests__/index.ts
index 4736cac4..35594403 100644
--- a/packages/teleport-plugin-css-modules/__tests__/index.ts
+++ b/packages/teleport-plugin-css-modules/__tests__/index.ts
@@ -1,14 +1,8 @@
 import * as types from '@babel/types'
-import {
-  component,
-  elementNode,
-  dynamicNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure } from '@teleporthq/teleport-types'
+import { component, elementNode, dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, FileType } from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
 import { createComponentChunk, setupPluginStructure } from './mocks'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('plugin-css-modules', () => {
   it('generates no chunk if no styles exist', async () => {
@@ -33,7 +27,7 @@ describe('plugin-css-modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('height: 100px;')
 
     const nodeReference = chunks[0].meta.nodesLookup.container
@@ -51,7 +45,7 @@ describe('plugin-css-modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('height: 100px;')
 
     const nodeReference = chunks[0].meta.nodesLookup['list-container']
@@ -69,7 +63,7 @@ describe('plugin-css-modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('height: 100px;')
 
     const nodeReference = chunks[0].meta.nodesLookup['list-container']
@@ -87,7 +81,7 @@ describe('plugin-css-modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('height: 100px;')
 
     const nodeReference = chunks[0].meta.nodesLookup['list-container']
@@ -105,7 +99,7 @@ describe('plugin-css-modules', () => {
 
     expect(chunks.length).toBe(2)
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('height: 100px;')
     expect(structure.uidl.outputOptions.styleFileName).toContain('.module')
     expect(dependencies.styles.path).toContain('.module.css')
@@ -144,7 +138,7 @@ describe('plugin-css-modules', () => {
     expect(chunks.length).toBe(2)
 
     expect(chunks[1].type).toBe('string')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.CSS)
+    expect(chunks[1].fileType).toBe(FileType.CSS)
     expect(chunks[1].content).toContain('width: auto;')
 
     const nodeReference = chunks[0].meta.nodesLookup.container
diff --git a/packages/teleport-plugin-css-modules/__tests__/mocks.ts b/packages/teleport-plugin-css-modules/__tests__/mocks.ts
index 52392b8c..4af1cab3 100644
--- a/packages/teleport-plugin-css-modules/__tests__/mocks.ts
+++ b/packages/teleport-plugin-css-modules/__tests__/mocks.ts
@@ -2,13 +2,10 @@ import {
   ChunkDefinition,
   ComponentStructure,
   UIDLStyleDefinitions,
+  ChunkType,
+  FileType,
 } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
-import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 
 export const createComponentChunk = (elementKey: string = 'container') => {
   const componentChunk: ChunkDefinition = {
@@ -28,8 +25,8 @@ export const createComponentChunk = (elementKey: string = 'container') => {
         prop: 'props.',
       },
     },
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     linkAfter: ['import-local'],
     content: {},
   }
diff --git a/packages/teleport-plugin-css/__tests__/index.ts b/packages/teleport-plugin-css/__tests__/index.ts
index 3312a6e0..019cf4cd 100644
--- a/packages/teleport-plugin-css/__tests__/index.ts
+++ b/packages/teleport-plugin-css/__tests__/index.ts
@@ -1,11 +1,11 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure, ChunkDefinition } from '@teleporthq/teleport-types'
+  ComponentStructure,
+  ChunkDefinition,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('plugin-css', () => {
   describe('on html template based components', () => {
@@ -21,8 +21,8 @@ describe('plugin-css', () => {
           },
         },
       },
-      fileType: FILE_TYPE.HTML,
-      type: CHUNK_TYPE.HAST,
+      fileType: FileType.HTML,
+      type: ChunkType.HAST,
       linkAfter: [],
       content: {},
     }
@@ -91,16 +91,16 @@ describe('plugin-css', () => {
           prop: 'props.',
         },
       },
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       linkAfter: ['import-local'],
       content: {},
     }
 
     const decoratorChunk: ChunkDefinition = {
       name: 'component-decorator',
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.TSX,
+      type: ChunkType.AST,
+      fileType: FileType.TSX,
       linkAfter: ['import-local'],
       content: {
         expression: {
diff --git a/packages/teleport-plugin-import-statements/__tests__/index.ts b/packages/teleport-plugin-import-statements/__tests__/index.ts
index 73b4a662..4705bea4 100644
--- a/packages/teleport-plugin-import-statements/__tests__/index.ts
+++ b/packages/teleport-plugin-import-statements/__tests__/index.ts
@@ -1,5 +1,5 @@
 import { createPlugin } from '../src/'
-import { componentDependency } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+import { componentDependency } from '@teleporthq/teleport-uidl-builders'
 
 describe('plugin-import-statements', () => {
   const plugin = createPlugin({
diff --git a/packages/teleport-plugin-jsx-head-config/__tests__/index.ts b/packages/teleport-plugin-jsx-head-config/__tests__/index.ts
index 22d687fe..9bb8bb12 100644
--- a/packages/teleport-plugin-jsx-head-config/__tests__/index.ts
+++ b/packages/teleport-plugin-jsx-head-config/__tests__/index.ts
@@ -1,14 +1,18 @@
 import * as types from '@babel/types'
 import { createPlugin } from '../src'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import {
+  ComponentStructure,
+  ChunkType,
+  FileType,
+  ChunkDefinition,
+} from '@teleporthq/teleport-types'
 
 describe('plugin-jsx-head-config', () => {
   const plugin = createPlugin()
-  const jsxChunk = {
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+  const jsxChunk: ChunkDefinition = {
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     name: 'jsx-component',
     content: {},
     linkAfter: [],
diff --git a/packages/teleport-plugin-jsx-inline-styles/__tests__/index.ts b/packages/teleport-plugin-jsx-inline-styles/__tests__/index.ts
index 71e70b28..7703d9e7 100644
--- a/packages/teleport-plugin-jsx-inline-styles/__tests__/index.ts
+++ b/packages/teleport-plugin-jsx-inline-styles/__tests__/index.ts
@@ -1,11 +1,11 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure, ChunkDefinition } from '@teleporthq/teleport-types'
+  ComponentStructure,
+  ChunkDefinition,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('plugin-jsx-inline-styles', () => {
   const plugin = createPlugin()
@@ -26,8 +26,8 @@ describe('plugin-jsx-inline-styles', () => {
         prop: 'props.',
       },
     },
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     linkAfter: ['import-local'],
     content: {},
   }
diff --git a/packages/teleport-plugin-jsx-proptypes/__tests__/index.ts b/packages/teleport-plugin-jsx-proptypes/__tests__/index.ts
index 3e69bef7..45922371 100644
--- a/packages/teleport-plugin-jsx-proptypes/__tests__/index.ts
+++ b/packages/teleport-plugin-jsx-proptypes/__tests__/index.ts
@@ -1,20 +1,24 @@
 import { createPlugin } from '../src'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import {
+  ComponentStructure,
+  ChunkType,
+  FileType,
+  ChunkDefinition,
+} from '@teleporthq/teleport-types'
 
 describe('plugin-jsx-proptypes', () => {
   const plugin = createPlugin()
-  const reactChunk = {
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+  const reactChunk: ChunkDefinition = {
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     name: 'jsx-component',
     content: {},
     linkAfter: [],
   }
   const exportChunk = {
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     name: 'export',
     content: {},
     linkAfter: ['jsx-component'],
@@ -60,9 +64,9 @@ describe('plugin-jsx-proptypes', () => {
     const propTypes = result.chunks.filter((chunk) => chunk.name === 'component-types-of-props')
 
     expect(defaultProps.length).toEqual(1)
-    expect(defaultProps[0].type).toBe(CHUNK_TYPE.AST)
+    expect(defaultProps[0].type).toBe(ChunkType.AST)
     expect(propTypes.length).toEqual(1)
-    expect(propTypes[0].type).toBe(CHUNK_TYPE.AST)
+    expect(propTypes[0].type).toBe(ChunkType.AST)
   })
 
   it('Should not generate defaultProps', async () => {
@@ -89,7 +93,7 @@ describe('plugin-jsx-proptypes', () => {
 
     expect(defaultProps.length).toEqual(0)
     expect(propTypes.length).toEqual(1)
-    expect(propTypes[0].type).toBe(CHUNK_TYPE.AST)
+    expect(propTypes[0].type).toBe(ChunkType.AST)
   })
 
   it('Should generate chunks after specifying required to props', async () => {
@@ -118,6 +122,6 @@ describe('plugin-jsx-proptypes', () => {
 
     expect(defaultProps.length).toEqual(0)
     expect(propTypes.length).toEqual(1)
-    expect(propTypes[0].type).toBe(CHUNK_TYPE.AST)
+    expect(propTypes[0].type).toBe(ChunkType.AST)
   })
 })
diff --git a/packages/teleport-plugin-preact-base-component/__tests__/index.ts b/packages/teleport-plugin-preact-base-component/__tests__/index.ts
index 4ab4a382..72265adb 100644
--- a/packages/teleport-plugin-preact-base-component/__tests__/index.ts
+++ b/packages/teleport-plugin-preact-base-component/__tests__/index.ts
@@ -1,6 +1,6 @@
 import { createPlugin } from '../src/index'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import { ChunkType, ComponentStructure } from '@teleporthq/teleport-types'
 
 describe('plugin-preact-base-component', () => {
   const plugin = createPlugin({
@@ -9,7 +9,7 @@ describe('plugin-preact-base-component', () => {
   })
 
   it('outputs two AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component('Test', elementNode('container')),
@@ -22,16 +22,16 @@ describe('plugin-preact-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('component-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('export-chunk')
   })
 
   it('works with state definitions', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -51,10 +51,10 @@ describe('plugin-preact-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('component-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('export-chunk')
   })
diff --git a/packages/teleport-plugin-react-app-routing/__tests__/index.ts b/packages/teleport-plugin-react-app-routing/__tests__/index.ts
index 5878e7a2..82212641 100644
--- a/packages/teleport-plugin-react-app-routing/__tests__/index.ts
+++ b/packages/teleport-plugin-react-app-routing/__tests__/index.ts
@@ -5,8 +5,8 @@ import {
   conditionalNode,
   dynamicNode,
   definition,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+} from '@teleporthq/teleport-uidl-builders'
+import { ChunkType, ComponentStructure } from '@teleporthq/teleport-types'
 
 describe('plugin-react-app-routing', () => {
   const plugin = createPlugin({
@@ -15,7 +15,7 @@ describe('plugin-react-app-routing', () => {
   })
 
   it('outputs two AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -39,10 +39,10 @@ describe('plugin-react-app-routing', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('app-routing-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('dom-render-chunk')
 
diff --git a/packages/teleport-plugin-react-base-component/__tests__/index.ts b/packages/teleport-plugin-react-base-component/__tests__/index.ts
index 408b2b3c..38a3f6ad 100644
--- a/packages/teleport-plugin-react-base-component/__tests__/index.ts
+++ b/packages/teleport-plugin-react-base-component/__tests__/index.ts
@@ -1,6 +1,6 @@
 import { createPlugin } from '../src/index'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
 
 describe('plugin-react-base-component', () => {
   const plugin = createPlugin({
@@ -9,7 +9,7 @@ describe('plugin-react-base-component', () => {
   })
 
   it('outputs two AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component('Test', elementNode('container')),
@@ -22,10 +22,10 @@ describe('plugin-react-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('component-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('export-chunk')
 
@@ -35,7 +35,7 @@ describe('plugin-react-base-component', () => {
   })
 
   it('adds state hooks when state definitions exist', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -55,10 +55,10 @@ describe('plugin-react-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('component-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('export-chunk')
 
diff --git a/packages/teleport-plugin-react-jss/__tests__/index.ts b/packages/teleport-plugin-react-jss/__tests__/index.ts
index 92b46c98..344ad45c 100644
--- a/packages/teleport-plugin-react-jss/__tests__/index.ts
+++ b/packages/teleport-plugin-react-jss/__tests__/index.ts
@@ -1,11 +1,11 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure, ChunkDefinition } from '@teleporthq/teleport-types'
+  ComponentStructure,
+  ChunkDefinition,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('plugin-react-jss', () => {
   const plugin = createPlugin({ styleChunkName: 'jss-chunk', exportChunkName: 'export-chunk' })
@@ -26,8 +26,8 @@ describe('plugin-react-jss', () => {
         prop: 'props.',
       },
     },
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     linkAfter: ['import-local'],
     content: {},
   }
@@ -68,9 +68,9 @@ describe('plugin-react-jss', () => {
     expect(injectSheet.path).toBe('react-jss')
 
     expect(chunks.length).toBe(3)
-    expect(chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(chunks[1].type).toBe(ChunkType.AST)
     expect(chunks[1].name).toBe('jss-chunk')
-    expect(chunks[2].type).toBe(CHUNK_TYPE.AST)
+    expect(chunks[2].type).toBe(ChunkType.AST)
     expect(chunks[2].name).toBe('export-chunk')
   })
 })
diff --git a/packages/teleport-plugin-react-styled-components/__tests__/index.ts b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
index a244f716..c8f4e292 100644
--- a/packages/teleport-plugin-react-styled-components/__tests__/index.ts
+++ b/packages/teleport-plugin-react-styled-components/__tests__/index.ts
@@ -1,11 +1,11 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure, ChunkDefinition } from '@teleporthq/teleport-types'
+  ComponentStructure,
+  ChunkDefinition,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('Testing the functionality for StyledComponents', () => {
   const plugin = createPlugin()
@@ -25,8 +25,8 @@ describe('Testing the functionality for StyledComponents', () => {
         prop: 'props.',
       },
     },
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     linkAfter: ['import-local'],
     content: {},
   }
diff --git a/packages/teleport-plugin-react-styled-jsx/__tests__/index.ts b/packages/teleport-plugin-react-styled-jsx/__tests__/index.ts
index ac71b27c..132649d6 100644
--- a/packages/teleport-plugin-react-styled-jsx/__tests__/index.ts
+++ b/packages/teleport-plugin-react-styled-jsx/__tests__/index.ts
@@ -1,11 +1,11 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
-  component,
-  elementNode,
-  staticNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure, ChunkDefinition } from '@teleporthq/teleport-types'
+  ComponentStructure,
+  ChunkDefinition,
+  ChunkType,
+  FileType,
+} from '@teleporthq/teleport-types'
 import { createPlugin } from '../src/index'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('plugin-react-styled-jsx', () => {
   const plugin = createPlugin()
@@ -36,8 +36,8 @@ describe('plugin-react-styled-jsx', () => {
         prop: 'props.',
       },
     },
-    type: CHUNK_TYPE.AST,
-    fileType: FILE_TYPE.JS,
+    type: ChunkType.AST,
+    fileType: FileType.JS,
     linkAfter: ['import-local'],
     content: {},
   }
diff --git a/packages/teleport-plugin-stencil-app-routing/__tests__/index.ts b/packages/teleport-plugin-stencil-app-routing/__tests__/index.ts
index 5c07d484..68ca2ee9 100644
--- a/packages/teleport-plugin-stencil-app-routing/__tests__/index.ts
+++ b/packages/teleport-plugin-stencil-app-routing/__tests__/index.ts
@@ -1,7 +1,6 @@
-import { ComponentStructure, ComponentUIDL } from '@teleporthq/teleport-types'
+import { ComponentStructure, ComponentUIDL, ChunkType, FileType } from '@teleporthq/teleport-types'
 import stencilAppRouting from '../src/index'
 import projectUIDL from '../../../examples/test-samples/project-sample.json'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
 
 describe('Testing the functionality for Stencil Router', () => {
   it('Should generate chunks for routing', async () => {
@@ -18,12 +17,12 @@ describe('Testing the functionality for Stencil Router', () => {
     expect(chunks.length).toBe(2)
     expect(Object.keys(dependencies).length).toBe(2)
     expect(chunks[0].name).toBe('component-decorator')
-    expect(chunks[0].fileType).toBe(FILE_TYPE.TSX)
-    expect(chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(chunks[0].fileType).toBe(FileType.TSX)
+    expect(chunks[0].type).toBe(ChunkType.AST)
     expect(chunks[0].content).toBeDefined()
     expect(chunks[1].name).toBe('jsx-component')
-    expect(chunks[1].fileType).toBe(FILE_TYPE.TSX)
-    expect(chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(chunks[1].fileType).toBe(FileType.TSX)
+    expect(chunks[1].type).toBe(ChunkType.AST)
     expect(chunks[1].content).toBeDefined()
   })
 })
diff --git a/packages/teleport-plugin-stencil-base-component/__tests__/index.ts b/packages/teleport-plugin-stencil-base-component/__tests__/index.ts
index 3c378d83..cff9c5f7 100644
--- a/packages/teleport-plugin-stencil-base-component/__tests__/index.ts
+++ b/packages/teleport-plugin-stencil-base-component/__tests__/index.ts
@@ -1,6 +1,6 @@
 import { createPlugin } from '../src/index'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
 
 describe('plugin-stencil-base-component', () => {
   const plugin = createPlugin({
@@ -9,7 +9,7 @@ describe('plugin-stencil-base-component', () => {
   })
 
   it('outputs two AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component('Test', elementNode('container')),
@@ -22,16 +22,16 @@ describe('plugin-stencil-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('decorator-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('component-chunk')
   })
 
   it('works with state definitions', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -51,10 +51,10 @@ describe('plugin-stencil-base-component', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('decorator-chunk')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('component-chunk')
   })
diff --git a/packages/teleport-plugin-vue-app-routing/__tests__/index.ts b/packages/teleport-plugin-vue-app-routing/__tests__/index.ts
index f2e9e3ad..23edadd8 100644
--- a/packages/teleport-plugin-vue-app-routing/__tests__/index.ts
+++ b/packages/teleport-plugin-vue-app-routing/__tests__/index.ts
@@ -5,8 +5,8 @@ import {
   conditionalNode,
   dynamicNode,
   definition,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+} from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
 
 describe('plugin-vue-app-routing', () => {
   const plugin = createPlugin({
@@ -14,7 +14,7 @@ describe('plugin-vue-app-routing', () => {
   })
 
   it('outputs three AST chunks with the corresponding chunk names', async () => {
-    const structure = {
+    const structure: ComponentStructure = {
       chunks: [],
       options: {},
       uidl: component(
@@ -38,7 +38,7 @@ describe('plugin-vue-app-routing', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(1)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[0].type).toBe(ChunkType.AST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].content.length).toBe(3)
     expect(result.chunks[0].name).toBe('code-chunk')
diff --git a/packages/teleport-plugin-vue-base-component/__tests__/index.ts b/packages/teleport-plugin-vue-base-component/__tests__/index.ts
index f80ee016..b18d44f1 100644
--- a/packages/teleport-plugin-vue-base-component/__tests__/index.ts
+++ b/packages/teleport-plugin-vue-base-component/__tests__/index.ts
@@ -1,6 +1,6 @@
 import { createPlugin } from '../src/index'
 import { structure } from './mocks'
-import { CHUNK_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { ChunkType } from '@teleporthq/teleport-types'
 
 describe('vue-base-component-plugin', () => {
   const plugin = createPlugin({
@@ -16,10 +16,10 @@ describe('vue-base-component-plugin', () => {
 
     // AST chunks created
     expect(result.chunks.length).toBe(2)
-    expect(result.chunks[0].type).toBe(CHUNK_TYPE.HAST)
+    expect(result.chunks[0].type).toBe(ChunkType.HAST)
     expect(result.chunks[0].content).toBeDefined()
     expect(result.chunks[0].name).toBe('component-html')
-    expect(result.chunks[1].type).toBe(CHUNK_TYPE.AST)
+    expect(result.chunks[1].type).toBe(ChunkType.AST)
     expect(result.chunks[1].content).toBeDefined()
     expect(result.chunks[1].name).toBe('component-js')
 
diff --git a/packages/teleport-plugin-vue-head-config/__tests__/index.ts b/packages/teleport-plugin-vue-head-config/__tests__/index.ts
index 6bd75aec..f3ad8a77 100644
--- a/packages/teleport-plugin-vue-head-config/__tests__/index.ts
+++ b/packages/teleport-plugin-vue-head-config/__tests__/index.ts
@@ -1,8 +1,12 @@
 import * as types from '@babel/types'
 import { createPlugin } from '../src'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { ComponentStructure } from '@teleporthq/teleport-types'
-import { CHUNK_TYPE, FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import {
+  ComponentStructure,
+  ChunkType,
+  FileType,
+  ChunkDefinition,
+} from '@teleporthq/teleport-types'
 
 describe('plugin-vue-head-config', () => {
   const plugin = createPlugin()
@@ -29,9 +33,9 @@ describe('plugin-vue-head-config', () => {
       title: 'Test Title',
     }
 
-    const jsChunk = {
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+    const jsChunk: ChunkDefinition = {
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: 'vue-js-chunk',
       content: {
         declaration: {
@@ -75,9 +79,9 @@ describe('plugin-vue-head-config', () => {
       ],
     }
 
-    const jsChunk = {
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+    const jsChunk: ChunkDefinition = {
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: 'vue-js-chunk',
       content: {
         declaration: {
@@ -117,9 +121,9 @@ describe('plugin-vue-head-config', () => {
       ],
     }
 
-    const jsChunk = {
-      type: CHUNK_TYPE.AST,
-      fileType: FILE_TYPE.JS,
+    const jsChunk: ChunkDefinition = {
+      type: ChunkType.AST,
+      fileType: FileType.JS,
       name: 'vue-js-chunk',
       content: {
         declaration: {
diff --git a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts b/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
index 02cad3b7..bded481b 100644
--- a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
+++ b/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
@@ -5,7 +5,7 @@ import invalidUidlSample from '../../../../examples/test-samples/project-invalid
 // @ts-ignore
 import template from './template-definition.json'
 import { createAngularProjectGenerator } from '../../src'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { FileType } from '@teleporthq/teleport-types'
 
 describe('Angular Project Generator', () => {
   const generator = createAngularProjectGenerator()
@@ -23,10 +23,10 @@ describe('Angular Project Generator', () => {
     const pagesFolder = appFolder.subFolders[0]
     const componentsFolder = appFolder.subFolders[1]
 
-    expect(srcFolder.files[0].fileType).toBe(FILE_TYPE.HTML)
+    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(FILE_TYPE.TS)
+    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')
diff --git a/packages/teleport-project-generator/__tests__/file-handlers.ts b/packages/teleport-project-generator/__tests__/file-handlers.ts
index be552f80..305f78ee 100644
--- a/packages/teleport-project-generator/__tests__/file-handlers.ts
+++ b/packages/teleport-project-generator/__tests__/file-handlers.ts
@@ -1,12 +1,10 @@
 import { handlePackageJSON, createEntryFile, createManifestJSONFile } from '../src/file-handlers'
 import { PackageJSON } from '../src/types'
-import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
-import { component, elementNode } from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
-import { FILE_TYPE } from '@teleporthq/teleport-shared/dist/cjs/constants'
+import { GeneratedFolder, ProjectUIDL, FileType } from '@teleporthq/teleport-types'
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
 
 import { createStrategyWithCommonGenerator } from './mocks'
 
-// @ts-ignore
 import uidlSample from '../../../examples/test-samples/project-sample.json'
 
 describe('createHtmlIndexFile', () => {
@@ -25,7 +23,7 @@ describe('createHtmlIndexFile', () => {
 describe('createManifestJSONFile', () => {
   it('returns manifest file with prefixed assets', () => {
     const assetsPrefix = 'playground'
-    const result = createManifestJSONFile(uidlSample as ProjectUIDL, assetsPrefix)
+    const result = createManifestJSONFile((uidlSample as unknown) as ProjectUIDL, assetsPrefix)
 
     expect(result.name).toBe('manifest')
     expect(result.fileType).toBe('json')
@@ -33,7 +31,7 @@ describe('createManifestJSONFile', () => {
   })
 
   it('returns manifest file with no prefixed assets', () => {
-    const result = createManifestJSONFile(uidlSample as ProjectUIDL)
+    const result = createManifestJSONFile((uidlSample as unknown) as ProjectUIDL)
 
     expect(result.name).toBe('manifest')
     expect(result.fileType).toBe('json')
@@ -62,7 +60,7 @@ describe('handlePackageJSON', () => {
 
     handlePackageJSON(template, uidl, dependencies)
 
-    expect(template.files[0].fileType === FILE_TYPE.JSON)
+    expect(template.files[0].fileType === FileType.JSON)
     expect(template.files[0].name === 'package')
 
     const jsonContent = JSON.parse(template.files[0].content) as PackageJSON
@@ -85,7 +83,7 @@ describe('handlePackageJSON', () => {
       files: [
         {
           name: 'package',
-          fileType: FILE_TYPE.JSON,
+          fileType: FileType.JSON,
           content: JSON.stringify(templatePackageJSON),
         },
       ],
@@ -94,7 +92,7 @@ describe('handlePackageJSON', () => {
 
     handlePackageJSON(template, uidl, dependencies)
 
-    expect(template.files[0].fileType === FILE_TYPE.JSON)
+    expect(template.files[0].fileType === FileType.JSON)
     expect(template.files[0].name === 'package')
 
     const jsonContent = JSON.parse(template.files[0].content) as PackageJSON
diff --git a/packages/teleport-shared/__tests__/builders/html-builders.ts b/packages/teleport-shared/__tests__/builders/html-builders.ts
index c1afc403..f7d9b6a5 100644
--- a/packages/teleport-shared/__tests__/builders/html-builders.ts
+++ b/packages/teleport-shared/__tests__/builders/html-builders.ts
@@ -1,4 +1,4 @@
-import { createHTMLNode, createTextNode } from '../../src/builders/html-builders'
+import { createHTMLNode, createTextNode } from '../../src/builders/hast-builders'
 
 describe('HTML Builders', () => {
   describe('createHTMLNode', () => {
diff --git a/packages/teleport-shared/__tests__/builders/css-builders.ts b/packages/teleport-shared/__tests__/builders/style-builders.ts
similarity index 84%
rename from packages/teleport-shared/__tests__/builders/css-builders.ts
rename to packages/teleport-shared/__tests__/builders/style-builders.ts
index ec950125..07c60108 100644
--- a/packages/teleport-shared/__tests__/builders/css-builders.ts
+++ b/packages/teleport-shared/__tests__/builders/style-builders.ts
@@ -1,4 +1,4 @@
-import { createCSSClass } from '../../src/builders/css-builders'
+import { createCSSClass } from '../../src/builders/style-builders'
 
 describe('CSS Class Generation', () => {
   it('with empty styles', () => {
diff --git a/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/index.ts b/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/index.ts
index 8e9a69dc..3f95dec2 100644
--- a/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/index.ts
+++ b/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/index.ts
@@ -2,7 +2,7 @@ import * as types from '@babel/types'
 import componentUIDLSample from '../../../../../examples/test-samples/component-sample.json'
 import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
 
-import { slotNode, elementNode, staticNode } from '../../../src/builders/uidl-builders'
+import { slotNode, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 import {
   JSXGenerationParams,
   JSXGenerationOptions,
diff --git a/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/utils.ts b/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/utils.ts
index a0df9232..699390d7 100644
--- a/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/utils.ts
+++ b/packages/teleport-shared/__tests__/node-handlers/node-to-jsx/utils.ts
@@ -2,7 +2,7 @@ import {
   createBinaryExpression,
   createConditionIdentifier,
 } from '../../../src/node-handlers/node-to-jsx/utils'
-import { dynamicNode } from '../../../src/builders/uidl-builders'
+import { dynamicNode } from '@teleporthq/teleport-uidl-builders'
 import {
   JSXGenerationParams,
   JSXGenerationOptions,
diff --git a/packages/teleport-shared/__tests__/utils/ast-jsx-utils.ts b/packages/teleport-shared/__tests__/utils/ast-jsx-utils.ts
deleted file mode 100644
index e872487c..00000000
--- a/packages/teleport-shared/__tests__/utils/ast-jsx-utils.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
-  stringAsTemplateLiteral,
-  addSpreadAttributeToJSXTag,
-  renameJSXTag,
-  addClassStringOnJSXTag,
-  addAttributeToJSXTag,
-  addDynamicAttributeToJSXTag,
-} from '../../src/utils/ast-jsx-utils'
-import { createJSXTag } from '../../src/builders/ast-builders'
-import {
-  JSXSpreadAttribute,
-  JSXIdentifier,
-  JSXAttribute,
-  StringLiteral,
-  JSXExpressionContainer,
-  Identifier,
-  NumberLiteral,
-} from '@babel/types'
-
-describe('stringAsTemplateLiteral', () => {
-  it('returns TemplateLiteral', () => {
-    const result = stringAsTemplateLiteral('randomString')
-
-    expect(result.type).toBe('TemplateLiteral')
-    expect(result.quasis[0].type).toBe('TemplateElement')
-  })
-})
-
-describe('addSpreadAttributeToJSXTag', () => {
-  it('runs with success', () => {
-    const tag = createJSXTag('random')
-    addSpreadAttributeToJSXTag(tag, 'randomString')
-
-    const attr = tag.openingElement.attributes[0]
-    expect(attr.type).toBe('JSXSpreadAttribute')
-    expect((attr as JSXSpreadAttribute).argument).toHaveProperty('name', 'randomString')
-  })
-})
-
-describe('renameJSXTag', () => {
-  it('runs with success', () => {
-    const tag = createJSXTag('random')
-    renameJSXTag(tag, 'NewName')
-
-    const openTag = tag.openingElement.name as JSXIdentifier
-    const closeTag = tag.closingElement.name as JSXIdentifier
-    expect(openTag.name).toBe('NewName')
-    expect(closeTag.name).toBe('NewName')
-  })
-})
-
-describe('addClassStringOnJSXTag', () => {
-  it('adds a class on an element with no classes', () => {
-    const tag = createJSXTag('button')
-
-    addClassStringOnJSXTag(tag, 'primary')
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(classAttr.name.name).toBe('className')
-    expect((classAttr.value as StringLiteral).value).toBe('primary')
-  })
-
-  it('adds a class on an element with existing classes', () => {
-    const tag = createJSXTag('button')
-    addAttributeToJSXTag(tag, 'className', 'button')
-
-    addClassStringOnJSXTag(tag, 'primary')
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(classAttr.name.name).toBe('className')
-    expect((classAttr.value as StringLiteral).value).toBe('button primary')
-  })
-})
-
-describe('addAttributeToJSXTag', () => {
-  it('adds an attribute with no value', () => {
-    const tag = createJSXTag('button')
-
-    addAttributeToJSXTag(tag, 'disabled')
-    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).toBe(null)
-  })
-
-  it('adds an attribute with the selected value', () => {
-    const tag = createJSXTag('button')
-
-    addAttributeToJSXTag(tag, 'data-attr', 'random-value')
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(classAttr.name.name).toBe('data-attr')
-    expect((classAttr.value as StringLiteral).value).toBe('random-value')
-  })
-
-  it('adds an attribute as a JSX expression when non-string', () => {
-    const tag = createJSXTag('button')
-
-    addAttributeToJSXTag(tag, 'data-attr', 1)
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(classAttr.name.name).toBe('data-attr')
-    expect(((classAttr.value as JSXExpressionContainer).expression as NumberLiteral).value).toBe(1)
-  })
-})
-
-describe('addDynamicAttributeToJSXTag', () => {
-  it('adds the dynamic JSX expression on the opening tag', () => {
-    const tag = createJSXTag('button')
-
-    addDynamicAttributeToJSXTag(tag, 'dynamicValue', 'title')
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const dynamicAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(dynamicAttr.value.type).toBe('JSXExpressionContainer')
-    expect(((dynamicAttr.value as JSXExpressionContainer).expression as Identifier).name).toBe(
-      'title'
-    )
-  })
-
-  it('adds the dynamic JSX expression on the opening tag with prefix', () => {
-    const tag = createJSXTag('button')
-
-    addDynamicAttributeToJSXTag(tag, 'dynamicValue', 'title', 'props')
-    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
-
-    const dynamicAttr = tag.openingElement.attributes[0] as JSXAttribute
-    expect(dynamicAttr.value.type).toBe('JSXExpressionContainer')
-    expect((dynamicAttr.value as JSXExpressionContainer).expression.type).toBe('MemberExpression')
-  })
-})
diff --git a/packages/teleport-shared/__tests__/utils/ast-utils.ts b/packages/teleport-shared/__tests__/utils/ast-utils.ts
index 0c93eee8..ebfc7806 100644
--- a/packages/teleport-shared/__tests__/utils/ast-utils.ts
+++ b/packages/teleport-shared/__tests__/utils/ast-utils.ts
@@ -1,120 +1,257 @@
 import {
-  ParsedASTNode,
+  stringAsTemplateLiteral,
+  addSpreadAttributeToJSXTag,
+  renameJSXTag,
+  addClassStringOnJSXTag,
+  addAttributeToJSXTag,
+  addDynamicAttributeToJSXTag,
   convertValueToLiteral,
   objectToObjectExpression,
-} from '../../src/utils/ast-js-utils'
+} from '../../src/utils/ast-utils'
+import ParsedASTNode from '../../src/utils/parsed-ast'
+import { createJSXTag } from '../../src/builders/ast-builders'
+import {
+  JSXSpreadAttribute,
+  JSXIdentifier,
+  JSXAttribute,
+  StringLiteral,
+  JSXExpressionContainer,
+  Identifier,
+  NumberLiteral,
+  ObjectExpression,
+  ArrayExpression,
+  BooleanLiteral,
+  ObjectProperty,
+} from '@babel/types'
 
-describe('AST Utils ', () => {
-  describe('ParsedASTNode', () => {
-    it('should create ASTNode', () => {
-      const result = new ParsedASTNode('test')
+describe('stringAsTemplateLiteral', () => {
+  it('returns TemplateLiteral', () => {
+    const result = stringAsTemplateLiteral('randomString')
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('ast')
-      expect(result.ast).toBe('test')
-    })
+    expect(result.type).toBe('TemplateLiteral')
+    expect(result.quasis[0].type).toBe('TemplateElement')
   })
-  describe('convertValueToLiteral', () => {
-    it('should convert value to literal', () => {
-      const result = convertValueToLiteral('test')
+})
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result).toHaveProperty('value')
-      expect(result.type).toEqual('StringLiteral')
-      expect(result.value).toEqual('test')
-    })
-    it('should convert number value to numerical literal', () => {
-      const result = convertValueToLiteral(2, 'number')
+describe('addSpreadAttributeToJSXTag', () => {
+  it('runs with success', () => {
+    const tag = createJSXTag('random')
+    addSpreadAttributeToJSXTag(tag, 'randomString')
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result).toHaveProperty('value')
-      expect(result.type).toEqual('NumericLiteral')
-      expect(result.value).toEqual(2)
-    })
-    it('should convert boolean value to boolean literal', () => {
-      const result = convertValueToLiteral(true, 'boolean')
+    const attr = tag.openingElement.attributes[0]
+    expect(attr.type).toBe('JSXSpreadAttribute')
+    expect((attr as JSXSpreadAttribute).argument).toHaveProperty('name', 'randomString')
+  })
+})
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result).toHaveProperty('value')
-      expect(result.type).toEqual('BooleanLiteral')
-      expect(result.value).toEqual(true)
-    })
-    it('should convert object value to boolean literal', () => {
-      const result = convertValueToLiteral({ test: true }, 'object')
+describe('renameJSXTag', () => {
+  it('runs with success', () => {
+    const tag = createJSXTag('random')
+    renameJSXTag(tag, 'NewName')
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result).toHaveProperty('properties')
-      expect(result.type).toEqual('ObjectExpression')
-      expect(result.properties.length).toEqual(1)
-      expect(result.properties[0]).toHaveProperty('key')
-      expect(result.properties[0].key.type).toBe('StringLiteral')
-      expect(result.properties[0].key.value).toBe('test')
-      expect(result.properties[0]).toHaveProperty('value')
-      expect(result.properties[0].value.type).toBe('BooleanLiteral')
-      expect(result.properties[0].value.value).toBe(true)
-    })
-    it('should convert array value to literals', () => {
-      const testArray = ['test', 'testAgain', 'andAgain']
-      const result = convertValueToLiteral(testArray)
+    const openTag = tag.openingElement.name as JSXIdentifier
+    const closeTag = tag.closingElement.name as JSXIdentifier
+    expect(openTag.name).toBe('NewName')
+    expect(closeTag.name).toBe('NewName')
+  })
+})
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result.type).toBe('ArrayExpression')
-      expect(result).toHaveProperty('elements')
-      expect(result.elements.length).toEqual(testArray.length)
-    })
-    it('should convert identifier value to literal', () => {
-      const result = convertValueToLiteral(String)
+describe('addClassStringOnJSXTag', () => {
+  it('adds a class on an element with no classes', () => {
+    const tag = createJSXTag('button')
 
-      expect(typeof result).toBe('object')
-      expect(result).toHaveProperty('type')
-      expect(result.type).toBe('Identifier')
-    })
-    it('returns a null literal for null or undefined', () => {
-      expect(convertValueToLiteral(null).type).toBe('NullLiteral')
-      expect(convertValueToLiteral(undefined).type).toBe('NullLiteral')
-    })
+    addClassStringOnJSXTag(tag, 'primary')
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(classAttr.name.name).toBe('className')
+    expect((classAttr.value as StringLiteral).value).toBe('primary')
+  })
+
+  it('adds a class on an element with existing classes', () => {
+    const tag = createJSXTag('button')
+    addAttributeToJSXTag(tag, 'className', 'button')
+
+    addClassStringOnJSXTag(tag, 'primary')
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(classAttr.name.name).toBe('className')
+    expect((classAttr.value as StringLiteral).value).toBe('button primary')
+  })
+})
+
+describe('addAttributeToJSXTag', () => {
+  it('adds an attribute with no value', () => {
+    const tag = createJSXTag('button')
+
+    addAttributeToJSXTag(tag, 'disabled')
+    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).toBe(null)
+  })
+
+  it('adds an attribute with the selected value', () => {
+    const tag = createJSXTag('button')
+
+    addAttributeToJSXTag(tag, 'data-attr', 'random-value')
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(classAttr.name.name).toBe('data-attr')
+    expect((classAttr.value as StringLiteral).value).toBe('random-value')
+  })
+
+  it('adds an attribute as a JSX expression when non-string', () => {
+    const tag = createJSXTag('button')
+
+    addAttributeToJSXTag(tag, 'data-attr', 1)
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const classAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(classAttr.name.name).toBe('data-attr')
+    expect(((classAttr.value as JSXExpressionContainer).expression as NumberLiteral).value).toBe(1)
+  })
+})
+
+describe('addDynamicAttributeToJSXTag', () => {
+  it('adds the dynamic JSX expression on the opening tag', () => {
+    const tag = createJSXTag('button')
+
+    addDynamicAttributeToJSXTag(tag, 'dynamicValue', 'title')
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const dynamicAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(dynamicAttr.value.type).toBe('JSXExpressionContainer')
+    expect(((dynamicAttr.value as JSXExpressionContainer).expression as Identifier).name).toBe(
+      'title'
+    )
+  })
+
+  it('adds the dynamic JSX expression on the opening tag with prefix', () => {
+    const tag = createJSXTag('button')
+
+    addDynamicAttributeToJSXTag(tag, 'dynamicValue', 'title', 'props')
+    expect(tag.openingElement.attributes[0].type).toBe('JSXAttribute')
+
+    const dynamicAttr = tag.openingElement.attributes[0] as JSXAttribute
+    expect(dynamicAttr.value.type).toBe('JSXExpressionContainer')
+    expect((dynamicAttr.value as JSXExpressionContainer).expression.type).toBe('MemberExpression')
+  })
+})
+
+describe('ParsedASTNode', () => {
+  it('should create ASTNode', () => {
+    const result = new ParsedASTNode('test')
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('ast')
+    expect(result.ast).toBe('test')
   })
+})
+describe('convertValueToLiteral', () => {
+  it('should convert value to literal', () => {
+    const result = convertValueToLiteral('test') as StringLiteral
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('value')
+    expect(result.type).toEqual('StringLiteral')
+    expect(result.value).toEqual('test')
+  })
+  it('should convert number value to numerical literal', () => {
+    const result = convertValueToLiteral(2, 'number') as NumberLiteral
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('value')
+    expect(result.type).toEqual('NumericLiteral')
+    expect(result.value).toEqual(2)
+  })
+  it('should convert boolean value to boolean literal', () => {
+    const result = convertValueToLiteral(true, 'boolean') as BooleanLiteral
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('value')
+    expect(result.type).toEqual('BooleanLiteral')
+    expect(result.value).toEqual(true)
+  })
+  it('should convert object value to boolean literal', () => {
+    const result = convertValueToLiteral({ test: true }, 'object') as ObjectExpression
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('properties')
+    expect(result.type).toEqual('ObjectExpression')
+    expect(result.properties.length).toEqual(1)
+    const property = result.properties[0] as ObjectProperty
+    expect(property).toHaveProperty('key')
+    expect(property.key.type).toBe('StringLiteral')
+    expect(property.key.value).toBe('test')
+    expect(property).toHaveProperty('value')
+    expect(property.value.type).toBe('BooleanLiteral')
+    expect((property.value as BooleanLiteral).value).toBe(true)
+  })
+  it('should convert array value to literals', () => {
+    const testArray = ['test', 'testAgain', 'andAgain']
+    const result = convertValueToLiteral(testArray) as ArrayExpression
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result.type).toBe('ArrayExpression')
+    expect(result).toHaveProperty('elements')
+    expect(result.elements.length).toEqual(testArray.length)
+  })
+  it('should convert identifier value to literal', () => {
+    const result = convertValueToLiteral(String)
+
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result.type).toBe('Identifier')
+  })
+  it('returns a null literal for null or undefined', () => {
+    expect(convertValueToLiteral(null).type).toBe('NullLiteral')
+    expect(convertValueToLiteral(undefined).type).toBe('NullLiteral')
+  })
+})
 
-  describe('objectToObjectExpression', () => {
-    it('should transform object to object expression', () => {
-      const objTest = {
-        stringKey: 'test',
-        booleanKey: true,
-        numberKey: 2,
-        arrayKey: ['test', 'testAgain'],
-        objectKey: {
-          identifierKey: String,
-        },
-      }
-      const result = objectToObjectExpression(objTest)
+describe('objectToObjectExpression', () => {
+  it('should transform object to object expression', () => {
+    const objTest = {
+      stringKey: 'test',
+      booleanKey: true,
+      numberKey: 2,
+      arrayKey: ['test', 'testAgain'],
+      objectKey: {
+        identifierKey: String,
+      },
+    }
+    const result = objectToObjectExpression(objTest)
 
+    expect(typeof result).toBe('object')
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('properties')
+    expect(result.properties.length).toEqual(Object.keys(objTest).length)
+    expect(result.properties.length).toEqual(Object.keys(objTest).length)
+  })
+  const objectTest: Record<string, any> = {
+    arrayKey: { key: Array },
+    numberKey: { key: Number },
+    stringKey: { key: String },
+    booleanKey: { key: Boolean },
+    objectKey: { key: Object },
+    astKey: { key: new ParsedASTNode('') },
+  }
+  Object.keys(objectTest).map((key) => {
+    it(`should transform ${key} object to object expression`, () => {
+      const result = objectToObjectExpression(objectTest[key])
       expect(typeof result).toBe('object')
       expect(result).toHaveProperty('type')
       expect(result).toHaveProperty('properties')
-      expect(result.properties.length).toEqual(Object.keys(objTest).length)
-      expect(result.properties.length).toEqual(Object.keys(objTest).length)
-    })
-    const objectTest = {
-      arrayKey: { key: Array },
-      numberKey: { key: Number },
-      stringKey: { key: String },
-      booleanKey: { key: Boolean },
-      objectKey: { key: Object },
-      astKey: { key: new ParsedASTNode('') },
-    }
-    Object.keys(objectTest).map((key) => {
-      it(`should transform ${key} object to object expression`, () => {
-        const result = objectToObjectExpression(objectTest[key])
-        expect(typeof result).toBe('object')
-        expect(result).toHaveProperty('type')
-        expect(result).toHaveProperty('properties')
-        expect(result.type).toEqual('ObjectExpression')
-      })
+      expect(result.type).toEqual('ObjectExpression')
     })
   })
 })
diff --git a/packages/teleport-shared/__tests__/utils/jss-utils.ts b/packages/teleport-shared/__tests__/utils/style-utils.ts
similarity index 95%
rename from packages/teleport-shared/__tests__/utils/jss-utils.ts
rename to packages/teleport-shared/__tests__/utils/style-utils.ts
index 1dc4e4d9..1c27cb7b 100644
--- a/packages/teleport-shared/__tests__/utils/jss-utils.ts
+++ b/packages/teleport-shared/__tests__/utils/style-utils.ts
@@ -1,4 +1,4 @@
-import { getContentOfStyleObject } from '../../src/utils/jss-utils'
+import { getContentOfStyleObject } from '../../src/utils/style-utils'
 import { UIDLStyleDefinitions } from '@teleporthq/teleport-types'
 
 describe('JSS Utils ', () => {
diff --git a/packages/teleport-shared/__tests__/utils/uidl-utils.ts b/packages/teleport-shared/__tests__/utils/uidl-utils.ts
index ed3520e8..fd34d3f0 100644
--- a/packages/teleport-shared/__tests__/utils/uidl-utils.ts
+++ b/packages/teleport-shared/__tests__/utils/uidl-utils.ts
@@ -24,7 +24,7 @@ import {
   repeatNode,
   conditionalNode,
   slotNode,
-} from '../../src/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 import {
   UIDLStyleDefinitions,
   UIDLElementNode,
diff --git a/packages/teleport-shared/__tests__/builders/uidl-builders.ts b/packages/teleport-uidl-builders/__tests__/component-builders.ts
similarity index 98%
rename from packages/teleport-shared/__tests__/builders/uidl-builders.ts
rename to packages/teleport-uidl-builders/__tests__/component-builders.ts
index 6fdc1792..65aac6d1 100644
--- a/packages/teleport-shared/__tests__/builders/uidl-builders.ts
+++ b/packages/teleport-uidl-builders/__tests__/component-builders.ts
@@ -6,7 +6,7 @@ import {
   dynamicNode,
   repeatNode,
   conditionalNode,
-} from '../../src/builders/uidl-builders'
+} from '../src/component-builders'
 import { UIDLStaticValue, UIDLElement, UIDLDynamicReference } from '@teleporthq/teleport-types'
 
 describe('UIDL Builders', () => {
diff --git a/packages/teleport-shared/__tests__/builders/project-builders.ts b/packages/teleport-uidl-builders/__tests__/project-builders.ts
similarity index 72%
rename from packages/teleport-shared/__tests__/builders/project-builders.ts
rename to packages/teleport-uidl-builders/__tests__/project-builders.ts
index e4c51c57..1ad156bb 100644
--- a/packages/teleport-shared/__tests__/builders/project-builders.ts
+++ b/packages/teleport-uidl-builders/__tests__/project-builders.ts
@@ -1,8 +1,6 @@
-import { UIDLStaticValue } from '@teleporthq/teleport-types/lib'
-import { ComponentUIDL } from '@teleporthq/teleport-types/src'
-import { component } from '../../src/builders/uidl-builders'
-import { ProjectUIDL } from '@teleporthq/teleport-types/dist/esm'
-import { project, simpleProjectGlobals } from '../../src/builders/project-builders'
+import { component } from '../src/component-builders'
+import { ProjectUIDL, ComponentUIDL, UIDLStaticValue } from '@teleporthq/teleport-types'
+import { project, simpleProjectGlobals } from '../src/project-builders'
 
 describe('Project Builders', () => {
   const dummyNode: UIDLStaticValue = { type: 'static', content: 'test' }
diff --git a/packages/teleport-uidl-validator/__tests__/validator/index.ts b/packages/teleport-uidl-validator/__tests__/validator/index.ts
index 49401b75..a5c91f7a 100644
--- a/packages/teleport-uidl-validator/__tests__/validator/index.ts
+++ b/packages/teleport-uidl-validator/__tests__/validator/index.ts
@@ -16,7 +16,7 @@ import {
   repeatNode,
   dynamicNode,
   elementNode,
-} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
+} from '@teleporthq/teleport-uidl-builders'
 
 const uidl = component(
   'Repeat Component',