skypager-project-types-react/specs/literate-react.spec.md

skypager react project type

# Literate React

This project allows for you to declare react components directly inline with your writing.

The document can be pre-processed and turned into source code by the compiler.  You just worry about writing.

## Fixtures 

This is actually being be used to create a component right now to run this test.

### Simple Document Renderer

```javascript
import React from 'react'

export function div() {

}

export function SimpleDocumentRenderer(props = {}) {
  
}
```

## Specs

### The Simple Document Renderer should be available as a module

```javascript
const mod = doc.react.toModule()

mod.should.be.an('object')
mod.should.have.property('fixtures').that.an('object').that.is.not.empty
mod.fixtures.should.have.property('SimpleDocumentRenderer').that.is.a('function')
```

### The Simple Document Renderer should be available as es6 code

```javascript
const code = doc.react.toCode({
  compiler: false
})
```

### The Simple Document Renderer should be available as compiled code

```javascript
const code = doc.toCode({
  // default
  compiler: 'babel',
  compilerOptions: {
    babelrc: false,
    presets: ['skypager'],
  } 
})

code.should.match(/__es6Module/)
```

### The Simple Document Renderer should be available as webpack compiled code

```javascript
const code = doc.toCode({
  compiler: 'node',
  compilerOptions: {
    sourcemaps: false
  }
})

code.should.match(/__webpack/)
```