feat: mdjs support for story-code blocks

.changeset/lucky-forks-film.md

@@ -0,0 +1,31 @@
+---
+'@mdjs/core': patch
+'@mdjs/mdjs-preview': patch
+---
+
+If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
+
+````md
+```js preview-story
+// will be visible when platform web is selected
+export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
+```
+
+```xml story-code
+<!-- will be visible when platform android is selected -->
+<Button
+    android:id="@+id/demoWcCard"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Android Code"
+    style="@style/Widget.FooComponents.Demo.Wc.Card"
+/>
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import DemoWc.Card
+
+let card = DemoWcButton()
+```
+````

docs/docs/markdown-javascript/overview.md

@@ -123,6 +123,60 @@ export const header = () => {
 };
 ```
 
+#### Story Code
+
+If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
+
+````md
+```js preview-story
+// will be visible when platform web is selected
+export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
+```
+
+```xml story-code
+<!-- will be visible when platform android is selected -->
+<Button
+    android:id="@+id/demoWcCard"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Android Code"
+    style="@style/Widget.FooComponents.Demo.Wc.Card"
+/>
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import DemoWc.Card
+
+let card = DemoWcButton()
+```
+````
+
+See it in action by opening up the code block and switching platforms
+
+```js preview-story
+// will be visible when platform web is selected
+export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
+```
+
+```xml story-code
+<!-- will be visible when platform android is selected -->
+<Button
+    android:id="@+id/demoWcCard"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Android Code"
+    style="@style/Widget.FooComponents.Demo.Wc.Card"
+/>
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import DemoWc.Card
+
+let card = DemoWcButton()
+```
+
 ## Supported Systems
 
 ### Storybook

docs/docs/markdown-javascript/preview.md

@@ -40,6 +40,60 @@ will result in
 export const foo = () => html` <demo-element></demo-element> `;
 ```
 
+#### Story Code
+
+If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
+
+````md
+```js preview-story
+// will be visible when platform web is selected
+export const JsPreviewStory = () => html` <demo-element></demo-element> `;
+```
+
+```xml story-code
+<!-- will be visible when platform android is selected -->
+<Button
+    android:id="@+id/demoElement"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Android Code"
+    style="@style/Widget.Demo.Element"
+/>
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import Demo.Element
+
+let card = DemoElement()
+```
+````
+
+See it in action by opening up the code block and switching platforms
+
+```js preview-story
+// will be visible when platform web is selected
+export const JsPreviewStory = () => html` <demo-element></demo-element> `;
+```
+
+```xml story-code
+<!-- will be visible when platform android is selected -->
+<Button
+    android:id="@+id/demoElement"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Android Code"
+    style="@style/Widget.Demo.Element"
+/>
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import Demo.Element
+
+let card = DemoElement()
+```
+
 ## HTML Story
 
 ````md

packages/mdjs-core/README.md

@@ -1,5 +1,3 @@
 # Markdown with JavaScript (mdjs)
 
-Combine Markdown with JavaScript
-
-For docs please see our homepage [https://rocket.modern-web.dev/docs/markdown-javascript/overview/](https://rocket.modern-web.dev/docs/markdown-javascript/overview/).
+[=> See Source <=](../../docs/docs/markdown-javascript/overview.md)

packages/mdjs-core/package.json

@@ -21,6 +21,7 @@
     }
   },
   "scripts": {
+    "prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
     "start": "npm run start:stories",
     "start:script": "web-dev-server -c demo/script/server.js --root-dir ../../",
     "start:stories": "web-dev-server -c demo/stories/server.js --root-dir ../../",

packages/mdjs-core/src/mdjsStoryParse.js

@@ -77,17 +77,32 @@ function mdjsStoryParse({
       const newValue = previewStoryTag(storyData.name);
       if (newValue.includes('[[CODE SLOT]]')) {
         const tagParts = newValue.split('[[CODE SLOT]]');
+
+        const inside = [node];
+        let skipAmount = 1;
+        const next = parent.children[index + 1];
+        if (next && next.type === 'code' && next.meta === 'story-code') {
+          inside.push(next);
+          skipAmount += 1;
+
+          const next2 = parent.children[index + 2];
+          if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
+            inside.push(next2);
+            skipAmount += 1;
+          }
+        }
+
         node = {
           type: 'root',
           children: [
             { type: 'html', value: tagParts[0] },
             { type: 'text', value: '\n\n' },
-            node,
+            ...inside,
             { type: 'text', value: '\n\n' },
             { type: 'html', value: tagParts[1] },
           ],
         };
-        parent.children.splice(index, 1, node);
+        parent.children.splice(index, skipAmount, node);
       } else {
         node.type = 'html';
         node.value = previewStoryTag(storyData.name);
@@ -115,17 +130,31 @@ function mdjsStoryParse({
       const newValue = previewStoryTag(storyData.name);
       if (newValue.includes('[[CODE SLOT]]')) {
         const tagParts = newValue.split('[[CODE SLOT]]');
+        const inside = [node];
+        let skipAmount = 1;
+        const next = parent.children[index + 1];
+        if (next && next.type === 'code' && next.meta === 'story-code') {
+          inside.push(next);
+          skipAmount += 1;
+
+          const next2 = parent.children[index + 2];
+          if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
+            inside.push(next2);
+            skipAmount += 1;
+          }
+        }
+
         node = {
           type: 'root',
           children: [
             { type: 'html', value: tagParts[0] },
             { type: 'text', value: '\n\n' },
-            node,
+            ...inside,
             { type: 'text', value: '\n\n' },
             { type: 'html', value: tagParts[1] },
           ],
         };
-        parent.children.splice(index, 1, node);
+        parent.children.splice(index, skipAmount, node);
       } else {
         node.type = 'html';
         node.value = previewStoryTag(storyData.name);

packages/mdjs-core/test-node/mdjsStoryParse.test.js

@@ -114,4 +114,136 @@ describe('mdjsStoryParse', () => {
     const result = await parser.process(input);
     expect(result.contents).to.equal(expected);
   });
+
+  it('will wrap following story-code blocks', async () => {
+    const input = [
+      '```js preview-story',
+      'export const foo = () => {};',
+      '```',
+      '',
+      '```swift story-code',
+      'CODE for iOS',
+      '```',
+      '',
+      '```xml story-code',
+      'CODE for Android',
+      '```',
+    ].join('\n');
+
+    const expected = [
+      '<mdjs-preview mdjs-story-name="foo">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-js">export const foo = () => {};',
+      '</code></pre>',
+      '<pre><code class="language-swift">CODE for iOS',
+      '</code></pre>',
+      '<pre><code class="language-xml">CODE for Android',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
+      '',
+    ].join('\n');
+
+    const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
+    const result = await parser.process(input);
+    expect(result.contents).to.equal(expected);
+  });
+
+  it('will wrap following story-code blocks also for html stories', async () => {
+    const input = [
+      '```html preview-story',
+      '<my-el></my-el>',
+      '```',
+      '',
+      '```swift story-code',
+      'CODE for iOS',
+      '```',
+      '',
+      '```xml story-code',
+      'CODE for Android',
+      '```',
+    ].join('\n');
+
+    const expected = [
+      '<mdjs-preview mdjs-story-name="HtmlStory0">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-html">&#x3C;my-el>&#x3C;/my-el>',
+      '</code></pre>',
+      '<pre><code class="language-swift">CODE for iOS',
+      '</code></pre>',
+      '<pre><code class="language-xml">CODE for Android',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
+      '',
+    ].join('\n');
+
+    const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
+    const result = await parser.process(input);
+    expect(result.contents).to.equal(expected);
+  });
+
+  it('will wrap only following story-code blocks', async () => {
+    const input = [
+      '```js preview-story',
+      'export const foo = () => {};',
+      '```',
+      '```swift story-code',
+      'CODE for iOS',
+      '```',
+      '# hey',
+      '```swift story-code',
+      'SHOULD BE OUTSIDE',
+      '```',
+      '```js preview-story',
+      'export const foo2 = () => {};',
+      '```',
+      '```xml story-code',
+      'CODE for Android',
+      '```',
+    ].join('\n');
+
+    const expected = [
+      '<mdjs-preview mdjs-story-name="foo">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-js">export const foo = () => {};',
+      '</code></pre>',
+      '<pre><code class="language-swift">CODE for iOS',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
+      '<h1>hey</h1>',
+      '<pre><code class="language-swift">SHOULD BE OUTSIDE',
+      '</code></pre>',
+      '<mdjs-preview mdjs-story-name="foo2">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-js">export const foo2 = () => {};',
+      '</code></pre>',
+      '<pre><code class="language-xml">CODE for Android',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
+      '',
+    ].join('\n');
+
+    const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
+    const result = await parser.process(input);
+    expect(result.contents).to.equal(expected);
+  });
 });

packages/mdjs-preview/README.md

@@ -1,3 +1,3 @@
 # Preview element for mdjs
 
-For docs please see our homepage [https://rocket.modern-web.dev/docs/markdown-javascript/preview/](https://rocket.modern-web.dev/docs/markdown-javascript/preview/).
+[=> See Source <=](../../docs/docs/markdown-javascript/preview.md)

packages/mdjs-preview/package.json

@@ -20,6 +20,7 @@
     "./define": "./src/define/define.js"
   },
   "scripts": {
+    "prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
     "debug": "cd ../../ && npm run debug -- --group mdjs-preview",
     "test": "npm run test:web",
     "test:web": "cd ../../ && npm run test:web -- --group mdjs-preview"