cayo 1.1.2 → 1.2.1

package/dist/cayo.svelte.js

@@ -57,13 +57,16 @@ const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 
 		return value;
 	}
-	const json = JSON.stringify({ ...$$restProps }, replacer);
+
+	// const props = toSource({...$$restProps})
+	const props = JSON.stringify({ ...$$restProps }, replacer);
+
 	const warnings = getWarnings(src, badProps);
 
 	const cayoInstanceData = {
-		'data-cayo-id': '',
 		'data-cayo-src': !warnings.invalidSrc ? `${src}` : '',
-		'data-cayo-props': json
+		'data-cayo-id': '', // will get set during prerender process based on the src
+		
 	};
 
 	if (warnings) {
@@ -72,7 +75,8 @@ const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 
 	if ($$props.src === void 0 && $$bindings.src && src !== void 0) $$bindings.src(src);
 
-	return `<div${add_attribute("data-cayo-id", cayoInstanceData['data-cayo-id'], 0)}${add_attribute("data-cayo-src", cayoInstanceData['data-cayo-src'], 0)}${add_attribute("data-cayo-props", cayoInstanceData['data-cayo-props'], 0)}${add_attribute("data-cayo-warn", cayoInstanceData['data-cayo-warn'], 0)}>
+	return `<div${add_attribute("data-cayo-id", cayoInstanceData['data-cayo-id'], 0)}${add_attribute("data-cayo-src", cayoInstanceData['data-cayo-src'], 0)}${add_attribute("data-cayo-warn", cayoInstanceData['data-cayo-warn'], 0)}>
+  ${`<script data-cayo-props type="application/json">${props}</script>`}
   ${slots.default ? slots.default({}) : ``}
 </div>`;
 });

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/codegen.js

@@ -6,7 +6,8 @@ export function generateGetProps() {
   return (
 `
 function getProps(cayoElement) {
-  const json = cayoElement.dataset.cayoProps;
+  const json = cayoElement.querySelector('[data-cayo-props]').innerHTML;
+  console.log('json', json);
   return JSON.parse(json);
 }
 `

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';
@@ -56,10 +57,11 @@ export async function processPage(content, page, _cayo, logger) {
   for (const el of document.querySelectorAll('[data-cayo-src]')) {
     let src = el.dataset.cayoSrc;
     if (src !== '') {
+      // Generate an ID for the Cayo
       const { id, name } = generateCayoComponentId(src);
       cayoIds.push(id);
       el.dataset.cayoId = id;
-
+      
       // Get warnings added by the Cayo component during compile time
       if (el.dataset.cayoWarn && el.dataset.cayoWarn !== '{}') {
         warnings.cayos[id] = JSON.parse(el.dataset.cayoWarn);
@@ -116,7 +118,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 +149,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 +165,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 +210,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 +248,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.1",
   "type": "module",
   "scripts": {
     "start": "node cayo dev --projectRoot test",
@@ -43,7 +43,8 @@
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-svelte": "^7.1.0",
     "svelte": "^3.49.0",
-    "vite": "^3.1.2",
+    "tosource": "^2.0.0-alpha.3",
+    "vite": "^4.3.9",
     "yargs-parser": "^20.2.9",
     "zod": "^3.10.3"
   }

package/src/cayo.svelte

@@ -18,23 +18,24 @@
     return value;
   };
 
-  const json = JSON.stringify({...$$restProps}, replacer);
+  // const props = toSource({...$$restProps})
+  const props = JSON.stringify({...$$restProps}, replacer);
   const warnings = getWarnings(src, badProps);
   const cayoInstanceData = {
-    'data-cayo-id': '',
     'data-cayo-src': !warnings.invalidSrc ? `${src}` : '',  
-    'data-cayo-props': json,
+    'data-cayo-id': '', // will get set during prerender process based on the src
   };
   if (warnings) {
     cayoInstanceData['data-cayo-warn'] = JSON.stringify(warnings);
   }
 </script>
+
 <div 
   data-cayo-id={cayoInstanceData['data-cayo-id']}
   data-cayo-src={cayoInstanceData['data-cayo-src']}
-  data-cayo-props={cayoInstanceData['data-cayo-props']}
   data-cayo-warn={cayoInstanceData['data-cayo-warn']}
 >
+  {@html `<script data-cayo-props type="application/json">${props}</script>`}
   <slot/>
 </div>