From 276bba479d996078e5de998afbe4707343014f45 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Wed, 16 Mar 2016 13:02:47 -0700 Subject: [PATCH] got editors working and more css --- app/components/Editor.js | 111 +++++++++ app/containers/App.js | 36 ++- app/css/base.scss | 15 ++ app/css/components/request.scss | 4 + app/css/components/sidebar.scss | 8 +- app/css/constants/colors.scss | 12 +- app/css/constants/dimensions.scss | 18 +- app/css/grid.scss | 30 ++- app/css/index.scss | 2 +- app/css/layout/forms.scss | 5 +- app/css/layout/header.scss | 17 +- app/css/layout/pane.scss | 2 +- app/css/lib/codemirror/codemirror.css | 335 ++++++++++++++++++++++++++ app/css/lib/codemirror/material.css | 53 ++++ app/index.html | 3 +- package.json | 5 +- webpack/base.config.js | 102 ++++---- 17 files changed, 666 insertions(+), 92 deletions(-) create mode 100644 app/components/Editor.js create mode 100644 app/css/lib/codemirror/codemirror.css create mode 100644 app/css/lib/codemirror/material.css diff --git a/app/components/Editor.js b/app/components/Editor.js new file mode 100644 index 000000000..94bbaaf67 --- /dev/null +++ b/app/components/Editor.js @@ -0,0 +1,111 @@ +import React, {Component, PropTypes} from 'react'; +import {getDOMNode} from 'react-dom'; +import CodeMirror from 'codemirror'; +import 'codemirror/mode/css/css'; +import 'codemirror/mode/htmlmixed/htmlmixed'; +import 'codemirror/mode/javascript/javascript'; +import 'codemirror/addon/scroll/simplescrollbars'; +import 'codemirror/addon/scroll/simplescrollbars.css'; +import 'codemirror/lib/codemirror.css' +import 'codemirror/theme/material.css' +import 'codemirror/theme/railscasts.css' +import 'codemirror/theme/tomorrow-night-bright.css' +import 'codemirror/theme/ambiance.css' +import 'codemirror/theme/mbo.css' +import 'codemirror/theme/pastel-on-dark.css' + +class Editor extends Component { + + constructor () { + super(); + this._currentCodemirrorValue = null; + this.state = { + isFocused: false + } + } + + componentDidMount () { + var textareaNode = this.refs.textarea; + let options = Object.assign({ + //theme: 'material', + //theme: 'mbo', + theme: 'pastel-on-dark', + fixedGutter: true, + scrollbarStyle: 'overlay' + }, this.props.options || {}); + + if (options.mode === 'application/json') { + options.mode = 'application/ld+json'; + } + + this.codeMirror = CodeMirror.fromTextArea(textareaNode, options); + this.codeMirror.on('change', this.codemirrorValueChanged.bind(this)); + this.codeMirror.on('focus', this.focusChanged.bind(this, true)); + this.codeMirror.on('blur', this.focusChanged.bind(this, false)); + this._currentCodemirrorValue = this.props.defaultValue || this.props.value || ''; + this.codeMirror.setValue(this._currentCodemirrorValue); + } + + componentWillUnmount () { + // todo: is there a lighter-weight way to remove the cm instance? + if (this.codeMirror) { + this.codeMirror.toTextArea(); + } + } + + componentWillReceiveProps (nextProps) { + if (this.codeMirror && nextProps.value !== undefined && this._currentCodemirrorValue !== nextProps.value) { + this.codeMirror.setValue(nextProps.value); + } + if (typeof nextProps.options === 'object') { + for (var optionName in nextProps.options) { + if (nextProps.options.hasOwnProperty(optionName)) { + this.codeMirror.setOption(optionName, nextProps.options[optionName]); + } + } + } + } + + getCodeMirror () { + return this.codeMirror; + } + + focus () { + if (this.codeMirror) { + this.codeMirror.focus(); + } + } + + focusChanged (focused) { + this.setState({ + isFocused: focused + }); + this.props.onFocusChange && this.props.onFocusChange(focused); + } + + codemirrorValueChanged (doc, change) { + var newValue = doc.getValue(); + this._currentCodemirrorValue = newValue; + this.props.onChange && this.props.onChange(newValue); + } + + render () { + return ( + + ); + } +} + +Editor.propTypes = { + onChange: PropTypes.func, + onFocusChange: PropTypes.func, + options: PropTypes.object, + path: PropTypes.string, + value: PropTypes.string, + className: PropTypes.any +}; + +export default Editor; diff --git a/app/containers/App.js b/app/containers/App.js index 8729550ac..4eb539052 100644 --- a/app/containers/App.js +++ b/app/containers/App.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' +import Editor from '../components/Editor'; import Header from '../components/Header' import * as TodoActions from '../actions' @@ -9,7 +10,7 @@ class App extends Component { //const { global, todos, actions } = this.props; return (
-
) diff --git a/app/css/base.scss b/app/css/base.scss index 47ca968ec..80c745527 100644 --- a/app/css/base.scss +++ b/app/css/base.scss @@ -23,3 +23,18 @@ h2 { font-size: $font-size-xl; } +.CodeMirror { + height: 100% !important; + width: 100%; + font-size: 13px !important; + font-family: "Source Code Pro", monospace; +} + +.CodeMirror, .CodeMirror-gutters, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background: $bg-dark !important; +} + +.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div { + background: lighten($bg-dark, 10%); +} + diff --git a/app/css/components/request.scss b/app/css/components/request.scss index 13e5d84ec..ea704ba22 100644 --- a/app/css/components/request.scss +++ b/app/css/components/request.scss @@ -11,5 +11,9 @@ .url-input { background: $bg-light; font-size: $font-size-lg; + + .method-dropdown { + font-size: $font-size-md; + } } } diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss index cac086689..b82886e18 100644 --- a/app/css/components/sidebar.scss +++ b/app/css/components/sidebar.scss @@ -2,14 +2,12 @@ @import '../constants/colors'; #sidebar { - width: $sidebar-width; background: lighten($bg-dark, 3%); color: $font-dark-bg; align-self: stretch; .header { background: $bg-dark; - border-bottom-color: darken($bg-dark, 1%); } a { @@ -18,8 +16,10 @@ display: block; } - .sidebar-items li { - a { + ul.sidebar-items { + width: $sidebar-width; + + li > a { color: darken($font-dark-bg, 30%); padding: $default-padding; height: $sidebar-item-height; diff --git a/app/css/constants/colors.scss b/app/css/constants/colors.scss index f1b658243..c9f75e085 100644 --- a/app/css/constants/colors.scss +++ b/app/css/constants/colors.scss @@ -23,7 +23,15 @@ $font-dark-bg: #ffffff; color: $font-light-bg; } -.bg-light.bg-hover:hover { - background: darken($bg-light, 2%); +.bg-super-light { + background: $bg-light; + color: $font-light-bg; } +.bg-light.bg-hover:hover { + background: darken($bg-light, 3%); +} + +.bg-light.bg-hover:active { + background: darken($bg-light, 6%); +} diff --git a/app/css/constants/dimensions.scss b/app/css/constants/dimensions.scss index c8a134c04..a604620e1 100644 --- a/app/css/constants/dimensions.scss +++ b/app/css/constants/dimensions.scss @@ -3,21 +3,33 @@ $default-padding: 15px; /* Fonts */ $font-size: 12px; $font-size-sm: $font-size * 0.8; +$font-size-md: $font-size; $font-size-lg: $font-size * 1.3; $font-size-xl: $font-size * 1.5; $font-size-xxl: $font-size * 1.8; .txt-sm { - font-size: 90%; + font-size: $font-size-sm; +} + +.txt-md { + font-size: $font-size-md; } .txt-lg { - font-size: 120%; + font-size: $font-size-lg; +} + +.txt-xl { + font-size: $font-size-xl; } /* Wrapper */ $header-height: 50px; /* Sidebar */ -$sidebar-width: 250px; +$sidebar-width: 300px; $sidebar-item-height: 45px; + +/* Elements */ +$form-height: 50px; diff --git a/app/css/grid.scss b/app/css/grid.scss index ccab99e13..58fb7bee0 100644 --- a/app/css/grid.scss +++ b/app/css/grid.scss @@ -8,18 +8,32 @@ align-items: stretch; align-content: flex-start; height: 100%; + width: 100%; + box-sizing: border-box; } -.col-1, .col-2 { - flex-basis: auto; +.col { + flex: 1 1 auto; + width: 100%; + height: 100%; + overflow: hidden; + box-sizing: border-box; } -.col-1 { - flex-grow: 1; +.grid-v { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; + height: 100%; + width: 100%; + box-sizing: border-box; } -.col-1 { - flex-grow: 1; - flex-basis: auto; +.row { + height: 100%; + flex: 1 1 auto; + box-sizing: border-box; } - diff --git a/app/css/index.scss b/app/css/index.scss index 2da8a057d..7de26e251 100644 --- a/app/css/index.scss +++ b/app/css/index.scss @@ -4,8 +4,8 @@ /* Boilerplate */ @import 'reset'; -@import 'base'; @import 'grid'; +@import 'base'; /* Styles */ @import 'links'; diff --git a/app/css/layout/forms.scss b/app/css/layout/forms.scss index 6795e76e9..7707e9f3d 100644 --- a/app/css/layout/forms.scss +++ b/app/css/layout/forms.scss @@ -6,6 +6,7 @@ background: $bg-super-light; outline: none; border: 0; + height: $form-height; } .btn { @@ -15,13 +16,15 @@ } input, button { + box-sizing: border-box; padding: $default-padding; + font-size: inherit; background: none; border: 0; outline: 0; - font-size: inherit; width: 100%; height: 100%; + margin: 0; } button { diff --git a/app/css/layout/header.scss b/app/css/layout/header.scss index 673372c4e..9455914ff 100644 --- a/app/css/layout/header.scss +++ b/app/css/layout/header.scss @@ -2,15 +2,18 @@ @import '../constants/colors'; .header { - box-shadow: 1px 0 3px rgba(0, 0, 0, .15); - border-bottom: 1px solid transparent; - z-index: 1; - position: relative; - - &.header-clickable a, &:not(.header-clickable) { + &.header-clickable a, &:not(.header-clickable) > *:first-child { + display: block; height: $header-height; box-sizing: border-box; - display: block; padding: $default-padding; + + } + &:not(.header_clickable).header-no-padding > *:first-child { + padding: 0; + } + + &.header-clickable.header-no-padding a { + padding: 0; } } diff --git a/app/css/layout/pane.scss b/app/css/layout/pane.scss index 05c12ed2d..2146af6ef 100644 --- a/app/css/layout/pane.scss +++ b/app/css/layout/pane.scss @@ -1,6 +1,6 @@ @import '../constants/colors'; .pane { - box-shadow: 1px 0 3px rgba(0, 0, 0, .15); background-color: $bg-light; } + diff --git a/app/css/lib/codemirror/codemirror.css b/app/css/lib/codemirror/codemirror.css new file mode 100644 index 000000000..ebfe4f697 --- /dev/null +++ b/app/css/lib/codemirror/codemirror.css @@ -0,0 +1,335 @@ +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-ruler { + border-left: 1px solid #ccc; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actual scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + vertical-align: top; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { position: absolute; } +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } diff --git a/app/css/lib/codemirror/material.css b/app/css/lib/codemirror/material.css new file mode 100644 index 000000000..91ed6cef2 --- /dev/null +++ b/app/css/lib/codemirror/material.css @@ -0,0 +1,53 @@ +/* + + Name: material + Author: Michael Kaminsky (http://github.com/mkaminsky11) + + Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme) + +*/ + +.cm-s-material { + background-color: #263238; + color: rgba(233, 237, 237, 1); +} +.cm-s-material .CodeMirror-gutters { + background: #263238; + color: rgb(83,127,126); + border: none; +} +.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); } +.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } +.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } +.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } +.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } +.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } + +.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } +.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); } +.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); } +.cm-s-material .cm-variable-2 { color: #80CBC4; } +.cm-s-material .cm-variable-3 { color: #82B1FF; } +.cm-s-material .cm-builtin { color: #DECB6B; } +.cm-s-material .cm-atom { color: #F77669; } +.cm-s-material .cm-number { color: #F77669; } +.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); } +.cm-s-material .cm-string { color: #C3E88D; } +.cm-s-material .cm-string-2 { color: #80CBC4; } +.cm-s-material .cm-comment { color: #546E7A; } +.cm-s-material .cm-variable { color: #82B1FF; } +.cm-s-material .cm-tag { color: #80CBC4; } +.cm-s-material .cm-meta { color: #80CBC4; } +.cm-s-material .cm-attribute { color: #FFCB6B; } +.cm-s-material .cm-property { color: #80CBAE; } +.cm-s-material .cm-qualifier { color: #DECB6B; } +.cm-s-material .cm-variable-3 { color: #DECB6B; } +.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); } +.cm-s-material .cm-error { + color: rgba(255, 255, 255, 1.0); + background-color: #EC5F67; +} +.cm-s-material .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; +} diff --git a/app/index.html b/app/index.html index 362e2517a..426b7f4ad 100644 --- a/app/index.html +++ b/app/index.html @@ -1,10 +1,11 @@ + Redux TodoMVC example
- \ No newline at end of file + diff --git a/package.json b/package.json index 7d08f2066..078a6982c 100644 --- a/package.json +++ b/package.json @@ -7,14 +7,15 @@ "url": "git@bitbucket.org:gschier/insomnia.git" }, "dependencies": { + "babel-polyfill": "^6.7.2", "classnames": "^2.2.3", + "codemirror": "^5.12.0", "react": "^0.14.7", "react-dom": "^0.14.7", + "react-redux": "^4.4.1", "redux": "^3.3.1", "redux-logger": "^2.6.1", - "react-redux": "^4.4.1", "redux-thunk": "^2.0.1", - "babel-polyfill": "^6.7.2", "webpack": "^1.12.14" }, "devDependencies": { diff --git a/webpack/base.config.js b/webpack/base.config.js index ecf245457..192b87c3d 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -2,54 +2,54 @@ var path = require('path'); var webpack = require('webpack'); module.exports = { - context: path.join(__dirname, '../app'), - entry: [ - './index.js', - './index.html' - ], - output: { - path: path.join(__dirname, '../dist'), - filename: 'bundle.js' - }, - module: { - loaders: [ - { - id: 'babel', - test: /\.jsx?$/, - loaders: ['babel?presets[]=react,presets[]=es2015'], - exclude: /node_modules/ - }, - { - test: /\.(scss|css)$/, - loader: 'style!css!sass' - }, - { - test: /\.(html)$/, - loader: "file?name=[name].[ext]" - }, - { - test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, - loader: "url?limit=10000&mimetype=application/font-woff" - }, - { - test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, - loader: "url?limit=10000&mimetype=application/font-woff" - }, - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - loader: "url?limit=10000&mimetype=application/octet-stream" - }, - { - test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - loader: "file" - }, - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: "url?limit=10000&mimetype=image/svg+xml" - } - ] - }, - resolve: { - extensions: ['', '.js', '.jsx'] - } -}; \ No newline at end of file + context: path.join(__dirname, '../app'), + entry: [ + './index.js', + './index.html' + ], + output: { + path: path.join(__dirname, '../dist'), + filename: 'bundle.js' + }, + module: { + loaders: [ + { + id: 'babel', + test: /\.jsx?$/, + loaders: ['babel?presets[]=react,presets[]=es2015'], + exclude: /node_modules/ + }, + { + test: /\.(scss|css)$/, + loader: 'style!css!sass' + }, + { + test: /\.(html)$/, + loader: "file?name=[name].[ext]" + }, + { + test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, + loader: "url?limit=10000&mimetype=application/font-woff" + }, + { + test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, + loader: "url?limit=10000&mimetype=application/font-woff" + }, + { + test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, + loader: "url?limit=10000&mimetype=application/octet-stream" + }, + { + test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, + loader: "file" + }, + { + test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + loader: "url?limit=10000&mimetype=image/svg+xml" + } + ] + }, + resolve: { + extensions: ['', '.js', '.jsx'] + } +};