fix(infrastructure): types generated directory problem (#952)

Author: 태재영

packages/dialog/package.json

@@ -4,6 +4,7 @@
   "description": "Material Components React Dialog",
   "license": "MIT",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "keywords": [
     "mdc web react",
     "material components react",

scripts/directory-reader.js

@@ -3,9 +3,11 @@ const {basename, join, resolve} = require('path');
 
 const denyList = ['images'];
 
-const isDirectory = source => lstatSync(source).isDirectory();
-const getDirectories = source =>
-  readdirSync(source).map(name => join(source, name)).filter(isDirectory);
+const isDirectory = (source) => lstatSync(source).isDirectory();
+const getDirectories = (source) =>
+  readdirSync(source)
+    .map((name) => join(source, name))
+    .filter(isDirectory);
 
 function readScreenshotDirectory(
   components = [],
@@ -20,9 +22,15 @@ function readScreenshotDirectory(
     // recursively get sub directories
     const subDirectories = getDirectories(resolve(path, packageName));
     if (subDirectories.length > 0) {
-      readScreenshotDirectory(components, resolve(path, packageName), packageName);
+      readScreenshotDirectory(
+        components,
+        resolve(path, packageName),
+        packageName
+      );
     }
-    components.push(`${parentDirectory ? parentDirectory + '/' : ''}${packageName}`);
+    components.push(
+      `${parentDirectory ? parentDirectory + '/' : ''}${packageName}`
+    );
   });
 
   return components;

scripts/package-json-reader.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 const {resolve, join} = require('path');
-const packageJson = JSON.parse(fs.readFileSync(resolve(__dirname, '../package.json'), 'utf8'));
-
+const packageJson = JSON.parse(
+  fs.readFileSync(resolve(__dirname, '../package.json'), 'utf8')
+);
 
 const readMaterialPackages = () => {
   const dependencies = [
@@ -17,5 +18,4 @@ const readMaterialPackages = () => {
   return dependencies;
 };
 
-
 module.exports = {readMaterialPackages};

scripts/package-name-converter.js

@@ -1,6 +1,7 @@
 const {basename} = require('path');
 
-const dashedToCamel = (name) => name.replace(/-(\w)/g, (_, v) => v.toUpperCase());
+const dashedToCamel = (name) =>
+  name.replace(/-(\w)/g, (_, v) => v.toUpperCase());
 
 convertToImportMDCWebPaths = (packageNames) => {
   return packageNames.map((packageName) => {
@@ -9,6 +10,6 @@ convertToImportMDCWebPaths = (packageNames) => {
     // https://github.com/material-components/material-components-web/pull/3245
     return `@material/${name}/dist/mdc.${dashedToCamel(name)}`;
   });
-}
+};
 
 module.exports = {convertToImportMDCWebPaths};

scripts/release/cp-pkgs.js

@@ -32,16 +32,15 @@ const {sync: globSync} = require('glob');
 
 const PKG_RE = /^(([a-z]*\-?)*)/;
 
-const isValidCwd = (
+const isValidCwd =
   path.basename(process.cwd()) === 'material-components-web-react' &&
   fs.existsSync('packages') &&
-  fs.existsSync('build')
-);
+  fs.existsSync('build');
 
 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 build`'
+      'and that you have run `npm run build`'
   );
   process.exit(0);
 }
@@ -54,7 +53,9 @@ function getAssetEntry(asset) {
 function cpAsset(asset) {
   const assetPkg = path.join('packages', getAssetEntry(asset));
   if (!fs.existsSync(assetPkg)) {
-    Promise.reject(new Error(`Non-existent asset package path ${assetPkg} for ${asset}`));
+    Promise.reject(
+      new Error(`Non-existent asset package path ${assetPkg} for ${asset}`)
+    );
   }
 
   let basename = path.basename(asset);
@@ -71,16 +72,20 @@ function cpAsset(asset) {
   }
 
   const destDir = path.join(assetPkg, 'dist', basename);
-  return cpFile(asset, destDir)
-    .then(() => console.log(`cp ${asset} -> ${destDir}`));
+  return cpFile(asset, destDir).then(() =>
+    console.log(`cp ${asset} -> ${destDir}`)
+  );
 }
 
 // this takes a file path to an index.d.ts file and adds an //@ts-ignore comment
 // above the MDC Web imports (any line that includes `/dist/`). We need to ignore
 // these lines since MDC Web does not have typing files
 // TODO: https://github.com/material-components/material-components-web-react/issues/574
 function addTsIgnore(filePath) {
-  const data = fs.readFileSync(filePath).toString().split('\n');
+  const data = fs
+    .readFileSync(filePath)
+    .toString()
+    .split('\n');
   const lineNumber = data.findIndex((lineText) => lineText.includes('/dist/'));
   if (lineNumber <= -1) return;
 
@@ -100,8 +105,9 @@ function cpTypes(typeAsset) {
   destDir.splice(2, 0, 'dist');
   destDir = `${destDir.join('/')}/${base}`;
   addTsIgnore(typeAsset);
-  return cpFile(typeAsset, destDir)
-    .then(() => console.log(`cp ${typeAsset} -> ${destDir}`));
+  return cpFile(typeAsset, destDir).then(() =>
+    console.log(`cp ${typeAsset} -> ${destDir}`)
+  );
 }
 
 async function copyPackages() {
@@ -117,4 +123,3 @@ async function copyPackages() {
 }
 
 copyPackages();
-

scripts/release/verify-pkg-main.js

@@ -31,37 +31,66 @@ const isValidCwd = fs.existsSync('packages');
 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`'
+      '`npm run dist` and `node scripts/cp-pkgs.js`'
   );
   process.exit(1);
 }
 
 let invalidMains = 0;
+let invalidTypes = 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;
+  let isTypesInvalid = false;
+
+  const mainPath = path.join(path.dirname(jsonPath), packageInfo.main || '');
   if (mainPath.indexOf('dist') < 0) {
     isInvalid = true;
-    console.error(`${jsonPath} main property does not reference a file under dist`);
+    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}`);
+    console.error(
+      `${jsonPath} main property points to nonexistent ${mainPath}`
+    );
+  }
+  const typesPath = path.join(path.dirname(jsonPath), packageInfo.types || '');
+  if (typesPath.indexOf('dist') < 0) {
+    isTypesInvalid = true;
+    console.error(
+      `${jsonPath} types property does not reference a file under dist`
+    );
+  }
+  if (!fs.existsSync(typesPath)) {
+    isTypesInvalid = true;
+    console.error(
+      `${jsonPath} types property points to nonexistent ${typesPath}`
+    );
   }
 
   if (isInvalid) {
     // Multiple checks could have failed, but only increment the counter once for one package.
     invalidMains++;
   }
+  if (isTypesInvalid) {
+    invalidTypes++;
+  }
 });
-
-if (invalidMains > 0) {
-  console.error(`${invalidMains} incorrect main property values found; please fix.`);
+if (invalidMains > 0 || invalidTypes > 0) {
+  if (invalidMains > 0) {
+    console.error(
+      `${invalidMains} incorrect main property values found; please fix.`
+    );
+  }
+  if (invalidTypes > 0) {
+    console.error(
+      `${invalidTypes} incorrect types property values found; please fix.`
+    );
+  }
 } else {
-  console.log('Success: All packages with main properties reference valid files under dist!');
+  console.log(
+    'Success: All packages with main/types properties reference valid files under dist!'
+  );
 }

tsconfig.json

@@ -1,15 +1,16 @@
 {
   "extends": "gts/tsconfig-google.json",
   "compilerOptions": {
-    "outDir": "./types/",
+    "outDir": "./build",
+    "declarationDir": "./build/types",
     "sourceMap": true,
     "module": "commonjs",
     "lib": ["es2015", "es2017", "dom"],
     "jsx": "react",
     "target": "es5",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "esModuleInterop": true,
+    "esModuleInterop": true
   },
   "compileOnSave": true,
   "exclude": [