Support @bentoproject/core (#37386)

* begin building bentoproject/core
* surface extension css over npm
* fix remap dependencies to handle tsx
  * handle trailing slash in importPath (necessary when remap-ing non-node_modules)
* support building extensions using bentoproject/core

build-system/compile/bundles.config.js

@@ -32,6 +32,19 @@ exports.jsBundles = {
       aliasName: 'custom-elements-polyfill.js',
     },
   },
+  'bento.core.js': {
+    // This file is generated, so we find its source in the build/ dir
+    // See compileBentoCore() and generateBentoCoreEntrypoint()
+    srcDir: 'build/',
+    srcFilename: 'bento.shared.js',
+    destDir: './src/bento/core/dist',
+    minifiedDestDir: './src/bento/core/dist',
+    options: {
+      includePolyfills: false,
+      toName: 'bento.core.max.js',
+      minifiedName: 'bento.core.js',
+    },
+  },
   'alp.max.js': {
     srcDir: './ads/alp/',
     srcFilename: 'install-alp.js',

build-system/compile/generate/bento.js

@@ -10,22 +10,18 @@ const dedent = require('dedent');
 const {getSharedBentoSymbols} = require('./shared-bento-symbols');
 
 /**
- * @param {Object<string, string[]>} packageSymbols
+ * @param {Object<string, string[]>} [packageSymbols]
  * @return {string}
  */
-function generateBentoRuntimeEntrypoint(
-  packageSymbols = getSharedBentoSymbols()
-) {
+function generateBentoRuntimeEntrypoint(packageSymbols) {
+  packageSymbols = packageSymbols || getSharedBentoSymbols();
+
   assertNoDupes(Object.values(packageSymbols).flat());
   return dedent(`
     import {isEsm} from '#core/mode';
     import {install as installCustomElements} from '#polyfills/custom-elements';
 
-    ${Object.entries(packageSymbols)
-      .map(
-        ([name, symbols]) => `import {${symbols.join(', ')}} from '${name}';`
-      )
-      .join('\n')}
+    ${generateEsImportExports(packageSymbols)}
 
     if (!isEsm()) {
       installCustomElements(self, class {});
@@ -55,6 +51,35 @@ function generateBentoRuntimeEntrypoint(
   `);
 }
 
+/**
+ * @param {Object<string, string[]>} [packageSymbols]
+ * @return {string}
+ */
+function generateBentoCoreEntrypoint(packageSymbols) {
+  packageSymbols = packageSymbols || getSharedBentoSymbols();
+
+  assertNoDupes(Object.values(packageSymbols).flat());
+  return dedent(`
+    ${generateEsImportExports(packageSymbols, true)}
+  `);
+}
+
+/**
+ *
+ * @param {Object<string, string[]>} packageSymbols
+ * @param {boolean} generateExport
+ * @return {string}
+ */
+function generateEsImportExports(packageSymbols, generateExport = false) {
+  const esImportOrExportStatement = generateExport ? 'export' : 'import';
+  return Object.entries(packageSymbols)
+    .map(
+      ([name, symbols]) =>
+        `${esImportOrExportStatement} {${symbols.join(', ')}} from '${name}';`
+    )
+    .join('\n');
+}
+
 /**
  * @param {Object<string, string[]>} packageSymbols
  * @return {string}
@@ -88,4 +113,5 @@ function assertNoDupes(symbols) {
 module.exports = {
   generateBentoRuntimeEntrypoint,
   generateIntermediatePackage,
+  generateBentoCoreEntrypoint,
 };

build-system/compile/generate/shared-bento-symbols.js

@@ -102,4 +102,15 @@ function getSharedBentoSymbols() {
   return sharedBentoSymbols;
 }
 
-module.exports = {getExportedSymbols, getSharedBentoSymbols};
+/**
+ * @return {Array<string>}
+ */
+function getSharedBentoModules() {
+  return packages.map((pkg) => resolvePath(`src/${pkg}`));
+}
+
+module.exports = {
+  getExportedSymbols,
+  getSharedBentoSymbols,
+  getSharedBentoModules,
+};

build-system/npm-publish/write-package-files.js

@@ -104,9 +104,10 @@ async function getDescription() {
 
 /**
  * Write package.json
+ * @param {{useBentoCore: boolean}} options
  * @return {Promise<void>}
  */
-async function writePackageJson() {
+async function writePackageJson({useBentoCore}) {
   const version = getSemver(extensionVersion, ampVersion);
   if (!valid(version) || ampVersion.length != 13) {
     log(
@@ -165,6 +166,9 @@ async function writePackageJson() {
       react: '^17.0.0',
     },
   };
+  if (useBentoCore) {
+    json.dependencies = {'@bentoproject/core': `tbd`};
+  }
 
   try {
     await writeFile(`${dir}/package.json`, JSON.stringify(json, null, 2));
@@ -227,7 +231,7 @@ async function main() {
   if (await shouldSkip()) {
     return;
   }
-  await writePackageJson();
+  await writePackageJson({useBentoCore: false});
   await writeReactJs();
   await copyCssToRoot();
 }

build-system/tasks/build.js

@@ -1,7 +1,7 @@
 const {
   bootstrapThirdPartyFrames,
   compileAllJs,
-  compileBentoRuntime,
+  compileBentoRuntimeAndCore,
   compileCoreRuntime,
   printConfigHelp,
   printNobuildHelp,
@@ -49,7 +49,7 @@ async function build() {
   if (argv.core_runtime_only) {
     await compileCoreRuntime(options);
   } else if (argv.bento_runtime_only) {
-    await compileBentoRuntime(options);
+    await compileBentoRuntimeAndCore(options);
   } else {
     await compileAllJs(options);
   }

build-system/tasks/dist.js

@@ -5,7 +5,7 @@ const path = require('path');
 const {
   bootstrapThirdPartyFrames,
   compileAllJs,
-  compileBentoRuntime,
+  compileBentoRuntimeAndCore,
   compileCoreRuntime,
   compileJs,
   endBuildStep,
@@ -116,7 +116,7 @@ async function dist() {
   if (argv.core_runtime_only) {
     await compileCoreRuntime(options);
   } else if (argv.bento_runtime_only) {
-    await compileBentoRuntime(options);
+    await compileBentoRuntimeAndCore(options);
   } else {
     await Promise.all([
       writeVersionFiles(),

build-system/tasks/extension-helpers.js

@@ -38,6 +38,9 @@ const {parse: pathParse} = require('path');
 const {renameSelectorsToBentoTagNames} = require('./css/bento-css');
 const {TransformCache, batchedRead} = require('../common/transform-cache');
 const {watch} = require('chokidar');
+const {
+  getSharedBentoModules,
+} = require('../compile/generate/shared-bento-symbols');
 
 const legacyLatestVersions = json5.parse(
   fs.readFileSync(
@@ -473,6 +476,20 @@ async function buildExtension(name, version, hasCss, options) {
  * @return {Promise<void>}
  */
 async function buildNpmCss(extDir, options) {
+  await Promise.all([
+    buildNpmReactCss(extDir, options),
+    buildNpmBentoWebComponentCss(extDir, options),
+  ]);
+}
+
+/**
+ * Writes an extensions's CSS to its npm dist folder.
+ *
+ * @param {string} extDir
+ * @param {Object} options
+ * @return {Promise<void>}
+ */
+async function buildNpmReactCss(extDir, options) {
   const startCssTime = Date.now();
   const filenames = await fastGlob(path.join(extDir, '**', '*.jss.js'));
   if (!filenames.length) {
@@ -485,6 +502,24 @@ async function buildNpmCss(extDir, options) {
   endBuildStep('Wrote CSS', `${options.name} → styles.css`, startCssTime);
 }
 
+/**
+ *
+ * @param {string} extDir
+ * @param {Object} options
+ * @return {Promise<void>}
+ */
+async function buildNpmBentoWebComponentCss(extDir, options) {
+  const srcFilepath = path.resolve(
+    `build/css/${getBentoName(options.name)}-${options.version}.css`
+  );
+  if (await fs.pathExists(srcFilepath)) {
+    const destFilepath = path.resolve(`${extDir}/dist/web-component.css`);
+    await fs.copyFile(srcFilepath, destFilepath);
+  } else {
+    await buildExtensionCss(extDir, options.name, options.version, options);
+  }
+}
+
 /** @type {TransformCache<string>} */
 let jssCache;
 
@@ -629,6 +664,11 @@ async function buildNpmBinaries(extDir, name, options) {
         wrapper: '',
       },
     };
+    if (options.useBentoCore) {
+      // remap all shared modules to the @bentoproject/core package and declare as external
+      npm.bento.remap = getSharedBentoPackageRemap();
+      npm.bento.external = ['@bentoproject/core'];
+    }
   }
   const binaries = Object.values(npm);
   return buildBinaries(extDir, binaries, options);
@@ -662,6 +702,19 @@ function buildBinaries(extDir, binaries, options) {
   return Promise.all(promises);
 }
 
+/**
+ * Creates configuration to remap shared bento modules
+ * Returns an Object of the form: `{'path/to/shared/module': '@bentoproject/core'}`.
+ * Uses require.resolve() to normalize directories to the appropriate index file
+ * @return {Object}
+ */
+function getSharedBentoPackageRemap() {
+  const remap = Object.fromEntries(
+    getSharedBentoModules().map((p) => [p, '@bentoproject/core'])
+  );
+  return remap;
+}
+
 /**
  * @param {string} dir
  * @param {string} name