├── src
    ├── components
    │   ├── Nav
    │   │   ├── index.js
    │   │   ├── Tab.js
    │   │   ├── Nav.scss
    │   │   ├── Nav.js
    │   │   └── __tests__
    │   │   │   ├── Nav.spec.js
    │   │   │   └── Tab.spec.js
    │   ├── Result
    │   │   ├── index.js
    │   │   ├── Result.scss
    │   │   ├── generateHTML.js
    │   │   ├── __tests__
    │   │   │   ├── generateHTML.spec.js
    │   │   │   └── Result.spec.js
    │   │   └── Result.js
    │   ├── CodeEditor
    │   │   ├── index.js
    │   │   ├── CodeEditor.js
    │   │   └── __tests__
    │   │   │   └── CodeEditor.spec.js
    │   ├── global.scss
    │   └── Playground
    │   │   ├── Playground.scss
    │   │   ├── index.js
    │   │   ├── __tests__
    │   │       └── Playground.spec.js
    │   │   └── Playground.js
    ├── utils
    │   ├── index.js
    │   ├── isEmpty.js
    │   ├── __tests__
    │   │   ├── isEmpty.spec.js
    │   │   └── getCodeMirrorMode.spec.js
    │   └── getCodeMirrorMode.js
    ├── __tests__
    │   ├── utils
    │   │   └── beautifyHTML.js
    │   └── framework.spec.js
    ├── redux
    │   ├── rootReducer.js
    │   ├── store.js
    │   └── modules
    │   │   ├── activeTab.js
    │   │   ├── compiling.js
    │   │   ├── __tests__
    │   │       ├── compiling.spec.js
    │   │       ├── code.reducer.spec.js
    │   │       └── code.actions.spec.js
    │   │   └── code.js
    ├── index.js
    └── plugins
    │   └── parsers
    │       ├── sass.js
    │       └── __tests__
    │           └── sass.spec.js
├── bin
    ├── karma.js
    ├── build.js
    ├── webpack.js
    ├── deploy.js
    ├── concatStyleSheet.js
    └── develop.js
├── .gitignore
├── .eslintignore
├── tests.webpack.js
├── .eslintrc
├── demo
    ├── examples
    │   ├── slack-logo
    │   │   ├── html.example
    │   │   └── sass.example
    │   └── editr.js
    │   │   ├── html.example
    │   │   └── css.example
    ├── develop.html
    ├── styles.scss
    ├── gh-pages.html
    └── app.js
├── CHANGELOG.md
├── .babelrc
├── LICENSE
├── .travis.yml
├── config
    └── index.js
├── README.md
└── package.json


/src/components/Nav/index.js:
--------------------------------------------------------------------------------
1 | export default from './Nav'
2 | 


--------------------------------------------------------------------------------
/src/components/Result/index.js:
--------------------------------------------------------------------------------
1 | export default from './Result'
2 | 


--------------------------------------------------------------------------------
/bin/karma.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../build/karma.conf').default
2 | 


--------------------------------------------------------------------------------
/src/components/CodeEditor/index.js:
--------------------------------------------------------------------------------
1 | export default from './CodeEditor'
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | lib
3 | webpack
4 | coverage
5 | 
6 | node_modules
7 | *.log
8 | 


--------------------------------------------------------------------------------
/src/components/Result/Result.scss:
--------------------------------------------------------------------------------
1 | .iframe {
2 |   width: 100%;
3 |   height: 100%;
4 |   border: none;
5 |   position: absolute;
6 | }
7 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/**
2 | node_modules/**
3 | dist/**
4 | lib/**
5 | webpack/**
6 | src/**/*.spec.js
7 | src/index.html
8 | demo/**
9 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as isEmpty } from './isEmpty'
2 | export { default as getCodeMirrorMode } from './getCodeMirrorMode'
3 | 


--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
1 | // Bundle all file in src into test
2 | const componentsContext = require.context('./src', true, /\.js$/)
3 | componentsContext.keys().forEach(componentsContext)
4 | 


--------------------------------------------------------------------------------
/src/__tests__/utils/beautifyHTML.js:
--------------------------------------------------------------------------------
1 | import {
2 |   html as beautifyHTML,
3 |   default_options as defaultOptions
4 | } from 'js-beautify'
5 | 
6 | export default (html) => (
7 |   beautifyHTML(html, {...defaultOptions, indent_size: 2})
8 | )
9 | 


--------------------------------------------------------------------------------
/src/components/global.scss:
--------------------------------------------------------------------------------
 1 | $color-white: #fff;
 2 | 
 3 | /*
 4 |  * App colors
 5 |  */
 6 | $color-primary: #555;
 7 | $color-accent: red;
 8 | $color-text: #555;
 9 | $color-background:  #f0f1f4;
10 | $color-divider: rgba($color-primary, .4);
11 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser"  : "babel-eslint",
 3 |   "extends" : [
 4 |     "standard",
 5 |     "standard-react"
 6 |   ],
 7 |   "env"     : {
 8 |     "browser" : true
 9 |   },
10 |   "globals" : {
11 |     "__DEV__"      : false,
12 |     "__PROD__"     : false
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/demo/examples/slack-logo/html.example:
--------------------------------------------------------------------------------
1 | <div class="c-slack">
2 |   <span class="c-slack__dot c-slack__dot--a"></span>
3 |   <span class="c-slack__dot c-slack__dot--b"></span>
4 |   <span class="c-slack__dot c-slack__dot--c"></span>
5 |   <span class="c-slack__dot c-slack__dot--d"></span>
6 | </div>
7 | 


--------------------------------------------------------------------------------
/src/redux/rootReducer.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | import activeTab from './modules/activeTab'
 3 | import compiling from './modules/compiling'
 4 | import code from './modules/code'
 5 | 
 6 | export default combineReducers({
 7 |   activeTab,
 8 |   code,
 9 |   compiling
10 | })
11 | 


--------------------------------------------------------------------------------
/src/components/Playground/Playground.scss:
--------------------------------------------------------------------------------
 1 | @import "../global";
 2 | 
 3 | .main {
 4 |   height: 100%;
 5 |   position: relative;
 6 |   overflow: hidden;
 7 |   border: 1px solid $color-divider;
 8 |   font-family: sans-serif;
 9 | }
10 | 
11 | :global .ReactCodeMirror {
12 |   height: 100%;
13 |   position: relative;
14 | }
15 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | - Added Plugin interface [pull/15](https://github.com/thangngoc89/react-code-playground/pull/15)
2 | - Added Karma for testing [pull/16](https://github.com/thangngoc89/react-code-playground/pull/16)
3 | - Added use tab name from ``parsers``
4 | [pull/13](https://github.com/thangngoc89/react-code-playground/pull/13)
5 | 
6 | # 0.1.2 - 2016-28-01
7 | 
8 | ✨ Initial release
9 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "react", "stage-1"],
 3 |   "env": {
 4 |     "development": {
 5 |       "presets": [
 6 |         "react-hmre"
 7 |       ]
 8 |     },
 9 |     "lib": {
10 |       "plugins": [
11 |         [
12 |           "babel-plugin-webpack-loaders",
13 |           {
14 |             "config": "./build/webpack.config.lib.js",
15 |             "verbose": false,
16 |           }
17 |         ]
18 |       ]
19 |     }
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, compose } from 'redux'
 2 | import thunk from 'redux-thunk'
 3 | import rootReducer from './rootReducer'
 4 | 
 5 | const store = (initialState = {}) => {
 6 |   const finalCreateStore = compose(
 7 |     applyMiddleware(thunk),
 8 |     window.devToolsExtension ? window.devToolsExtension() : f => f
 9 |   )(createStore)
10 | 
11 |   return finalCreateStore(rootReducer, initialState)
12 | }
13 | 
14 | export default store()
15 | 


--------------------------------------------------------------------------------
/demo/develop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <title>React code playground demo</title>
 7 |   <meta name="description" content="">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 9 |   <script type="text/javascript" src="vendor/sass.sync.js"></script>
10 | </head>
11 | <body>
12 |   <div id="mount-point"></div>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/components/Result/generateHTML.js:
--------------------------------------------------------------------------------
 1 | export default function ({html, css, javascript}) {
 2 |   let result = `
 3 | <html>
 4 |   <head></head>
 5 |   <body></body>
 6 | </html>`
 7 | 
 8 |   if (html) {
 9 |     result = result.replace('</body>', `${html}</body>`)
10 |   }
11 |   if (css) {
12 |     result = result.replace('</head>', `<style>${css}</style></head>`)
13 |   }
14 |   if (javascript) {
15 |     result = result.replace('</body>', `<script>${javascript}</script></body>`)
16 |   }
17 |   return result
18 | }
19 | 


--------------------------------------------------------------------------------
/bin/build.js:
--------------------------------------------------------------------------------
 1 | import webpack from './webpack'
 2 | import wpConfig from '../build/webpack.config'
 3 | import fs from 'fs-extra'
 4 | import config from '../config'
 5 | 
 6 | const debug = require('debug')('playground:bin:build')
 7 | 
 8 | const paths = config.utils_paths
 9 | 
10 | debug('Start build')
11 | fs.emptyDirSync(paths.dist())
12 | 
13 | webpack(wpConfig, () => {
14 |   debug('Webpack build success')
15 |   debug('Copy static files')
16 |   fs.copySync(paths.demo('vendor'), paths.dist('vendor'))
17 |   debug('Done')
18 | })
19 | 


--------------------------------------------------------------------------------
/src/components/Nav/Tab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './Nav.scss'
 3 | const cx = require('classnames/bind').bind(styles)
 4 | 
 5 | const Tab = ({
 6 |   type,
 7 |   displayName,
 8 |   activeTab,
 9 |   onTabClick
10 | }) => {
11 |   const className = cx('tab', {
12 |     tabActive: activeTab === type
13 |   })
14 | 
15 |   return (
16 |     <li
17 |       className={className}
18 |       onClick={() => onTabClick(type)}
19 |     >
20 |       <span>{displayName}</span>
21 |     </li>
22 |   )
23 | }
24 | 
25 | export default Tab
26 | 


--------------------------------------------------------------------------------
/src/utils/isEmpty.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * isEmpty function
 3 |  * @param  {any} t [variable for checking]
 4 |  * @return {boolean} [is variable empty or not]
 5 |  */
 6 | export default function (t) {
 7 |   if (t === null) {
 8 |     return true
 9 |   }
10 | 
11 |   if (Array.isArray(t)) {
12 |     return (t.length === 0)
13 |   }
14 | 
15 |   if (typeof t === 'object') {
16 |     let k = Object.keys(t)
17 |     if (k !== undefined) {
18 |       return (Object.keys(t).length === 0)
19 |     }
20 |   }
21 | 
22 |   return (t !== undefined) ||
23 |     (t !== '')
24 | }
25 | 


--------------------------------------------------------------------------------
/bin/webpack.js:
--------------------------------------------------------------------------------
 1 | import webpack from 'webpack'
 2 | const debug = require('debug')('playground:bin:webpack')
 3 | 
 4 | export default (webpackConfig, cb) => {
 5 |   webpack(webpackConfig, (err, stats) => {
 6 |     if (err) {
 7 |       throw err
 8 |     }
 9 | 
10 |     if (stats.hasErrors()) {
11 |       stats.compilation.errors.forEach(
12 |         item => {
13 |           item.stack.split('\n').forEach(line => debug(line))
14 |         }
15 |       )
16 | 
17 |       throw new Error('webpack build failed with errors')
18 |     }
19 |     cb(stats)
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/bin/deploy.js:
--------------------------------------------------------------------------------
 1 | const ghpages = require('gh-pages')
 2 | const debug = require('debug')('playground:bin:deploy')
 3 | const path = require('path')
 4 | 
 5 | debug('Start deployment process.')
 6 | 
 7 | debug('Clean up temp folder')
 8 | ghpages.clean()
 9 | 
10 | debug('Deploy with github token')
11 | ghpages.publish(path.join(__dirname, '../dist'), {
12 |   repo: 'https://' + process.env.GH_TOKEN + '@github.com/thangngoc89/react-code-playground.git',
13 |   silent: true
14 | }, callback)
15 | 
16 | var callback = function (err) {
17 |   if (err) {
18 |     debug(err)
19 |     return
20 |   }
21 |   debug('Finish')
22 | }
23 | 


--------------------------------------------------------------------------------
/src/utils/__tests__/isEmpty.spec.js:
--------------------------------------------------------------------------------
 1 | import { isEmpty } from '../'
 2 | 
 3 | describe('utils', () => {
 4 |   describe('isEmpty function lists these at true', () => {
 5 |     it('empty object', () => {
 6 |       expect(isEmpty({})).to.be.true
 7 |     })
 8 |     it('empty array', () => {
 9 |       expect(isEmpty([])).to.be.true
10 |     })
11 |     it('empty string', () => {
12 |       expect(isEmpty('')).to.be.true
13 |     })
14 |     it('undefined', () => {
15 |       expect(isEmpty(undefined)).to.be.true
16 |     })
17 |     it('null', () => {
18 |       expect(isEmpty(null)).to.be.true
19 |     })
20 |   })
21 | })
22 | 


--------------------------------------------------------------------------------
/src/__tests__/framework.spec.js:
--------------------------------------------------------------------------------
 1 | import assert from 'assert'
 2 | 
 3 | describe('(Framework) Karma Plugins', function () {
 4 |   it('Should expose "expect" globally.', function () {
 5 |     assert.ok(expect)
 6 |   })
 7 | 
 8 |   it('Should expose "should" globally.', function () {
 9 |     assert.ok(should)
10 |   })
11 | 
12 |   it('Should have chai-as-promised helpers.', function () {
13 |     const pass = new Promise(res => res('test'))
14 |     const fail = new Promise((res, rej) => rej())
15 | 
16 |     return Promise.all([
17 |       expect(pass).to.be.fulfilled,
18 |       expect(fail).to.not.be.fulfilled
19 |     ])
20 |   })
21 | })
22 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Playground from './components/Playground'
 3 | import store from './redux/store'
 4 | import { codeRefresh } from './redux/modules/code'
 5 | 
 6 | class CodePlayground extends Component {
 7 |   /**
 8 |    * Set isSynced to false when receive new props
 9 |    */
10 |   componentWillReceiveProps (nextProps) {
11 |     if (nextProps !== this.props) {
12 |       store.dispatch(codeRefresh())
13 |     }
14 |   }
15 | 
16 |   render () {
17 |     return (
18 |       <Playground
19 |         store={store}
20 |         {...this.props}
21 |       />
22 |     )
23 |   }
24 | }
25 | 
26 | export default CodePlayground
27 | 


--------------------------------------------------------------------------------
/src/redux/modules/activeTab.js:
--------------------------------------------------------------------------------
 1 | import { createAction, handleActions } from 'redux-actions'
 2 | // ------------------------------------
 3 | // Constants
 4 | // ------------------------------------
 5 | export const TAB_SET = 'playground/tab/SET'
 6 | 
 7 | // ------------------------------------
 8 | // Actions
 9 | // ------------------------------------
10 | export const tabSet = createAction(TAB_SET)
11 | 
12 | export const actions = {
13 |   tabSet
14 | }
15 | 
16 | // ------------------------------------
17 | // Reducer
18 | // ------------------------------------
19 | const initialState = 'result'
20 | 
21 | export default handleActions({
22 |   [TAB_SET]: (state, { payload }) => payload
23 | }, initialState)
24 | 


--------------------------------------------------------------------------------
/src/components/Result/__tests__/generateHTML.spec.js:
--------------------------------------------------------------------------------
 1 | import generateHTML from '../generateHTML.js'
 2 | import beautifyHTML from '../../../__tests__/utils/beautifyHTML'
 3 | 
 4 | describe('(component) Result', () => {
 5 |   describe('generateHTML', () => {
 6 |     const html = '<p>foo</p>'
 7 |     const javascript = `console.log('foo')`
 8 |     const css = `.foo {border: 0}`
 9 | 
10 |     it('generate expected code', () => {
11 |       const result = generateHTML({javascript, css, html})
12 |       const expectedResult =
13 | `<html>
14 | <head>
15 |   <style>${css}</style>
16 | </head>
17 | <body>
18 |   ${html}
19 |   <script>${javascript}</script>
20 | </body>
21 | </html>
22 | `
23 |       expect(beautifyHTML(result)).to.equal(beautifyHTML(expectedResult))
24 |     })
25 |   })
26 | })
27 | 


--------------------------------------------------------------------------------
/src/plugins/parsers/sass.js:
--------------------------------------------------------------------------------
 1 | const parser = {
 2 |   type: 'parser',
 3 |   name: 'SASS',
 4 |   codeType: 'css',
 5 |   codeMirrorMode: 'sass',
 6 |   parse: function (code, cb) {
 7 |     if (
 8 |       typeof window !== 'undefined' &&
 9 |       typeof window.Sass !== 'object'
10 |     ) {
11 |       throw new Error(
12 |         'Sass.js is not available in global scope ' +
13 |         'Please download and embed it into your website' +
14 |         'from https://github.com/medialize/sass.js'
15 |       )
16 |     }
17 |     window.Sass.compile(code, result => {
18 |       if (result.status === 0) {
19 |         cb(result.text, 'css')
20 |       } else {
21 |         // TODO: Handle me
22 |         console.error(result)
23 |       }
24 |     })
25 |   }
26 | }
27 | 
28 | export default parser
29 | 


--------------------------------------------------------------------------------
/src/components/Nav/Nav.scss:
--------------------------------------------------------------------------------
 1 | @import "../global.scss";
 2 | 
 3 | .nav {
 4 |   display: block;
 5 |   overflow: hidden;
 6 |   height: 2.6rem;
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   background: $color-background;
10 |   border-style: solid;
11 |   border-color: rgba($color-primary, .4);
12 |   border-width: 0 0 1px 0;
13 |   list-style-type: none;
14 | }
15 | 
16 | .tab {
17 |   float: left;
18 |   padding: .8rem;
19 |   background: $color-background;
20 |   color: $color-text;
21 |   cursor: pointer;
22 | 
23 |   &:hover, &:focus {
24 |     background: rgba($color-text, .7);
25 |     color: $color-background;
26 |   }
27 | 
28 |   &:active {
29 |     background: rgba($color-primary, 0.12);
30 |   }
31 | }
32 | 
33 | .tabActive {
34 |   background: $color-text;
35 |   color: $color-background;
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/Result/__tests__/Result.spec.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import $ from 'teaspoon'
 3 | import Result from '../Result'
 4 | import styles from '../Result.scss'
 5 | 
 6 | const render = props => $(<Result {...props} />).render()
 7 | const shallowRender = props => $(<Result {...props} />).shallowRender()
 8 | 
 9 | describe('(component) Nav', () => {
10 |   describe('Result', () => {
11 |     let $element, _props
12 | 
13 |     beforeEach(() => {
14 |       _props = {
15 |         code: {
16 |           html: '<span>Foo</span>',
17 |           css: '.foo {border: 0}',
18 |           javascript: 'var a = 1'
19 |         }
20 |       }
21 |     })
22 | 
23 |     it('render an <iframe> with .iframe class', () => {
24 |       $element = shallowRender()
25 |       $element.single(`iframe.${styles.iframe}`)
26 |     })
27 | 
28 |     it('render an <iframe> with expected markup')
29 |   })
30 | })
31 | 


--------------------------------------------------------------------------------
/src/components/CodeEditor/CodeEditor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import CodeMirror from 'react-codemirror'
 3 | 
 4 | class CodeEditor extends Component {
 5 |   static propTypes = {
 6 |     code: PropTypes.string.isRequired,
 7 |     onChange: PropTypes.func.isRequired,
 8 |     options: PropTypes.object
 9 |   };
10 | 
11 |   static defaultProps = {
12 |     code: ''
13 |   };
14 | 
15 |   get options () {
16 |     const defaultOptions = {
17 |       lineNumbers: true,
18 |       mode: 'javascript'
19 |     }
20 | 
21 |     return {
22 |       ...defaultOptions,
23 |       ...(this.props.options !== undefined) && this.props.options
24 |     }
25 |   }
26 | 
27 |   render () {
28 |     return (
29 |       <CodeMirror
30 |         value={this.props.code}
31 |         options={this.options}
32 |         onChange={this.props.onChange}
33 |       />
34 |     )
35 |   }
36 | }
37 | 
38 | export default CodeEditor
39 | 


--------------------------------------------------------------------------------
/demo/styles.scss:
--------------------------------------------------------------------------------
 1 | $color-main: #8904B1;
 2 | 
 3 | html, body {
 4 |   height: 100%;
 5 |   margin: 0;
 6 |   padding: 0;
 7 | }
 8 | 
 9 | :global .CodeMirror {
10 |   height: calc(100% - 2.6rem);
11 | }
12 | 
13 | /*
14 |  * Below styles are for docs only
15 |  */
16 | 
17 | :global .container {
18 |   margin-right: auto;
19 |   margin-left: auto;
20 |   padding-right: 2rem;
21 |   padding-left: 2rem;
22 | }
23 | 
24 | :global .button-row {
25 |   margin-top: 1rem;
26 |   display: flex;
27 |   flex-direction: row;
28 |   justify-content: space-around;
29 | 
30 |   button {
31 |     cursor: pointer;
32 |     flex-grow: 1;
33 |     padding: 1.5rem;
34 |     font-size: 1.5rem;
35 |     font-weight: 900;
36 |     color: $color-main;
37 |     background: #fff;
38 |     border: solid 2px $color-main;
39 | 
40 |     &:first-of-type {
41 |       margin-right: 3rem;
42 |     }
43 | 
44 |     &:hover {
45 |       color: #fff;
46 |       background-color: $color-main;
47 |     }
48 |   }
49 | }
50 | 
51 | :global .github-fork-ribbon {
52 |   background: $color-main !important;
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/Result/Result.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import styles from './Result.scss'
 3 | import generateHTML from './generateHTML'
 4 | 
 5 | class Result extends Component {
 6 |   static propTypes = {
 7 |     code: PropTypes.shape({
 8 |       html: PropTypes.string,
 9 |       css: PropTypes.string,
10 |       javascript: PropTypes.string
11 |     })
12 |   };
13 | 
14 |   componentDidMount () {
15 |     this.renderIframeContent()
16 |   }
17 | 
18 |   componentDidUpdate () {
19 |     this.renderIframeContent()
20 |   }
21 | 
22 |   shouldComponentUpdate (nextProps) {
23 |     return (nextProps.code !== this.props.code)
24 |   }
25 | 
26 |   renderIframeContent () {
27 |     const content = generateHTML(this.props.code)
28 |     this.iframe.contentWindow.document.open()
29 |     this.iframe.contentWindow.document.write(content)
30 |     this.iframe.contentWindow.document.close()
31 |   }
32 | 
33 |   render () {
34 |     return (
35 |       <iframe
36 |         className={styles.iframe}
37 |         ref={ref => this.iframe = ref}
38 |       />
39 |     )
40 |   }
41 | }
42 | 
43 | export default Result
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Khoa Nguyen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/utils/getCodeMirrorMode.js:
--------------------------------------------------------------------------------
 1 | import isEmpty from './isEmpty'
 2 | /**
 3 |  * Get CodeMirror mode for syntax hightlight
 4 |  * from default code type or via
 5 |  * `parser.codeType`
 6 |  * @param  {string} type   [codeType]
 7 |  * @param  {any} parser    [plugin instance, Object or Array of object]
 8 |  * @return {string}        [CodeMirror mode]
 9 |  */
10 | export default function (type, parser) {
11 |   let mode = type
12 |   if (type === 'html') {
13 |     mode = 'htmlmixed'
14 |   }
15 | 
16 |   if (!isEmpty(parser)) {
17 |     if (parser.length > 1) {
18 |       console.warn(
19 |         `Multiple parser for ${type} code type available.` +
20 |         `Using the first one. Others are ommitted`
21 |       )
22 |     }
23 |     // We need this since
24 |     // parsers(codeType) method
25 |     // always return an array
26 |     if (Array.isArray(parser)) {
27 |       parser = parser[0]
28 |     }
29 | 
30 |     if (parser.codeType !== type) {
31 |       throw new Error(
32 |         `Parser Type ${parser.codeType} is not equal with Code Type ${type}`
33 |       )
34 |     }
35 |     mode = parser.codeMirrorMode
36 |   }
37 | 
38 |   return mode
39 | }
40 | 


--------------------------------------------------------------------------------
/demo/gh-pages.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <title>React code playground demo</title>
 7 |   <meta name="description" content="">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 9 |   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
10 |   <!--[if lt IE 9]>
11 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
12 |   <![endif]-->
13 |   <script type="text/javascript" src="vendor/sass.sync.js"></script>
14 | </head>
15 | <body>
16 |   <div class="container">
17 |     <div class="row">
18 |       <div class="col-sm-12">
19 |         <div id="mount-point"></div>
20 |       </div>
21 |     </div>
22 |   </div>
23 |   <div class="github-fork-ribbon-wrapper right">
24 |     <div class="github-fork-ribbon">
25 |       <a href="https://github.com/thangngoc89/react-code-playground">Fork me on GitHub</a>
26 |     </div>
27 |   </div>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/bin/concatStyleSheet.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Concat stylesheets generate by babel
 3 |  * into one file comsume and themable
 4 |  */
 5 | import fs from 'fs-extra'
 6 | import config from '../config'
 7 | const debug = require('debug')('playground:bin:concatStyleSheet')
 8 | const paths = config.utils_paths
 9 | 
10 | const outputFile = paths.lib('CodePlayground.css')
11 | 
12 | debug('Start concat stylesheet')
13 | 
14 | // Try to remove old outputFile
15 | try {
16 |   fs.statSync(outputFile)
17 |   fs.removeSync(outputFile)
18 | } catch (e) {
19 |   // noop
20 | }
21 | 
22 | let items = []
23 | 
24 | fs.walk(paths.lib('assets'))
25 |   .on('readable', function () {
26 |     let item
27 |     while ((item = this.read())) {
28 |       if (item.path.endsWith('.css')) {
29 |         items.push(item.path)
30 |       }
31 |     }
32 |   })
33 |   .on('end', function () {
34 |     const ws = fs.createOutputStream(outputFile)
35 |     for (let i in items) {
36 |       debug('Reading ' + items[i])
37 |       let data = fs.readFileSync(items[i])
38 |       ws.write(data + `\n`)
39 |     }
40 |     debug('Wrote concated stylesheet into ' + outputFile)
41 | 
42 |     fs.removeSync(paths.lib('assets'))
43 |     debug('Removed lib/assets folder')
44 |   })
45 | 


--------------------------------------------------------------------------------
/bin/develop.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | import config from '../config'
 3 | 
 4 | import webpack from 'webpack'
 5 | import webpackDevMiddleware from 'webpack-dev-middleware'
 6 | import webpackHotMiddleware from 'webpack-hot-middleware'
 7 | import historyFallbackMiddleware from 'connect-history-api-fallback'
 8 | import wpConfig from '../build/webpack.config'
 9 | 
10 | const debug = require('debug')('playground:bin:develop')
11 | const paths = config.utils_paths
12 | const webpackCompiler = webpack(wpConfig)
13 | 
14 | const server = express()
15 | 
16 | server.use('/', express.static(paths.demo()))
17 | server.use(historyFallbackMiddleware({
18 |   verbost: false
19 | }))
20 | 
21 | server.use(webpackDevMiddleware(webpackCompiler, {
22 |   publicPath: '/',
23 |   stats: {
24 |     colors: true,
25 |     // hide all chunk dependencies because it's unreadable
26 |     chunkModules: false,
27 |     // noize
28 |     assets: false
29 |   },
30 |   noInfo: true
31 | }))
32 | 
33 | server.use(webpackHotMiddleware(webpackCompiler))
34 | 
35 | const {
36 |   server_port,
37 |   server_host
38 | } = config
39 | 
40 | server.listen(server_port, server_host, () => {
41 |   debug(`Server is now running at ${server_host}:${server_port}.`)
42 | })
43 | 


--------------------------------------------------------------------------------
/src/components/Nav/Nav.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import Tab from './Tab'
 3 | import styles from './Nav.scss'
 4 | 
 5 | class Nav extends Component {
 6 |   static propTypes = {
 7 |     activeTab: PropTypes.string,
 8 |     onTabClick: PropTypes.func.isRequired,
 9 |     parsers: PropTypes.array
10 |   };
11 | 
12 |   static defaultProps = {
13 |     activeTab: 'result'
14 |   };
15 | 
16 |   get tabs () {
17 |     let tabs = {
18 |       'result': 'Result',
19 |       'html': 'HTML',
20 |       'css': 'CSS',
21 |       'javascript': 'JS'
22 |     }
23 | 
24 |     const { parsers } = this.props
25 |     if (parsers) {
26 |       parsers.map(t => {
27 |         tabs[t.codeType] = t.name
28 |       })
29 |     }
30 |     return tabs
31 |   }
32 |   render () {
33 |     const tabsForRender = Object.keys(this.tabs).map(type =>
34 |       <Tab
35 |         key={type}
36 |         type={type}
37 |         displayName={this.tabs[type]}
38 |         activeTab={this.props.activeTab}
39 |         onTabClick={this.props.onTabClick}
40 |       />
41 |     )
42 | 
43 |     return (
44 |       <ul className={styles.nav}>
45 |         {tabsForRender}
46 |       </ul>
47 |     )
48 |   }
49 | }
50 | 
51 | export default Nav
52 | 


--------------------------------------------------------------------------------
/src/redux/modules/compiling.js:
--------------------------------------------------------------------------------
 1 | import { createAction, handleActions } from 'redux-actions'
 2 | import { codeSetParsed } from './code'
 3 | // ------------------------------------
 4 | // Constants
 5 | // ------------------------------------
 6 | export const COMPILE_START = 'playground/compile/START'
 7 | export const COMPILE_COMPLETE = 'playground/compile/COMPELETE'
 8 | 
 9 | // ------------------------------------
10 | // Actions
11 | // ------------------------------------
12 | export const compileStart = createAction(COMPILE_START)
13 | export const compileComplete = createAction(COMPILE_COMPLETE)
14 | 
15 | export const compileCompleteWithCode = (code, type) => {
16 |   return (dispatch, getState) => {
17 |     dispatch(codeSetParsed(code, type))
18 |     dispatch(compileComplete(type))
19 |   }
20 | }
21 | export const actions = {
22 |   compileStart,
23 |   compileComplete: compileCompleteWithCode
24 | }
25 | 
26 | // ------------------------------------
27 | // Reducer
28 | // ------------------------------------
29 | const initialState = []
30 | 
31 | export default handleActions({
32 |   [COMPILE_START]: (state, { payload }) => ([
33 |     ...state,
34 |     payload
35 |   ]),
36 |   [COMPILE_COMPLETE]: (state, { payload }) => state.filter(t => t !== payload)
37 | }, initialState)
38 | 


--------------------------------------------------------------------------------
/src/components/CodeEditor/__tests__/CodeEditor.spec.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import $ from 'teaspoon'
 3 | import CodeEditor from '../CodeEditor'
 4 | import CodeMirror from 'react-codemirror'
 5 | 
 6 | const render = props => $(<CodeEditor {...props} />).render()
 7 | const shallowRender = props => $(<CodeEditor {...props} />).shallowRender()
 8 | 
 9 | describe('(component) CodeEditor', () => {
10 |   let $element, _props, _spy
11 | 
12 |   beforeEach(() => {
13 |     _spy = sinon.spy()
14 |     _props = {
15 |       code: 'foo',
16 |       onChange: _spy,
17 |       options: {
18 |         foo: 'bar'
19 |       }
20 |     }
21 |   })
22 | 
23 |   it('render a <CodeMirror> tag with options', () => {
24 |     $element = shallowRender(_props)
25 |     const $codeMirror = $element.single($.s`${CodeMirror}`)
26 |     expect($codeMirror.props().value).to.eql('foo')
27 |     expect($codeMirror.props().options).to.eql({
28 |       lineNumbers: true,
29 |       mode: 'javascript',
30 |       foo: 'bar'
31 |     })
32 |   })
33 | 
34 |   it('dispatch onChange event when content changed', () => {
35 |     $element = shallowRender(_props)
36 |     const $codeMirror = $element.single($.s`${CodeMirror}`)
37 |     _spy.should.have.not.been.called
38 |     $codeMirror.trigger('change')
39 |     _spy.should.have.been.calledOnce
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/demo/examples/editr.js/html.example:
--------------------------------------------------------------------------------
 1 | <p>
 2 |     <input type="radio" name="s1" id="s1On" value="1" hidden="" checked="">
 3 |     <label for="s1On" class="switch switch--on">Yes</label>
 4 |     <input type="radio" name="s1" id="s1Off" value="0" hidden="">
 5 |     <label for="s1Off" class="switch switch--off">No</label>
 6 | </p>
 7 | <p>
 8 |     <input type="radio" name="s2" id="s2On" value="1" hidden="">
 9 |     <label for="s2On" class="switch switch--on">✓</label>
10 |     <input type="radio" name="s2" id="s2Off" value="0" hidden="" checked="">
11 |     <label for="s2Off" class="switch switch--off">✗</label>
12 | </p>
13 | <p>
14 |     <input type="radio" name="s3" id="s3On" value="1" hidden="" checked="">
15 |     <label for="s3On" class="switch switch--on">Sure</label>
16 |     <input type="radio" name="s3" id="s3Off" value="0" hidden="">
17 |     <label for="s3Off" class="switch switch--off">I dunno</label>
18 | </p>
19 | 
20 | <label>Is this cool?</label>
21 | <input type="radio" name="rate" id="r1" value="hell yeah" checked="" hidden="">
22 | <label for="r1" class="radio"><span></span>hell yeah</label>
23 | <input type="radio" name="rate" id="r2" value="a little" hidden="">
24 | <label for="r2" class="radio"><span></span>a little</label>
25 | <input type="radio" name="rate" id="r3" value="nope" hidden="">
26 | <label for="r3" class="radio"><span></span>nope</label>
27 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: false
 3 | node_js:
 4 |   - 4
 5 |   - 5
 6 | 
 7 | env:
 8 |   - NODE_ENV=development
 9 | 
10 | matrix:
11 |   fast_finish: true
12 | 
13 | script:
14 |   - npm run lint
15 |   - npm run test:ci
16 |   - npm run build
17 | 
18 | before_install:
19 |   - export CHROME_BIN=chromium-browser
20 |   - export DISPLAY=:99.0
21 |   - sh -e /etc/init.d/xvfb start
22 | 
23 | after_success:
24 | - npm run codecov
25 | 
26 | before_deploy:
27 |   - git config --global user.name "Khoa Nguyen"
28 |   - git config --global user.email "hi@khoanguyen.me"
29 | 
30 | deploy:
31 |   skip_cleanup: true
32 |   provider: script
33 |   script: npm run deploy
34 |   on:
35 |     branch: master
36 |     node: '5'
37 | 
38 | env:
39 |   global:
40 |     - secure: e/8GWDvLL9piuuHJXk0YWQf8V5stnqKuDT+n8DcedV5z05Q1rWSuXSzOTbejR4LOiZnwZqJV9DLbFy7hDccn5rhH9iBmQ/RW5zTpxlavkOM//CaeCXF6GS+ewTM9m1C6uSkrZHF8fL+B/AaSP6Awv8fWkl5/fvxQ3rLlS75LRB43CL0y5/SqY/gNYuOycdziP8Tfi+OFXrFitH5Ils7Eg9/gIZDDGPHl06zIPf3+F77cFXIQeSkYT+YTYFGuVN/0YeQXYmwzUcvR899cibt3hb6t7T9gvDUuWEdU+uLyavh7H981I1bO4JIzK1GylsnqGp67vynt8YqZOULKa9UbW11JjjnCKEUg/GQ88h0grdJCN4cSVDOs08X+pL/zkx0tCeO3JSciqxDyivpCAPoMLAzZqfEt5FuTAm1Gp+5fmHnyYIaLGlQcCQpmLgVAonIch0jKj61yp4KL8kHOYL77Aj+uqNc/QuaIZSvkWxbmMzisBUb2yruu116B3pCemhp9yAddbVwpd27Ki3Z15WptWlhatVly+90FPpCDcHnI9BlVgEizweTLawN9dyXOlzsAbiFySe/IZSYSpqEZbam9bjkON9RxDusWZNQ0zAnVRXbT/FY1dPm4l5FIrMegm2QodgHuKhXk63jcsc6omE2x0t633Qn3mHLZmKtSc67ltUU=
41 | 


--------------------------------------------------------------------------------
/src/utils/__tests__/getCodeMirrorMode.spec.js:
--------------------------------------------------------------------------------
 1 | import { getCodeMirrorMode as mode } from '../'
 2 | 
 3 | describe('utils', () => {
 4 |   describe('getCodeMirrorMode', () => {
 5 |     let parser
 6 |     beforeEach(() => {
 7 |       parser = {
 8 |         codeType: 'css',
 9 |         codeMirrorMode: 'sass'
10 |       }
11 |     })
12 | 
13 |     it('return default mode when no parser passed', () => {
14 |       expect(mode('css')).to.equal('css')
15 |       expect(mode('javascript')).to.equal('javascript')
16 |       expect(mode('html')).to.equal('htmlmixed')
17 |     })
18 | 
19 |     it('return first parser code mode when passed an array of parsers', () => {
20 |       const array = [parser]
21 |       expect(mode('css', array)).to.equal(parser.codeMirrorMode)
22 |     })
23 | 
24 |     it('return parser code mode when passed a parser object', () => {
25 |       expect(mode('css', parser)).to.equal(parser.codeMirrorMode)
26 |     })
27 | 
28 |     it('warn when passed multiple parsers for same code type', () => {
29 |       const originalConsole = console.warn
30 | 
31 |       const _stub = sinon.stub(console, 'warn')
32 |       const array = [parser, parser]
33 |       mode('css', array)
34 |       _stub.should.have.been.calledOnce
35 | 
36 |       console.warn = originalConsole
37 |     })
38 | 
39 |     it('throw error when type and parser code type doesn not match', () => {
40 |       expect(function () {
41 |         mode('html', parser)
42 |       }).to.throw('Parser Type css is not equal with Code Type html')
43 |     })
44 |   })
45 | })
46 | 


--------------------------------------------------------------------------------
/src/components/Playground/index.js:
--------------------------------------------------------------------------------
 1 | import Playground from './Playground'
 2 | import { bindActionCreators } from 'redux'
 3 | import { connect } from 'react-redux'
 4 | import { actions as activeTabActions } from '../../redux/modules/activeTab'
 5 | import { actions as codeActions } from '../../redux/modules/code'
 6 | import { actions as compilingActions } from '../../redux/modules/compiling'
 7 | 
 8 | const mapStateToProps = (state) => ({
 9 |   activeTab: state.activeTab,
10 |   compiling: state.compiling,
11 |   ...state.code
12 | })
13 | 
14 | const mapDispatchToProps = (dispatch) => {
15 |   return bindActionCreators({
16 |     ...activeTabActions,
17 |     ...codeActions,
18 |     ...compilingActions
19 |   }, dispatch)
20 | }
21 | 
22 | const mergeProps = (stateProps, dispatchProps, ownProps) => {
23 |   // If code was not synced into store
24 |   // Use code from ownProps
25 |   if (!stateProps.isSynced) {
26 |     return {
27 |       ...dispatchProps,
28 |       ...stateProps,
29 |       ...ownProps,
30 |       ...{
31 |         css: {
32 |           original: ownProps.css
33 |         },
34 |         html: {
35 |           original: ownProps.html
36 |         },
37 |         javascript: {
38 |           original: ownProps.javascript
39 |         }
40 |       }
41 |     }
42 |   }
43 | 
44 |   // Or use code from store
45 |   return {
46 |     ...dispatchProps,
47 |     ...ownProps,
48 |     ...stateProps
49 |   }
50 | }
51 | 
52 | export default connect(
53 |   mapStateToProps,
54 |   mapDispatchToProps,
55 |   mergeProps
56 | )(Playground)
57 | 


--------------------------------------------------------------------------------
/src/components/Nav/__tests__/Nav.spec.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import $ from 'teaspoon'
 3 | import Nav from '../Nav'
 4 | import Tab from '../Tab'
 5 | import styles from '../Nav.scss'
 6 | 
 7 | const render = props => $(<Nav {...props} />).render()
 8 | const shallowRender = props => $(<Nav {...props} />).shallowRender()
 9 | 
10 | describe('(component) Nav', () => {
11 |   describe('Nav', () => {
12 |     let $element, _props, _spy
13 | 
14 |     beforeEach(() => {
15 |       _spy = sinon.spy()
16 |       _props = {
17 |         activeTab: 'result',
18 |         onTabClick: _spy
19 |       }
20 |     })
21 | 
22 |     it('render an <ul> tag', () => {
23 |       $element = shallowRender(_props)
24 |       $element.single('ul')
25 |     })
26 | 
27 |     it('should have .nav class', () => {
28 |       $element = shallowRender(_props)
29 |       $element.single(`.${styles.nav}`)
30 |     })
31 | 
32 |     it('render 4 child <Tab /> tag', () => {
33 |       $element = shallowRender(_props)
34 |       const $Tab = $element.find($.s`${Tab}`)
35 |       expect($Tab.length).to.equal(4)
36 |     })
37 | 
38 |     it('should render default tabs name when no parser', () => {
39 |       $element = render(_props)
40 |       const _text = $element.text()
41 |       expect(_text).to.eql('ResultHTMLCSSJS')
42 |     })
43 | 
44 |     it('should render parser\'s name', () => {
45 |       _props = {
46 |         ..._props,
47 |         parsers: [
48 |           {
49 |             name: 'Foo',
50 |             codeType: 'html'
51 |           }
52 |         ]
53 |       }
54 |       $element = render(_props)
55 |       const _text = $element.text()
56 |       expect(_text).to.eql('ResultFooCSSJS')
57 |     })
58 |   })
59 | })
60 | 


--------------------------------------------------------------------------------
/src/plugins/parsers/__tests__/sass.spec.js:
--------------------------------------------------------------------------------
 1 | import parser from '../sass'
 2 | 
 3 | describe('sass parser', () => {
 4 |   it('should be an object', () => {
 5 |     expect(typeof parser).to.eql('object')
 6 |   })
 7 |   it('should have type parser', () => {
 8 |     expect(parser).to.have.property('type', 'parser')
 9 |   })
10 |   it('should have enough required properties for parser', () => {
11 |     expect(parser).to.have.property('type')
12 |     expect(parser).to.have.property('name')
13 |     expect(parser).to.have.property('codeType')
14 |     expect(parser).to.have.property('codeMirrorMode')
15 |     expect(parser).to.have.property('parse')
16 |   })
17 |   it('should throw error when Sass.js not available in global scope', () => {
18 |     window.Sass = undefined
19 |     expect(function () {
20 |       parser.parse()
21 |     }).to.throw(Error)
22 |   })
23 |   it('should compile code', () => {
24 |     const _spy = sinon.spy()
25 |     window.Sass = {}
26 |     window.Sass.compile = (code, cb) => {
27 |       cb({
28 |         status: 0,
29 |         text: 'result'
30 |       })
31 |     }
32 | 
33 |     parser.parse('code', _spy)
34 |     _spy.should.have.been.calledOnce
35 |     _spy.should.have.been.calledWith('result', 'css')
36 |   })
37 | 
38 |   it('should console.error when status !== 0', () => {
39 |     const originalConsole = console.error
40 |     const _spy = sinon.spy()
41 |     const _stub = sinon.stub(console, 'error')
42 | 
43 |     window.Sass = {}
44 |     window.Sass.compile = (code, cb) => {
45 |       cb({
46 |         status: 1
47 |       })
48 |     }
49 | 
50 |     parser.parse('code', _spy)
51 |     _spy.should.have.not.been.called
52 |     _stub.should.have.been.calledOnce
53 |     _stub.should.have.been.calledWith({
54 |       status: 1
55 |     })
56 | 
57 |     console.error = originalConsole
58 |   })
59 | })
60 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint key-spacing:0 spaced-comment:0 */
 2 | import _debug from 'debug'
 3 | import { argv } from 'yargs'
 4 | import path from 'path'
 5 | 
 6 | const debug = _debug('playground:config')
 7 | 
 8 | const config = {
 9 |   env : process.env.NODE_ENV || 'development',
10 |   // ----------------------------------
11 |   // Project structure
12 |   // ----------------------------------
13 |   path_base   : path.resolve(__dirname, '../'),
14 |   dir_client  : 'src',
15 |   dir_demo    : 'demo',
16 |   dir_dist    : 'dist',
17 |   dir_lib     : 'lib',
18 |   dir_webpack : 'webpack',
19 | 
20 |   // ----------------------------------
21 |   // Dev Server config
22 |   // ----------------------------------
23 |   server_host : '0.0.0.0',
24 |   server_port : 3000,
25 | 
26 |   // ----------------------------------
27 |   // Tests
28 |   // ----------------------------------
29 |   coverage_enabled: !argv.watch
30 | }
31 | 
32 | // ------------------------------------
33 | // Environment
34 | // ------------------------------------
35 | config.globals = {
36 |   'process.env'  : {
37 |     'NODE_ENV' : JSON.stringify(config.env)
38 |   },
39 |   'NODE_ENV'     : config.env,
40 |   '__DEV__'      : config.env === 'development',
41 |   '__PROD__'     : config.env === 'production',
42 |   '__TEST__'     : config.env === 'test'
43 | }
44 | 
45 | config.utils_paths = (() => {
46 |   const resolve = path.resolve
47 | 
48 |   const base = (...args) =>
49 |     resolve.apply(resolve, [config.path_base, ...args])
50 | 
51 |   return {
52 |     base   : base,
53 |     src    : base.bind(null, config.dir_client),
54 |     demo   : base.bind(null, config.dir_demo),
55 |     dist   : base.bind(null, config.dir_dist),
56 |     lib    : base.bind(null, config.dir_lib),
57 |     webpack: base.bind(null, config.dir_webpack)
58 |   }
59 | })()
60 | 
61 | debug(`Generated config for ${config.env} environment`)
62 | 
63 | export default config
64 | 


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Playground from '../src/index'
 4 | 
 5 | import 'codemirror/mode/javascript/javascript'
 6 | import 'codemirror/mode/css/css'
 7 | import 'codemirror/mode/sass/sass'
 8 | import 'codemirror/mode/htmlmixed/htmlmixed'
 9 | import 'codemirror/lib/codemirror.css'
10 | import './styles.scss'
11 | 
12 | import sassParser from '../src/plugins/parsers/sass'
13 | 
14 | const cssSlack = require('raw!./examples/slack-logo/sass.example')
15 | const htmlSlack = require('raw!./examples/slack-logo/html.example')
16 | const codeSlack = {
17 |   css: cssSlack,
18 |   html: htmlSlack,
19 |   plugins: [
20 |     sassParser
21 |   ]
22 | }
23 | 
24 | const cssEditr = require('raw!./examples/editr.js/css.example')
25 | const htmlEditr = require('raw!./examples/editr.js/html.example')
26 | const codeEditr = {
27 |   css: cssEditr,
28 |   html: htmlEditr
29 | }
30 | 
31 | class App extends Component {
32 |   constructor (props) {
33 |     super(props)
34 |     this.state = {
35 |       code: codeEditr
36 |     }
37 |     this.slackLogo = this.slackLogo.bind(this)
38 |     this.editr = this.editr.bind(this)
39 |   }
40 | 
41 |   slackLogo () {
42 |     this.setState({
43 |       code: codeSlack
44 |     })
45 |   }
46 | 
47 |   editr () {
48 |     this.setState({
49 |       code: codeEditr
50 |     })
51 |   }
52 | 
53 |   render () {
54 |     return (
55 |       <div>
56 |         <div style={{height: '400px'}}>
57 |           <Playground
58 |             {...this.state.code}
59 |           />
60 |         </div>
61 |         <div className='button-row'>
62 |           <button onClick={this.slackLogo}>
63 |             Slack Logo
64 |           </button>
65 |           <button onClick={this.editr}>
66 |             Editr's demo
67 |           </button>
68 |         </div>
69 |       </div>
70 |     )
71 |   }
72 | }
73 | 
74 | ReactDOM.render(<App />, document.getElementById('mount-point'))
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > This project is under **heavy development**
 2 | > If you a looking for a stable one you can use
 3 | > [jotted](https://github.com/ghinda/jotted) or
 4 | > [editr.js](https://github.com/Idered/Editr.js)
 5 | 
 6 | # Code playground [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)
 7 | 
 8 | A component for rendering HTML, CSS, Javascript code with editable source and live preview.
 9 | You can think of this like CodePen or JSFiddle of you own.
10 | 
11 | [![travis-ci.org](https://travis-ci.org/thangngoc89/react-code-playground.svg?branch=master)](https://travis-ci.org/thangngoc89/react-code-playground)
12 | [![codecov.io](https://codecov.io/github/thangngoc89/react-code-playground/coverage.svg?branch=master)](https://codecov.io/github/thangngoc89/react-code-playground?branch=master)
13 | 
14 | # Install
15 | 
16 | ```shell
17 | npm install --save code-playground
18 | ```
19 | 
20 | (WIP)
21 | 
22 | # Plugins
23 | 
24 | ## Parsers (aka preprocessors)
25 | 
26 | `code-playground` is a lightweight component with no built-in preprocessors (I called them parsers).
27 | You can add parsers via plugin interface.
28 | 
29 | List of available parsers 
30 | 
31 | - SASS (built-in, will be refactored into it's own package)
32 | 
33 | # Development
34 | 
35 | ```
36 | git clone https://github.com/thangngoc89/react-playground-component
37 | npm install
38 | npm start
39 | ```
40 | 
41 | 
42 | # FAQ
43 | 
44 | ## 1. How is this different from [component-playground](https://github.com/FormidableLabs/component-playground)
45 | 
46 | `component-playground` is for React Components while `code-playground` is for any front-end code that can be display on browser.
47 | 
48 | ## 2. Can I use this on a site doesn't use React ?
49 | 
50 | Sorry but I don't have plan for this at the momment.
51 | 
52 | You can use some standalone alternative solution like
53 | [jotted](https://github.com/ghinda/jotted) or
54 | [editr.js](https://github.com/Idered/Editr.js).
55 | In facts, Code playground was inspired by those projects
56 | 


--------------------------------------------------------------------------------
/src/components/Nav/__tests__/Tab.spec.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import $ from 'teaspoon'
 3 | import Tab from '../Tab'
 4 | import styles from '../Nav.scss'
 5 | 
 6 | const render = props => $(<Tab {...props} />).render()
 7 | const shallowRender = props => $(<Tab {...props} />).shallowRender()
 8 | 
 9 | describe('(component) Nav', () => {
10 |   describe('Tab', () => {
11 |     let $element, _props, _spy
12 | 
13 |     beforeEach(() => {
14 |       _spy = sinon.spy()
15 |       _props = {
16 |         type: 'css',
17 |         displayName: 'CSS',
18 |         activeTab: 'css',
19 |         onTabClick: _spy
20 |       }
21 |     })
22 | 
23 |     it('render a <li> tag', () => {
24 |       $element = shallowRender()
25 |       expect($element.find('li').length).to.equal(1)
26 |     })
27 | 
28 |     it('render a child <span> tag with displayName', () => {
29 |       $element = shallowRender(_props)
30 |       const $span = $element.single('span')
31 |       expect($span.length).to.equal(1)
32 |       expect($span.text()).to.equal('CSS')
33 |     })
34 | 
35 |     it('should have .tab class', () => {
36 |       $element.shallowRender()
37 |       const $li = $element.single(`li.${styles.tab}`)
38 |       expect($li.length).to.be.equal(1)
39 |     })
40 | 
41 |     it('should have .tabActive class when activeTab === type', () => {
42 |       $element = shallowRender(_props)
43 |       const $li = $element.single(`li.${styles.tabActive}`)
44 |       expect($li.length).to.equal(1)
45 |     })
46 | 
47 |     it('should not have .tabActive class when activeTab !== type', () => {
48 |       _props = {
49 |         ..._props,
50 |         activeTab: 'result'
51 |       }
52 | 
53 |       $element = shallowRender(_props)
54 |       const $li = $element.none(`li.${styles.tabActive}`)
55 |       expect($li.length).to.equal(0)
56 |     })
57 | 
58 |     it('should dispatch onTabClick action when clicked', () => {
59 |       $element = shallowRender(_props)
60 |       const $li = $element.single('li')
61 |       _spy.should.have.not.been.called
62 |       $li.trigger('click')
63 |       _spy.should.have.been.calledOnce
64 |     })
65 |   })
66 | })
67 | 


--------------------------------------------------------------------------------
/src/redux/modules/__tests__/compiling.spec.js:
--------------------------------------------------------------------------------
 1 | import reducer, * as compileModule from '../compiling'
 2 | import * as codeModule from '../code'
 3 | import configureMockStore from 'redux-mock-store'
 4 | import thunk from 'redux-thunk'
 5 | 
 6 | const middlewares = [thunk]
 7 | const mockStore = configureMockStore(middlewares)
 8 | 
 9 | describe('(redux) compiling module', () => {
10 |   describe('create action to handle', () => {
11 |     it('compileStart', () => {
12 |       expect(compileModule.compileStart()).to.deep.equal({
13 |         type: compileModule.COMPILE_START,
14 |         payload: undefined
15 |       })
16 |     })
17 | 
18 |     it('compileComplete', () => {
19 |       expect(compileModule.compileComplete()).to.deep.equal({
20 |         type: compileModule.COMPILE_COMPLETE,
21 |         payload: undefined
22 |       })
23 |     })
24 | 
25 |     it('compileCompleteWithCode', (done) => {
26 |       const code = 'foo'
27 |       const type = 'css'
28 | 
29 |       const initialState = {}
30 | 
31 |       const expectedActions = [
32 |         codeModule.codeSetParsed(code, type),
33 |         compileModule.compileComplete(type)
34 |       ]
35 | 
36 |       const store = mockStore(initialState, expectedActions, done)
37 |       store.dispatch(compileModule.compileCompleteWithCode(code, type))
38 |     })
39 |   })
40 | 
41 |   describe('have reducer to handle these actions', () => {
42 |     it('initialState', () => {
43 |       const expectedState = []
44 |       expect(reducer(undefined, {}))
45 |         .to.deep.equal(expectedState)
46 |     })
47 |     it('COMPILE_START', () => {
48 |       const codeType = 'css'
49 |       const inititalState = []
50 |       const expectedState = [codeType]
51 |       const action = compileModule.compileStart(codeType)
52 |       expect(reducer(inititalState, action))
53 |         .to.deep.equal(expectedState)
54 |     })
55 |     it('COMPILE_COMPLETE', () => {
56 |       const codeType = 'css'
57 |       const initialState = ['foo', 'css', 'bar']
58 |       const expectedState = ['foo', 'bar']
59 |       const action = compileModule.compileComplete(codeType)
60 | 
61 |       expect(reducer(initialState, action))
62 |         .to.deep.equal(expectedState)
63 |     })
64 |   })
65 | })
66 | 


--------------------------------------------------------------------------------
/src/redux/modules/__tests__/code.reducer.spec.js:
--------------------------------------------------------------------------------
 1 | import reducer, * as codeModule from '../code'
 2 | 
 3 | describe('(redux) code module', () => {
 4 |   describe('have reducer to handle these actions', () => {
 5 |     it('initialState', () => {
 6 |       const expectedState = {
 7 |         isSynced: false
 8 |       }
 9 |       expect(reducer(undefined, {}))
10 |         .to.deep.equal(expectedState)
11 |     })
12 |     it('CODE_SET', () => {
13 |       const initialState = {
14 |         css: {
15 |           original: 'foo',
16 |           parsed: 'bar'
17 |         }
18 |       }
19 |       const expectedState = {
20 |         css: {
21 |           original: 'new code'
22 |         }
23 |       }
24 | 
25 |       const action = codeModule.codeSet('new code', 'css')
26 |       expect(reducer(initialState, action))
27 |         .to.deep.equal(expectedState)
28 |     })
29 | 
30 |     it('CODE_SET_PARSED', () => {
31 |       const initialState = {
32 |         css: {
33 |           original: 'new code'
34 |         }
35 |       }
36 |       const expectedState = {
37 |         css: {
38 |           original: 'new code',
39 |           parsed: 'parsed code'
40 |         }
41 |       }
42 | 
43 |       const action = codeModule.codeSetParsed('parsed code', 'css')
44 |       expect(reducer(initialState, action))
45 |         .to.deep.equal(expectedState)
46 |     })
47 | 
48 |     it('CODE_SYNC', () => {
49 |       const initialState = {
50 |         isSynced: false
51 |       }
52 |       const expectedState = {
53 |         isSynced: true,
54 |         css: {
55 |           original: 'foo'
56 |         },
57 |         html: {
58 |           original: 'foo'
59 |         },
60 |         javascript: undefined
61 |       }
62 | 
63 |       const action = codeModule.codeSync({
64 |         css: {
65 |           original: 'foo'
66 |         },
67 |         html: {
68 |           original: 'foo'
69 |         }
70 |       })
71 | 
72 |       expect(reducer(initialState, action))
73 |         .to.deep.equal(expectedState)
74 |     })
75 |     it('CODE_REFRESH', () => {
76 |       const initialState = {
77 |         foo: 'bar'
78 |       }
79 |       const expectedState = {
80 |         isSynced: false
81 |       }
82 | 
83 |       const action = codeModule.codeRefresh()
84 | 
85 |       expect(reducer(initialState, action))
86 |         .to.deep.equal(expectedState)
87 |     })
88 |   })
89 | })
90 | 


--------------------------------------------------------------------------------
/src/components/Playground/__tests__/Playground.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import $ from 'teaspoon'
  3 | import { bindActionCreators } from 'redux'
  4 | import Playground from '../Playground'
  5 | import Nav from '../../Nav'
  6 | import Result from '../../Result'
  7 | import CodeEditor from '../../CodeEditor'
  8 | import styles from '../Playground.scss'
  9 | 
 10 | const render = props => $(<Playground {...props} />).render()
 11 | const shallowRender = props => $(<Playground {...props} />).shallowRender()
 12 | 
 13 | describe('(component) Playground', () => {
 14 |   let $element, _props, _spies
 15 | 
 16 |   beforeEach(() => {
 17 |     _spies = {}
 18 | 
 19 |     _props = {
 20 |       html: {
 21 |         original: 'html'
 22 |       },
 23 |       css: {
 24 |         original: 'css'
 25 |       },
 26 |       javascript: {
 27 |         original: 'javascript'
 28 |       },
 29 |       plugins: [],
 30 |       compiling: [],
 31 |       activeTab: 'result',
 32 |       ...bindActionCreators({
 33 |         tabSet: (_spies.tabSet = sinon.spy()),
 34 |         codeSet: (_spies.codeSet = sinon.spy()),
 35 |         codeSync: (_spies.codeSync = sinon.spy()),
 36 |         codeParse: (_spies.codeParse = sinon.spy())
 37 |       }, _spies.dispatch = sinon.spy())
 38 |     }
 39 | 
 40 |     $element = shallowRender(_props)
 41 |   })
 42 | 
 43 |   it('render a div with .main class and <Nav>', () => {
 44 |     $element.single(`div.${styles.main}`)
 45 |     $element.single($.s`${Nav}`)
 46 |   })
 47 | 
 48 |   it('render <Result> when activeTab === result', () => {
 49 |     $element.single($.s`${Result}`)
 50 |     $element.none('span')
 51 |     $element.none($.s`${CodeEditor}`)
 52 |   })
 53 | 
 54 |   it('render <Result> with parsed code', () => {
 55 |     _props = {
 56 |       ..._props,
 57 |       css: {
 58 |         original: 'css',
 59 |         parsed: 'css_parsed'
 60 |       }
 61 |     }
 62 | 
 63 |     $element = shallowRender(_props)
 64 |     $element.none('span')
 65 |     const $result = $element.single($.s`${Result}`)
 66 |     const props = $result.props()
 67 |     props.should.have.property('code')
 68 |     props.code.should.have.property('css', 'css_parsed')
 69 |   })
 70 | 
 71 |   it('render "isCompiling" text when compiling code', () => {
 72 |     _props = {
 73 |       ..._props,
 74 |       compiling: ['css']
 75 |     }
 76 | 
 77 |     $element = shallowRender(_props)
 78 |     $element.single('span')
 79 |     $element.none($.s`${Result}`)
 80 |   })
 81 | 
 82 |   it('render <CodeEditor> when activeTab !== result', () => {
 83 |     _props = {
 84 |       ..._props,
 85 |       activeTab: 'css'
 86 |     }
 87 | 
 88 |     $element = shallowRender(_props)
 89 |     $element.single($.s`${CodeEditor}`)
 90 |     $element.none('span')
 91 |     $element.none($.s`${Result}`)
 92 |   })
 93 |   //
 94 |   // it('trigger codeSync on mount', () => {
 95 |   //   _spies.dispatch.should.have.not.been.called
 96 |   //   $element = render(_props)
 97 |   //   _spies.codeSync.should.have.been.calledOnce
 98 |   // })
 99 | })
100 | 


--------------------------------------------------------------------------------
/src/components/Playground/Playground.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, PropTypes } from 'react'
  2 | import CodeEditor from '../CodeEditor'
  3 | import Nav from '../Nav'
  4 | import Result from '../Result'
  5 | import { getCodeMirrorMode } from '../../utils'
  6 | import styles from './Playground.scss'
  7 | 
  8 | class Playground extends Component {
  9 |   static propTypes = {
 10 |     html: PropTypes.object,
 11 |     css: PropTypes.object,
 12 |     javascript: PropTypes.object,
 13 |     plugins: PropTypes.array,
 14 |     compiling: PropTypes.array.isRequired,
 15 |     activeTab: PropTypes.string.isRequired,
 16 |     tabSet: PropTypes.func.isRequired,
 17 |     codeSet: PropTypes.func.isRequired,
 18 |     codeSync: PropTypes.func.isRequired,
 19 |     codeParse: PropTypes.func.isRequired
 20 |   };
 21 | 
 22 |   constructor (props) {
 23 |     super(props)
 24 |     this.tabSet = this.tabSet.bind(this)
 25 |   }
 26 | 
 27 |   componentDidMount () {
 28 |     this.props.codeSync(this.props)
 29 |   }
 30 | 
 31 |   componentWillReceiveProps (nextProps) {
 32 |     if (!nextProps.isSynced) {
 33 |       this.props.codeSync(nextProps)
 34 |     }
 35 |   }
 36 | 
 37 |   get codeEditorProps () {
 38 |     const activeTab = this.props.activeTab
 39 |     return {
 40 |       code: this.props[activeTab]['original'],
 41 |       options: {
 42 |         mode: getCodeMirrorMode(
 43 |           activeTab,
 44 |           this.parsers(activeTab)
 45 |         )
 46 |       },
 47 |       onChange: this.props.codeSet
 48 |     }
 49 |   }
 50 | 
 51 |   /**
 52 |    * Get parsed code
 53 |    * Trigger parse if needed
 54 |    * @return {object}
 55 |    */
 56 |   get codeParsed () {
 57 |     const originalOrParsed = code => {
 58 |       return (code.hasOwnProperty('parsed'))
 59 |         ? code.parsed
 60 |         : code.original
 61 |     }
 62 | 
 63 |     return {
 64 |       css: originalOrParsed(this.props.css),
 65 |       javascript: originalOrParsed(this.props.javascript),
 66 |       html: originalOrParsed(this.props.html)
 67 |     }
 68 |   }
 69 | 
 70 |   /**
 71 |    * Get all plugins with type `parser`
 72 |    * @return {array} [parsers]
 73 |    */
 74 |   parsers (codeType) {
 75 |     let plugins = this.props.plugins
 76 |     if (plugins) {
 77 |       plugins = plugins
 78 |         .filter(t => t.type === 'parser')
 79 |       if (codeType) {
 80 |         plugins = plugins
 81 |           .filter(t => t.codeType === codeType)
 82 |       }
 83 |     }
 84 | 
 85 |     return plugins
 86 |   }
 87 | 
 88 |   /**
 89 |    * Switch tab, trigger parse
 90 |    * @param  {string} tab [tab name]
 91 |    */
 92 |   tabSet (tab) {
 93 |     this.props.tabSet(tab)
 94 |     if (tab === 'result') {
 95 |       this.props.codeParse(this.props)
 96 |     }
 97 |   }
 98 | 
 99 |   render () {
100 |     const isCompiling = (this.props.compiling.length > 0)
101 | 
102 |     return (
103 |       <div className={styles.main}>
104 |         <Nav
105 |           activeTab={this.props.activeTab}
106 |           parsers={this.parsers()}
107 |           onTabClick={this.tabSet}
108 |         />
109 |         {
110 |           this.props.activeTab === 'result' &&
111 |           isCompiling &&
112 |           <span>Compiling...</span>
113 |         }
114 |         {
115 |           this.props.activeTab === 'result' &&
116 |           !isCompiling &&
117 |           <Result code={this.codeParsed} />
118 |         }
119 |         {
120 |           this.props.activeTab !== 'result' &&
121 |           <CodeEditor {...this.codeEditorProps} />
122 |         }
123 |       </div>
124 |     )
125 |   }
126 | }
127 | 
128 | export default Playground
129 | 


--------------------------------------------------------------------------------
/demo/examples/editr.js/css.example:
--------------------------------------------------------------------------------
  1 | @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600");
  2 | 
  3 | html {
  4 |   background: #26292c;
  5 |   color: #f8f8f8;
  6 |   font: 1em/1.5 "Open Sans", sans-serif;
  7 |   -webkit-font-smoothing: antialiased;
  8 |   -webkit-text-size-adjust: 100%;
  9 |   -ms-text-size-adjust: 100%;
 10 | }
 11 | 
 12 | body {
 13 |   margin: auto;
 14 |   width: 100%;
 15 |   height: 8.5em;
 16 |   text-align: center;
 17 |   position: absolute;
 18 |   top: 0;
 19 |   bottom: 0;
 20 |   right: 0;
 21 |   left: 0;
 22 | }
 23 | 
 24 | /** %[Object] Switch */
 25 | /*------------------------------------*/
 26 | .switch {
 27 | 	color: #6f839a;
 28 | 	cursor: pointer;
 29 | 	font-weight: 600;
 30 | 	line-height: 1.5em;
 31 | 	border-radius: 3px;
 32 | 	padding: .125em .5em;
 33 | 	display: inline-block;
 34 | 	background-color: #3e4956;
 35 | 	-webkit-transition: .15s ease;
 36 | 	-moz-transition: .15s ease;
 37 | 	-ms-transition: .15s ease;
 38 | 	-o-transition: .15s ease;
 39 | 	transition: .15s ease;
 40 | }
 41 | 
 42 | input[type="radio"]:checked + .switch {
 43 | 	color: #fff;
 44 | 	padding-left: 1em;
 45 | 	padding-right: 1em;
 46 | }
 47 | 
 48 | input[type="radio"]:checked + .switch--on {
 49 | 	background-color: #7eab55;
 50 | }
 51 | 
 52 | input[type="radio"]:checked + .switch--off {
 53 | 	background-color: #dd4a38;
 54 | }
 55 | /** %[Object] Radio buttons */
 56 | /*------------------------------------*/
 57 | @-webkit-keyframes pulse {
 58 |     0% { width: .7em; height: .7em; margin: .4em;  }
 59 |     50% { width: 1.1em; height: 1.1em; margin: .2em; }
 60 |     100% { width: .9em; height: .9em; margin: .3em; }
 61 | }
 62 | 
 63 | @-moz-keyframes pulse {
 64 |     0% { width: .7em; height: .7em; margin: .4em;  }
 65 |     50% { width: 1.1em; height: 1.1em; margin: .2em; }
 66 |     100% { width: .9em; height: .9em; margin: .3em; }
 67 | }
 68 | 
 69 | @-o-keyframes pulse {
 70 |     0% { width: .7em; height: .7em; margin: .4em;  }
 71 |     50% { width: 1.1em; height: 1.1em; margin: .2em; }
 72 |     100% { width: .9em; height: .9em; margin: .3em; }
 73 | }
 74 | 
 75 | @keyframes pulse {
 76 |     0% { width: .7em; height: .7em; margin: .4em;  }
 77 |     50% { width: 1.1em; height: 1.1em; margin: .2em; }
 78 |     100% { width: .9em; height: .9em; margin: .3em; }
 79 | }
 80 | 
 81 | .radio {
 82 |     color: #798188;
 83 |     cursor: pointer;
 84 |     margin-left: .5em;
 85 |     display: inline-block;
 86 | }
 87 | 
 88 | .radio,
 89 | .radio span:before {
 90 |     -webkit-transition: .25s ease;
 91 |     -moz-transition: .25s ease;
 92 |     -ms-transition: .25s ease;
 93 |     -o-transition: .25s ease;
 94 |     transition: .25s ease;
 95 | }
 96 | 
 97 | .radio span {
 98 |     width: 1.5em;
 99 |     height: 1.5em;
100 |     margin-right: .5em;
101 |     border-radius: 3em;
102 |     background: #202325;
103 |     vertical-align: top;
104 |     display: inline-block;
105 | }
106 | 
107 | .radio span:before {
108 |     content: '';
109 |     width: .7em;
110 |     height: .7em;
111 |     margin: .4em;
112 |     border-radius: 3em;
113 |     display: inline-block;
114 |     background-color: rgba(0,0,0,0);
115 | }
116 | 
117 | .radio:hover span:before {
118 |     background-color: rgba(255,255,255, .9);
119 | }
120 | 
121 | input[type="radio"]:checked + .radio {
122 |     color: #f8f8f8;
123 | }
124 | 
125 | input[type="radio"]:checked + .radio span:before {
126 |     background-color: #9fd86b;
127 |     width: .9em;
128 |     height: .9em;
129 |     margin: .3em;
130 |     -webkit-animation: pulse .25s;
131 |     -moz-animation:    pulse .25s;
132 |     -o-animation:      pulse .25s;
133 |     animation:         pulse .25s;
134 | }
135 | 


--------------------------------------------------------------------------------
/src/redux/modules/__tests__/code.actions.spec.js:
--------------------------------------------------------------------------------
  1 | import * as codeModule from '../code'
  2 | import { actions as compileModule } from '../compiling'
  3 | import configureMockStore from 'redux-mock-store'
  4 | import thunk from 'redux-thunk'
  5 | 
  6 | const middlewares = [thunk]
  7 | const mockStore = configureMockStore(middlewares)
  8 | 
  9 | describe('(redux) code module', () => {
 10 |   describe('create action to handle', () => {
 11 |     it('codeSet', () => {
 12 |       const code = 'foo'
 13 |       const type = 'bar'
 14 | 
 15 |       expect(codeModule.codeSet(code, type)).to.deep.equal({
 16 |         type: codeModule.CODE_SET,
 17 |         payload: {code, type}
 18 |       })
 19 |     })
 20 | 
 21 |     it('codeSetParsed', () => {
 22 |       const code = 'foo'
 23 |       const type = 'bar'
 24 | 
 25 |       expect(codeModule.codeSetParsed(code, type)).to.deep.equal({
 26 |         type: codeModule.CODE_SET_PARSED,
 27 |         payload: {code, type}
 28 |       })
 29 |     })
 30 | 
 31 |     it('codeSync', () => {
 32 |       expect(codeModule.codeSync()).to.deep.equal({
 33 |         type: codeModule.CODE_SYNC,
 34 |         payload: undefined
 35 |       })
 36 |     })
 37 | 
 38 |     it('codeRefresh', () => {
 39 |       expect(codeModule.codeRefresh()).to.deep.equal({
 40 |         type: codeModule.CODE_REFRESH,
 41 |         payload: undefined
 42 |       })
 43 |     })
 44 |   })
 45 | 
 46 |   describe('create thunk to handle', () => {
 47 |     it('codeSetWithTab', (done) => {
 48 |       const initialState = {
 49 |         activeTab: 'css'
 50 |       }
 51 | 
 52 |       const code = 'foo'
 53 |       const expectedActions = [
 54 |         codeModule.codeSet(code, 'css')
 55 |       ]
 56 | 
 57 |       const store = mockStore(initialState, expectedActions, done)
 58 |       store.dispatch(codeModule.codeSetWithTab(code))
 59 |     })
 60 | 
 61 |     it('codeSyncAndParse', (done) => {
 62 |       const initialState = {}
 63 |       const props = {}
 64 | 
 65 |       const expectedActions = [
 66 |         codeModule.codeSync(props)
 67 |       ]
 68 | 
 69 |       const store = mockStore(initialState, expectedActions, done)
 70 |       store.dispatch(codeModule.codeSyncAndParse(props))
 71 |     })
 72 | 
 73 |     describe('codeParse', () => {
 74 |       let _spies, _props
 75 |       beforeEach(() => {
 76 |         _spies = {}
 77 |         _spies.dispatch = sinon.spy()
 78 |         _props = {
 79 |           plugins: []
 80 |         }
 81 |       })
 82 | 
 83 |       it('do not dispatch any actions when no parsers passed', () => {
 84 |         const thunk = codeModule.codeParse(_props)
 85 |         thunk(_spies.dispatch)
 86 |         _spies.dispatch.should.have.not.been.called
 87 |       })
 88 | 
 89 |       it('dispatch compileStart and compileComplete action', () => {
 90 |         const parser = {
 91 |           type: 'parser',
 92 |           codeType: 'css',
 93 |           parse: (code, cb) => {
 94 |             cb('compiled code', 'css')
 95 |           }
 96 |         }
 97 |         const initialState = {
 98 |           code: {
 99 |             css: {
100 |               original: '.foo{border: 0}'
101 |             }
102 |           }
103 |         }
104 | 
105 |         _props = {
106 |           ..._props,
107 |           plugins: [parser]
108 |         }
109 | 
110 |         const thunk = codeModule.codeParse(_props)
111 |         thunk(_spies.dispatch, () => initialState)
112 |         _spies.dispatch.should.have.been.calledTwice
113 |         _spies.dispatch.firstCall.calledWith(
114 |           compileModule.compileStart('css')
115 |         )
116 |         _spies.dispatch.secondCall.calledWith(
117 |           compileModule.compileComplete('compiled code', 'css')
118 |         )
119 |       })
120 |     })
121 |   })
122 | })
123 | 


--------------------------------------------------------------------------------
/src/redux/modules/code.js:
--------------------------------------------------------------------------------
  1 | import { createAction, handleActions } from 'redux-actions'
  2 | import { actions as compilingActions } from './compiling'
  3 | import { bindActionCreators } from 'redux'
  4 | // ------------------------------------
  5 | // Constants
  6 | // ------------------------------------
  7 | export const CODE_SET = 'playground/code/SET'
  8 | export const CODE_SET_PARSED = 'playground/code/SET_PARSED'
  9 | export const CODE_SYNC = 'playground/code/SYNC'
 10 | export const CODE_REFRESH = 'playground/code/REFRESH'
 11 | 
 12 | // ------------------------------------
 13 | // Actions
 14 | // ------------------------------------
 15 | export const codeSet = createAction(CODE_SET, (code, type) => ({code, type}))
 16 | export const codeSetParsed = createAction(CODE_SET_PARSED, (code, type) => ({code, type}))
 17 | export const codeSync = createAction(CODE_SYNC)
 18 | export const codeRefresh = createAction(CODE_REFRESH)
 19 | 
 20 | /**
 21 |  * Get current code type via activeTab
 22 |  * and save it via store
 23 |  * @param  {string} code [code from editor]
 24 |  * @return {function}    [redux-thunk]
 25 |  */
 26 | export const codeSetWithTab = (code) => {
 27 |   return (dispatch, getState) => {
 28 |     const activeTab = getState().activeTab
 29 |     dispatch(codeSet(code, activeTab))
 30 |   }
 31 | }
 32 | 
 33 | /**
 34 |  * Sync code from component own props
 35 |  * on mount and receiveProps
 36 |  * @param  {object} props [Playground component props]
 37 |  * @return {function}     [redux-thunk]
 38 |  */
 39 | export const codeSyncAndParse = (props) => {
 40 |   return (dispatch) => {
 41 |     dispatch(codeSync(props))
 42 |     dispatch(codeParse(props))
 43 |   }
 44 | }
 45 | 
 46 | /**
 47 |  * Parse code and save it into store
 48 |  * @param  {object} props [Playground component props]
 49 |  * @return {function}       [redux-thunk]
 50 |  */
 51 | export const codeParse = (props) => {
 52 |   // TODO: Refactor me
 53 |   // Duplicate with Playground.parsers(codeType)
 54 |   const getParser = (codeType) => {
 55 |     if (props.plugins === undefined) {
 56 |       return undefined
 57 |     }
 58 |     let parser = props.plugins
 59 |       .filter(t =>
 60 |         (t.type === 'parser') &&
 61 |         (t.codeType === codeType)
 62 |       )
 63 |     if (parser) {
 64 |       parser = parser[0]
 65 |     }
 66 | 
 67 |     return parser
 68 |   }
 69 |   return (dispatch, getState) => {
 70 |     const doParse = (codeType) => {
 71 |       const parser = getParser(codeType)
 72 |       if (parser !== undefined) {
 73 |         dispatch(compilingActions.compileStart(parser.codeType))
 74 |         parser.parse(
 75 |           getState().code[codeType].original,
 76 |           bindActionCreators(compilingActions.compileComplete, dispatch)
 77 |         )
 78 |       }
 79 |     }
 80 |     doParse('css')
 81 |     doParse('javscript')
 82 |     doParse('html')
 83 |   }
 84 | }
 85 | 
 86 | export const actions = {
 87 |   codeSet: codeSetWithTab,
 88 |   codeSetParsed,
 89 |   codeSync: codeSyncAndParse,
 90 |   codeParse,
 91 |   codeRefresh
 92 | }
 93 | 
 94 | // ------------------------------------
 95 | // Reducer
 96 | // ------------------------------------
 97 | const initialState = {
 98 |   isSynced: false
 99 | }
100 | 
101 | export default handleActions({
102 |   [CODE_SET]: (state, { payload }) => ({
103 |     ...state,
104 |     [payload.type]: {
105 |       original: payload.code
106 |     }
107 |   }),
108 |   [CODE_SET_PARSED]: (state, { payload }) => ({
109 |     ...state,
110 |     [payload.type]: {
111 |       ...state[payload.type],
112 |       parsed: payload.code
113 |     }
114 |   }),
115 |   [CODE_SYNC]: (state, { payload }) => ({
116 |     isSynced: true,
117 |     css: payload.css,
118 |     html: payload.html,
119 |     javascript: payload.javascript
120 |   }),
121 |   [CODE_REFRESH]: (state) => initialState
122 | }, initialState)
123 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "code-playground",
  3 |   "version": "0.1.2",
  4 |   "description": "A component for rendering HTML, CSS, Javascript code with editable source and live preview.",
  5 |   "main": "lib/index.js",
  6 |   "scripts": {
  7 |     "prebabelify": "npm run clean",
  8 |     "babelify": "NODE_ENV=lib babel --ignore __tests__ src --out-dir lib",
  9 |     "build": "DEBUG=playground:* NODE_ENV=production babel-node bin/build",
 10 |     "postbabelify": "DEBUG=playground:* babel-node bin/concatStyleSheet",
 11 |     "codecov": "cat coverage/*/lcov.info | codecov",
 12 |     "clean": "rimraf lib dist webpack",
 13 |     "start": "DEBUG=playground:* babel-node bin/develop",
 14 |     "test": "NODE_ENV=test babel-node ./node_modules/karma/bin/karma start bin/karma.js",
 15 |     "test:ci": "npm test -- --browsers Firefox,Chrome_travis_ci",
 16 |     "test:dev": "npm test -- --watch",
 17 |     "lint": "eslint .",
 18 |     "deploy": "DEBUG=playground:* babel-node bin/deploy",
 19 |     "prepublish": "npm run babelify"
 20 |   },
 21 |   "repository": {
 22 |     "type": "git",
 23 |     "url": "git+https://github.com/thangngoc89/react-playground-component.git"
 24 |   },
 25 |   "keywords": [
 26 |     "playground",
 27 |     "react"
 28 |   ],
 29 |   "author": "Khoa Nguyen <hi@khoanguyen.me>",
 30 |   "license": "MIT",
 31 |   "bugs": {
 32 |     "url": "https://github.com/thangngoc89/react-playground-component/issues"
 33 |   },
 34 |   "homepage": "https://github.com/thangngoc89/react-playground-component#readme",
 35 |   "devDependencies": {
 36 |     "babel-cli": "^6.4.5",
 37 |     "babel-core": "^6.4.5",
 38 |     "babel-eslint": "^5.0.0-beta9",
 39 |     "babel-loader": "^6.2.1",
 40 |     "babel-plugin-webpack-loaders": "^0.3.5",
 41 |     "babel-preset-es2015": "^6.3.13",
 42 |     "babel-preset-react": "^6.3.13",
 43 |     "babel-preset-react-hmre": "^1.0.1",
 44 |     "babel-preset-stage-1": "^6.3.13",
 45 |     "babel-register": "^6.4.3",
 46 |     "chai": "^3.5.0",
 47 |     "chai-as-promised": "^5.2.0",
 48 |     "codecov.io": "^0.1.6",
 49 |     "codemirror": "^5.11.0",
 50 |     "connect-history-api-fallback": "^1.1.0",
 51 |     "css-loader": "^0.23.1",
 52 |     "debug": "^2.2.0",
 53 |     "eslint": "^1.10.3",
 54 |     "eslint-config-standard": "^4.4.0",
 55 |     "eslint-config-standard-react": "^1.2.1",
 56 |     "eslint-loader": "^1.2.1",
 57 |     "eslint-plugin-react": "^3.16.1",
 58 |     "eslint-plugin-standard": "^1.3.1",
 59 |     "express": "^4.13.4",
 60 |     "extract-text-webpack-plugin": "^1.0.1",
 61 |     "fs-extra": "^0.26.5",
 62 |     "gh-pages": "^0.11.0",
 63 |     "html-webpack-plugin": "^2.7.2",
 64 |     "isparta-loader": "^2.0.0",
 65 |     "js-beautify": "^1.6.2",
 66 |     "karma": "^0.13.19",
 67 |     "karma-chai": "^0.1.0",
 68 |     "karma-chai-as-promised": "^0.1.2",
 69 |     "karma-chai-sinon": "^0.1.5",
 70 |     "karma-chrome-launcher": "^0.2.2",
 71 |     "karma-cli": "^0.1.2",
 72 |     "karma-coverage": "^0.5.3",
 73 |     "karma-firefox-launcher": "^0.1.7",
 74 |     "karma-mocha": "^0.2.1",
 75 |     "karma-sourcemap-loader": "^0.3.7",
 76 |     "karma-spec-reporter": "0.0.24",
 77 |     "karma-webpack": "^1.7.0",
 78 |     "mocha": "^2.4.5",
 79 |     "node-sass": "^3.4.2",
 80 |     "raw-loader": "^0.5.1",
 81 |     "react-addons-test-utils": "^0.14.7",
 82 |     "react-dom": "^0.14.7",
 83 |     "redux-mock-store": "0.0.6",
 84 |     "rimraf": "^2.5.1",
 85 |     "sass-loader": "^3.1.2",
 86 |     "sinon": "^1.17.3",
 87 |     "sinon-chai": "^2.8.0",
 88 |     "style-loader": "^0.13.0",
 89 |     "teaspoon": "^6.1.1",
 90 |     "webpack": "^1.12.12",
 91 |     "webpack-configurator": "^0.3.1",
 92 |     "webpack-dev-middleware": "^1.5.1",
 93 |     "webpack-hot-middleware": "^2.6.4",
 94 |     "yargs": "^3.32.0"
 95 |   },
 96 |   "dependencies": {
 97 |     "classnames": "^2.2.3",
 98 |     "react": "^0.14.7",
 99 |     "react-codemirror": "^0.2.5",
100 |     "react-redux": "^4.1.2",
101 |     "redux": "^3.1.4",
102 |     "redux-actions": "^0.9.1",
103 |     "redux-thunk": "^2.0.1"
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/demo/examples/slack-logo/sass.example:
--------------------------------------------------------------------------------
  1 | $slack-size: 96px;
  2 | $dot-diameter: 18px;
  3 | $slack-angle: 15deg;
  4 | $duration: 2s;
  5 | 
  6 | $slack-blue: #6ecadc;
  7 | $slack-yellow: #e9a820;
  8 | $slack-pink: #e01563;
  9 | $slack-green: #3eb991;
 10 | 
 11 | .c-slack {
 12 |   position: relative;
 13 |   z-index: 100;
 14 |   margin: 80px auto;
 15 |   width: $slack-size;
 16 |   height: $slack-size;
 17 | }
 18 | 
 19 | .c-slack__dot {
 20 |   display: block;
 21 |   position: absolute;
 22 |   width: $dot-diameter;
 23 |   height: $dot-diameter;
 24 |   border-radius: $dot-diameter/2;
 25 | }
 26 | 
 27 | .c-slack__dot--a {
 28 |   top: 0; left: 0;
 29 |   background-color: $slack-green;
 30 | }
 31 | 
 32 | .c-slack__dot--b {
 33 |   top: 0; right: 0;
 34 |   background-color: $slack-blue;
 35 | }
 36 | 
 37 | .c-slack__dot--c {
 38 |   bottom: 0; right: 0;
 39 |   background-color: $slack-yellow;
 40 | }
 41 | 
 42 | .c-slack__dot--d {
 43 |   bottom: 0; left: 0;
 44 |   background-color: $slack-pink;
 45 | }
 46 | 
 47 | @keyframes slack-animation--a {
 48 |   0% {
 49 |     top: 0;
 50 |     bottom: auto;
 51 |     height: $dot-diameter;
 52 |   }
 53 |   33% {
 54 |     top: 0;
 55 |     bottom: auto;
 56 |     height: $slack-size;
 57 |   }
 58 |   34% {
 59 |     top: auto;
 60 |     bottom: 0;
 61 |     height: $slack-size;
 62 |   }
 63 |   66% {
 64 |     top: auto;
 65 |     bottom: 0;
 66 |     height: $dot-diameter;
 67 |   }
 68 |   100% {
 69 |     top: auto;
 70 |     bottom: $slack-size - $dot-diameter;
 71 |     height: $dot-diameter;
 72 |   }
 73 | }
 74 | 
 75 | .c-slack__dot--a {
 76 |   /* other styles */
 77 |   animation: slack-animation--a $duration infinite;
 78 | }
 79 | @keyframes slack-animation--b {
 80 |   0% {
 81 |     right: 0;
 82 |     left: auto;
 83 |     width: $dot-diameter;
 84 |   }
 85 |   33% {
 86 |     right: 0;
 87 |     left: auto;
 88 |     width: $slack-size;
 89 |   }
 90 |   34% {
 91 |     right: auto;
 92 |     left: 0;
 93 |     width: $slack-size;
 94 |   }
 95 |   66% {
 96 |     right: auto;
 97 |     left: 0;
 98 |     width: $dot-diameter;
 99 |   }
100 |   100% {
101 |     right: auto;
102 |     left: $slack-size - $dot-diameter;
103 |     width: $dot-diameter;
104 |   }
105 | }
106 | 
107 | .c-slack__dot--b {
108 |   /* other styles */
109 |   animation: slack-animation--b $duration infinite;
110 | }
111 | 
112 | @keyframes slack-animation--c {
113 |   0% {
114 |     bottom: 0;
115 |     top: auto;
116 |     height: $dot-diameter;
117 |   }
118 |   33% {
119 |     bottom: 0;
120 |     top: auto;
121 |     height: $slack-size;
122 |   }
123 |   34% {
124 |     bottom: auto;
125 |     top: -($slack-size - $slack-size);
126 |     height: $slack-size;
127 |   }
128 |   66% {
129 |     bottom: auto;
130 |     top: -($slack-size - $slack-size);
131 |     height: $dot-diameter;
132 |   }
133 |   100% {
134 |     bottom: auto;
135 |     top: $slack-size - $dot-diameter;
136 |     height: $dot-diameter;
137 |   }
138 | }
139 | 
140 | .c-slack__dot--c {
141 |   /* other styles */
142 |   animation: slack-animation--c $duration infinite;
143 | }
144 | 
145 | @keyframes slack-animation--d {
146 |   0% {
147 |     left: 0;
148 |     right: auto;
149 |     width: $dot-diameter;
150 |   }
151 |   33% {
152 |     left: 0;
153 |     right: auto;
154 |     width: $slack-size;
155 |   }
156 |   34% {
157 |     left: auto;
158 |     right: -($slack-size - $slack-size);
159 |     width: $slack-size;
160 |   }
161 |   66% {
162 |     left: auto;
163 |     right: -($slack-size - $slack-size);
164 |     width: $dot-diameter;
165 |   }
166 |   100% {
167 |     left: auto;
168 |     right: $slack-size - $dot-diameter;
169 |     width: $dot-diameter;
170 |   }
171 | }
172 | 
173 | .c-slack__dot--d {
174 |   /* other styles */
175 |   animation: slack-animation--d $duration infinite;
176 | }
177 | 
178 | .c-slack__dot--a {
179 |   /* other styles */
180 |   transform: translateX($dot-diameter);
181 | }
182 | 
183 | .c-slack__dot--b {
184 |   /* other styles */
185 |   transform: translateY($dot-diameter);
186 | }
187 | 
188 | .c-slack__dot--c {
189 |   /* other styles */
190 |   transform: translateX(-$dot-diameter);
191 | }
192 | 
193 | .c-slack__dot--d {
194 |   /* other styles */
195 |   transform: translateY(-$dot-diameter);
196 | }
197 | 
198 | .c-slack {
199 |   /* other styles */
200 |   transform: rotate(-$slack-angle);
201 | }
202 | 
203 | .c-slack__dot {
204 |   /* other styles */
205 |   mix-blend-mode: multiply;
206 | }
207 | 


--------------------------------------------------------------------------------