@neodx/svg - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/esbuild.d.ts

 import * as esbuild from 'esbuild';
-import { S as SvgPluginParams } from './_internal/unplugin-4b714fe2.js';
+import { S as SvgPluginParams } from './_internal/unplugin-39522f54.js';
 
@@ -4,0 +4,0 @@ declare const _default: (options: SvgPluginParams) => esbuild.Plugin;

dist/index.d.ts

@@ -1,7 +0,7 @@
-import { C as CreateSpriteBuilderParams, S as SpriteBuilder } from './_internal/create-sprite-builder-f697dc7f.js';
-export { c as createSpriteBuilder } from './_internal/create-sprite-builder-f697dc7f.js';
+import { C as CreateSpriteBuilderParams, S as SpriteBuilder } from './_internal/create-sprite-builder-72e8e5b6.js';
+export { c as createSpriteBuilder } from './_internal/create-sprite-builder-72e8e5b6.js';
 import * as chokidar from 'chokidar';
-import { S as SvgSpritePluginHooks, a as SvgSpritePlugin } from './_internal/types-593f61bf.js';
-export { C as Context, d as GeneratedSprite, G as GeneratedSprites, c as SpriteGroup, b as SpriteGroupsMap, e as SvgFile, f as SvgNode } from './_internal/types-593f61bf.js';
-export { i as plugins } from './_internal/index-ac9e067e.js';
+import { S as SvgSpritePluginHooks, a as SvgSpritePlugin } from './_internal/types-fe41d676.js';
+export { C as Context, d as GeneratedSprite, G as GeneratedSprites, c as SpriteGroup, b as SpriteGroupsMap, e as SvgFile, f as SvgFileMeta, g as SvgNode } from './_internal/types-fe41d676.js';
+export { i as plugins } from './_internal/index-5157eb75.js';
 
@@ -8,0 +8,0 @@ interface GenerateParams extends CreateSpriteBuilderParams {

dist/plugins/index.d.ts

@@ -1,2 +0,2 @@
-export { G as GroupPluginOptions, S as SvgoPluginOptions, T as TypescriptPluginOptions, f as fixViewBox, g as groupSprites, s as setId, a as svgo, t as typescript } from '../_internal/index-ac9e067e.js';
-export { A as AnyColorInput, g as ColorPropertyReplacementInput, h as ColorReplacementInputConfig, R as ResetColorsPluginParams, r as resetColors } from '../_internal/types-593f61bf.js';
+export { G as GroupPluginOptions, L as LegacyTypescriptPluginOptions, S as SvgoPluginOptions, f as fixViewBox, g as groupSprites, l as legacyTypescript, s as setId, a as svgo } from '../_internal/index-5157eb75.js';
+export { A as AnyColorInput, h as ColorPropertyReplacementInput, i as ColorReplacementInputConfig, R as ResetColorsPluginParams, r as resetColors } from '../_internal/types-fe41d676.js';

dist/rollup.d.ts

@@ -1,2 +0,2 @@
-import { S as SvgPluginParams } from './_internal/unplugin-4b714fe2.js';
+import { S as SvgPluginParams } from './_internal/unplugin-39522f54.js';
 
@@ -3,0 +3,0 @@ declare const _default: (options: SvgPluginParams) => WebpackPluginInstance;

dist/rspack.d.ts

@@ -1,2 +0,2 @@
-import { S as SvgPluginParams } from './_internal/unplugin-4b714fe2.js';
+import { S as SvgPluginParams } from './_internal/unplugin-39522f54.js';
 
@@ -3,0 +3,0 @@ declare const _default: (options: SvgPluginParams) => RspackPluginInstance;

dist/vite.d.ts

 import * as vite from 'vite';
-import { S as SvgPluginParams } from './_internal/unplugin-4b714fe2.js';
+import { S as SvgPluginParams } from './_internal/unplugin-39522f54.js';
 
@@ -4,0 +4,0 @@ declare const _default: (options: SvgPluginParams) => vite.Plugin | vite.Plugin[];

dist/webpack.d.ts

@@ -1,2 +0,2 @@
-import { S as SvgPluginParams } from './_internal/unplugin-4b714fe2.js';
+import { S as SvgPluginParams } from './_internal/unplugin-39522f54.js';
 
@@ -3,0 +3,0 @@ declare const _default: (options: SvgPluginParams) => WebpackPluginInstance;

package.json

 {
   "name": "@neodx/svg",
   "packageManager": "yarn@3.2.0",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Supercharge your icons ⚡️",
@@ -6,0 +6,0 @@ "author": {

README.md

@@ -8,7 +8,7 @@ # @neodx/svg
 Sprites are the most effective way to work with your SVG icons,
-but for some reason developers (vision from react world) prefer
-mostly bloated and ineffective - "compile" SVG to react component with inlined SVG content.
+but for some reason developers (vision from a React world) prefer
+mostly bloated and ineffective, "compile" SVG to react component with inlined SVG content.
 
 Of course, we can use some external tools like https://svgsprit.es/ or some npm libraries,
-but that's not serious (if you know any alternatives - let me know, and I'll add links), developers need DX.
+but that's not serious (if you know any alternatives, let me know, and I'll add links), developers need DX.
 
@@ -27,7 +27,7 @@ In a ridiculous, but incredibly popular way, we don't have other solutions with the same DX.
 
-- TypeScript support out of box - generated types and [information about your sprites](#content-based-hashes)
+- TypeScript support out of box - generated types and [information about your sprites](#-content-based-hashes-and-runtime-metadata-generation)
 - [Built-in integrated plugins](#integrate-with-your-bundler) for all major bundlers: `vite`, `webpack`, `rollup`, `esbuild`, etc.
 - Optional grouping by folders
 - Optimization with svgo
-- [Automatically reset colors](#-powerful-colors-reset)
+- [Automatically reset colors](#-automatically-reset-colors)
 - Powerful files selection
@@ -48,3 +48,4 @@
 
-Currently, we don't recommend using CLI mode, because it's not flexible enough and requires extra setup, if you want to use it - see [CLI](#cli) section and [CLI Options API](#cli-options).
+Currently, we don't recommend using CLI mode because it's not flexible enough and requires extra setup
+if you want to use it - see [CLI](#cli) section and [CLI Options API](#cli-options).
 
@@ -71,3 +72,3 @@ ```shell
       output: 'public',
-      definitions: 'src/shared/ui/icon/sprite.gen.ts',
+      metadata: 'src/shared/ui/icon/sprite.gen.ts',
       resetColors: {
@@ -105,3 +106,3 @@ replaceUnknown: 'currentColor'
       output: 'public',
-      definition: 'src/shared/ui/icon/sprite.gen.ts'
+      metadata: 'src/shared/ui/icon/sprite.gen.ts'
     })
@@ -125,3 +126,3 @@ ]
       output: 'public',
-      definition: 'src/shared/ui/icon/sprite.gen.ts'
+      metadata: 'src/shared/ui/icon/sprite.gen.ts'
     })
@@ -145,3 +146,3 @@ ]
       output: 'public',
-      definition: 'src/shared/ui/icon/sprite.gen.ts'
+      metadata: 'src/shared/ui/icon/sprite.gen.ts'
     })
@@ -286,5 +287,5 @@ ]
 
-### <a name="content-based-hashes" id="content-based-hashes" /> 🆕 ⚠️ Get content-based hashes in filenames with experimental runtime information
+### 🆕 Content-based hashes and runtime metadata generation
 
-> **Warning:** This feature is experimental and will be changed in the future.
+> **Note:** If you used `definitions` or `experimentalRuntime` options before, you need to update your configuration, see [Migration guide](#move-from-definitions-and-experimentalruntime-options-to-metadata-api).
 
@@ -306,3 +307,3 @@ By default, you will get the following sprites in your output:
 1. Provide the `fileName` option with a `hash` variable (e.g. `fileName: "{name}.{hash:8}.svg"`)
-2. Enable the `experimentalRuntime` option to get information about the file path by sprite name during runtime
+2. Configure the `metadata` option to get additional information about the file path by sprite name during runtime
 3. Update your `Icon` component (or whatever you use) to support the new runtime information
@@ -317,3 +318,9 @@
       fileName: '{name}.{hash:8}.svg',
-      experimentalRuntime: true
+      metadata: {
+        path: 'src/shared/ui/icon/sprite.gen.ts',
+        runtime: {
+          size: true,
+          viewBox: true
+        }
+      }
       // ...
@@ -335,2 +342,33 @@ })
 
+With the following metadata in `src/shared/ui/icon/sprite.gen.ts`:
+
+```typescript
+export interface SpritesMap {
+  'sprite-foo': 'first' | 'second';
+  'sprite-bar': ' /* ... */ ';
+}
+export const SPRITES_META = {
+  'sprite-foo': {
+    filePath: 'sprite-foo.12abc678.svg',
+    items: {
+      first: {
+        // all items will have `viewBox`, `width` and `height` properties
+        viewBox: '0 0 48 48',
+        width: 48,
+        height: 48
+      },
+      second: {
+        /* ... */
+      }
+    }
+  },
+  'sprite-bar': {
+    filePath: 'sprite-bar.87654def.svg',
+    items: {
+      /* ... */
+    }
+  }
+};
+```
+
 And updates of `Icon` component will be like this:
@@ -343,3 +381,3 @@
 
-+ export function Icon({ name, viewBox: viewBoxFromProps, /* ... */ }) {
++ export function Icon({ name, /* ... */ }) {
    const [spriteName, iconName] = name.split('/');
@@ -351,6 +389,6 @@ +  const { filePath, items } = SPRITES_META[spriteName];
      <svg
-+      viewBox={viewBoxFromProps ?? viewBox}
++      viewBox={viewBox}
        // ...
      >
-+      <use xlinkHref={`/${filePath}#${iconName}`} />
++      <use href={`/${filePath}#${iconName}`} />
      </svg>
@@ -402,3 +440,5 @@ );
       output: 'public',
-      definitions: 'src/shared/ui/icon/sprite.gen.ts',
+      metadata: {
+        path: 'src/shared/ui/icon/sprite.gen.ts'
+      },
       resetColors: {
@@ -462,7 +502,7 @@ replaceUnknown: 'currentColor'
 
-Now we can use it in our code - for type checking, autocomplete and other cool stuff.
+Now we can use it in our code - for type checking, autocomplete, and other cool stuff.
 
 ### Create your Icon component
 
-> It's a **simple** implementation, you can see a more real one in the "Recipes" section
+> It's a **simple** implementation, you can see a real one in the "Recipes" section
 
@@ -481,3 +521,3 @@ ```tsx
     <svg className="icon">
-      <use xlinkHref={`/public/sprite/${type}.svg#${name}`}></use>
+      <use href={`/public/sprite/${type}.svg#${name}`}></use>
     </svg>
@@ -577,3 +617,3 @@ );
       {/* For example, "/common.svg#favourite". Change base path if you don't store sprites under the root. */}
-      <use xlinkHref={`/${spriteName}.svg#${iconName}`} />
+      <use href={`/${spriteName}.svg#${iconName}`} />
     </svg>
@@ -659,2 +699,23 @@ );
 
+## Migrations
+
+### Move from `definitions` and `experimentalRuntime` options to `metadata API`
+
+Now [metadata](#-content-based-hashes-and-runtime-metadata-generation) is stable
+and covered under one `metadata` option.
+
+```diff
+svg({
+-  definitions: 'src/shared/ui/icon/sprite.gen.ts',
+-  experimentalRuntime: true,
++  metadata: {
++    path: 'src/shared/ui/icon/sprite.gen.ts',
++    runtime: {
++      size: true,
++      viewBox: true,
++    }
++  }
+});
+```
+
 ## API
@@ -717,5 +778,9 @@
   /**
-   * Path to generated definitions file
+   * Configures metadata generation
+   * @example "src/sprites/meta.ts"
+   * @example { path: "meta.ts", runtime: false } // will generate only types
+   * @example { path: "meta.ts", types: 'TypeName', runtime: 'InfoName' } // will generate "interface TypeName" types and "const InfoName" runtime metadata
+   * @example { path: "meta.ts", runtime: { size: true, viewBox: true } } // will generate runtime metadata with size and viewBox
    */
-  definitions?: string;
+  metadata?: MetadataPluginParams;
   /**
@@ -725,25 +790,2 @@ * Reset colors config
   resetColors?: ResetColorsPluginParams;
-  /**
-   * WILL BE CHANGED IN FUTURE
-   * Replaces current approach (just array of IDs per sprite) with extended runtime metadata
-   *
-   * @unstable
-   * @example
-   * export const SPRITES_META = {
-   *   'common-arrows': {
-   *     fileName: 'common/arrows.a766b3.svg',
-   *     items: {
-   *       left: {
-   *         viewBox: '0 0 24 24',
-   *       },
-   *       right: {
-   *         viewBox: '0 0 24 24',
-   *       },
-   *       // ...
-   *     }
-   *   },
-   *   // ...
-   * };
-   */
-  experimentalRuntime?: boolean;
 }
@@ -750,0 +792,0 @@ ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178812

16.64%

Lines of code

552

15.97%

Number of lines in readme file

792

5.6%

No dependency changes