open-index/open-npm huggingface dataset:
npm package: @leather-fara/query
Description: Leather query
Author: Leather.io contact@leather.io
Latest version: 0.6.8-beta.5

# @leather-wallet/queries

We use `React Query` to fetch APIs and to manage the cache of the responses.

Code practices:

1. Create custom hooks for queries, don't use plain `useQuery` in components.
2. Treat the query key like a dependency array. queryFn should receive same arguments as a queryKey.
3. Use selectors to transform the data before usage. Example:

```jsx
export const useTodosQuery = select =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select,
  });

export const useTodosCount = () => useTodosQuery(data => data.length);
export const useTodo = id => useTodosQuery(data => data.find(todo => todo.id === id));
```

4. Keep api layer separate from the queries (queryFn separate from useQueries). Example:

```jsx
function fetchGroups(): Promise<Group[]> {
  return axios.get('groups').then((response) => response.data)
}

// ✅ data will be `Group[] | undefined` here
function useGroups() {
  return useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
}

// ✅ data will be `number | undefined` here
function useGroupCount() {
  return useQuery({
    queryKey: ['groups'],
    queryFn: fetchGroups,
    select: (groups) => groups.length,
  })
}
```

5. Structure your Query Keys from most generic to most specific. Example:

```jsx
['todos', 'list', { filters: 'all' }][('todos', 'list', { filters: 'done' })][
  ('todos', 'detail', 1)
][('todos', 'detail', 2)];
```

6. Optional: we might want to try the concept of query key factory: https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories

Reference: https://tkdodo.eu/blog/practical-react-query
npm package: @leather-wallet/eslint-config
Description: Shared eslint configuration
Author: Leather.io contact@leather.io
Latest version: 0.5.0

# Shared eslint configuration

This package contains `eslint` configuration to be shared across projects.

---

## Contents

- [Setup](#setup)
- [Usage](#usage)
- [License](#license)

## Setup

- Install as a dev dependency in packages / apps:

  ```sh
  npm i --save-dev @leather-wallet/eslint-config
  ```

- Add eslint configuration file:

  ```js
  // .eslintrc.js
  module.exports = {
    extends: ['@leather-wallet/eslint-config', 'universe/native'],

    // add this if you have typescript in your package / app
    parserOptions: {
      project: path.resolve(__dirname, './tsconfig.json'),
    },

    ...,
  };
  ```

- Add eslint ignore patterns file:

  ```sh
  # .eslintignore

  !.*
  node_modules/

  .commitlintrc.js
  .prettierrc.js
  .eslintrc.js

  # Custom ignore patterns
  ...
  ```

- Add eslint scripts:

  ```jsonc
  // package.json

  "scripts": {
    ...
    "lint": "eslint . --config .eslintrc.js",
    "lint:fix": "eslint . --config .eslintrc.js --fix"
    ...
  }
  ```

## Usage

- Manual usage from command line:

  ```sh
  npm run lint
  npm run lint:fix
  ```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather-wallet/panda-preset
Description: Leather styles package
Author: Leather, LLC
Latest version: 0.2.0

# Leather Panda Preset Package

This package contains Leathers panda preset configuration

## Development

- `pnpm prepare` to generate panda files
- `pnpm build` to run `tsup` build

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather-wallet/prettier-config
Description: Shared prettier configuration
Author: Leather.io contact@leather.io
Latest version: 0.4.1

# Leather prettier config

This package is the prettier configuration for Leather

# Shared prettier configuration

`prettier` is used to auto format code in many language formats (`js`, `ts`, `tsx`, `md`, `json`, `yaml`).

---

## Contents

- [Setup](#setup)
- [Usage](#usage)
- [License](#license)

## Setup

- Install as a dev dependency in packages / apps:

```sh
pnpm install -D @leather-wallet/prettier-config
```

- Add prettier configuration file:

  ```js
  // .prettierrc.js
  import defaultConfig from '@leather-wallet/prettier-config';

  export default { ...defaultConfig };
  ```

- Add prettier ignore patterns file:

  ```sh
  # .prettierignore

  node_modules/

  # Custom ignore patterns
  ...
  ```

- Add prettier scripts:

  ```jsonc
  // package.json

  "scripts": {
    "format": "prettier --write \"*.{js,jsx,ts,tsx}\"",
    ...
  }
  ```

## Usage

- Manual usage from command line:

  ```sh
  npm run format
  ```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather-wallet/query
Description: Leather query
Author: Leather.io contact@leather.io
Latest version: 0.8.10

# @leather-wallet/queries

We use `React Query` to fetch APIs and to manage the cache of the responses.

Code practices:

1. Create custom hooks for queries, don't use plain `useQuery` in components.
2. Treat the query key like a dependency array. queryFn should receive same arguments as a queryKey.
3. Use selectors to transform the data before usage. Example:

```jsx
export const useTodosQuery = select =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select,
  });

export const useTodosCount = () => useTodosQuery(data => data.length);
export const useTodo = id => useTodosQuery(data => data.find(todo => todo.id === id));
```

4. Keep api layer separate from the queries (queryFn separate from useQueries). Example:

```jsx
function fetchGroups(): Promise<Group[]> {
  return axios.get('groups').then((response) => response.data)
}

// ✅ data will be `Group[] | undefined` here
function useGroups() {
  return useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
}

// ✅ data will be `number | undefined` here
function useGroupCount() {
  return useQuery({
    queryKey: ['groups'],
    queryFn: fetchGroups,
    select: (groups) => groups.length,
  })
}
```

5. Structure your Query Keys from most generic to most specific. Example:

```jsx
['todos', 'list', { filters: 'all' }][('todos', 'list', { filters: 'done' })][
  ('todos', 'detail', 1)
][('todos', 'detail', 2)];
```

6. Optional: we might want to try the concept of query key factory: https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories

Reference: https://tkdodo.eu/blog/practical-react-query
npm package: @leather-wallet/rpc
Description: RPC types package for Leather
Author: leather-wallet
Latest version: 1.0.4

# @leather-wallet/rpc

This package provides Typescript typings Leather developers can use when interacting with the `LeatherProvider` global object.

## Consuming as global object

In your Typescript project, import `LeatherProvider` and declare it as a global type.

```ts
import { LeatherProvider } from '@leather-wallet/rpc';

declare global {
  interface Window {
    LeatherProvider?: LeatherProvider;
  }
}
```
npm package: @leather-wallet/tsconfig-config
Description: Shared tsconfig configuration
Author: Leather.io contact@leather.io
Latest version: 0.4.0

# Shared typescript configuration

The purpose of [typescript](https://www.typescriptlang.org/) is to add strong typing to `javascript`.

## Contents

- [Setup](#setup)
- [License](#license)

## Setup

- Install as a dev dependency in packages / apps:

  ```sh
  npm install --save-dev @leather-wallet/tsconfig-config
  ```

- Add typescript configuration file to your package that extends the base

  ```jsonc
  // packages/package/tsconfig.json
  {
    "extends": ["@leather-wallet/tsconfig-config/tsconfig.base.json"],
    "include": ["**/*", ".*.ts"],
    "exclude": []
  }
  ```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather-wallet/ui
Description: This package contains Leather Wallet's UI library. It is intended for use in applications that are using [panda css](https://panda-css.com/).
Latest version: 1.4.7

# UI

This package contains Leather Wallet's UI library. It is intended for use in applications that are using [panda css](https://panda-css.com/).

# Setup

To setup in your application you need to:

- install panda-css
- setup panda css and configure it to acknowledge the library code
- configure webpack to load the files correctly

## Panda configuration

Specify the library as part of the `panda.config` `include`:

```json
  include: [
    './node_modules/@leather-wallet/ui/dist-all/src/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
```

## Webpack configuration

- Alias `react` and `react-dom` to avoid react errors.

- Configure your `module` to handle `jsx` files

```json
export const config = {
...
  module: {
    resolve: {
    ...
    alias: {
    'leather-styles': path.resolve('leather-styles'),
    'react': path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom')
    },
      ...
    rules: [
      ...
      {
        test: /\.(js)$/,
        include: [/node_modules\/@cteic\/ui/],
        loader: 'esbuild-loader',
        options: { tsconfig: './tsconfig.json', loader: 'jsx',target: 'es2020' },
      },

```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/analytics
Description: Analytics package for Leather using Mixpanel
Author: Leather.io contact@leather.io
Latest version: 3.19.3

# @leather/analytics

This package provides a client for sending analytics events to various analytics services. Currently, it supports Segment but could be extended to support other services in the future.

## Installation

```bash
pnpm install @leather/analytics
```

## Usage

Before making any analytics calls, you must configure the analytics client with your write key.

```ts
import { AnalyticsClientType, configureAnalyticsClient } from '@leather.io/analytics';

export const analytics: AnalyticsClientType = configureAnalyticsClient({
  client: segmentClient,
  defaultProperties: {
    platform: 'mobile',
  },
});
```

Now you can make analytics calls with your configured client.

```ts
import { analytics } from 'path/to/analytics';

analytics.track('My Event', {
  property: 'value',
});
```

## Development

```sh
pnpm build
```

or

```sh
pnpm build:watch
```
npm package: @leather.io/eslint-config
Description: Shared eslint configuration
Author: Leather.io contact@leather.io
Latest version: 0.14.3

# Shared eslint configuration

This package provides shared `eslint` configurations with eslint 9 flat config. It includes two
presets:

- `base` - A standard configuration for TypeScript projects at Leather.
- `react` - An additional setup for React projects to use with `base`.

---

## Contents

- [Setup](#setup)
- [Usage](#usage)
- [License](#license)

## Setup

### Inside @leather.io/mono

You don’t need to install or link this package within monorepo packages. The base config
is applied to all packages and apps by default. To add custom configurations (e.g., React) for a
new package or app, add a new configuration object into `eslint-config.js` file at the root of the
monorepo:

```js
export default tseslint.config(
  { ...existingConfigs },
  {
    name: 'your-new-package-name',
    files: ['packages/your-package-path/src/**/*.{ts,tsx}'],
    extends: [reactConfig],
    rules: {
      // additional rules for the package
    },
  }
);
```

### In external repositories

1. Install the package:

```sh
npm install --save-dev @leather.io/eslint-config
```

2. Make sure all peer dependencies for this package are installed in your repository as
   devDependencies. The list of dependencies can be found [here](https://github.com/leather-io/mono/blob/dev/packages/eslint-config/package.json)
   or by running the following command:

```sh
npm info "@leather.io/eslint-config@latest" peerDependencies

```

3. Configure `eslint.config.js`:

```js
import { baseConfig, reactConfig } from '@leather.io/eslint-config';

export default [
  ...baseConfig,
  ...reactConfig, // Add for React projects
];
```

## Usage

Refer to [Running code quality checks with git hooks](../../README.md#running-code-quality-checks-with-git-hooks)
for information on how checks are run in the monorepo.

Outside the monorepo, add an npm script in `package.json` to run `eslint`, e.g.:
`"lint": "eslint"`.

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/features
Description: This package contains shared utilities for Leather Wallet's features for our web + React Native applications.
Latest version: 1.4.0

# Features

This package contains shared utilities for Leather Wallet's features for our web + React Native applications.

## Usage Rules

- **No platform-specific knowledge:** Components and hooks in this package do not contain any logic or imports that are specific to React Native or web platforms. All code is strictly platform-agnostic.

- **Uses only React primitives:** Functionality is built using core React primitives such as hooks (`useState`, `useEffect`, etc.) and contexts (`React.createContext`, `useContext`), ensuring compatibility and reusability.

- **Headless components:** There are no presentational components or JSX outputs. All business logic and state management are handled in headless hooks and context providers. You bring your own UI.

- **Render pattern:** All state and actions are exposed via render prop or hook return signatures. The consumer is responsible for supplying rendering logic and defining UI.

### Example

```js
// Usage of a headless feature hook
const { value, setValue } = useSomeFeature();

return (
  <CustomUIComponent value={value} onChange={setValue} />
);
```

Or with a render prop:

```js
<SomeFeatureProvider>
  {({ value, setValue }) => <CustomUI value={value} onChange={setValue} />}
</SomeFeatureProvider>
```

**Note:** No JSX or UI is shipped—every API is logic-only and fully controlled by consumers.

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/panda-preset
Description: Leather styles package
Author: Leather, LLC
Latest version: 0.16.2

# Leather Panda Preset Package

This package contains Leathers panda preset configuration

## Development

- `pnpm prepare` to generate panda files
- `pnpm build` to run `tsdown` build

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/prettier-config
Description: Shared prettier configuration
Author: Leather.io contact@leather.io
Latest version: 0.9.0

# Leather prettier config

This package is the prettier configuration for Leather

# Shared prettier configuration

`prettier` is used to auto format code in many language formats (`js`, `ts`, `tsx`, `md`, `json`, `yaml`).

---

## Contents

- [Setup](#setup)
- [Usage](#usage)
- [License](#license)

## Setup

- Install as a dev dependency in packages / apps:

```sh
pnpm install -D @leather.io/prettier-config
```

- Add prettier configuration file:

  ```js
  // .prettierrc.js
  import defaultConfig from '@leather.io/prettier-config';

  export default { ...defaultConfig };
  ```

- Add prettier ignore patterns file:

  ```sh
  # .prettierignore

  node_modules/

  # Custom ignore patterns
  ...
  ```

- Add prettier scripts:

  ```jsonc
  // package.json

  "scripts": {
    "format": "prettier --write \"*.{js,jsx,ts,tsx}\"",
    ...
  }
  ```

## Usage

- Manual usage from command line:

  ```sh
  npm run format
  ```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/query
Description: Leather query
Author: Leather.io contact@leather.io
Latest version: 2.46.3

# @leather.io/queries

We use `React Query` to fetch APIs and to manage the cache of the responses.

Code practices:

1. Queries must only export **query builders**. Do not export React hooks
2. API calls must be kept separate

```jsx
function fetchGroups(): Promise<Group[]> {
  return axios.get('groups').then((response) => response.data)
}

// ✅ Export query builder
export function createGroupsQuery() {
  return { queryKey: ['groups'], queryFn: fetchGroups };
}

// ❌ Do not export a pre-made query
export function useGroups() {
  return useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
}
```

Reference

- https://tkdodo.eu/blog/practical-react-query
- https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories
npm package: @leather.io/rpc
Description: RPC types package for Leather
Author: leather-wallet
Latest version: 2.21.16

# @leather.io/rpc

This package provides Typescript typings Leather developers can use when interacting with the `LeatherProvider` global object.

## Consuming as global object

In your Typescript project, import `LeatherProvider` and declare it as a global type.

```ts
import { LeatherProvider } from '@leather.io/rpc';

declare global {
  interface Window {
    LeatherProvider?: LeatherProvider;
  }
}
```

## SIP-30 Support

| Method                      |                                                   |
| --------------------------- | ------------------------------------------------- |
| `stx_getAddresses`          | 🟢 Yes                                            |
| `stx_getAccounts`           | 🔴 No                                             |
| `stx_getNetworks`           | 🔴 No                                             |
| `stx_transferStx`           | 🟢 Yes                                            |
| `stx_transferSip10Ft`       | 🟢 Yes                                            |
| `stx_transferSip9Nft`       | 🟢 Yes                                            |
| `stx_callContract`          | 🟠 Yes <sub>Hex-encoded Clarity values only</sub> |
| `stx_deployContract`        | 🟠 Yes <sub>Hex-encoded Clarity values only</sub> |
| `stx_signTransaction`       | 🟠 Yes <sub>Hex-encoded Clarity values only</sub> |
| `stx_signMessage`           | 🟠 Yes <sub>Hex-encoded Clarity values only</sub> |
| `stx_signStructuredMessage` | 🟠 Yes <sub>Hex-encoded Clarity values only</sub> |
| `stx_updateProfile`         | 🔴 No                                             |
| `stx_accountChange` (event) | 🔴 No                                             |
| `stx_networkChange` (event) | 🔴 No                                             |
npm package: @leather.io/sdk
Description: Leather SDK
Author: leather.io
Latest version: 1.5.42

# Leather SDK

This library exports an SDK to interact with Leather's RPC endpoints.

## Getting started

```bash
pnpm install @leather.io/sdk
pnpm add @leather.io/sdk
```

```ts
import { createLeatherClient } from '@leather.io/sdk';

const leather = createLeatherClient();

const addresses = await leather.getAddresses();
```
npm package: @leather.io/tsconfig-config
Description: Shared tsconfig configuration
Author: Leather.io contact@leather.io
Latest version: 0.11.1

# Shared typescript configuration

The purpose of [typescript](https://www.typescriptlang.org/) is to add strong typing to `javascript`.

## Contents

- [Shared typescript configuration](#shared-typescript-configuration)
  - [Contents](#contents)
  - [Setup](#setup)
  - [License](#license)

## Setup

- Install as a dev dependency in packages / apps:

  ```sh
  pnpm add -D @leather.io/tsconfig-config
  ```

- Add typescript configuration file to your package that extends the base

  ```jsonc
  // packages/package/tsconfig.json
  {
    "extends": ["@leather.io/tsconfig-config/tsconfig.base.json"],
    "include": ["**/*", ".*.ts"],
    "exclude": [],
  }
  ```

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leather.io/ui
Description: This package contains Leather Wallet's UI library for our web + React Native applications.
Latest version: 1.111.1

# UI

This package contains Leather Wallet's UI library for our web + React Native applications.

## Architecture

This package colocates Web and React Native code, such that commonalities such as shared logic and types are shared. **The naming convention must be followed.**

- `*.web.ts` — bundled only for Web
- `*.native.ts` — bundled only for React Native
- `*.shared.ts` — bundled for all platforms

## Web Setup

Our web apps use [panda css](https://panda-css.com/). To setup in your application you need to:

- Install `@pandacss/dev`
- Setup panda css and configure it to acknowledge the library code
- Configure Webpack to load the files correctly
- Import the library styles from `@leather.io/ui/styles`

### Panda configuration

Specify the library as part of the `panda.config` `include`:

```js
  include: [
    './node_modules/@leather.io/ui/dist-web/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
```

### Webpack configuration

- Alias `react` and `react-dom` to avoid react errors.

- Configure your `module` to handle `jsx` files

```js
export const config = {
...
  module: {
    resolve: {
    ...
    alias: {
    'leather-styles': path.resolve('leather-styles'),
    'react': path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom')
    },
      ...
    rules: [
      ...
      {
        test: /\.(js)$/,
        include: [/node_modules\/@leather.io\/ui/],
        loader: 'esbuild-loader',
        options: { tsconfig: './tsconfig.json', loader: {'jsx'},target: 'es2020' },
      },

```

## Security: Dynamic Content Sanitization

All dynamic HTML content rendered in the web app (such as FAQs, explainers, and CMS-driven posts) is sanitized using [DOMPurify](https://github.com/cure53/DOMPurify) via a shared utility (`sanitizeContent`).

- **Browser:** Uses DOMPurify to remove unsafe HTML and prevent XSS.
- **SSR:** Falls back to escaping HTML tags to prevent injection.

This is enforced in all UI components that render user- or CMS-driven HTML, including FAQ, explainer, and post-driven UI elements.

A shared utility, `sanitizeContent`, is used throughout the codebase to sanitize any post content before rendering. Example usage:

```ts
import { sanitizeContent } from '@leather.io/ui/utils/sanitize-content';

const safeHtml = sanitizeContent(post.Summary);
```

This is applied in all FAQ, explainer, hover card, and heading components that render post content.

## License

[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)

---

[⬅ Back](../../README.md)

---
npm package: @leaven-css/base
Description: A good starter for your styles
Author: Philip Bordallo
Latest version: 0.4.0

# Leaven – Base
> A good starter for your styles

**WARNING: A WORK IN PROGRESS**

[![NPM Version][npm-badge]][npm-url]
[![Bundlephobia minified size][bundlephobia-min-badge]][bundlephobia-url]
[![Bundlephobia minified + gzip size][bundlephobia-minzip-badge]][bundlephobia-url]

Markup should give semantic meaning and structure but not necessarily define styles. Is an `<h2>` always that size? Does a `<button>` always look that way?

As a developer you should be in control of the styles you want for elements, especially when building components. **Leaven Base**'s goal is to reset as much browser styles as possible while allowing for flexibility and customization.


## Install

### As a module
```sh
# npm
npm add @leaven-css/base

# yarn
yarn add @leaven-css/base
```

### via Unpkg

- https://unpkg.com/@leaven-css/base/dist/base.css
- https://unpkg.com/@leaven-css/base/dist/base.min.css

## Browser Support
- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer 11

It's recommended that you use [Autoprefixer](https://github.com/postcss/autoprefixer) as part of your build process to remove any unnecessary prefixes based on your own browser support.


## Usage & Exceptions

Read more in the [Using Leaven Base document](./using-leaven-base.md).


## Credits
A special thanks to those libraries that influenced this one:
- Eric Meyer's [CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
- Nicolas Gallagher's [normalize.css](https://github.com/necolas/normalize.css)
- Jonathan Neal's [sanitize.css](https://github.com/csstools/sanitize.css)
- Jen Simmons's [CSS Remedy](https://github.com/mozdevs/cssremedy)

[npm-url]: https://www.npmjs.com/package/@leaven-css/base
[npm-badge]: https://badgen.net/npm/v/@leaven-css/base

[bundlephobia-min-badge]: https://badgen.net/bundlephobia/min/@leaven-css/base
[bundlephobia-minzip-badge]: https://badgen.net/bundlephobia/minzip/@leaven-css/base
[bundlephobia-url]: https://bundlephobia.com/result?p=@leaven-css/base
npm package: @leaves-27/good
Description: 小程序自定义组件开发模板：
Latest version: 1.0.0

# miniprogram-custom-component

小程序自定义组件开发模板：

* 支持 less 编写 wxss
* 使用 webpack 构建 js
* 支持自定义组件单元测试
* 支持 eslint
* 支持多入口构建

## 使用

* 使用[命令行工具](https://github.com/wechat-miniprogram/miniprogram-cli)进行初始化
* 直接从 github 上 clone 下来

## 开发

1. 安装依赖：

```
npm install
```

2. 执行命令：

```
npm run dev
```

默认会在包根目录下生成 miniprogram\_dev 目录，src 中的源代码会被构建并生成到 miniprogram\_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

```
npm run watch
```

> ps: 如果 minirpogram\_dev 目录下已存在小程序 demo，执行`npm run dev`则不会再将 tools 下的 demo 拷贝到此目录下。而执行`npm run watch`则会监听 tools 目录下的 demo 变动并进行拷贝。

3. 生成的 miniprogram\_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

4. 进阶：

* 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
* 内置支持 webpack、less、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
* 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
* 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

## 发布

> ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。

1. 如果还没有 npm 帐号，可以到[ npm 官网](https://www.npmjs.com/)注册一个 npm 帐号。
2. 在本地登录 npm 帐号，在本地执行：

```
npm adduser
```

或者

```
npm login
```

3. 在已完成编写的 npm 包根目录下执行：

```
npm publish
```

到此，npm 包就成功发布到 npm 平台了。

> PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。

## 目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

```
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
```

> PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

## 测试

* 执行测试用例：

```
npm run test
```

* 执行测试用例并进入 node inspect 调试：

```
npm run test-debug
```

* 检测覆盖率：

```
npm run coverage
```

测试用例放在 test 目录下，使用 **miniprogram-simulate** 工具集进行测试，[点击此处查看](https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/README.md)使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

## 其他命令

* 清空 miniprogram_dist 目录：

```
npm run clean
```

* 清空 miniprogam_dev 目录：

```
npm run clean-dev
```
npm package: @leaves-27/kvs
Description: 小程序自定义组件开发模板：
Latest version: 1.0.1

# miniprogram-custom-component

小程序自定义组件开发模板：

* 支持 less 编写 wxss
* 使用 webpack 构建 js
* 支持自定义组件单元测试
* 支持 eslint
* 支持多入口构建

## 使用

* 使用[命令行工具](https://github.com/wechat-miniprogram/miniprogram-cli)进行初始化
* 直接从 github 上 clone 下来

## 开发

1. 安装依赖：

```
npm install
```

2. 执行命令：

```
npm run dev
```

默认会在包根目录下生成 miniprogram\_dev 目录，src 中的源代码会被构建并生成到 miniprogram\_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

```
npm run watch
```

> ps: 如果 minirpogram\_dev 目录下已存在小程序 demo，执行`npm run dev`则不会再将 tools 下的 demo 拷贝到此目录下。而执行`npm run watch`则会监听 tools 目录下的 demo 变动并进行拷贝。

3. 生成的 miniprogram\_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

4. 进阶：

* 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
* 内置支持 webpack、less、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
* 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
* 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

## 发布

> ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。

1. 如果还没有 npm 帐号，可以到[ npm 官网](https://www.npmjs.com/)注册一个 npm 帐号。
2. 在本地登录 npm 帐号，在本地执行：

```
npm adduser
```

或者

```
npm login
```

3. 在已完成编写的 npm 包根目录下执行：

```
npm publish
```

到此，npm 包就成功发布到 npm 平台了。

> PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。

## 目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

```
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
```

> PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

## 测试

* 执行测试用例：

```
npm run test
```

* 执行测试用例并进入 node inspect 调试：

```
npm run test-debug
```

* 检测覆盖率：

```
npm run coverage
```

测试用例放在 test 目录下，使用 **miniprogram-simulate** 工具集进行测试，[点击此处查看](https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/README.md)使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

## 其他命令

* 清空 miniprogram_dist 目录：

```
npm run clean
```

* 清空 miniprogam_dev 目录：

```
npm run clean-dev
```
npm package: @leavittsoftware/manage-side-menu
Description: Leavitt Manage Side Menu Hybrid
Latest version: 1.0.93
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# manage-side-menu
[![Build status](https://ci.appveyor.com/api/projects/status/t2n1whcpamse2sy9/branch/master?svg=true)](https://ci.appveyor.com/project/aarondrabeck/manage-side-menu/branch/master)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LeavittSoftware/manage-side-menu)

To install use: `bower install --save manage-side-menu`

[ LIVE DEMO AND API ](https://www.webcomponents.org/element/LeavittSoftware/manage-side-menu)

```html
        <h3>LSS Manage Side Menu Demo</h3>

        <style>
        .app-drawer {
               height: 100%;
               overflow: auto;
           }
        </style>
        <app-drawer-layout fullbleed>
             <!-- Drawer content -->
             <app-drawer id="drawer">
               <div class='app-drawer'>
                    <app-toolbar><img src="/images/Leavitt-Group-Bw.png" alt="Leavitt Group"></app-toolbar>
                    <manage-side-menu roles="[[roles]]" selected="[[selected]]" id="LssManageAppDrawer"></manage-side-menu>
                </div>
             </app-drawer>

        When using a different app-routing system on a stand a lone url you can simply replace the page tag with the name.
                    <manage-side-menu roles="[[roles]]" selected="sample-app" id="LssManageAppDrawer"></manage-side-menu>
        
        
```