Switch global styles depends on story parameter

Though there is no player stories, I plan to migrate the player app to
Gleam. This is the prep work for the migration: I'm not intend to use
the builder's global styles in the new player.

.storybook/preview.ts

@@ -2,9 +2,88 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import "../src/builder/main.css";
+import { STORY_PREPARED } from "@storybook/core-events";
+import { addons } from "@storybook/preview-api";
+
+import builderCSS from "../src/builder/main.css?url";
+import playerInlineCSS from "../src/inline.css?url";
+import playerVarsCSS from "../src/vars.css?url";
+
 import * as lucide from "../src/builder/lucide";
 import * as logo from "../src/builder/ui/logo";
 
-lucide.register();
-logo.register();
+try {
+	// Since these register CustomElements without checking if an element has been
+	// already registered, these throws an error after HMR.
+	// FIXME: Check if a tag name is occupied inside the register functions.
+	lucide.register();
+	logo.register();
+} catch {}
+
+const chan = addons.getChannel();
+
+function getOrCreateAnchor(): HTMLScriptElement {
+	const existing = document.head.querySelector(`script#ptimer_sb_anchor[type="application/json"]`);
+	if (existing) {
+		return existing as HTMLScriptElement;
+	}
+
+	const anchor = document.createElement("script");
+	anchor.type = "application/json";
+	anchor.id = "ptimer_sb_anchor";
+	document.head.appendChild(anchor);
+
+	return anchor;
+}
+
+const anchor = getOrCreateAnchor();
+
+function loadCSS(href: string): void {
+	if (document.head.querySelector(`link[rel="stylesheet"][href="${href}"]`)) {
+		return;
+	}
+
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = href;
+	link.dataset.addedAt = Date.now().toString(10);
+	document.head.insertBefore(link, anchor);
+}
+
+function handleAppParameter(value: unknown): void {
+	switch (value) {
+		case "player":
+		case "builder":
+			break;
+		default:
+			throw new Error(`Illegal "app" parameter: it must be one of "player" or "builder"`);
+	}
+
+	if (value === "player") {
+		loadCSS(playerInlineCSS);
+		loadCSS(playerVarsCSS);
+		return;
+	}
+
+	loadCSS(builderCSS);
+	return;
+}
+
+interface StoryPreparedEvent {
+	parameters: Record<string, unknown>;
+}
+
+chan.on(STORY_PREPARED, (ev: StoryPreparedEvent) => {
+	const remainingStyles = document.head.querySelectorAll(`link[rel="stylesheet"][data-added-at]`);
+	remainingStyles.forEach(link => {
+		document.head.removeChild(link);
+	});
+
+	if ("app" in ev.parameters) {
+		try {
+			handleAppParameter(ev.parameters.app);
+		} catch (error) {
+			console.warn(error);
+		}
+	}
+});

package.json

@@ -4,8 +4,10 @@
 	"devDependencies": {
 		"@storybook/addon-essentials": "^8.2.8",
 		"@storybook/addon-interactions": "^8.2.8",
+		"@storybook/core-events": "^8.2.8",
 		"@storybook/html": "^8.2.8",
 		"@storybook/html-vite": "^8.2.8",
+		"@storybook/preview-api": "^8.2.8",
 		"@storybook/test": "^8.2.8",
 		"@storybook/test-runner": "^0.19.1",
 		"elm": "^0.19.1-6",

src/builder/app.stories.ts

@@ -13,6 +13,9 @@ interface Args {}
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 } satisfies Meta<Args>;
 
 type Story = StoryObj<Args>;

src/builder/log.stories.ts

@@ -12,6 +12,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		empty: false,
 	},

src/builder/ui/assets_editor.stories.ts

@@ -25,6 +25,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		timer: {
 			metadata,

src/builder/ui/button.stories.ts

@@ -20,6 +20,9 @@ export default {
 	render(args, ctx) {
 		return story(args, ctx);
 	},
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		type: "button",
 		variant: "primary",

src/builder/ui/export_scene.stories.ts

@@ -15,6 +15,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		timer: {
 			metadata: {

src/builder/ui/field.stories.ts

@@ -16,6 +16,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		label: "Field Label",
 		note: "",

src/builder/ui/int_input.stories.ts

@@ -17,6 +17,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		defaultValue: 99,
 		state: "enabled",

src/builder/ui/menu.stories.ts

@@ -12,6 +12,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		active: true,
 	},

src/builder/ui/metadata_editor.stories.ts

@@ -13,6 +13,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		empty: false,
 	},

src/builder/ui/placeholder.stories.ts

@@ -13,6 +13,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		title: "No tasks",
 		description: "Congratulations! You have zero tasks remaining!",

src/builder/ui/selectbox.stories.ts

@@ -16,6 +16,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		options: ["foo", "bar", "baz"],
 		defaultValue: "bar",

src/builder/ui/steps_editor.stories.ts

@@ -15,6 +15,10 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+		layout: "fullscreen",
+	},
 	args: {
 		steps: [
 			{
@@ -33,9 +37,6 @@ export default {
 			},
 		],
 	},
-	parameters: {
-		layout: "fullscreen",
-	},
 } satisfies Meta<Args>;
 
 type Story = StoryObj<Args>;

src/builder/ui/textbox.stories.ts

@@ -20,6 +20,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		defaultValue: "Textbox",
 		state: "enabled",

src/builder/ui/tts_scene.stories.ts

@@ -13,6 +13,9 @@ interface Args {
 
 export default {
 	render: story,
+	parameters: {
+		app: "builder",
+	},
 	args: {
 		state: "not_loaded",
 	},

tsconfig.json

@@ -16,6 +16,6 @@
 		},
 		"types": ["vite/client"]
 	},
-	"include": ["./**/*.ts"],
+	"include": ["./**/*.ts", "./.storybook/preview.ts"],
 	"exclude": ["./build", "node_modules"]
 }