bundle back up for now

docs/assets/plugins/code-block/code-block.js

@@ -165,7 +165,7 @@
         js_module: true,
         html:
           `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/light.css">\n` +
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js/+esm"></script>\n` +
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js"></script>\n` +
           `\n` +
           html,
         css: `body {\n  font: 16px sans-serif;\n}`,

docs/assets/plugins/metadata/metadata.js

@@ -467,7 +467,7 @@
             To import this component from [the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace):
 
             \`\`\`js
-            import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}/+esm';
+            import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}';
             \`\`\`
             </sl-tab-panel>
 

docs/getting-started/installation.md

@@ -8,7 +8,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 ### Dark Theme
@@ -17,7 +17,7 @@ If you prefer to use the dark theme instead, use this. Note the `sl-theme-dark`
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 ### Light & Dark Theme
@@ -29,7 +29,7 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
 <link rel="stylesheet" media="(prefers-color-scheme:dark)"
       href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"
       onload="document.documentElement.classList.add('sl-theme-dark');">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 Now you can [start using Shoelace!](/getting-started/usage)

docs/getting-started/overview.md

@@ -32,7 +32,7 @@ Add the following code to your page.
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 Now you have access to all of Shoelace's components! Try adding a button:

docs/resources/changelog.md

@@ -6,7 +6,11 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
-## Next
+## 2.0.0-beta.58
+
+This version once again restores the bundled distribution because the unbundled + CDN approach is currently confusing and [not working properly](https://github.com/shoelace-style/shoelace/issues/559#issuecomment-949662331). Unbundling the few dependencies Shoelace has is still a goal of the project, but [this jsDelivr bug](https://github.com/jsdelivr/jsdelivr/issues/18337) needs to be resolved before we can achieve it.
+
+I sincerely apologize for the instability of the last few beta releases as a result of this effort.
 
 - Added experimental `<sl-animated-image>` component
 - Added `label` attribute to `<sl-progress-bar>` and `<sl-progress-ring>` to improve a11y
@@ -15,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where the `nav` part in `<sl-tab-group>` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
 - Fixed a bug where non-integer aspect ratios were calculated incorrectly in `<sl-responsive-media>`
 - Fixed a bug in `<sl-range>` where setting `value` wouldn't update the active and inactive portion of the track [#572](https://github.com/shoelace-style/shoelace/pull/572)
+- Reverted to publishing the bundled dist and removed `/+esm` links from the docs
 - Updated to Bootstrap Icons to 1.6.1
 
 ## 2.0.0-beta.57

package.json

@@ -31,9 +31,8 @@
   },
   "scripts": {
     "start": "node scripts/build.js --bundle --serve",
-    "build": "node scripts/build.js --types",
-    "build-docs": "node scripts/build.js --dir docs/dist --bundle",
-    "prepublishOnly": "npm run build && npm run build-docs && npm run test",
+    "build": "node scripts/build.js --bundle --types --copydir \"docs/dist\"",
+    "prepublishOnly": "npm run build && npm run test",
     "prettier": "prettier --write --loglevel warn .",
     "create": "plop --plopfile scripts/plop/plopfile.cjs",
     "test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer",

scripts/build.js

@@ -15,10 +15,11 @@ import { execSync } from 'child_process';
 const build = esbuild.build;
 const bs = browserSync.create();
 
-const { bundle, dir, serve, types } = commandLineArgs([
+const { bundle, copydir, dir, serve, types } = commandLineArgs([
+  { name: 'bundle', type: Boolean },
+  { name: 'copydir', type: String },
   { name: 'dir', type: String, defaultValue: 'dist' },
   { name: 'serve', type: Boolean },
-  { name: 'bundle', type: Boolean },
   { name: 'types', type: Boolean }
 ]);
 
@@ -63,12 +64,8 @@ mkdirp.sync(outdir);
       },
       bundle: true,
       //
-      // We don't bundle certain dependencies in the production build. This ensures the dist ships with bare module
-      // specifiers, allowing end users to optimize better. jsDelivr understands this if you add /+esm to the URL. Note
-      // that we can't bundle packages that don't ship ESM. https://github.com/jsdelivr/jsdelivr/issues/18263
-      //
-      // We still bundle for the dev environment and the docs build since we don't use a CDN for those. Once import maps
-      // are better supported, we can adjust for that and use the same build again. https://caniuse.com/import-maps
+      // We don't bundle certain dependencies in the unbundled build. This ensures we ship bare module specifiers,
+      // allowing end users to better optimize when using a bundler. (Only packages that ship ESM can be external.)
       //
       external: bundle ? undefined : ['@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
       splitting: true,
@@ -79,6 +76,12 @@ mkdirp.sync(outdir);
       process.exit(1);
     });
 
+  // Copy the build output to an additional directory
+  if (copydir) {
+    del.sync(copydir);
+    copy(outdir, copydir);
+  }
+
   console.log(chalk.green(`The build has been generated at ${outdir} 📦\n`));
 
   // Dev server
@@ -87,6 +90,9 @@ mkdirp.sync(outdir);
       port: getPort.makeRange(4000, 4999)
     });
 
+    // Make sure docs/dist is empty since we're serving it virtually
+    del.sync('docs/dist');
+
     console.log(chalk.cyan(`Launching the Shoelace dev server at http://localhost:${port}! 🥾\n`));
 
     // Launch browser sync
@@ -113,7 +119,7 @@ mkdirp.sync(outdir);
       buildResult
         // Rebuild and reload
         .rebuild()
-        .then(async () => {
+        .then(() => {
           // Rebuild stylesheets when a theme file changes
           if (/^src\/themes/.test(filename)) {
             execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
@@ -127,7 +133,9 @@ mkdirp.sync(outdir);
 
           execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
         })
-        .then(() => bs.reload())
+        .then(() => {
+          bs.reload();
+        })
         .catch(err => console.error(chalk.red(err)));
     });