fix: glob imports are not transformed

package.json

@@ -51,6 +51,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-storybook": "^0.8.0",
 		"eslint-plugin-svelte": "^2.35.1",
+		"glob": "^10.3.10",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",

scripts/generateGlobImports.mjs

@@ -0,0 +1,61 @@
+import { globIterate } from 'glob'
+import { writeFile } from 'fs/promises'
+import { format, resolveConfig } from 'prettier'
+
+const prettierConfig = await resolveConfig()
+
+const generateIcons = async () => {
+	const outputPath = 'src/lib/assets/icons/index.ts'
+	const prefix = 'src/lib/assets/icons/'
+
+	const lines = []
+	const names = []
+
+	for await (const i of globIterate('src/lib/assets/icons/*.svg')) {
+		const name = i.slice(prefix.length, i.length - 4)
+		lines.push(`import ${name} from './${name}.svg?url'`)
+		names.push(name)
+	}
+
+	lines.push('')
+	lines.push(
+		`export const iconUrls: Record<string, string> = {\n${names.map((x) => `\t${x}`).join(',\n')}\n}`
+	)
+	lines.push('')
+	lines.push(`export const iconNames: string[] = ${JSON.stringify(names)}`)
+
+	await writeFile(
+		outputPath,
+		await format(lines.join('\n'), { ...prettierConfig, parser: 'typescript' })
+	)
+}
+
+const generateTranslations = async () => {
+	const outputPath = 'src/lib/localization/translations/index.ts'
+	const prefix = 'src/lib/localization/translations/'
+
+	const lines = []
+	const translationData = []
+
+	for await (const i of globIterate('src/lib/localization/translations/*/*.ftl')) {
+		const name = i.slice(prefix.length, i.length - 4)
+		const importName = name.replace(/\//g, '_')
+
+		lines.push(`import ${importName} from './${name}.ftl?raw'`)
+
+		translationData.push(`${JSON.stringify(name)}: ${importName}`)
+	}
+
+	lines.push('')
+
+	lines.push(
+		`export const translationData: Record<string, string> = {\n${translationData.map((x) => `\t${x}`).join(',\n')}\n}`
+	)
+
+	await writeFile(
+		outputPath,
+		await format(lines.join('\n'), { ...prettierConfig, parser: 'typescript' })
+	)
+}
+
+await Promise.all([generateIcons(), generateTranslations()])

src/lib/assets/icons/index.ts

@@ -0,0 +1,114 @@
+import topLeft from './topLeft.svg?url'
+import tag from './tag.svg?url'
+import steam from './steam.svg?url'
+import speed from './speed.svg?url'
+import sort from './sort.svg?url'
+import shuffle from './shuffle.svg?url'
+import show from './show.svg?url'
+import sheet from './sheet.svg?url'
+import share from './share.svg?url'
+import search from './search.svg?url'
+import scale from './scale.svg?url'
+import refresh from './refresh.svg?url'
+import question from './question.svg?url'
+import plusFilled from './plusFilled.svg?url'
+import playOutlined from './playOutlined.svg?url'
+import playFilled from './playFilled.svg?url'
+import minusFilled from './minusFilled.svg?url'
+import list from './list.svg?url'
+import hide from './hide.svg?url'
+import help from './help.svg?url'
+import heartOutlined from './heartOutlined.svg?url'
+import heart from './heart.svg?url'
+import fire from './fire.svg?url'
+import filter from './filter.svg?url'
+import expand from './expand.svg?url'
+import downloadFile from './downloadFile.svg?url'
+import download from './download.svg?url'
+import copy from './copy.svg?url'
+import cogs from './cogs.svg?url'
+import close from './close.svg?url'
+import chevronLeft from './chevronLeft.svg?url'
+import check from './check.svg?url'
+import calendar from './calendar.svg?url'
+import bottomRight from './bottomRight.svg?url'
+import bottomArrowCircleOutlined from './bottomArrowCircleOutlined.svg?url'
+import accuracy from './accuracy.svg?url'
+
+export const iconUrls: Record<string, string> = {
+	topLeft,
+	tag,
+	steam,
+	speed,
+	sort,
+	shuffle,
+	show,
+	sheet,
+	share,
+	search,
+	scale,
+	refresh,
+	question,
+	plusFilled,
+	playOutlined,
+	playFilled,
+	minusFilled,
+	list,
+	hide,
+	help,
+	heartOutlined,
+	heart,
+	fire,
+	filter,
+	expand,
+	downloadFile,
+	download,
+	copy,
+	cogs,
+	close,
+	chevronLeft,
+	check,
+	calendar,
+	bottomRight,
+	bottomArrowCircleOutlined,
+	accuracy
+}
+
+export const iconNames: string[] = [
+	'topLeft',
+	'tag',
+	'steam',
+	'speed',
+	'sort',
+	'shuffle',
+	'show',
+	'sheet',
+	'share',
+	'search',
+	'scale',
+	'refresh',
+	'question',
+	'plusFilled',
+	'playOutlined',
+	'playFilled',
+	'minusFilled',
+	'list',
+	'hide',
+	'help',
+	'heartOutlined',
+	'heart',
+	'fire',
+	'filter',
+	'expand',
+	'downloadFile',
+	'download',
+	'copy',
+	'cogs',
+	'close',
+	'chevronLeft',
+	'check',
+	'calendar',
+	'bottomRight',
+	'bottomArrowCircleOutlined',
+	'accuracy'
+]

src/lib/assets/index.ts

@@ -1,23 +1,17 @@
-export const getIconClass = (name: string) => `icon__${name}`
-
-const icons = import.meta.glob('./icons/*.svg', {
-	eager: true,
-	query: '?url',
-	import: 'default'
-})
+import { iconUrls, iconNames } from './icons/index.js'
 
-const iconPrefix = './icons/'
-export const iconNames = Object.keys(icons).map((x) => x.slice(iconPrefix.length, x.length - 4))
+export const getIconClass = (name: string) => `icon__${name}`
 
 export const generateIconStyles = () => {
 	const css: string[] = []
-	for (const key in icons) {
-		const name = key.slice(iconPrefix.length, key.length - 4)
-		const url = icons[key]
-		const element = `.${getIconClass(name)} { --icon-url: url('${(url as string).replace(/'/g, '%27')}') }`
+	for (const iconName of iconNames) {
+		const url = iconUrls[iconName]
+		const element = `.${getIconClass(iconName)} { --icon-url: url('${url.replace(/'/g, '%27')}') }`
 
 		css.push(element)
 	}
 
 	return `<style>\n${css.join('\n')}\n</style>`
 }
+
+export { iconNames }

src/lib/components/Popover.svelte

@@ -4,6 +4,7 @@
 
 	import tippy, { type Placement, type Props } from 'tippy.js'
 	import type { Action } from 'svelte/action'
+	import { BROWSER } from 'esm-env'
 
 	export let placement: Placement = 'auto'
 
@@ -66,10 +67,12 @@
 	const buttonRef: Action = (node) => {
 		button = node
 	}
+
+	const display = BROWSER ? 'block' : 'none'
 </script>
 
 <slot name="button" {buttonRef} />
 
-<div bind:this={content} role="menu">
+<div bind:this={content} role="menu" style="width: {display};">
 	<slot />
 </div>

src/lib/localization/translations/index.ts

@@ -0,0 +1,15 @@
+import ko_nav from './ko/nav.ftl?raw'
+import ko_footer from './ko/footer.ftl?raw'
+import ko_common from './ko/common.ftl?raw'
+import en_nav from './en/nav.ftl?raw'
+import en_footer from './en/footer.ftl?raw'
+import en_common from './en/common.ftl?raw'
+
+export const translationData: Record<string, string> = {
+	'ko/nav': ko_nav,
+	'ko/footer': ko_footer,
+	'ko/common': ko_common,
+	'en/nav': en_nav,
+	'en/footer': en_footer,
+	'en/common': en_common
+}

src/lib/utils/translation.ts

@@ -5,6 +5,7 @@ import { BROWSER } from 'esm-env'
 import Cookies from 'js-cookie'
 
 import { FluentBundle, FluentResource, type FluentVariable } from '@fluent/bundle'
+import { translationData } from '$lib/localization/translations/index.js'
 
 export const availableLanguages: LangResponse[] = langs
 
@@ -19,16 +20,8 @@ export type StringTranslationKey = `${LangSection}:` | (`${LangSection}:${string
 export type ArrayTranslationKey = [LangSection, string]
 export type TranslationKey = StringTranslationKey | ArrayTranslationKey
 
-const rawFluentFiles = import.meta.glob('../localization/translations/**/*.ftl', {
-	eager: true,
-	query: '?raw',
-	import: 'default'
-}) as Record<string, string>
 const sourceResources = Object.fromEntries(
-	langSections.map((x) => [
-		x,
-		new FluentResource(rawFluentFiles[`../localization/translations/en/${x}.ftl`])
-	])
+	langSections.map((x) => [x, new FluentResource(translationData[`en/${x}`])])
 )
 
 const buildLangBundle = (lang: string): LangData => {
@@ -39,7 +32,7 @@ const buildLangBundle = (lang: string): LangData => {
 		setupFunctions(bundle)
 
 		bundle.addResource(sourceResources[section])
-		const rawData = rawFluentFiles[`../localization/translations/${lang}/${section}.ftl`]
+		const rawData = translationData[`${lang}/${section}`]
 		const errors = bundle.addResource(new FluentResource(rawData), { allowOverrides: true })
 		for (const error of errors) {
 			console.warn('Fluent resource load error:', error)