chore: update for released TRL 0.0.22 / svelte-standard 0.0.18

package.json

@@ -9,18 +9,18 @@
 		"Michael Leahy <support@typhonjs.io> (https://github.com/typhonrt)"
 	],
 	"dependencies": {
-		"@typhonjs-fvtt/runtime": "^0.0.21",
-		"@typhonjs-fvtt/svelte-standard": "^0.0.17",
+		"@typhonjs-fvtt/runtime": "^0.0.22",
+		"@typhonjs-fvtt/svelte-standard": "^0.0.18",
 		"chart.js": "^3.9.1",
-		"svelte": "^3.52.0",
-		"svelte-preprocess": "^4.10.7"
+		"svelte": "^3.55.0"
 	},
 	"devDependencies": {
 		"@cloudflare/workers-types": "^3.18.0",
 		"@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
 		"eslint": "^8.26.0",
 		"eslint-config-arcanist": "^1.5.0",
-		"vite": "^3.2.2"
+		"svelte-preprocess": "^5.0.1",
+		"vite": "^4.1.1"
 	},
 	"browserslist": [
 		">5%",

src/store/mccSessionStorage.js

@@ -1,3 +1,3 @@
-import { SessionStorage } from "@typhonjs-fvtt/runtime/svelte/store";
+import { TJSSessionStorage } from "@typhonjs-fvtt/runtime/svelte/store";
 
-export const mccSessionStorage = new SessionStorage();
+export const mccSessionStorage = new TJSSessionStorage();

src/view/ModuleCompatibilityCheckerShell.svelte

@@ -18,7 +18,7 @@
 
 	export let elementRoot;
 
-	const { application } = getContext("external");
+	const { application } = getContext("#external");
 
 	// Get a store that is synchronized with session storage
 	const stateStore = mccSessionStorage.getStore(`mcc.appState`);

src/view/external/PatreonButton.svelte

@@ -2,6 +2,7 @@
 import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span class="tag patreon" on:click={() => window.open("https://www.patreon.com/bePatron?u=15896855", "_blank")}>
 	<i class="fab fa-patreon" />
 	{localize("mcc.patreon")}

src/view/pie/PieChartLegend.svelte

@@ -9,16 +9,20 @@
 
 <section>
 	{#each $statuses as status, i (status.key)}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div class="entry" class:line-through={!status.value} on:click={() => statuses.toggleVisible(status.key)}>
 			<span style:background-color={$pieData.datasets[0].backgroundColor[i]}>{$pieData.datasets[0].data[i]} / {$spreadsheetStore.index.length}</span>
+			<!-- svelte-ignore a11y-missing-attribute -->
 			<a>{$pieData.labels[i]}</a>
 		</div>
 	{/each}
 	<hr />
 	<div class="links">
+		<!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
 		<a on:click={statuses.setCompatibleVisible}>
 			<i class="fas fa-thumbs-up" /> {localize("mcc.showCompatible")}
 		</a>
+		<!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
 		<a on:click={() => spreadsheetStore.resetFilters()}>
 			<i class="fas fa-trash" /> {localize("mcc.resetFilters")}
 		</a>

src/view/table/Controls.svelte

@@ -57,6 +57,7 @@
 
 <nav>
 	<!-- TODO: link elements with id -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label>{localize("mcc.selectVersion")}</label>
 	<TJSSelect {select} />
 

src/view/table/Rows.svelte

@@ -26,19 +26,19 @@
 					{
 						label: "mcc.packageListingURL",
 						icon: "fas fa-external-link",
-						onclick: () => window.open(`https://foundryvtt.com/packages/${linkData.id}`, "_blank"),
+						onPress: () => window.open(`https://foundryvtt.com/packages/${linkData.id}`, "_blank"),
 					},
 					{
 						label: "mcc.foundryHubURL",
 						icon: "fas fa-external-link",
 						image: "https://www.foundryvtt-hub.com/wp-content/uploads/2021/08/foundryhublogo4-verysmall.webp",
-						onclick: () => window.open(`https://www.foundryvtt-hub.com/package/${linkData.id}`, "_blank"),
+						onPress: () => window.open(`https://www.foundryvtt-hub.com/package/${linkData.id}`, "_blank"),
 					},
 					{
 						label: "mcc.bazaarURL",
 						icon: "fas fa-external-link",
 						image: "https://forge-vtt.com/images/the-forge-logo-48x48.png",
-						onclick: () => window.open(`https://forge-vtt.com/bazaar/package/${linkData.id}`, "_blank"),
+						onPress: () => window.open(`https://forge-vtt.com/bazaar/package/${linkData.id}`, "_blank"),
 					}
 				);
 			}
@@ -47,7 +47,7 @@
 				items.push({
 					label: "mcc.projectURL",
 					icon: "fas fa-code",
-					onclick: () => window.open(linkData.url, "_blank"),
+					onPress: () => window.open(linkData.url, "_blank"),
 				});
 			}
 

styles/init.scss

@@ -1,3 +1,9 @@
+// Provides blue text shadow for package context menu.
+#mmc-package-menu {
+	--tjs-default-popup-background: hsl(220, 30%, 20%);
+	--tjs-default-text-shadow-focus-hover: 0 0 8px blue;
+}
+
 // Unfortunately there are several game systems out there that use `!important` to override styles
 #mcc {
 	accent-color: var(--mcc-medium-color);
@@ -12,11 +18,14 @@
 
 	--tjs-action-ripple-background: linear-gradient(64.5deg, var(--mcc-medium-color) 40%, var(--mcc-light-color) 60% );
 
+	--tjs-default-text-shadow-focus-hover: 0 0 8px blue;
+	--tjs-default-popup-background: var(--mcc-dark-color);
 	--tjs-input-text-padding: 0 0.25em;
 	--tjs-input-placeholder-color: hsl(50deg 15% 30%);
 	--tjs-icon-button-background: hsl(50deg 10% 80%);
 	--tjs-icon-button-background-hover: hsl(50deg 10% 75%);
 	--tjs-icon-button-background-selected: hsla(220, 70%, 60%, 0.2);
+	--tjs-select-option-background: var(--mcc-medium-color);
 
 	.window-content {
 		background: url(../../ui/parchment.jpg) !important;

vite.config.mjs

@@ -21,8 +21,7 @@ export default defineConfig(({ command }) => {
 		resolve: { conditions: ["import", "browser"] },
 
 		esbuild: {
-			target: ["es2022", "chrome100"],
-			keepNames: true, // Note: doesn't seem to work
+			target: ["es2022"]
 		},
 
 		css: {
@@ -49,6 +48,7 @@ export default defineConfig(({ command }) => {
 			hmr: {
 				overlay: false,
 			},
+			fs: { strict: false }
 		},
 
 		build: {
@@ -57,7 +57,7 @@ export default defineConfig(({ command }) => {
 			sourcemap: SOURCEMAPS,
 			brotliSize: true,
 			minify: COMPRESS ? "terser" : false,
-			target: ["es2022", "chrome100"],
+			target: ["es2022"],
 			terserOptions: COMPRESS ? { ...terserConfig(), ecma: 2022 } : void 0,
 			lib: {
 				entry: "./index.js",
@@ -68,26 +68,20 @@ export default defineConfig(({ command }) => {
 
 		plugins: [
 			svelte({
-				preprocess: preprocess(),
-				onwarn: (warning, handler) => {
-					// Suppress `a11y-missing-attribute` for missing href in <a> links
-					// Suppress `a11y-label-has-associated-control` for detached <label> and control
-					if (
-						warning.message.includes("<a> element should have an href attribute") ||
-						warning.message.includes("A form label must be associated with a control")
-					) {
-						return;
-					}
-
-					// Let Rollup handle all other warnings normally
-					handler && handler(warning);
+				compilerOptions: {
+					// Provides a custom hash adding the string defined in `s_SVELTE_HASH_ID` to scoped Svelte styles;
+					// This is reasonable to do as the framework styles in TRL compiled across `n` different packages
+					// will be the same. Slightly modifying the hash ensures that your package has uniquely scoped
+					// styles for all TRL components and makes it easier to review styles in the browser debugger.
+					cssHash: ({ hash, css }) => `svelte-${MODULE_ID}-${hash(css)}`
 				},
+				preprocess: preprocess()
 			}),
 
 			// Necessary when bundling npm-linked packages
 			resolve({
 				browser: true,
-				dedupe: ["svelte"],
+				dedupe: ["svelte", '@typhonjs-fvtt/runtime', '@typhonjs-fvtt/svelte-standard'],
 			}),
 		],
 	};