Show More
@@ -1,11 +1,12 b'' | |||||
1 | const styleElement = document.createElement('dom-module'); |
|
1 | const styleElement = document.createElement('dom-module'); | |
2 | import sharedCSS from 'raw-loader!./style-polymer.css'; |
|
2 | // this will use raw-loader | |
|
3 | import sharedCSS from './style-polymer.css'; | |||
3 |
|
4 | |||
4 | styleElement.innerHTML = |
|
5 | styleElement.innerHTML = | |
5 | `<template> |
|
6 | `<template> | |
6 | <style> |
|
7 | <style> | |
7 | ${sharedCSS} |
|
8 | ${sharedCSS} | |
8 | </style> |
|
9 | </style> | |
9 | </template>`; |
|
10 | </template>`; | |
10 |
|
11 | |||
11 | styleElement.register('shared-styles'); |
|
12 | styleElement.register('shared-styles'); |
@@ -1,79 +1,83 b'' | |||||
1 | /* webpack.config.js */ |
|
1 | /* webpack.config.js */ | |
2 | require('style-loader'); |
|
2 | require('style-loader'); | |
3 | require('css-loader'); |
|
3 | require('css-loader'); | |
4 | var path = require('path'); |
|
4 | var path = require('path'); | |
5 |
|
5 | |||
6 | const projectName = 'rhodecode-components'; |
|
6 | const projectName = 'rhodecode-components'; | |
7 | let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js') |
|
7 | let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js') | |
8 |
|
8 | |||
9 | if (process.env.RC_STATIC_DIR) { |
|
9 | if (process.env.RC_STATIC_DIR) { | |
10 | destinationDirectory = process.env.RC_STATIC_DIR; |
|
10 | destinationDirectory = process.env.RC_STATIC_DIR; | |
11 | } |
|
11 | } | |
12 |
|
12 | |||
13 | // doing it this way because it seems that plugin via grunt does not pick up .babelrc |
|
13 | // doing it this way because it seems that plugin via grunt does not pick up .babelrc | |
14 | let babelRCOptions = { |
|
14 | let babelRCOptions = { | |
15 | "presets": [ |
|
15 | "presets": [ | |
16 | ["env", { |
|
16 | ["env", { | |
17 | "targets": { |
|
17 | "targets": { | |
18 | "browsers": ["last 2 versions"] |
|
18 | "browsers": ["last 2 versions"] | |
19 | } |
|
19 | } | |
20 | }] |
|
20 | }] | |
21 | ], |
|
21 | ], | |
22 | "plugins": ["transform-object-rest-spread"] |
|
22 | "plugins": ["transform-object-rest-spread"] | |
23 | } |
|
23 | } | |
24 |
|
24 | |||
25 | module.exports = { |
|
25 | module.exports = { | |
26 | // Tell Webpack which file kicks off our app. |
|
26 | // Tell Webpack which file kicks off our app. | |
27 | entry: { |
|
27 | entry: { | |
28 | main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'), |
|
28 | main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'), | |
29 | }, |
|
29 | }, | |
30 | output: { |
|
30 | output: { | |
31 | filename: 'rhodecode-components.js', |
|
31 | filename: 'rhodecode-components.js', | |
32 | path: path.resolve(destinationDirectory) |
|
32 | path: path.resolve(destinationDirectory) | |
33 | }, |
|
33 | }, | |
34 | // Tell Webpack which directories to look in to resolve import statements. |
|
34 | // Tell Webpack which directories to look in to resolve import statements. | |
35 | // Normally Webpack will look in node_modules by default but since weβre overriding |
|
35 | // Normally Webpack will look in node_modules by default but since weβre overriding | |
36 | resolve: { |
|
36 | resolve: { | |
37 | modules: [ |
|
37 | modules: [ | |
38 | path.resolve(__dirname, 'node_modules'), |
|
38 | path.resolve(__dirname, 'node_modules'), | |
39 | ] |
|
39 | ] | |
40 | }, |
|
40 | }, | |
41 | // These rules tell Webpack how to process different module types. |
|
41 | // These rules tell Webpack how to process different module types. | |
42 | // Remember, *everything* is a module in Webpack. That includes |
|
42 | // Remember, *everything* is a module in Webpack. That includes | |
43 | // CSS, and (thanks to our loader) HTML. |
|
43 | // CSS, and (thanks to our loader) HTML. | |
44 | module: { |
|
44 | module: { | |
45 | rules: [ |
|
45 | rules: [ | |
46 | { |
|
46 | { | |
|
47 | test: /style-polymer.css/, | |||
|
48 | use: 'raw-loader' | |||
|
49 | }, | |||
|
50 | { | |||
47 | // If you see a file that ends in .html, send it to these loaders. |
|
51 | // If you see a file that ends in .html, send it to these loaders. | |
48 | test: /\.html$/, |
|
52 | test: /\.html$/, | |
49 | // This is an example of chained loaders in Webpack. |
|
53 | // This is an example of chained loaders in Webpack. | |
50 | // Chained loaders run last to first. So it will run |
|
54 | // Chained loaders run last to first. So it will run | |
51 | // polymer-webpack-loader, and hand the output to |
|
55 | // polymer-webpack-loader, and hand the output to | |
52 | // babel-loader. This let's us transpile JS in our `<script>` elements. |
|
56 | // babel-loader. This let's us transpile JS in our `<script>` elements. | |
53 | use: [ |
|
57 | use: [ | |
54 | {loader: 'babel-loader', |
|
58 | {loader: 'babel-loader', | |
55 | options: babelRCOptions}, |
|
59 | options: babelRCOptions}, | |
56 | {loader: 'polymer-webpack-loader', |
|
60 | {loader: 'polymer-webpack-loader', | |
57 | options: { |
|
61 | options: { | |
58 | processStyleLinks: true, |
|
62 | processStyleLinks: true, | |
59 | } |
|
63 | } | |
60 | } |
|
64 | } | |
61 | ], |
|
65 | ], | |
62 | }, |
|
66 | }, | |
63 | { |
|
67 | { | |
64 | // If you see a file that ends in .js, just send it to the babel-loader. |
|
68 | // If you see a file that ends in .js, just send it to the babel-loader. | |
65 | test: /\.js$/, |
|
69 | test: /\.js$/, | |
66 | use: {loader: 'babel-loader', options: babelRCOptions} |
|
70 | use: {loader: 'babel-loader', options: babelRCOptions} | |
67 | // Optionally exclude node_modules from transpilation except for polymer-webpack-loader: |
|
71 | // Optionally exclude node_modules from transpilation except for polymer-webpack-loader: | |
68 | // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/ |
|
72 | // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/ | |
69 | }, |
|
73 | }, | |
70 | // this is required because of bug: |
|
74 | // this is required because of bug: | |
71 | // https://github.com/webpack-contrib/polymer-webpack-loader/issues/49 |
|
75 | // https://github.com/webpack-contrib/polymer-webpack-loader/issues/49 | |
72 | { |
|
76 | { | |
73 | test: /intl-messageformat.min.js/, |
|
77 | test: /intl-messageformat.min.js/, | |
74 | use: 'imports-loader?this=>window' |
|
78 | use: 'imports-loader?this=>window' | |
75 | } |
|
79 | } | |
76 | ] |
|
80 | ] | |
77 | }, |
|
81 | }, | |
78 | plugins: [] |
|
82 | plugins: [] | |
79 | }; |
|
83 | }; |
General Comments 0
You need to be logged in to leave comments.
Login now