WIP: Release/0.6 (#140)

* refactor(Support json attributes): Handle json attributes form uidl component files

No UIDL schmea update. Adds handling for new schema definition for attributes from
#35#issuecomment-477526242

BREAKING CHANGE: After this change, assigning string values on attributes will throw error. Use the
new json structure instead.

re #35, re #87, re #105

* Add repeat test and update structrue

* Temp commit

* Patch up attempt to support string in attribute

* Tests pass after merge with master

* refactor(attrs): dynamic and static nodes for all ocurrences of $ str… (#120)

* refactor(attrs): dynamic and static nodes for all ocurrences of $ strings

only text nodes are left with the old implementation, but they require more changes in the UIDL
structure. Repeats are now working as expected with both dynamic and static attributes as the
datasource

BREAKING CHANGE: old UIDLs don't work anymore

#35

* refactor(mapping): new UIDL attribute structure used to replace $attrs. reference

BREAKING CHANGE: Old mappings do not work anymore

#35

* refactor(dataSource): Switch statement for selecting the right identifier

* Refactor/#117 style props uidl (#127)

* Attrs update for main exmaple uidls

* Functional basic styles in react component generators

* Add nested style tests. Failing vue, working react

* Typo fixes

* Passing tests for vue generaorts wiht new style definitions

* All tests passing for new style definitions

* Hacky fix for static content not supportive of arrays

* WIP: Feature/#112 object referinging in dynamic assignments (#131)

* Add back commented tests

* Vue generators support for object props

* Feature/#118 udil string to json props (#130)

* Style object utils for mixed uidl values

* Attributes mapping to new json values

* Feature/#112 object referinging in dynamic assignments (#132)

* Add back commented tests

* Vue generators support for object props

* Fix styledjsx incorect props assignment

* Refactor/#105 component structure changes (#134)

* refactor(UIDL Structure): Differentiate between Node and Element

BREAKING CHANGE: UIDLs need to be written in the new form

#105

* refactor(UIDL Structure): Mapping and Repeat

BREAKING CHANGE: Old UIDLs and Mappings don't work anymore

#105

* refactor(UIDL Structure): Conditional rendering nodes in the UIDL

BREAKING CHANGE: New way of describing states

#closes 105

* refactor(UIDL Structure): Routing implemented based on the new UIDL nodes

BREAKING CHANGE: Old UIDLs not working anymore

#105

* refactor(UIDL Structure): Routing for all project-generators

#105

* refactor(UIDL Structure): improve tests

* test(UIDL Structure): All tests running except for validators

#105

* Refactor/minor cleanup in 0.6 (#138)

* refactor(Switch statement in react node generation): Add switch statement for node type

Changes react node generation to use a switch which returns a proper value, no longer :any.

* refactor(Switch statement in vue component generation): Add switch statement for node type

* refactor(Common types for generator functions):

Adds common types for the generateNodeSyntax function and addAttribute functions. Opens up the way
to standardizing the entire component generation process.

* Remove accumulators in switch statements

* Fixes/release 0.6 (#142)

* refactor(Switch statement in react node generation): Add switch statement for node type

Changes react node generation to use a switch which returns a proper value, no longer :any.

* refactor(Switch statement in vue component generation): Add switch statement for node type

* refactor(Common types for generator functions):

Adds common types for the generateNodeSyntax function and addAttribute functions. Opens up the way
to standardizing the entire component generation process.

* Remove accumulators in switch statements

* Make sure import statements are added in the new uidl for project examples

* feat(React Conditional Stmt Improvements): Better boolean checks

Transforms conditionalVariable === true to conditionalVariable and condVar === false to !condVar

fix #139

* Rename stateIdentifier back to normal

* Refactor(component-generators): Refactored component generators inter… (#137)

* refactor(component-generators): Refactored component generators interface to expose an array of file

re #27

* refactor(component-generators): Fixed vue page file name. Refactored project-utils

re #27

* refactor(component-generator): Renamed extension to fileType and removed the dot

re #27

* refactor(component-generators): Fixed example file to have running generators

* refactor(component-generators): Updated UIDL smaple to include style info

re #27

* refactor(component-generators): Fixed component and style tests

re #123

* refactor(component-generators): Updated all tests to new stucture

fix #27

* feat(conditional render): support props as conditional identifier (#144)

until now only state was allowed

closes #75

* Fix for #148 (#150)

* Fix for #148

* Log the entrie stack for errors

* Remove commented out code for dynamic props

* Same treatment for dynamics in both reapet and children

* Member expression to jsx expression container

* feat(uidl-schema): uidl-schema-update (#143)

* feat(uidl-schema): adding partial uidl-schema

* feat(new uidl schema): adding uidl schema

new uidl schema. deleting old one. fix on tests. decommenting tests.

* feat(mapping): children placeholder implementation with new UIDL node structure (#149)

added referenceType 'children' to support composition between mapping structure and uidl structure

BREAKING CHANGE: old UIDLs don't work with the new structure

resolve #44

* chore(tests): remove console.log

* chore: typings for new file

* refactor(Better project error): Full stack trace log (#162)

When a component fails to render I'd like to know where the error happened and why. Simply wwarning
the error is not enough

* Feature/#118 uidl transform in pipeline (#155)

* Flow is ready for parsing string value of uidl

* Parser passing tests expect for old children

* Fix failing tests due to missing interface imports

* Children parsing according to current 0.6 spec

* Remove useless test

* Support repeater and conditional in string to object parsing

* Pass noClone in component parser when running from project #155

* feat(slots): support for React children and Vue <slot> (#158)

* feat(slots): support for React children and Vue <slot>

closes #156

* feat(slots): Support for traversing through slot nodes

closes #156

* chore: typo

.gitignore

@@ -13,6 +13,7 @@ coverage/
 .vscode
 *.swp
 *.swo
+.history/
 
 # Logs
 logs

__tests__/end2end/component-generators.ts

@@ -0,0 +1,169 @@
+// @ts-ignore
+import uidlSampleJSON from '../fixtures/component-sample.json'
+// @ts-ignore
+import invalidUidlSampleJSON from '../fixtures/component-invalid-sample.json'
+
+import { createReactComponentGenerator, createVueComponentGenerator } from '../../src'
+import { ComponentUIDL } from '../../src/typings/uidl-definitions'
+import { GeneratedFile } from '../../src/typings/generators'
+import { ReactComponentStylingFlavors } from '../../src/component-generators/react/react-component'
+
+const uidlSample = uidlSampleJSON as ComponentUIDL
+const invalidUidlSample = invalidUidlSampleJSON as ComponentUIDL
+const JS_FILE = 'js'
+const VUE_FILE = 'vue'
+const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
+  files.find((file) => file.fileType === type)
+
+describe('React Component Generator', () => {
+  describe('with CSS Modules', () => {
+    const generator = createReactComponentGenerator({
+      variation: ReactComponentStylingFlavors.CSSModules,
+    })
+
+    it('should return the files containing the code as string', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const jsFile = findFileByType(result.files, JS_FILE)
+
+      expect(jsFile).toBeDefined()
+      expect(result.files).toBeDefined()
+      expect(Array.isArray(result.files)).toBeTruthy()
+      expect(result.files.length).toBeTruthy()
+      expect(jsFile.content).toContain('import React')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+
+  describe('with JSS', () => {
+    const generator = createReactComponentGenerator({
+      variation: ReactComponentStylingFlavors.JSS,
+    })
+
+    it('should return the files containing the code as string', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const jsFile = findFileByType(result.files, JS_FILE)
+
+      expect(jsFile).toBeDefined()
+      expect(result.files.length).toBe(1)
+      expect(jsFile.content).toContain('import React')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+
+  describe('with InlineStyles', () => {
+    const generator = createReactComponentGenerator()
+
+    it('should return the files containing the code as string', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const jsFile = findFileByType(result.files, JS_FILE)
+
+      expect(jsFile).toBeDefined()
+      expect(result.files.length).toBe(1)
+      expect(jsFile.content).toContain('import React')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+
+  describe('with Custom Mapping', () => {
+    const generator = createReactComponentGenerator({
+      variation: ReactComponentStylingFlavors.InlineStyles,
+      customMapping: { elements: { container: { elementType: 'fakediv' } } },
+    })
+
+    it('should render <fakediv> tags', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const jsFile = findFileByType(result.files, JS_FILE)
+
+      expect(jsFile).toBeDefined()
+      expect(result.files.length).toBe(1)
+      expect(jsFile.content).toContain('<fakediv')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+})
+
+describe('Vue Component Generator', () => {
+  describe('with standard plugins', () => {
+    const generator = createVueComponentGenerator()
+
+    it('should return the files containing the code as string', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const vueFile = findFileByType(result.files, VUE_FILE)
+
+      expect(vueFile).toBeDefined()
+      expect(vueFile.content).toContain('<template>')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+
+  describe('with Custom Mapping', () => {
+    const generator = createVueComponentGenerator()
+    generator.addMapping({ elements: { container: { elementType: 'fakediv' } } })
+
+    it('should render <fakediv> tags', async () => {
+      const result = await generator.generateComponent(uidlSample)
+      const vueFile = findFileByType(result.files, VUE_FILE)
+
+      expect(vueFile).toBeDefined()
+      expect(vueFile.content).toContain('<fakediv')
+      expect(result.dependencies).toBeDefined()
+    })
+  })
+})
+
+describe('Vue Component Validator', () => {
+  const generator = createVueComponentGenerator()
+
+  it('works with valid UIDL sample', async () => {
+    const result = await generator.generateComponent(uidlSample)
+    const vueFile = findFileByType(result.files, VUE_FILE)
+
+    expect(vueFile).toBeDefined()
+    expect(vueFile.content).toContain('<template>')
+    expect(result.dependencies).toBeDefined()
+  })
+  it('throws error when invalid UIDL sample is used', async () => {
+    const result = generator.generateComponent(invalidUidlSample)
+
+    await expect(result).rejects.toThrow(Error)
+  })
+  it('works when validation step is skiped', async () => {
+    const options = { skipValidation: true }
+    const result = await generator.generateComponent(invalidUidlSample, options)
+    const vueFile = findFileByType(result.files, VUE_FILE)
+
+    expect(vueFile).toBeDefined()
+    expect(vueFile.content).toContain('<template>')
+    expect(result.dependencies).toBeDefined()
+  })
+})
+
+describe('React Component Validator', () => {
+  const generator = createReactComponentGenerator({
+    variation: ReactComponentStylingFlavors.CSSModules,
+  })
+
+  it('works with valid UIDL sample', async () => {
+    const result = await generator.generateComponent(uidlSample)
+    const jsFile = findFileByType(result.files, JS_FILE)
+
+    expect(jsFile).toBeDefined()
+    expect(result.files.length).toBe(1)
+    expect(jsFile.content).toContain('import React')
+    expect(result.dependencies).toBeDefined()
+  })
+  it('throws error when invalid UIDL sample is used', async () => {
+    const result = generator.generateComponent(invalidUidlSample)
+    await expect(result).rejects.toThrow(Error)
+  })
+  it('works when validation step is skiped', async () => {
+    const options = { skipValidation: true }
+    const result = await generator.generateComponent(invalidUidlSample, options)
+    const jsFile = findFileByType(result.files, JS_FILE)
+
+    expect(jsFile).toBeDefined()
+    expect(result.files.length).toBe(1)
+    expect(jsFile.content).toContain('import React')
+    expect(result.dependencies).toBeDefined()
+  })
+})

__tests__/integration/project-generators.ts → __tests__/end2end/project-generators.ts

@@ -1,5 +1,6 @@
 // @ts-ignore
 import uidlSample from '../fixtures/project-sample.json'
+// @ts-ignore
 import invalidUidlSample from '../fixtures/project-invalid-sample.json'
 
 import {
@@ -8,12 +9,15 @@ import {
   createVueBasicGenerator,
   createVueNuxtGenerator,
 } from '../../src'
+import { ProjectUIDL } from '../../src/typings/uidl-definitions'
+
+const projectUIDL = uidlSample as ProjectUIDL
 
 describe('React Basic Project Generator', () => {
   const generator = createReactBasicGenerator()
 
   it('runs without crashing', async () => {
-    const result = await generator.generateProject(uidlSample)
+    const result = await generator.generateProject(projectUIDL)
 
     expect(result.assetsPath).toBeDefined()
     expect(result.outputFolder.name).toBe('dist')
@@ -22,9 +26,9 @@ describe('React Basic Project Generator', () => {
     const srcFolder = result.outputFolder.subFolders[0]
 
     expect(srcFolder.files[0].name).toBe('index')
-    expect(srcFolder.files[0].extension).toBe('.html')
+    expect(srcFolder.files[0].fileType).toBe('html')
     expect(srcFolder.files[1].name).toBe('index')
-    expect(srcFolder.files[1].extension).toBe('.js')
+    expect(srcFolder.files[1].fileType).toBe('js')
     expect(srcFolder.subFolders[0].name).toBe('components')
     expect(srcFolder.subFolders[1].name).toBe('pages')
   })
@@ -45,9 +49,9 @@ describe('React Basic Project Generator', () => {
     const srcFolder = result.outputFolder.subFolders[0]
 
     expect(srcFolder.files[0].name).toBe('index')
-    expect(srcFolder.files[0].extension).toBe('.html')
+    expect(srcFolder.files[0].fileType).toBe('html')
     expect(srcFolder.files[1].name).toBe('index')
-    expect(srcFolder.files[1].extension).toBe('.js')
+    expect(srcFolder.files[1].fileType).toBe('js')
     expect(srcFolder.subFolders[0].name).toBe('components')
     expect(srcFolder.subFolders[1].name).toBe('pages')
   })
@@ -57,7 +61,7 @@ describe('React Next Project Generator', () => {
   const generator = createReactNextGenerator()
 
   it('runs without crashing', async () => {
-    const result = await generator.generateProject(uidlSample)
+    const result = await generator.generateProject(projectUIDL)
 
     expect(result.assetsPath).toBeDefined()
     expect(result.outputFolder.name).toBe('dist')
@@ -66,7 +70,7 @@ describe('React Next Project Generator', () => {
     const components = result.outputFolder.subFolders[1]
     const pages = result.outputFolder.subFolders[0]
 
-    expect(components.files[0].name).toBe('ExpandableArea')
+    expect(components.files[0].name).toBe('OneComponent')
     expect(pages.files[0].name).toBe('_document')
     expect(pages.files[1].name).toBe('index')
   })
@@ -86,7 +90,7 @@ describe('React Next Project Generator', () => {
     const components = result.outputFolder.subFolders[1]
     const pages = result.outputFolder.subFolders[0]
 
-    expect(components.files[0].name).toBe('ExpandableArea')
+    expect(components.files[0].name).toBe('OneComponent')
     expect(pages.files[0].name).toBe('_document')
     expect(pages.files[1].name).toBe('index')
   })
@@ -96,7 +100,7 @@ describe('Vue Basic Project Generator', () => {
   const generator = createVueBasicGenerator()
 
   it('runs without crashing', async () => {
-    const result = await generator.generateProject(uidlSample)
+    const result = await generator.generateProject(projectUIDL)
 
     expect(result.assetsPath).toBeDefined()
     expect(result.outputFolder.name).toBe('dist')
@@ -120,7 +124,7 @@ describe('Vue Nuxt Project Generator', () => {
   const generator = createVueNuxtGenerator()
 
   it('runs without crashing', async () => {
-    const result = await generator.generateProject(uidlSample)
+    const result = await generator.generateProject(projectUIDL)
 
     expect(result.assetsPath).toBeDefined()
     expect(result.outputFolder.name).toBe('dist')

__tests__/fixtures/big-sample.json

@@ -1,8 +1,11 @@
 {
   "$schema": "https://raw.githubusercontent.com/teleporthq/teleport-code-generators/master/src/uidl-definitions/schemas/component.json",
   "name": "BigSample",
-  "content": {
-    "type": "container",
-    "children": []
+  "node": {
+    "type": "element",
+    "content": {
+      "elementType": "container",
+      "children": []
+    }
   }
 }