diff --git a/packages/floating-label/index.tsx b/packages/floating-label/index.tsx index aaa443e32..7a5eb9c0f 100644 --- a/packages/floating-label/index.tsx +++ b/packages/floating-label/index.tsx @@ -24,7 +24,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // no mdc .d.ts // @ts-ignore -import {MDCFloatingLabelFoundation} from '@material/floating-label'; +import {MDCFloatingLabelFoundation} from '@material/floating-label/dist/mdc.floatingLabel'; export interface FloatingLabelProps extends React.LabelHTMLAttributes { className?: string; diff --git a/packages/line-ripple/index.tsx b/packages/line-ripple/index.tsx index 17f92b3d6..9eebb236f 100644 --- a/packages/line-ripple/index.tsx +++ b/packages/line-ripple/index.tsx @@ -23,7 +23,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // no mdc .d.ts // @ts-ignore -import {MDCLineRippleFoundation} from '@material/line-ripple'; +import {MDCLineRippleFoundation} from '@material/line-ripple/dist/mdc.lineRipple'; export interface LineRippleProps extends React.HTMLProps { className?: string; diff --git a/packages/text-field/Input.tsx b/packages/text-field/Input.tsx index a31bb5516..0153ab02d 100644 --- a/packages/text-field/Input.tsx +++ b/packages/text-field/Input.tsx @@ -22,7 +22,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // @ts-ignore -import {MDCTextFieldFoundation} from '@material/textfield'; +import {MDCTextFieldFoundation} from '@material/textfield/dist/mdc.textfield'; // @ts-ignore import {VALIDATION_ATTR_WHITELIST} from '@material/textfield/constants'; diff --git a/packages/text-field/helper-text/index.tsx b/packages/text-field/helper-text/index.tsx index 31efbb539..12c0bff93 100644 --- a/packages/text-field/helper-text/index.tsx +++ b/packages/text-field/helper-text/index.tsx @@ -23,7 +23,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // no mdc .d.ts // @ts-ignore -import {MDCTextFieldHelperTextFoundation} from '@material/textfield'; +import {MDCTextFieldHelperTextFoundation} from '@material/textfield/dist/mdc.textfield'; export interface HelperTextProps { 'aria-hidden': boolean; diff --git a/packages/text-field/icon/index.tsx b/packages/text-field/icon/index.tsx index f0f4e028a..9593a6cf1 100644 --- a/packages/text-field/icon/index.tsx +++ b/packages/text-field/icon/index.tsx @@ -22,7 +22,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // @ts-ignore -import {MDCTextFieldIconFoundation} from '@material/textfield'; +import {MDCTextFieldIconFoundation} from '@material/textfield/dist/mdc.textfield'; export interface IconProps extends React.HTMLProps { disabled: boolean; diff --git a/packages/text-field/index.tsx b/packages/text-field/index.tsx index dd87ea8bd..27987bf10 100644 --- a/packages/text-field/index.tsx +++ b/packages/text-field/index.tsx @@ -23,7 +23,7 @@ import * as React from 'react'; import * as classnames from 'classnames'; // no mdc .d.ts // @ts-ignore -import {MDCTextFieldFoundation, MDCTextFieldAdapter} from '@material/textfield'; +import {MDCTextFieldFoundation, MDCTextFieldAdapter} from '@material/textfield/dist/mdc.textfield'; import Input, {InputProps} from './Input'; import Icon, {IconProps} from './icon/index'; import HelperText, {HelperTextProps} from './helper-text/index'; diff --git a/packages/webpack.config.js b/packages/webpack.config.js index d7b9c07a5..f4db3f492 100644 --- a/packages/webpack.config.js +++ b/packages/webpack.config.js @@ -25,16 +25,17 @@ const {readdirSync, lstatSync} = require('fs'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const {readMaterialPackages} = require('../scripts/package-json-reader'); -const {convertToImportPaths} = require('../scripts/package-name-converter'); +const {convertToImportMDCWebPaths} = require('../scripts/package-name-converter'); +const {getDirectories} = require('../scripts/directory-reader'); const {importer} = require('./webpack.util'); const isDirectory = (source) => lstatSync(source).isDirectory(); -const containsJsFile = (source) => readdirSync(source).some((file) => path.extname(file) === '.js'); +const containsTsxFile = (source) => readdirSync(source).some((file) => path.extname(file) === '.tsx'); const getChunks = (source) => readdirSync(source) .map((filename) => path.join(source, filename)) - .filter((source) => isDirectory(source) && containsJsFile(source)) + .filter((source) => isDirectory(source) && containsTsxFile(source)) .map((directoryPath) => directoryPath.replace('packages\/', '')); const chunks = getChunks('./packages'); @@ -46,13 +47,12 @@ function getWebpackConfigs() { const webpackConfigs = []; chunks.forEach((chunk) => { - const jsPath = getAbsolutePath(`${chunk}/index.js`); + const tsxPath = getAbsolutePath(`${chunk}/index.tsx`); const cssPath = getAbsolutePath(`${chunk}/index.scss`); - webpackConfigs.push(getJavaScriptWebpackConfig(jsPath, chunk, 'commonjs')); - webpackConfigs.push(getJavaScriptWebpackConfig(jsPath, chunk, false)); - webpackConfigs.push(getJavaScriptWebpackConfig(jsPath, `${chunk}.min`, 'commonjs')); - + webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, chunk, 'commonjs')); + webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, chunk, false)); + webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, `${chunk}.min`, 'commonjs')); webpackConfigs.push(getCssWebpackConfig(cssPath, chunk)); webpackConfigs.push(getCssWebpackConfig(cssPath, `${chunk}.min`)); @@ -70,16 +70,30 @@ function getCommonWebpackParams(entryPath, chunk, {isCss, modules}) { filename: `${filename}${isCss ? '.css' : ''}${modules === false ? '.es' : ''}.js`, libraryTarget: 'umd', }, + resolve: { + extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], + }, devtool: 'source-map', }; } +function getReactMaterialExternals() { + return getDirectories('./packages').map((directory) => ( + `react-${path.parse(directory).name}` + )); +} + function getMaterialExternals() { const externals = {}; - const importPaths = convertToImportPaths(readMaterialPackages()); + const importPaths = convertToImportMDCWebPaths(readMaterialPackages()); importPaths.forEach((importPath) => { - externals[importPath] = importPath; + externals[importPath] = `${importPath}.js`; }); + + getReactMaterialExternals().forEach((path) => { + externals[`@material/${path}`] = `@material/${path}/dist/index.js`; + }); + return externals; } @@ -96,17 +110,8 @@ function getJavaScriptWebpackConfig(entryPath, chunk, modules) { ), module: { rules: [{ - test: /\.js$/, - loader: 'babel-loader', - options: { - babelrc: false, - compact: true, - presets: [['es2015', {modules}], 'react'], - plugins: [ - 'transform-class-properties', - 'transform-object-rest-spread', - ], - }, + test: /\.ts(x)?$/, + loader: 'ts-loader', }], }, plugins: [ diff --git a/scripts/screenshot-directory-reader.js b/scripts/directory-reader.js similarity index 82% rename from scripts/screenshot-directory-reader.js rename to scripts/directory-reader.js index a66aa73a1..87ec8333c 100644 --- a/scripts/screenshot-directory-reader.js +++ b/scripts/directory-reader.js @@ -7,7 +7,7 @@ const isDirectory = source => lstatSync(source).isDirectory(); const getDirectories = source => readdirSync(source).map(name => join(source, name)).filter(isDirectory); -function read( +function readScreenshotDirectory( components = [], path = resolve(__dirname, '../test/screenshot'), parentDirectory = '' @@ -20,7 +20,7 @@ function read( // recursively get sub directories const subDirectories = getDirectories(resolve(path, packageName)); if (subDirectories.length > 0) { - read(components, resolve(path, packageName), packageName); + readScreenshotDirectory(components, resolve(path, packageName), packageName); } components.push(`${parentDirectory ? parentDirectory + '/' : ''}${packageName}`); }); @@ -28,4 +28,4 @@ function read( return components; } -module.exports = {read}; +module.exports = {read: readScreenshotDirectory, getDirectories}; diff --git a/scripts/package-name-converter.js b/scripts/package-name-converter.js index 321836a75..ac2730fc0 100644 --- a/scripts/package-name-converter.js +++ b/scripts/package-name-converter.js @@ -2,8 +2,7 @@ const {basename} = require('path'); const dashedToCamel = (name) => name.replace(/-(\w)/g, (_, v) => v.toUpperCase()); -const convertToImportPaths = (packageNames) => { - const importPaths = []; +convertToImportMDCWebPaths = (packageNames) => { return packageNames.map((packageName) => { const name = basename(packageName); // this can be reverted when we change back to @material/foo-package-filename @@ -12,4 +11,4 @@ const convertToImportPaths = (packageNames) => { }); } -module.exports = {convertToImportPaths}; +module.exports = {convertToImportMDCWebPaths}; diff --git a/scripts/release/cp-pkgs.js b/scripts/release/cp-pkgs.js index a3a646f51..820da1ec0 100644 --- a/scripts/release/cp-pkgs.js +++ b/scripts/release/cp-pkgs.js @@ -80,11 +80,29 @@ function cpAsset(asset) { .then(() => console.log(`cp ${asset} -> ${destDir}`)); } -Promise.all(globSync('build/*.{css,js,map}').map(cpAsset)) - .then(() => { - console.log('done!'); - }) - .catch((err) => { +// takes assetPath, computes the destination file directory path +// and copies file into destination directory +function cpTypes(typeAsset) { + const {dir, base} = path.parse(typeAsset); + let destDir = dir.split('build/types/')[1]; + destDir = destDir.split('/'); + destDir.splice(2, 0, 'dist'); + destDir = `${destDir.join('/')}/${base}`; + return cpFile(typeAsset, destDir) + .then(() => console.log(`cp ${typeAsset} -> ${destDir}`)); +} + +async function copyPackages() { + try { + await Promise.all(globSync('build/*.{css,js,map}').map(cpAsset)); + console.log('-- Copied CSS, JS, and Map Files to Destination Directory'); + await Promise.all(globSync('build/types/packages/**/*.d.ts').map(cpTypes)); + console.log('-- Copied Typescript Type Files to Destination Directory'); + } catch (err) { console.error(`Error encountered copying assets: ${err}`); process.exit(1); - }); + } +} + +copyPackages(); + diff --git a/test/screenshot/webpack.config.js b/test/screenshot/webpack.config.js index e848ca728..d5f099d06 100644 --- a/test/screenshot/webpack.config.js +++ b/test/screenshot/webpack.config.js @@ -1,7 +1,7 @@ const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const {read: readComponents} = require('../../scripts/screenshot-directory-reader'); +const {read: readComponents} = require('../../scripts/directory-reader'); const {importer} = require('../../packages/webpack.util'); module.exports = { diff --git a/tsconfig.json b/tsconfig.json index bc8214fd5..adf929b8f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "gts/tsconfig-google.json", "compilerOptions": { - "outDir": "./build/", + "outDir": "./types/", "declaration": true, "sourceMap": true, "strictNullChecks": true, @@ -16,6 +16,6 @@ "compileOnSave": true, "exclude": [ "node_modules", - "build", + "build" ] }