# @misk/common

> Misk-Web Common Libraries, Styles

Latest version **0.6.3** (published 2022-11-04) · SEE LICENSE IN https://github.com/cashapp/misk-web license · 0 weekly downloads

## Install

```sh
npm install @misk/common
pnpm add @misk/common
yarn add @misk/common
bun add @misk/common
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.3 |
| Published | 2022-11-04 |
| First published | 2018-07-09 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN https://github.com/cashapp/misk-web |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=7.8.0 |
| Dependencies | 18 |
| Unpacked size | 7.1 MB |
| Known vulnerabilities | 0 (+30 in 3 direct dependencies) |
| Install scripts | no |
| Author | CashApp/Misk-Web Authors |
| Maintainers | k9101, rmariano-sq, square-owner, adrw, adrw-ci |

## Links

- npm: https://www.npmjs.com/package/@misk/common
- Repository: https://github.com/cashapp/misk-web
- Homepage: https://github.com/cashapp/misk-web#readme
- Issues: https://github.com/cashapp/misk-web/issues
- npm.io page: https://npm.io/package/@misk/common

## Dependencies (18)

- [axios](https://npm.io/package/axios.md) 0.27.2
- [react](https://npm.io/package/react.md) 16.14.0
- [redux](https://npm.io/package/redux.md) 4.2.0
- [reselect](https://npm.io/package/reselect.md) 4.1.6
- [immutable](https://npm.io/package/immutable.md) 4.1.0
- [react-dom](https://npm.io/package/react-dom.md) 16.14.0
- [redux-saga](https://npm.io/package/redux-saga.md) 1.2.1
- [re-reselect](https://npm.io/package/re-reselect.md) 4.0.1
- [react-redux](https://npm.io/package/react-redux.md) 8.0.4
- [react-helmet](https://npm.io/package/react-helmet.md) 6.1.0
- [react-router](https://npm.io/package/react-router.md) 6.4.2
- [normalize.css](https://npm.io/package/normalize.css.md) 8.0.1
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) 4.13.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) 6.4.2
- [@blueprintjs/core](https://npm.io/package/@blueprintjs/core.md) 4.11.6
- [@blueprintjs/icons](https://npm.io/package/@blueprintjs/icons.md) 4.9.0
- [@blueprintjs/select](https://npm.io/package/@blueprintjs/select.md) 4.8.5
- [@blueprintjs/datetime](https://npm.io/package/@blueprintjs/datetime.md) 4.4.5

## Recent versions

- 0.6.3 (latest) — 2022-11-04
- 0.6.2 — 2022-11-03
- 0.6.1 — 2022-11-03
- 0.6.0 — 2022-11-03
- 0.5.1 — 2022-10-18
- 0.5.0 — 2022-10-17
- 0.4.1 — 2022-10-04
- 0.4.0 — 2022-02-15
- 0.3.3 — 2021-08-05
- 0.3.2 — 2021-08-05
- 0.3.1 — 2021-08-05
- 0.3.0 — 2021-07-29
- 0.2.0-19 — 2021-05-07
- 0.2.0-18 — 2021-05-06
- 0.2.0-17 — 2021-05-06
- … 483 more at https://npm.io/package/@misk/common/versions

## README

## Misk Common

![](https://raw.githubusercontent.com/cashapp/misk/master/misk.png)
This package provides shared libraries, externals, and styles across Misk tab repos.

## Getting Started

```bash
$ yarn add @misk/common
```

## Automatic Inclusion

- If your Webpack config builds off of a template in `@misk/dev`, `vendors.js` and `styles.js` will automatically be included in the build of that repo.
- If your Webpack config does not build off of a template in `@misk/dev`, use the Manual Inclusion steps below.

## Manual Inclusion

- Using the common vendors libraries and styles. We use [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the compiled `vendor.js` and `styles.js` files into build folder.

  - Install [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin)

    ```bash
    npm i -D copy-webpack-plugin
    ```

  - Add the following to your `webpack.config.js`

    ```Typescript
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    ...

    module.exports = {
      mode
      entry
      ...
      plugins: [
        new CopyWebpackPlugin(
          [{ from: './node_modules/@misk/common/lib' }],
          { debug: 'info', copyUnmodified: true }
        )
      ],
    }
    ```

  - Add the following to your `index.html` to import `styles.css`, `vendors.js`, and `common.js`

    ```HTML
    <body>
      <!-- Misk Common Libraries -->
      <link rel="stylesheet" type="text/css" href="/@misk/common/styles.css" />
      <script type="text/javascript" src="/@misk/common/vendors.js" preload />
      <script type="text/javascript" src="/@misk/common/common.js" preload />

      <!-- Other JS -->
    </body>
    ```

## Included Libraries

From `package.json`:

```
  @blueprintjs/core
  @blueprintjs/icons
  axios
  connected-react-router
  dayjs
  history
  immutable
  react
  react-dom
  react-helmet
  react-hot-loader
  react-redux
  react-router
  react-router-dom
  react-router-redux
  react-transition-group
  redux
  redux-saga
  skeleton-css
  styled-components
```

## Included Styles

```Typescript
  import '../node_modules/@blueprintjs/core/lib/css/blueprint.css'
  import '../node_modules/normalize.css/normalize.css'
  import '../node_modules/skeleton-css/css/skeleton.css'
  import './styles/misk-common.css'
```

## Contributing

#Adding a new package

- `yarn add {package}` to add the package to `package.json`
- Add package to `vendorExternals` in `@misk/dev/externals.js`
- Add window to javascript require include in `src/vendors.js`
- Update `README.md` with a copy of the updated `package.json` list of packages

#Adding a Cached Remote Asset

- There are sometimes cases where remote assets should be cached in order to be included in the single line imports of `vendors.js` or `styles.js`
- Add a new task to `package.json` under the metadata key `"miskCachedUrls"` with the format as follows
  ```JSON
  "miskCachedUrls": {
    "taskname": {
      "filepath": "font.css",
      "url": "https://url.com/fonts/font.css"
    },
    "taskname2": {...}
  }
  ```
  - `taskname`: string description of the remote asset
  - `filepath`: filepath within `@misk/common/cachedUrls/` to which the url will be downloaded
  - `url`: valid url that within a browser downloads or presents the desired file
- `yarn run refresh` initiates the download of all declared `"miskCachedUrls"` using code in `./refreshCachedUrls.js`
- Cached files are refreshed on every package publish to NPM

## Webpack Configs

- `webpack.config.js`: Exports common variables and functions
- `webpack.static.config.js`: Exports common styles file
- `webpack.vendor.config.js`: Exports common vendors library file

## [Releasing](https://github.com/cashapp/misk-web/blob/master/RELEASING.md)

## [Changelog (and Breaking Changes)](https://github.com/cashapp/misk-web/blob/master/CHANGELOG.md)

---
_Source: https://npm.io/package/@misk/common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._