feat: separate static asset types to separate global package (#20433)

* feat(typings): create separate global declaration for static assets

* feat(tools): use static-assets instead of custom-global global typings

* Update typings/static-assets/README.md

Co-authored-by: Peter Varholak <peter.varholak@gmail.com>

tools/generators/migrate-converged-pkg/index.spec.ts

@@ -191,7 +191,7 @@ describe('migrate-converged-pkg generator', () => {
           outDir: 'dist',
           preserveConstEnums: true,
           target: 'ES2019',
-          types: ['jest', 'custom-global', 'inline-style-expand-shorthand'],
+          types: ['jest', 'static-assets', 'inline-style-expand-shorthand'],
         },
         extends: '../../tsconfig.base.json',
         include: ['src'],
@@ -212,7 +212,7 @@ describe('migrate-converged-pkg generator', () => {
 
       expect(tsConfig.compilerOptions.types).toEqual([
         'jest',
-        'custom-global',
+        'static-assets',
         'inline-style-expand-shorthand',
         '@testing-library/jest-dom',
         'foo-bar',

tools/generators/migrate-converged-pkg/index.ts

@@ -120,7 +120,7 @@ const templates = {
       importHelpers: true,
       noUnusedLocals: true,
       preserveConstEnums: true,
-      types: ['jest', 'custom-global', 'inline-style-expand-shorthand'],
+      types: ['jest', 'static-assets', 'inline-style-expand-shorthand'],
     } as TsConfig['compilerOptions'],
   },
   babelConfig: (options: { extraPlugins: Array<string> }) => {

typings/custom-global/index.d.ts

@@ -1,23 +1,13 @@
+// @TODO https://github.com/microsoft/fluentui/issues/20544
+/// <reference path="../static-assets/index.d.ts" />
+
 /**
  * Generic typings for sass files.
  */
 declare module '*.scss' {
   const styles: { [className: string]: string };
   export default styles;
 }
-declare module '*.svg' {
-  const svgPath: string;
-  export default svgPath;
-}
-declare module '*.png' {
-  const value: any;
-  export default value;
-}
-
-/**
- * Generic typings for Markdown files.
- */
-declare module '*.md';
 
 // These declarations are meant to represent the parts of Map/WeakMap/Set that exist in IE 11.
 // Therefore, some functionality (such as constructor parameters) is intentionally missing.

typings/static-assets/README.md

@@ -0,0 +1,38 @@
+# static-assets
+
+Enables importing various static assets to JS/TS modules (which is invalid ECMA syntax enabled by various tools like webpack etc).
+
+This definition list is maintained manually and should be extended as needed.
+
+## Usage
+
+```json
+{
+  "compilerOptions": {
+    "types": ["static-assets"]
+  }
+}
+```
+
+Now you can import images and others:
+
+```ts
+// @ExpectType string
+import myImgSrc from './hello-world.png`
+
+```
+
+## Adding new asset types
+
+Add new asset types extension as needed.
+
+**Example:**
+
+```ts
+// Adding .avif image type support
+// ↓↓↓
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+```

typings/static-assets/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Global ambient declaration of various non javascript assets being imported into JS/TS
+ */
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.md' {
+  const src: string;
+  export default src;
+}

typings/tsconfig.json

@@ -1,10 +1,12 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
     "skipLibCheck": false,
     "noEmit": true,
-    "esModuleInterop": true,
-    "types": ["node"]
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types"]
   },
   "include": ["**/*.d.ts"]
 }