fixed #120, fixed #83: strips comments from template to avoid issues;…

… etc.
matthew-ia · May 8, 2023 · 6dadd99 · 6dadd99
1 parent 7588646
commit 6dadd99
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 33 deletions.
diff --git a/lib/core/bundle.js b/lib/core/bundle.js
@@ -70,10 +70,15 @@ export async function getDeps(input, config) {
 }
 
 export async function build(input, config, type = 'page') {
-  const ssr = (type === 'page' || type === 'template');
+  const template = (type === 'page' || type === 'template');
   const requiredCompilerOptions = {
-    generate: ssr ? 'ssr' : 'dom', 
-    hydratable: ssr ? false : true, 
+    generate: template ? 'ssr' : 'dom', 
+    hydratable: template ? false : true, 
+    preserveComments: template 
+      ? false
+      : config.svelte.compilerOptions.preserveComments
+        ? config.svelte.compilerOptions.preserveComments
+        : true,
   }
 
   let bundle;
@@ -95,7 +100,6 @@ export async function build(input, config, type = 'page') {
           ...preprocessors,
         ],
         compilerOptions: {
-          preserveComments: true,
           preserveWhitespace: true,
           ...config.svelte.compilerOptions,
           ...requiredCompilerOptions,

diff --git a/lib/core/render/prerender.js b/lib/core/render/prerender.js
@@ -148,7 +148,7 @@ export async function processPage(content, page, _cayo, logger) {
         log: `Entry file '${entryScriptSrc}' does not exist.`,
       }
       // Remove the entry file script because the file doesn't exist
-      entryScript.remove();
+      entryScript?.remove();
     } else {
       entry.path = absoluteEntrySrcPath;
       _cayo.stats.dependencies.pages[page.sourcePath].add(absoluteEntrySrcPath);
@@ -164,7 +164,7 @@ export async function processPage(content, page, _cayo, logger) {
       }
     } else {
       // Remove the entry point script tag because the page doesn't need any JS
-      entryScript.remove();
+      entryScript?.remove();
     }
   }
 
@@ -209,22 +209,37 @@ export async function processPage(content, page, _cayo, logger) {
   let processedHTML = '';
   if (tags.doctype) {
     processedHTML += tags.doctype;
-  }  
+  } 
+  console.log(tags);
+
+  let html; // html element parts (open/close tag, inner)
+  let head;
   if (tags.html) {
-    processedHTML += document.documentElement.outerHTML;
+    ({groups: html} = document.documentElement.outerHTML
+      .match(/(?<open><html[\s\S]*?>)(?<innerHTML>[\s\S]*)(?<close><\/html>)/)
+    )
+    processedHTML += html.open;
+  } 
+  if (tags.head) {
+    ({groups: head} = document.head.outerHTML
+      .match(/(?<open><head[\s\S]*?>)(?<innerHTML>[\s\S]*)(?<close><\/head>)/)
+    )
+    console.log('yerrr', tags.head.innerHTML);
+    console.log(head);
+    // processedHTML += '<!-- user head -->' + head.open + tags.head.innerHTML + head.close + '<!-- user head end-->';
+    // processedHTML += head.open + tags.head.innerHTML + head.close;
+    processedHTML += document.head.outerHTML;
   } else {
-    if (tags.head) {
-      processedHTML += document.head.outerHTML;
-    } else {
-      processedHTML += document.head.innerHTML;
-    }
-
-    if (tags.body) {
-      processedHTML += document.body.outerHTML;
-    } else {
-      processedHTML += document.body.innerHTML;
-    }
+    processedHTML += document.head.innerHTML;
+  }
+  if (tags.body) {
+    processedHTML += document.body.outerHTML;
+  } else {
+    processedHTML += document.body.innerHTML;
   }
+  if (tags.html) {
+    processedHTML += html.close;
+  } 
 
   return { 
     html: processedHTML, 
@@ -237,14 +252,14 @@ export async function processPage(content, page, _cayo, logger) {
 }
 
 function tagsExist(source) {
-  const doctype = source.match(/(?<!<!--\s*)\<!DOCTYPE\s\w*\>/g);
-  const head = source.match(/(?<!<!--\s*)\<head[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/head\>/g);
-  const body = source.match(/(?<!<!--\s*)\<body[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/body\>/g);
-  const html = source.match(/(?<!<!--\s*)\<html[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/html\>/g);
+  const doctype = source.match(/<!DOCTYPE[\s\S]*>/);
+  const head = source.match(/<head[\s\S]*>(?<innerHTML>[\s\S]*)<\/head>/);
+  const body = source.match(/<body[\s\S]*>(?<innerHTML>[\s\S]*)<\/body>/);
+  const html = source.match(/<html[\s\S]*>(?<innerHTML>[\s\S]*)<\/html>/);
   return {
     doctype: doctype === null ? false : doctype,
-    head: head === null ? false : true,
-    body: body === null ? false : true,
-    html: html === null ? false : true,
+    html: html === null ? false : html.groups,
+    head: head === null ? false : head.groups,
+    body: body === null ? false : body.groups,
   };
 }
diff --git a/lib/core/render/renderer.js b/lib/core/render/renderer.js
@@ -37,19 +37,15 @@ export class Renderer {
     // https://stackoverflow.com/questions/9423722/string-replace-weird-behavior-when-using-dollar-sign-as-replacement
     return {
       html: this.template.html
-        // Ignore placeholders wrapped in HTML comments
-        .replace(/<!--\s*%cayo\.\w+%[\s\S]*?(-->)/g, '')
+        // Strip placeholders wrapped in HTML comments
+        .replace(/<!--[\s\S]?%cayo\.\w+%[\s\S]*?(-->)/g, '')
         // Inject markup in the cayo placeholders
         .replace('%cayo.title%', () => !head.includes('<title>') ? title() : '')
         .replace('%cayo.head%', () => head)
         .replace('%cayo.body%', () => html)
         .replace('%cayo.css%', () => cssElements)
-        // .replace(/(?<!<!--[\s\S]*)%cayo\.title%/g, () => !head.includes('<title>') ? title() : '')
-        // .replace(/(?<!<!--[\s\S]*)%cayo\.head%/g, () => head)
-        // .replace(/(?<!<!--[\s\S]*)%cayo\.body%/g, () => html)
-        // .replace(/(?<!<!--[\s\S]*)%cayo\.css%/g, () => cssElements)
         // Vite needs the entry file in this format
-        .replace(/(?<!<!--[\s\S]*)%cayo\.script%/g, () => `<script type="module" src="./index.js"></script>`), 
+        .replace('%cayo.script%', () => `<script type="module" src="./index.js"></script>`), 
       css,
     }
   }