# qml-images-rectangle-json-loader

> Allows webpack to emit Rectangle object from qml-webpack-loader output from QML file exported from Krita (for example). Optionally makes require() for each of Image.source property

Latest version **0.0.1** (published 2020-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install qml-images-rectangle-json-loader
pnpm add qml-images-rectangle-json-loader
yarn add qml-images-rectangle-json-loader
bun add qml-images-rectangle-json-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-05-09 |
| First published | 2020-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10.17 |
| Dependencies | 2 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | insideone |
| Maintainers | insideone |

## Links

- npm: https://www.npmjs.com/package/qml-images-rectangle-json-loader
- npm.io page: https://npm.io/package/qml-images-rectangle-json-loader

## Dependencies (2)

- [path](https://npm.io/package/path.md) ^0.12.7
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0

## Recent versions

- 0.0.1 (latest) — 2020-05-09

## README

# qml-images-rectangle-json-loader

Allows webpack to emit `Rectangle` object from `qml-webpack-loader` output. Optionally makes `require()` for each of `Image.source` property.

## Installation & Usage

```bash
npm i --save-dev qml-images-rectangle-json-loader qml-webpack-loader
```

**webpack.config.js**
```javascript
module.exports = {
    module: {
        rules: [
            {
                test: /\.qml$/,
                use: [
                    {
                        loader: 'qml-images-rectangle-json-loader',
                        options: { requireSources: true },
                    },
                    'qml-webpack-loader',
                ],
            },
        ],
    },

};
```

## Input

[qml-webpack-loader](https://github.com/insideone/qml-webpack-loader)\-structured output (see json files from [qmlweb-parser](https://github.com/qmlweb/qmlweb-parser/tree/master/tests/qml) for examples) with a single Rectangle composed of Image(s)

## Options

* `requireSource: boolean` - emit `require()` for each `Image.source` parsed

### Example

```qml
import QtQuick 1.1

Rectangle {
    width: 4000
    height: 5330

    Image {
        id: background
        x: 0
        y: 0
        width: 4000
        height: 5330
        source: "Level-1_images/background.png"
        opacity: 1
    }
    Image {
        id: cat_black
        x: 2161
        y: 4252
        width: 118
        height: 136
        source: "Level-1_images/cat_black.png"
        opacity: 1
    }
}
```

## Output

Rectangle object (see [definitions](./src/RectangleStructure.ts)).

See also `__tests__/cases/successful/%d` for input/output examples.

---
_Source: https://npm.io/package/qml-images-rectangle-json-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._