##// END OF EJS Templates
frontend: use webpack instead of vulcanize
ergo -
r3171:b9c8d2ad default
parent child Browse files
Show More

The requested changes are too big and content was truncated. Show full diff

@@ -0,0 +1,7 b''
1 import '../../../../../bower_components/iron-ajax/iron-ajax.html';
2 import './root-styles.gen.html';
3 import './channelstream-connection/channelstream-connection.html';
4 import './rhodecode-toast/rhodecode-toast.html';
5 import './rhodecode-toggle/rhodecode-toggle.html';
6 import './rhodecode-unsafe-html/rhodecode-unsafe-html.html';
7 import './rhodecode-app/rhodecode-app.html';
@@ -0,0 +1,69 b''
1 /* webpack.config.js */
2 require('style-loader');
3 require('css-loader');
4 var path = require('path');
5
6 const projectName = 'rhodecode-components';
7 let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js')
8
9 if (process.env.RC_STATIC_DIR) {
10 destinationDirectory = process.env.RC_STATIC_DIR;
11 }
12
13 module.exports = {
14 // Tell Webpack which file kicks off our app.
15 entry: {
16 main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'),
17 },
18 output: {
19 filename: 'rhodecode-components.js',
20 path: path.resolve(destinationDirectory)
21 },
22 // Tell Webpack which directories to look in to resolve import statements.
23 // Normally Webpack will look in node_modules by default but since we’re overriding
24 // the property we’ll need to tell it to look there in addition to the
25 // bower_components folder.
26 resolve: {
27 modules: [
28 path.resolve(__dirname, 'node_modules'),
29 path.resolve(__dirname, 'bower_components')
30 ]
31 },
32 // These rules tell Webpack how to process different module types.
33 // Remember, *everything* is a module in Webpack. That includes
34 // CSS, and (thanks to our loader) HTML.
35 module: {
36 rules: [
37 {
38 // If you see a file that ends in .html, send it to these loaders.
39 test: /\.html$/,
40 // This is an example of chained loaders in Webpack.
41 // Chained loaders run last to first. So it will run
42 // polymer-webpack-loader, and hand the output to
43 // babel-loader. This let's us transpile JS in our `<script>` elements.
44 use: [
45 {loader: 'babel-loader'},
46 {loader: 'polymer-webpack-loader',
47 options: {
48 processStyleLinks: true,
49 }
50 }
51 ],
52 },
53 {
54 // If you see a file that ends in .js, just send it to the babel-loader.
55 test: /\.js$/,
56 use: 'babel-loader'
57 // Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
58 // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
59 },
60 // this is required because of bug:
61 // https://github.com/webpack-contrib/polymer-webpack-loader/issues/49
62 {
63 test: /intl-messageformat.min.js/,
64 use: 'imports-loader?this=>window'
65 }
66 ]
67 },
68 plugins: []
69 };
@@ -45,6 +45,7 b' syntax: regexp'
45 ^rhodecode/public/js/rhodecode-components.html$
45 ^rhodecode/public/js/rhodecode-components.html$
46 ^rhodecode/public/js/scripts.js$
46 ^rhodecode/public/js/scripts.js$
47 ^rhodecode/public/js/rhodecode-components.js$
47 ^rhodecode/public/js/rhodecode-components.js$
48 ^rhodecode/public/js/app-bundle.js$
48 ^rhodecode/public/js/src/components/root-styles.gen.html$
49 ^rhodecode/public/js/src/components/root-styles.gen.html$
49 ^rhodecode/public/js/vendors/webcomponentsjs/
50 ^rhodecode/public/js/vendors/webcomponentsjs/
50 ^rhodecode\.db$
51 ^rhodecode\.db$
@@ -1,4 +1,12 b''
1 var gruntConfig = require('./grunt_config.json');
1 var gruntConfig = require('./grunt_config.json');
2 var webpackConfig = require('./webpack.config');
3 gruntConfig["webpack"] = {
4 options: {
5 stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
6 },
7 prod: webpackConfig,
8 dev: Object.assign({ watch: false }, webpackConfig)
9 };
2
10
3 module.exports = function(grunt) {
11 module.exports = function(grunt) {
4 grunt.initConfig(gruntConfig);
12 grunt.initConfig(gruntConfig);
@@ -7,8 +15,7 b' module.exports = function(grunt) {'
7 grunt.loadNpmTasks('grunt-contrib-concat');
15 grunt.loadNpmTasks('grunt-contrib-concat');
8 grunt.loadNpmTasks('grunt-contrib-watch');
16 grunt.loadNpmTasks('grunt-contrib-watch');
9 grunt.loadNpmTasks('grunt-contrib-jshint');
17 grunt.loadNpmTasks('grunt-contrib-jshint');
10 grunt.loadNpmTasks('grunt-vulcanize');
11 grunt.loadNpmTasks('grunt-contrib-copy');
18 grunt.loadNpmTasks('grunt-contrib-copy');
12
19 grunt.loadNpmTasks('grunt-webpack');
13 grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'concat:dist', 'vulcanize']);
20 grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'webpack', 'concat:dist']);
14 };
21 };
@@ -93,7 +93,8 b''
93 "<%= dirs.js.src %>/rhodecode/tooltips.js",
93 "<%= dirs.js.src %>/rhodecode/tooltips.js",
94 "<%= dirs.js.src %>/rhodecode/users.js",
94 "<%= dirs.js.src %>/rhodecode/users.js",
95 "<%= dirs.js.src %>/rhodecode/appenlight.js",
95 "<%= dirs.js.src %>/rhodecode/appenlight.js",
96 "<%= dirs.js.src %>/rhodecode.js"
96 "<%= dirs.js.src %>/rhodecode.js",
97 "<%= dirs.js.dest %>/rhodecode-components.js"
97 ],
98 ],
98 "dest": "<%= dirs.js.dest %>/scripts.js",
99 "dest": "<%= dirs.js.dest %>/scripts.js",
99 "nonull": true
100 "nonull": true
@@ -146,7 +147,7 b''
146 "less:development",
147 "less:development",
147 "less:components",
148 "less:components",
148 "concat:polymercss",
149 "concat:polymercss",
149 "vulcanize",
150 "webpack",
150 "concat:dist"
151 "concat:dist"
151 ]
152 ]
152 },
153 },
@@ -159,7 +160,7 b''
159 "tasks": [
160 "tasks": [
160 "less:components",
161 "less:components",
161 "concat:polymercss",
162 "concat:polymercss",
162 "vulcanize",
163 "webpack",
163 "concat:dist"
164 "concat:dist"
164 ]
165 ]
165 }
166 }
@@ -171,18 +172,5 b''
171 "jshintrc": ".jshintrc"
172 "jshintrc": ".jshintrc"
172 }
173 }
173 }
174 }
174 },
175 "vulcanize": {
176 "default": {
177 "options": {
178 "abspath": "",
179 "inlineScripts": true,
180 "inlineCss": true,
181 "stripComments": true
182 },
183 "files": {
184 "<%= dirs.js.dest %>/rhodecode-components.html": "<%= dirs.js.src %>/components/shared-components.html"
185 }
186 }
187 }
175 }
188 }
176 }
@@ -21,16 +21,30 b''
21 "grunt-contrib-jshint": "^0.12.0",
21 "grunt-contrib-jshint": "^0.12.0",
22 "grunt-contrib-less": "^1.1.0",
22 "grunt-contrib-less": "^1.1.0",
23 "grunt-contrib-watch": "^0.6.1",
23 "grunt-contrib-watch": "^0.6.1",
24 "grunt-vulcanize": "^1.0.0",
24 "grunt-webpack": "^3.1.3",
25 "jquery": "1.11.3",
25 "jquery": "1.11.3",
26 "jshint": "^2.9.1-rc3",
26 "jshint": "^2.9.1-rc3",
27 "moment": "^2.18.1",
27 "moment": "^2.18.1",
28 "mousetrap": "^1.6.1",
28 "mousetrap": "^1.6.1",
29 "qrious": "^4.0.2",
29 "qrious": "^4.0.2",
30 "sticky-sidebar": "3.3.1",
30 "sticky-sidebar": "3.3.1",
31 "vulcanize": "^1.16.0",
32 "waypoints": "4.0.1",
31 "waypoints": "4.0.1",
33 "webpack": "4.23.1",
32 "webpack": "4.23.1",
34 "webpack-cli": "3.1.2"
33 "webpack-cli": "3.1.2",
34 "babel-core": "^6.26.3",
35 "babel-loader": "^7.1.2",
36 "babel-plugin-transform-object-rest-spread": "^6.26.0",
37 "babel-preset-env": "^1.6.0",
38 "copy-webpack-plugin": "^4.4.2",
39 "css-loader": "^0.28.11",
40 "exports-loader": "^0.6.4",
41 "html-loader": "^0.4.4",
42 "html-webpack-plugin": "^3.2.0",
43 "imports-loader": "^0.7.1",
44 "polymer-webpack-loader": "^2.0.1",
45 "style-loader": "^0.21.0",
46 "webpack-uglify-js-plugin": "^1.1.9",
47 "raw-loader": "1.0.0-beta.0",
48 "ts-loader": "^1.3.3"
35 }
49 }
36 }
50 }
1 NO CONTENT: modified file
NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff
@@ -63,7 +63,6 b' class TestHomeController(TestController)'
63 {'beaker.session.secret': 'test-rc-uytcxaz'})
63 {'beaker.session.secret': 'test-rc-uytcxaz'})
64 response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
64 response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
65 response.mustcontain('scripts.js?ver={0}'.format(rhodecode_version_hash))
65 response.mustcontain('scripts.js?ver={0}'.format(rhodecode_version_hash))
66 response.mustcontain('hodecode-components.html?ver={0}'.format(rhodecode_version_hash))
67
66
68 def test_index_contains_backend_specific_details(self, backend):
67 def test_index_contains_backend_specific_details(self, backend):
69 self.log_user()
68 self.log_user()
@@ -14,7 +14,7 b''
14 <rhodecode-favicon></rhodecode-favicon>
14 <rhodecode-favicon></rhodecode-favicon>
15 </template>
15 </template>
16 <script>
16 <script>
17 ccLog = Logger.get('RhodeCodeApp');
17 var ccLog = Logger.get('RhodeCodeApp');
18 ccLog.setLevel(Logger.OFF);
18 ccLog.setLevel(Logger.OFF);
19
19
20 var rhodeCodeApp = Polymer({
20 var rhodeCodeApp = Polymer({
@@ -3,8 +3,85 b''
3 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
3 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
4 <dom-module id="rhodecode-toast">
4 <dom-module id="rhodecode-toast">
5 <template>
5 <template>
6 <style include="shared-styles"></style>
6 <style include="shared-styles">
7 <link rel="stylesheet" href="rhodecode-toast.css">
7 /* inset border for buttons - does not work in ie */
8 /* rounded borders */
9 /* rounded borders - bottom only */
10 /* rounded borders - top only */
11 /* text shadow */
12 /* centers text in a circle - input diameter of circle and color */
13 /* pill version of the circle */
14 .absolute-center {
15 margin: auto;
16 position: absolute;
17 top: 0;
18 left: 0;
19 bottom: 0;
20 right: 0;
21 }
22 .top-left-rounded-corner {
23 -webkit-border-top-left-radius: 2px;
24 -khtml-border-radius-topleft: 2px;
25 border-top-left-radius: 2px;
26 }
27 .top-right-rounded-corner {
28 -webkit-border-top-right-radius: 2px;
29 -khtml-border-radius-topright: 2px;
30 border-top-right-radius: 2px;
31 }
32 .bottom-left-rounded-corner {
33 -webkit-border-bottom-left-radius: 2px;
34 -khtml-border-radius-bottomleft: 2px;
35 border-bottom-left-radius: 2px;
36 }
37 .bottom-right-rounded-corner {
38 -webkit-border-bottom-right-radius: 2px;
39 -khtml-border-radius-bottomright: 2px;
40 border-bottom-right-radius: 2px;
41 }
42 .top-left-rounded-corner-mid {
43 -webkit-border-top-left-radius: 2px;
44 -khtml-border-radius-topleft: 2px;
45 border-top-left-radius: 2px;
46 }
47 .top-right-rounded-corner-mid {
48 -webkit-border-top-right-radius: 2px;
49 -khtml-border-radius-topright: 2px;
50 border-top-right-radius: 2px;
51 }
52 .bottom-left-rounded-corner-mid {
53 -webkit-border-bottom-left-radius: 2px;
54 -khtml-border-radius-bottomleft: 2px;
55 border-bottom-left-radius: 2px;
56 }
57 .bottom-right-rounded-corner-mid {
58 -webkit-border-bottom-right-radius: 2px;
59 -khtml-border-radius-bottomright: 2px;
60 border-bottom-right-radius: 2px;
61 }
62 .alert {
63 margin: 10px 0;
64 }
65 .toast-close {
66 margin: 0;
67 float: right;
68 cursor: pointer;
69 }
70 .toast-message-holder {
71 background: rgba(255, 255, 255, 0.25);
72 }
73 .toast-message-holder.fixed {
74 position: fixed;
75 padding: 10px 0;
76 margin-left: 10px;
77 margin-right: 10px;
78 top: 0;
79 left: 0;
80 right: 0;
81 z-index: 100;
82 }
83 </style>
84
8 <template is="dom-if" if="[[hasToasts]]">
85 <template is="dom-if" if="[[hasToasts]]">
9 <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
86 <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
10 <template is="dom-repeat" items="[[toasts]]">
87 <template is="dom-repeat" items="[[toasts]]">
@@ -4,8 +4,19 b''
4
4
5 <dom-module id="rhodecode-toggle">
5 <dom-module id="rhodecode-toggle">
6
6
7 <style include="shared-styles"></style>
7 <style include="shared-styles">
8 <link rel="stylesheet" href="rhodecode-toggle.css">
8 .rc-toggle {
9 float: left;
10 position: relative;
11 }
12 .rc-toggle paper-spinner {
13 position: absolute;
14 top: 0;
15 left: -30px;
16 width: 20px;
17 height: 20px;
18 }
19 </style>
9
20
10 <template>
21 <template>
11 <div class="rc-toggle">
22 <div class="rc-toggle">
@@ -1,3 +1,3 b''
1 <dom-module id="root-styles">
1 <dom-module id="shared-styles">
2 <template>
2 <template>
3 <style>
3 <style>
@@ -101,7 +101,6 b" c.template_context['default_user'] = {"
101 <script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
101 <script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
102 ## avoide escaping the %N
102 ## avoide escaping the %N
103 <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
103 <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
104 <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
105 <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
104 <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
106
105
107
106
1 NO CONTENT: file was removed
NO CONTENT: file was removed
1 NO CONTENT: file was removed
NO CONTENT: file was removed
1 NO CONTENT: file was removed
NO CONTENT: file was removed
General Comments 0
You need to be logged in to leave comments. Login now