@weser/keyframes 1.0.0 → 1.0.1

package/README.md

@@ -1,3 +1,3 @@
 # @weser/keyframes
 
-[Documentation](https://packages.weser.io/keyframes)
+[Documentation](https://stack.weser.io/keyframes)

package/dist/createStyleNode.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function createStyleNode(animationName: string, css: string, nonce?: string): import("react").DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string;

package/dist/src/createKeyframe.d.ts

@@ -0,0 +1,5 @@
+import createStyleNode from './createStyleNode.js';
+import { T_Keyframe } from './types.js';
+type Node = ReturnType<typeof createStyleNode>;
+export default function createKeyframe(style: T_Keyframe, nonce?: string): [string, Node];
+export {};

package/dist/src/createKeyframe.js

@@ -0,0 +1,9 @@
+import getValueFromCache from './getValueFromCache.js';
+import createStyleNode from './createStyleNode.js';
+import getAnimationName from './getAnimationName.js';
+export default function createKeyframe(style, nonce) {
+    const animationName = getAnimationName(style);
+    const css = getValueFromCache(animationName, style);
+    const node = createStyleNode(animationName, css, nonce);
+    return [animationName, node];
+}

package/dist/src/createKeyframes.d.ts

@@ -0,0 +1,5 @@
+import createStyleNode from './createStyleNode.js';
+import { T_Keyframe } from './types.js';
+type Node = ReturnType<typeof createStyleNode>;
+export default function createKeyframes<T extends string>(keyframes: Record<T, T_Keyframe>, nonce?: string): [Record<T, string>, Node];
+export {};

package/dist/src/createKeyframes.js

@@ -0,0 +1,14 @@
+import getValueFromCache from './getValueFromCache.js';
+import createStyleNode from './createStyleNode.js';
+import getAnimationName from './getAnimationName.js';
+export default function createKeyframes(keyframes, nonce) {
+    const animationNameMap = {};
+    let css = '';
+    for (const key in keyframes) {
+        const animationName = getAnimationName(keyframes[key]);
+        css += getValueFromCache(animationName, keyframes[key]);
+        animationNameMap[key] = animationName;
+    }
+    const node = createStyleNode(Object.keys(keyframes).join('-'), css, nonce);
+    return [animationNameMap, node];
+}

package/dist/src/createStyleNode.d.ts

@@ -0,0 +1,8 @@
+export default function createStyleNode(animationName: string, css: string, nonce?: string): import("react").DetailedReactHTMLElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    precedence: string;
+    href: string;
+    nonce: string | undefined;
+}, HTMLElement>;

package/dist/src/createStyleNode.js

@@ -0,0 +1,9 @@
+import { createElement } from 'react';
+export default function createStyleNode(animationName, css, nonce) {
+    return createElement('style', {
+        dangerouslySetInnerHTML: { __html: css },
+        precedence: 'low',
+        href: animationName,
+        nonce,
+    });
+}

package/dist/src/getAnimationName.d.ts

@@ -0,0 +1,2 @@
+import { T_Keyframe } from './types.js';
+export default function getAnimationName(style: T_Keyframe): string;

package/dist/src/getAnimationName.js

@@ -0,0 +1,4 @@
+import hash from './hash.js';
+export default function getAnimationName(style) {
+    return '_' + hash(JSON.stringify(style));
+}

package/dist/src/getValueFromCache.d.ts

@@ -0,0 +1,2 @@
+import { T_Keyframe } from './types.js';
+export default function getValueFromCache(animationName: string, style: T_Keyframe): any;

package/dist/src/getValueFromCache.js

@@ -0,0 +1,10 @@
+import { cssifyObject } from 'css-in-js-utils';
+const cache = new Map();
+export default function getValueFromCache(animationName, style) {
+    if (!cache.has(animationName)) {
+        const keyframe = Object.entries(style).reduce((keyframe, [key, declaration = {}]) => keyframe + key + '{' + cssifyObject(declaration) + '}', '');
+        const css = `@keyframes ${animationName}{${keyframe}}`;
+        cache.set(animationName, css);
+    }
+    return cache.get(animationName);
+}

package/dist/src/hash.d.ts

@@ -0,0 +1 @@
+export default function hash(str: string): string;

package/dist/src/hash.js

@@ -0,0 +1,16 @@
+// copied from restyle
+export default function hash(str) {
+    let h = 0 ^ 0x811c9dc5;
+    for (let index = 0; index < str.length; index++) {
+        h ^= str.charCodeAt(index);
+        h = (h * 0x01000193) >>> 0;
+    }
+    const letters = 'abcdefghijklmnopqrstuvwxyz';
+    const base36 = '0123456789' + letters;
+    let result = '';
+    do {
+        result = base36[h % 36] + result;
+        h = Math.floor(h / 36);
+    } while (h > 0);
+    return `x${result}`;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default as createKeyframe } from './createKeyframe.js';
+export { default as createKeyframes } from './createKeyframes.js';
+export { T_Keyframe } from './types.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { default as createKeyframe } from './createKeyframe.js';
+export { default as createKeyframes } from './createKeyframes.js';

package/dist/src/types.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+type Key = `${number}%` | 'from' | 'to';
+export type T_Keyframe = Partial<Record<Key, CSSProperties>>;
+export {};

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../vitest.config.ts","../src/createkeyframe.ts","../src/createkeyframes.ts","../src/createstylenode.ts","../src/getanimationname.ts","../src/getvaluefromcache.ts","../src/hash.ts","../src/index.ts","../src/types.ts"],"version":"5.9.3"}

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+    test: {
+        include: ['**/__tests__/**/*.{js,ts}'],
+        globals: false,
+        environment: 'jsdom',
+    },
+    esbuild: {
+        target: 'esnext',
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/keyframes",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Tiny helpers for CSS keyframes in React",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "clean": "rimraf dist",
     "build": "tsc -b",
     "dev": "pnpm build -w",
-    "test": "ava"
+    "test": "vitest run"
   },
   "keywords": [
     "error handling",
@@ -48,10 +48,11 @@
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
-    "ava": "^6.1.3",
+    "jsdom": "^25.0.1",
     "react": "canary",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitest": "^2.1.8"
   },
-  "gitHead": "afc0628ca4aeaba255eef9716652640fdc5b50c4"
+  "gitHead": "490b5b37e8da7f0cac2880543874914c6f6be5d6"
 }