open-index/open-npm huggingface dataset:
npm package: @html-next/flexi-default-styles
Description: Just a layout framework. Design for cross-platform with ease.
Author: Chris Thoburn
Latest version: 3.0.0-alpha.1

# Flexi-default-styles

[![npm version](https://badge.fury.io/js/%40html-next%2Fflexi-default-styles.svg)](https://badge.fury.io/js/%40html-next%2Fflexi-default-styles)

Default styles to match the attributes converted by [flexi-dsl](https://github.com/html-next/flexi/tree/main/packages/flexi-dsl), as well as styles for the [flexi-layouts](https://github.com/html-next/flexi/tree/main/packages/flexi-layouts) components.

https://flexi.readme.io/docs/introduction

### Installation

It is recommended that you manage your flexi addons through [the main flexi addon](https://github.com/html-next/flexi/tree/main/packages/flexi):

```cli
ember install flexi
```

This will provide a prompt to install only the addons you want. Flexi will also maintain
compatibility between addons.

Alternatively install just this package:

```cli
ember install @html-next/flexi-default-styles
```

Note that that flexi attributes will not be converted into classes without [flexi-dsl](https://github.com/html-next/flexi/tree/main/packages/flexi-dsl).

## Support, Questions, Collaboration

Join the [Ember community on Discord](https://discord.gg/zT3asNS)
npm package: @html-next/flexi-dsl
Description: Just a layout framework. Design for cross-platform with ease.
Author: Chris Thoburn
Latest version: 3.0.0-alpha.1

# Flexi-dsl

[![npm version](https://badge.fury.io/js/%40html-next%2Fflexi-dsl.svg)](https://badge.fury.io/js/%40html-next%2Fflexi-dsl)

Attribute and layout-component conversions for flexi elements.

Attributes: https://flexi.readme.io/docs/attributes

`<container>` and `<grid responsive>` layout components: https://flexi.readme.io/docs/elements

### Installation

It is recommended that you manage your flexi addons through [the main flexi addon](https://github.com/html-next/flexi):

```cli
ember install flexi
```

This will provide a prompt to install only the addons you want. Flexi will also maintain
compatibility between addons.

Alternatively install just this package:

```cli
ember install @html-next/flexi-dsl
```

Note that no default styles will be included unless you also install [flexi-default-styles](https://github.com/html-next/flexi/tree/main/packages/flexi-default-styles).

## Support, Questions, Collaboration

Join the [Ember community on Discord](https://discord.gg/zT3asNS)
npm package: @html-next/flexi-layouts
Description: The layouts portion of flexi
Author: Chris Thoburn
Latest version: 3.0.0-alpha.1

# Flexi

[![npm version](https://badge.fury.io/js/%40html-next%2Fflexi-layouts.svg)](https://badge.fury.io/js/%40html-next%2Fflexi-layouts)

Flexi-layouts is the layouts portion of flexi.

It includes the following concepts:

- [Viewport Specific Templates](https://flexi.readme.io/docs/viewport-specific-templates)
- [Blueprints](https://flexi.readme.io/docs/blueprints) for generating viewport specific templates or moving existing templates into a layouts structure.
- [Layout Service](https://flexi.readme.io/docs/layout-service) for checking `isMobile`, `isDesktop` and other various things

### Installation

It is recommended that you manage your flexi addons through [the main flexi addon](https://github.com/html-next/flexi/tree/main/packages/flexi):

```cli
ember install flexi
```

This will provide a prompt to install only the addons you want. Flexi will also maintain
compatibility between addons.

Alternatively install just this package:

```cli
ember install @html-next/flexi-layouts
```

That's all that required if you're using the classic component layout. If you are using a _pod_-based structure you will also need to install the shim for `ember-app`. This is done by modifiying your `ember-cli-build.js` file. This shim makes ember-cli's template tree able to find
the templates for layouts.

```js
var EmberApp = require("ember-cli/lib/broccoli/ember-app");
var shim = require("@html-next/flexi-layouts/lib/pod-templates-shim");

shim(EmberApp);
```

## Support, Questions, Collaboration

Join the [Ember community on Discord](https://discord.gg/zT3asNS)
npm package: @html-next/flexi-sustain
Description: Extended Lifecycles and Recycling for Ember Components
Author: Chris Thoburn
Latest version: 3.0.0-alpha.1

# Flexi

[![npm version](https://badge.fury.io/js/flexi-sustain.svg)](http://badge.fury.io/js/flexi-sustain)

## Release Notes

[Changelog](./CHANGELOG.md)

## Installation

```cli
ember install @html-next/flexi-sustain
```

## Support, Questions, Collaboration

Join the [Ember community on Discord](https://discord.gg/zT3asNS)

### Sustain

`Sustain` allows you to recycle a component instance across layout and route boundaries.

A sustain is essentially a "marker" for where a particular component instance is able to
be reused. It allows you to explicitly declare what features of your app can be "recycled".

Sustain improves the performance of your app by reducing the amount of work your app needs to do.
Instead of tearing down one instance and creating an entirely new instance, sustain seamlessly
swaps a component instance's location as layouts and routes transition from one position to the next.

```hbs
{{sustain <path-to-sustain> model}}
```

Only one instance of the sustainable is alive and rendered at a time, but if you are animating
from one location to another you can choose to leave behind a copy.

```hbs
{{sustain <path-to-sustain> model copy=true}}
```

By default, a sustain is destroyed when it has gone unused for one minute. You can alter this
expiration. A value of `0` will cause the sustain to live forever.

```hbs
{{sustain <path-to-sustain> expires=<time-in-ms>}}
```

If you would like to use the same layout for multiple sustain instances, on the same page, you can specify
a `label`. This allows unique instances of the same layout, which update from route to route or layout to layout,
but do not overwrite previous sustains in the same template.

```hbs
{{sustain my-path label="foo"}}
{{sustain my-path label="bar"}}
```
npm package: @html-next/svg-icon-optimizer
Description: SVG Icon Performance Optimization
Author: Chris Thoburn
Latest version: 0.0.1

@html-next/svg-icon-optimizer
==============================================================================

**SVG Icon Performance Optimization**

This addon lets ember app's progressively opt in to highly optimized icon
usage via a combination of embroider, template-only components, and build-time
plugins.

**TL;DR**

- Put svg icons in your app as template-only components `app/components/icon/**/*.hbs`
- Use icons in your app as a regular component e.g. `<Icon::Fa::Trashcan />`

**Optimizations**

- 1. less-repetitive inline-svg usage - which keeps your payloads smaller. You get this just by using icons as components. You don't even need this addon for that <3 !
- 2. tree-shake unused icons. You get this purely by using embroider for your build, no other configuration required! You don't even need this addon for that <3 !
- 3. don't ship SVGs as JS code. Using this addon your SVGs will be extracted to `public/assets/component-icons/**/*.svg`. This reduces the JS bundle size and allows for these images to be served from cache. We'll even keep a stable fingerprint for them between builds if they haven't changed. The magic here is `use`, your components are converted into this still tree-shakeable form:

```hbs
<svg ...attributes xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="assets/component-icons/fa/trashcan.svg"></use>
</svg>
```

This form allows us to re-use SVG images and cache them while retaining the ability to style them inline.

- 4. Automatically convert only the used SVGs into symbols and a sprite. We'll parse your templates and find which icons were actually used, then create a sprite for them. The output from the optimization in step-3 changes to:

```hbs
<svg ...attributes xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="assets/component-icon-sprite.svg#fa-trashcan"></use>
</svg>
```


Compatibility
------------------------------------------------------------------------------

* Ember.js v3.24 or above
* Ember CLI v3.24 or above
* Node.js v12 or above


Installation
------------------------------------------------------------------------------

```
ember install @html-next/svg-icon-optimizer
```


Usage
------------------------------------------------------------------------------

[Longer description of how to use the addon in apps.]


Contributing
------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.


License
------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).
npm package: @html-polygon/core
Description: This is the core package enabling HTML Polygons for React.
Latest version: 0.1.4

# HTML Polygon Core

HTML Polygon is a polygon element generator for the following web frameworks:

* [React](https://github.com/html-polygon/html-polygon/tree/main/packages/react)
* [Vue 3](https://github.com/html-polygon/html-polygon/tree/main/packages/vue)

This is the core package used by the framework specific packages, so you
probably want to install one of those, not this.
npm package: @html-polygon/react
Description: Pure HTML polygons for React, no SVG.
Latest version: 0.1.4

# HTML Polygon for React

HTML Polygon is a polygon element generator for the following web frameworks:

* React ← this package
* [Vue 3](https://github.com/html-polygon/html-polygon/tree/main/packages/vue)

Visit the playground and complete documentation at [the HTML Polygon website](https://html-polygon.com).

## Install

```sh
# NPM
npm install @html-polygon/react

# Yarn
yarn add @html-polygon/react

# PNPM
pnpm add @html-polygon/react
```

## Quick start

Import the component:

```jsx
import { Polygon } from '@html-polygon/react'
```

Use the component:

```jsx
<Polygon
  sides={5}
  style={{
    height: '300px',
    width: '300px',
  }}
>
  I have 5 sides.
</Polygon>
```

Complete documentation can be found at [the HTML Polygon website](https://html-polygon.com).

## Why?

There are lots of polygon building utilities out there. They all generate
either embedded SVGs, or they use CSS clip paths to clip the shape of standard
divs.

The thing they all have in common is their inability to reliably contain text
that "flows" into the shape to fill the polygon.

This is where HTML Polygon differs. This component builds an HTML element that
both looks like a polygon, and behaves like a polygon.

You can use HTML Polygen to emulate the effects of the proposed CSS Shapes
property `shape-inside`.
npm package: @html-polygon/vue
Description: Pure HTML polygons for Vue 3, no SVG.
Latest version: 0.1.4

# HTML Polygon for Vue 3

HTML Polygon is a polygon element generator for the following web frameworks:

* [React](.https://github.com/html-polygon/html-polygon/tree/main/packages/react)
* Vue 3 ← this package

Visit the playground and complete documentation at [the HTML Polygon website](https://html-polygon.com).

## Install

```sh
# NPM
npm install @html-polygon/vue

# Yarn
yarn add @html-polygon/vue

# PNPM
pnpm add @html-polygon/vue
```

## Quick start

Import the component:

```vue
import { Polygon } from '@html-polygon/vue'
```

Use the component:

```vue
<Polygon
  sides="5"
  :style="{
    height: '300px',
    width: '300px',
  }"
>
  I have 5 sides.
</Polygon>
```

Complete documentation can be found at [the HTML Polygon website](https://html-polygon.com).

## Why?

There are lots of polygon building utilities out there. They all generate
either embedded SVGs, or they use CSS clip paths to clip the shape of standard
divs.

The thing they all have in common is their inability to reliably contain text
that "flows" into the shape to fill the polygon.

This is where HTML Polygon differs. This component builds an HTML element that
both looks like a polygon, and behaves like a polygon.

You can use HTML Polygen to emulate the effects of the proposed CSS Shapes
property `shape-inside`.
npm package: @html-splitter/html-splitter
Description: HTML Splitter
Author: CodeDaraW@gmail.com
Latest version: 1.0.0

# HTML Splitter
在一些场景（例如博客文章缩略内容展示）下，我们需要对一段 HTML 代码进行分片。
但是简单的字符串裁剪后的 HTML 显然不会是合法的 HTML 代码，所以 HTML Splitter 的目标就是为了解决这个问题。

## 安装
``` sh
npm install html-spliter
```

## 使用
``` typescript
import { Splitter } from '../src';

const splitter = new Splitter({
    isVoidTag: (tag) => ['img'].indexOf(tag) >= 0, // self-closing tag
    isUnsplittableTag: (tag: string) => ['img'].indexOf(tag) >= 0,
});

const content = '<div>如图,在<tex>\\triangle ABC</tex>中,以<tex>C</tex>点为圆心<img src="xx" height="1" width="2"><p>这是段落，段落里还有<span>标</span>签</p></div>';
const res = splitter.split(content, 0, 60); // '<div>如图,在<tex>\\triangle ABC</tex>中,以<tex>C</tex>点为圆心</div>'
```

## API
HTML Parser 是从 [vue-next](https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/parse.ts) fork 后修改而来，
所以 `ParserOptions` 可以参考 `@vue/compiler-core` API。

``` typescript
interface SplitterOptions extends ParserOptions {
    /**
     * unsplittable tags e.g. img or custom tags
     */
    isUnsplittableTag?: (tag: string) => boolean;
    /**
     * fifo cache limit, default 10
     */
    cacheLimit?: number;
}
```

`SplitterOptions` 在 `ParserOptions` 之上增加了两个配置项：
- `isUnsplittableTag` 判断一个标签是否是可以拆分的
    - 例如 `img` 是无法拆分的，拆分后就会出现两个重复的 `img` 
    - 一些自定义标签内部结构有着特殊含义，必须视作一个整体，这类也无法做拆分
- `cacheLimit` splitter 内部的 parse 做了 FIFO 缓存，优化重复 split 一段 HTML 场景下的速度，该参数控制缓存的 limit，默认为 10