[build]: fix .d.ts bundle errors

- disallow types auto-importing
- fix "`const` initializer" error

packages/ui/.eslintrc-auto-import.json

@@ -1,13 +1,6 @@
 {
   "globals": {
-    "Component": true,
-    "ComponentPublicInstance": true,
-    "ComputedRef": true,
     "EffectScope": true,
-    "InjectionKey": true,
-    "PropType": true,
-    "Ref": true,
-    "VNode": true,
     "asyncComputed": true,
     "autoResetRef": true,
     "computed": true,

packages/ui/auto-imports.d.ts

@@ -265,8 +265,3 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
-}

packages/ui/package.json

@@ -72,6 +72,7 @@
     "cypress": "^12.7.0",
     "cypress-axe": "^1.0.0",
     "happy-dom": "^8.9.0",
+    "immer": "^9.0.19",
     "postcss": "^8.4.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -80,7 +81,9 @@
     "sass": "^1.41.1",
     "storybook": "^7.0.0-beta.62",
     "tabbable": "^6.0.0",
+    "ts-pattern": "^4.2.1",
     "typescript": "5.0.1-rc",
+    "unimport": "^3.0.2",
     "unplugin-auto-import": "^0.15.1",
     "unplugin-icons": "^0.15.3",
     "vite": "^4.1.4",

packages/ui/rollup.dts.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, type Plugin } from 'rollup'
 import dtsPlugin from 'rollup-plugin-dts'
 import aliasPlugin from '@rollup/plugin-alias'
 import path from 'path'
+import { match } from 'ts-pattern'
 
 const shimCssPlugin = (): Plugin => {
   const CSS_SUFFIX = `.css.d.ts`
@@ -22,12 +23,17 @@ export default defineConfig({
   plugins: [
     aliasPlugin({
       entries: {
-        '@': path.resolve(__dirname, 'src'),
+        '@': path.resolve(__dirname, 'ts-build'),
       },
     }),
     shimCssPlugin(),
     dtsPlugin(),
   ],
+  onwarn(warning, defaultHandler) {
+    match(warning)
+      .with({ code: 'UNUSED_EXTERNAL_IMPORT', id: 'inject' }, () => {})
+      .otherwise(defaultHandler)
+  },
   output: {
     file: 'dist/lid.d.ts',
     format: 'esm',

packages/ui/src/components/BodyScrollLockProvider/index.ts

@@ -1,5 +1,5 @@
 import { MaybeElementRef } from '@vueuse/core'
-import { FunctionalComponent, InjectionKey, PropType } from 'vue'
+import type { VNode, InjectionKey, PropType } from 'vue'
 
 export interface BodyScrollLockApi {
   lock: (elem: Element) => void
@@ -18,7 +18,7 @@ export const SBodyScrollLockProvider = /* @__PURE__ */ defineComponent({
   },
   setup(props, { slots }) {
     provide(BODY_SCROLL_LOCK_API_KEY, props.api)
-    return () => slots.default?.()
+    return (): VNode[] | undefined => slots.default?.()
   },
 })
 

packages/ui/src/components/Popover/SPopover.ts

@@ -1,4 +1,4 @@
-import { Ref, cloneVNode, PropType } from 'vue'
+import { Ref, cloneVNode, PropType, type VNode } from 'vue'
 import { Placement, placements, Instance, State } from '@popperjs/core'
 import { MaybeElementRef } from '@vueuse/core'
 import { not, or } from '@vueuse/math'
@@ -230,7 +230,7 @@ export default /* @__PURE__ */ defineComponent({
 
     provide(POPOVER_API_KEY, api)
 
-    return () => {
+    return (): (VNode | null | undefined | false)[] => {
       let trigger
       {
         if (!slots.trigger) {

packages/ui/src/components/Toasts/SToastsProvider.ts

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, provide } from 'vue'
+import { defineComponent, type PropType, provide, type VNode } from 'vue'
 import { defineToastsApi, TOASTS_API_KEY } from './api'
 
 type ProvideKey = string | Symbol
@@ -33,6 +33,6 @@ export default /* @__PURE__ */ defineComponent({
       provide(key, api)
     }
 
-    return () => slots.default?.()
+    return (): undefined | VNode[] => slots.default?.()
   },
 })

packages/ui/vite.config.ts

@@ -5,9 +5,14 @@ import type { RootNode, TemplateChildNode } from '@vue/compiler-core'
 import iconsPlugin from 'unplugin-icons/vite'
 import svgPlugin from '@soramitsu-ui/vite-plugin-svg'
 import autoImportPlugin from 'unplugin-auto-import/vite'
+import { builtinPresets, type InlinePreset } from 'unimport'
+import { produce } from 'immer'
+import { match } from 'ts-pattern'
 import path from 'path'
+import fs from 'fs/promises'
 import pkg from './package.json' assert { type: 'json' }
 import * as url from 'url'
+import { Plugin } from 'vite'
 
 // const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
@@ -47,6 +52,35 @@ const vueCompilerTransforms = {
   },
 }
 
+function rejectTypeImportsFromPreset(preset: InlinePreset): InlinePreset {
+  return produce(preset, (draft) => {
+    draft.imports = draft.imports.filter((x) => {
+      return match(x)
+        .with({ type: true }, () => false)
+        .otherwise(() => true)
+    })
+  })
+}
+
+/**
+ * When the build is done, it checks the contents of emitted TS declaration file
+ * and prints a warning if it detects any auto-imported types
+ */
+function checkAutoImportedTypesPlugin(checkDts = resolve('auto-imports.d.ts')): Plugin {
+  const testExportType = (dtsContent: string): boolean => {
+    return /export\s+type\s+\{/.test(dtsContent)
+  }
+
+  return {
+    name: 'soramitsu-ui:check-auto-imported-types',
+    apply: 'build',
+    async closeBundle() {
+      const content = await fs.readFile(checkDts, { encoding: 'utf-8' })
+      if (testExportType(content)) this.error(`Type export is detected in auto-imports (file: ${path.relative(process.cwd(), checkDts)})`)
+    },
+  }
+}
+
 export default defineConfig({
   test: {
     include: ['src/**/*.spec.ts'],
@@ -94,11 +128,27 @@ export default defineConfig({
       },
     }),
     autoImportPlugin({
-      imports: ['vue', '@vueuse/core'],
+      imports: [
+        // We have a problem with bundling `.d.ts` using auto-imported types:
+        // AutoImport plugin sets them all in `global`, and when `vue-tsc`
+        // transforms the sources, these types are replaced with `globalThis.XXX`.
+        // `rollup-plugin-dts` bundles it without a problem, but the bundled file fails
+        // to pass TypeScript check, because the auto-imported types are declared in `globalThis`
+        // only in the scope of this library, which is incorrect for package distribution.
+        // Thus, we simply exclude those few types used across the library that are being
+        // auto-imported, and we import them explicitly instead
+        rejectTypeImportsFromPreset(builtinPresets.vue),
+
+        // This preset doesn't seem to auto-import any types
+        // ...but if it does in the future, I'd add a manual preset as
+        // `{ from: '@vueuse/core' }`
+        '@vueuse/core',
+      ],
       eslintrc: {
         enabled: true,
       },
     }),
+    checkAutoImportedTypesPlugin()
   ],
   build: {
     sourcemap: true,