frontend: use webpack instead of vulcanize
This commit is contained in:
Marcin Lulek
parent
33f90bf320
commit
69b8d6a77f
16 changed files with 2946 additions and 310 deletions
|
|
@ -45,6 +45,7 @@ syntax: regexp
|
|||
^rhodecode/public/js/rhodecode-components.html$
|
||||
^rhodecode/public/js/scripts.js$
|
||||
^rhodecode/public/js/rhodecode-components.js$
|
||||
^rhodecode/public/js/app-bundle.js$
|
||||
^rhodecode/public/js/src/components/root-styles.gen.html$
|
||||
^rhodecode/public/js/vendors/webcomponentsjs/
|
||||
^rhodecode\.db$
|
||||
|
|
|
|||
13
Gruntfile.js
13
Gruntfile.js
|
|
@ -1,4 +1,12 @@
|
|||
var gruntConfig = require('./grunt_config.json');
|
||||
var webpackConfig = require('./webpack.config');
|
||||
gruntConfig["webpack"] = {
|
||||
options: {
|
||||
stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
|
||||
},
|
||||
prod: webpackConfig,
|
||||
dev: Object.assign({ watch: false }, webpackConfig)
|
||||
};
|
||||
|
||||
module.exports = function(grunt) {
|
||||
grunt.initConfig(gruntConfig);
|
||||
|
|
@ -7,8 +15,7 @@ module.exports = function(grunt) {
|
|||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-vulcanize');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
|
||||
grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'concat:dist', 'vulcanize']);
|
||||
grunt.loadNpmTasks('grunt-webpack');
|
||||
grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'webpack', 'concat:dist']);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -93,7 +93,8 @@
|
|||
"<%= dirs.js.src %>/rhodecode/tooltips.js",
|
||||
"<%= dirs.js.src %>/rhodecode/users.js",
|
||||
"<%= dirs.js.src %>/rhodecode/appenlight.js",
|
||||
"<%= dirs.js.src %>/rhodecode.js"
|
||||
"<%= dirs.js.src %>/rhodecode.js",
|
||||
"<%= dirs.js.dest %>/rhodecode-components.js"
|
||||
],
|
||||
"dest": "<%= dirs.js.dest %>/scripts.js",
|
||||
"nonull": true
|
||||
|
|
@ -146,7 +147,7 @@
|
|||
"less:development",
|
||||
"less:components",
|
||||
"concat:polymercss",
|
||||
"vulcanize",
|
||||
"webpack",
|
||||
"concat:dist"
|
||||
]
|
||||
},
|
||||
|
|
@ -159,7 +160,7 @@
|
|||
"tasks": [
|
||||
"less:components",
|
||||
"concat:polymercss",
|
||||
"vulcanize",
|
||||
"webpack",
|
||||
"concat:dist"
|
||||
]
|
||||
}
|
||||
|
|
@ -171,18 +172,5 @@
|
|||
"jshintrc": ".jshintrc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"vulcanize": {
|
||||
"default": {
|
||||
"options": {
|
||||
"abspath": "",
|
||||
"inlineScripts": true,
|
||||
"inlineCss": true,
|
||||
"stripComments": true
|
||||
},
|
||||
"files": {
|
||||
"<%= dirs.js.dest %>/rhodecode-components.html": "<%= dirs.js.src %>/components/shared-components.html"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
package.json
20
package.json
|
|
@ -21,16 +21,30 @@
|
|||
"grunt-contrib-jshint": "^0.12.0",
|
||||
"grunt-contrib-less": "^1.1.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-vulcanize": "^1.0.0",
|
||||
"grunt-webpack": "^3.1.3",
|
||||
"jquery": "1.11.3",
|
||||
"jshint": "^2.9.1-rc3",
|
||||
"moment": "^2.18.1",
|
||||
"mousetrap": "^1.6.1",
|
||||
"qrious": "^4.0.2",
|
||||
"sticky-sidebar": "3.3.1",
|
||||
"vulcanize": "^1.16.0",
|
||||
"waypoints": "4.0.1",
|
||||
"webpack": "4.23.1",
|
||||
"webpack-cli": "3.1.2"
|
||||
"webpack-cli": "3.1.2",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"copy-webpack-plugin": "^4.4.2",
|
||||
"css-loader": "^0.28.11",
|
||||
"exports-loader": "^0.6.4",
|
||||
"html-loader": "^0.4.4",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"imports-loader": "^0.7.1",
|
||||
"polymer-webpack-loader": "^2.0.1",
|
||||
"style-loader": "^0.21.0",
|
||||
"webpack-uglify-js-plugin": "^1.1.9",
|
||||
"raw-loader": "1.0.0-beta.0",
|
||||
"ts-loader": "^1.3.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -63,7 +63,6 @@ class TestHomeController(TestController):
|
|||
{'beaker.session.secret': 'test-rc-uytcxaz'})
|
||||
response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
|
||||
response.mustcontain('scripts.js?ver={0}'.format(rhodecode_version_hash))
|
||||
response.mustcontain('hodecode-components.html?ver={0}'.format(rhodecode_version_hash))
|
||||
|
||||
def test_index_contains_backend_specific_details(self, backend):
|
||||
self.log_user()
|
||||
|
|
|
|||
7
rhodecode/public/js/src/components/index.js
Normal file
7
rhodecode/public/js/src/components/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import '../../../../../bower_components/iron-ajax/iron-ajax.html';
|
||||
import './root-styles.gen.html';
|
||||
import './channelstream-connection/channelstream-connection.html';
|
||||
import './rhodecode-toast/rhodecode-toast.html';
|
||||
import './rhodecode-toggle/rhodecode-toggle.html';
|
||||
import './rhodecode-unsafe-html/rhodecode-unsafe-html.html';
|
||||
import './rhodecode-app/rhodecode-app.html';
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<rhodecode-favicon></rhodecode-favicon>
|
||||
</template>
|
||||
<script>
|
||||
ccLog = Logger.get('RhodeCodeApp');
|
||||
var ccLog = Logger.get('RhodeCodeApp');
|
||||
ccLog.setLevel(Logger.OFF);
|
||||
|
||||
var rhodeCodeApp = Polymer({
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
|
||||
<dom-module id="rhodecode-legacy-js">
|
||||
<template>
|
||||
<script src="../../../scripts.js"></script>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'rhodecode-legacy-js',
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -3,8 +3,85 @@
|
|||
<link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
|
||||
<dom-module id="rhodecode-toast">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<link rel="stylesheet" href="rhodecode-toast.css">
|
||||
<style include="shared-styles">
|
||||
/* inset border for buttons - does not work in ie */
|
||||
/* rounded borders */
|
||||
/* rounded borders - bottom only */
|
||||
/* rounded borders - top only */
|
||||
/* text shadow */
|
||||
/* centers text in a circle - input diameter of circle and color */
|
||||
/* pill version of the circle */
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.top-left-rounded-corner {
|
||||
-webkit-border-top-left-radius: 2px;
|
||||
-khtml-border-radius-topleft: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
.top-right-rounded-corner {
|
||||
-webkit-border-top-right-radius: 2px;
|
||||
-khtml-border-radius-topright: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.bottom-left-rounded-corner {
|
||||
-webkit-border-bottom-left-radius: 2px;
|
||||
-khtml-border-radius-bottomleft: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.bottom-right-rounded-corner {
|
||||
-webkit-border-bottom-right-radius: 2px;
|
||||
-khtml-border-radius-bottomright: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
.top-left-rounded-corner-mid {
|
||||
-webkit-border-top-left-radius: 2px;
|
||||
-khtml-border-radius-topleft: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
.top-right-rounded-corner-mid {
|
||||
-webkit-border-top-right-radius: 2px;
|
||||
-khtml-border-radius-topright: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.bottom-left-rounded-corner-mid {
|
||||
-webkit-border-bottom-left-radius: 2px;
|
||||
-khtml-border-radius-bottomleft: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.bottom-right-rounded-corner-mid {
|
||||
-webkit-border-bottom-right-radius: 2px;
|
||||
-khtml-border-radius-bottomright: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
.alert {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.toast-close {
|
||||
margin: 0;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toast-message-holder {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.toast-message-holder.fixed {
|
||||
position: fixed;
|
||||
padding: 10px 0;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template is="dom-if" if="[[hasToasts]]">
|
||||
<div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
|
||||
<template is="dom-repeat" items="[[toasts]]">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,19 @@
|
|||
|
||||
<dom-module id="rhodecode-toggle">
|
||||
|
||||
<style include="shared-styles"></style>
|
||||
<link rel="stylesheet" href="rhodecode-toggle.css">
|
||||
<style include="shared-styles">
|
||||
.rc-toggle {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.rc-toggle paper-spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="rc-toggle">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<dom-module id="root-styles">
|
||||
<dom-module id="shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<!-- required for stamped out templates that might use common elements -->
|
||||
<link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="shared-styles.html">
|
||||
<link rel="import" href="channelstream-connection/channelstream-connection.html">
|
||||
<link rel="import" href="rhodecode-toast/rhodecode-toast.html">
|
||||
<link rel="import" href="rhodecode-toggle/rhodecode-toggle.html">
|
||||
<link rel="import" href="rhodecode-unsafe-html/rhodecode-unsafe-html.html">
|
||||
<link rel="import" href="rhodecode-app/rhodecode-app.html">
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<dom-module id="shared-styles">
|
||||
<template>
|
||||
<link rel="stylesheet" href="../../../css/style-polymer.css">
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
@ -101,7 +101,6 @@ c.template_context['default_user'] = {
|
|||
<script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
|
||||
## avoide escaping the %N
|
||||
<script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
|
||||
<link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
|
||||
<script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>
|
||||
|
||||
|
||||
|
|
|
|||
69
webpack.config.js
Normal file
69
webpack.config.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* webpack.config.js */
|
||||
require('style-loader');
|
||||
require('css-loader');
|
||||
var path = require('path');
|
||||
|
||||
const projectName = 'rhodecode-components';
|
||||
let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js')
|
||||
|
||||
if (process.env.RC_STATIC_DIR) {
|
||||
destinationDirectory = process.env.RC_STATIC_DIR;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
// Tell Webpack which file kicks off our app.
|
||||
entry: {
|
||||
main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'),
|
||||
},
|
||||
output: {
|
||||
filename: 'rhodecode-components.js',
|
||||
path: path.resolve(destinationDirectory)
|
||||
},
|
||||
// Tell Webpack which directories to look in to resolve import statements.
|
||||
// Normally Webpack will look in node_modules by default but since we’re overriding
|
||||
// the property we’ll need to tell it to look there in addition to the
|
||||
// bower_components folder.
|
||||
resolve: {
|
||||
modules: [
|
||||
path.resolve(__dirname, 'node_modules'),
|
||||
path.resolve(__dirname, 'bower_components')
|
||||
]
|
||||
},
|
||||
// These rules tell Webpack how to process different module types.
|
||||
// Remember, *everything* is a module in Webpack. That includes
|
||||
// CSS, and (thanks to our loader) HTML.
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
// If you see a file that ends in .html, send it to these loaders.
|
||||
test: /\.html$/,
|
||||
// This is an example of chained loaders in Webpack.
|
||||
// Chained loaders run last to first. So it will run
|
||||
// polymer-webpack-loader, and hand the output to
|
||||
// babel-loader. This let's us transpile JS in our `<script>` elements.
|
||||
use: [
|
||||
{loader: 'babel-loader'},
|
||||
{loader: 'polymer-webpack-loader',
|
||||
options: {
|
||||
processStyleLinks: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
// If you see a file that ends in .js, just send it to the babel-loader.
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader'
|
||||
// Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
|
||||
// exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
|
||||
},
|
||||
// this is required because of bug:
|
||||
// https://github.com/webpack-contrib/polymer-webpack-loader/issues/49
|
||||
{
|
||||
test: /intl-messageformat.min.js/,
|
||||
use: 'imports-loader?this=>window'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue