This repository was archived by the owner on Jan 14, 2025. It is now read-only.
test: Setup dev server for rendering JS and Sass #2
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <html> | ||
| <a href="temporary-package">Temporary Package</a> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <html> | ||
|
There was a problem hiding this comment. Add Without it, all browsers will go into "quirks mode" instead of "standards mode", and things will render differently. (The HTML5 spec also says |
||
| <head> | ||
|
There was a problem hiding this comment. Re-indent this file (everything inside |
||
| <link rel="stylesheet" href="bundle.css"> | ||
| <script src="bundle.js" async></script> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
|
There was a problem hiding this comment. How did a tab character |
||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import TemporaryClass from '../../../packages/temporary-package'; | ||
|
|
||
| const temporary = new TemporaryClass(); | ||
| ReactDOM.render(( | ||
| <div>{temporary.returnOne()}</div> | ||
| ), document.getElementById('app')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| body { | ||
| color: blue; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| module.exports.sassBundle = function(sassInput, cssOutput) { | ||
|
There was a problem hiding this comment. I think cutting this down from sassBundle and javaScript bundle into just 1 xyzBundle method will cut down the compile time. When you pass a new config into the array in multicompiler mode, webpack thinks it is a new bundle. Yes we want the css file to be separate, but I think by passing the The only drawback(up for debate) to having 1 bundle is that you must import sass files into the JS files. But I think this improves build times. |
||
| return { | ||
| entry: sassInput, | ||
| output: { | ||
| // This is necessary for webpack to compile | ||
| // But we never use style-bundle.js | ||
| filename: 'style-bundle.js', | ||
| }, | ||
| module: { | ||
| rules: [{ | ||
| test: /\.scss$/, | ||
| use: [{ | ||
| loader: 'file-loader', | ||
| options: { | ||
| name: cssOutput, | ||
| }, | ||
| }, | ||
| { | ||
| loader: 'extract-loader' | ||
| }, | ||
| { | ||
| loader: 'css-loader' | ||
| }, | ||
| { | ||
| loader: 'sass-loader', | ||
| options: { | ||
| importer: function(url, prev) { | ||
| if (url.indexOf('@material') === 0) { | ||
| var filePath = url.split('@material')[1]; | ||
| var nodeModulePath = `./node_modules/@material/${filePath}`; | ||
| return { | ||
| file: require('path').resolve(nodeModulePath) | ||
| }; | ||
| } | ||
| return { | ||
| file: url | ||
| }; | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }] | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| module.exports.javaScriptBundle = function(input, output) { | ||
| return { | ||
| entry: input, | ||
| output: { | ||
| filename: output | ||
| }, | ||
| module: { | ||
| loaders: [{ | ||
| test: /\.js$/, | ||
| loader: 'babel-loader', | ||
| query: { | ||
| presets: ['es2015', 'react'] | ||
| } | ||
| }] | ||
| } | ||
| } | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| const {sassBundle, javaScriptBundle} = require('./webpack-bundles'); | ||
|
|
||
| module.exports = [ | ||
| sassBundle('./test/screenshot/temporary-package/temporary-package.scss', 'temporary-package/bundle.css'), | ||
|
|
||
| javaScriptBundle('./test/screenshot/temporary-package/index.js', 'temporary-package/bundle.js') | ||
|
|
||
| ]; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we can do the --content-base option here. I think we need the webpack.config.js file to live in the root. I don't think it transform the files in the packages dir. Try importing a React Component into the screenshot tests, and I don't think you'll get JSX errors.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nope!