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

Author: aenniw

cypress/inline/embed-order.md

@@ -0,0 +1,11 @@
+## 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').

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, 250);
+      } else {
+        next();
+      }
+    },
+  ],
   // NoBrowser: true
-}
-LiveServer.start(params)
+};
+LiveServer.start(params)

cypress/setup.js

@@ -23,6 +23,13 @@ const setup = async () => {
   // 1
   const docsPath = path.join(process.cwd(), './docs')
   const fixtureDocsPath = path.join(__dirname, './fixtures/docs')
+  const embeddedFiles = [
+    {
+      tag: '## Tag attribute',
+      srcFile: 'embed-order.md',
+      dstFile: 'embed-files.md',
+    },
+  ];
 
   // 1.1
   console.log('[cypress test docs] Copying the docs --> cypress/fixtures/docs')
@@ -38,6 +45,21 @@ const setup = async () => {
     copyDir.sync(fromPath, toPath)
   })
 
+  // 1.3
+  embeddedFiles.forEach(({ tag, srcFile, dstFile }) => {
+    const content = fs.readFileSync(`${__dirname}/inline/${srcFile}`).toString();
+    const originalFile = `${fixtureDocsPath}/${dstFile}`;
+
+    let originalContent = fs
+      .readFileSync(originalFile)
+      .toString()
+      .split('\n');
+    const tagLine = originalContent.findIndex(l => l.indexOf(tag) >= 0);
+    originalContent.splice(tagLine, 0, content);
+
+    fs.writeFileSync(originalFile, originalContent.join('\n'));
+  });
+
   // 2
   console.log(
     '[cypress test docs] Replacing content the tpl/index.html --> cypress/fixtures/docs/index.html'

cypress/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #configurationid=externallinkrel.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-code-fragments.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-order.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=embedded-file-type.snap.png

@@ -1,13 +1,14 @@
+import stripIndent from 'strip-indent';
 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({});
@@ -72,7 +73,7 @@ function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
         }
 
         cb({ token, embedToken });
-        if (++count >= step) {
+        if (++count >= embedTokens.length) {
           cb({});
         }
       };
@@ -90,6 +91,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) {
@@ -124,18 +142,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/snapshots/sidebar/config.spec.js/sidebar.configurations -- go to #embed-filesid=tag-attribute.snap.png

@@ -23,8 +23,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;