open-index/open-npm huggingface dataset:
npm package: @shared-state/core
Description: The core package of `@shared-state`
Author: Mark Li
Latest version: 1.3.1

# @shared-state/core

The core package of `@shared-state`

## Quick Start

Install `@shared-state/core`

```
pnpm install @shared-state/core
```

## Example

### Basic

```js
import { createSharedState } from "@shared-state/core";

const CountState = createSharedState(0);

CountState.get(); // Get value

CountState.set((count) => count + 1); // Set value

const onSharedStateChange = ({ previousState, nextState }) =>
  console.log(previousState, nextState)

CountState.subscribe(onSharedStateChange); // Subscribe state

CountState.unsubscribe(onSharedStateChange)
```
npm package: @shared-state/persist
Description: 此软件包提供状态持久化功能
Author: Mark Li
Latest version: 0.0.19

# @shared-state/persist

此软件包提供状态持久化功能

## 快速开始

Install `@shared-state/core` and `@shared-state/persist`

```
pnpm install @shared-state/core @shared-state/persist
```

## 示例

### 使用 localStorage 或 sessionStorage 持久化状态

```js
import { createSharedState } from "@shared-state/core";
import { persist, createWebPersistentStorage } from "@shared-state/persist";

const localStoragePersistentState = persist(createSharedState(0), {
  key: "localStorage",
  storage: createWebPersistentStorage(localStorage),
});

const sessionStoragePersistentState = persist(createSharedState(0), {
  key: "sessionStorage",
  storage: createWebPersistentStorage(sessionStorage),
});
```

### 监听持久化数据加载状态

```js
import { createSharedState } from "@shared-state/core";
import { persist, createWebPersistentStorage } from "@shared-state/persist";

const persistentState = persist(createSharedState(0), {
  key: "localStorage",
  storage: createWebPersistentStorage(localStorage),
});

persistentState.hydrationState.subscribe((hydrating) => console.log(hydrating));
```
npm package: @shared-state/persistence
Description: 此软件包提供状态持久化功能
Author: Mark Li
Latest version: 1.2.0

# @shared-state/persistence

此软件包提供状态持久化功能

## 快速开始

Install `@shared-state/core` and `@shared-state/persistence`

```
pnpm install @shared-state/core @shared-state/persistence
```

## 示例

### 使用 localStorage 或 sessionStorage 持久化状态

```js
import {
  createPersistenceSharedState,
  createWebPersistenceStorage,
} from "@shared-state/persistence";

const localStoragePersistenceState = createPersistenceSharedState(
  createWebPersistenceStorage(localStorage),
  "localStorage",
  0
);

const sessionStoragePersistenceState = createPersistenceSharedState(
  createWebPersistenceStorage(sessionStorage),
  "sessionStorage",
  0
);
```

### 监听持久化数据加载状态

```js
import { createSharedState } from "@shared-state/core";
import { persist, createWebPersistenceStorage } from "@shared-state/persistence";

const persistenceState = createPersistenceSharedState(
  createWebPersistenceStorage(localStorage),
  "localStorage",
  0
);

persistenceState.hydrationState.subscribe((hydrating) => console.log(hydrating));
```
npm package: @shared-state/react
Description: This package provides a series of APIs for using Shared State via React
Author: Mark Li
Latest version: 2.0.0

# @shared-state/react

This package provides a series of APIs for using Shared State via React

## Quick Start

Install `@shared-state/core` and `@shared-state/react`

```
pnpm install @shared-state/core @shared-state/react
```

## Example

### Using with Function Component

```jsx
import { createSharedState } from "@shared-state/core";
import { useSharedState } from "@shared-state/react";

const sharedCount = createSharedState(0);

function Counter() {
  const [count, setCount] = useSharedState(sharedCount);

  return (
    <button onClick={() => setCount((count) => count + 1)}>{count}</button>
  );
}
```
npm package: @shared-ui-explore/components
Description: Complete shared UI components library with zero-configuration styling
Latest version: 1.2.21

# @shared-ui-explore/components

Optimized UI component library with **zero-configuration styling** using CSS injection.

## ✅ Key Features

- **Zero-Configuration CSS**: Styles automatically injected when components are imported
- **Bundle Optimized**: 24 kB (gzipped: 6.8 kB) for both components
- **Tree-Shaking Ready**: Import only what you need
- **TypeScript Support**: Full type definitions included

## 🚀 Usage

### Import Components (Recommended)
```typescript
// Import only what you need
import { Button } from '@shared-ui-explore/components';
import { Badge } from '@shared-ui-explore/components';

// CSS is automatically injected - no manual imports needed!
export function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Badge variant="success">New</Badge>
    </div>
  );
}
```

### Individual Component Imports
```typescript
// For more granular control
import { Button } from '@shared-ui-explore/components/button';
import { Badge } from '@shared-ui-explore/components/badge';

// CSS still automatically injected
```

## 🎨 CSS Styling

**No manual CSS imports required!** The components use `vite-plugin-css-injected-by-js` which automatically:

1. **Injects CSS** when components are imported
2. **Prevents duplication** - CSS only injected once
3. **Applies styles immediately** - no FOUC (Flash of Unstyled Content)
4. **Works in all environments** - browser, SSR, etc.

## 📦 Bundle Size

- **Components Bundle**: 24 kB (gzipped: 6.8 kB)
- **CSS Included**: Automatically injected with components
- **Individual Package**: Button (19.1 kB), Badge (13.2 kB) with separate CSS injection

## 🔧 Available Components

### Button
```typescript
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  className?: string;
  children: React.ReactNode;
}
```

### Badge
```typescript
interface BadgeProps {
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  appearance?: 'solid' | 'outline' | 'default';
  shape?: 'rounded' | 'pill' | 'square' | 'dot';
  children: React.ReactNode;
  icon?: React.ReactNode;
}
```

This package provides the perfect balance between developer convenience and bundle optimization with truly zero-configuration styling.
npm package: @shared/fetch
Description: fetch utils
Latest version: 0.4.5

# fetchUtils


## Install

```shell
$ npm install git+ssh://git@github.com:heineiuo/fetchUtils --save-dev 
```

## Usage

``` javascript
import {Mock, POSTUrlencodeJSON, POSTRawJSON} from '@heineiuo/fetch-utils'

```

use with webpack & babel: 

```javascript
 {
    test: /(\.js|\.jsx)$/,
    exclude: /(node_modules\/)?!\@heineiuo)/, 
    loader: 'babel',
    query: {
      presets: ['es2015', 'stage-0', 'react']
    }
 }

```
npm package: @sharedo/mobile-core
Description: An npm package containing components and services to help develop a sharedo mobile app
Author: Duncan Smith
Latest version: 0.1.27

# Sharedo Mobile Core
This package contains components and services to help quickly
develop a sharedo mobile app based on Vue/Vuetify.

## Installation
```
# latest stable
npm install @sharedo/mobile-core
```

## Documentation
Check out [live examples](https://ambitious-rock-0b8da8903.azurestaticapps.net/), or visit the [github page](https://github.com/sharedo-tech/sharedo-mobile-core).