initialize mirror

Author: tiye

.gitignore

@@ -0,0 +1,5 @@
+
+/node_modules
+/build
+/index.html
+/lib

.npmignore

@@ -0,0 +1,6 @@
+
+/build
+/gulpfile.coffee
+/webpack.*
+/template.cirru
+/index.html

README.md

@@ -0,0 +1,34 @@
+
+CoffeeScript Webpack Starter
+----
+
+React project tempate at Talk.
+
+Demo http://ui.talk.ai/<project-name>
+
+### Usage
+
+### Develop
+
+```text
+npm i
+```
+
+You need a static file server for the HTML files. Personally I suggest using Nginx.
+
+Develop:
+
+```bash
+gulp html # regenerate index.html
+webpack-dev-server --hot # enable live-reloading
+```
+
+Build (Pack and optimize js, reivision js and add entry in `index.html`):
+
+```bash
+gulp build
+```
+
+### License
+
+MIT

gulpfile.coffee

@@ -0,0 +1,61 @@
+
+gulp = require('gulp')
+sequence = require('run-sequence')
+exec = require('child_process').exec
+env =
+  dev: true
+  main: 'http://localhost:8080/build/main.js'
+  vendor: 'http://localhost:8080/build/vendor.js'
+
+gulp.task 'script', ->
+  coffee = require('gulp-coffee')
+  gulp
+  .src 'src/*.coffee'
+  .pipe coffee()
+  .pipe gulp.dest('lib/')
+
+gulp.task 'rsync', (cb) ->
+  wrapper = require 'rsyncwrapper'
+  wrapper.rsync
+    ssh: true
+    src: ['index.html', 'build']
+    recursive: true
+    args: ['--verbose']
+    dest: 'talk-ui:/teambition/server/talk-ui/react-lite-dropdown'
+    deleteAll: true
+  , (error, stdout, stderr, cmd) ->
+    if error?
+      throw error
+    console.error stderr
+    console.log cmd
+    cb()
+
+gulp.task 'html', (cb) ->
+  require('cirru-script/lib/register')
+  html = require('./template.cirru')
+  fs = require('fs')
+  assets = undefined
+  unless env.dev
+    assets = require('./build/assets.json')
+    env.main = './build/' + assets.main
+    env.vendor = './build/' + assets.vendor
+
+  fs.writeFile 'index.html', html(env), cb
+
+gulp.task 'del', (cb) ->
+  del = require('del')
+  del [ 'build' ], cb
+
+gulp.task 'webpack', (cb) ->
+  if env.dev
+    command = 'webpack'
+  else
+    command = 'webpack --config webpack.min.coffee --progress'
+  exec command, (err, stdout, stderr) ->
+    console.log stdout
+    console.log stderr
+    cb err
+
+gulp.task 'build', (cb) ->
+  env.dev = false
+  sequence 'del', 'webpack', 'html', cb

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "coffee-webpack-starter",
+  "version": "0.0.1",
+  "description": "Component starter kit for Talk by Teambition",
+  "main": "lib/index.js",
+  "dependencies": {
+    "classnames": "^1.2.0",
+    "react": "^0.13.1"
+  },
+  "devDependencies": {
+    "cirru-script": "^0.2.3",
+    "coffee-loader": "^0.7.2",
+    "coffee-script": "^1.9.1",
+    "css-loader": "^0.10.1",
+    "del": "^1.1.1",
+    "file-loader": "^0.8.4",
+    "gulp": "^3.8.11",
+    "gulp-coffee": "^2.3.1",
+    "less": "^2.5.1",
+    "less-loader": "^2.2.0",
+    "rsyncwrapper": "^0.4.3",
+    "run-sequence": "^1.0.2",
+    "stir-template": "^0.1.4",
+    "style-loader": "^0.10.2",
+    "url-loader": "^0.5.6",
+    "volubile-ui": "0.0.10",
+    "webpack": "^1.8.4",
+    "webpack-dev-server": "^1.8.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-component"
+  ],
+  "author": "Teambition",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambition/coffee-webpack-starter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teambition/coffee-webpack-starter/issues"
+  },
+  "homepage": "https://github.com/teambition/coffee-webpack-starter"
+}

src/main.coffee

@@ -0,0 +1,26 @@
+
+React = require 'react'
+
+require 'volubile-ui/ui/index.less'
+
+Textbox = React.createFactory require './textbox'
+div = React.createFactory 'div'
+
+pageComponent = React.createClass
+  displayName: 'app-page'
+
+  getInitialState: ->
+    text: ''
+
+  onChange: (text) ->
+    @setState text: text
+
+  render: ->
+
+    div className: 'app-page',
+      Textbox
+        text: @state.text, onChange: @onChange
+
+Page = React.createFactory pageComponent
+
+React.render Page(), document.querySelector('.demo')

src/main.css

@@ -0,0 +1,2 @@
+
+@import url(textbox.css);

src/textbox.coffee

@@ -0,0 +1,87 @@
+
+React = require 'react'
+
+div = React.createFactory 'div'
+pre = React.createFactory 'pre'
+textarea = React.createFactory 'textarea'
+
+module.exports = React.createClass
+  displayName: 'lite-textbox'
+
+  propTypes:
+    text: React.PropTypes.string.isRequired
+    onChange: React.PropTypes.func.isRequired
+    minHeight: React.PropTypes.number
+    maxHeight: React.PropTypes.number
+    specials: React.PropTypes.array
+
+  getDefaultProps: ->
+    minHeight: 120
+    maxHeight: 200
+    specials: ['@', ':']
+
+  getInitialState: ->
+    contentheight: 20
+
+  componentDidMount: ->
+    @boxEl = @refs.box.getDOMNode()
+    @preEl = @refs.pre.getDOMNode()
+    @mirrorStyles()
+
+
+  componentDidUpdate: ->
+    @mirrorStyles()
+
+  getBoxStyles: ->
+    if @boxEl?
+      boxStyles = getComputedStyle @boxEl
+      mirrorStyles = {}
+      for key, value of boxStyles
+        continue if key[0] is '-'
+        continue if key.match /^webkit/
+        continue if (typeof value) is 'function'
+        continue if key.match /^\d+$/
+        mirrorStyles[key] = value
+      mirrorStyles
+    else
+      {}
+
+  getHeight: ->
+
+    mirrorHeight = @state.contentheight
+    if @state.contentheight < @props.minHeight
+      mirrorHeight = @props.minHeight
+    if @state.contentheight > @props.maxHeight
+      mirrorHeight = @props.maxHeight
+
+    mirrorHeight
+
+  mirrorStyles: ->
+
+    mirrorHeight = @getHeight()
+
+    styles = @getBoxStyles()
+    styles.height = "#{mirrorHeight}px"
+    styles.zIndex = -1
+    for key, value of styles
+      @preEl.style[key] = value
+    @preEl.scrollTop = @boxEl.scrollTop
+
+  onChange: (event) ->
+    @props.onChange event.target.value
+    @setState contentheight: @boxEl.clientHeight
+
+  onScroll: ->
+    @preEl.scrollTop = @boxEl.scrollTop
+
+  expandText: ->
+    @props.text
+
+  render: ->
+    div className: 'lite-textbox',
+      pre
+        ref: 'pre', className: 'textbox-mirror'
+        @expandText()
+      textarea
+        ref: 'box', value: @props.text, onChange: @onChange
+        onScroll: @onScroll, style: {height: @getHeight()}

src/textbox.css

@@ -0,0 +1,13 @@
+
+.lite-textbox {
+  position: relative;
+}
+
+.lite-textbox pre {
+  position: absolute !important;
+  z-index: -1 !important;
+}
+.lite-textbox textarea {
+  width: 100%;
+  background: transparent;
+}

template.cirru

@@ -0,0 +1,39 @@
+
+var
+  stir $ require :stir-template
+
+var
+  (object~ html head title body meta script link div a span) stir
+
+var
+  line $ \ (text)
+    return $ div null text
+
+= module.exports $ \ (data)
+  return $ stir.render
+    stir.doctype
+    html null
+      head null
+        title null ":Coffee Webpack Starter"
+        meta $ object (:charset :utf-8)
+        link $ object (:rel :icon)
+          :href :http://tp4.sinaimg.cn/5592259015/180/5725970590/1
+        link $ object (:rel :stylesheet)
+          :href :src/main.css
+        script $ object (:src data.vendor) (:defer true)
+        script $ object (:src data.main) (:defer true)
+      body null
+        div
+          object (:class :intro)
+          div
+            object (:class :title)
+            , ":This is a demo of Webpack usage."
+          line ":Open Console to see how it loads."
+          div null
+            span null ":Read more at "
+            a
+              object (:href :http://github.com/teambition/coffee-webpack-starter)
+              , :github.com/teambition/coffee-webpack-starter
+            span null :.
+        div
+          object (:class :demo)

webpack.config.coffee

@@ -0,0 +1,34 @@
+
+fs = require('fs')
+fontName = 'fonts/[name].[ext]'
+webpack = require 'webpack'
+
+module.exports =
+  entry:
+    vendor: [
+      'webpack-dev-server/client?http://0.0.0.0:8080'
+      'webpack/hot/dev-server'
+    ]
+    main: [
+      './src/main'
+    ]
+  output:
+    path: 'build/'
+    filename: '[name].js'
+    publicPath: 'http://localhost:8080/build/'
+  resolve: extensions: ['.js', '.coffee', '']
+  module:
+    loaders: [
+      {test: /\.coffee$/, loader: 'coffee', ignore: /node_modules/}
+      {test: /\.css$/, loader: 'style!css'}
+      {test: /\.less$/, loader: 'style!css!less'}
+      {test: /\.woff((\?|\#)[\?\#\w\d_-]+)?$/, loader: "url", query: {limit: 100, minetype: 'application/font-woff', name: fontName}}
+      {test: /\.woff2((\?|\#)[\?\#\w\d_-]+)?$/, loader: "url", query: {limit: 100, minetype: 'application/font-woff2', name: fontName}}
+      {test: /\.ttf((\?|\#)[\?\#\w\d_-]+)?$/, loader: "url", query: {limit: 100, minetype: "application/octet-stream", name: fontName}}
+      {test: /\.eot((\?|\#)[\?\#\w\d_-]+)?$/, loader: "url", query: {limit: 100, name: fontName}}
+      {test: /\.svg((\?|\#)[\?\#\w\d_-]+)?$/, loader: "url", query: {limit: 10000, minetype: "image/svg+xml", name: fontName}}
+
+    ]
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
+  ]

webpack.min.coffee

@@ -0,0 +1,23 @@
+
+webpack = require('webpack')
+config = require('./webpack.config')
+fs = require('fs')
+
+module.exports =
+  entry:
+    vendor: []
+    main: [ './src/main' ]
+  output:
+    path: 'build/'
+    filename: '[name].[chunkhash:8].js'
+    publicPath: './build/'
+  resolve: config.resolve
+  module: config.module
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash:8].js')
+    new (webpack.optimize.UglifyJsPlugin)(sourceMap: false)
+    ->
+      @plugin 'done', (stats) ->
+        content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2)
+        fs.writeFileSync 'build/assets.json', content
+  ]