feat(svg): rework sprites metadata generation

secundant · Jul 24, 2023 · 10f96e6 · 10f96e6
1 parent 0b2f246
commit 10f96e6
Show file tree

Hide file tree

Showing 24 changed files with 672 additions and 79 deletions.
diff --git a/libs/svg/examples/colors-advanced/generated/sprite-info.ts b/libs/svg/examples/colors-advanced/generated/sprite-info.ts
@@ -3,9 +3,12 @@ export interface SpritesMap {
   flags: 'ac' | 'ad' | 'ae' | 'af';
   logos: 'linkedin' | 'twitter';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   sprite: ['close', 'exit', 'favourite', 'folder-colored', 'sort-by-visibility'],
   flags: ['ac', 'ad', 'ae', 'af'],
   logos: ['linkedin', 'twitter']
+} satisfies {
+  sprite: Array<'close' | 'exit' | 'favourite' | 'folder-colored' | 'sort-by-visibility'>;
+  flags: Array<'ac' | 'ad' | 'ae' | 'af'>;
+  logos: Array<'linkedin' | 'twitter'>;
 };
diff --git a/libs/svg/examples/colors/generated/sprite-info.ts b/libs/svg/examples/colors/generated/sprite-info.ts
@@ -1,7 +1,8 @@
 export interface SpritesMap {
   sprite: 'custom' | 'fill' | 'mixed' | 'stroke';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   sprite: ['custom', 'fill', 'mixed', 'stroke']
+} satisfies {
+  sprite: Array<'custom' | 'fill' | 'mixed' | 'stroke'>;
 };
diff --git a/libs/svg/examples/groups-with-root/generated/sprite-info.ts b/libs/svg/examples/groups-with-root/generated/sprite-info.ts
@@ -2,8 +2,10 @@ export interface SpritesMap {
   common: 'close' | 'favourite';
   format: 'align-left' | 'tag';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   common: ['close', 'favourite'],
   format: ['align-left', 'tag']
+} satisfies {
+  common: Array<'close' | 'favourite'>;
+  format: Array<'align-left' | 'tag'>;
 };
diff --git a/libs/svg/examples/groups-without-root/generated/sprite-info.ts b/libs/svg/examples/groups-without-root/generated/sprite-info.ts
@@ -2,8 +2,10 @@ export interface SpritesMap {
   'assets/common': 'close' | 'favourite';
   'assets/format': 'align-left' | 'tag';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   'assets/common': ['close', 'favourite'],
   'assets/format': ['align-left', 'tag']
+} satisfies {
+  'assets/common': Array<'close' | 'favourite'>;
+  'assets/format': Array<'align-left' | 'tag'>;
 };
diff --git a/...erimental-runtime/assets/common/close.svg → ...examples/metadata/assets/common/close.svg b/...erimental-runtime/assets/common/close.svg → ...examples/metadata/assets/common/close.svg
diff --git a/...ental-runtime/assets/common/favourite.svg → ...ples/metadata/assets/common/favourite.svg b/...ental-runtime/assets/common/favourite.svg → ...ples/metadata/assets/common/favourite.svg
diff --git a/...ntal-runtime/assets/format/align-left.svg → ...les/metadata/assets/format/align-left.svg b/...ntal-runtime/assets/format/align-left.svg → ...les/metadata/assets/format/align-left.svg
diff --git a/...xperimental-runtime/assets/format/tag.svg → ...g/examples/metadata/assets/format/tag.svg b/...xperimental-runtime/assets/format/tag.svg → ...g/examples/metadata/assets/format/tag.svg
diff --git a/...tal-runtime/generated/common.2eb4b56f.svg → ...es/metadata/generated/common.2eb4b56f.svg b/...tal-runtime/generated/common.2eb4b56f.svg → ...es/metadata/generated/common.2eb4b56f.svg
diff --git a/...tal-runtime/generated/format.c890959d.svg → ...es/metadata/generated/format.c890959d.svg b/...tal-runtime/generated/format.c890959d.svg → ...es/metadata/generated/format.c890959d.svg
diff --git a/...rimental-runtime/generated/sprite-info.ts → libs/svg/examples/metadata/generated/meta.ts b/...rimental-runtime/generated/sprite-info.ts → libs/svg/examples/metadata/generated/meta.ts
@@ -2,37 +2,48 @@ export interface SpritesMap {
   common: 'close' | 'favourite';
   format: 'align-left' | 'tag';
 }
-
 export const SPRITES_META = {
   common: {
     filePath: 'common.2eb4b56f.svg',
     items: {
       close: {
-        viewBox: '0 0 48 48'
+        viewBox: '0 0 48 48',
+        width: 48,
+        height: 48
       },
       favourite: {
-        viewBox: '0 0 48 48'
+        viewBox: '0 0 48 48',
+        width: 48,
+        height: 48
       }
     }
   },
   format: {
     filePath: 'format.c890959d.svg',
     items: {
       'align-left': {
-        viewBox: '0 0 48 48'
+        viewBox: '0 0 48 48',
+        width: 48,
+        height: 48
       },
       tag: {
-        viewBox: '0 0 48 48'
+        viewBox: '0 0 48 48',
+        width: 48,
+        height: 48
       }
     }
   }
-} satisfies {
-  [SpriteName in keyof SpritesMap]: {
+} satisfies Record<
+  string,
+  {
     filePath: string;
-    items: {
-      [ItemName in SpritesMap[SpriteName]]: {
+    items: Record<
+      string,
+      {
         viewBox: string;
-      };
-    };
-  };
-};
+        width: number;
+        height: number;
+      }
+    >;
+  }
+>;
diff --git a/libs/svg/examples/react/generated/sprite-info.ts b/libs/svg/examples/react/generated/sprite-info.ts
@@ -2,8 +2,10 @@ export interface SpritesMap {
   common: 'close' | 'favourite';
   format: 'align-left' | 'tag';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   common: ['close', 'favourite'],
   format: ['align-left', 'tag']
+} satisfies {
+  common: Array<'close' | 'favourite'>;
+  format: Array<'align-left' | 'tag'>;
 };
diff --git a/libs/svg/examples/simple/generated/sprite-info.ts b/libs/svg/examples/simple/generated/sprite-info.ts
@@ -1,7 +1,8 @@
 export interface SpritesMap {
   sprite: 'arrow-drop-down' | 'arrow-drop-up';
 }
-
-export const SPRITES_META: { [K in keyof SpritesMap]: SpritesMap[K][] } = {
+export const SPRITES_META = {
   sprite: ['arrow-drop-down', 'arrow-drop-up']
+} satisfies {
+  sprite: Array<'arrow-drop-down' | 'arrow-drop-up'>;
 };
diff --git a/libs/svg/src/__tests__/__snapshots__/examples.test.ts.snap b/libs/svg/src/__tests__/__snapshots__/examples.test.ts.snap
@@ -19,7 +19,7 @@ exports[`examples > "colors" example should replay same output 1`] = `
   ],
   [
     "generated/sprite-info.ts",
-    "4793076202450a65b7b04efe27b0b74ddda29399e95da47f55cfe47450854d12",
+    "68ee54e6a56a9c10472f3613d7b688b49087d69ca2ad2591318a01138ff5f669",
   ],
 ]
 `;
@@ -60,94 +60,94 @@ exports[`examples > "colors-advanced" example should replay same output 1`] = `
   ],
   [
     "generated/sprite-info.ts",
-    "ccea76ebfa7898989ef6da5c21ff18e8225a629e84098600b52debde57b37d44",
+    "666e8fa9a10d2e5127d31cb8f8604ab36c16aaba9485ceb31aeb18e87e5cddd0",
   ],
 ]
 `;
 
-exports[`examples > "experimental-runtime" example should generate files 1`] = `
+exports[`examples > "groups-with-root" example should generate files 1`] = `
 [
   "assets/common/close.svg",
   "assets/common/favourite.svg",
   "assets/format/align-left.svg",
   "assets/format/tag.svg",
-  "generated/common.2eb4b56f.svg",
-  "generated/format.c890959d.svg",
+  "generated/common.svg",
+  "generated/format.svg",
   "generated/sprite-info.ts",
 ]
 `;
 
-exports[`examples > "experimental-runtime" example should replay same output 1`] = `
+exports[`examples > "groups-with-root" example should replay same output 1`] = `
 [
   [
-    "generated/common.2eb4b56f.svg",
+    "generated/common.svg",
     "2eb4b56ff266279ca9c0af3b16f7f3114ae35c4555657bb106acbd15ff9d4f52",
   ],
   [
-    "generated/format.c890959d.svg",
+    "generated/format.svg",
     "c890959d268bf53d6006012438788b4104189d3cfaf997b0b43b2fd4f1a41159",
   ],
   [
     "generated/sprite-info.ts",
-    "046df9f47812fc3681fd787ae23e64db1f089a509fd18607a57d2613bf4cdff7",
+    "0c82bd5eb1a18ea3337261408254d09db5cee2c8eeb4561ed6bca996b0e0d9c9",
   ],
 ]
 `;
 
-exports[`examples > "groups-with-root" example should generate files 1`] = `
+exports[`examples > "groups-without-root" example should generate files 1`] = `
 [
   "assets/common/close.svg",
   "assets/common/favourite.svg",
   "assets/format/align-left.svg",
   "assets/format/tag.svg",
-  "generated/common.svg",
-  "generated/format.svg",
+  "generated/assets/common.svg",
+  "generated/assets/format.svg",
   "generated/sprite-info.ts",
 ]
 `;
 
-exports[`examples > "groups-with-root" example should replay same output 1`] = `
+exports[`examples > "groups-without-root" example should replay same output 1`] = `
 [
   [
-    "generated/common.svg",
+    "generated/assets/common.svg",
     "2eb4b56ff266279ca9c0af3b16f7f3114ae35c4555657bb106acbd15ff9d4f52",
   ],
   [
-    "generated/format.svg",
+    "generated/assets/format.svg",
     "c890959d268bf53d6006012438788b4104189d3cfaf997b0b43b2fd4f1a41159",
   ],
   [
     "generated/sprite-info.ts",
-    "fac807c42c630ce77d6e1fea77b808338cf68776235c48736f3b82aa09e761df",
+    "6280072f9bbc11d77c987a1ce220c9a70197c7612119b86606025455d3feae97",
   ],
 ]
 `;
 
-exports[`examples > "groups-without-root" example should generate files 1`] = `
+exports[`examples > "metadata" example should generate files 1`] = `
 [
   "assets/common/close.svg",
   "assets/common/favourite.svg",
   "assets/format/align-left.svg",
   "assets/format/tag.svg",
-  "generated/assets/common.svg",
-  "generated/assets/format.svg",
-  "generated/sprite-info.ts",
+  "generated/common.2eb4b56f.svg",
+  "generated/format.c890959d.svg",
+  "generated/meta.ts",
 ]
 `;
 
-exports[`examples > "groups-without-root" example should replay same output 1`] = `
+exports[`examples > "metadata" example should replay same output 1`] = `
 [
   [
-    "generated/assets/common.svg",
+    "generated/common.2eb4b56f.svg",
     "2eb4b56ff266279ca9c0af3b16f7f3114ae35c4555657bb106acbd15ff9d4f52",
   ],
   [
-    "generated/assets/format.svg",
+    "generated/format.c890959d.svg",
     "c890959d268bf53d6006012438788b4104189d3cfaf997b0b43b2fd4f1a41159",
   ],
   [
-    "generated/sprite-info.ts",
-    "1153d305b1db1f1605d0d5e9b30a19ec4fea65b221553ef862158f31c2270de8",
+    "generated/meta.ts",
+    "789b7ca4856d0b2d1b105e8267a5950f77d4928ef1710b4db05438cefd96c27f",
   ],
 ]
 `;
@@ -178,7 +178,7 @@ exports[`examples > "react" example should replay same output 1`] = `
   ],
   [
     "generated/sprite-info.ts",
-    "fac807c42c630ce77d6e1fea77b808338cf68776235c48736f3b82aa09e761df",
+    "0c82bd5eb1a18ea3337261408254d09db5cee2c8eeb4561ed6bca996b0e0d9c9",
   ],
 ]
 `;
@@ -200,7 +200,7 @@ exports[`examples > "simple" example should replay same output 1`] = `
   ],
   [
     "generated/sprite-info.ts",
-    "89e0e5e36909c3dce4af5977af027d8779b20860232d34612d27a7778bdcc1e3",
+    "528cef17918096f4bec20bf6e16ff1d970c3999eb5b405469661a12b24c7cac4",
   ],
 ]
 `;