@shimmer-from-structure/angular 2.2.3 → 2.3.0

package/README.md

@@ -1,11 +1,12 @@
 # ✨ Shimmer From Structure
 
-A **React, Vue, Svelte & Angular** shimmer/skeleton library that **automatically adapts to your component's runtime structure**. Unlike traditional shimmer libraries that require pre-defined skeleton structures, this library analyzes your actual component's DOM at runtime and generates a shimmer effect that perfectly matches its layout.
+A **React, Vue, Svelte, Angular & SolidJS** shimmer/skeleton library that **automatically adapts to your component's runtime structure**. Unlike traditional shimmer libraries that require pre-defined skeleton structures, this library analyzes your actual component's DOM at runtime and generates a shimmer effect that perfectly matches its layout.
 
 ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 ![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)
 ![Svelte](https://img.shields.io/badge/Svelte-ff3e00?style=for-the-badge&logo=svelte&logoColor=white)
 ![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)
+![SolidJS](https://img.shields.io/badge/SolidJS-%232c4f7c?style=for-the-badge&logo=solid&logoColor=white)
 
 ![Shimmer From Structure Demo](https://github.com/darula-hpp/shimmer-from-structure/raw/main/example/preview.gif)
 
@@ -19,7 +20,7 @@ Traditional shimmer libraries require you to:
 
 **Shimmer From Structure** eliminates all of that:
 
-- ✅ **Works with React, Vue, Svelte & Angular** - Simple, framework-specific adapters
+- ✅ **Works with React, Vue, Svelte, Angular & SolidJS** - Simple, framework-specific adapters
 - ✅ Automatically measures your component's structure at runtime
 - ✅ Generates shimmer effects that match actual dimensions
 - ✅ Zero maintenance - works with any layout changes
@@ -44,7 +45,7 @@ Shimmer From Structure provides dedicated packages for **React and Vue**.
 
 ### React
 
-React support is built-in to the main package for backward compatibility:
+React support is built into the main package for backward compatibility:
 
 ```javascript
 // React projects (or @shimmer-from-structure/react)
@@ -78,6 +79,15 @@ Angular support requires importing from the specific adapter:
 import { ShimmerComponent } from '@shimmer-from-structure/angular';
 ```
 
+### SolidJS
+
+SolidJS support requires importing from the specific adapter:
+
+```tsx
+// SolidJS projects
+import { Shimmer } from '@shimmer-from-structure/solid';
+```
+
 ---
 
 # 📖 Basic Usage
@@ -174,6 +184,29 @@ export class UserCardComponent {
 }
 ```
 
+## SolidJS
+
+### Static Content
+
+```tsx
+import { createSignal } from 'solid-js';
+import { Shimmer } from '@shimmer-from-structure/solid';
+
+function UserCard() {
+  const [isLoading, setIsLoading] = createSignal(true);
+
+  return (
+    <Shimmer loading={isLoading()}>
+      <div class="card">
+        <img src="avatar.jpg" class="avatar" />
+        <h2>John Doe</h2>
+        <p>Software Engineer</p>
+      </div>
+    </Shimmer>
+  );
+}
+```
+
 ---
 
 ### Dynamic Content with `templateProps`
@@ -287,6 +320,31 @@ export class AppComponent {
 }
 ```
 
+**SolidJS**
+
+```tsx
+import { createSignal } from 'solid-js';
+import { Shimmer } from '@shimmer-from-structure/solid';
+import { UserCard } from './UserCard';
+
+function App() {
+  const [loading, setLoading] = createSignal(true);
+  const [user, setUser] = createSignal(null);
+
+  const userTemplate = {
+    name: 'Loading...',
+    role: 'Loading role...',
+    avatar: 'placeholder.jpg',
+  };
+
+  return (
+    <Shimmer loading={loading()} templateProps={{ user: userTemplate }}>
+      <UserCard user={user() || userTemplate} />
+    </Shimmer>
+  );
+}
+```
+
 The `templateProps` object is spread onto the first child component when loading, allowing it to render with mock data for measurement.
 
 ## 🎨 API Reference
@@ -378,6 +436,24 @@ The `templateProps` object is spread onto the first child component when loading
 </shimmer>
 ```
 
+**SolidJS**
+
+```tsx
+<Shimmer
+  loading={isLoading()}
+  shimmerColor="rgba(255, 255, 255, 0.2)"
+  backgroundColor="rgba(255, 255, 255, 0.1)"
+  duration={2}
+  fallbackBorderRadius={8}
+  templateProps={{
+    user: userTemplate,
+    settings: settingsTemplate,
+  }}
+>
+  <MyComponent user={user()} settings={settings()} />
+</Shimmer>
+```
+
 ## 🔧 How It Works
 
 1. **Visible Container Rendering**: When `loading={true}`, your component renders with transparent text but **visible container backgrounds**
@@ -702,6 +778,27 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
+### SolidJS (ShimmerProvider)
+
+```tsx
+import { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';
+
+function App() {
+  return (
+    <ShimmerProvider
+      config={{
+        shimmerColor: 'rgba(56, 189, 248, 0.4)',
+        backgroundColor: 'rgba(56, 189, 248, 0.1)',
+        duration: 2.5,
+        fallbackBorderRadius: 8,
+      }}
+    >
+      <Dashboard />
+    </ShimmerProvider>
+  );
+}
+```
+
 ---
 
 Components inside the provider automatically inherit values. You can still override them locally:
@@ -746,6 +843,16 @@ Components inside the provider automatically inherit values. You can still overr
 <shimmer [loading]="true" [duration]="0.5"><app-fast-card /></shimmer>
 ```
 
+**SolidJS**
+
+```tsx
+<!-- Inherits blue theme from provider -->
+<Shimmer loading={true()}><UserCard /></Shimmer>
+
+<!-- Overrides provider settings -->
+<Shimmer loading={true()} duration={0.5}><FastCard /></Shimmer>
+```
+
 ### Accessing Config in Hooks/Composables
 
 If you need to access the current configuration in your own components:
@@ -794,6 +901,17 @@ export class MyComponent {
 }
 ```
 
+**SolidJS**
+
+```tsx
+import { useShimmerConfig } from '@shimmer-from-structure/solid';
+
+function MyComponent() {
+  const config = useShimmerConfig();
+  return <div style={{ background: config.backgroundColor }}>...</div>;
+}
+```
+
 ## Best Practices
 
 ### 1. Use `templateProps` for Dynamic Data
@@ -890,9 +1008,10 @@ This library is organized as a monorepo with four packages:
 | `@shimmer-from-structure/vue`     | Vue 3 adapter                               | 3.89 kB  |
 | `@shimmer-from-structure/svelte`  | Svelte adapter                              | 4.60 kB  |
 | `@shimmer-from-structure/angular` | Angular adapter                             | 6.83 kB  |
+| `@shimmer-from-structure/solid`   | SolidJS adapter                             | 4.01 kB  |
 | `shimmer-from-structure`          | Main package (React backward compatibility) | 0.93 kB  |
 
-The core package contains all DOM measurement logic, while React, Vue, Svelte and Angular packages are thin wrappers that provide framework-specific APIs.
+The core package contains all DOM measurement logic, while React, Vue, Svelte, Angular and SolidJS packages are thin wrappers that provide framework-specific APIs.
 
 ## 🚧 Roadmap
 
@@ -902,6 +1021,7 @@ The core package contains all DOM measurement logic, while React, Vue, Svelte an
 - [x] **Vue.js adapter**
 - [x] **Svelte adapter**
 - [x] **Angular adapter**
+- [x] **SolidJS adapter**
 - [ ] Better async component support
 - [ ] Customizable shimmer direction (vertical, diagonal)
 - [ ] React Native support

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["@shimmer-from-structure/core"]
+}

package/package.json

@@ -1,14 +1,36 @@
 {
   "name": "@shimmer-from-structure/angular",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Angular adapter for shimmer-from-structure",
   "peerDependencies": {
-    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0"
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "dependencies": {
-    "@shimmer-from-structure/core": "*",
-    "tslib": "^2.3.0"
+    "@shimmer-from-structure/core": "*"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.2.3",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "jsdom": "^27.4.0",
+    "ng-packagr": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "typescript": "~5.6.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17",
+    "zone.js": "~0.15.0"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "test": "vitest run",
+    "format": "prettier --write .",
+    "prepublishOnly": "cp ../../README.md ."
   },
   "keywords": [
     "angular",
@@ -22,17 +44,5 @@
     "directory": "packages/angular"
   },
   "author": "Olebogeng Mbedzi",
-  "license": "MIT",
-  "module": "fesm2022/shimmer-from-structure-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/shimmer-from-structure-angular.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  "license": "MIT"
+}

package/src/public-api.ts

@@ -0,0 +1,9 @@
+// Public API Surface
+export { ShimmerComponent } from './shimmer.component';
+export {
+  SHIMMER_CONFIG,
+  provideShimmerConfig,
+  injectShimmerConfig,
+  shimmerDefaults,
+} from './shimmer-config.service';
+export type { ShimmerInputs, ShimmerConfig, ShimmerContextValue, ElementInfo } from './types';

package/src/shimmer-config.service.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import {
+  provideShimmerConfig,
+  injectShimmerConfig,
+  shimmerDefaults,
+  SHIMMER_CONFIG,
+} from './shimmer-config.service';
+
+describe('shimmer-config.service', () => {
+  describe('shimmerDefaults', () => {
+    it('exports default values', () => {
+      expect(shimmerDefaults).toBeDefined();
+      expect(shimmerDefaults.shimmerColor).toBeDefined();
+      expect(shimmerDefaults.backgroundColor).toBeDefined();
+      expect(shimmerDefaults.duration).toBeDefined();
+      expect(shimmerDefaults.fallbackBorderRadius).toBeDefined();
+    });
+  });
+
+  describe('provideShimmerConfig', () => {
+    it('creates a provider object', () => {
+      const config = { shimmerColor: '#fff', duration: 2 };
+      const provider = provideShimmerConfig(config);
+
+      expect(provider.provide).toBe(SHIMMER_CONFIG);
+      expect(provider.useValue).toBe(config);
+    });
+  });
+
+  describe('injectShimmerConfig', () => {
+    it('returns defaults when no provider is configured', () => {
+      TestBed.configureTestingModule({});
+
+      TestBed.runInInjectionContext(() => {
+        const config = injectShimmerConfig();
+
+        expect(config.shimmerColor).toBe(shimmerDefaults.shimmerColor);
+        expect(config.backgroundColor).toBe(shimmerDefaults.backgroundColor);
+        expect(config.duration).toBe(shimmerDefaults.duration);
+        expect(config.fallbackBorderRadius).toBe(shimmerDefaults.fallbackBorderRadius);
+      });
+    });
+
+    it('merges provided config with defaults', () => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideShimmerConfig({
+            shimmerColor: 'rgba(255, 255, 255, 0.8)',
+            duration: 3,
+          }),
+        ],
+      });
+
+      TestBed.runInInjectionContext(() => {
+        const config = injectShimmerConfig();
+
+        expect(config.shimmerColor).toBe('rgba(255, 255, 255, 0.8)');
+        expect(config.duration).toBe(3);
+        // Should use defaults for non-provided values
+        expect(config.backgroundColor).toBe(shimmerDefaults.backgroundColor);
+        expect(config.fallbackBorderRadius).toBe(shimmerDefaults.fallbackBorderRadius);
+      });
+    });
+
+    it('returns fully resolved ShimmerContextValue', () => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideShimmerConfig({
+            shimmerColor: '#aaa',
+            backgroundColor: '#bbb',
+            duration: 1.5,
+            fallbackBorderRadius: 10,
+          }),
+        ],
+      });
+
+      TestBed.runInInjectionContext(() => {
+        const config = injectShimmerConfig();
+
+        expect(config.shimmerColor).toBe('#aaa');
+        expect(config.backgroundColor).toBe('#bbb');
+        expect(config.duration).toBe(1.5);
+        expect(config.fallbackBorderRadius).toBe(10);
+      });
+    });
+  });
+});

package/{shimmer-config.service.d.ts → src/shimmer-config.service.ts}

@@ -1,11 +1,13 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, inject } from '@angular/core';
 import type { ShimmerConfig, ShimmerContextValue } from '@shimmer-from-structure/core';
 import { shimmerDefaults } from '@shimmer-from-structure/core';
+
 /**
  * Injection token for global shimmer configuration.
  * Use `provideShimmerConfig()` to configure in your app.
  */
-export declare const SHIMMER_CONFIG: InjectionToken<ShimmerConfig>;
+export const SHIMMER_CONFIG = new InjectionToken<ShimmerConfig>('SHIMMER_CONFIG');
+
 /**
  * Provider function for shimmer configuration.
  * Use in your app's providers array.
@@ -22,14 +24,25 @@ export declare const SHIMMER_CONFIG: InjectionToken<ShimmerConfig>;
  * });
  * ```
  */
-export declare function provideShimmerConfig(config: ShimmerConfig): {
-    provide: InjectionToken<ShimmerConfig>;
-    useValue: ShimmerConfig;
-};
+export function provideShimmerConfig(config: ShimmerConfig) {
+  return { provide: SHIMMER_CONFIG, useValue: config };
+}
+
 /**
  * Inject and resolve shimmer configuration.
  * Merges injected config with defaults.
  * Returns fully resolved ShimmerContextValue with all properties defined.
  */
-export declare function injectShimmerConfig(): ShimmerContextValue;
+export function injectShimmerConfig(): ShimmerContextValue {
+  const config = inject(SHIMMER_CONFIG, { optional: true }) ?? {};
+
+  return {
+    shimmerColor: config.shimmerColor ?? shimmerDefaults.shimmerColor,
+    backgroundColor: config.backgroundColor ?? shimmerDefaults.backgroundColor,
+    duration: config.duration ?? shimmerDefaults.duration,
+    fallbackBorderRadius: config.fallbackBorderRadius ?? shimmerDefaults.fallbackBorderRadius,
+  };
+}
+
+// Re-export defaults for testing and reference
 export { shimmerDefaults };

package/src/shimmer.component.test.ts

@@ -0,0 +1,175 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { Component, NO_ERRORS_SCHEMA, signal, ChangeDetectorRef } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ShimmerComponent } from './shimmer.component';
+import { provideShimmerConfig, SHIMMER_CONFIG } from './shimmer-config.service';
+
+// Test wrapper component for content projection
+@Component({
+  selector: 'test-host',
+  standalone: true,
+  imports: [ShimmerComponent],
+  template: `
+    <shimmer [loading]="loading">
+      <div class="test-content" style="width: 100px; height: 50px;">Content</div>
+    </shimmer>
+  `,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+class TestHostComponent {
+  loading = true;
+}
+
+describe('ShimmerComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let hostComponent: TestHostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent, ShimmerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    hostComponent = fixture.componentInstance;
+  });
+
+  // Helper to wait for async operations
+  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms || 50));
+
+  it('renders children normally when loading=false', async () => {
+    fixture.detectChanges();
+    const shimmerEl = fixture.debugElement.query(By.directive(ShimmerComponent));
+    const shimmerInstance = shimmerEl.componentInstance;
+
+    Object.defineProperty(shimmerInstance, 'loading', { value: signal(false) });
+    shimmerEl.injector.get(ChangeDetectorRef).detectChanges();
+
+    fixture.detectChanges();
+    await wait(0);
+    fixture.detectChanges();
+
+    const content = fixture.nativeElement.querySelector('.test-content');
+    expect(content).toBeTruthy();
+    expect(content.textContent).toBe('Content');
+
+    // Should not have the measure container when not loading
+    const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
+    expect(measureContainer).toBeFalsy();
+  });
+
+  it('renders shimmer structure when loading=true', async () => {
+    hostComponent.loading = true;
+    fixture.detectChanges();
+    await wait(0);
+    fixture.detectChanges();
+
+    // Should render the measure container
+    const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
+    expect(measureContainer).toBeTruthy();
+  });
+
+  it('applies transparent text style to measure container', async () => {
+    hostComponent.loading = true;
+    fixture.detectChanges();
+    await wait(0);
+    fixture.detectChanges();
+
+    // Check that the measure container has the class
+    const measureContainer = fixture.nativeElement.querySelector('.shimmer-measure-container');
+    expect(measureContainer).toBeTruthy();
+    expect(measureContainer.classList.contains('shimmer-measure-container')).toBe(true);
+  });
+});
+
+describe('ShimmerComponent with config provider', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms || 50));
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent, ShimmerComponent],
+      providers: [
+        provideShimmerConfig({
+          shimmerColor: 'rgba(255, 0, 0, 0.5)',
+          backgroundColor: '#ff0000',
+          duration: 2,
+          fallbackBorderRadius: 8,
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+  });
+
+  it('uses provided config values', async () => {
+    fixture.componentInstance.loading = true;
+    fixture.detectChanges();
+    await wait(0);
+    fixture.detectChanges();
+
+    // The config should be injected - we can verify by checking the SHIMMER_CONFIG token
+    const config = TestBed.inject(SHIMMER_CONFIG);
+    expect(config.shimmerColor).toBe('rgba(255, 0, 0, 0.5)');
+    expect(config.backgroundColor).toBe('#ff0000');
+    expect(config.duration).toBe(2);
+    expect(config.fallbackBorderRadius).toBe(8);
+  });
+});
+
+describe('ShimmerComponent input overrides', () => {
+  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms || 50));
+
+  @Component({
+    selector: 'test-override-host',
+    standalone: true,
+    imports: [ShimmerComponent],
+    template: `
+      <shimmer
+        [loading]="true"
+        [shimmerColor]="'#00ff00'"
+        [backgroundColor]="'#0000ff'"
+        [duration]="3"
+        [fallbackBorderRadius]="12"
+      >
+        <div>Content</div>
+      </shimmer>
+    `,
+    schemas: [NO_ERRORS_SCHEMA],
+  })
+  class TestOverrideHostComponent {}
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestOverrideHostComponent, ShimmerComponent],
+      providers: [
+        provideShimmerConfig({
+          shimmerColor: 'rgba(255, 0, 0, 0.5)',
+          duration: 1,
+        }),
+      ],
+    }).compileComponents();
+  });
+
+  it('component inputs override provider config', async () => {
+    const fixture = TestBed.createComponent(TestOverrideHostComponent);
+    fixture.detectChanges();
+
+    // Manual override for input signals
+    const shimmer = fixture.debugElement.children[0].componentInstance as ShimmerComponent;
+    Object.defineProperty(shimmer, 'shimmerColor', { value: signal('#00ff00') });
+    Object.defineProperty(shimmer, 'backgroundColor', { value: signal('#0000ff') });
+    Object.defineProperty(shimmer, 'duration', { value: signal(3) });
+    Object.defineProperty(shimmer, 'fallbackBorderRadius', { value: signal(12) });
+
+    fixture.detectChanges();
+    await wait(0);
+    fixture.detectChanges();
+
+    // The shimmer component should use input values over config
+    expect(shimmer.resolvedShimmerColor()).toBe('#00ff00');
+    expect(shimmer.resolvedBackgroundColor()).toBe('#0000ff');
+    expect(shimmer.resolvedDuration()).toBe(3);
+    expect(shimmer.resolvedFallbackBorderRadius()).toBe(12);
+  });
+});