Package Exports

rollup-plugin-svelte-source

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-svelte-source) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rollup-plugin-svelte-source

Installing

npm i -D rollup-plugin-svelte-source

Implementation

In your rollup config file. import the plugin and enable it under plugins.

// rollup.config.js
import svelteSource from 'rollup-plugin-svelte-source';

//...
plugins: [
  // make sure to initialize plugin 
  // before the svelte plugin
  svelteSource(options),
  //...
]

Options

By default these options are implemented.

{
  // the variable and export name for the stringified sourcecode
  label: 'ಠ_ಠ', 
  // what characters to be replaced. as we are working with html code the default is replacing 
  // the base htmlentities. Any occurence of a ending </script> tag will terminate the script. 
  // So at the minimum you'd have to escape that.
  // https://github.com/sveltejs/svelte/issues/5024
  replace: {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    '‘': '&apos;',
  },
  // what extensions to allow. Unless having some custom file extensions for svelte files, 
  // this option can be left as is and you'd do the filtering with the include/exclude options. 
  // expects an array and is checking that the filename ends with any one of these values
  extensions: ['.svelte'],
  // include and exclude uses @rollup/pluginutils filter which you can read more about here
  // https://github.com/rollup/plugins/tree/master/packages/pluginutils#createfilter 
  // and also for the matching features
  // https://github.com/micromatch/picomatch#globbing-features
  include: undefined,
  exclude: undefined
}

Usage

// Parent.svelte
<script>
  import Component, { ಠ_ಠ } from './Component.svelte';
</script>

<pre>
  {@html ಠ_ಠ}
</pre>

<Component />

Options example

I do not recommend leaving include/exclude undefined(default) then every svelte component would have a custom source code being exported. Either come up with your own file naming convention or only include certain directories/files.

svelteSource({
  // inside component you have access to 'source' and outside as an export
  // import Component, { source } from './subfolder/demos/testing/Component.svelte'; 
  label: 'source', 
  // match all svelte files that is at least under a 'demos' folder 
  include: ['**/demos/**'],
  // but exclude all files named Index.svelte
  exclude: ['**/Index.svelte']
})

// Parent.svelte
<script>
  import Component, { source } from './Component.svelte';
</script>

<pre>
  {@html source}
</pre>

<Component />