🐛 Use buildBentoExtensionJs under src/bento/components (#37588)

Components moved to `src/bento` bundle common dependencies instead of sharing with `bento.js`. They lack these options that enable module loading:

```js
{
  wrapper: 'bento',
  babelCaller: options.minify
    ? 'bento-element-minified'
    : 'bento-element-unminified',
}
```

To fix this, they should use `buildBentoExtensionJs()`

---

See bundle size after change:
```
dist/v0/bento-accordion-1.0.mjs: Δ -12.25KB
dist/v0/bento-jwplayer-1.0.mjs: Δ -11.31KB
```

build-system/server/lazy-build.js

@@ -186,13 +186,10 @@ async function preBuildExtensions() {
  */
 function doBuildBentoComponent(components, name, options) {
   const component = components[name];
-  return buildComponent(
-    component.name,
-    component.version,
-    component.hasCss,
-    {...options, ...component},
-    component.extraGlobs
-  );
+  return buildComponent(component.name, component.version, component.hasCss, {
+    ...options,
+    ...component,
+  });
 }
 
 /**

build-system/tasks/build-bento.js

@@ -1,18 +1,16 @@
 const argv = require('minimist')(process.argv.slice(2));
 const debounce = require('../common/debounce');
 const {
+  buildBentoExtensionJs,
   buildBinaries,
   buildExtensionCss,
-  buildExtensionJs,
   buildNpmBinaries,
   buildNpmCss,
   declareExtension,
-  getBentoBuildFilename,
   getExtensionsFromArg,
 } = require('./extension-helpers');
 const {bentoBundles, verifyBentoBundles} = require('../compile/bundles.config');
 const {endBuildStep, watchDebounceDelay} = require('./helpers');
-const {getBentoName} = require('./bento-helpers');
 const {log} = require('../common/logging');
 const {mkdirSync} = require('fs');
 const {red} = require('kleur/colors');
@@ -124,17 +122,9 @@ async function watchBentoComponent(
  *     the sub directory inside the extension directory
  * @param {boolean} hasCss Whether there is a CSS file for this extension.
  * @param {?Object} options
- * @param {!Array=} extraGlobs
  * @return {!Promise<void|void[]>}
  */
-async function buildBentoComponent(
-  name,
-  version,
-  hasCss,
-  options = {},
-  extraGlobs
-) {
-  options.extraGlobs = extraGlobs;
+async function buildBentoComponent(name, version, hasCss, options = {}) {
   options.npm = true;
   options.bento = true;
 
@@ -164,21 +154,7 @@ async function buildBentoComponent(
     return Promise.all(promises);
   }
 
-  const bentoName = getBentoName(name);
-  promises.push(
-    buildExtensionJs(componentsDir, bentoName, {
-      ...options,
-      wrapper: 'none',
-      filename: await getBentoBuildFilename(
-        componentsDir,
-        bentoName,
-        'standalone',
-        options
-      ),
-      // Include extension directory since our entrypoint may be elsewhere.
-      extraGlobs: [...(options.extraGlobs || []), `${componentsDir}/**/*.js`],
-    })
-  );
+  promises.push(buildBentoExtensionJs(componentsDir, name, options));
   return Promise.all(promises);
 }
 
@@ -197,13 +173,10 @@ async function buildBentoComponents(options) {
       (component) => options.compileOnlyCss || toBuild.includes(component.name)
     )
     .map((component) =>
-      buildBentoComponent(
-        component.name,
-        component.version,
-        component.hasCss,
-        {...options, ...component},
-        component.extraGlobs
-      )
+      buildBentoComponent(component.name, component.version, component.hasCss, {
+        ...options,
+        ...component,
+      })
     );
 
   await Promise.all(results);

build-system/tasks/extension-helpers.js

@@ -463,7 +463,7 @@ async function buildExtension(name, version, hasCss, options, extraGlobs) {
   }
 
   await Promise.all([
-    maybeBuildBentoExtensionJs(extDir, name, options),
+    options.bento && buildBentoExtensionJs(extDir, getBentoName(name), options),
     buildExtensionJs(extDir, name, {...options, bento: false}),
   ]);
 }
@@ -671,23 +671,14 @@ function buildBinaries(extDir, binaries, options) {
  * @param {!Object} options
  * @return {!Promise}
  */
-async function maybeBuildBentoExtensionJs(dir, name, options) {
-  if (!options.bento) {
-    return;
-  }
-  const bentoName = getBentoName(name);
-  return buildExtensionJs(dir, bentoName, {
+async function buildBentoExtensionJs(dir, name, options) {
+  await buildExtensionJs(dir, name, {
     ...options,
     wrapper: 'bento',
     babelCaller: options.minify
       ? 'bento-element-minified'
       : 'bento-element-unminified',
-    filename: await getBentoBuildFilename(
-      dir,
-      bentoName,
-      'standalone',
-      options
-    ),
+    filename: await getBentoBuildFilename(dir, name, 'standalone', options),
     // Include extension directory since our entrypoint may be elsewhere.
     extraGlobs: [...(options.extraGlobs || []), `${dir}/**/*.js`],
   });
@@ -914,6 +905,7 @@ async function copyWorkerDomResources(version) {
 }
 
 module.exports = {
+  buildBentoExtensionJs,
   buildBinaries,
   buildExtensionCss,
   buildExtensionJs,