Skip to content

Commit 6221e5f

Browse files
daKmoRdaKmoR
committed
feat: mdjs support for story-code blocks
1 parent 06741ed commit 6221e5f

File tree

10 files changed

+333
-11
lines changed

10 files changed

+333
-11
lines changed

‎.changeset/lucky-forks-film.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
'@mdjs/core': patch
3+
'@mdjs/mdjs-preview': patch
4+
---
5+
6+
If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
7+
8+
````md
9+
```js preview-story
10+
// will be visible when platform web is selected
11+
export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
12+
```
13+
14+
```xml story-code
15+
<!-- will be visible when platform android is selected -->
16+
<Button
17+
android:id="@+id/demoWcCard"
18+
android:layout_width="wrap_content"
19+
android:layout_height="wrap_content"
20+
android:text="Android Code"
21+
style="@style/Widget.FooComponents.Demo.Wc.Card"
22+
/>
23+
```
24+
25+
```swift story-code
26+
// will be visible when platform ios is selected
27+
import DemoWc.Card
28+
29+
let card = DemoWcButton()
30+
```
31+
````

‎docs/docs/markdown-javascript/overview.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,60 @@ export const header = () => {
123123
};
124124
```
125125

126+
#### Story Code
127+
128+
If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
129+
130+
````md
131+
```js preview-story
132+
// will be visible when platform web is selected
133+
export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
134+
```
135+
136+
```xml story-code
137+
<!-- will be visible when platform android is selected -->
138+
<Button
139+
android:id="@+id/demoWcCard"
140+
android:layout_width="wrap_content"
141+
android:layout_height="wrap_content"
142+
android:text="Android Code"
143+
style="@style/Widget.FooComponents.Demo.Wc.Card"
144+
/>
145+
```
146+
147+
```swift story-code
148+
// will be visible when platform ios is selected
149+
import DemoWc.Card
150+
151+
let card = DemoWcButton()
152+
```
153+
````
154+
155+
See it in action by opening up the code block and switching platforms
156+
157+
```js preview-story
158+
// will be visible when platform web is selected
159+
export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-wc-card> `;
160+
```
161+
162+
```xml story-code
163+
<!-- will be visible when platform android is selected -->
164+
<Button
165+
android:id="@+id/demoWcCard"
166+
android:layout_width="wrap_content"
167+
android:layout_height="wrap_content"
168+
android:text="Android Code"
169+
style="@style/Widget.FooComponents.Demo.Wc.Card"
170+
/>
171+
```
172+
173+
```swift story-code
174+
// will be visible when platform ios is selected
175+
import DemoWc.Card
176+
177+
let card = DemoWcButton()
178+
```
179+
126180
## Supported Systems
127181

128182
### Storybook

‎docs/docs/markdown-javascript/preview.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,60 @@ will result in
4040
export const foo = () => html` <demo-element></demo-element> `;
4141
```
4242

43+
#### Story Code
44+
45+
If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms
46+
47+
````md
48+
```js preview-story
49+
// will be visible when platform web is selected
50+
export const JsPreviewStory = () => html` <demo-element></demo-element> `;
51+
```
52+
53+
```xml story-code
54+
<!-- will be visible when platform android is selected -->
55+
<Button
56+
android:id="@+id/demoElement"
57+
android:layout_width="wrap_content"
58+
android:layout_height="wrap_content"
59+
android:text="Android Code"
60+
style="@style/Widget.Demo.Element"
61+
/>
62+
```
63+
64+
```swift story-code
65+
// will be visible when platform ios is selected
66+
import Demo.Element
67+
68+
let card = DemoElement()
69+
```
70+
````
71+
72+
See it in action by opening up the code block and switching platforms
73+
74+
```js preview-story
75+
// will be visible when platform web is selected
76+
export const JsPreviewStory = () => html` <demo-element></demo-element> `;
77+
```
78+
79+
```xml story-code
80+
<!-- will be visible when platform android is selected -->
81+
<Button
82+
android:id="@+id/demoElement"
83+
android:layout_width="wrap_content"
84+
android:layout_height="wrap_content"
85+
android:text="Android Code"
86+
style="@style/Widget.Demo.Element"
87+
/>
88+
```
89+
90+
```swift story-code
91+
// will be visible when platform ios is selected
92+
import Demo.Element
93+
94+
let card = DemoElement()
95+
```
96+
4397
## HTML Story
4498

4599
````md

‎packages/mdjs-core/README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
# Markdown with JavaScript (mdjs)
22

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

‎packages/mdjs-core/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
}
2222
},
2323
"scripts": {
24+
"prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
2425
"start": "npm run start:stories",
2526
"start:script": "web-dev-server -c demo/script/server.js --root-dir ../../",
2627
"start:stories": "web-dev-server -c demo/stories/server.js --root-dir ../../",

‎packages/mdjs-core/src/mdjsStoryParse.js‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,32 @@ function mdjsStoryParse({
7777
const newValue = previewStoryTag(storyData.name);
7878
if (newValue.includes('[[CODE SLOT]]')) {
7979
const tagParts = newValue.split('[[CODE SLOT]]');
80+
81+
const inside = [node];
82+
let skipAmount = 1;
83+
const next = parent.children[index + 1];
84+
if (next && next.type === 'code' && next.meta === 'story-code') {
85+
inside.push(next);
86+
skipAmount += 1;
87+
88+
const next2 = parent.children[index + 2];
89+
if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
90+
inside.push(next2);
91+
skipAmount += 1;
92+
}
93+
}
94+
8095
node = {
8196
type: 'root',
8297
children: [
8398
{ type: 'html', value: tagParts[0] },
8499
{ type: 'text', value: '\n\n' },
85-
node,
100+
...inside,
86101
{ type: 'text', value: '\n\n' },
87102
{ type: 'html', value: tagParts[1] },
88103
],
89104
};
90-
parent.children.splice(index, 1, node);
105+
parent.children.splice(index, skipAmount, node);
91106
} else {
92107
node.type = 'html';
93108
node.value = previewStoryTag(storyData.name);
@@ -115,17 +130,31 @@ function mdjsStoryParse({
115130
const newValue = previewStoryTag(storyData.name);
116131
if (newValue.includes('[[CODE SLOT]]')) {
117132
const tagParts = newValue.split('[[CODE SLOT]]');
133+
const inside = [node];
134+
let skipAmount = 1;
135+
const next = parent.children[index + 1];
136+
if (next && next.type === 'code' && next.meta === 'story-code') {
137+
inside.push(next);
138+
skipAmount += 1;
139+
140+
const next2 = parent.children[index + 2];
141+
if (next2 && next2.type === 'code' && next2.meta === 'story-code') {
142+
inside.push(next2);
143+
skipAmount += 1;
144+
}
145+
}
146+
118147
node = {
119148
type: 'root',
120149
children: [
121150
{ type: 'html', value: tagParts[0] },
122151
{ type: 'text', value: '\n\n' },
123-
node,
152+
...inside,
124153
{ type: 'text', value: '\n\n' },
125154
{ type: 'html', value: tagParts[1] },
126155
],
127156
};
128-
parent.children.splice(index, 1, node);
157+
parent.children.splice(index, skipAmount, node);
129158
} else {
130159
node.type = 'html';
131160
node.value = previewStoryTag(storyData.name);

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

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,136 @@ describe('mdjsStoryParse', () => {
114114
const result = await parser.process(input);
115115
expect(result.contents).to.equal(expected);
116116
});
117+
118+
it('will wrap following story-code blocks', async () => {
119+
const input = [
120+
'```js preview-story',
121+
'export const foo = () => {};',
122+
'```',
123+
'',
124+
'```swift story-code',
125+
'CODE for iOS',
126+
'```',
127+
'',
128+
'```xml story-code',
129+
'CODE for Android',
130+
'```',
131+
].join('\n');
132+
133+
const expected = [
134+
'<mdjs-preview mdjs-story-name="foo">',
135+
'',
136+
'',
137+
'',
138+
'<pre><code class="language-js">export const foo = () => {};',
139+
'</code></pre>',
140+
'<pre><code class="language-swift">CODE for iOS',
141+
'</code></pre>',
142+
'<pre><code class="language-xml">CODE for Android',
143+
'</code></pre>',
144+
'',
145+
'',
146+
'',
147+
'</mdjs-preview>',
148+
'',
149+
].join('\n');
150+
151+
const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
152+
const result = await parser.process(input);
153+
expect(result.contents).to.equal(expected);
154+
});
155+
156+
it('will wrap following story-code blocks also for html stories', async () => {
157+
const input = [
158+
'```html preview-story',
159+
'<my-el></my-el>',
160+
'```',
161+
'',
162+
'```swift story-code',
163+
'CODE for iOS',
164+
'```',
165+
'',
166+
'```xml story-code',
167+
'CODE for Android',
168+
'```',
169+
].join('\n');
170+
171+
const expected = [
172+
'<mdjs-preview mdjs-story-name="HtmlStory0">',
173+
'',
174+
'',
175+
'',
176+
'<pre><code class="language-html">&#x3C;my-el>&#x3C;/my-el>',
177+
'</code></pre>',
178+
'<pre><code class="language-swift">CODE for iOS',
179+
'</code></pre>',
180+
'<pre><code class="language-xml">CODE for Android',
181+
'</code></pre>',
182+
'',
183+
'',
184+
'',
185+
'</mdjs-preview>',
186+
'',
187+
].join('\n');
188+
189+
const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
190+
const result = await parser.process(input);
191+
expect(result.contents).to.equal(expected);
192+
});
193+
194+
it('will wrap only following story-code blocks', async () => {
195+
const input = [
196+
'```js preview-story',
197+
'export const foo = () => {};',
198+
'```',
199+
'```swift story-code',
200+
'CODE for iOS',
201+
'```',
202+
'# hey',
203+
'```swift story-code',
204+
'SHOULD BE OUTSIDE',
205+
'```',
206+
'```js preview-story',
207+
'export const foo2 = () => {};',
208+
'```',
209+
'```xml story-code',
210+
'CODE for Android',
211+
'```',
212+
].join('\n');
213+
214+
const expected = [
215+
'<mdjs-preview mdjs-story-name="foo">',
216+
'',
217+
'',
218+
'',
219+
'<pre><code class="language-js">export const foo = () => {};',
220+
'</code></pre>',
221+
'<pre><code class="language-swift">CODE for iOS',
222+
'</code></pre>',
223+
'',
224+
'',
225+
'',
226+
'</mdjs-preview>',
227+
'<h1>hey</h1>',
228+
'<pre><code class="language-swift">SHOULD BE OUTSIDE',
229+
'</code></pre>',
230+
'<mdjs-preview mdjs-story-name="foo2">',
231+
'',
232+
'',
233+
'',
234+
'<pre><code class="language-js">export const foo2 = () => {};',
235+
'</code></pre>',
236+
'<pre><code class="language-xml">CODE for Android',
237+
'</code></pre>',
238+
'',
239+
'',
240+
'',
241+
'</mdjs-preview>',
242+
'',
243+
].join('\n');
244+
245+
const parser = unified().use(markdown).use(mdjsStoryParse).use(html);
246+
const result = await parser.process(input);
247+
expect(result.contents).to.equal(expected);
248+
});
117249
});

‎packages/mdjs-preview/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Preview element for mdjs
22

3-
For docs please see our homepage [https://rocket.modern-web.dev/docs/markdown-javascript/preview/](https://rocket.modern-web.dev/docs/markdown-javascript/preview/).
3+
[=> See Source <=](../../docs/docs/markdown-javascript/preview.md)

‎packages/mdjs-preview/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"./define": "./src/define/define.js"
2121
},
2222
"scripts": {
23+
"prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
2324
"debug": "cd ../../ && npm run debug -- --group mdjs-preview",
2425
"test": "npm run test:web",
2526
"test:web": "cd ../../ && npm run test:web -- --group mdjs-preview"

0 commit comments

Comments
 (0)