@vorplex/solid 0.0.11 → 0.0.20

package/dist/components/for-in/for-in.component.d.ts

@@ -2,5 +2,6 @@ import { type JSX } from 'solid-js';
 export interface ForInProps<TKey extends string, TValue> {
     each: Record<TKey, TValue>;
     children: (value: TValue, key: TKey) => JSX.Element;
+    fallback?: JSX.Element;
 }
-export declare function ForIn<T extends string, TT>(props: ForInProps<T, TT>): JSX.Element;
+export declare function ForIn<TKey extends string, TValue>(props: ForInProps<TKey, TValue>): JSX.Element;

package/dist/components/for-in/for-in.component.jsx

@@ -1,4 +1,6 @@
 import { For } from 'solid-js';
 export function ForIn(props) {
-    return (<For each={Object.entries(props.each)}>{([key, value]) => props.children(value, key)}</For>);
+    return (<For each={Object.entries(props.each)} fallback={props.fallback}>
+            {([key, value]) => props.children(value, key)}
+        </For>);
 }

package/dist/functions/create-style.function.d.ts

@@ -1,3 +1,4 @@
 import { Accessor } from 'solid-js';
-import { type StyleClasses, type StyleNames } from '../utils/style-sheet.util';
+import { CssProperties, type StyleClasses, type StyleNames } from '../utils/style-sheet.util';
 export declare function createStyle<T extends object>(styles: () => StyleClasses<T>, container?: Node): Accessor<StyleNames<T>>;
+export declare function createAnimation<T extends object>(styles: () => Record<string, CssProperties>, container?: Node): Accessor<string>;

package/dist/functions/create-style.function.jsx

@@ -1,7 +1,18 @@
-import { onCleanup } from 'solid-js';
+import { createEffect, onCleanup } from 'solid-js';
 import { $StyleSheet } from '../utils/style-sheet.util';
 export function createStyle(styles, container) {
-    const style = $StyleSheet.create(styles, container);
-    onCleanup(() => style().element.remove());
+    const style = $StyleSheet.create(styles);
+    const element = document.createElement('style');
+    (container ?? document.head).appendChild(element);
+    createEffect(() => element.innerText = style().css);
+    onCleanup(() => element.remove());
     return () => style().classes;
 }
+export function createAnimation(styles, container) {
+    const style = $StyleSheet.createAnimation(styles);
+    const element = document.createElement('style');
+    (container ?? document.head).appendChild(element);
+    createEffect(() => element.innerText = style().css);
+    onCleanup(() => element.remove());
+    return () => style().name;
+}

package/dist/utils/style-sheet.util.d.ts

@@ -3,26 +3,26 @@ import { Accessor, type JSX } from 'solid-js';
 export type StyleNames<T> = {
     [name in keyof T]: string;
 };
+export type CssProperties = {
+    [key in keyof JSX.CSSProperties as CamelToKebab<key>]: JSX.CSSProperties[key] | CssProperties;
+};
 export type StyleClass = CssProperties | {
     [property: string]: StyleClass;
 };
-export type StyleClasses<T extends object = any> = {
+export type StyleClasses<T extends Record<string, any> = any> = {
     [name in keyof T]: StyleClass;
 };
-export type StyleSheet = {
-    element: HTMLStyleElement;
+export interface StyleSheet {
+    sheet: CSSStyleSheet;
     css: string;
-};
-export type ClassStyleSheet<T extends object> = StyleSheet & {
+}
+export interface ClassStyleSheet<T extends Record<string, any>> extends StyleSheet {
     classes: StyleNames<T>;
     value: StyleClasses<T>;
-};
-export type AnimationStyleSheet = StyleSheet & {
+}
+export interface AnimationStyleSheet extends StyleSheet {
     name: string;
-};
-export type CssProperties = {
-    [key in keyof JSX.CSSProperties as CamelToKebab<key>]: JSX.CSSProperties[key] | CssProperties;
-};
+}
 export declare class $StyleSheet {
     private constructor();
     static parseClass(selector: string, properties: CssProperties): string;
@@ -33,8 +33,7 @@ export declare class $StyleSheet {
         classes: StyleNames<T>;
         css: string;
     };
-    static create<T extends object>(styles: () => StyleClasses<T>, container?: Node): Accessor<ClassStyleSheet<T>>;
-    static createAnimation(animation: Record<string, CssProperties>): AnimationStyleSheet;
+    static create<T extends object>(styles: () => StyleClasses<T>): Accessor<ClassStyleSheet<T>>;
+    static createAnimation(animation: () => Record<string, CssProperties>): Accessor<AnimationStyleSheet>;
     static update<T extends object>(style: ClassStyleSheet<T>, changes?: Update<StyleClasses<T>>): ClassStyleSheet<T>;
-    static updateSheet<T extends object>(element: HTMLStyleElement, styles: StyleClasses<T>): ClassStyleSheet<T>;
 }

package/dist/utils/style-sheet.util.js

@@ -1,5 +1,5 @@
 import { $Id, $String, $Value, State } from '@vorplex/core';
-import { createMemo, onCleanup } from 'solid-js';
+import { createMemo } from 'solid-js';
 export class $StyleSheet {
     constructor() { }
     static parseClass(selector, properties) {
@@ -51,51 +51,45 @@ export class $StyleSheet {
             css,
         };
     }
-    static create(styles, container) {
-        container ??= document.head;
-        const sheet = document.createElement('style');
-        sheet.toggleAttribute('style-classes');
-        container.appendChild(sheet);
-        onCleanup(() => sheet.remove());
-        return createMemo(() => $StyleSheet.updateSheet(sheet, styles()));
+    static create(styles) {
+        const sheet = new CSSStyleSheet();
+        return createMemo(() => {
+            const value = styles();
+            const { classes, css } = $StyleSheet.parse(value);
+            sheet.replaceSync(css);
+            return {
+                classes,
+                css,
+                sheet,
+                value
+            };
+        });
     }
     static createAnimation(animation) {
-        const element = document.createElement('style');
-        element.toggleAttribute('animation');
-        document.head.appendChild(element);
+        const sheet = new CSSStyleSheet();
         const name = `anim-${$Id.uid()}`;
-        const css = $StyleSheet.parseAnimation(name, animation);
-        element.innerHTML = css;
-        return {
-            element,
-            css,
-            name,
-        };
+        return createMemo(() => {
+            const css = $StyleSheet.parseAnimation(name, animation());
+            sheet.replaceSync(css);
+            return {
+                sheet,
+                css,
+                name
+            };
+        });
     }
     static update(style, changes = {}) {
         changes = State.update(style.value, changes);
         if ($Value.equals(style.value, changes))
             return style;
         const { classes, css } = $StyleSheet.parse(changes, style.classes);
-        style.element.innerHTML = css;
+        style.sheet.replaceSync(css);
         style.value = changes;
         return {
-            element: style.element,
+            sheet: style.sheet,
             css,
             classes: classes,
             value: style.value,
         };
     }
-    static updateSheet(element, styles) {
-        const { classes, css } = $StyleSheet.parse(styles);
-        if (element.innerHTML !== css) {
-            element.innerHTML = css;
-        }
-        return {
-            element: element,
-            css,
-            classes,
-            value: styles,
-        };
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vorplex/solid",
-  "version": "0.0.11",
+  "version": "0.0.20",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -15,20 +15,18 @@
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "dependencies": {
-    "tslib": "^2.8.1",
-    "@vorplex/core": "0.0.11",
-    "@vorplex/web": "0.0.11"
+    "@vorplex/core": "0.0.20",
+    "@vorplex/web": "0.0.20",
+    "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "jest": "^29.5.0",
-    "ts-jest": "^29.1.0"
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
     "solid-js": "*"
   },
   "scripts": {
     "build": "tsc -b --force tsconfig.build.json",
-    "test": "jest"
+    "test": "vitest run"
   }
 }