Fix out of order embedding of files

- added double quote as attribute marker
- fixed inject order of embedded files
- added e2e test covering order of embedded files

Signed-off-by: Martin Mihálek <aenniw@gmail.com>

Author: aenniw

cypress/integration/sidebar/config.spec.js

@@ -326,6 +326,7 @@ context('sidebar.configurations', () => {
   const embedFilesIds = [
     'embedded-file-type',
     'embedded-code-fragments',
+    'embedded-file-order',
     'tag-attribute',
     'the-code-block-highlight',
   ];
@@ -336,7 +337,7 @@ context('sidebar.configurations', () => {
       cy.get(`a.section-link[href='#/embed-files?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500);
+          cy.wait(750);
           cy.matchImageSnapshot();
         });
     });

cypress/live.server.js

@@ -7,7 +7,16 @@ console.log('[e2e tests] : args passed to live server', args)
 const params = {
   port: args[0] || 3000,
   root: args[1] || fixturePath,
-  open: false
+  open: false,
+  middleware: [
+    function(req, res, next) {
+      if (req.url === '/_media/delayed.md') {
+        setTimeout(next, 3000);
+      } else {
+        next();
+      }
+    },
+  ],
   // NoBrowser: true
-}
-LiveServer.start(params)
+};
+LiveServer.start(params)

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=embedded-code-fragments.snap.png

@@ -26,9 +26,8 @@
 
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'
 addMatchImageSnapshotCommand({
-  failureThreshold: 10.0,
+  failureThreshold: 0.10,
   failureThresholdType: 'percent',
-  customDiffConfig: { threshold: 10.0 },
   capture: 'viewport',
   timeout: '60000'
 })

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=embedded-file-order.snap.png

@@ -0,0 +1,7 @@
+- This is from the `delayed.md`
+
+```bash
+sleep 1000
+echo delayed
+exit 0
+```

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=embedded-file-type.snap.png

@@ -0,0 +1,7 @@
+- This is from the `no-delay.md`
+
+```bash
+sleep 0 
+echo non-delayed
+exit 0
+```

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=tag-attribute.snap.png

@@ -53,6 +53,17 @@ Example:
 
 [filename](_media/example.js ':include :type=code :fragment=demo')
 
+## Embedded file order
+
+Then the content of `delayed.md` `non-delayed.md` and will be displayed directly here in correct order
+
+[delayed](_media/delayed.md ':include')
+
+---
+
+[non-delayed](_media/non-delayed.md ':include')
+
+You can check the original content for [delayed.md](_media/delayed.md ':ignore'), [non-delayed.md](_media/non-delayed.md ':ignore').
 
 ## Tag attribute
 

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=the-code-block-highlight.snap.png

@@ -2,12 +2,13 @@ import { get } from '../fetch/ajax';
 import { merge } from '../util/core';
 import stripIndent from 'strip-indent';
 
+const INCLUDE_COMPONENT = '__include__';
 const cached = {};
 
 function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
   let token;
   let step = 0;
-  let count = 1;
+  let count = 0;
 
   if (!embedTokens.length) {
     return cb({});
@@ -65,7 +66,7 @@ function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
         }
 
         cb({ token, embedToken });
-        if (++count >= step) {
+        if (++count >= embedTokens.length) {
           cb({});
         }
       };
@@ -83,6 +84,23 @@ function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
   }
 }
 
+function expandInclude(tokens) {
+  if (!tokens) {
+    return tokens;
+  }
+
+  const expandedTokens = [];
+  tokens.forEach(e => {
+    if (e.type === INCLUDE_COMPONENT && e.components) {
+      e.components.forEach(c => expandedTokens.push(c));
+    } else {
+      expandedTokens.push(e);
+    }
+  });
+
+  return expandedTokens;
+}
+
 export function prerenderEmbed({ compiler, raw = '', fetch }, done) {
   let hit = cached[raw];
   if (hit) {
@@ -117,18 +135,19 @@ export function prerenderEmbed({ compiler, raw = '', fetch }, done) {
     }
   });
 
-  let moveIndex = 0;
   walkFetchEmbed({ compile, embedTokens, fetch }, ({ embedToken, token }) => {
     if (token) {
-      const index = token.index + moveIndex;
-
       merge(links, embedToken.links);
 
-      tokens = tokens
-        .slice(0, index)
-        .concat(embedToken, tokens.slice(index + 1));
-      moveIndex += embedToken.length - 1;
+      tokens = tokens.slice(0, token.index).concat(
+        {
+          type: INCLUDE_COMPONENT,
+          components: embedToken,
+        },
+        tokens.slice(token.index + 1)
+      );
     } else {
+      tokens = expandInclude(tokens);
       cached[raw] = tokens.concat();
       tokens.links = cached[raw].links = links;
       done(tokens);

cypress/support/commands.js

@@ -3,8 +3,8 @@ export function getAndRemoveConfig(str = '') {
 
   if (str) {
     str = str
-      .replace(/^'/, '')
-      .replace(/'$/, '')
+      .replace(/^("|')/, '')
+      .replace(/("|')$/, '')
       .replace(/(?:^|\s):([\w-]+:?)=?([\w-]+)?/g, (m, key, value) => {
         if (key.indexOf(':') === -1) {
           config[key] = (value && value.replace(/"/g, '')) || true;