docs: allow loading assets from node_modules (#2521)

package.json

@@ -67,6 +67,7 @@
     "@commitlint/config-conventional": "^18.6.0",
     "@nx/devkit": "^18.0.4",
     "@spectrum-css/expressvars": "^3.0.9",
+    "@spectrum-css/quickaction": "^3.1.1",
     "@spectrum-css/vars": "^9.0.8",
     "colors": "^1.4.0",
     "conventional-changelog-spectrum": "^1.0.2",

tools/bundle-builder/dev/index.js

@@ -157,8 +157,8 @@ function watchCommons() {
 	gulp.watch(
 		[`${dirs.components}/commons/*.css`],
 		gulp.series(
-			bundleBuilder.buildDepenenciesOfCommons,
-			bundleBuilder.copyPackages,
+			bundleBuilder.buildDependenciesOfCommons,
+			docs.buildDocs_individualPackages,
 			reload
 		)
 	);

tools/bundle-builder/docs/index.js

@@ -9,23 +9,24 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
-const pugCompiler = require("pug");
+
+const gulp = require("gulp");
 const pug = require("gulp-pug");
 const data = require("gulp-data");
-const yaml = require("js-yaml");
 const through = require("through2");
+
+const fg = require("fast-glob");
+const pugCompiler = require("pug");
+const yaml = require("js-yaml");
 const ext = require("replace-ext");
-const logger = require("gulplog");
 const lunr = require("lunr");
+const npmFetch = require("npm-registry-fetch");
 
 const dirs = require("../lib/dirs");
 const depUtils = require("../lib/depUtils");
 
-const npmFetch = require("npm-registry-fetch");
-
 require("colors");
 
 let minimumDeps = [
@@ -161,10 +162,42 @@ async function buildDocs_forDep(dep) {
 	});
 }
 
-// Combined
+function copyDocs_forDep(dep) {
+	// We don't copy assets for tokens here - it's done separately
+	if (["vars", "expressvars"].some((packageName => dep.endsWith(packageName)))) {
+		return;
+	}
+
+	const folder = dep.split(path.sep).pop();
+	const pkgPath = require.resolve(`${dep}/package.json`);
+
+	if (!pkgPath) return;
+
+	const files = fg.sync(["package.json", "dist/**"], {
+		cwd: path.dirname(pkgPath),
+	});
+
+	return Promise.all(
+		files.map((file) => {
+			const cleanFile = file.replace("dist/", "");
+			const from = path.join(path.dirname(pkgPath), file);
+			const dest = path.join(dirs.topLevel, "dist/components", folder, cleanFile);
+			if (!fs.existsSync(path.dirname(dest))) {
+				fs.mkdirSync(path.dirname(dest), { recursive: true });
+			}
+
+			return fs.copyFileSync(from, dest);
+		})
+	);
+}
+
+// Combined -- note: this does include deprecated packages that exist only in node_modules
 async function buildDocs_individualPackages() {
 	const dependencies = await depUtils.getFolderDependencyOrder(dirs.components);
-	return Promise.all(dependencies.map(buildDocs_forDep));
+	return Promise.all(dependencies.map((d) => Promise.all([
+		buildDocs_forDep(d),
+		copyDocs_forDep(d),
+	])));
 }
 
 function buildSite_generateIndex() {
@@ -344,5 +377,6 @@ exports.buildSite_copyFreshResources = buildSite_copyFreshResources;
 exports.buildSite_pages = buildSite_pages;
 exports.buildSite_html = buildSite_html;
 exports.buildDocs_forDep = buildDocs_forDep;
+exports.buildDocs_individualPackages = buildDocs_individualPackages;
 exports.buildDocs = buildDocs;
 exports.build = build;

tools/bundle-builder/index.js

@@ -12,7 +12,6 @@ governing permissions and limitations under the License.
 
 const gulp = require("gulp");
 const concat = require("gulp-concat");
-const rename = require("gulp-rename");
 
 const depUtils = require("./lib/depUtils");
 const dirs = require("./lib/dirs");
@@ -152,35 +151,21 @@ let buildStandalone = gulp.series(
 // run buildLite on a selected set of packages that depend on commons
 // yay: faster than 'rebuild everything' approach
 // boo: must add new packages here as commons grows
-function buildDepenenciesOfCommons() {
-	const dependentComponents = [
+function buildDependenciesOfCommons() {
+	return subrunner.runTaskOnPackages("buildLite", [
 		`${dirs.components}/actionbutton`,
 		`${dirs.components}/button`,
-		`${dirs.components}/clearbutton`,
 		`${dirs.components}/closebutton`,
-		`${dirs.components}/infieldbutton`,
 		`${dirs.components}/logicbutton`,
+		`${dirs.components}/modal`,
 		`${dirs.components}/picker`,
-		`${dirs.components}/pickerbutton`,
-	];
-	return subrunner.runTaskOnPackages("buildLite", dependentComponents);
+		`${dirs.components}/popover`,
+		`${dirs.components}/tooltip`,
+		`${dirs.components}/underlay`,
+	]);
 }
 
-function copyPackages() {
-	return gulp
-		.src([
-			`${dirs.components}/*/package.json`,
-			`${dirs.components}/*/dist/**`,
-		])
-		.pipe(
-			rename(function (file) {
-				file.dirname = file.dirname.replace("/dist", "");
-			})
-		)
-		.pipe(gulp.dest("dist/components/"));
-}
-
-const buildDocs = gulp.parallel(docs.build, vars.copyVars, copyPackages);
+const buildDocs = gulp.parallel(docs.build, vars.copyVars);
 
 function buildIfTopLevel() {
 	let builtTasks = gulp.parallel(buildCombined, buildStandalone, buildDocs);
@@ -196,15 +181,15 @@ function buildIfTopLevel() {
 
 let build = gulp.series(buildIfTopLevel(), vars.copyVars);
 
-let buildLite = gulp.series(function buildComponentsLite() {
+let buildLite = gulp.series(function buildComponents() {
 	return subrunner.runTaskOnAllComponents("buildLite");
 }, buildDocs);
 
-let buildMedium = gulp.series(function buildComponentsLite() {
+let buildMedium = gulp.series(function buildComponents() {
 	return subrunner.runTaskOnAllComponents("buildMedium");
 }, buildDocs);
 
-let buildHeavy = gulp.series(function buildComponentsLite() {
+let buildHeavy = gulp.series(function buildComponents() {
 	return subrunner.runTaskOnAllComponents("buildHeavy");
 }, buildDocs);
 
@@ -226,8 +211,7 @@ exports.buildCombined = buildCombined;
 exports.buildStandalone = buildStandalone;
 exports.buildLite = buildLite;
 exports.buildDocs = buildDocs;
-exports.buildDepenenciesOfCommons = buildDepenenciesOfCommons;
-exports.copyPackages = copyPackages;
+exports.buildDependenciesOfCommons = buildDependenciesOfCommons;
 exports.dev = devTask;
 exports.build = build;
 exports.watch = dev.watch;

tools/bundle-builder/package.json

@@ -34,6 +34,7 @@
     "browser-sync": "^2.26.14",
     "colors": "^1.4.0",
     "dependency-solver": "^1.0.6",
+    "fast-glob": "^3.3.2",
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-conventional-changelog": "^2.0.19",