open-index/open-npm huggingface dataset:
npm package: @lucsoft/minify-lit-html-loader
Description: A webpack loader to minify lit-html strings
Author: lucsoft
Latest version: 0.0.4

<h1 align="center">Minify lit-html Loader</h1>

<h2 align="center">Install</h2>

```bash
npm install minify-lit-html-loader
```

<h2 align="center">Usage</h2>

[Documentation: Using loaders](https://webpack.js.org/loaders/)

Within your webpack configuration object, you'll need to add the minify-lit-html-loader to the list of modules, like so:

```javascript
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'minify-lit-html-loader'
      }
    }
  ]
}
```

Or if you are using Typescript, chain it after your Typescipt loader, like so:

```javascript
module: {
  rules: [
    {
      test: /\.ts?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'minify-lit-html-loader',
        },
        {
          loader: 'ts-loader'
        },
      ]
    }
  ]
}
```

<h2 align="center">Options</h2>

Options for the `esprima` parser are:

```typescript
interface Config {
  range: boolean;
  loc: boolean;
  source: string | null;
  tokens: boolean;
  comment: boolean;
  tolerant: boolean;
  sourceType: 'module' | 'script';
}
```

`range` and `loc` will always be set to true as these are required for the operation of the loader.

Options for `html-minifier` can be found [here](https://github.com/kangax/html-minifier#options-quick-reference)

You can pass options to the loader by using the [options property](https://webpack.js.org/configuration/module/#rule-options-rule-query):

```javascript
module: {
  rules: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      use: [
        {
          loader: 'minify-lit-html-loader',
          options: {
            esprima: {
              loc: true,
            },
            htmlMinifier: {
              customAttrCollapse: /events/,
            }
          }
        },
      ],
    }
  ]
},
```

The default options for `html-minifier` are:

```javascript
htmlMinifier: {
  caseSensitive: true,
  collapseWhitespace: true,
  minifyCSS: true,
  preventAttributesEscaping: true,
  removeComments: true
}
```

### Recommended Options

The arguments below for ignoring custom fragments are recommended because without them, the minifier will have a parsing error if it encounters any less-than (`<`) or less-than-or-equal-to (`<=`) operators in your lit-html string.

```
{
  loader: 'minify-lit-html-loader',
  options: {
    htmlMinifier: {
      ignoreCustomFragments: [
        /<\s/,
        /<=/
      ]
    }
  }
},
```

<h2 align="center">Improvements</h2>

There are currently no automated tests written for the loader and it has only been tested in a very limited way.
It will be something I will be working on soon but I do welcome PRs from anyone willing to contribute to this project.
npm package: @luctc/template-builder
Description: Template Builder
Author: Tran Cong Luc
Latest version: 1.1.82

# @luctc/template-builder
- Author: Tran Cong Luc (luctc)
- Contact: [Facebook](https://www.facebook.com/congluc1902/), [Youtube](https://www.youtube.com/c/Tr%E1%BA%A7nC%C3%B4ngL%E1%BB%B1c), [LinkedIn](https://www.linkedin.com/in/luctc/)

### Storybook
- https://luctc-dev.github.io/template-builder/storybook

### Demo
- [Link](https://luctc-dev.github.io/template-builder/)
- [Source Code](https://github.com/luctc-dev/template-builder-demo)
npm package: @luctst/paul
Description: Meet Paul at each click 👨‍🦰 👨‍🦰‍
Author: luctst
Latest version: 1.5.1

# Paul

[![Build Status](https://travis-ci.com/luctst/Paul.svg?branch=master)](https://travis-ci.com/luctst/Paul)
[![NPM version](https://img.shields.io/npm/v/@luctst/paul?style=flat-square)](https://img.shields.io/npm/v/@luctst/paul?style=flat-square)
[![Package size](https://img.shields.io/bundlephobia/min/@luctst/paul)](https://img.shields.io/bundlephobia/min/@luctst/paul)
[![Dependencies](https://img.shields.io/david/luctst/Paul.svg?style=popout-square)](https://david-dm.org/luctst/Paul)
[![devDependencies Status](https://david-dm.org/luctst/Paul/dev-status.svg?style=flat-square)](https://david-dm.org/luctst/Paul?type=dev)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Twitter](https://img.shields.io/twitter/follow/luctstt.svg?label=Follow&style=social)](https://twitter.com/luctstt)

*Meet Paul at each click*

## Motivation
<p style="text-align:center;"><img src="./paul-readme.jpg" style="width:30%;height:auto;object-fit:contain;"/></p>

This is my friend Paul, as you can see Paul is a cute guy he loves beer and he works hard everyday..

So I decided to honor him with this little package each time you'll click on a DOM element my friend Paul will appear randomly on your web page :) Enjoy !!

## Usage

### With Node
For now Paul is not available with Node we're working on this but you can use it with a CDN.

### In browser
Use Paul via a CDN by including this script:

Add this script just before your `</body>` closing tag:
```js
<script crossorigin src="https://unpkg.com/@luctst/paul/umd/paul.client.min.js"></script>
```

You now have access to the `Paul()` function to see how to use it check the api section below.

### Exemple
After adding the script create another `<script>` tag and call the `Paul function`.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your title</title>
</head>
<body>
    <script crossorigin src="https://unpkg.com/@luctst/paul/umd/paul.client.min.js"></script>
    <script>
        Paul();
    </script>
</body>
</html>
```

## API
### Paul([selecteur], [friends])

The `Paul` function create an img with my friend Paul.

* `selecteur` {HTMLElement, optional} - If this argument is specified the `click` event will be attached on this DOM Element.
* `friends` {Array, optional} - If this argument is specified the function will display randomly an img from the `friends` array.

## Contribute
If you'll like to add more images create a PR by adding a new picture in the `static` folder at the root folder.

## Licence
MIT

<p style="font-size:8px;text-align:center;margin-top:50px;">File generated with <a href="https://github.com/luctst/get-good-readme">get-good-readme</a> module.</p>