# @floratmin/svelte-fragment-divider

> Divide svelte files into script, style and HTML fragments

Latest version **4.5.0** (published 2023-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @floratmin/svelte-fragment-divider
pnpm add @floratmin/svelte-fragment-divider
yarn add @floratmin/svelte-fragment-divider
bun add @floratmin/svelte-fragment-divider
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.5.0 |
| Published | 2023-10-04 |
| First published | 2021-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Florian Murat Koch |
| Maintainers | floratmin |
| Keywords | svelte, fragments |

## Links

- npm: https://www.npmjs.com/package/@floratmin/svelte-fragment-divider
- Repository: https://github.com/floratmin/svelte-fragment-divider
- Homepage: https://github.com/floratmin/svelte-fragment-divider#readme
- Issues: https://github.com/floratmin/svelte-fragment-divider/issues
- npm.io page: https://npm.io/package/@floratmin/svelte-fragment-divider

## Dependencies (2)

- [svelte](https://npm.io/package/svelte.md) ^4.2.1
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^6.1.5

## Recent versions

- 4.5.0 (latest) — 2023-10-04
- 4.4.1 — 2023-09-25
- 4.4.0 — 2023-09-25
- 4.3.1 — 2023-08-13
- 4.3.0 — 2023-08-13
- 4.2.1 — 2022-03-11
- 4.2.0 — 2022-03-11
- 4.1.1 — 2022-03-10
- 4.1.0 — 2022-03-10
- 4.0.0 — 2021-07-15
- 3.1.1 — 2021-06-15
- 3.1.0 — 2021-04-30
- 3.0.1 — 2021-04-29
- 3.0.0 — 2021-04-29
- 2.0.0 — 2021-04-28
- … 5 more at https://npm.io/package/@floratmin/svelte-fragment-divider/versions

## README

# Fragment divider for svelte files

Divide svelte files (also with typescript or css preprocessor) into script, style and HTML fragments including the line number where each fragment starts. 
Empty HTML fragments are ignored.

### Installation

npm install @floratmin/svelte-fragment-divider

### Usage:

```ts
import fs from 'fs';
import path from 'path';
import {svelteFragmentDivider} from '@floratmin/svelte-fragment-divider';

const fileName = 'src/App.svelte'
const svelteFile = fs.readFileSync(path.resolve(fileName), 'utf-8');

const fragments = svelteFragmentDivider(svelteFile, fileName);
```
From the following svelte file
```
<script lang="ts">
  export let a: string;
</script>

<style lang="less">
  p {
    color: black;
  }
</style>

<p>{'Foo'}</p>

{#if ifCondition}
  <Component prop={bar}>{baz}</Component>
{/if}

```
we get the following object:
```js
{
  fileName: 'src/App.svelte',
  htmlFragments: [
    {
      fragment: `

<p>{'Foo'}</p>
{#if ifCondition}
  <Component prop={bar}>{baz}</Component>
{/if}
`,
      startLine: 9,
      startChar: 110,
      endChar: 193
    },
  ],
  scriptInHTMLFragments: [
    {
      fragment: "'Foo'",
      startLine: 11,
      startChar: 116,
      endChar: 121
    },
    {
      fragment: 'ifCondition',
      startLine: 13,
      startChar: 133,
      endChar: 144
    },
    {
      fragment: 'bar',
      startLine: 14,
      startChar: 165,
      endChar: 168
    },
    {
      fragment: 'baz',
      startLine: 14,
      startChar: 171,
      endChar: 174
    },   
  ],     
  script: { // can also be an array
    fragment: `<script lang="ts">\n  export let a: string;\n</script>`,
    startLine: 1,
    startChar: 0,
    endChar: 52
  },
  style: {
    fragment: `<style lang="less">\n  p {\n    color: black;\n  }\n</style>`,
    startLine: 5,
    startChar: 54,
    endChar: 110
  }
};
```

---
_Source: https://npm.io/package/@floratmin/svelte-fragment-divider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._