feat: allow hiding html code blocks (#113)

Author: bahmutov

README.md

@@ -94,6 +94,22 @@ You can include multiple HTML blocks in each fiddle
 
     <!-- fiddle-end -->
 
+### Hide HTML code block
+
+You can hide the HTML code block from the source view, yet still have it part of the live app by adding "hide" meta after the `html`
+
+    <!-- fiddle Hide HTML code block -->
+
+    ```html hide
+    <div id="greeting">Hello</div>
+    ```
+
+    ```js
+    cy.get('div#greeting').should('have.text', 'Hello')
+    ```
+
+    <!-- fiddle-end -->
+
 ### Suites
 
 To create suites of tests, use `/` to separate the suite name from the test name. Tests with the same suite name are grouped together automatically.

cypress/integration/extract-fiddles.js

@@ -8,11 +8,17 @@ chai.config.truncateThreshold = 1000
 
 /** @type {string} */
 let fiddleCommentMarkdown
+/** @type {string} */
+let fiddleHtmlBlocksMarkdown
 
 before(() => {
   cy.readFile('cypress/integration/fiddle-comment.md').then(
     (md) => (fiddleCommentMarkdown = md),
   )
+
+  cy.readFile('cypress/integration/multiple-html-blocks.md').then(
+    (md) => (fiddleHtmlBlocksMarkdown = md),
+  )
 })
 
 describe('extractFiddles', () => {
@@ -130,4 +136,55 @@ describe('extractFiddles', () => {
       ],
     })
   })
+
+  it('extracts html blocks', () => {
+    const fiddles = extractFiddles(fiddleHtmlBlocksMarkdown)
+    expect(fiddles)
+      .to.have.property('Multiple HTML code blocks')
+      .and.to.be.an('array')
+      .and.to.have.length(2)
+    const [fiddle1, fiddle2] = fiddles['Multiple HTML code blocks']
+    expect(fiddle1, 'first fiddle').to.deep.equal({
+      name: 'Multiple HTML code blocks',
+      test: stripIndent`
+        cy.get('div#greeting').should('have.text', 'Hello')
+        cy.get('div#name').should('have.text', 'World')
+      `,
+      html: [
+        {
+          source: '<div id="greeting">Hello</div>',
+          hide: false,
+        },
+        {
+          source: '<div id="name">World</div>',
+          hide: false,
+        },
+      ],
+      commonHtml: null,
+      only: false,
+      skip: false,
+      export: false,
+    })
+    expect(fiddle2, 'second fiddle').to.deep.equal({
+      name: 'Hide an HTML code block',
+      test: stripIndent`
+        cy.get('div#greeting').should('have.text', 'Hello')
+        cy.get('div#name').should('have.text', 'World')
+      `,
+      html: [
+        {
+          source: '<div id="greeting">Hello</div>',
+          hide: false,
+        },
+        {
+          source: '<div id="name">World</div>',
+          hide: true,
+        },
+      ],
+      commonHtml: null,
+      only: false,
+      skip: false,
+      export: false,
+    })
+  })
 })

cypress/integration/multiple-html-blocks.md

@@ -18,3 +18,22 @@ cy.get('div#name').should('have.text', 'World')
 ```
 
 <!-- fiddle-end -->
+
+<!-- fiddle Hide an HTML code block -->
+
+```html
+<div id="greeting">Hello</div>
+```
+
+Another HTML code block that is live but not in the source view
+
+```html hide
+<div id="name">World</div>
+```
+
+```js
+cy.get('div#greeting').should('have.text', 'Hello')
+cy.get('div#name').should('have.text', 'World')
+```
+
+<!-- fiddle-end -->

src/markdown-utils.js

@@ -270,9 +270,10 @@ function extractFiddles(md) {
       .filter(isHtmlCodeBlock)
       .filter(shouldIncludeBlock)
       .map((htmlCodeBlock) => {
+        const meta = htmlCodeBlock.meta || ''
         return {
           source: htmlCodeBlock.value,
-          hide: false,
+          hide: meta.includes('hide'),
         }
       })
     // console.log(htmlMaybe)