From de0dfba04f98eaa6ad6e7f387c408fba14de6790 Mon Sep 17 00:00:00 2001 From: Borys_Levytskyi Date: Sun, 20 Nov 2016 18:59:05 +0200 Subject: [PATCH] React boilerplate --- karma.conf.js | 22 +- package.json | 14 +- src.old/css/styles.css | 103 +++++++++ {src => src.old}/favicon.ico | Bin {src => src.old}/img/feedback-dark.png | Bin {src => src.old}/img/feedback-light.png | Bin {src => src.old}/img/github-dark.png | Bin {src => src.old}/img/github-light.png | Bin {src => src.old}/img/twitter-dark.png | Bin {src => src.old}/img/twitter-light.png | Bin src.old/index.html | 182 ++++++++++++++++ {src => src.old}/js/analytics.js | 0 {src => src.old}/js/app.js | 0 {src => src.old}/js/app/bitwise/calc.js | 0 {src => src.old}/js/app/bitwise/expression.js | 0 {src => src.old}/js/app/bitwise/formatter.js | 0 {src => src.old}/js/app/cmd/cmd.js | 0 {src => src.old}/js/app/cmd/commands.js | 0 {src => src.old}/js/app/controllers.js | 0 {src => src.old}/js/app/modelViews.js | 0 {src => src.old}/js/app/models.js | 0 {src => src.old}/js/app/run.js | 0 {src => src.old}/js/app/services.js | 0 .../js/components/controllersFeature.js | 0 .../js/components/templatesFeature.js | 0 .../js/components/viewsFeature.js | 0 {src => src.old}/js/core/appShell.js | 0 {src => src.old}/js/core/core.js | 0 {src => src.old}/js/core/di.js | 0 {src => src.old}/js/core/htmlBuilder.js | 0 {src => src.old}/js/core/is.js | 0 {src => src.old}/js/core/observable.js | 0 {src => src.old}/js/core/should.js | 0 {src => src.old}/js_unused/bindr.js | 0 {src => src.old}/js_unused/commandsFeature.js | 0 src/css/styles.css | 4 +- src/index.html | 195 ++---------------- src/index.jsx | 35 ++++ tsconfig.json | 4 +- webpack.config.js | 29 +++ 40 files changed, 391 insertions(+), 197 deletions(-) create mode 100644 src.old/css/styles.css rename {src => src.old}/favicon.ico (100%) rename {src => src.old}/img/feedback-dark.png (100%) rename {src => src.old}/img/feedback-light.png (100%) rename {src => src.old}/img/github-dark.png (100%) rename {src => src.old}/img/github-light.png (100%) rename {src => src.old}/img/twitter-dark.png (100%) rename {src => src.old}/img/twitter-light.png (100%) create mode 100644 src.old/index.html rename {src => src.old}/js/analytics.js (100%) rename {src => src.old}/js/app.js (100%) rename {src => src.old}/js/app/bitwise/calc.js (100%) rename {src => src.old}/js/app/bitwise/expression.js (100%) rename {src => src.old}/js/app/bitwise/formatter.js (100%) rename {src => src.old}/js/app/cmd/cmd.js (100%) rename {src => src.old}/js/app/cmd/commands.js (100%) rename {src => src.old}/js/app/controllers.js (100%) rename {src => src.old}/js/app/modelViews.js (100%) rename {src => src.old}/js/app/models.js (100%) rename {src => src.old}/js/app/run.js (100%) rename {src => src.old}/js/app/services.js (100%) rename {src => src.old}/js/components/controllersFeature.js (100%) rename {src => src.old}/js/components/templatesFeature.js (100%) rename {src => src.old}/js/components/viewsFeature.js (100%) rename {src => src.old}/js/core/appShell.js (100%) rename {src => src.old}/js/core/core.js (100%) rename {src => src.old}/js/core/di.js (100%) rename {src => src.old}/js/core/htmlBuilder.js (100%) rename {src => src.old}/js/core/is.js (100%) rename {src => src.old}/js/core/observable.js (100%) rename {src => src.old}/js/core/should.js (100%) rename {src => src.old}/js_unused/bindr.js (100%) rename {src => src.old}/js_unused/commandsFeature.js (100%) create mode 100644 src/index.jsx create mode 100644 webpack.config.js diff --git a/karma.conf.js b/karma.conf.js index 13029a0..fee17e7 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -3,17 +3,17 @@ module.exports = function(config) { frameworks: ['jasmine'], files: [ - 'src/js/core/core.js', - 'src/js/core/is.js', - 'src/js/core/di.js', - 'src/js/core/should.js', - 'src/js/core/htmlBuilder.js', - 'src/js/core/should.js', - 'src/js/core/appShell.js', - 'src/js/core/observable.js', - 'src/js/app.js', - 'src/js/components/*.js', - 'src/js/app/**/*.js', + 'src.old/js/core/core.js', + 'src.old/js/core/is.js', + 'src.old/js/core/di.js', + 'src.old/js/core/should.js', + 'src.old/js/core/htmlBuilder.js', + 'src.old/js/core/should.js', + 'src.old/js/core/appShell.js', + 'src.old/js/core/observable.js', + 'src.old/js/app.js', + 'src.old/js/components/*.js', + 'src.old/js/app/**/*.js', 'tests/unit/**/*.js' ] }); diff --git a/package.json b/package.json index 95a0168..ed0482e 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,10 @@ }, "homepage": "https://github.com/BorysLevytskyi/BitwiseCmd", "devDependencies": { + "babel-cli": "^6.18.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "babel-plugin-transform-react-jsx": "^6.8.0", + "babel-preset-react": "^6.16.0", "grunt-contrib-clean": "latest", "grunt-contrib-copy": "latest", "grunt-contrib-cssmin": "latest", @@ -31,7 +35,13 @@ "dependencies": { "@types/react": "^0.14.44", "@types/react-dom": "^0.14.18", - "react": "^15.3.2", - "react-dom": "^15.3.2" + "babel-core": "^6.18.2", + "babel-loader": "^6.2.8", + "babel-plugin-transform-class-properties": "^6.19.0", + "babel-preset-es2015": "^6.18.0", + "babel-preset-react": "^6.16.0", + "body-parser": "^1.15.2", + "react": "^15.4.0", + "react-dom": "^15.4.0" } } diff --git a/src.old/css/styles.css b/src.old/css/styles.css new file mode 100644 index 0000000..342fcc6 --- /dev/null +++ b/src.old/css/styles.css @@ -0,0 +1,103 @@ +body { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; } +code { font-size: 1.2em; font-weight: bold; } + +.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 } +.top-links li { float: left; } +.top-links a { display: inline-block; padding: 10px 15px} +.top-links .icon { margin-right: 5px; } + +.mono { font-family: monospace; font-size: 1.3em } +.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; } + +.result { margin: 10px 10px 30px; } +.result .input { margin-bottom: 10px; } +.result .content { padding-left: 10px} +.result .cur { margin-right: 5px; } + +.hashLink { text-decoration: none; margin-left: 5px; visibility: hidden } +.hashLink:hover { text-decoration: underline; margin-left: 5px; } +.input:hover .hashLink { visibility: visible } + +.expression .label { font-weight: bold; padding-right: 5px; text-align: right; } +.expression .bin { letter-spacing: 3px; } +.expression .flipable { cursor: pointer; opacity: 1 } +.expression .flipable:hover { opacity: 0.8 } +.expression .byte { margin: 0 3px; } +.expression .flipable { cursor: pointer; opacity: 1 } +.expression .flipable:hover { opacity: 0.8 } +.expression-result td { border-top: dotted 1px gray; } +.expression { font-size: 1.5em; font-family: monospace } +.expression .prefix { font-weight: normal; display: none; font-size: 0.9em } +.expression .other { font-size: 0.9em} +.expression .sign { text-align: right} + +.hex .prefix { display: inline; } + +.help { padding: 10px; } +.help ul { list-style-type: none; margin: 0; padding: 0; } +.help p { margin-top: 0 } + +.indicator { padding: 2px 5px; font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer } +.error { color: maroon; } + +#view { padding: 10px} + +.cur { color: lightgray; } + +.icon { width: 16px; height: 16px; display: inline-block; } +.light .twitter { background: url('../img/twitter-light.png') } +.dark .twitter { background: url('../img/twitter-dark.png') } + +.light .feedback { background: url('../img/feedback-light.png') } +.dark .feedback { background: url('../img/feedback-dark.png') } + +.dark .github { background: url('../img/github-dark.png') } +.light .github { background: url('../img/github-light.png') } + +/* Light */ +.light { background: #fafafa; } +.light a, .light a:visited { color: #222; } +.light .one { color: black; } +.light .zero { color: #888; } +.light .indicator { color: #ddd; } +.light .on { color: #121212; } +.light .prefix { color: #888} +.light .other { color: #bbb } +.light .hashLink, .light .hashLink:visited { color: #ddd } +.light .hashLink:hover { color: #888 } +.light ul.top-links li:hover { background: #ddd } + +/* Dark */ +.dark { background: #121212; color: white;} +.dark .expressionInput { background: #121212; color: white; } +.dark a, .dark a:visited { color: white; } +.dark .indicator { color: #555; } +.dark .on { color: white; } +.dark .zero { color: #999;} +.dark .prefix { color: #999} +.dark .other { color: #444;} +.dark .hashLink, .dark .hashLink:visited { color: #333 } +.dark .hashLink:hover { color: #999 } +.dark ul.top-links li:hover { background: #333 } + +/* Top Links Shrink */ +@media (max-width: 800px) { + + .top-links .link-text { display: none } +} + +/* Remove margin space on body. Inline top links with header */ +@media (max-width: 700px) { + body { padding: 10px; } + .expressionInput { width: 500px; } +} + +/* Further shrink */ +@media (max-width: 500px) { + .expressionInput { width: 350px; } + .top-links a { display: inline-block; padding: 5px 10px} +} + +@media (max-width: 350px) { + .expressionInput { width: 200px; } +} diff --git a/src/favicon.ico b/src.old/favicon.ico similarity index 100% rename from src/favicon.ico rename to src.old/favicon.ico diff --git a/src/img/feedback-dark.png b/src.old/img/feedback-dark.png similarity index 100% rename from src/img/feedback-dark.png rename to src.old/img/feedback-dark.png diff --git a/src/img/feedback-light.png b/src.old/img/feedback-light.png similarity index 100% rename from src/img/feedback-light.png rename to src.old/img/feedback-light.png diff --git a/src/img/github-dark.png b/src.old/img/github-dark.png similarity index 100% rename from src/img/github-dark.png rename to src.old/img/github-dark.png diff --git a/src/img/github-light.png b/src.old/img/github-light.png similarity index 100% rename from src/img/github-light.png rename to src.old/img/github-light.png diff --git a/src/img/twitter-dark.png b/src.old/img/twitter-dark.png similarity index 100% rename from src/img/twitter-dark.png rename to src.old/img/twitter-dark.png diff --git a/src/img/twitter-light.png b/src.old/img/twitter-light.png similarity index 100% rename from src/img/twitter-light.png rename to src.old/img/twitter-light.png diff --git a/src.old/index.html b/src.old/index.html new file mode 100644 index 0000000..645103d --- /dev/null +++ b/src.old/index.html @@ -0,0 +1,182 @@ + + + + + + + BitwiseCmd + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

BitwiseCmd

+ + +
+ +
+ + + + [em] + +
+
+ +
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/analytics.js b/src.old/js/analytics.js similarity index 100% rename from src/js/analytics.js rename to src.old/js/analytics.js diff --git a/src/js/app.js b/src.old/js/app.js similarity index 100% rename from src/js/app.js rename to src.old/js/app.js diff --git a/src/js/app/bitwise/calc.js b/src.old/js/app/bitwise/calc.js similarity index 100% rename from src/js/app/bitwise/calc.js rename to src.old/js/app/bitwise/calc.js diff --git a/src/js/app/bitwise/expression.js b/src.old/js/app/bitwise/expression.js similarity index 100% rename from src/js/app/bitwise/expression.js rename to src.old/js/app/bitwise/expression.js diff --git a/src/js/app/bitwise/formatter.js b/src.old/js/app/bitwise/formatter.js similarity index 100% rename from src/js/app/bitwise/formatter.js rename to src.old/js/app/bitwise/formatter.js diff --git a/src/js/app/cmd/cmd.js b/src.old/js/app/cmd/cmd.js similarity index 100% rename from src/js/app/cmd/cmd.js rename to src.old/js/app/cmd/cmd.js diff --git a/src/js/app/cmd/commands.js b/src.old/js/app/cmd/commands.js similarity index 100% rename from src/js/app/cmd/commands.js rename to src.old/js/app/cmd/commands.js diff --git a/src/js/app/controllers.js b/src.old/js/app/controllers.js similarity index 100% rename from src/js/app/controllers.js rename to src.old/js/app/controllers.js diff --git a/src/js/app/modelViews.js b/src.old/js/app/modelViews.js similarity index 100% rename from src/js/app/modelViews.js rename to src.old/js/app/modelViews.js diff --git a/src/js/app/models.js b/src.old/js/app/models.js similarity index 100% rename from src/js/app/models.js rename to src.old/js/app/models.js diff --git a/src/js/app/run.js b/src.old/js/app/run.js similarity index 100% rename from src/js/app/run.js rename to src.old/js/app/run.js diff --git a/src/js/app/services.js b/src.old/js/app/services.js similarity index 100% rename from src/js/app/services.js rename to src.old/js/app/services.js diff --git a/src/js/components/controllersFeature.js b/src.old/js/components/controllersFeature.js similarity index 100% rename from src/js/components/controllersFeature.js rename to src.old/js/components/controllersFeature.js diff --git a/src/js/components/templatesFeature.js b/src.old/js/components/templatesFeature.js similarity index 100% rename from src/js/components/templatesFeature.js rename to src.old/js/components/templatesFeature.js diff --git a/src/js/components/viewsFeature.js b/src.old/js/components/viewsFeature.js similarity index 100% rename from src/js/components/viewsFeature.js rename to src.old/js/components/viewsFeature.js diff --git a/src/js/core/appShell.js b/src.old/js/core/appShell.js similarity index 100% rename from src/js/core/appShell.js rename to src.old/js/core/appShell.js diff --git a/src/js/core/core.js b/src.old/js/core/core.js similarity index 100% rename from src/js/core/core.js rename to src.old/js/core/core.js diff --git a/src/js/core/di.js b/src.old/js/core/di.js similarity index 100% rename from src/js/core/di.js rename to src.old/js/core/di.js diff --git a/src/js/core/htmlBuilder.js b/src.old/js/core/htmlBuilder.js similarity index 100% rename from src/js/core/htmlBuilder.js rename to src.old/js/core/htmlBuilder.js diff --git a/src/js/core/is.js b/src.old/js/core/is.js similarity index 100% rename from src/js/core/is.js rename to src.old/js/core/is.js diff --git a/src/js/core/observable.js b/src.old/js/core/observable.js similarity index 100% rename from src/js/core/observable.js rename to src.old/js/core/observable.js diff --git a/src/js/core/should.js b/src.old/js/core/should.js similarity index 100% rename from src/js/core/should.js rename to src.old/js/core/should.js diff --git a/src/js_unused/bindr.js b/src.old/js_unused/bindr.js similarity index 100% rename from src/js_unused/bindr.js rename to src.old/js_unused/bindr.js diff --git a/src/js_unused/commandsFeature.js b/src.old/js_unused/commandsFeature.js similarity index 100% rename from src/js_unused/commandsFeature.js rename to src.old/js_unused/commandsFeature.js diff --git a/src/css/styles.css b/src/css/styles.css index 342fcc6..c070e88 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,4 +1,6 @@ -body { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; } +body { padding:0; margin:0; height: 100% } +html { height: 100% } +#root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100% } code { font-size: 1.2em; font-weight: bold; } .top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 } diff --git a/src/index.html b/src/index.html index 645103d..860af65 100644 --- a/src/index.html +++ b/src/index.html @@ -1,182 +1,15 @@ - - - - - - - BitwiseCmd - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

BitwiseCmd

- - -
- -
- - - - [em] - -
-
- -
-
- - - - - - - - - - - - - - - - + + + + + + + BitwiseCmd + + + + +
Doesn't work
+ + \ No newline at end of file diff --git a/src/index.jsx b/src/index.jsx new file mode 100644 index 0000000..b37acea --- /dev/null +++ b/src/index.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +var rootView =
+
+

BitwiseCmd

+ + +
+ +
+ + + + [em] + +
+ +
+
+ +
; + + +ReactDOM.render(rootView, document.getElementById('root')); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 0c9cc8f..950d1ca 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,7 @@ "jsx": "react" }, "files": [ - "./src/components/Hello.tsx", - "./src/index.tsx" + "./src.old/components/Hello.tsx", + "./src.old/index.tsx" ] } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..8681025 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,29 @@ +module.exports = { + entry: __dirname + "/src/index.jsx", + output: { + fileame: 'bundle.js', + path: __dirname + '/src', + publicPath: 'http://localhost:8080/' + }, + devtool: 'source-maps', + module: { + loaders: [{ + test: /\.jsx$/, + loader: 'babel', + //exclude: /node-modules/, + output: { path: __dirname + '/src', filename: 'bundle.js' }, + query: { + presets: ['es2015', 'react'], + plugins: ['transform-class-properties'] + } + }] + }, + // externals: { + // //don't bundle the 'react' npm package with our bundle.js + // //but get it from a global 'React' variable + // 'react': 'React' + // }, + resolve: { + extensions: ['', '.js', '.jsx'] + } +}; \ No newline at end of file