@shimmer-from-structure/svelte 2.2.0 → 2.3.1

package/README.md

@@ -1,10 +1,12 @@
 # ✨ Shimmer From Structure
 
-A **React, Vue & Svelte** 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)
 
@@ -18,7 +20,7 @@ Traditional shimmer libraries require you to:
 
 **Shimmer From Structure** eliminates all of that:
 
-- ✅ **Works with React, Vue & Svelte** - Simple, framework-specific drivers
+- ✅ **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
@@ -43,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)
@@ -68,6 +70,24 @@ Svelte support is provided via its own adapter:
 import { Shimmer } from '@shimmer-from-structure/svelte';
 ```
 
+### Angular
+
+Angular support requires importing from the specific adapter:
+
+```typescript
+// Angular projects
+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
@@ -137,6 +157,56 @@ let isLoading = $state(true);
 </Shimmer>
 ```
 
+## Angular
+
+### Static Content
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { ShimmerComponent } from '@shimmer-from-structure/angular';
+
+@Component({
+  selector: 'app-user-card',
+  standalone: true,
+  imports: [ShimmerComponent],
+  template: `
+    <shimmer [loading]="isLoading()">
+      <div class="card">
+        <img src="avatar.jpg" class="avatar" />
+        <h2>John Doe</h2>
+        <p>Software Engineer</p>
+      </div>
+    </shimmer>
+  `,
+})
+export class UserCardComponent {
+  isLoading = signal(true);
+}
+```
+
+## 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`
@@ -221,6 +291,60 @@ const userTemplate = {
 </Shimmer>
 ```
 
+**Angular**
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { ShimmerComponent } from '@shimmer-from-structure/angular';
+import { UserCardComponent } from './user-card.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ShimmerComponent, UserCardComponent],
+  template: `
+    <shimmer [loading]="loading()" [templateProps]="{ user: userTemplate }">
+      <app-user-card [user]="user() || userTemplate" />
+    </shimmer>
+  `,
+})
+export class AppComponent {
+  loading = signal(true);
+  user = signal<User | null>(null);
+
+  userTemplate = {
+    name: 'Loading...',
+    role: 'Loading role...',
+    avatar: 'placeholder.jpg',
+  };
+}
+```
+
+**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
@@ -293,6 +417,43 @@ The `templateProps` object is spread onto the first child component when loading
 </Shimmer>
 ```
 
+**Angular**
+
+```typescript
+<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
+  }">
+  <app-my-component
+    [user]="user()"
+    [settings]="settings()" />
+</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**
@@ -378,6 +539,33 @@ function Dashboard() {
 </Shimmer>
 ```
 
+**Angular**
+
+```typescript
+@Component({
+  template: `
+    <!-- User profile section -->
+    <shimmer [loading]="loadingUser()" [templateProps]="{ user: userTemplate }">
+      <app-user-profile [user]="user()" />
+    </shimmer>
+
+    <!-- Stats section - with custom colors -->
+    <shimmer
+      [loading]="loadingStats()"
+      [templateProps]="{ stats: statsTemplate }"
+      shimmerColor="rgba(20, 184, 166, 0.2)"
+    >
+      <app-stats-grid [stats]="stats()" />
+    </shimmer>
+  `,
+})
+export class DashboardComponent {
+  loadingUser = signal(true);
+  loadingStats = signal(true);
+  // ...
+}
+```
+
 ### Transactions List
 
 **React**
@@ -404,6 +592,16 @@ function Dashboard() {
 </Shimmer>
 ```
 
+**Angular**
+
+```typescript
+<shimmer
+  [loading]="loadingTransactions()"
+  [templateProps]="{ transactions: transactionsTemplate }">
+  <app-transactions-list [transactions]="transactions()" />
+</shimmer>
+```
+
 ### Team Members Grid
 
 **React**
@@ -430,6 +628,16 @@ function Dashboard() {
 </Shimmer>
 ```
 
+**Angular**
+
+```typescript
+<shimmer
+  [loading]="loadingTeam()"
+  [templateProps]="{ members: teamTemplate }">
+  <app-team-members [members]="team()" />
+</shimmer>
+```
+
 ## 🔄 Using with React Suspense
 
 Shimmer works seamlessly as a Suspense fallback. When used this way, `loading` is always `true` because React automatically unmounts the fallback and replaces it with the resolved component.
@@ -550,6 +758,47 @@ setShimmerConfig({
 <Dashboard />
 ```
 
+### Angular (Dependency Injection)
+
+```typescript
+// main.ts or bootstrapApplication
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideShimmerConfig } from '@shimmer-from-structure/angular';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideShimmerConfig({
+      shimmerColor: 'rgba(56, 189, 248, 0.4)',
+      backgroundColor: 'rgba(56, 189, 248, 0.1)',
+      duration: 2.5,
+      fallbackBorderRadius: 8,
+    }),
+  ],
+});
+```
+
+### 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:
@@ -584,6 +833,26 @@ Components inside the provider automatically inherit values. You can still overr
 <Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>
 ```
 
+**Angular**
+
+```typescript
+<!-- Inherits blue theme from injected config -->
+<shimmer [loading]="true"><app-user-card /></shimmer>
+
+<!-- Overrides injected settings -->
+<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:
@@ -617,6 +886,32 @@ const config = getShimmerConfig();
 console.log(config.backgroundColor);
 ```
 
+**Angular**
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { injectShimmerConfig } from '@shimmer-from-structure/angular';
+
+@Component({
+  selector: 'app-my-component',
+  template: `<div [style.background]="config.backgroundColor">...</div>`,
+})
+export class MyComponent {
+  config = injectShimmerConfig();
+}
+```
+
+**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
@@ -706,15 +1001,17 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 This library is organized as a monorepo with four packages:
 
-| Package                          | Description                                 | Size     |
-| -------------------------------- | ------------------------------------------- | -------- |
-| `@shimmer-from-structure/core`   | Framework-agnostic DOM utilities            | 1.44 kB  |
-| `@shimmer-from-structure/react`  | React adapter                               | 12.84 kB |
-| `@shimmer-from-structure/vue`    | Vue 3 adapter                               | 3.89 kB  |
-| `@shimmer-from-structure/svelte` | Svelte adapter                              | 4.60 kB  |
-| `shimmer-from-structure`         | Main package (React backward compatibility) | 0.93 kB  |
+| Package                           | Description                                 | Size     |
+| --------------------------------- | ------------------------------------------- | -------- |
+| `@shimmer-from-structure/core`    | Framework-agnostic DOM utilities            | 1.44 kB  |
+| `@shimmer-from-structure/react`   | React adapter                               | 12.84 kB |
+| `@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 and Vue 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
 
@@ -723,6 +1020,8 @@ The core package contains all DOM measurement logic, while React and Vue package
 - [x] Container background visibility
 - [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/dist/index.js

@@ -1,4 +1,4 @@
-(function(n,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("svelte/internal/disclose-version"),require("svelte/internal/client"),require("svelte"),require("@shimmer-from-structure/core")):typeof define=="function"&&define.amd?define(["exports","svelte/internal/disclose-version","svelte/internal/client","svelte","@shimmer-from-structure/core"],v):(n=typeof globalThis<"u"?globalThis:n||self,v(n.ShimmerSvelte={},null,n.SvelteInternalClient,n.Svelte,n.ShimmerCore))})(this,function(n,v,B,h,g){"use strict";function w(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const p=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,p.get?p:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=w(B),k=Symbol("SHIMMER_CONFIG");function _(){return h.getContext(k)||g.shimmerDefaults}function D(r={}){const t=_(),i={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};h.setContext(k,i)}var M=e.from_html("<div><div></div></div>"),j=e.from_html(`<div style="position: relative;"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
+(function(n,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("svelte/internal/disclose-version"),require("svelte/internal/client"),require("svelte"),require("@shimmer-from-structure/core")):typeof define=="function"&&define.amd?define(["exports","svelte/internal/disclose-version","svelte/internal/client","svelte","@shimmer-from-structure/core"],v):(n=typeof globalThis<"u"?globalThis:n||self,v(n.ShimmerSvelte={},null,n.SvelteInternalClient,n.Svelte,n.ShimmerCore))})(this,(function(n,v,B,h,g){"use strict";function w(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const p=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,p.get?p:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=w(B),k=Symbol("SHIMMER_CONFIG");function _(){return h.getContext(k)||g.shimmerDefaults}function D(r={}){const t=_(),i={shimmerColor:r.shimmerColor??t.shimmerColor,backgroundColor:r.backgroundColor??t.backgroundColor,duration:r.duration??t.duration,fallbackBorderRadius:r.fallbackBorderRadius??t.fallbackBorderRadius};h.setContext(k,i)}var M=e.from_html("<div><div></div></div>"),j=e.from_html(`<div style="position: relative;"><div class="shimmer-measure-container svelte-euvo5u" style="pointer-events: none;" aria-hidden="true"><!></div> <div style="
         position: absolute;
         top: 0;
         left: 0;
@@ -30,4 +30,4 @@
               height: 100%;
               background: linear-gradient(90deg, transparent, ${e.get(z)??""}, transparent);
               animation: shimmer-animation ${e.get(N)??""}s infinite;
-            `)}),e.append(C,m)}),e.reset(R),e.reset(u),e.append(d,u)};e.if(X,d=>{i()?d(K,!1):d(A)})}return e.append(r,x),e.pop(V)}Object.defineProperty(n,"shimmerDefaults",{enumerable:!0,get:()=>g.shimmerDefaults}),n.Shimmer=I,n.getShimmerConfig=_,n.setShimmerConfig=D,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+            `)}),e.append(C,m)}),e.reset(R),e.reset(u),e.append(d,u)};e.if(X,d=>{i()?d(K,!1):d(A)})}return e.append(r,x),e.pop(V)}Object.defineProperty(n,"shimmerDefaults",{enumerable:!0,get:()=>g.shimmerDefaults}),n.Shimmer=I,n.getShimmerConfig=_,n.setShimmerConfig=D,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shimmer-from-structure/svelte",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "type": "module",
   "description": "Svelte adapter for shimmer-from-structure",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
     "@shimmer-from-structure/core": "*"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
@@ -38,7 +38,8 @@
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tslib": "^2.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitefu": "^1.1.1"
   },
   "keywords": [
     "svelte",