cayo 0.9.5 → 0.9.9

package/lib/codegen.js

@@ -45,7 +45,9 @@ export function generateCayoRuntime(components, config) {
 function generateRender(contents) {
   return (
 `
-export default function render() {
+export default function render(cb) {
+  var target = function (node) { return node; }
+  if (cb) target = cb;
 ${contents}
 }
 `
@@ -68,7 +70,7 @@ export function generateComponentInstance(cayoId, componentName) {
   return (
 ` 
   new ${componentName}({
-    target: document.querySelector('[data-cayo-id="${cayoId}"]'),
+    target: target(document.querySelector('[data-cayo-id="${cayoId}"]')),
     hydrate: true,
     props: getProps('${cayoId}'),
   });

package/lib/components/Cayo.svelte

@@ -19,6 +19,7 @@
   const json = JSON.stringify($$restProps);
 </script>
 
-<div data-cayo-id={name ? `${name}-${hash()}` : ''} data-cayo-props={json}><slot/></div>
-<slot/>
+<div data-cayo-id={name ? `${name}-${hash()}` : ''} data-cayo-props={json}>
+  <slot/>
+</div>
 

package/lib/renderer.js

@@ -28,16 +28,20 @@ export class Renderer {
       cssTag += `<style>${css.code}</style>`;
     }
 
+    // NOTE: Q: why the `() => str` for 2nd replacement arg?
+    //       A: In case there's dollar signs in that there string
+    // 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(/<!--[^]*\%cayo\.\w+\%[^]*-->/g, '') 
         // Replace placeholders in template
-        .replace('%cayo.title%', !head.includes('<title>') ? `<title>${title}</title>` : '')
-        .replace('%cayo.head%', head)
-        .replace('%cayo.body%', html)
-        .replace('%cayo.css%', cssTag)
-        .replace('%cayo.script%', `<script type="module" src="./index.js"></script>`)
+        .replace('%cayo.title%', () => !head.includes('<title>') ? `<title>${title}</title>` : '')
+        .replace('%cayo.head%', () => head)
+        .replace('%cayo.body%', () => html)
+        .replace('%cayo.css%', () => cssTag)
+        .replace('%cayo.script%', () => `<script type="module" src="./index.js"></script>`)
       ,
       css: css,
     }

package/lib/utils.js

@@ -61,7 +61,7 @@ export async function getComponentModulePaths(srcPath) {
 
 export async function createPageManifest(pagesPath, outDir, srcPath) {
   const pagePaths = await getPageModulePaths(pagesPath);
-  const nonCayoComponentPaths = await fg([path.resolve(srcPath, './components/**/*!([.cayo]).svelte')]);
+  const componentPaths = await fg([path.resolve(srcPath, './components/**/*.svelte')]);
   let importPages = `import { createRequire } from 'module';\n`
   importPages += `const require = createRequire(import.meta.url);\n`
   importPages += `require('svelte/register');\n`;
@@ -75,7 +75,7 @@ export async function createPageManifest(pagesPath, outDir, srcPath) {
   })
   importPages += '}\n';
 
-  nonCayoComponentPaths.forEach((path) => {
+  componentPaths.forEach((path) => {
     importPages += `delete require.cache['${path}'];\n`;
   });
   

package/package.json

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

package/test/src/components/Test.cayo.svelte

@@ -0,0 +1,5 @@
+<script>
+
+</script>
+ok
+<!-- <slot></slot> -->

package/test/src/index.js

@@ -1,5 +1,17 @@
 // console.log("I'm main");
+
+const cb = (node) => { 
+  console.log('im side effecting');
+  console.log(node);
+  return node; 
+}
+
+function replaceContents ( node ) {
+  node.innerHTML = '';
+  return node;
+}
+
 import { default as renderComponents } from './cayo-runtime.js';
 document.addEventListener('DOMContentLoaded', () => {
-  renderComponents();
+  renderComponents(replaceContents);
 });

package/test/src/pages/index.svelte

@@ -16,6 +16,8 @@ I'm index howdy ok<br>
 <a href="/hey/" class="red">Hey</a>
 <a href="/some/page/" class="red">Some</a>
 
+<Cayo name="Test" object={{ some: 'what?$staticlink$'}}><div>Default Content</div></Cayo>
+
 <Cayo name="Cool" beans='ayo'>Whaaat</Cayo>
 <Cayo name="Cool" beans='beeeeaaaaasnnss' />
 <Cayo name="Cool" beans='NOT BEANS' />