inline globals

jest.config.json

@@ -2,12 +2,12 @@
   "preset": "ts-jest",
   "resetMocks": true,
   "timers": "modern",
-  "moduleNameMapper": {
-    "blessing-skin": "<rootDir>/types.ts"
-  },
   "transform": {
     "^.+\\.svelte$": "@gplane/svelte-jest",
     "^.+\\.tsx?$": "ts-jest"
   },
-  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
+  "setupFilesAfterEnv": [
+    "@testing-library/jest-dom/extend-expect",
+    "<rootDir>/setup-test.ts"
+  ]
 }

plugins/config-generator/assets/generator.ts

@@ -1,6 +1,5 @@
 import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
-import { site_name, base_url } from 'blessing-skin'
 
 hljs.registerLanguage('json', json)
 
@@ -10,14 +9,14 @@ document
   .querySelector('#download-extra-list')
   ?.addEventListener('click', () => {
     const content = JSON.stringify({
-      name: site_name,
+      name: globalThis.blessing.site_name,
       type: 'CustomSkinAPI',
-      root: `${base_url}/csl/`,
+      root: `${globalThis.blessing.base_url}/csl/`,
     })
 
     const a = document.createElement('a')
     const blob = new Blob([content], { type: 'application/json' })
-    a.download = `${site_name}.json`
+    a.download = `${globalThis.blessing.site_name}.json`
     a.href = URL.createObjectURL(blob)
     a.click()
     a.remove()

plugins/disable-registration/assets/modifyButton.ts

@@ -1,9 +1,7 @@
-import { base_url, t } from 'blessing-skin'
-
 const button = document.querySelector<HTMLAnchorElement>('.main-button')
 if (button && button.href.endsWith('/auth/register')) {
-  button.textContent = t('auth.login')
-  const url = new URL(base_url)
+  button.textContent = globalThis.blessing.t('auth.login')
+  const url = new URL(globalThis.blessing.base_url)
   url.pathname = '/auth/login'
   button.href = url.toString()
 }

plugins/mojang-verification/assets/update-uuid.ts

@@ -1,10 +1,7 @@
-import { fetch, notify } from 'blessing-skin'
-
 document.querySelector('#update-uuid')?.addEventListener('click', async () => {
-  const { code, message }: { code: null; message: string } = await fetch.post(
-    '/mojang/update-uuid',
-  )
-  const { toast } = notify
+  const { code, message }: { code: null; message: string } =
+    await globalThis.blessing.fetch.post('/mojang/update-uuid')
+  const { toast } = globalThis.blessing.notify
   if (code === 0) {
     toast.success(message)
   } else {

plugins/restricted-email-domains/assets/ConfigEditor.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { nanoid } from 'nanoid'
-  import { fetch, t, notify } from 'blessing-skin'
   import DomainsList from './DomainsList.svelte'
 
+  const { fetch, t, notify } = globalThis.blessing
+
   type Item = { id: string; value: string }
 
   let isLoading = true
@@ -13,12 +14,8 @@
   let isDenyListDirty = false
 
   onMount(async () => {
-    const {
-      allow,
-      deny,
-    }: { allow: string[]; deny: string[] } = await fetch.get(
-      '/admin/restricted-email-domains',
-    )
+    const { allow, deny }: { allow: string[]; deny: string[] } =
+      await fetch.get('/admin/restricted-email-domains')
     allowList = allow.map((value) => ({ id: nanoid(), value }))
     denyList = deny.map((value) => ({ id: nanoid(), value }))
     isLoading = false
@@ -80,7 +77,8 @@
       on:edit={() => (isAllowListDirty = true)}
       on:add={createAllowItem}
       on:remove={(event) => removeAllowItem(event.detail)}
-      on:save={saveAllowList} />
+      on:save={saveAllowList}
+    />
   </div>
   <div class="col-lg-6">
     <DomainsList
@@ -92,6 +90,7 @@
       on:edit={() => (isDenyListDirty = true)}
       on:add={createDenyItem}
       on:remove={(event) => removeDenyItem(event.detail)}
-      on:save={saveDenyList} />
+      on:save={saveDenyList}
+    />
   </div>
 </div>

plugins/restricted-email-domains/assets/DomainsList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { t } from 'blessing-skin'
+
+  const { t } = globalThis.blessing
 
   type Item = { id: string; value: string }
 
@@ -37,11 +38,13 @@
             type="text"
             class="form-control"
             bind:value={item.value}
-            on:input={() => dispath('edit')} />
+            on:input={() => dispath('edit')}
+          />
           <div class="input-group-append">
             <button
               class="btn btn-secondary"
-              on:click={() => dispath('remove', item.id)}>
+              on:click={() => dispath('remove', item.id)}
+            >
               <i class="fas fa-trash" />
             </button>
           </div>

plugins/restricted-email-domains/assets/autocomplete.ts

@@ -1,14 +1,15 @@
-import { event } from 'blessing-skin'
+globalThis.blessing.event.on(
+  'emailDomainsSuggestion',
+  (domains: Set<string>) => {
+    const allowListJSON = document.querySelector('#allowed-email-domains')
+    if (!allowListJSON) {
+      return
+    }
 
-event.on('emailDomainsSuggestion', (domains: Set<string>) => {
-  const allowListJSON = document.querySelector('#allowed-email-domains')
-  if (!allowListJSON) {
-    return
-  }
-
-  const allowList: string[] = JSON.parse(allowListJSON.textContent ?? '[]')
-  if (allowList.length > 0) {
-    domains.clear()
-    allowList.forEach((domain) => domains.add(domain))
-  }
-})
+    const allowList: string[] = JSON.parse(allowListJSON.textContent ?? '[]')
+    if (allowList.length > 0) {
+      domains.clear()
+      allowList.forEach((domain) => domains.add(domain))
+    }
+  },
+)

plugins/share-registration-link/assets/registration.ts

@@ -1,6 +1,7 @@
-import { event } from 'blessing-skin'
-
-event.on('beforeFetch', (request: { data: Record<string, string> }) => {
-  const search = new URLSearchParams(location.search)
-  request.data.share = search.get('share') || ''
-})
+globalThis.blessing.event.on(
+  'beforeFetch',
+  (request: { data: Record<string, string> }) => {
+    const search = new URLSearchParams(location.search)
+    request.data.share = search.get('share') || ''
+  },
+)

plugins/texture-description/assets/Description.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { fetch, t, notify } from 'blessing-skin'
+
+  const { fetch, t, notify } = globalThis.blessing
 
   let description = ''
   let raw = ''
@@ -51,23 +52,6 @@
   }
 </script>
 
-<style>
-  description-content :global(h1),
-  description-content :global(h2) {
-    padding-bottom: 0.3rem;
-    border-bottom: 1px solid #eaecef;
-  }
-
-  description-content :global(blockquote) {
-    color: #aaa;
-    border-left: 0.3rem solid #aaa;
-  }
-
-  description-content :global(hr) {
-    border-top-width: 4px;
-  }
-</style>
-
 {#if canEdit || !isEmptyDescription}
   <div class="card card-secondary">
     <div class="card-header">
@@ -77,7 +61,8 @@
           <button
             class="btn btn-secondary btn-sm float-right"
             title={t('texture-description.edit')}
-            on:click={editDescription}>
+            on:click={editDescription}
+          >
             <i class="fas fa-edit" />
           </button>
         {/if}
@@ -107,7 +92,8 @@
           <button
             class="btn btn-primary"
             disabled={isSubmitting || isLengthExceeded}
-            on:click={submitDescription}>
+            on:click={submitDescription}
+          >
             {#if isSubmitting}
               <span>
                 <i class="fas fa-sync fa-spin" />
@@ -117,7 +103,8 @@
           <button
             class="btn btn-secondary"
             disabled={isSubmitting}
-            on:click={() => (isEditing = false)}>
+            on:click={() => (isEditing = false)}
+          >
             {t('general.cancel')}
           </button>
         </div>
@@ -125,3 +112,20 @@
     {/if}
   </div>
 {/if}
+
+<style>
+  description-content :global(h1),
+  description-content :global(h2) {
+    padding-bottom: 0.3rem;
+    border-bottom: 1px solid #eaecef;
+  }
+
+  description-content :global(blockquote) {
+    color: #aaa;
+    border-left: 0.3rem solid #aaa;
+  }
+
+  description-content :global(hr) {
+    border-top-width: 4px;
+  }
+</style>

plugins/texture-description/assets/Description.test.ts

@@ -1,8 +1,9 @@
 import { render, fireEvent, waitFor } from '@testing-library/svelte'
 import { tick } from 'svelte'
-import { fetch, t } from 'blessing-skin'
 import Description from './Description.svelte'
 
+const { fetch, t } = globalThis.blessing
+
 test('render description', async () => {
   const spy = jest.spyOn(fetch, 'get').mockResolvedValue('<div id="md"></div>')
   render(Description, { props: { tid: 1 } })

plugins/texture-description/assets/UploadEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte'
-  import { event, t } from 'blessing-skin'
+
+  const { event, t } = globalThis.blessing
 
   let description = ''
   export let maxLength = Infinity
@@ -18,7 +19,8 @@
   id="description-editor"
   class="form-control"
   rows="9"
-  bind:value={description} />
+  bind:value={description}
+/>
 {#if description.length > maxLength}
   <div class="alert alert-info mt-2">
     {t('texture-description.exceeded', { max: maxLength })}

plugins/texture-description/assets/UploadEditor.test.ts

@@ -1,8 +1,9 @@
 import { render, fireEvent } from '@testing-library/svelte'
 import { tick } from 'svelte'
-import { event, t } from 'blessing-skin'
 import UploadEditor from './UploadEditor.svelte'
 
+const { event, t } = globalThis.blessing
+
 test('submit data', () => {
   const { getByLabelText } = render(UploadEditor)
   fireEvent.input(getByLabelText(t('texture-description.description')), {

plugins/texture-description/assets/UploadEditor.ts

@@ -1,7 +1,6 @@
-import { event } from 'blessing-skin'
 import UploadEditor from './UploadEditor.svelte'
 
-event.on('mounted', () => {
+globalThis.blessing.event.on('mounted', () => {
   const input = document.querySelector<HTMLInputElement>('#description-limit')
   const maxLength = Number.parseInt(input?.value ?? '0') || Infinity
 

setup-test.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from 'events'
+
+class Toast {
+  success(message: string): void {
+    message
+  }
+  info(message: string): void {
+    message
+  }
+  warning(message: string): void {
+    message
+  }
+  error(message: string): void {
+    message
+  }
+}
+
+const base_url = '/'
+const locale = 'en'
+const site_name = 'Blessing Skin'
+
+function t(key: string, params?: object): string {
+  const data = params ? `(${JSON.stringify(params)})` : ''
+
+  return key + data
+}
+
+const fetch = {
+  async get<T = any>(url: string, params?: Record<string, any>): Promise<T> {
+    url
+    params
+    return {} as T
+  },
+  async post<T = any>(url: string, data?: any): Promise<T> {
+    url
+    data
+    return {} as T
+  },
+  async put<T = any>(url: string, data?: any): Promise<T> {
+    url
+    data
+    return {} as T
+  },
+  async del<T = any>(url: string, data?: any): Promise<T> {
+    url
+    data
+    return {} as T
+  },
+}
+
+const emitter = new EventEmitter()
+const event = {
+  on(
+    eventName: string | symbol,
+    listener: (...args: any[]) => any,
+  ): () => void {
+    emitter.on(eventName, listener)
+
+    return () => {
+      emitter.off(eventName, listener)
+    }
+  },
+  emit(eventName: string | symbol, payload?: object): void {
+    emitter.emit(eventName, payload)
+  },
+}
+
+const notify = {
+  showModal(options?: object): Promise<{ value: string }> {
+    return Promise.resolve({ value: JSON.stringify(options) })
+  },
+  toast: new Toast(),
+}
+
+Object.assign(globalThis, {
+  blessing: {
+    base_url,
+    locale,
+    site_name,
+    t,
+    fetch,
+    event,
+    notify,
+  },
+})

tsconfig.json

@@ -11,5 +11,5 @@
     },
     "types": ["svelte", "jest", "node", "@testing-library/jest-dom"]
   },
-  "include": ["plugins/*/assets", "types.ts"]
+  "include": ["plugins/*/assets", "types.ts", "globals.d.ts"]
 }