From 0bf203f2d79dee6d33014074627d9bff7e875a28 Mon Sep 17 00:00:00 2001 From: Olebogeng Mbedzi Date: Sat, 11 Apr 2026 14:22:41 +0200 Subject: [PATCH 1/4] changelog - update changelog --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 460c510..dbba3c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.4.5] - 2026-04-11 + +### Changed + +- **Build: Automated Release Workflow**: Migrated from manual releases to Changesets for automated version management and publishing. + - Integrated `@changesets/cli` for semantic versioning and changelog generation. + - Configured GitHub Actions workflow to automatically create "Version Packages" PRs when changesets are merged to main. + - Automatic npm publishing when Version PR is merged, with support for all framework adapters. + - Added automatic `package-lock.json` synchronization during version bumps to prevent CI failures. + - Simplified release process: create changeset → merge to main → automated publish. + +- **Testing: Test Environment Migration**: Migrated test environment from jsdom to happy-dom for improved performance and standards compliance. + - Updated core package test setup to use `happy-dom` instead of `jsdom`. + - Modified ResizeObserver tests to be compatible with happy-dom's implementation. + - Faster test execution with better DOM API coverage. + ## [2.4.4] - 2026-04-08 ### Fixed From 981c5f3446549c8734ad2f4805edf0b74a1ee6d2 Mon Sep 17 00:00:00 2001 From: Olebogeng Mbedzi Date: Sat, 11 Apr 2026 18:19:01 +0200 Subject: [PATCH 2/4] chore - Lock main package dependencies --- .changeset/frank-camels-raise.md | 5 +++++ packages/shimmer-from-structure/package.json | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/frank-camels-raise.md diff --git a/.changeset/frank-camels-raise.md b/.changeset/frank-camels-raise.md new file mode 100644 index 0000000..0c8abff --- /dev/null +++ b/.changeset/frank-camels-raise.md @@ -0,0 +1,5 @@ +--- +'shimmer-from-structure': minor +--- + +Lock dependencies diff --git a/packages/shimmer-from-structure/package.json b/packages/shimmer-from-structure/package.json index dcfd891..f33e715 100644 --- a/packages/shimmer-from-structure/package.json +++ b/packages/shimmer-from-structure/package.json @@ -1,6 +1,6 @@ { "name": "shimmer-from-structure", - "version": "2.4.2", + "version": "2.4.5", "description": "Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.", "main": "index.js", "types": "index.d.ts", @@ -20,11 +20,11 @@ "prepublishOnly": "cp ../../README.md ." }, "dependencies": { - "@shimmer-from-structure/react": "*", - "@shimmer-from-structure/vue": "*", - "@shimmer-from-structure/svelte": "*", - "@shimmer-from-structure/angular": "*", - "@shimmer-from-structure/solid": "*" + "@shimmer-from-structure/react": "2.4.5", + "@shimmer-from-structure/vue": "2.4.5", + "@shimmer-from-structure/svelte": "2.4.5", + "@shimmer-from-structure/angular": "2.4.5", + "@shimmer-from-structure/solid": "2.4.5" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", From 03f55220d05dae172c7a0efcad0d60e96d876098 Mon Sep 17 00:00:00 2001 From: Olebogeng Mbedzi Date: Wed, 15 Apr 2026 00:51:01 +0200 Subject: [PATCH 3/4] docs - Add number formater --- docs/app/components/Header.tsx | 5 +++-- docs/lib/formatNumber.ts | 21 +++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 docs/lib/formatNumber.ts diff --git a/docs/app/components/Header.tsx b/docs/app/components/Header.tsx index 13a1f0a..912c1cd 100644 --- a/docs/app/components/Header.tsx +++ b/docs/app/components/Header.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import { useState, useEffect } from 'react'; import { ThemeToggle } from './ThemeToggle'; +import { formatCompactNumber } from '@/lib/formatNumber'; export function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -78,7 +79,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} @@ -162,7 +163,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} diff --git a/docs/lib/formatNumber.ts b/docs/lib/formatNumber.ts new file mode 100644 index 0000000..69e043f --- /dev/null +++ b/docs/lib/formatNumber.ts @@ -0,0 +1,21 @@ +/** + * Formats a number into a compact string representation + * @param num - The number to format + * @returns Formatted string (e.g., 1000 -> "1k", 1234 -> "1.2k", 999 -> "999") + */ +export function formatCompactNumber(num: number): string { + if (num < 1000) { + return num.toString(); + } + + const thousands = num / 1000; + const rounded = Math.round(thousands * 10) / 10; + + // If the rounded value is a whole number, show without decimal + if (rounded % 1 === 0) { + return `${Math.round(rounded)}k`; + } + + // Otherwise show one decimal place + return `${rounded}k`; +} From 673f2a1e54521a4b48aaf1ddb666e178a14cf473 Mon Sep 17 00:00:00 2001 From: Olebogeng Mbedzi Date: Wed, 15 Apr 2026 23:29:59 +0200 Subject: [PATCH 4/4] docs - open docs in new page --- README.md | 2 +- docs/app/components/HomeContent.tsx | 117 +++++++++++++++++++++------- 2 files changed, 91 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index f30c51e..b66f9c7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS. -**Documentation:** [Access Full Docs](https://shimmer-from-structure-docs.vercel.app) +**Documentation:** Access Full Docs ![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) diff --git a/docs/app/components/HomeContent.tsx b/docs/app/components/HomeContent.tsx index 0a4bafd..e94bbf4 100644 --- a/docs/app/components/HomeContent.tsx +++ b/docs/app/components/HomeContent.tsx @@ -15,24 +15,85 @@ interface HomeContentProps { latestRelease: Release; } +/** macOS-style terminal window — always rendered outside any wrapper */ +function CliSnippet() { + return ( +
+
+ {/* Traffic-light dots */} +
+ + + +
+ + {/* Command line */} + 
+          
+            ${' '}
+            npm{' '}
+            install shimmer-from-structure
+            {'\n'}
+            # → Zero-maintenance shimmer for your UI
+          
+
+
+
+ ); +} + export function HomeContent({ latestRelease }: HomeContentProps) { const [loading, setLoading] = useState(true); const { resolvedTheme } = useTheme(); useEffect(() => { - // Show shimmer for 3 seconds on first mount - const timer = setTimeout(() => { - setLoading(false); - }, 3000); - + const timer = setTimeout(() => setLoading(false), 3000); return () => clearTimeout(timer); }, []); const handleShowDemo = () => { setLoading(true); - setTimeout(() => { - setLoading(false); - }, 3000); + setTimeout(() => setLoading(false), 3000); }; const isDark = resolvedTheme === 'dark'; @@ -42,6 +103,7 @@ export function HomeContent({ latestRelease }: HomeContentProps) { return (
+ {/* ── Block 1: header + hero title/description ── */}
@@ -57,13 +119,12 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
- {/* Hero Section */} -
+

Shimmer From Structure

-

+

A structure-aware skeleton loader that mirrors your rendered UI at runtime. @@ -71,7 +132,17 @@ export function HomeContent({ latestRelease }: HomeContentProps) { Zero layout duplication. Built for modern frameworks.

+
+
+ + + {/* ── CLI snippet — never inside a Shimmer ── */} + + {/* ── Block 2: CTA buttons + badges + features ── */} + +
+
- - React - - - Vue - - - Svelte - - - Angular - - - SolidJS - + {['React', 'Vue', 'Svelte', 'Angular', 'SolidJS'].map((fw) => ( + + {fw} + + ))}
@@ -190,7 +254,6 @@ export function HomeContent({ latestRelease }: HomeContentProps) { /> {/* Quick Example */} -

Quick Example