# sp-dev-x-kit

> ## Install

Latest version **1.2.5** (published 2023-06-20) · 0 weekly downloads

## Install

```sh
npm install sp-dev-x-kit
pnpm add sp-dev-x-kit
yarn add sp-dev-x-kit
bun add sp-dev-x-kit
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2023-06-20 |
| First published | 2023-05-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 983.1 KB |
| Known vulnerabilities | 0 (+19 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | rjcpereira |

## Links

- npm: https://www.npmjs.com/package/sp-dev-x-kit
- npm.io page: https://npm.io/package/sp-dev-x-kit

## Dependencies (9)

- [sass](https://npm.io/package/sass.md) ^1.62.1
- [vite](https://npm.io/package/vite.md) ^4.3.9
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [svelte](https://npm.io/package/svelte.md) ^3.59.1
- [svelte-preprocess](https://npm.io/package/svelte-preprocess.md) ^5.0.4
- [@vitejs/plugin-legacy](https://npm.io/package/@vitejs/plugin-legacy.md) ^4.0.4
- [@tinymce/tinymce-svelte](https://npm.io/package/@tinymce/tinymce-svelte.md) ^1.0.1
- [vite-plugin-dynamic-import](https://npm.io/package/vite-plugin-dynamic-import.md) ^1.4.0
- [@sveltejs/vite-plugin-svelte](https://npm.io/package/@sveltejs/vite-plugin-svelte.md) ^2.4.1

## Recent versions

- 1.2.5 (latest) — 2023-06-20
- 1.2.4 — 2023-06-05
- 1.2.3 — 2023-05-26
- 1.2.2 — 2023-05-25
- 1.2.1 — 2023-05-25
- 1.2.0 — 2023-05-24
- 1.1.4 — 2023-05-23
- 1.1.3 — 2023-05-23
- 1.1.2 — 2023-05-23
- 1.1.1 — 2023-05-21
- 1.1.0 — 2023-05-21
- 1.0.5 — 2023-05-19
- 1.0.4 — 2023-05-19
- 1.0.3 — 2023-05-17
- 1.0.2 — 2023-05-17

## README

# SAPO X Kit

## Install

`npm i sp-dev-x-kit`

## Use 

### Modules

Only JS

```javascript
import { isObject } from 'sp-dev-x-kit/scripts/utils'
import { onUpdate } from 'sp-dev-x-kit/scripts/events'

onUpdate(() => console.log(isObject({ foo: 'bar' })))
```

Svelte Widget (js)

```javascript
import WidgetTempo from 'sp-dev-x-kit/widgets/tempo/tempo.svelte'
import { writable } from 'svelte/store'

const app = new WidgetTempo({
    target: document.getElementById('widget-tempo'),
    props: {
        widget: writable({
            //widget configs
        });
    }
});
```

Svelte Widget (svelte)

```svelte
<script>
import WidgetMapa from 'sp-dev-x-kit/widgets/mapa/mapa.svelte'
import { reactive } from 'sp-dev-x-kit/scripts/utils'

let widget = reactive({
    //widget configs
});
</script>
<div>
    <WidgetMapa bind:widget/>
</div>
```

### vite.config.js

```javascript
import xKit from 'sp-dev-x-kit'

export default xKit(import.meta.url, { // optional params
    //defaults
    port: 3000, //{server.port}
    proxy: null, //{server.proxy}
    alias: {},
    plugins: [], //plugins (concat to: [vite-plugin-dynamic-import, svelte-preprocess])
    legacy: false, //use plugin: @vitejs/plugin-legacy
    base: null, //{base}
    outDir: null, //{build.outDir}
    emptyOutDir: null, //{build.emptyOutDir}
    input: { //{build.rollupOptions.input}
        index: 'index.html'
    },
    output: { //{build.rollupOptions.output}
        assetFileNames: '[name].[ext]',
        chunkFileNames: '[name].js',
        entryFileNames: '[name].js'
    }
});
```

## Components

- Button
- DropDown
- Field
- Icon
- Pagination
- Toast

## Widgets

- Tempo
- Mapa

---
_Source: https://npm.io/package/sp-dev-x-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._