vite-plugin-svelte-md 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Yosuke Ota
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,171 @@
+# vite-plugin-svelte-md
+
+Markdown with Svelte for Vite
+
+_`vite-plugin-svelte-md` is heavily inspired by [vite-plugin-md](https://github.com/antfu/vite-plugin-md) package._
+
+<!--
+[![NPM license](https://img.shields.io/npm/l/vite-plugin-svelte-md.svg)](https://www.npmjs.com/package/vite-plugin-svelte-md)
+[![NPM version](https://img.shields.io/npm/v/vite-plugin-svelte-md.svg)](https://www.npmjs.com/package/vite-plugin-svelte-md)
+[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads&colorB=green&suffix=/day&query=$.downloads&uri=https://api.npmjs.org//downloads/point/last-day/vite-plugin-svelte-md&maxAge=3600)](http://www.npmtrends.com/vite-plugin-svelte-md)
+[![NPM downloads](https://img.shields.io/npm/dw/vite-plugin-svelte-md.svg)](http://www.npmtrends.com/vite-plugin-svelte-md)
+[![NPM downloads](https://img.shields.io/npm/dm/vite-plugin-svelte-md.svg)](http://www.npmtrends.com/vite-plugin-svelte-md)
+[![NPM downloads](https://img.shields.io/npm/dy/vite-plugin-svelte-md.svg)](http://www.npmtrends.com/vite-plugin-svelte-md)
+[![NPM downloads](https://img.shields.io/npm/dt/vite-plugin-svelte-md.svg)](http://www.npmtrends.com/vite-plugin-svelte-md)
+[![Build Status](https://github.com/ota-meshi/vite-plugin-svelte-md/workflows/CI/badge.svg?branch=main)](https://github.com/ota-meshi/vite-plugin-svelte-md/actions?query=workflow%3ACI)
+[![Coverage Status](https://coveralls.io/repos/github/ota-meshi/vite-plugin-svelte-md/badge.svg?branch=main)](https://coveralls.io/github/ota-meshi/vite-plugin-svelte-md?branch=main)
+-->
+
+## 📛 Features
+
+This plugin converts markdown files to Svelte component templates.  
+Combined with [the Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte), you can convert markdown files to Svelte components.
+
+For example, Input:
+
+```md
+---
+title: Markdown to Svelte
+---
+
+# Convert Markdown to Svelte Component
+
+- List
+- List
+- List
+
+<script>
+    import MyComponent from './MyComponent.svelte'
+</script>
+
+<MyComponent>You can use Svelte components in Markdown</MyComponent>
+```
+
+Output:
+
+```svelte
+<script context="module">
+  export const frontmatter = { title: "Markdown to Svelte" };
+</script>
+
+<script>
+  import MyComponent from "./MyComponent.svelte";
+</script>
+
+<svelte:head>
+  <title>Markdown to Svelte</title>
+  <meta property="og:title" content="Markdown to Svelte" />
+</svelte:head>
+
+<div class="markdown-body">
+  <h1>Convert Markdown to Svelte Component</h1>
+  <ul>
+    <li>List</li>
+    <li>List</li>
+    <li>List</li>
+  </ul>
+
+  <p>
+    <MyComponent>You can use Svelte components in Markdown</MyComponent>
+  </p>
+</div>
+```
+
+## 💿 Installation
+
+```bash
+npm install --save-dev vite-plugin-svelte-md
+```
+
+## 📖 Usage
+
+### with [Vite]
+
+Add it to `vite.config.js`
+
+```ts
+// vite.config.js
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import svelteMd from "vite-plugin-svelte-md";
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      extensions: [".svelte", ".md"], // <--
+    }),
+    svelteMd(), // <--
+  ],
+});
+```
+
+### with [SvelteKit]
+
+Add it to `svelte.config.js`
+
+```js
+// svelte.config.js
+import svelteMd from "vite-plugin-svelte-md";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  extensions: [".svelte", ".md"], // <--
+  kit: {
+    vite: {
+      plugins: [
+        svelteMd(), // <--
+      ],
+    },
+  },
+};
+```
+
+[sveltekit]: https://kit.svelte.dev/
+[vite]: https://vitejs.dev/
+
+### Options
+
+```js
+import svelteMd from "vite-plugin-svelte-md";
+svelteMd({
+  headEnabled: true,
+  markdownItOptions: {},
+  markdownItUses: [],
+  wrapperClasses: "markdown-body",
+});
+```
+
+#### `headEnabled`
+
+Enables head tag generation from frontmatter. The default is `true`.
+
+#### `markdownItOptions`
+
+[markdown-it](https://github.com/markdown-it/markdown-it)'s option.
+See [markdown-it's docs](https://markdown-it.github.io/markdown-it/) for more details.
+
+#### `markdownItUses`
+
+An array of [markdown-it](https://github.com/markdown-it/markdown-it)'s plugins.
+
+Example:
+
+```js
+svelteMd({
+  markdownItUses: [require("markdown-it-anchor"), require("markdown-it-prism")],
+});
+```
+
+#### `wrapperClasses`
+
+The class name of the div that wraps the content.
+
+## :beers: Contributing
+
+Welcome contributing!
+
+Please use GitHub's Issues/PRs.
+
+## :lock: License
+
+See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

package/lib/index.d.ts

@@ -0,0 +1,35 @@
+import { Plugin } from 'vite';
+import MarkdownIt from 'markdown-it';
+import { FilterPattern } from '@rollup/pluginutils';
+
+interface Options {
+    /**
+     * Enable head support
+     *
+     * @default true
+     */
+    headEnabled?: boolean;
+    /**
+     * Options passed to Markdown It
+     */
+    markdownItOptions?: MarkdownIt.Options;
+    /**
+     * Plugins for Markdown It
+     */
+    markdownItUses?: (MarkdownIt.PluginSimple | [MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions, any] | any)[];
+    /**
+     * Class names for wrapper div
+     *
+     * @default 'markdown-body'
+     */
+    wrapperClasses?: string | string[];
+    include?: FilterPattern;
+    exclude?: FilterPattern;
+}
+
+/**
+ * Creates vite-plugin-svelte-md
+ */
+declare function export_default(options?: Options): Plugin;
+
+export { export_default as default };

package/lib/index.js

@@ -0,0 +1,304 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+
+// src/index.ts
+__export(exports, {
+  default: () => src_default
+});
+var import_pluginutils = __toModule(require("@rollup/pluginutils"));
+
+// src/markdown.ts
+var import_markdown_it = __toModule(require("markdown-it"));
+var import_gray_matter = __toModule(require("gray-matter"));
+
+// src/markdown-it-svelte-tags/index.ts
+var SVELTE_TAGS_RE = /^(?:<svelte:[a-z][^>]*>|<\/svelte:[a-z]+>)/u;
+function plugin(md) {
+  md.inline.ruler.push("svelte-tags", (state) => {
+    if (!state.md.options.html) {
+      return false;
+    }
+    const pos = state.pos;
+    const text = state.src.slice(pos);
+    const match = SVELTE_TAGS_RE.exec(text);
+    if (!match) {
+      return false;
+    }
+    const token = state.push("html_inline", "", 0);
+    token.content = state.src.slice(pos, pos + match[0].length);
+    state.pos += match[0].length;
+    return true;
+  });
+}
+
+// src/utils.ts
+function toArray(n) {
+  if (!Array.isArray(n))
+    return [n];
+  return n;
+}
+
+// src/head.ts
+var headProperties = [
+  "title",
+  "meta",
+  "link",
+  "base",
+  "style",
+  "script",
+  "htmlAttrs",
+  "bodyAttrs"
+];
+function preprocessHead(frontmatter, options) {
+  if (!options.headEnabled)
+    return frontmatter;
+  const head = frontmatter;
+  const meta = Array.isArray(head.meta) ? [...head.meta] : [];
+  if (head.title) {
+    if (!meta.find((i) => i.property === "og:title"))
+      meta.push({ property: "og:title", content: head.title });
+  }
+  if (head.description) {
+    if (!meta.find((i) => i.property === "og:description"))
+      meta.push({
+        property: "og:description",
+        content: head.description
+      });
+    if (!meta.find((i) => i.name === "description"))
+      meta.push({ name: "description", content: head.description });
+  }
+  if (head.image) {
+    if (!meta.find((i) => i.property === "og:image"))
+      meta.push({ property: "og:image", content: head.image });
+    if (!meta.find((i) => i.property === "twitter:card"))
+      meta.push({
+        name: "twitter:card",
+        content: "summary_large_image"
+      });
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(head)) {
+    if (headProperties.includes(key))
+      result[key] = value;
+  }
+  if (meta.length > 0) {
+    result.meta = meta;
+  }
+  return Object.entries(result).length === 0 ? null : result;
+}
+function headObjToTags(obj) {
+  const tags = [];
+  for (const key of Object.keys(obj)) {
+    if (obj[key] == null)
+      continue;
+    if (key === "title") {
+      tags.push(`<title>${obj[key]}</title>`);
+    } else if (key === "base") {
+      tags.push(`<base ${attrs(__spreadValues({ key: "default" }, obj[key]))}>`);
+    } else if (headProperties.includes(key)) {
+      const value = obj[key];
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          tags.push(`<${key} ${attrs(item)}>`);
+        });
+      } else if (value) {
+        tags.push(`<${key} ${attrs(value)}>`);
+      }
+    }
+  }
+  return tags;
+  function attrs(o) {
+    return Object.entries(o).map(([k, v]) => `${k}="${`${v}`.replace(/"/gu, "&quot;")}"`).join(" ");
+  }
+}
+
+// src/markdown.ts
+var SCRIPTS_RE = /(<script[^>]*>)([\s\S]*?)<\/script>/gu;
+var SVELTE_TAGS_RE2 = /(<svelte:[a-z][^>]*>)([\s\S]*?)<\/svelte:[a-z]+>/gu;
+var GET_SVELTE_TAG_NAME_RE = /^svelte:[a-z]+/u;
+var IS_MODULE_CONTEXT_RE = /\bcontext\s*=\s*["']?module["']?/u;
+var IS_SVELTE_TAG_NAME_RE = /^svelte:[a-z]+$/u;
+var TagContent = class {
+  constructor(tagName, defaultAttrs) {
+    this.startTag = "";
+    this.contents = [];
+    this.tagName = tagName;
+    this.defaultAttrs = defaultAttrs;
+  }
+  toTag() {
+    return `${this.startTag || `<${this.tagName}${this.defaultAttrs ? ` ${this.defaultAttrs}` : ""}>`}
+${this.contents.join("\n")}
+</${this.tagName}>`;
+  }
+  addTag(startTag, content) {
+    if (!this.startTag) {
+      this.startTag = startTag;
+    }
+    this.contents.push(content);
+  }
+  add(content) {
+    this.contents.push(content);
+  }
+  prepend(content) {
+    this.contents.unshift(content);
+  }
+};
+function parseHtml(html) {
+  const moduleContext = new TagContent("script", 'context="module"');
+  const instanceScript = new TagContent("script");
+  const svelteTags = [];
+  let newHtml = html.replace(SCRIPTS_RE, (_, startTag, script) => {
+    let scriptContent = instanceScript;
+    if (IS_MODULE_CONTEXT_RE.test(startTag)) {
+      scriptContent = moduleContext;
+    }
+    scriptContent.addTag(startTag, script);
+    return "";
+  });
+  newHtml = newHtml.replace(SVELTE_TAGS_RE2, (_, startTag, inner) => {
+    const tagName = GET_SVELTE_TAG_NAME_RE.exec(startTag.slice(1))[0].toLowerCase();
+    let svelteTag = svelteTags.find((tag) => tag.tagName === tagName);
+    if (!svelteTag) {
+      svelteTag = new TagContent(tagName);
+      svelteTags.push(svelteTag);
+    }
+    svelteTag.addTag(startTag, inner);
+    return "";
+  });
+  return { html: newHtml, moduleContext, instanceScript, svelteTags };
+}
+function createMarkdownProcessor(options) {
+  const markdownIt = new import_markdown_it.default(__spreadValues({
+    html: true,
+    linkify: true,
+    typographer: true
+  }, options.markdownItOptions));
+  markdownIt.linkify.set({ fuzzyLink: false });
+  const originalValidateLink = markdownIt.validateLink;
+  markdownIt.validateLink = (url) => {
+    if (!originalValidateLink(url)) {
+      return false;
+    }
+    return !IS_SVELTE_TAG_NAME_RE.test(url);
+  };
+  markdownIt.use(plugin);
+  options.markdownItUses.forEach((e) => {
+    const [plugin2, options2] = toArray(e);
+    markdownIt.use(plugin2, options2);
+  });
+  return (id, text) => {
+    var _a, _b;
+    const raw = text.trimEnd();
+    const { wrapperClasses, headEnabled } = options;
+    const parsedFrontmatter = (0, import_gray_matter.default)(raw);
+    const plainMarkdown = (_a = parsedFrontmatter == null ? void 0 : parsedFrontmatter.content) != null ? _a : raw;
+    let html = markdownIt.render(plainMarkdown, { id });
+    if (wrapperClasses) {
+      html = `<div class="${wrapperClasses}">${html}</div>`;
+    }
+    const parsedHtml = parseHtml(html);
+    const { head, frontmatter } = frontmatterPreprocess((_b = parsedFrontmatter == null ? void 0 : parsedFrontmatter.data) != null ? _b : {}, options);
+    parsedHtml.moduleContext.prepend(`export const frontmatter = ${JSON.stringify(frontmatter)}`);
+    if (headEnabled && head) {
+      let svelteHead = parsedHtml.svelteTags.find((tag) => tag.tagName === "svelte:head");
+      if (!svelteHead) {
+        svelteHead = new TagContent("svelte:head");
+        parsedHtml.svelteTags.push(svelteHead);
+      }
+      svelteHead.add(`${headObjToTags(head).join("\n")}`);
+    }
+    const svelteSfc = `${parsedHtml.moduleContext.toTag()}
+${parsedHtml.instanceScript.toTag()}
+${parsedHtml.svelteTags.map((tag) => tag.toTag()).join("\n")}
+${parsedHtml.html}`;
+    return svelteSfc;
+  };
+}
+function frontmatterPreprocess(frontmatter, options) {
+  const head = preprocessHead(frontmatter, options);
+  return { head, frontmatter };
+}
+
+// src/options.ts
+function resolveOptions(userOptions) {
+  var _a;
+  const options = __spreadProps(__spreadValues({
+    headEnabled: true,
+    markdownItOptions: {},
+    markdownItUses: [],
+    include: null,
+    exclude: null
+  }, userOptions), {
+    wrapperClasses: toArray((_a = userOptions.wrapperClasses) != null ? _a : "markdown-body").filter((i) => i).join(" ")
+  });
+  return options;
+}
+
+// src/index.ts
+function src_default(options = {}) {
+  const resolvedOptions = resolveOptions(options);
+  const mdToSvelte = createMarkdownProcessor(resolvedOptions);
+  const filter = (0, import_pluginutils.createFilter)(resolvedOptions.include || /\.md$/, resolvedOptions.exclude);
+  return {
+    name: "vite-plugin-svelte-md",
+    enforce: "pre",
+    transform(raw, id) {
+      if (!filter(id))
+        return void 0;
+      try {
+        return mdToSvelte(id, raw);
+      } catch (e) {
+        this.error(e);
+      }
+      return void 0;
+    },
+    handleHotUpdate(ctx) {
+      if (!filter(ctx.file))
+        return;
+      const defaultRead = ctx.read;
+      ctx.read = async function() {
+        return mdToSvelte(ctx.file, await defaultRead());
+      };
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/index.mjs

@@ -0,0 +1,281 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/index.ts
+import { createFilter } from "@rollup/pluginutils";
+
+// src/markdown.ts
+import MarkdownIt from "markdown-it";
+import grayMatter from "gray-matter";
+
+// src/markdown-it-svelte-tags/index.ts
+var SVELTE_TAGS_RE = /^(?:<svelte:[a-z][^>]*>|<\/svelte:[a-z]+>)/u;
+function plugin(md) {
+  md.inline.ruler.push("svelte-tags", (state) => {
+    if (!state.md.options.html) {
+      return false;
+    }
+    const pos = state.pos;
+    const text = state.src.slice(pos);
+    const match = SVELTE_TAGS_RE.exec(text);
+    if (!match) {
+      return false;
+    }
+    const token = state.push("html_inline", "", 0);
+    token.content = state.src.slice(pos, pos + match[0].length);
+    state.pos += match[0].length;
+    return true;
+  });
+}
+
+// src/utils.ts
+function toArray(n) {
+  if (!Array.isArray(n))
+    return [n];
+  return n;
+}
+
+// src/head.ts
+var headProperties = [
+  "title",
+  "meta",
+  "link",
+  "base",
+  "style",
+  "script",
+  "htmlAttrs",
+  "bodyAttrs"
+];
+function preprocessHead(frontmatter, options) {
+  if (!options.headEnabled)
+    return frontmatter;
+  const head = frontmatter;
+  const meta = Array.isArray(head.meta) ? [...head.meta] : [];
+  if (head.title) {
+    if (!meta.find((i) => i.property === "og:title"))
+      meta.push({ property: "og:title", content: head.title });
+  }
+  if (head.description) {
+    if (!meta.find((i) => i.property === "og:description"))
+      meta.push({
+        property: "og:description",
+        content: head.description
+      });
+    if (!meta.find((i) => i.name === "description"))
+      meta.push({ name: "description", content: head.description });
+  }
+  if (head.image) {
+    if (!meta.find((i) => i.property === "og:image"))
+      meta.push({ property: "og:image", content: head.image });
+    if (!meta.find((i) => i.property === "twitter:card"))
+      meta.push({
+        name: "twitter:card",
+        content: "summary_large_image"
+      });
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(head)) {
+    if (headProperties.includes(key))
+      result[key] = value;
+  }
+  if (meta.length > 0) {
+    result.meta = meta;
+  }
+  return Object.entries(result).length === 0 ? null : result;
+}
+function headObjToTags(obj) {
+  const tags = [];
+  for (const key of Object.keys(obj)) {
+    if (obj[key] == null)
+      continue;
+    if (key === "title") {
+      tags.push(`<title>${obj[key]}</title>`);
+    } else if (key === "base") {
+      tags.push(`<base ${attrs(__spreadValues({ key: "default" }, obj[key]))}>`);
+    } else if (headProperties.includes(key)) {
+      const value = obj[key];
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          tags.push(`<${key} ${attrs(item)}>`);
+        });
+      } else if (value) {
+        tags.push(`<${key} ${attrs(value)}>`);
+      }
+    }
+  }
+  return tags;
+  function attrs(o) {
+    return Object.entries(o).map(([k, v]) => `${k}="${`${v}`.replace(/"/gu, "&quot;")}"`).join(" ");
+  }
+}
+
+// src/markdown.ts
+var SCRIPTS_RE = /(<script[^>]*>)([\s\S]*?)<\/script>/gu;
+var SVELTE_TAGS_RE2 = /(<svelte:[a-z][^>]*>)([\s\S]*?)<\/svelte:[a-z]+>/gu;
+var GET_SVELTE_TAG_NAME_RE = /^svelte:[a-z]+/u;
+var IS_MODULE_CONTEXT_RE = /\bcontext\s*=\s*["']?module["']?/u;
+var IS_SVELTE_TAG_NAME_RE = /^svelte:[a-z]+$/u;
+var TagContent = class {
+  constructor(tagName, defaultAttrs) {
+    this.startTag = "";
+    this.contents = [];
+    this.tagName = tagName;
+    this.defaultAttrs = defaultAttrs;
+  }
+  toTag() {
+    return `${this.startTag || `<${this.tagName}${this.defaultAttrs ? ` ${this.defaultAttrs}` : ""}>`}
+${this.contents.join("\n")}
+</${this.tagName}>`;
+  }
+  addTag(startTag, content) {
+    if (!this.startTag) {
+      this.startTag = startTag;
+    }
+    this.contents.push(content);
+  }
+  add(content) {
+    this.contents.push(content);
+  }
+  prepend(content) {
+    this.contents.unshift(content);
+  }
+};
+function parseHtml(html) {
+  const moduleContext = new TagContent("script", 'context="module"');
+  const instanceScript = new TagContent("script");
+  const svelteTags = [];
+  let newHtml = html.replace(SCRIPTS_RE, (_, startTag, script) => {
+    let scriptContent = instanceScript;
+    if (IS_MODULE_CONTEXT_RE.test(startTag)) {
+      scriptContent = moduleContext;
+    }
+    scriptContent.addTag(startTag, script);
+    return "";
+  });
+  newHtml = newHtml.replace(SVELTE_TAGS_RE2, (_, startTag, inner) => {
+    const tagName = GET_SVELTE_TAG_NAME_RE.exec(startTag.slice(1))[0].toLowerCase();
+    let svelteTag = svelteTags.find((tag) => tag.tagName === tagName);
+    if (!svelteTag) {
+      svelteTag = new TagContent(tagName);
+      svelteTags.push(svelteTag);
+    }
+    svelteTag.addTag(startTag, inner);
+    return "";
+  });
+  return { html: newHtml, moduleContext, instanceScript, svelteTags };
+}
+function createMarkdownProcessor(options) {
+  const markdownIt = new MarkdownIt(__spreadValues({
+    html: true,
+    linkify: true,
+    typographer: true
+  }, options.markdownItOptions));
+  markdownIt.linkify.set({ fuzzyLink: false });
+  const originalValidateLink = markdownIt.validateLink;
+  markdownIt.validateLink = (url) => {
+    if (!originalValidateLink(url)) {
+      return false;
+    }
+    return !IS_SVELTE_TAG_NAME_RE.test(url);
+  };
+  markdownIt.use(plugin);
+  options.markdownItUses.forEach((e) => {
+    const [plugin2, options2] = toArray(e);
+    markdownIt.use(plugin2, options2);
+  });
+  return (id, text) => {
+    var _a, _b;
+    const raw = text.trimEnd();
+    const { wrapperClasses, headEnabled } = options;
+    const parsedFrontmatter = grayMatter(raw);
+    const plainMarkdown = (_a = parsedFrontmatter == null ? void 0 : parsedFrontmatter.content) != null ? _a : raw;
+    let html = markdownIt.render(plainMarkdown, { id });
+    if (wrapperClasses) {
+      html = `<div class="${wrapperClasses}">${html}</div>`;
+    }
+    const parsedHtml = parseHtml(html);
+    const { head, frontmatter } = frontmatterPreprocess((_b = parsedFrontmatter == null ? void 0 : parsedFrontmatter.data) != null ? _b : {}, options);
+    parsedHtml.moduleContext.prepend(`export const frontmatter = ${JSON.stringify(frontmatter)}`);
+    if (headEnabled && head) {
+      let svelteHead = parsedHtml.svelteTags.find((tag) => tag.tagName === "svelte:head");
+      if (!svelteHead) {
+        svelteHead = new TagContent("svelte:head");
+        parsedHtml.svelteTags.push(svelteHead);
+      }
+      svelteHead.add(`${headObjToTags(head).join("\n")}`);
+    }
+    const svelteSfc = `${parsedHtml.moduleContext.toTag()}
+${parsedHtml.instanceScript.toTag()}
+${parsedHtml.svelteTags.map((tag) => tag.toTag()).join("\n")}
+${parsedHtml.html}`;
+    return svelteSfc;
+  };
+}
+function frontmatterPreprocess(frontmatter, options) {
+  const head = preprocessHead(frontmatter, options);
+  return { head, frontmatter };
+}
+
+// src/options.ts
+function resolveOptions(userOptions) {
+  var _a;
+  const options = __spreadProps(__spreadValues({
+    headEnabled: true,
+    markdownItOptions: {},
+    markdownItUses: [],
+    include: null,
+    exclude: null
+  }, userOptions), {
+    wrapperClasses: toArray((_a = userOptions.wrapperClasses) != null ? _a : "markdown-body").filter((i) => i).join(" ")
+  });
+  return options;
+}
+
+// src/index.ts
+function src_default(options = {}) {
+  const resolvedOptions = resolveOptions(options);
+  const mdToSvelte = createMarkdownProcessor(resolvedOptions);
+  const filter = createFilter(resolvedOptions.include || /\.md$/, resolvedOptions.exclude);
+  return {
+    name: "vite-plugin-svelte-md",
+    enforce: "pre",
+    transform(raw, id) {
+      if (!filter(id))
+        return void 0;
+      try {
+        return mdToSvelte(id, raw);
+      } catch (e) {
+        this.error(e);
+      }
+      return void 0;
+    },
+    handleHotUpdate(ctx) {
+      if (!filter(ctx.file))
+        return;
+      const defaultRead = ctx.read;
+      ctx.read = async function() {
+        return mdToSvelte(ctx.file, await defaultRead());
+      };
+    }
+  };
+}
+export {
+  src_default as default
+};

package/package.json

@@ -0,0 +1,87 @@
+{
+    "name": "vite-plugin-svelte-md",
+    "version": "0.1.0",
+    "description": "Vite plugin to convert markdown to svelte template",
+    "files": [
+        "lib"
+    ],
+    "main": "./lib/index.js",
+    "module": "./lib/index.mjs",
+    "exports": {
+        ".": {
+            "import": "./lib/index.mjs",
+            "require": "./lib/index.js"
+        }
+    },
+    "types": "./lib/index.d.ts",
+    "scripts": {
+        "prebuild": "npm run -s clean",
+        "build": "tsup",
+        "clean": "rimraf .nyc_output lib coverage",
+        "lint": "eslint . --ext .js,.ts,.json",
+        "eslint-fix": "npm run lint -- --fix",
+        "format:docs": "prettier README.md --write",
+        "test": "mocha --require ts-node/register \"tests/**/*.ts\" --reporter dot --timeout 60000",
+        "cover": "nyc --reporter=lcov npm run test",
+        "debug": "mocha --require ts-node/register/transpile-only \"tests/**/*.ts\" --reporter dot",
+        "update-snap": "mocha --require ts-node/register/transpile-only \"tests/**/*.ts\" --reporter dot --update",
+        "preversion": "npm run lint && npm test"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ota-meshi/vite-plugin-svelte-md.git"
+    },
+    "keywords": [
+        "vite",
+        "vite-plugin",
+        "svelte",
+        "markdown",
+        "markdown-it"
+    ],
+    "author": "Yosuke Ota",
+    "funding": "https://github.com/sponsors/ota-meshi",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/ota-meshi/vite-plugin-svelte-md/issues"
+    },
+    "homepage": "https://github.com/ota-meshi/vite-plugin-svelte-md#readme",
+    "peerDependencies": {
+        "vite": "^2.0.0"
+    },
+    "dependencies": {
+        "@rollup/pluginutils": "^4.1.1",
+        "gray-matter": "^4.0.3",
+        "markdown-it": "^12.2.0"
+    },
+    "devDependencies": {
+        "@ota-meshi/eslint-plugin": "^0.10.0",
+        "@types/chai": "^4.2.22",
+        "@types/estree": "0.0.50",
+        "@types/markdown-it": "^12.2.3",
+        "@types/mocha": "^9.0.0",
+        "@types/node": "^16.11.11",
+        "@typescript-eslint/eslint-plugin": "^5.5.0",
+        "@typescript-eslint/parser": "^5.5.0",
+        "chai": "^4.3.4",
+        "eslint": "^8.3.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-json-schema-validator": "^2.1.10",
+        "eslint-plugin-jsonc": "^2.0.0",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-node-dependencies": "^0.6.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-regexp": "^1.0.0",
+        "mocha": "^9.1.3",
+        "mocha-chai-jest-snapshot": "^1.1.3",
+        "nyc": "^15.1.0",
+        "prettier": "^2.5.0",
+        "prettier-plugin-svelte": "^2.5.0",
+        "rimraf": "^3.0.2",
+        "svelte": "^3.44.2",
+        "ts-node": "^10.4.0",
+        "tsup": "^5.10.0",
+        "typescript": "^4.5.2",
+        "vite": "^2.6.14"
+    }
+}