diff --git a/.changeset/lucky-forks-film.md b/.changeset/lucky-forks-film.md
new file mode 100644
index 00000000..1c5c46d1
--- /dev/null
+++ b/.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` JS Preview Story `;
+```
+
+```xml story-code
+
+
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import DemoWc.Card
+
+let card = DemoWcButton()
+```
+````
diff --git a/docs/docs/markdown-javascript/overview.md b/docs/docs/markdown-javascript/overview.md
index a5fca56d..3745e39e 100644
--- a/docs/docs/markdown-javascript/overview.md
+++ b/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` JS Preview Story `;
+```
+
+```xml story-code
+
+
+```
+
+```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` JS Preview Story `;
+```
+
+```xml story-code
+
+
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import DemoWc.Card
+
+let card = DemoWcButton()
+```
+
## Supported Systems
### Storybook
diff --git a/docs/docs/markdown-javascript/preview.md b/docs/docs/markdown-javascript/preview.md
index 8b6a5b86..473e10dc 100644
--- a/docs/docs/markdown-javascript/preview.md
+++ b/docs/docs/markdown-javascript/preview.md
@@ -40,6 +40,60 @@ will result in
export const foo = () => html` `;
```
+#### 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` `;
+```
+
+```xml story-code
+
+
+```
+
+```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` `;
+```
+
+```xml story-code
+
+
+```
+
+```swift story-code
+// will be visible when platform ios is selected
+import Demo.Element
+
+let card = DemoElement()
+```
+
## HTML Story
````md
diff --git a/packages/mdjs-core/README.md b/packages/mdjs-core/README.md
index 39bdedc6..90797950 100644
--- a/packages/mdjs-core/README.md
+++ b/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)
diff --git a/packages/mdjs-core/package.json b/packages/mdjs-core/package.json
index 3db5f21c..40e7c05f 100644
--- a/packages/mdjs-core/package.json
+++ b/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 ../../",
diff --git a/packages/mdjs-core/src/mdjsStoryParse.js b/packages/mdjs-core/src/mdjsStoryParse.js
index 86e87c1c..525b2493 100644
--- a/packages/mdjs-core/src/mdjsStoryParse.js
+++ b/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);
diff --git a/packages/mdjs-core/test-node/mdjsStoryParse.test.js b/packages/mdjs-core/test-node/mdjsStoryParse.test.js
index 93526071..6a96c8ca 100644
--- a/packages/mdjs-core/test-node/mdjsStoryParse.test.js
+++ b/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 = [
+ '',
+ '',
+ '',
+ '',
+ 'export const foo = () => {};',
+ '
',
+ 'CODE for iOS',
+ '
',
+ 'CODE for Android',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ].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',
+ '',
+ '```',
+ '',
+ '```swift story-code',
+ 'CODE for iOS',
+ '```',
+ '',
+ '```xml story-code',
+ 'CODE for Android',
+ '```',
+ ].join('\n');
+
+ const expected = [
+ '',
+ '',
+ '',
+ '',
+ '<my-el></my-el>',
+ '
',
+ 'CODE for iOS',
+ '
',
+ 'CODE for Android',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ].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 = [
+ '',
+ '',
+ '',
+ '',
+ 'export const foo = () => {};',
+ '
',
+ 'CODE for iOS',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ '
hey
',
+ 'SHOULD BE OUTSIDE',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ 'export const foo2 = () => {};',
+ '
',
+ 'CODE for Android',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ].join('\n');
+
+ const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
+ const result = await parser.process(input);
+ expect(result.contents).to.equal(expected);
+ });
});
diff --git a/packages/mdjs-preview/README.md b/packages/mdjs-preview/README.md
index 4788ee17..d2981943 100644
--- a/packages/mdjs-preview/README.md
+++ b/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)
diff --git a/packages/mdjs-preview/package.json b/packages/mdjs-preview/package.json
index 0b4817bc..ed87c661 100644
--- a/packages/mdjs-preview/package.json
+++ b/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"
diff --git a/packages/mdjs-preview/src/MdJsPreview.js b/packages/mdjs-preview/src/MdJsPreview.js
index 1fda283a..cf37ebc8 100644
--- a/packages/mdjs-preview/src/MdJsPreview.js
+++ b/packages/mdjs-preview/src/MdJsPreview.js
@@ -47,7 +47,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
contentHeight: { type: Number },
simulatorUrl: { type: String },
// page settings
- platform: { type: String },
+ platform: { type: String, reflect: true },
platforms: { type: Array },
size: { type: String },
sizes: { type: Array },
@@ -292,8 +292,15 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
}
async onCopy() {
- if (this.textContent) {
- await navigator.clipboard.writeText(this.textContent.trim());
+ let nodeToConsider = this.children[0];
+ if (this.platform === 'android') {
+ nodeToConsider = this.children[1];
+ }
+ if (this.platform === 'ios') {
+ nodeToConsider = this.children[2];
+ }
+ if (nodeToConsider && nodeToConsider.textContent) {
+ await navigator.clipboard.writeText(nodeToConsider.textContent.trim());
this.__copyButtonText = 'Copied ✅';
setTimeout(() => {
this.__copyButtonText = 'Copy code';
@@ -845,6 +852,21 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
border: 1px solid #333;
border-radius: 3px;
}
+
+ /** Showing/Hiding additional code blocks **/
+ ::slotted(pre) {
+ display: none;
+ }
+
+ :host([platform='web']) ::slotted(pre:nth-child(1)) {
+ display: block;
+ }
+ :host([platform='android']) ::slotted(pre:nth-child(2)) {
+ display: block;
+ }
+ :host([platform='ios']) ::slotted(pre:nth-child(3)) {
+ display: block;
+ }
`;
}
}