🔀 Merge #489: 🔖 v1.10.0-beta.5

Author: SnaveSutit

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+name: Build and Test
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+
+    steps:
+      - uses: actions/checkout@v5
+      - uses: oven-sh/setup-bun@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build
+        run: bun run build
+
+      - name: Run tests
+        run: bun test

tools/cleanupDist.cjs .scripts/cleanupDist.cjstools/cleanupDist.cjs renamed to .scripts/cleanupDist.cjs

@@ -7,21 +7,24 @@ if (process.argv.includes('--mode=dev')) {
 process.env.FLAVOR ??= `local`
 
 import * as esbuild from 'esbuild'
+import importFolderPlugin from 'esbuild-plugin-import-folder'
 import ImportGlobPlugin from 'esbuild-plugin-import-glob'
 import inlineImage from 'esbuild-plugin-inline-image'
 import * as fs from 'fs'
 import { load } from 'js-yaml'
 import vscodeProblemsPatch from 'node-modules-vscode-problems-patch'
-import * as path from 'path'
-import { isAbsolute, join } from 'path'
+import * as path from 'node:path'
+import { isAbsolute, join } from 'node:path'
+import {
+	createBlockbenchSvelteConfig,
+	esbuildPluginSvelte,
+} from 'svelte-patching-tools/esbuildPlugin'
 import { TextDecoder } from 'util'
-import svelteConfig from '../svelte.config.js'
 import assetOverridePlugin from './plugins/assetOverridePlugin'
 import bufferPatchPlugin from './plugins/bufferPatchFunction.js'
-import importFolderPlugin from './plugins/importFolder'
+import langPlugin from './plugins/lang'
 import mcbCompressionPlugin from './plugins/mcbCompressionPlugin'
 import packagerPlugin from './plugins/packagerPlugin'
-import sveltePlugin from './plugins/sveltePlugin'
 const PACKAGE = JSON.parse(fs.readFileSync('./package.json', 'utf-8'))
 
 const INFO_PLUGIN: esbuild.Plugin = {
@@ -134,34 +137,7 @@ function createBanner() {
 		return '│ ' + ' '.repeat(l) + v + ' '.repeat(r) + ' │'
 	})
 
-	const message = `
-# Animated Java does not work in Blockbench 5
-
-You will need to install and use Blockbench v4.12.6 to use Animated Java until it is updated to support 5.
-
-## How to install Blockbench v4.12.6
-
-1. Download the portable version of Blockbench 4.12.6 [here](https://github.com/JannisX11/blockbench/releases/download/v4.12.6/Blockbench_4.12.6_portable.exe).
-2. Once it's finished downloading, double click the .exe file to run it.
-
-If you're familiar with command line interfaces, you can use [Envbench](https://www.npmjs.com/package/envbench) to install and manage multiple Blockbench versions side by side.
-`
-
-	const startupCode = `(() => {
-	if (!compareVersions('5.0.0', Blockbench.version)) {
-		const message = \`${message}\`;
-		Blockbench.showMessageBox({title: 'Animated Java - Incompatible Blockbench Version',message,width:600});
-		requestAnimationFrame(() => Plugins.registered['animated_java'].uninstall());
-		throw new Error(message);
-	}
-})()`.trim()
-
-	const banner =
-		'\n' +
-		[header, ...lines, footer].map(v => `//?? ${v}`).join('\n') +
-		'\n\n' +
-		startupCode +
-		'\n'
+	const banner = '\n' + [header, ...lines, footer].map(v => `//?? ${v}`).join('\n')
 
 	return {
 		js: banner,
@@ -205,17 +181,27 @@ const yamlPlugin: (opts: {
 	},
 })
 
+import VSCODE_SETTINGS from '../.vscode/settings.json'
+const IGNORED_SVELTE_WARNINGS = Object.keys(
+	VSCODE_SETTINGS['svelte.plugin.svelte.compilerWarnings']
+)
+
 const COMMON_CONFIG: esbuild.BuildOptions = {
 	banner: createBanner(),
 	entryPoints: ['./src/index.ts'],
 	outfile: `./dist/${PACKAGE.name}.js`,
 	bundle: true,
-	platform: 'node',
+	platform: 'browser',
+	external: ['node:*'],
 	loader: { '.svg': 'dataurl', '.ttf': 'binary', '.css': 'text' },
 	plugins: [
+		langPlugin({
+			languageFolder: 'src/lang',
+		}),
 		// @ts-expect-error broken default import
 		vscodeProblemsPatch.default(),
-		importFolderPlugin,
+		// @ts-expect-error broken default import
+		importFolderPlugin.default(),
 		// @ts-expect-error broken default import
 		ImportGlobPlugin.default(),
 		bufferPatchPlugin(),
@@ -224,15 +210,36 @@ const COMMON_CONFIG: esbuild.BuildOptions = {
 		}),
 		INFO_PLUGIN,
 		yamlPlugin({}),
-		sveltePlugin(svelteConfig),
+		esbuildPluginSvelte(
+			createBlockbenchSvelteConfig(PACKAGE.name, {
+				compilerOptions: {
+					warningFilter(warning: any) {
+						return !IGNORED_SVELTE_WARNINGS.includes(warning.code)
+					},
+					compatibility: {
+						componentApi: 4,
+					},
+					// @ts-expect-error - not typed correctly
+					generate: 'client',
+				},
+			})
+		),
 		packagerPlugin(),
 		assetOverridePlugin(),
 		mcbCompressionPlugin(),
 		DEPENDENCY_QUARKS,
 	],
-	alias: { svelte: 'svelte' },
+	alias: {
+		svelte: 'svelte',
+		module: './.scripts/fakeModule.js',
+		'node:module': './.scripts/fakeModule.js',
+	},
 	format: 'iife',
 	define: DEFINES,
+	inject: [
+		// Blockbench does not provide access to the global process, but some of our dependencies expect it to exist.
+		`./.scripts/fakeProcess.js`,
+	],
 	treeShaking: true,
 }
 

tools/esbuild.ts .scripts/esbuild.tstools/esbuild.ts renamed to .scripts/esbuild.ts

@@ -0,0 +1,8 @@
+const Module = {
+	createRequire() {
+		return {}
+	},
+}
+
+export { Module as module }
+export default Module

.scripts/fakeModule.js

@@ -0,0 +1,9 @@
+const process = {
+	__NOTE: 'This is a fake process object added by Animated Java. It is not the actual Node.js process object.',
+	cwd: () => '',
+	env: {},
+	version: 'v24.14.0',
+	argv: '',
+}
+
+export { process }

.scripts/fakeProcess.js

@@ -1,6 +1,6 @@
 import type { Plugin } from 'esbuild'
 import * as fs from 'fs/promises'
-import * as pathjs from 'path'
+import * as pathjs from 'node:path'
 
 const ASSET_OVERRIDES_PATH = 'src/assets/vanillaAssetOverrides/'
 

tools/plugins/assetOverridePlugin.ts .scripts/plugins/assetOverridePlugin.tstools/plugins/assetOverridePlugin.ts renamed to .scripts/plugins/assetOverridePlugin.ts

@@ -0,0 +1,20 @@
+interface LangPluginOptions {
+	languageFolder: string
+}
+
+interface StructuredLanguageFile {
+	[key: string]: string | StructuredLanguageFile
+}
+
+interface LanguageDefinition {
+	name: string
+	structured: StructuredLanguageFile
+	flattened: Record<string, string>
+}
+
+declare module 'LANGUAGES' {
+	export const LANGUAGES: Record<string, LanguageDefinition>
+	export function flattenStructuredLanguageFile(
+		file: StructuredLanguageFile
+	): Record<string, string>
+}

tools/plugins/bufferPatchFunction.ts .scripts/plugins/bufferPatchFunction.tstools/plugins/bufferPatchFunction.ts renamed to .scripts/plugins/bufferPatchFunction.ts

@@ -0,0 +1,79 @@
+/// <reference path="./lang.d.ts"/>
+
+import ESBuild from 'esbuild'
+import { existsSync } from 'fs'
+import { readdir, readFile } from 'fs/promises'
+import { load } from 'js-yaml'
+import { join } from 'path'
+
+const filterYamlFiles = (file: string) => {
+	return file.endsWith('.yml') || file.endsWith('.yaml')
+}
+
+const flattenStructuredLanguageFile = (file: StructuredLanguageFile): Record<string, string> => {
+	const result: Record<string, string> = {}
+	for (const key in file) {
+		if (typeof file[key] === 'string') {
+			result[key] = file[key]
+			continue
+		}
+
+		for (const [subKey, value] of Object.entries(flattenStructuredLanguageFile(file[key]))) {
+			result[`${key}.${subKey}`] = value
+		}
+	}
+	return result
+}
+
+const langPlugin = ({ languageFolder }: LangPluginOptions) =>
+	({
+		name: 'lang',
+		setup(build) {
+			if (!existsSync(languageFolder)) {
+				throw new Error(`Language folder "${languageFolder}" does not exist.`)
+			}
+
+			build.onResolve({ filter: /LANGUAGES/ }, () => {
+				return {
+					path: languageFolder,
+					namespace: 'language-file',
+				}
+			})
+
+			build.onLoad({ filter: /.*/, namespace: 'language-file' }, async () => {
+				const translations: Record<string, LanguageDefinition> = {}
+
+				const files = (await readdir(languageFolder)).filter(filterYamlFiles)
+				if (files.length === 0) {
+					console.warn(`No language files found in "${languageFolder}"`)
+				}
+
+				const watchFiles: string[] = []
+
+				for (const file of files) {
+					const path = join(languageFolder, file)
+					watchFiles.push(path)
+
+					const name = file.replace(/\.(yml|yaml)$/, '')
+					const structured: StructuredLanguageFile = await readFile(path, {
+						encoding: 'utf-8',
+					}).then(data => load(data, { filename: path }) as StructuredLanguageFile)
+					const flattened = flattenStructuredLanguageFile(structured)
+
+					translations[name] = { name, structured, flattened }
+				}
+
+				const contents =
+					`export const LANGUAGES = ${JSON.stringify(translations)};` +
+					`export const flattenStructuredLanguageFile = ${flattenStructuredLanguageFile.toString()};`
+
+				return {
+					contents,
+					loader: 'js',
+					watchFiles,
+				}
+			})
+		},
+	}) satisfies ESBuild.Plugin
+
+export default langPlugin

.scripts/plugins/lang.d.ts

@@ -1,8 +1,8 @@
 import type { Plugin } from 'esbuild'
-import * as fflate from 'fflate'
+import * as fflate from 'fflate/browser'
 import { existsSync } from 'fs'
 import * as fs from 'fs/promises'
-import * as pathjs from 'path'
+import * as pathjs from 'node:path'
 
 function zip(data: fflate.AsyncZippable): Promise<Uint8Array> {
 	return new Promise((resolve, reject) => {
@@ -59,7 +59,7 @@ export default getZipFile('${localPath}')
 				const data = Buffer.from(zipped).toString('base64')
 				return {
 					contents: `
-import * as fflate from 'fflate'
+import * as fflate from 'fflate/browser'
 const unzipped = fflate.unzipSync(Uint8Array.from(atob('${data}'), c => c.charCodeAt(0)))
 export default function getFile(path) {
 	return Buffer.from(unzipped[path]).toString('utf-8')