Importing css in <style>
parent
2198f1a2d3
commit
1582fb6918
|
@ -2,18 +2,12 @@
|
||||||
@todo
|
@todo
|
||||||
###
|
###
|
||||||
|
|
||||||
|
Style = require './style/button'
|
||||||
css = require "./style/button.styl"
|
FontIcon = require './font_icon'
|
||||||
# -- Components
|
Ripple = require './ripple'
|
||||||
FontIcon = require "./font_icon"
|
|
||||||
Ripple = require "./ripple"
|
|
||||||
# -- Mixins
|
|
||||||
# StyleMixin = require "./mixins/style"
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
|
||||||
# mixins: [StyleMixin]
|
|
||||||
|
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
|
@ -29,6 +23,10 @@ module.exports = React.createClass
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
ripple : undefined
|
ripple : undefined
|
||||||
|
|
||||||
|
# -- Lifecycle
|
||||||
|
componentWillReceiveProps: ->
|
||||||
|
@setState ripple: undefined
|
||||||
|
|
||||||
# -- Events
|
# -- Events
|
||||||
onClick: (event) ->
|
onClick: (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -39,6 +37,7 @@ module.exports = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
|
console.log "ripple", @state.ripple
|
||||||
<button data-component-button={@props.type}
|
<button data-component-button={@props.type}
|
||||||
onClick={@onClick}
|
onClick={@onClick}
|
||||||
className={@props.style}
|
className={@props.style}
|
||||||
|
|
|
@ -2,18 +2,20 @@
|
||||||
@todo
|
@todo
|
||||||
###
|
###
|
||||||
|
|
||||||
|
Button = require "./button"
|
||||||
Input = require "./input"
|
Input = require "./input"
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
attributes : React.PropTypes.array.required
|
attributes : React.PropTypes.array
|
||||||
storage : React.PropTypes.bool
|
storage : React.PropTypes.bool
|
||||||
# -- Events
|
# -- Events
|
||||||
onSubmit : React.PropTypes.func
|
onSubmit : React.PropTypes.func
|
||||||
onError : React.PropTypes.func
|
onError : React.PropTypes.func
|
||||||
onValid : React.PropTypes.func
|
onValid : React.PropTypes.func
|
||||||
|
onChange : React.PropTypes.func
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
storage : false
|
storage : false
|
||||||
|
@ -31,10 +33,16 @@ module.exports = React.createClass
|
||||||
value = @getValue()
|
value = @getValue()
|
||||||
for attr in @props.attributes when attr.required and value[attr.ref]?.trim() is ""
|
for attr in @props.attributes when attr.required and value[attr.ref]?.trim() is ""
|
||||||
is_valid = false
|
is_valid = false
|
||||||
@refs[attr.ref].setError?()
|
@refs[attr.ref].setError? "Required field"
|
||||||
break
|
break
|
||||||
@props[if is_valid then "onValid" else "onError"]? event, @
|
|
||||||
@props.onChange? event, @
|
@props.onChange? event, @
|
||||||
|
if is_valid
|
||||||
|
@refs.submit?.getDOMNode().removeAttribute "disabled"
|
||||||
|
@props.onValid? event, @
|
||||||
|
else
|
||||||
|
@refs.submit?.getDOMNode().setAttribute "disabled", true
|
||||||
|
@props.onError? event, @
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
|
@ -43,14 +51,17 @@ module.exports = React.createClass
|
||||||
onChange={@onChange}>
|
onChange={@onChange}>
|
||||||
{
|
{
|
||||||
for attribute, index in @props.attributes
|
for attribute, index in @props.attributes
|
||||||
<Input {...attribute} />
|
if attribute.type is "submit"
|
||||||
|
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
||||||
|
else
|
||||||
|
<Input {...attribute} />
|
||||||
}
|
}
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
# -- Extends
|
# -- Extends
|
||||||
getValue: ->
|
getValue: ->
|
||||||
value = {}
|
value = {}
|
||||||
value[ref] = el.getValue() for ref, el of @refs
|
value[ref] = el.getValue() for ref, el of @refs when el.getValue?
|
||||||
value
|
value
|
||||||
|
|
||||||
setValue: (data) ->
|
setValue: (data) ->
|
||||||
|
|
|
@ -2,29 +2,28 @@
|
||||||
@todo
|
@todo
|
||||||
###
|
###
|
||||||
|
|
||||||
|
require "./style/ripple"
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
origin : React.PropTypes.object
|
origin : React.PropTypes.object
|
||||||
colour : React.PropTypes.string
|
|
||||||
|
|
||||||
getDefaultProps: ->
|
getInitialState: ->
|
||||||
origin : undefined
|
className : undefined
|
||||||
colour : "#ffffff"
|
|
||||||
|
|
||||||
# -- Lifecycle
|
# -- Lifecycle
|
||||||
|
componentWillReceiveProps: (next_props) ->
|
||||||
|
@setState className: "active" if next_props.origin?
|
||||||
|
|
||||||
componentDidMount: ->
|
componentDidMount: ->
|
||||||
el = @getDOMNode()
|
el = @getDOMNode()
|
||||||
for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
|
for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
|
||||||
el.addEventListener key, =>
|
el.addEventListener key, (=> @setState className: undefined), false
|
||||||
el.classList.remove "active"
|
|
||||||
, false
|
|
||||||
|
|
||||||
componentDidUpdate: ->
|
|
||||||
@getDOMNode().classList.add "active"
|
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<div data-component-ripple
|
<div data-component-ripple
|
||||||
|
className={@state.className}
|
||||||
style={left: @props.origin?.left, top: @props.origin?.top} />
|
style={left: @props.origin?.left, top: @props.origin?.top} />
|
||||||
|
|
|
@ -0,0 +1,253 @@
|
||||||
|
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
|
||||||
|
|
||||||
|
// -- Colors
|
||||||
|
COLOR = #222222
|
||||||
|
BACKGROUND = #f5f5f5
|
||||||
|
THEME = #cccccc
|
||||||
|
WHITE = #ffffff
|
||||||
|
PRIMARY = #e91e63
|
||||||
|
SECONDARY = #00bcd4
|
||||||
|
// THEME = #ef6c00
|
||||||
|
CANCEL = red
|
||||||
|
|
||||||
|
// -- Fonts
|
||||||
|
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
||||||
|
FONT_SIZE = 16px
|
||||||
|
FONT_SIZE_TINY = 80%
|
||||||
|
FONT_SIZE_SMALL = 90%
|
||||||
|
FONT_SIZE_NORMAL = 100%
|
||||||
|
FONT_SIZE_BIG = 120%
|
||||||
|
FONT_WEIGHT_THIN = 300
|
||||||
|
FONT_WEIGHT_NORMAL = 400
|
||||||
|
FONT_WEIGHT_BOLD = 700
|
||||||
|
|
||||||
|
// -- Sizes
|
||||||
|
UNIT = 4rem
|
||||||
|
SPACE = (UNIT * 0.29)
|
||||||
|
OFFSET = (SPACE * 1.75)
|
||||||
|
MENU_WIDTH = (3.85 * UNIT)
|
||||||
|
HEADER_HEIGHT = (1.65 * UNIT)
|
||||||
|
BUTTON_HEIGHT = (2.5 * SPACE)
|
||||||
|
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
||||||
|
LOADING_HEIGHT = (1.5 * UNIT)
|
||||||
|
|
||||||
|
// -- Shadows
|
||||||
|
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
||||||
|
ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
|
||||||
|
ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
|
||||||
|
ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
|
||||||
|
ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
|
||||||
|
|
||||||
|
// -- Animations
|
||||||
|
ANIMATION_DURATION = 450ms
|
||||||
|
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
|
||||||
|
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
|
||||||
|
|
||||||
|
|
||||||
|
// normalize v3.0.2 | MIT License | git.io/normalize
|
||||||
|
|
||||||
|
html
|
||||||
|
font-family sans-serif
|
||||||
|
-ms-text-size-adjust 100%
|
||||||
|
-webkit-text-size-adjust 100%
|
||||||
|
|
||||||
|
body
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
||||||
|
nav, section, summary
|
||||||
|
display block
|
||||||
|
|
||||||
|
audio, canvas, progress, video
|
||||||
|
display inline-block
|
||||||
|
vertical-align baseline
|
||||||
|
|
||||||
|
audio
|
||||||
|
&:not([controls])
|
||||||
|
display none
|
||||||
|
height 0
|
||||||
|
|
||||||
|
[hidden], template
|
||||||
|
display none
|
||||||
|
|
||||||
|
a
|
||||||
|
background-color transparent
|
||||||
|
&:active, &:hover
|
||||||
|
outline 0
|
||||||
|
|
||||||
|
abbr[title]
|
||||||
|
border-bottom 1px dotted
|
||||||
|
|
||||||
|
b, strong
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
dfn
|
||||||
|
font-style italic
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size 2em
|
||||||
|
margin 0.67em 0
|
||||||
|
|
||||||
|
mark
|
||||||
|
background #ff0
|
||||||
|
color #000
|
||||||
|
|
||||||
|
small
|
||||||
|
font-size 80%
|
||||||
|
|
||||||
|
sub, sup
|
||||||
|
font-size 75%
|
||||||
|
line-height 0
|
||||||
|
position relative
|
||||||
|
vertical-align baseline
|
||||||
|
|
||||||
|
sup
|
||||||
|
top -0.5em
|
||||||
|
|
||||||
|
sub
|
||||||
|
bottom -0.25em
|
||||||
|
|
||||||
|
img
|
||||||
|
border: 0
|
||||||
|
|
||||||
|
svg
|
||||||
|
&:not(:root)
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
|
figure
|
||||||
|
border: 0
|
||||||
|
|
||||||
|
hr
|
||||||
|
-moz-box-sizing content-box
|
||||||
|
box-sizing content-box
|
||||||
|
height 0
|
||||||
|
|
||||||
|
pre
|
||||||
|
overflow auto
|
||||||
|
|
||||||
|
code, kbd, pre, samp
|
||||||
|
font-family monospace, monospace
|
||||||
|
font-size 1em
|
||||||
|
|
||||||
|
button, input, optgroup, select, textarea
|
||||||
|
color inherit
|
||||||
|
font inherit
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
button
|
||||||
|
overflow visible
|
||||||
|
|
||||||
|
button, select
|
||||||
|
text-transform none
|
||||||
|
|
||||||
|
button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||||
|
-webkit-appearance button
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
button[disabled], html input[disabled]
|
||||||
|
cursor default
|
||||||
|
|
||||||
|
button::-moz-focus-inner, input::-moz-focus-inner
|
||||||
|
border 0
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
input
|
||||||
|
line-height normal
|
||||||
|
|
||||||
|
input[type="checkbox"], input[type="radio"]
|
||||||
|
box-sizing border-box
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
|
input[type="number"]::-webkit-outer-spin-button
|
||||||
|
height auto
|
||||||
|
|
||||||
|
input[type="search"]
|
||||||
|
-webkit-appearance textfield
|
||||||
|
-moz-box-sizing content-box
|
||||||
|
-webkit-box-sizing content-box
|
||||||
|
box-sizing content-box
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-decoration
|
||||||
|
-webkit-appearance none
|
||||||
|
|
||||||
|
fieldset
|
||||||
|
border 1px solid #c0c0c0
|
||||||
|
margin 0 2px
|
||||||
|
padding 0.35em 0.625em 0.75em
|
||||||
|
|
||||||
|
legend
|
||||||
|
border 0
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
textarea
|
||||||
|
overflow auto
|
||||||
|
|
||||||
|
optgroup
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
table
|
||||||
|
border-collapse collapse
|
||||||
|
border-spacing 0
|
||||||
|
|
||||||
|
td, th
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
|
||||||
|
// -- App ----------------------------------------------------------------------
|
||||||
|
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
|
||||||
|
border: 0
|
||||||
|
margin: 0
|
||||||
|
outline: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
*, *:before, *:after
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
html
|
||||||
|
position: absolute
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
body
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
-webkit-touch-callout: none
|
||||||
|
-webkit-user-select: none
|
||||||
|
-moz-user-select: moz-none
|
||||||
|
user-select: none
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
*
|
||||||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
|
||||||
|
-webkit-font-smoothing: RENDER = antialiased
|
||||||
|
font-smoothing: RENDER
|
||||||
|
-webkit-text-size-adjust: 100%
|
||||||
|
-ms-text-size-adjust: 100%
|
||||||
|
text-size-adjust: 100%
|
||||||
|
|
||||||
|
a
|
||||||
|
text-decoration: none
|
||||||
|
-webkit-tap-highlight-color: rgba(0,0,0,0)
|
||||||
|
|
||||||
|
::-webkit-scrollbar
|
||||||
|
width: 0px
|
||||||
|
height: 0px
|
||||||
|
|
||||||
|
input:not([type="checkbox"]):not([type="radio"]), button
|
||||||
|
-webkit-appearance: none
|
||||||
|
-moz-appearance: none
|
||||||
|
appearance: none
|
||||||
|
-webkit-touch-callout: none
|
||||||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
||||||
|
outline: none
|
|
@ -1,3 +1,64 @@
|
||||||
button
|
@import '__constants.styl'
|
||||||
font-size: 16px
|
|
||||||
font-weight: bold
|
[data-component-button]
|
||||||
|
z-index : 1
|
||||||
|
display : inline-block
|
||||||
|
position : relative
|
||||||
|
overflow : hidden
|
||||||
|
font-weight : normal
|
||||||
|
text-align : center
|
||||||
|
text-decoration : none
|
||||||
|
white-space : nowrap
|
||||||
|
border : none
|
||||||
|
transition-property background-color, box-shadow
|
||||||
|
transition-duration ANIMATION_DURATION
|
||||||
|
transition-timing-function ANIMATION_EASE
|
||||||
|
|
||||||
|
// -- Style
|
||||||
|
&:not([disabled])
|
||||||
|
cursor : pointer
|
||||||
|
box-shadow ZDEPTH_SHADOW_1
|
||||||
|
&:hover /*, &:active, &:focus */
|
||||||
|
outline : 0
|
||||||
|
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
||||||
|
&:not(.primary):not(.secondary)
|
||||||
|
color : COLOR
|
||||||
|
background-color : WHITE
|
||||||
|
&.primary, &.secondary
|
||||||
|
color : WHITE
|
||||||
|
&.primary
|
||||||
|
background-color : PRIMARY
|
||||||
|
&.secondary
|
||||||
|
background-color : SECONDARY
|
||||||
|
|
||||||
|
&[disabled]
|
||||||
|
background-color : darken(BACKGROUND, 7.5%)
|
||||||
|
color : darken(BACKGROUND, 35%)
|
||||||
|
|
||||||
|
// -- Layout
|
||||||
|
& ~ &:not(:last-child)
|
||||||
|
margin-left : SPACE
|
||||||
|
> *
|
||||||
|
pointer-events : none
|
||||||
|
|
||||||
|
[data-component-button="square"]
|
||||||
|
margin-bottom : SPACE
|
||||||
|
padding : (SPACE / 2) (SPACE / 1.25)
|
||||||
|
font-size : FONT_SIZE_SMALL
|
||||||
|
text-transform : uppercase
|
||||||
|
border-radius : (SPACE / 8)
|
||||||
|
> *
|
||||||
|
vertical-align : bottom
|
||||||
|
> .icon
|
||||||
|
font-size : FONT_SIZE_BIG
|
||||||
|
margin-right : (SPACE / 2)
|
||||||
|
&.anchor
|
||||||
|
width : 100%
|
||||||
|
|
||||||
|
[data-component-button="circle"]
|
||||||
|
width : BUTTON_CIRCLE_HEIGHT
|
||||||
|
height : BUTTON_CIRCLE_HEIGHT
|
||||||
|
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
|
||||||
|
border-radius : 50%
|
||||||
|
> .icon
|
||||||
|
line-height : BUTTON_CIRCLE_HEIGHT
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
@import '__constants.styl'
|
||||||
|
|
||||||
|
[data-component-ripple]
|
||||||
|
position : absolute
|
||||||
|
background-color : alpha(WHITE, 0.65)
|
||||||
|
transform translateX(-50%) translateY(-50%)
|
||||||
|
border-radius : 50%
|
||||||
|
// -- Classes
|
||||||
|
&.active, &:hover
|
||||||
|
animation-name ripple
|
||||||
|
animation-iteration-count 1
|
||||||
|
animation-timing-function ANIMATION_EASE
|
||||||
|
animation-duration (2 * ANIMATION_DURATION)
|
||||||
|
opacity : 0.1
|
||||||
|
|
||||||
|
@keyframes ripple
|
||||||
|
0%
|
||||||
|
width : 0
|
||||||
|
height : 0
|
||||||
|
opacity : 1
|
||||||
|
100%
|
||||||
|
width : SIZE = (4 * UNIT)
|
||||||
|
height : SIZE
|
||||||
|
opacity : 0
|
|
@ -1,10 +1,7 @@
|
||||||
"use strict"
|
"use strict"
|
||||||
|
|
||||||
# -- Components
|
# -- Components
|
||||||
Input = require "../components/input"
|
|
||||||
Form = require "../components/form"
|
|
||||||
Button = require "../components/button"
|
Button = require "../components/button"
|
||||||
FontIcon = require "../components/font_icon"
|
|
||||||
|
|
||||||
Test = React.createClass
|
Test = React.createClass
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
|
@ -38,21 +35,19 @@ Test = React.createClass
|
||||||
]
|
]
|
||||||
|
|
||||||
<app>
|
<app>
|
||||||
<h1>Hello World !</h1>
|
<h1>React-Kit</h1>
|
||||||
<Form attributes={attributes}
|
<h2>New way for create</h2>
|
||||||
onError={@onFormError}
|
|
||||||
onValid={@onFormValid}/>
|
<h3>Buttons</h3>
|
||||||
# <Button caption="Login" disabled={not @state.submitable} />
|
<Button caption="Login" disabled={not @state.submitable} />
|
||||||
# <Button caption="Primary" style="primary" icon="access_alarm" />
|
<Button caption="Primary" style="primary" icon="access_alarm" />
|
||||||
# <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
|
<Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
|
||||||
# <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
|
<Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
|
||||||
#
|
|
||||||
# <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
|
<Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
|
||||||
# <Button type="circle" icon="explore" style="primary" />
|
<Button type="circle" icon="explore" style="primary" />
|
||||||
# <Button type="circle" icon="zoom_in" style="secondary" />
|
<Button type="circle" icon="zoom_in" style="secondary" />
|
||||||
# <Button type="circle" icon="input" disabled={true} />
|
<Button type="circle" icon="input" disabled={true} />
|
||||||
#
|
|
||||||
<FontIcon value="access_alarm" />
|
|
||||||
</app>
|
</app>
|
||||||
|
|
||||||
React.render <Test/>, document.body
|
React.render <Test/>, document.body
|
|
@ -6,11 +6,11 @@ node_modules = __dirname + '/node_modules'
|
||||||
module.exports =
|
module.exports =
|
||||||
cache : true
|
cache : true
|
||||||
|
|
||||||
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', 'styl']
|
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl']
|
||||||
|
|
||||||
context : __dirname + '/spec'
|
context : __dirname + '/spec'
|
||||||
|
|
||||||
entry : ['./test.cjsx']
|
entry : ['./index.cjsx']
|
||||||
|
|
||||||
output :
|
output :
|
||||||
path : if process.env.NODE_ENV is 'production' then './dist' else './build'
|
path : if process.env.NODE_ENV is 'production' then './dist' else './build'
|
||||||
|
@ -28,12 +28,12 @@ module.exports =
|
||||||
inline : true
|
inline : true
|
||||||
|
|
||||||
module :
|
module :
|
||||||
noParse: [node_modules + '/react/dist/*.js']
|
noParse : [node_modules + '/react/dist/*.js']
|
||||||
|
|
||||||
loaders : [
|
loaders : [
|
||||||
test : /\.cjsx$/, loader: 'coffee-jsx-loader'
|
test : /\.cjsx$/, loader: 'coffee-jsx-loader'
|
||||||
,
|
,
|
||||||
test : /\.coffee$/, loader: 'coffee-jsx-loader'
|
test : /\.coffee$/, loader: 'coffee-jsx-loader'
|
||||||
,
|
,
|
||||||
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
|
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader?importLoaders=1&minimize!'
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue