Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit ebefb78

Browse files
acdvorakacdvorak
authored
feat(package): Convert JS to TypeScript (#4396)
Refs #4225 Removes deprecated package `mdc-icon-toggle` from the all-in-one JS bundle.
1 parent 6d6bff8 commit ebefb78

File tree

3 files changed

+81
-67
lines changed

3 files changed

+81
-67
lines changed

‎packages/material-components-web/index.js renamed to ‎packages/material-components-web/index.ts

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,33 @@
2222
*/
2323

2424
import autoInit from '@material/auto-init/index';
25-
import * as base from '@material/base/index.ts';
25+
import * as base from '@material/base/index';
2626
import * as checkbox from '@material/checkbox/index';
2727
import * as chips from '@material/chips/index';
2828
import * as dialog from '@material/dialog/index';
29-
import * as dom from '@material/dom/index.ts';
29+
import * as dom from '@material/dom/index';
3030
import * as drawer from '@material/drawer/index';
3131
import * as floatingLabel from '@material/floating-label/index';
32-
import * as formField from '@material/form-field/index.ts';
32+
import * as formField from '@material/form-field/index';
3333
import * as gridList from '@material/grid-list/index';
34-
import * as iconButton from '@material/icon-button/index.ts';
35-
import * as iconToggle from '@material/icon-toggle/index';
36-
import * as linearProgress from '@material/linear-progress/index.ts';
34+
import * as iconButton from '@material/icon-button/index';
3735
import * as lineRipple from '@material/line-ripple/index';
36+
import * as linearProgress from '@material/linear-progress/index';
3837
import * as list from '@material/list/index';
39-
import * as menu from '@material/menu/index.ts';
40-
import * as menuSurface from '@material/menu-surface/index.ts';
38+
import * as menuSurface from '@material/menu-surface/index';
39+
import * as menu from '@material/menu/index';
4140
import * as notchedOutline from '@material/notched-outline/index';
4241
import * as radio from '@material/radio/index';
43-
import * as ripple from '@material/ripple/index.ts';
42+
import * as ripple from '@material/ripple/index';
4443
import * as select from '@material/select/index';
45-
import * as selectionControl from '@material/selection-control/index.ts';
44+
import * as selectionControl from '@material/selection-control/index';
4645
import * as slider from '@material/slider/index';
4746
import * as snackbar from '@material/snackbar/index';
48-
import * as switchControl from '@material/switch/index.ts';
49-
import * as tab from '@material/tab/index';
47+
import * as switchControl from '@material/switch/index';
5048
import * as tabBar from '@material/tab-bar/index';
5149
import * as tabIndicator from '@material/tab-indicator/index';
5250
import * as tabScroller from '@material/tab-scroller/index';
51+
import * as tab from '@material/tab/index';
5352
import * as textField from '@material/textfield/index';
5453
import * as toolbar from '@material/toolbar/index';
5554
import * as topAppBar from '@material/top-app-bar/index';
@@ -62,23 +61,22 @@ autoInit.register('MDCDialog', dialog.MDCDialog);
6261
autoInit.register('MDCDrawer', drawer.MDCDrawer);
6362
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
6463
autoInit.register('MDCFormField', formField.MDCFormField);
65-
autoInit.register('MDCRipple', ripple.MDCRipple);
6664
autoInit.register('MDCGridList', gridList.MDCGridList);
6765
autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);
68-
autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
6966
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
7067
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
7168
autoInit.register('MDCList', list.MDCList);
72-
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
73-
autoInit.register('MDCRadio', radio.MDCRadio);
74-
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
75-
autoInit.register('MDCTabBar', tabBar.MDCTabBar);
76-
autoInit.register('MDCTextField', textField.MDCTextField);
7769
autoInit.register('MDCMenu', menu.MDCMenu);
7870
autoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);
71+
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
72+
autoInit.register('MDCRadio', radio.MDCRadio);
73+
autoInit.register('MDCRipple', ripple.MDCRipple);
7974
autoInit.register('MDCSelect', select.MDCSelect);
8075
autoInit.register('MDCSlider', slider.MDCSlider);
76+
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
8177
autoInit.register('MDCSwitch', switchControl.MDCSwitch);
78+
autoInit.register('MDCTabBar', tabBar.MDCTabBar);
79+
autoInit.register('MDCTextField', textField.MDCTextField);
8280
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
8381
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);
8482

@@ -95,7 +93,6 @@ export {
9593
formField,
9694
gridList,
9795
iconButton,
98-
iconToggle,
9996
lineRipple,
10097
linearProgress,
10198
list,
@@ -107,8 +104,8 @@ export {
107104
select,
108105
selectionControl,
109106
slider,
110-
switchControl,
111107
snackbar,
108+
switchControl,
112109
tab,
113110
tabBar,
114111
tabIndicator,

‎scripts/check-pkg-for-release.js

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,29 @@ const camelCase = require('camel-case');
3838
const cssom = require('cssom');
3939
const recast = require('recast');
4040

41-
const pkg = require(path.join(process.env.PWD, process.argv[process.argv.length - 1]));
41+
const CLI_PACKAGE_JSON_RELATIVE_PATH = process.argv[2];
42+
if (!CLI_PACKAGE_JSON_RELATIVE_PATH) {
43+
console.error(`Usage: node ${path.basename(process.argv[1])} packages/mdc-foo/package.json`);
44+
process.exit(1);
45+
}
46+
47+
if (!new RegExp('packages/[^/]+/package.json$').test(CLI_PACKAGE_JSON_RELATIVE_PATH)) {
48+
console.error(`Invalid argument: "${CLI_PACKAGE_JSON_RELATIVE_PATH}" is not a valid path to a package.json file.`);
49+
console.error('Expected format: packages/mdc-foo/package.json');
50+
process.exit(1);
51+
}
52+
53+
const CLI_PACKAGE_JSON = require(path.resolve(CLI_PACKAGE_JSON_RELATIVE_PATH));
54+
const REPO_PACKAGE_JSON = require(path.resolve('package.json'));
55+
56+
const WEBPACK_CONFIG_RELATIVE_PATH = 'webpack.config.js';
57+
const WEBPACK_CONFIG = require(path.resolve(WEBPACK_CONFIG_RELATIVE_PATH));
58+
59+
const MASTER_TS_RELATIVE_PATH = 'packages/material-components-web/index.ts';
60+
const MASTER_CSS_RELATIVE_PATH = 'packages/material-components-web/material-components-web.scss';
61+
const MASTER_PACKAGE_JSON_RELATIVE_PATH = 'packages/material-components-web/package.json';
62+
const MASTER_PACKAGE_JSON = require(path.resolve(MASTER_PACKAGE_JSON_RELATIVE_PATH));
4263

43-
const REPO_PKG = require(path.join(process.env.PWD, 'package.json'));
44-
const WEBPACK_CONFIG_PATH = 'webpack.config.js';
45-
const WEBPACK_CONFIG = require(path.join(process.env.PWD, WEBPACK_CONFIG_PATH));
46-
const MASTER_PKG_PATH = 'packages/material-components-web/package.json';
47-
const MASTER_CSS_PATH = 'packages/material-components-web/material-components-web.scss';
48-
const MASTER_JS_PATH = 'packages/material-components-web/index.js';
49-
const MASTER_PKG = require(path.join(process.env.PWD, MASTER_PKG_PATH));
5064
// These few MDC packages work as foundation or utility packages, and are not
5165
// directly included in webpack or the material-component-web module. But they
5266
// are necessary since other MDC packages depend on them.
@@ -81,10 +95,10 @@ main();
8195

8296
function main() {
8397
checkPublicConfigForNewComponent();
84-
if (pkg.name !== MASTER_PKG.name) {
98+
if (CLI_PACKAGE_JSON.name !== MASTER_PACKAGE_JSON.name) {
8599
checkNameIsPresentInAllowedScope();
86-
if (pkg.private) {
87-
console.log('Skipping private component', pkg.name);
100+
if (CLI_PACKAGE_JSON.private) {
101+
console.log('Skipping private component', CLI_PACKAGE_JSON.name);
88102
} else {
89103
checkDependencyAddedInWebpackConfig();
90104
checkDependencyAddedInMDCPackage();
@@ -93,22 +107,22 @@ function main() {
93107
}
94108

95109
function checkPublicConfigForNewComponent() {
96-
if (pkg.version === '0.0.0') {
97-
assert.notEqual(typeof pkg.publishConfig, 'undefined',
98-
'Please add publishConfig to' + pkg.name + '\'s package.json. Consult our ' +
110+
if (CLI_PACKAGE_JSON.version === '0.0.0') {
111+
assert.notEqual(typeof CLI_PACKAGE_JSON.publishConfig, 'undefined',
112+
'Please add publishConfig to' + CLI_PACKAGE_JSON.name + '\'s package.json. Consult our ' +
99113
'docs/authoring-components.md to ensure your component\'s package.json ' +
100114
'is well-formed.');
101-
assert.equal(pkg.publishConfig.access, 'public',
102-
'Please set publishConfig.access to "public" in ' + pkg.name + '\'s package.json. ' +
115+
assert.equal(CLI_PACKAGE_JSON.publishConfig.access, 'public',
116+
'Please set publishConfig.access to "public" in ' + CLI_PACKAGE_JSON.name + '\'s package.json. ' +
103117
'Consult our docs/authoring-components.md to ensure your component\'s package.json ' +
104118
'is well-formed.');
105119
}
106120
}
107121

108122
function checkNameIsPresentInAllowedScope() {
109123
const name = getPkgName();
110-
assert.notEqual(REPO_PKG.config['validate-commit-msg']['scope']['allowed'].indexOf(name), -1,
111-
'FAILURE: Component ' + pkg.name + ' is not added to allowed scope. Please check package.json ' +
124+
assert.notEqual(REPO_PACKAGE_JSON.config['validate-commit-msg']['scope']['allowed'].indexOf(name), -1,
125+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not added to allowed scope. Please check package.json ' +
112126
'and add ' + name + ' to config["validate-commit-msg"]["scope"]["allowed"] before commit.');
113127
}
114128

@@ -117,7 +131,7 @@ function checkDependencyAddedInWebpackConfig() {
117131
checkCSSDependencyAddedInWebpackConfig();
118132

119133
// Check if js component has been added to webpack config
120-
if (typeof(pkg.main) !== 'undefined') {
134+
if (typeof(CLI_PACKAGE_JSON.main) !== 'undefined') {
121135
checkJSDependencyAddedInWebpackConfig();
122136
}
123137
}
@@ -126,10 +140,10 @@ function checkJSDependencyAddedInWebpackConfig() {
126140
const jsconfig = WEBPACK_CONFIG.find((value) => {
127141
return value.name === 'main-js-a-la-carte';
128142
});
129-
const nameCamel = camelCase(pkg.name.replace('@material/', ''));
143+
const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
130144
assert.notEqual(typeof jsconfig.entry[nameCamel], 'undefined',
131-
'FAILURE: Component ' + pkg.name + ' javascript dependency is not added to webpack ' +
132-
'configuration. Please add ' + nameCamel + ' to ' + WEBPACK_CONFIG_PATH + '\'s js-components ' +
145+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' javascript dependency is not added to webpack ' +
146+
'configuration. Please add ' + nameCamel + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s js-components ' +
133147
'entry before commit.');
134148
}
135149

@@ -139,10 +153,10 @@ function checkCSSDependencyAddedInWebpackConfig() {
139153
const cssconfig = WEBPACK_CONFIG.find((value) => {
140154
return value.name === 'main-css-a-la-carte';
141155
});
142-
const nameMDC = pkg.name.replace('@material/', 'mdc.');
156+
const nameMDC = CLI_PACKAGE_JSON.name.replace('@material/', 'mdc.');
143157
assert.notEqual(typeof cssconfig.entry[nameMDC], 'undefined',
144-
'FAILURE: Component ' + pkg.name + ' css dependency not added to webpack ' +
145-
'configuration. Please add ' + name + ' to ' + WEBPACK_CONFIG_PATH + '\'s css ' +
158+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' css dependency not added to webpack ' +
159+
'configuration. Please add ' + name + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\'s css ' +
146160
'entry before commit.');
147161
}
148162
}
@@ -160,49 +174,52 @@ function checkDependencyAddedInMDCPackage() {
160174

161175
function checkPkgDependencyAddedInMDCPackage() {
162176
if (NOT_MCW_DEP.indexOf(getPkgName()) === -1) {
163-
assert.notEqual(typeof MASTER_PKG.dependencies[pkg.name], 'undefined',
164-
'FAILURE: Component ' + pkg.name + ' is not a denpendency for MDC Web. ' +
165-
'Please add ' + pkg.name +' to ' + MASTER_PKG_PATH + '\' dependencies before commit.');
177+
assert.notEqual(typeof MASTER_PACKAGE_JSON.dependencies[CLI_PACKAGE_JSON.name], 'undefined',
178+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not a denpendency for MDC Web. ' +
179+
'Please add ' + CLI_PACKAGE_JSON.name +' to ' + MASTER_PACKAGE_JSON_RELATIVE_PATH +
180+
'\' dependencies before commit.');
166181
}
167182
}
168183

169184
function checkCSSDependencyAddedInMDCPackage() {
170185
const name = getPkgName();
171186
const nameMDC = `mdc-${name}`;
172187
if (CSS_WHITELIST.indexOf(name) === -1 && NOT_MCW_DEP.indexOf(name) === -1) {
173-
const src = fs.readFileSync(path.join(process.env.PWD, MASTER_CSS_PATH), 'utf8');
188+
const src = fs.readFileSync(path.join(process.env.PWD, MASTER_CSS_RELATIVE_PATH), 'utf8');
174189
const cssRules = cssom.parse(src).cssRules;
175-
const cssRule = path.join(pkg.name, nameMDC);
190+
const cssRule = path.join(CLI_PACKAGE_JSON.name, nameMDC);
176191

177192
assert.notEqual(typeof cssRules.find((value) => {
178193
return value.href === cssRule;
179194
}), 'undefined',
180-
'FAILURE: Component ' + pkg.name + ' is not being imported in MDC Web. ' +
181-
'Please add ' + name + ' to ' + MASTER_CSS_PATH + ' import rule before commit.');
195+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' +
196+
'Please add ' + name + ' to ' + MASTER_CSS_RELATIVE_PATH + ' import rule before commit.');
182197
}
183198
}
184199

185200
function checkJSDependencyAddedInMDCPackage() {
186201
const NOT_IMPORTED = ['animation'];
187202
const name = getPkgName();
188-
if (typeof(pkg.main) !== 'undefined' && NOT_IMPORTED.indexOf(name) === -1 && NOT_MCW_DEP.indexOf(name) === -1) {
189-
const nameCamel = camelCase(pkg.name.replace('@material/', ''));
190-
const src = fs.readFileSync(path.join(process.env.PWD, MASTER_JS_PATH), 'utf8');
203+
if (typeof (CLI_PACKAGE_JSON.main) !== 'undefined' &&
204+
NOT_IMPORTED.indexOf(name) === -1 &&
205+
NOT_MCW_DEP.indexOf(name) === -1) {
206+
const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
207+
const src = fs.readFileSync(path.join(process.env.PWD, MASTER_TS_RELATIVE_PATH), 'utf8');
191208
const ast = recast.parse(src, {
192209
parser: {
193210
parse: (code) => parser.parse(code, {sourceType: 'module'}),
194211
},
195212
});
196213
assert(checkComponentImportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
197-
pkg.name + ' is not being imported in MDC Web. ' + 'Please add ' + nameCamel +
198-
' to '+ MASTER_JS_PATH + ' import rule before commit.');
214+
CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' + 'Please add ' + nameCamel +
215+
' to '+ MASTER_TS_RELATIVE_PATH + ' import rule before commit.');
199216
assert(checkComponentExportedAddedInMDCPackage(ast), 'FAILURE: Component ' +
200-
pkg.name + ' is not being exported in MDC Web. ' + 'Please add ' + nameCamel +
201-
' to '+ MASTER_JS_PATH + ' export before commit.');
217+
CLI_PACKAGE_JSON.name + ' is not being exported in MDC Web. ' + 'Please add ' + nameCamel +
218+
' to '+ MASTER_TS_RELATIVE_PATH + ' export before commit.');
202219
if (NOT_AUTOINIT.indexOf(name) === -1) {
203220
assert(checkAutoInitAddedInMDCPackage(ast) > 0, 'FAILURE: Component ' +
204-
pkg.name + ' seems not being auto inited in MDC Web. ' + 'Please add ' +
205-
nameCamel + ' to '+ MASTER_JS_PATH + ' autoInit statement before commit.');
221+
CLI_PACKAGE_JSON.name + ' seems not being auto inited in MDC Web. ' + 'Please add ' +
222+
nameCamel + ' to '+ MASTER_TS_RELATIVE_PATH + ' autoInit statement before commit.');
206223
}
207224
}
208225
}
@@ -213,7 +230,7 @@ function checkComponentImportedAddedInMDCPackage(ast) {
213230
'ImportDeclaration'({node}) {
214231
if (node.source) {
215232
const source = node.source.value;
216-
const pkgFile = pkg.name + '/index';
233+
const pkgFile = CLI_PACKAGE_JSON.name + '/index';
217234
// TODO: remove `.ts` when typescript rewrite is complete.
218235
if (source === pkgFile || source === pkgFile + '.ts') {
219236
isImported = true;
@@ -225,7 +242,7 @@ function checkComponentImportedAddedInMDCPackage(ast) {
225242
}
226243

227244
function checkAutoInitAddedInMDCPackage(ast) {
228-
let nameCamel = camelCase(pkg.name.replace('@material/', ''));
245+
let nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
229246
if (nameCamel === 'textfield') {
230247
nameCamel = 'textField';
231248
} else if (nameCamel === 'switch') {
@@ -250,7 +267,7 @@ function checkAutoInitAddedInMDCPackage(ast) {
250267
}
251268

252269
function checkComponentExportedAddedInMDCPackage(ast) {
253-
let nameCamel = camelCase(pkg.name.replace('@material/', ''));
270+
let nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));
254271
if (nameCamel === 'textfield') {
255272
nameCamel = 'textField';
256273
} else if (nameCamel === 'switch') {
@@ -272,7 +289,7 @@ function checkComponentExportedAddedInMDCPackage(ast) {
272289
}
273290

274291
function getPkgName() {
275-
let name = pkg.name.split('/')[1];
292+
let name = CLI_PACKAGE_JSON.name.split('/')[1];
276293
if (name === 'textfield') {
277294
// Text-field now has a dash in the name. The package cannot be changed,
278295
// since it is a lot of effort to rename npm package

‎scripts/webpack/js-bundle-factory.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ class JsBundleFactory {
125125

126126
return this.createCustomJs({
127127
bundleName: 'main-js-combined',
128-
chunks: getAbsolutePath('/packages/material-components-web/index.js'),
128+
chunks: getAbsolutePath('/packages/material-components-web/index.ts'),
129129
output: {
130130
fsDirAbsolutePath,
131131
httpDirAbsolutePath,

0 commit comments

Comments
 (0)