diff --git a/README.md b/README.md index ff5c39074a2..6d0abcc5bb8 100644 --- a/README.md +++ b/README.md @@ -96,10 +96,14 @@ npm install @material/ripple Then import the ES2015 file for @material/ripple into your application, and initialize an MDCRipple with a DOM element: ```js -import {MDCRipple} from '@material/ripple'; +import {MDCRipple} from '@material/ripple/index'; const ripple = new MDCRipple(document.querySelector('.foo-button')); ``` +> Note: Import `@material/ripple/index` if you wish to transpile MDC Web's ES2015 sources as part of your build process. +> If your build toolchain is configured to only transpile your own sources, import `@material/ripple` instead, which will +> reference the distributed UMD module instead. + This will produce a Material Design ripple on the button! diff --git a/docs/getting-started.md b/docs/getting-started.md index 3c7cc1d513e..b325ecb49f9 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -7,9 +7,9 @@ path: /docs/getting-started/ # Getting Started -## Quick Start +## Quick Start (CDN) -To try Material Components for the web with minimal setup, load the CSS and JS from unpkg: +To try Material Components for the web with minimal setup, load the precompiled all-in-one CSS and JS bundles from unpkg: ```html https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css @@ -28,11 +28,27 @@ Then include MDC markup... mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button')); ``` -However, it is highly recommended to install Material Components for the web via npm and consume its ES2015 modules and Sass directly. This is outlined in the steps below. +## Installing Locally -## Using MDC Web with ES2015 and Sass +Material Components for the web can be installed locally using npm. It is available as a single all-in-one package: -This section walks you through how to [install MDC Web Node modules](https://www.npmjs.com/org/material), and bundle the Sass and JavaScript from those Node modules in your [webpack](https://webpack.js.org/) configuration. +``` +npm i material-components-web +``` + +...or as individual components: + +``` +npm i @material/button @material/ripple +``` + +Each package provides precompiled CSS and JS under its `dist` folder. The precompiled JS is converted to UMD format and is consumable directly by browsers or within any workflow that expects to consume ES5. Referencing `@material/foo` within a Node.js context will automatically reference the precompiled JS under `dist`. + +However, for optimal results, we recommend consuming MDC Web's ES2015 modules and Sass directly. This is outlined in the steps below. + +## Using MDC Web with Sass and ES2015 + +This section walks through how to [install MDC Web Node modules](https://www.npmjs.com/org/material), and bundle the Sass and JavaScript from those Node modules in your [webpack](https://webpack.js.org/) configuration. > Note: This guide assumes you have Node.js and npm installed locally. @@ -325,10 +341,14 @@ npm install --save-dev @material/ripple We need to tell our `app.js` to import the ES2015 file for `@material/ripple`. We also need to initialize an `MDCRipple` with a DOM element. Replace your “hello world” version of `app.js` with this code: ```js -import {MDCRipple} from '@material/ripple'; +import {MDCRipple} from '@material/ripple/index'; const ripple = new MDCRipple(document.querySelector('.foo-button')); ``` +> Note: We explicitly reference `index` within each MDC Web package in order to import the ES2015 source directly. +> This allows for tree-shaking and avoiding duplicate code for common dependencies (e.g. Ripple). +> However, it requires transpiling the MDC Web modules using the tools installed in Step 3. + Now run `npm start` again and open http://localhost:8080. You should see a Material Design ripple on the button! diff --git a/docs/importing-js.md b/docs/importing-js.md index 5df59ab7ae7..4e70f3b65e7 100644 --- a/docs/importing-js.md +++ b/docs/importing-js.md @@ -12,13 +12,29 @@ Most components ship with Component / Foundation classes which are used to provi ## ES2015 -```javascript +```js import {MDCFoo, MDCFooFoundation} from '@material/foo'; ``` +Note that MDC Web's packages point `main` to pre-compiled UMD modules under `dist` to maximize compatibility. +Build toolchains often assume that dependencies under `node_modules` are already ES5, and thus skip transpiling them. + +However, if you want to take advantage of tree-shaking and dependency sharing within MDC Web's code to reduce the size +of your built assets, you will want to explicitly reference the package's `index.js`, which contains the ES2015+ source: + +```js +import {MDCFoo, MDCFooFoundation} from '@material/foo/index'; +``` + +Note that in this case, you must ensure your build toolchain is configured to process and transpile MDC Web's modules +as well as your own. You will also need to include babel's +[`transform-object-assign`](https://www.npmjs.com/package/babel-plugin-transform-object-assign) plugin for IE 11 support. + +See the [Getting Started guide](getting-started.md) for more details on setting up an environment. + ## CommonJS -```javascript +```js const mdcFoo = require('mdc-foo'); const MDCFoo = mdcFoo.MDCFoo; const MDCFooFoundation = mdcFoo.MDCFooFoundation; @@ -26,7 +42,7 @@ const MDCFooFoundation = mdcFoo.MDCFooFoundation; ## AMD -```javascript +```js require(['path/to/mdc-foo'], mdcFoo => { const MDCFoo = mdcFoo.MDCFoo; const MDCFooFoundation = mdcFoo.MDCFooFoundation; @@ -35,21 +51,7 @@ require(['path/to/mdc-foo'], mdcFoo => { ## Global -```javascript +```js const MDCFoo = mdc.foo.MDCFoo; const MDCFooFoundation = mdc.foo.MDCFooFoundation; ``` - -## Automatic Instantiation - -```javascript -mdc.foo.MDCFoo.attachTo(document.querySelector('.mdc-foo')); -``` - -## Manual Instantiation - -```javascript -import {MDCFoo} from '@material/foo'; - -const foo = new MDCFoo(document.querySelector('.mdc-foo')); -``` diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index c48f1b0fb0f..ee44336a516 100644 --- a/packages/material-components-web/package.json +++ b/packages/material-components-web/package.json @@ -7,7 +7,7 @@ "material components", "material design" ], - "main": "index.js", + "main": "dist/material-components-web.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web" diff --git a/packages/mdc-animation/package.json b/packages/mdc-animation/package.json index fbf26435cc0..b36e6555fd8 100644 --- a/packages/mdc-animation/package.json +++ b/packages/mdc-animation/package.json @@ -8,7 +8,7 @@ "material design", "animation" ], - "main": "index.js", + "main": "dist/mdc.animation.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-auto-init/package.json b/packages/mdc-auto-init/package.json index 9cdbc4a03f8..00373b806f6 100644 --- a/packages/mdc-auto-init/package.json +++ b/packages/mdc-auto-init/package.json @@ -2,7 +2,7 @@ "name": "@material/auto-init", "description": "Declarative, easy-to-use auto-initialization for Material Components for the web", "version": "0.39.0", - "main": "index.js", + "main": "dist/mdc.autoInit.js", "license": "MIT", "repository": { "type": "git", diff --git a/packages/mdc-base/package.json b/packages/mdc-base/package.json index 05808b4fd84..f9f60812d8f 100644 --- a/packages/mdc-base/package.json +++ b/packages/mdc-base/package.json @@ -3,7 +3,7 @@ "description": "The set of base classes for Material Components for the web", "version": "0.39.0", "license": "MIT", - "main": "index.js", + "main": "dist/mdc.base.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json index de1dcf9f7da..de33e2912b2 100644 --- a/packages/mdc-checkbox/package.json +++ b/packages/mdc-checkbox/package.json @@ -8,7 +8,7 @@ "material design", "checkbox" ], - "main": "index.js", + "main": "dist/mdc.checkbox.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-chips/package.json b/packages/mdc-chips/package.json index b1f251059c5..f4e3cfc3204 100644 --- a/packages/mdc-chips/package.json +++ b/packages/mdc-chips/package.json @@ -3,6 +3,7 @@ "description": "The Material Components for the Web chips component", "version": "0.40.0", "license": "MIT", + "main": "dist/mdc.chips.js", "keywords": [ "material components", "material design", diff --git a/packages/mdc-dialog/package.json b/packages/mdc-dialog/package.json index 445e8b2ad07..5cb19667a12 100644 --- a/packages/mdc-dialog/package.json +++ b/packages/mdc-dialog/package.json @@ -9,7 +9,7 @@ "dialog", "modal" ], - "main": "index.js", + "main": "dist/mdc.dialog.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-dom/package.json b/packages/mdc-dom/package.json index 9ab3b2513ab..4eaffc82c66 100644 --- a/packages/mdc-dom/package.json +++ b/packages/mdc-dom/package.json @@ -3,7 +3,7 @@ "description": "DOM manipulation utilities for Material Components for the web", "version": "0.40.0", "license": "MIT", - "main": "index.js", + "main": "dist/mdc.dom.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-drawer/package.json b/packages/mdc-drawer/package.json index 474f46dcaea..e491ca0421b 100644 --- a/packages/mdc-drawer/package.json +++ b/packages/mdc-drawer/package.json @@ -9,7 +9,7 @@ "navigation", "drawer" ], - "main": "index.js", + "main": "dist/mdc.drawer.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json index 2d3b11254cf..7e4ad7532a2 100644 --- a/packages/mdc-floating-label/package.json +++ b/packages/mdc-floating-label/package.json @@ -9,7 +9,7 @@ "floatinglabel", "floating label" ], - "main": "index.js", + "main": "dist/mdc.floatingLabel.js", "repository": { "type": "git", "url": "git+https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-form-field/package.json b/packages/mdc-form-field/package.json index b5dc72526fa..d263b58b56d 100644 --- a/packages/mdc-form-field/package.json +++ b/packages/mdc-form-field/package.json @@ -8,7 +8,7 @@ "material design", "form" ], - "main": "index.js", + "main": "dist/mdc.formField.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-grid-list/package.json b/packages/mdc-grid-list/package.json index 3f0f2b6ab29..79fdabdafc2 100644 --- a/packages/mdc-grid-list/package.json +++ b/packages/mdc-grid-list/package.json @@ -3,6 +3,7 @@ "version": "0.40.0", "description": "The Material Components for the web grid list component", "license": "MIT", + "main": "dist/mdc.gridList.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-icon-button/package.json b/packages/mdc-icon-button/package.json index a47b0a80a69..5ec07dc6a5f 100644 --- a/packages/mdc-icon-button/package.json +++ b/packages/mdc-icon-button/package.json @@ -3,6 +3,7 @@ "description": "The Material Components for the web icon button component", "version": "0.40.0", "license": "MIT", + "main": "dist/mdc.iconButton.js", "keywords": [ "material components", "material design", diff --git a/packages/mdc-icon-toggle/package.json b/packages/mdc-icon-toggle/package.json index 985d5848a38..5894ced1c01 100644 --- a/packages/mdc-icon-toggle/package.json +++ b/packages/mdc-icon-toggle/package.json @@ -8,7 +8,7 @@ "material design", "icon toggle" ], - "main": "index.js", + "main": "dist/mdc.iconToggle.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-line-ripple/package.json b/packages/mdc-line-ripple/package.json index 3692b5d3ad9..9856a64de79 100644 --- a/packages/mdc-line-ripple/package.json +++ b/packages/mdc-line-ripple/package.json @@ -9,7 +9,7 @@ "lineripple", "line-ripple" ], - "main": "index.js", + "main": "dist/mdc.lineRipple.js", "repository": { "type": "git", "url": "git+https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-linear-progress/package.json b/packages/mdc-linear-progress/package.json index f58043cb7f1..3c452ee1d9b 100644 --- a/packages/mdc-linear-progress/package.json +++ b/packages/mdc-linear-progress/package.json @@ -3,6 +3,7 @@ "description": "The Material Components for the web linear progress indicator component", "version": "0.40.0", "license": "MIT", + "main": "dist/mdc.linearProgress.js", "keywords": [ "material components", "material design", diff --git a/packages/mdc-list/package.json b/packages/mdc-list/package.json index c95231e2858..7f252313f60 100644 --- a/packages/mdc-list/package.json +++ b/packages/mdc-list/package.json @@ -3,6 +3,7 @@ "description": "The Material Components for the web list component", "version": "0.40.0", "license": "MIT", + "main": "dist/mdc.list.js", "keywords": [ "material components", "material design", diff --git a/packages/mdc-menu-surface/package.json b/packages/mdc-menu-surface/package.json index 88c0ab4f19b..8c56b7313ad 100644 --- a/packages/mdc-menu-surface/package.json +++ b/packages/mdc-menu-surface/package.json @@ -8,7 +8,7 @@ "material design", "menu surface" ], - "main": "index.js", + "main": "dist/mdc.menuSurface.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-menu/package.json b/packages/mdc-menu/package.json index 115f2cf7e07..1a746546368 100644 --- a/packages/mdc-menu/package.json +++ b/packages/mdc-menu/package.json @@ -8,7 +8,7 @@ "material design", "menu" ], - "main": "index.js", + "main": "dist/mdc.menu.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-notched-outline/package.json b/packages/mdc-notched-outline/package.json index c8e9ff039bf..6b715c822a2 100644 --- a/packages/mdc-notched-outline/package.json +++ b/packages/mdc-notched-outline/package.json @@ -9,7 +9,7 @@ "notchedoutline", "notched outline" ], - "main": "index.js", + "main": "dist/mdc.notchedOutline.js", "repository": { "type": "git", "url": "git+https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-radio/package.json b/packages/mdc-radio/package.json index dcf5dbe4de9..ebecbab0a5e 100644 --- a/packages/mdc-radio/package.json +++ b/packages/mdc-radio/package.json @@ -8,7 +8,7 @@ "material design", "radio" ], - "main": "index.js", + "main": "dist/mdc.radio.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-ripple/package.json b/packages/mdc-ripple/package.json index 004b4f793b8..8fe7a3df22c 100644 --- a/packages/mdc-ripple/package.json +++ b/packages/mdc-ripple/package.json @@ -8,7 +8,7 @@ "material design", "ripple" ], - "main": "index.js", + "main": "dist/mdc.ripple.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-select/package.json b/packages/mdc-select/package.json index 5ffbcb1eec4..93f1ea39dcf 100644 --- a/packages/mdc-select/package.json +++ b/packages/mdc-select/package.json @@ -9,7 +9,7 @@ "select", "multi select" ], - "main": "index.js", + "main": "dist/mdc.select.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-selection-control/package.json b/packages/mdc-selection-control/package.json index cc71cbf5916..a30bae292e2 100644 --- a/packages/mdc-selection-control/package.json +++ b/packages/mdc-selection-control/package.json @@ -3,7 +3,7 @@ "description": "The set of base classes for Material selection controls", "version": "0.40.0", "license": "MIT", - "main": "index.js", + "main": "dist/mdc.selectionControl.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-slider/package.json b/packages/mdc-slider/package.json index e08da3ed61f..dbe506a187d 100644 --- a/packages/mdc-slider/package.json +++ b/packages/mdc-slider/package.json @@ -2,7 +2,7 @@ "name": "@material/slider", "version": "0.40.0", "description": "The Material Components for the web slider component", - "main": "index.js", + "main": "dist/mdc.slider.js", "license": "MIT", "repository": { "type": "git", diff --git a/packages/mdc-snackbar/package.json b/packages/mdc-snackbar/package.json index c800042331d..1ad7099b5ab 100644 --- a/packages/mdc-snackbar/package.json +++ b/packages/mdc-snackbar/package.json @@ -8,7 +8,7 @@ "material design", "snackbar" ], - "main": "index.js", + "main": "dist/mdc.snackbar.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-switch/package.json b/packages/mdc-switch/package.json index 0ac4c48926a..8b30cd034ba 100644 --- a/packages/mdc-switch/package.json +++ b/packages/mdc-switch/package.json @@ -8,7 +8,7 @@ "material design", "switch" ], - "main": "index.js", + "main": "dist/mdc.switch.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-tab-bar/package.json b/packages/mdc-tab-bar/package.json index b5a00bc42dd..6be3a43a57d 100644 --- a/packages/mdc-tab-bar/package.json +++ b/packages/mdc-tab-bar/package.json @@ -9,7 +9,7 @@ "tab", "bar" ], - "main": "index.js", + "main": "dist/mdc.tabBar.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-tab-indicator/package.json b/packages/mdc-tab-indicator/package.json index 8d6c496cfbb..9d033d5d65f 100644 --- a/packages/mdc-tab-indicator/package.json +++ b/packages/mdc-tab-indicator/package.json @@ -9,7 +9,7 @@ "tab", "indicator" ], - "main": "index.js", + "main": "dist/mdc.tabIndicator.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-tab-scroller/package.json b/packages/mdc-tab-scroller/package.json index 4b4b005c433..31ebcc368df 100644 --- a/packages/mdc-tab-scroller/package.json +++ b/packages/mdc-tab-scroller/package.json @@ -9,7 +9,7 @@ "tab", "scroller" ], - "main": "index.js", + "main": "dist/mdc.tabScroller.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-tab/package.json b/packages/mdc-tab/package.json index 539c546bda7..96b7483c96a 100644 --- a/packages/mdc-tab/package.json +++ b/packages/mdc-tab/package.json @@ -8,11 +8,11 @@ "material design", "tab" ], - "main": "index.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" }, + "main": "dist/mdc.tab.js", "dependencies": { "@material/base": "^0.39.0", "@material/ripple": "^0.40.0", diff --git a/packages/mdc-tabs/package.json b/packages/mdc-tabs/package.json index 929beea2c36..148a7bb3a59 100644 --- a/packages/mdc-tabs/package.json +++ b/packages/mdc-tabs/package.json @@ -3,6 +3,7 @@ "version": "0.40.0", "description": "The Material Components for the web tabs component", "license": "MIT", + "main": "dist/mdc.tabs.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json index 5c75c59b5d6..5a3835d0b75 100644 --- a/packages/mdc-textfield/package.json +++ b/packages/mdc-textfield/package.json @@ -9,7 +9,7 @@ "textfield", "text field" ], - "main": "index.js", + "main": "dist/mdc.textfield.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-toolbar/package.json b/packages/mdc-toolbar/package.json index 3e85f2b884d..028ca52452c 100644 --- a/packages/mdc-toolbar/package.json +++ b/packages/mdc-toolbar/package.json @@ -3,6 +3,7 @@ "version": "0.40.0", "description": "The Material Components for the web toolbar component", "license": "MIT", + "main": "dist/mdc.toolbar.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/packages/mdc-top-app-bar/package.json b/packages/mdc-top-app-bar/package.json index 72b723ab698..d8cc3f79310 100644 --- a/packages/mdc-top-app-bar/package.json +++ b/packages/mdc-top-app-bar/package.json @@ -3,6 +3,7 @@ "version": "0.40.0", "description": "The Material Components for the web top app bar component", "license": "MIT", + "main": "dist/mdc.topAppBar.js", "repository": { "type": "git", "url": "https://github.com/material-components/material-components-web.git" diff --git a/scripts/cp-pkgs.js b/scripts/cp-pkgs.js index 41fa8114730..ff8cdc3d199 100644 --- a/scripts/cp-pkgs.js +++ b/scripts/cp-pkgs.js @@ -30,6 +30,7 @@ const path = require('path'); const fs = require('fs'); const cpFile = require('cp-file'); const toSlugCase = require('to-slug-case'); +const {spawnSync} = require('child_process'); const {sync: globSync} = require('glob'); const PKG_RE = /(?:material\-components\-web)|(?:mdc\.[a-zA-Z\-]+)/; @@ -42,10 +43,19 @@ const isValidCwd = ( if (!isValidCwd) { console.error( - 'Invalid CWD. Please ensure you are running this from the root of the repo, ' + - 'and that you have run `npm run dist`' + 'Invalid CWD. Please ensure you are running this from the root of the repo, and that you have run `npm run dist`' ); - process.exit(0); + process.exit(1); +} + +function cleanPkgDistDirs() { + const statuses = globSync('packages/*/dist').map( + (distPath) => spawnSync('rm', ['-r', distPath], {stdio: 'inherit'}).status); + + if (statuses.find((status) => status > 0)) { + console.error('Failed to clean package dist folders prior to copying'); + process.exit(1); + } } function getAssetEntry(asset) { @@ -67,6 +77,8 @@ function cpAsset(asset) { return cpFile(asset, destDir).then(() => console.log(`cp ${asset} -> ${destDir}`)); } +cleanPkgDistDirs(); + Promise.all(globSync('build/*.{css,js}').map(cpAsset)).catch((err) => { console.error(`Error encountered copying assets: ${err}`); process.exit(1); diff --git a/scripts/pre-release.sh b/scripts/pre-release.sh index 557c6b6b513..d1a76fc24b1 100755 --- a/scripts/pre-release.sh +++ b/scripts/pre-release.sh @@ -64,6 +64,10 @@ log "Moving built assets to package directories..." node scripts/cp-pkgs.js echo "" +log "Verifying that all packages are correctly pointing main to dist..." +node scripts/verify-pkg-main.js +echo "" + log "Pre-release steps done! Next, continue with the Release step in the Release Process documentation:" echo "https://github.com/material-components/material-components-web/blob/master/docs/open_source/release-process.md#release" echo "" diff --git a/scripts/verify-pkg-main.js b/scripts/verify-pkg-main.js new file mode 100644 index 00000000000..f6a3d3c7433 --- /dev/null +++ b/scripts/verify-pkg-main.js @@ -0,0 +1,66 @@ +/** + * @license + * Copyright 2018 Google Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +const fs = require('fs'); +const path = require('path'); +const {sync: globSync} = require('glob'); + +const isValidCwd = fs.existsSync('packages') && fs.existsSync(path.join('packages', 'material-components-web', 'dist')); + +if (!isValidCwd) { + console.error( + 'Invalid CWD. Please ensure you are running this from the root of the repo, and that you have run ' + + '`npm run dist` and `node scripts/cp-pkgs.js`' + ); + process.exit(1); +} + +let invalidMains = 0; +globSync('packages/*/package.json').forEach((jsonPath) => { + const packageInfo = JSON.parse(fs.readFileSync(jsonPath)); + if (!packageInfo.main) { + return; + } + + const mainPath = path.join(path.dirname(jsonPath), packageInfo.main); + let isInvalid = false; + if (mainPath.indexOf('dist') < 0) { + isInvalid = true; + console.error(`${jsonPath} main property does not reference a file under dist`); + } + if (!fs.existsSync(mainPath)) { + isInvalid = true; + console.error(`${jsonPath} main property points to nonexistent ${mainPath}`); + } + + if (isInvalid) { + // Multiple checks could have failed, but only increment the counter once for one package. + invalidMains++; + } +}); + +if (invalidMains > 0) { + console.error(`${invalidMains} incorrect main property values found; please fix.`); +} else { + console.log('Success: All packages with main properties reference valid files under dist!'); +} diff --git a/test/unit/mdc-animation/mdc-animation.test.js b/test/unit/mdc-animation/mdc-animation.test.js index d196a8d1337..2d9a84d59b1 100644 --- a/test/unit/mdc-animation/mdc-animation.test.js +++ b/test/unit/mdc-animation/mdc-animation.test.js @@ -24,8 +24,7 @@ import {assert} from 'chai'; import td from 'testdouble'; -import {getCorrectEventName} from '../../../packages/mdc-animation'; -import {getCorrectPropertyName} from '../../../packages/mdc-animation'; +import {getCorrectPropertyName, getCorrectEventName} from '../../../packages/mdc-animation/index'; // Has no properties without a prefix const legacyWindowObj = td.object({ diff --git a/test/unit/mdc-auto-init/mdc-auto-init.test.js b/test/unit/mdc-auto-init/mdc-auto-init.test.js index 15a6cf4793f..c531ab266ba 100644 --- a/test/unit/mdc-auto-init/mdc-auto-init.test.js +++ b/test/unit/mdc-auto-init/mdc-auto-init.test.js @@ -24,7 +24,7 @@ import bel from 'bel'; import td from 'testdouble'; import {assert} from 'chai'; -import mdcAutoInit from '../../../packages/mdc-auto-init'; +import mdcAutoInit from '../../../packages/mdc-auto-init/index'; class FakeComponent { static attachTo(node) { diff --git a/test/unit/mdc-base/component.test.js b/test/unit/mdc-base/component.test.js index a463bc8d8fe..13c5daa9d3e 100644 --- a/test/unit/mdc-base/component.test.js +++ b/test/unit/mdc-base/component.test.js @@ -25,7 +25,7 @@ import {assert} from 'chai'; import domEvents from 'dom-events'; import td from 'testdouble'; -import {MDCComponent} from '../../../packages/mdc-base'; +import {MDCComponent} from '../../../packages/mdc-base/index'; class FakeComponent extends MDCComponent { get root() { diff --git a/test/unit/mdc-base/foundation.test.js b/test/unit/mdc-base/foundation.test.js index 5fd3314e5b6..f8a75a75fc8 100644 --- a/test/unit/mdc-base/foundation.test.js +++ b/test/unit/mdc-base/foundation.test.js @@ -22,7 +22,7 @@ */ import {assert} from 'chai'; -import {MDCFoundation} from '../../../packages/mdc-base'; +import {MDCFoundation} from '../../../packages/mdc-base/index'; class FakeFoundation extends MDCFoundation { get adapter() { diff --git a/test/unit/mdc-checkbox/mdc-checkbox.test.js b/test/unit/mdc-checkbox/mdc-checkbox.test.js index 1eda6d94914..107f643dada 100644 --- a/test/unit/mdc-checkbox/mdc-checkbox.test.js +++ b/test/unit/mdc-checkbox/mdc-checkbox.test.js @@ -28,8 +28,8 @@ import td from 'testdouble'; import {supportsCssVariables} from '../../../packages/mdc-ripple/util'; import {createMockRaf} from '../helpers/raf'; -import {MDCCheckbox} from '../../../packages/mdc-checkbox'; -import {MDCRipple} from '../../../packages/mdc-ripple'; +import {MDCCheckbox} from '../../../packages/mdc-checkbox/index'; +import {MDCRipple} from '../../../packages/mdc-ripple/index'; import {strings} from '../../../packages/mdc-checkbox/constants'; import {getMatchesProperty} from '../../../packages/mdc-ripple/util'; diff --git a/test/unit/mdc-chips/mdc-chip-set.test.js b/test/unit/mdc-chips/mdc-chip-set.test.js index 12fe0a253ba..36c51d54310 100644 --- a/test/unit/mdc-chips/mdc-chip-set.test.js +++ b/test/unit/mdc-chips/mdc-chip-set.test.js @@ -26,8 +26,8 @@ import {assert} from 'chai'; import domEvents from 'dom-events'; import td from 'testdouble'; -import {MDCChipSet, MDCChipSetFoundation} from '../../../packages/mdc-chips/chip-set'; -import {MDCChipFoundation} from '../../../packages/mdc-chips/chip'; +import {MDCChipSet, MDCChipSetFoundation} from '../../../packages/mdc-chips/chip-set/index'; +import {MDCChipFoundation} from '../../../packages/mdc-chips/chip/index'; const getFixture = () => bel`