From 5605e93f188f4c9880f3d5e64b311dce53f71891 Mon Sep 17 00:00:00 2001
From: Matt Jennings <me@mattjennings.io>
Date: Fri, 4 Aug 2023 17:44:02 -0500
Subject: [PATCH] feat: support named exports for wrapper components

---
 README.md                                      |  5 ++++-
 playwright.config.js                           |  1 +
 src/lib/remark.js                              | 18 +++++++++++++++---
 src/routes/tests/meta/array/+page.svx          |  2 +-
 src/routes/tests/meta/meta.spec.mjs            |  4 +++-
 .../tests/meta/wrapper-named-export/+page.svx  |  3 +++
 src/routes/tests/meta/wrappers.js              |  3 +++
 7 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/tests/meta/wrapper-named-export/+page.svx
 create mode 100644 src/routes/tests/meta/wrappers.js

diff --git a/README.md b/README.md
index de2b4c5..58e5496 100644
--- a/README.md
+++ b/README.md
@@ -132,7 +132,10 @@ Example code blocks are rendered with a [Svelte component](./src/lib/Example.sve
       examples,
       {
         defaults: {
-          Wrapper: '/src/lib/Example.svelte'
+          Wrapper: '/src/lib/Example.svelte',
+
+          // or if the component is a named export
+          Wrapper: ['some-package', 'CustomExample'] // -> import { CustomExample } from 'some-package'
         }
       }
     ]
diff --git a/playwright.config.js b/playwright.config.js
index 679624d..2f2a8d1 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -1,6 +1,7 @@
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
   testDir: './src/routes/tests',
+  timeout: 10000,
   webServer: {
     command: 'npm run build:site && npm run preview',
     port: 4173
diff --git a/src/lib/remark.js b/src/lib/remark.js
index 9b14b4c..46a4c24 100644
--- a/src/lib/remark.js
+++ b/src/lib/remark.js
@@ -14,6 +14,9 @@ const RE_SCRIPT_START =
 const RE_SCRIPT_BLOCK = /(<script[\s\S]*?>)([\s\S]*?)(<\/script>)/g
 const RE_STYLE_BLOCK = /(<style[\s\S]*?>)([\s\S]*?)(<\/style>)/g
 
+// parses key=value pairs from a string. supports strings, numbers, booleans, and arrays
+const RE_PARSE_META = /(\w+=\d+|\w+="[^"]*"|\w+=\[[^\]]*\]|\w+)/g
+
 export const EXAMPLE_MODULE_PREFIX = '___mdsvexample___'
 export const EXAMPLE_COMPONENT_PREFIX = 'Mdsvexample___'
 
@@ -63,7 +66,10 @@ export default function (options = {}) {
     // add imports for each generated example
     let scripts = ''
     examples.forEach((example, i) => {
-      const imp = `import Example from "${example.Wrapper}";\n`
+      const imp =
+        typeof example.Wrapper === 'string'
+          ? `import Example from "${example.Wrapper}";\n`
+          : `import { ${example.Wrapper[1]} as Example } from "${example.Wrapper[0]}";\n`
 
       if (!scripts.includes(imp)) {
         scripts += imp
@@ -98,12 +104,18 @@ export default function (options = {}) {
 
 function parseMeta(meta) {
   const result = {}
-  const meta_parts = meta.match(/(?:[^\s"]+|"[^"]*")+/g) ?? []
+  const meta_parts = meta.match(RE_PARSE_META) ?? []
 
   for (let i = 0; i < meta_parts.length; i++) {
     const [key, value = 'true'] = meta_parts[i].split('=')
 
-    result[key] = JSON.parse(value)
+    try {
+      result[key] = JSON.parse(value)
+    } catch (e) {
+      const error = new Error(`Unable to parse meta \`${key}=${value}\` - ${e.message}`)
+      error.stack = e.stack
+      throw error
+    }
   }
 
   return result
diff --git a/src/routes/tests/meta/array/+page.svx b/src/routes/tests/meta/array/+page.svx
index 810c5bb..1aeaed1 100644
--- a/src/routes/tests/meta/array/+page.svx
+++ b/src/routes/tests/meta/array/+page.svx
@@ -1,3 +1,3 @@
-```svelte example custom=["hello/world"] Wrapper="../Wrapper.svelte"
+```svelte example space=["hello", "world"] nospace=["hello","world"] Wrapper="../Wrapper.svelte"
 
 ```
diff --git a/src/routes/tests/meta/meta.spec.mjs b/src/routes/tests/meta/meta.spec.mjs
index 09ec793..85ba402 100644
--- a/src/routes/tests/meta/meta.spec.mjs
+++ b/src/routes/tests/meta/meta.spec.mjs
@@ -31,6 +31,8 @@ test('wrapper and custom meta', async ({ page }) => {
 test('array meta', async ({ page }) => {
   await page.goto('/tests/meta/array')
   await expect(
-    page.locator('text={"Wrapper":"../Wrapper.svelte","example":true,"custom":["hello/world"]}')
+    page.locator(
+      'text={"Wrapper":"../Wrapper.svelte","example":true,"space":["hello","world"],"nospace":["hello","world"]}'
+    )
   ).toBeVisible()
 })
diff --git a/src/routes/tests/meta/wrapper-named-export/+page.svx b/src/routes/tests/meta/wrapper-named-export/+page.svx
new file mode 100644
index 0000000..9b9cbd6
--- /dev/null
+++ b/src/routes/tests/meta/wrapper-named-export/+page.svx
@@ -0,0 +1,3 @@
+```svelte example Wrapper=["../wrappers.js", "MetaWrapper"]
+
+```
diff --git a/src/routes/tests/meta/wrappers.js b/src/routes/tests/meta/wrappers.js
new file mode 100644
index 0000000..c09d6db
--- /dev/null
+++ b/src/routes/tests/meta/wrappers.js
@@ -0,0 +1,3 @@
+import MetaWrapper from './Wrapper.svelte'
+
+export { MetaWrapper }