Vite/Rollup fixups

Author: captbaritone

examples/minimal/index.html

@@ -8,9 +8,9 @@
     <div id="app" style="height: 100vh">
       <!-- Webamp will attempt to center itself within this div -->
     </div>
-    <script src="https://unpkg.com/webamp@1.4.2/built/webamp.bundle.min.js"></script>
-    <script>
-      const Webamp = window.Webamp;
+    <!--<script src="../../packages/webamp/built/webamp.bundle.min.js"></script>-->
+    <script type="module">
+      import Webamp from "../../packages/webamp/built/webamp.bundle.mjs";
       const webamp = new Webamp({
         initialTracks: [
           {

examples/minimalMilkdrop/index.html

@@ -8,7 +8,7 @@
     <div id="app" style="height: 100vh">
       <!-- Webamp will attempt to center itself within this div -->
     </div>
-    <script src="https://unpkg.com/webamp@1.5.0/built/webamp.bundle.min.js"></script>
+    <script src="../../packages/webamp/built/webamp.bundle.min.js"></script>
     <script src="https://unpkg.com/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
     <script src="https://unpkg.com/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
     <script>
@@ -40,11 +40,17 @@
           },
           butterchurnOpen: true,
         },
-        __initialWindowLayout: {
-          main: { position: { x: 0, y: 0 } },
-          equalizer: { position: { x: 0, y: 116 } },
-          playlist: { position: { x: 0, y: 232 }, size: [0, 4] },
-          milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] },
+        windowLayout: {
+          main: { position: { top: 0, left: 0 } },
+          equalizer: { position: { top: 116, left: 0 } },
+          playlist: {
+            position: { top: 232, left: 0 },
+            size: { extraWidth: 0, extraHeight: 4 },
+          },
+          milkdrop: {
+            position: { top: 0, left: 275 },
+            size: { extraHeight: 12, extraWidth: 7 },
+          },
         },
       });
       webamp.renderWhenReady(document.getElementById("app"));

packages/webamp/.eslintignore

@@ -1,6 +1,5 @@
 *.min.js
 built/
-dist/
 coverage/
 **/node_modules/
 examples/webpack/bundle.js

packages/webamp/.gitignore

@@ -1,6 +1,5 @@
 **/node_modules
 
-/dist
 /built
 /demo/built
 /coverage

packages/webamp/demo/js/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import * as Sentry from "@sentry/browser";
 import ReactDOM from "react-dom/client";
 // @ts-ignore
@@ -87,6 +88,7 @@ async function main() {
   }
   let soundcloudPlaylist = null;
   if (soundcloudPlaylistId != null) {
+    // @ts-ignore
     soundcloudPlaylist = await SoundCloud.getPlaylist(soundcloudPlaylistId);
   }
   const config = await getWebampConfig(screenshot, skinUrl, soundcloudPlaylist);

packages/webamp/scripts/rollupPlugins.mjs

@@ -10,6 +10,7 @@ import postcssOptimizeDataUriPngs from "./postcss-optimize-data-uri-pngs.js";
 import atImport from "postcss-import";
 import { babel } from "@rollup/plugin-babel";
 import nodePolyfills from "rollup-plugin-polyfill-node";
+import path from "node:path";
 
 /**
  * @return {import('rollup').InputOptions}
@@ -21,6 +22,7 @@ export function getPlugins({ minify, outputFile, vite }) {
       values: { "process.env.NODE_ENV": JSON.stringify("production") },
       preventAssignment: true,
     }),
+    vite ? null : stripInlineSuffix(),
     // https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
     // TODO: We could offer a version which does not inline React/React-DOM
     nodeResolve(),
@@ -57,3 +59,27 @@ export function getPlugins({ minify, outputFile, vite }) {
 
   return plugins;
 }
+
+// Vite expects `?inline` for CSS imports that we don't want to be auto
+// injected. This hack strips that suffix here in Rollup for the library build.
+function stripInlineSuffix() {
+  return {
+    name: "strip-inline-suffix",
+    resolveId(source, importer) {
+      if (source.includes("?inline")) {
+        // Remove the `?inline` part from the import path
+        const cleanedSource = source.replace("?inline", "");
+
+        // Resolve the cleaned source to an absolute path
+        const resolvedPath = path.resolve(
+          path.dirname(importer),
+          cleanedSource
+        );
+
+        return resolvedPath; // Return the absolute path
+      }
+
+      return null; // Return null to let other plugins handle the path if not modified
+    },
+  };
+}

packages/webamp/vite.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
   optimizeDeps: {
     include: ["winamp-eqf"],
   },
-  rollup: {},
   plugins: [
     ...getPlugins({ minify: true, outputFile: "foo", vite: true }),
     /*

yarn.lock

@@ -15069,11 +15069,16 @@ graphql-ws@5.12.1:
   resolved "https://registry.yarnpkg.com/graphql-ws/-/graphql-ws-5.12.1.tgz#c62d5ac54dbd409cc6520b0b39de374b3d59d0dd"
   integrity sha512-umt4f5NnMK46ChM2coO36PTFhHouBrK9stWWBczERguwYrGnPNxJ9dimU6IyOBfOkC6Izhkg4H8+F51W/8CYDg==
 
-graphql@16.8.1, graphql@^16.8.1, graphql@^16.9.0:
+graphql@^16.8.1:
   version "16.8.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
   integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
 
+graphql@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f"
+  integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==
+
 grats@^0.0.28:
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/grats/-/grats-0.0.28.tgz#232fa29cc4387607950e2e408e18c26582586e1b"