- Notifications
You must be signed in to change notification settings - Fork0
Develop and demo your Svelte components in your README.md
License
metonym/svelte-readme
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Develop and demo your Svelte components in your README.md.
This project embraces the concept ofReadme Driven Development (RDD) – or more generally, documentation driven development.
This module enables theREADME.md to be used for:
- developing a Svelte component
- demoing a Svelte component
- documentation
- installation
- usage
- API
- metadata
- links to Changelog, License etc.
At its core, this library is a simple Svelte preprocessor.
- Use the
svelteentry defined in your projectpackage.json - Use
README.mdas the Svelte source code - Parse Markdown usingMarkdown It
- Run code within
sveltecode fence blocks so that demos are juxtaposed with code
GitHub Markdown CSS is used for styling to maintain a consistent style withgithub.com.
This library exports two methods:
createConfig(default export): creates a Rollup InputOptions object for youpreprocessReadme: standalone Svelte markup preprocessor
createConfig is tightly coupled with Rollup. At a minimum,package.json#svelte andpackage.json#name are required.
package.json
{"name":"my-svelte-component","svelte":"./src/index.js","main":"./lib/index.js","module":"./lib/index.mjs","scripts": {"dev":"rollup -cw","build":"rollup -c","prepack":"BUNDLE=true rollup -c" },"homepage":"https://github.com/metonym/svelte-readme"}rollup.config.js
The default export from "svelte-readme" will create a Rollup configuration used to develop and generate the demo.
importresolvefrom"@rollup/plugin-node-resolve";importsveltefrom"rollup-plugin-svelte";importsvelteReadmefrom"svelte-readme";importpkgfrom"./package.json";exportdefault()=>{if(process.env.BUNDLE!=="true"){returnsvelteReadme();}return["es","umd"].map((format)=>{constUMD=format==="umd";return{input:pkg.svelte,output:{ format,file:UMD ?pkg.main :pkg.module,name:UMD ?pkg.name :undefined,},plugins:[svelte(),resolve()],};});};
interfaceCreateConfigOptions{/** * set to `true` to minify the HTML/JS *@default false */minify:boolean;/** * set the folder to emit the files *@default "dist" */outDir:string;/** * custom CSS appended to the <style> block *@default "" */style:string;/** * set to `true` to omit the default GitHub styles *@default false */disableDefaultCSS:boolean;/** * value to prepend to relative URLs (i.e. GitHub repo URL) *@default undefined */prefixUrl:string;/** * `rollup-plugin-svelte` options *@default {} */svelte:RollupPluginSvelteOptions;/** * Rollup plugins *@default {[]} */plugins:Plugin[];/** * Rollup output options *@default {{}} */output:OutputOptions;}
Single line comments in Svelte script blocks are not supported.
Use multi-line comments instead.
- let toggled; // comment+ let toggled; /** comment */
This project is inspired byMDsveX.
About
Develop and demo your Svelte components in your README.md
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.