@misk/common

v0.6.3

Published

2 years ago

Misk-Web Common Libraries, Styles

Downloads

3,557

0High
0Medium
0Low

Misk Common

This package provides shared libraries, externals, and styles across Misk tab repos.

Getting Started

$ 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 to copy the compiled vendor.js and styles.js files into build folder.

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

Add the following to your webpack.config.js

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

<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

  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
```
"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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme