Sort imports and fix tests

.github/workflows/ci.yml

@@ -71,6 +71,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install Playwright browser
+        run: pnpm exec playwright install chromium
+
       - name: Run tests
         run: pnpm run test:cov
 

package.json

@@ -82,6 +82,7 @@
     "less": "^4.2.0",
     "mock-local-storage": "^1.1.24",
     "mwn": "^2.0.3",
+    "playwright": "^1.48.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
@@ -95,7 +96,6 @@
     "vite-plugin-comlink": "^5.0.1",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vitest": "^2.1.3",
-    "vue-tsc": "^2.1.6",
-    "webdriverio": "^8.40.6"
+    "vue-tsc": "^2.1.6"
   }
 }

scripts/purgeCdnCache.ts

@@ -1,5 +1,5 @@
-import 'dotenv/config'
 import { glob } from 'glob'
+import 'dotenv/config'
 
 const env = process.env
 

scripts/updateGadgets.ts

@@ -1,10 +1,10 @@
-import 'dotenv/config'
-import { promises as fs } from 'node:fs'
+import type { DeployTarget } from './deployConfig'
 import { exec } from 'node:child_process'
+import { promises as fs } from 'node:fs'
 import { promisify } from 'node:util'
 import { Mwn } from 'mwn'
-import type { DeployTarget } from './deployConfig'
 import { targets } from './deployConfig'
+import 'dotenv/config'
 
 const { stdout: commitHash } = await promisify(exec)('git rev-parse HEAD')
 

src/init.ts

@@ -1,7 +1,7 @@
+import { postMessageParent } from './utils/iframe'
+import { theme as themeRef } from './utils/theme'
 import '@wikimedia/codex/dist/codex.style.css'
 import './common.less'
-import { theme as themeRef } from './utils/theme'
-import { postMessageParent } from './utils/iframe'
 
 // use ResizeObserver to detect change of height and postMessage to parent
 

src/tools/armor/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
 import { CdxSelect, CdxTextInput } from '@wikimedia/codex'
+import { computed, reactive, ref } from 'vue'
 
 type ArmorMaterial = 'empty' | 'leather' | 'golden' | 'chainmail' | 'iron' | 'diamond' | 'netherite'
 type HelmetMaterial = 'turtle' | ArmorMaterial

src/tools/armor/main.ts

@@ -1,6 +1,6 @@
-import '@/init'
 import * as vue from 'vue'
 import App from './App.vue'
+import '@/init'
 
 const targetEl = document.querySelector('#app')!
 

src/tools/armorColor/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import CalcField from '@/components/CalcField.vue'
+import { type Color, colorStringToRgb, imgNames } from '@/utils/color'
 import { CdxButton, CdxTab, CdxTabs } from '@wikimedia/codex'
+import { nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { type Color, colorStringToRgb, imgNames } from '@/utils/color'
-import CalcField from '@/components/CalcField.vue'
 
 const props = defineProps<{ type: 'normal' | 'horse' | 'wolf' }>()
 

src/tools/armorColor/main.ts

@@ -1,9 +1,9 @@
-import '@/init'
+import { createMcwI18n } from '@/utils/i18n'
+import { getParams, handleParseError } from '@/utils/params'
 import * as vue from 'vue'
 import { z } from 'zod'
 import App from './App.vue'
-import { getParams, handleParseError } from '@/utils/params'
-import { createMcwI18n } from '@/utils/i18n'
+import '@/init'
 
 const targetEl = document.querySelector('#app')!
 const i18n = createMcwI18n(import.meta.glob('./locale/*.json', { eager: true }))

src/tools/armorColor/worker.ts

@@ -1,6 +1,6 @@
-import { colorRgbMap as javaColorRgbMap } from '@/utils/color/java'
-import { colorRgbMap as bedrockColorRgbMap } from '@/utils/color/bedrock'
 import { type Color, colorToSequence as func, sequenceToColorFloatAverage } from '@/utils/color'
+import { colorRgbMap as bedrockColorRgbMap } from '@/utils/color/bedrock'
+import { colorRgbMap as javaColorRgbMap } from '@/utils/color/java'
 
 function sequenceToColorJavaArmor(
   c: Color[],

src/tools/banner/App.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import type { Color } from '@/utils/color'
+import CalcField from '@/components/CalcField.vue'
+import { colorMap, colorRgbMap } from '@/utils/color/java'
+import { isEmbedded, parentUrl, postMessageParent } from '@/utils/iframe'
+import { theme } from '@/utils/theme'
+import { useLocalStorage } from '@vueuse/core'
 import {
   CdxButton,
   CdxIcon,
@@ -8,7 +13,6 @@ import {
   CdxToggleButtonGroup,
   type MenuItemData,
 } from '@wikimedia/codex'
-import { useI18n } from 'vue-i18n'
 import {
   cdxIconAlert,
   cdxIconDownTriangle,
@@ -18,13 +22,9 @@ import {
   cdxIconTrash,
   cdxIconUpTriangle,
 } from '@wikimedia/codex-icons'
-import { useLocalStorage } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BannerPopup from './BannerPopup.vue'
-import { colorMap, colorRgbMap } from '@/utils/color/java'
-import type { Color } from '@/utils/color'
-import CalcField from '@/components/CalcField.vue'
-import { isEmbedded, parentUrl, postMessageParent } from '@/utils/iframe'
-import { theme } from '@/utils/theme'
 
 const props = defineProps<{ icon: 'banner' | 'shield' }>()
 

src/tools/banner/BannerPopup.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CdxButton, CdxIcon } from '@wikimedia/codex'
 import { flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { onClickOutside } from '@vueuse/core'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{

src/tools/banner/main.ts

@@ -1,10 +1,10 @@
-import '@/init'
+import { createMcwI18n } from '@/utils/i18n'
+import { getParams, handleParseError } from '@/utils/params'
+import { CdxTooltip } from '@wikimedia/codex'
 import * as vue from 'vue'
 import { z } from 'zod'
-import { CdxTooltip } from '@wikimedia/codex'
 import App from './App.vue'
-import { getParams, handleParseError } from '@/utils/params'
-import { createMcwI18n } from '@/utils/i18n'
+import '@/init'
 
 const targetEl = document.querySelector('#app')!
 const i18n = createMcwI18n(import.meta.glob('./locale/*.json', { eager: true }))

src/tools/beaconColor/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import CalcField from '@/components/CalcField.vue'
+import { type Color, colorStringToRgb, imgNames } from '@/utils/color'
 import { CdxButton, CdxTab, CdxTabs } from '@wikimedia/codex'
+import { nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { type Color, colorStringToRgb, imgNames } from '@/utils/color'
-import CalcField from '@/components/CalcField.vue'
 
 const { t } = useI18n()
 

src/tools/beaconColor/main.ts

@@ -1,7 +1,7 @@
-import '@/init'
+import { createMcwI18n } from '@/utils/i18n'
 import * as vue from 'vue'
 import App from './App.vue'
-import { createMcwI18n } from '@/utils/i18n'
+import '@/init'
 
 const targetEl = document.querySelector('#app')!
 

src/tools/beaconColor/worker.ts

@@ -1,6 +1,6 @@
-import { colorRgbMap as javaColorRgbMap } from '@/utils/color/java'
-import { colorRgbMap as bedrockColorRgbMap } from '@/utils/color/bedrock'
 import { colorToSequence as func, sequenceToColorFloatAverage } from '@/utils/color'
+import { colorRgbMap as bedrockColorRgbMap } from '@/utils/color/bedrock'
+import { colorRgbMap as javaColorRgbMap } from '@/utils/color/java'
 
 export async function colorToSequence(
   edition: 'java' | 'bedrock',

src/tools/blockDistribution/App.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import * as d3 from 'd3'
-import { computed, onMounted, onUpdated, ref } from 'vue'
+import { parseWikitext } from '@/utils/i18n'
 import { useLocalStorage } from '@vueuse/core'
 import { CdxCheckbox, CdxTab, CdxTabs } from '@wikimedia/codex'
+import * as d3 from 'd3'
+import { computed, onMounted, onUpdated, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { type Block, endBlockMap, getColor, netherBlockMap, overworldBlockMap } from './data'
-import { parseWikitext } from '@/utils/i18n'
 
 const props = defineProps<{
   blocks: string[]

src/tools/blockDistribution/data.ts

@@ -1,6 +1,6 @@
 import overworldData from './overworld_block_count.json'
-import netherData from './the_nether_block_count.json'
 import endData from './the_end_block_count.json'
+import netherData from './the_nether_block_count.json'
 
 const colorMap = JSON.parse(`{
 "black_carpet":"141519",

src/tools/blockDistribution/main.ts

@@ -1,9 +1,9 @@
-import '@/init'
+import { createMcwI18n } from '@/utils/i18n'
+import { getParams, handleParseError, sz } from '@/utils/params'
 import * as vue from 'vue'
 import { z } from 'zod'
 import App from './App.vue'
-import { getParams, handleParseError, sz } from '@/utils/params'
-import { createMcwI18n } from '@/utils/i18n'
+import '@/init'
 
 const targetEl = document.querySelector('#app')!
 

src/tools/blockStructureRenderer/App.vue

@@ -1,8 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import * as THREE from 'three'
-import WebGL from 'three/addons/capabilities/WebGL.js'
+import type { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+import { BlockStateModelManager } from '@/tools/blockStructureRenderer/model.ts'
+import {
+  bakeBlockMarkers,
+  bakeBlockModelRenderLayer,
+  bakeFluidRenderLayer,
+  bakeInvisibleBlocks,
+  BlockStructure,
+  NameMapping,
+} from '@/tools/blockStructureRenderer/renderer.ts'
+import { saveAsLitematic, saveAsStructureFile } from '@/tools/blockStructureRenderer/structure.ts'
+import { MaterialPicker } from '@/tools/blockStructureRenderer/texture.ts'
+import { flip, offset, shift, useFloating, type VirtualElement } from '@floating-ui/vue'
 import {
   CdxButton,
   CdxCheckbox,
@@ -12,21 +21,12 @@ import {
   CdxTextInput,
 } from '@wikimedia/codex'
 import { cdxIconCamera, cdxIconCut, cdxIconImage, cdxIconShare } from '@wikimedia/codex-icons'
-import type { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+import * as THREE from 'three'
+import WebGL from 'three/addons/capabilities/WebGL.js'
 import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js'
-import { type VirtualElement, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BsrPopup from './BsrPopup.vue'
-import { BlockStateModelManager } from '@/tools/blockStructureRenderer/model.ts'
-import {
-  BlockStructure,
-  NameMapping,
-  bakeBlockMarkers,
-  bakeBlockModelRenderLayer,
-  bakeFluidRenderLayer,
-  bakeInvisibleBlocks,
-} from '@/tools/blockStructureRenderer/renderer.ts'
-import { MaterialPicker } from '@/tools/blockStructureRenderer/texture.ts'
-import { saveAsLitematic, saveAsStructureFile } from '@/tools/blockStructureRenderer/structure.ts'
 
 const props = defineProps<{
   blocks: string[]

src/tools/blockStructureRenderer/BsrPopup.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CdxButton, CdxIcon } from '@wikimedia/codex'
-import { cdxIconClose } from '@wikimedia/codex-icons'
 import { flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { onClickOutside } from '@vueuse/core'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconClose } from '@wikimedia/codex-icons'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{

src/tools/blockStructureRenderer/fluid.ts

@@ -1,8 +1,13 @@
-import * as THREE from 'three'
+import type { BlockStateModelManager } from '@/tools/blockStructureRenderer/model.ts'
 import type { BlockState, FluidState } from '@/tools/blockStructureRenderer/renderer.ts'
 import type { MaterialPicker } from '@/tools/blockStructureRenderer/texture.ts'
-import { SpriteData } from '@/tools/blockStructureRenderer/texture.ts'
-import type { BlockStateModelManager } from '@/tools/blockStructureRenderer/model.ts'
+import {
+  checkNameInSet,
+  getShade,
+  halfTransparentBlocks,
+  leavesBlocks,
+  resolveSpecialTextures,
+} from '@/tools/blockStructureRenderer/hardcodes.ts'
 import {
   Direction,
   getDirectionFromName,
@@ -13,13 +18,8 @@ import {
   moveTowardsDirection,
   oppositeDirection,
 } from '@/tools/blockStructureRenderer/math.ts'
-import {
-  checkNameInSet,
-  getShade,
-  halfTransparentBlocks,
-  leavesBlocks,
-  resolveSpecialTextures,
-} from '@/tools/blockStructureRenderer/hardcodes.ts'
+import { SpriteData } from '@/tools/blockStructureRenderer/texture.ts'
+import * as THREE from 'three'
 
 function isSameFluid(thisFluidState: FluidState, neighborFluidState: FluidState): boolean {
   return thisFluidState.fluid === neighborFluidState.fluid