feat(web-components): migrate from npmignore to package.json#files for release

apps/vr-tests-web-components/project.json

@@ -2,5 +2,6 @@
   "name": "@fluentui/vr-tests-web-components",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "implicitDependencies": []
+  "implicitDependencies": [],
+  "tags": ["web-components"]
 }

change/@fluentui-web-components-39a28566-9769-41a8-802b-207cd544ded7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate to package.json#files for npm publish scope\"",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -18,6 +18,13 @@
   "main": "dist/esm/index.js",
   "types": "dist/web-components.d.ts",
   "unpkg": "dist/web-components.min.js",
+  "files": [
+    "*.md",
+    "dist/dts/",
+    "dist/esm/",
+    "dist/*.js",
+    "dist/*.d.ts"
+  ],
   "exports": {
     ".": {
       "types": "./dist/dts/index.d.ts",
@@ -176,6 +183,7 @@
     "./dist/esm/toggle-button/define.js"
   ],
   "scripts": {
+    "verify-packaging": "node ./scripts/verify-packaging",
     "type-check": "node ./scripts/type-check",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",

packages/web-components/project.json

@@ -2,5 +2,6 @@
   "name": "@fluentui/web-components",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
-  "implicitDependencies": []
+  "implicitDependencies": [],
+  "tags": ["platform:web", "web-components"]
 }

packages/web-components/scripts/generate-tokens.js

@@ -1,6 +1,5 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import chalk from 'chalk';
 
@@ -10,8 +9,6 @@ main();
 
 function main() {
   console.log(tokensPackage);
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
 
   const fluentTokens = Object.keys(tokensPackage.tokens);
   const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
@@ -21,7 +18,7 @@ function main() {
     return acc + token;
   }, '');
 
-  const dir = path.join(__dirname, '../src', 'theme');
+  const dir = path.join(import.meta.dirname, '../src', 'theme');
 
   if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir, { recursive: true });

packages/web-components/scripts/run-benchmarks.js

@@ -1,11 +1,8 @@
 import fs from 'fs/promises';
-import { fileURLToPath } from 'url';
 import path from 'path';
 import { execSync } from 'child_process';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const rootDir = path.join(__dirname, '..');
+const rootDir = path.join(import.meta.dirname, '..');
 const tensileConfig = 'tensile.config.js';
 
 try {

packages/web-components/scripts/type-check.js

@@ -1,7 +1,6 @@
 // @ts-check
 
 import fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import { promisify } from 'node:util';
 import { exec } from 'node:child_process';
@@ -18,9 +17,7 @@ main().catch(err => {
  * Copied from ${@link 'file://./../../../scripts/tasks/src/type-check.ts'}
  */
 async function main() {
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
-  const rootConfig = JSON.parse(fs.readFileSync(path.join(__dirname, '../tsconfig.json'), 'utf-8'));
+  const rootConfig = JSON.parse(fs.readFileSync(path.join(import.meta.dirname, '../tsconfig.json'), 'utf-8'));
 
   const tsConfigsRefs = getTsConfigs(rootConfig, { spec: false, e2e: false });
 

packages/web-components/scripts/verify-packaging.js

@@ -0,0 +1,75 @@
+// @ts-check
+/**
+ * Copied from ${@link 'file://./../../../scripts/tasks/src/verify-packaging.ts'}
+ */
+
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+import micromatch from 'micromatch';
+
+main();
+
+function main() {
+  /**
+   * @see https://docs.npmjs.com/cli/v10/commands/npm-publish#files-included-in-package
+   */
+  const alwaysPublishedFiles = ['LICENSE', 'package.json', 'README.md'];
+  const rootConfigFiles = [
+    'just.config.[jt]s',
+    'jest.config.[jt]s',
+    '.eslintrc.(js|json)',
+    'project.json',
+    '.babelrc.json',
+    '.swcrc',
+    'tsconfig(.*)?.json',
+  ];
+  const nonProdAssets = ['assets/', 'docs/*', 'temp/*', 'bundle-size/*', '.storybook/*', 'stories/*'];
+
+  verifyPackaging({ alwaysPublishedFiles, nonProdAssets, rootConfigFiles });
+}
+
+/**
+ *
+ * @param {{alwaysPublishedFiles:string[];rootConfigFiles:string[];nonProdAssets:string[]}} options
+ * @returns
+ */
+
+function verifyPackaging(options) {
+  const { alwaysPublishedFiles, nonProdAssets, rootConfigFiles } = options;
+  const root = path.join(import.meta.dirname, '../');
+
+  /** @type {{ private?: boolean }} */
+  const packageJSON = JSON.parse(readFileSync(path.join(root, 'package.json'), 'utf-8'));
+
+  // no need to check if package is not being published yet
+  if (packageJSON.private) {
+    return;
+  }
+
+  const npmPackResult = spawnSync('npm', ['pack', '--dry-run']);
+
+  const processedResult = npmPackResult.output
+    .toString()
+    .replace(/\bnpm notice\b\s+[\d.]+[kB]+\s+/gi, '')
+    .replace(/[ ]+/g, '');
+  const processedResultArr = processedResult.split('\n');
+
+  assert.ok(micromatch(processedResultArr, alwaysPublishedFiles).length, `npm always shipped files`);
+  assert.equal(
+    micromatch(processedResultArr, nonProdAssets).length,
+    0,
+    `wont ship non production code related folders/files`,
+  );
+  assert.equal(micromatch(processedResultArr, 'dist/storybook/**').length, 0, `wont ship storybook assets`);
+  assert.equal(micromatch(processedResultArr, rootConfigFiles).length, 0, `wont ship configuration files`);
+  assert.ok(micromatch(processedResultArr, 'CHANGELOG.md').length, 'ships changelog markdown file');
+  assert.ok(micromatch(processedResultArr, 'dist/*.d.ts').length, 'ships rolluped dts');
+  assert.ok(micromatch(processedResultArr, 'dist/*.(min.js|js)').length, 'ships rolluped js');
+  assert.equal(micromatch(processedResultArr, 'src/*').length, 0, `wont ship source code from "/src"`);
+
+  assert.ok(micromatch(processedResultArr, 'dist/esm/**/*.(js|map)').length, 'ships esm');
+  assert.ok(micromatch(processedResultArr, 'dist/dts/**/*.d.ts').length, 'ships types');
+}