@floratmin/svelte-fragment-divider

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:

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:

{
  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
  }
};