cayo 1.1.2 → 1.2.0

package/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,

package/lib/core/render/prerender.js

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 import { JSDOM } from 'jsdom';
+import chalk from 'chalk';
 import { Renderer } from './renderer.js';
 import { compileCayos } from '../compile/cayos.js';
 import { generateCayoRuntime, generateRuntimeIssuesScript } from '../codegen.js';
@@ -116,7 +117,16 @@ export async function processPage(content, page, _cayo, logger) {
     }
   }
   const cayoAssetsCssMarker = document.querySelector('link[data-cayo-assets-css]');
-  cayoAssetsCssMarker.outerHTML = cayoAssetCssElements;
+  if (cayoAssetsCssMarker && cayoAssetsCssMarker.outerHTML) {
+    cayoAssetsCssMarker.outerHTML = cayoAssetCssElements;
+  } else {
+    if (cayoAssetCssElements) {
+      logger.log.info(
+        chalk.yellow.bold('Warning') + chalk.yellow(': No %cayo.css% found in template, but there is CSS used in source files.'),
+        { timestamp: true, clear: false, }
+      );
+    }
+  }
 
   // Get user-specified entry placeholder
   const entryScriptPlaceholder = document.querySelector('script[data-cayo-entry]');
@@ -138,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);
@@ -154,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();
     }
   }
 
@@ -199,22 +209,32 @@ export async function processPage(content, page, _cayo, logger) {
   let processedHTML = '';
   if (tags.doctype) {
     processedHTML += tags.doctype;
-  }  
+  }
+
+  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>)/)
+    )
+    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, 
@@ -227,14 +247,14 @@ export async function processPage(content, page, _cayo, logger) {
 }
 
 function tagsExist(source) {
-  const doctype = source.match(/\<!DOCTYPE\s\w*\>/g);
-  const head = source.match(/\<head[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/head\>/g);
-  const body = source.match(/\<body[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/body\>/g);
-  const html = source.match(/\<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,
   };
 }

package/lib/core/render/renderer.js

@@ -37,9 +37,9 @@ export class Renderer {
     // https://stackoverflow.com/questions/9423722/string-replace-weird-behavior-when-using-dollar-sign-as-replacement
     return {
       html: this.template.html
-      // FIXME#83: this regex is bad; accidentally removes elements like head
-      // Ignore placeholders wrapped in HTML comments
-      // .replace(/<!--[^]*\%cayo\.\w+\%[^]*-->/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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cayo",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "start": "node cayo dev --projectRoot test",