Skip to content

Commit

Permalink
Revert "chore: fix maintainers images being squished (#576)" (#577)
Browse files Browse the repository at this point in the history 
This reverts commit 701a082.
  • Loading branch information
@codymikol
codymikol authored Oct 22, 2023
1 parent 701a082 commit 908e03c
Showing 1 changed file with 50 additions and 71 deletions.
121 changes: 50 additions & 71 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,14 @@ yarn `yarn add -D karma-webpack`
<h2 align="center">Usage</h2>

**karma.conf.js**

```js
module.exports = (config) => {
config.set({
// ... normal karma configuration

// make sure to include webpack as a framework
frameworks: ['mocha', 'webpack'],

plugins: [
'karma-webpack',
'karma-mocha',
Expand All @@ -41,12 +40,12 @@ module.exports = (config) => {
files: [
// all files ending in ".test.js"
// !!! use watched: false as we use webpacks watch
{pattern: 'test/**/*.test.js', watched: false}
{ pattern: 'test/**/*.test.js', watched: false }
],

preprocessors: {
// add webpack as preprocessor
'test/**/*.test.js': ['webpack']
'test/**/*.test.js': [ 'webpack' ]
},

webpack: {
Expand Down Expand Up @@ -96,30 +95,25 @@ const defaultWebpackOptions = {

### How it works

This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles
and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during
autoWatch=true.
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.

The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of
this one build process.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.

### Webpack typescript support

By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript
it works out of the box.
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.

If you have a different need you can override by settig `webpack.transformPath`

```js
// this is the by default applied transformPath
webpack: {
transformPath: (filepath) => {
// force *.js files by default
const info = path.parse(filepath);
return `${path.join(info.dir, info.name)}.js`;
},
}
,
// force *.js files by default
const info = path.parse(filepath);
return `${path.join(info.dir, info.name)}.js`;
},
},
```

### `Source Maps`
Expand All @@ -133,113 +127,98 @@ npm i -D karma-sourcemap-loader
And then add it to your preprocessors.

**karma.conf.js**

```js
preprocessors: {
'test/test_index.js'
:
['webpack', 'sourcemap']
'test/test_index.js': [ 'webpack', 'sourcemap' ]
}
```

And tell `webpack` to generate sourcemaps.

**webpack.config.js**

```js
webpack: {
// ...
devtool: 'inline-source-map'
}
```

<style>

.maintainer-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.maintainer {
display: flex;
flex-direction: column;
padding: 8px;
}

.maintainer > a {
padding-top: 8px;
}

</style>

<h2 align="center">Current Maintainers</h2>

<div class="maintainer-container">
<div class="maintainer">
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
<a href="http://codymikol.com">Cody Mikol</a>
</div>
</div>

<table>
<tbody>
<tr>
<td>
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
<br>
<a href="http://codymikol.com">Cody Mikol</a>
</td>
</tr>
<tbody>
</table>

<h2 align="center">Previous Maintainers</h2>

Previous maintainers of the `karma-webpack` plugin that have done such amazing work to get it to where it is today. 🎉🎉🎉
Previous maintainers of the `karma-webpack` plugin that have done such amazing work to get it to where it is today.

<div class="maintainer-container">
<div class="maintainer">
<table class="maintainers">
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars0.githubusercontent.com/u/7922109?v=4&s=150">
<br>
<a href="https://github.com/ryanclark">Ryan Clark</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/2045543?v=4&s=150">
<br>
<a href="https://github.com/AprilArcus">April Arcus</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/4650931?v=3&s=150">
</br>
<a href="https://github.com/MikaAK">Mika Kalathil</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/8420490?v=3&s=150">
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/1919664?v=3&s=150">
<a href="https://github.com/goldhand">Will Farley</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/1307954?v=3&s=150">
<a href="https://github.com/DanielaValero">Daniela Valero</a>
</div>
</td>
</tr>
<tr>
<div class="maintainer">
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/122108?v=3&s=150">
<a href="https://github.com/jon301">Jonathan Trang</a>
</div>
<div class="maintainer">
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/3285723?v=3&s=150">
<a href="https://github.com/carlos-">Carlos Morales</a>
</div>
</div>
</td>
</tr>
<tbody>
</table>


[npm]: https://img.shields.io/npm/v/karma-webpack.svg

[npm-url]: https://npmjs.com/package/karma-webpack

[node]: https://img.shields.io/node/v/karma-webpack.svg

[node-url]: https://nodejs.org

[cover]: https://codecov.io/gh/webpack-contrib/karma-webpack/branch/master/graph/badge.svg

[cover-url]: https://codecov.io/gh/webpack-contrib/karma-webpack

0 comments on commit 908e03c

Please sign in to comment.