cayo 1.2.0 → 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/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

@@ -57,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cayo",
-  "version": "1.2.0",
+  "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>