npm - cayo - Versions diffs - 1.3.3 → 1.5.0 - Mend

cayo 1.3.3 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +119 -23
package/dist/cayo.svelte.js +23 -4
package/dist/entry.svelte.js +1 -1
package/dist/index.js +1 -0
package/docs/config-reference.md +33 -0
package/lib/core/bundle.js +65 -23
package/lib/core/render/prerender.js +1 -1
package/lib/core/render/renderer.js +40 -10
package/lib/preprocessors/cayo-component.js +23 -0
package/lib/preprocessors/index.js +10 -0
package/package.json +2 -1
package/scripts/build.js +2 -0
package/src/cayo.svelte +20 -3
package/src/entry.svelte +1 -1
package/template/cayo.config.js +9 -1
package/template/src/__template.svelte +5 -5
package/template/src/pages/index.svelte +14 -1

package/README.md CHANGED Viewed

@@ -143,20 +143,23 @@ The Template file is required, and used to render all of your pages. The output
 This file is a Svelte component, so you can also import other Svelte components or add rendering logic. For example, you could render different markup wrapping your pages depending on the environment mode like `'development'` or `'production'` (see [config example](docs//config-reference.md#conditional-config)).
+> **Template Placeholder Syntax**<br>
+> Cayo uses HTML comment placeholders: `<!--[cayo-css]-->` for template injection. The `%cayo.*%` syntax is deprecated. See [placeholder syntax guide](#template-placeholder-syntax) below.
 > **Note**<br>
-> Despite being a Svelte component, the Template file does not support the `<slot>` element, because it itself is prerendered _before_ it is used to prerender page components. The placeholder `%cayo.body%` replaces the basic usage for `<slot>`.
+> Despite being a Svelte component, the Template file does not support the `<slot>` element, because it itself is prerendered _before_ it is used to prerender page components. The placeholder `<!--[cayo-body]-->` replaces the basic usage for `<slot>`.
 Template files support the following placeholders:
-- `%cayo.body%` – the content of a page. Think of this as the `<slot>` of the Template Svelte component
+- `<!--[cayo-body]-->` – the content of a page. Think of this as the `<slot>` of the Template Svelte component
-- `%cayo.script%` – where your [entry](#entries) for a page will be imported. This is needed if a page is to render a Cayo Component, but is otherwise optional
+- `<!--[cayo-script]-->` – where your [entry](#entries) for a page will be imported. This is needed if a page is to render a Cayo Component, but is otherwise optional
-- `%cayo.css%` – where CSS will be added (as `<link src="style.css">` or `<style>...</style>` depending on your [CSS config option](docs/config-reference.md#cssinternal))
+- `<!--[cayo-css]-->` – where CSS will be added (as `<link src="style.css">` or `<style>...</style>` depending on your [CSS config option](docs/config-reference.md#cssinternal))
-- `%cayo.title%` – add a default title to the page only if one is not already set on a specific page (via [`<svelte:head>`](https://svelte.dev/docs#template-syntax-svelte-head) or other some other method). The default title will be generated using the page's filename (e.g., `page.svelte` will have the title `Page`). This placeholder is optional
+- `<!--[cayo-title]-->` – add a default title to the page only if one is not already set on a specific page (via [`<svelte:head>`](https://svelte.dev/docs#template-syntax-svelte-head) or other some other method). The default title will be generated using the page's filename (e.g., `page.svelte` will have the title `Page`). This placeholder is optional
-- `%cayo.head%` – `<link>` and `<script>` elements needed by a page, plus any `<svelte:head>` content
+- `<!--[cayo-head]-->` – `<link>` and `<script>` elements needed by a page, plus any `<svelte:head>` content
 #### Example
 Technically all of the placeholders are optional, and don't have to be in any particular place within your markup.
@@ -166,13 +169,13 @@ Technically all of the placeholders are optional, and don't have to be in any pa
 <!DOCTYPE html>
 <html>
   <head>
-    %cayo.head%
-    %cayo.title%
-    %cayo.css%
+    <!--[cayo-head]-->
+    <!--[cayo-title]-->
+    <!--[cayo-css]-->
   </head>
   <body>
-    %cayo.body%
-    %cayo.script%
+    <!--[cayo-body]-->
+    <!--[cayo-script]-->
   </body>
 </html>
 ```
@@ -183,11 +186,35 @@ Your template doesn't even need to be a valid HTML document—you could be outpu
 <!-- src/__template.svelte -->
 <!-- No html, head, or body elements... and that's okay! -->
 <div>something I want on every page</div>
-%cayo.script%
+<!--[cayo-script]-->
+<!--[cayo-css]-->
+<!--[cayo-body]-->
+```
+#### Template Placeholder Syntax
+Cayo supports the following placeholder syntaxes:
+**Recommended syntax (HTML comments):**
+```html
+<!--[cayo-title]-->
+<!--[cayo-head]-->
+<!--[cayo-css]-->
+<!--[cayo-body]-->
+<!--[cayo-script]-->
+```
+**Deprecated syntax:**
+```html
+%cayo.title%
+%cayo.head%
 %cayo.css%
 %cayo.body%
+%cayo.script%
 ```
+The HTML comment syntax is reliable since Cayo configures Svelte to preserve comments during SSR compilation. The `%cayo.*%` syntax is deprecated but still supported for backward compatibility.
 ### .cayo
 Once you run your project, you'll see directory named `.cayo` in your project's root. This directory is used for Cayo's internal output. Its contents are served during `cayo dev`, and used to build your project during `cayo build`.
@@ -225,6 +252,39 @@ More on [Svelte options](docs/config-reference.md#svelte-options), [Vite options
 > **Warning**<br>
 > Vite plugins will be passed to Cayo, but it's possible that certain plugins may break Cayo if they deal with handling the input differently than vanilla Vite or generate additional output files. Cayo acts like a plugin itself, by handling your source files and transforming them into files that vanilla Vite expects (e.g., the built-in "file-based router" is similar to Vite multi-page plugins).
+### Cayo Preprocessors
+To use the improved `component` prop syntax with Cayo components (instead of just string paths), you need to configure the `cayoPreprocess` preprocessors:
+```js
+// cayo.config.js
+import { cayoPreprocess } from 'cayo/build';
+export default {
+  svelte: {
+    preprocess: [
+      cayoPreprocess(),
+      // ...other preprocessors
+    ]
+  }
+}
+```
+This preprocessor enhances Cayo's functionality by transforming imported component objects into the appropriate paths that Cayo can resolve. It enables the following syntax:
+```svelte
+<!-- Before: String-based approach -->
+<Cayo src="counter.cayo.svelte" />
+<!-- After: Component-based approach (with preprocessor) -->
+<script>
+  import Counter from '$components/counter.cayo.svelte';
+</script>
+<Cayo component={Counter} />
+```
+The component preprocessor automatically handles alias resolution (like `$components/`) and provides better developer experience with IDE support, auto-completion, and build-time error checking. Additional preprocessors may be added in the future.
 ## Components
 By default, all components are prerendered. This means their lifecycle ends after they finish one run cycle, and the UI state after the first cycle is rendered to static HTML. This also means that any JS you use within the component's `<script>` element "compiles away" after it's used to render the component. These components are essentially "server side rendered", but are done so locally within Cayo processes rather than on a production server.
@@ -248,6 +308,25 @@ The `<Cayo>` component doesn't actually render your Cayos—instead it creates _
 ### Basic Usage
 Let's assume the component `components/counter.cayo.svelte` exists in your project, and has a prop `count`:
+#### Component object syntax (recommended):
+```svelte
+<!-- Register your Cayo with the imported component -->
+<script>
+  import { Cayo } from 'cayo';
+  import Counter from '$components/counter.cayo.svelte';
+</script>
+<!-- Basic usage -->
+<Cayo component={Counter} />
+<!-- Any additional props will be used to hydrate the Cayo on the client -->
+<Cayo component={Counter} count={1} />
+```
+When using the `component` prop, you can import your Cayo components directly. This provides better developer experience with auto-completion and build-time error checking.
+> **Note:** To use the `component` prop syntax, you must configure `cayoPreprocess` in your `cayo.config.js`. See [Cayo Preprocessors](#cayo-preprocessors) for setup instructions.
+#### String path syntax (classic):
 ```svelte
 <!-- Register your Cayo with the <Cayo> component -->
 <script>
@@ -259,7 +338,7 @@ Let's assume the component `components/counter.cayo.svelte` exists in your proje
 <Cayo src="counter.cayo.svelte" count={1} />
 ```
-The `src` prop is the only required prop, and is used to identify which Cayo Component should be rendered later. The value of `src` needs to be the path of a Cayo, but must be relative to the components directory (e.g., `src/components` by default). For example, say your Cayo was `components/nested/counter.cayo.svelte`, your usage would need to change to `<Cayo src="nested/counter.cayo.svelte" />`.
+The `src` prop is used to identify which Cayo Component should be rendered later. The value of `src` needs to be the path of a Cayo, but must be relative to the components directory (e.g., `src/components` by default). For example, say your Cayo was `components/nested/counter.cayo.svelte`, your usage would need to change to `<Cayo src="nested/counter.cayo.svelte" />`.
 The `<Cayo>` component can be rendered on a page or any other Svelte component except other Cayos.
@@ -292,11 +371,12 @@ And `page.svelte` registers that Cayo component, like so:
 <!-- src/pages/page.svelte -->
 <script>
   import { Cayo, Entry } from 'cayo';
+  import Counter from '../components/counter.cayo.svelte';
 </script>
 <!-- Say you want to start the count as 1 instead of 0, you can pass that value as a prop -->
-<Cayo src="counter.cayo.svelte" count={1} />
+<Cayo component={Counter} count={1} />
 <!-- Declare the entry -->
-<Entry src="entry.js" />
+<Entry />
 ```
 The resulting output will be a placeholder for the component. By default, this placeholder is used as the target for that Svelte component to mount to:
@@ -336,19 +416,37 @@ An entry serves two purposes:
 Since not every page will necessarily need Cayos, including an entry file at all is optional. You can define different entries per page, or even use the same file for all pages.
-Adding an entry to a page:
+### Default Entry File
+By default, the `<Entry>` component looks for `entry.js` in your `src` directory:
+```svelte
+<!-- src/pages/page.svelte -->
+<script>
+  import { Entry } from 'cayo';
+</script>
+<!-- ...other page stuff -->
+<Entry />
+```
+This will use `src/entry.js` as the entry file for the page.
+### Custom Entry Files
+You can specify a different entry file using the `src` prop:
 ```svelte
 <!-- src/pages/page.svelte -->
 <script>
   import { Entry } from 'cayo';
 </script>
 <!-- ...other page stuff -->
-<Entry src="entry.js" />
+<Entry src="main.js" />
 ```
-Using the `<Entry>` component tells Cayo to use that file as the page's entry. The `src` attribute should point at JS file that is **relative to the [`src` directory](#source-directory)**, rather than relative to the page itself.
+The `src` attribute should point at a JS file that is **relative to the [`src` directory](#source-directory)**, rather than relative to the page itself.
-Note: the name `entry.js` is used in the examples, but there are no limitations on the path or name, as long as it's in the `src` directory.
+Note: You can use any filename and path structure you want within the `src` directory.
 ### Render Hook
@@ -419,7 +517,7 @@ Say you want to render something in a Cayo before it gets hydrated, like a "load
   <!-- This will render inside the placeholder because the <Cayo> component renders a <slot> -->
   Loading counter...
 </Cayo>
-<Entry src="entry.js" />
+<Entry />
 ```
 ```js
@@ -489,9 +587,7 @@ Page:
 <!-- src/pages/page.svelte -->
 <!-- ...other page stuff -->
-<slot name="entry">
-  <script src="entry.js" data-cayo-entry />
-</slot>
+<Entry />
 ```
 ## Cayo & the Rest

package/dist/cayo.svelte.js CHANGED Viewed

@@ -41,10 +41,28 @@ function checkBadProps(warnings, src, keys) {
 /* src/cayo.svelte generated by Svelte v3.59.2 */
 const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	let $$restProps = compute_rest_props($$props, ["src","attributes"]);
-	let { src } = $$props;
+	let $$restProps = compute_rest_props($$props, ["src","component","attributes"]);
+	let { src = undefined } = $$props;
+	let { component = undefined } = $$props;
 	let { attributes } = $$props;
+	// Determine the actual source path
+	let actualSrc;
+	if (src) {
+		// Traditional string src prop
+		actualSrc = src;
+	} else if (component && component.__cayoPath) {
+		// Component object with extracted path
+		actualSrc = component.__cayoPath;
+	} else if (typeof component === 'string') {
+		// Component passed as string directly
+		actualSrc = component;
+	} else {
+		// Fallback error case
+		actualSrc = '';
+	}
 	// Save unserializable prop keys (during stringification)
 	// so we can report them later
 	const badProps = [];
@@ -62,10 +80,10 @@ const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 	// const props = toSource({...$$restProps})
 	const props = JSON.stringify({ ...$$restProps }, replacer);
-	const warnings = getWarnings(src, badProps);
+	const warnings = getWarnings(actualSrc, badProps);
 	const cayoInstanceData = {
-		'data-cayo-src': !warnings.invalidSrc ? `${src}` : '',
+		'data-cayo-src': !warnings.invalidSrc ? `${actualSrc}` : '',
 		'data-cayo-id': '', // will get set during prerender process based on the src
 	};
@@ -75,6 +93,7 @@ const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 	}
 	if ($$props.src === void 0 && $$bindings.src && src !== void 0) $$bindings.src(src);
+	if ($$props.component === void 0 && $$bindings.component && component !== void 0) $$bindings.component(component);
 	if ($$props.attributes === void 0 && $$bindings.attributes && attributes !== void 0) $$bindings.attributes(attributes);
 	return `<div${spread(

package/dist/entry.svelte.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { create_ssr_component, add_attribute } from 'svelte/internal';
 /* src/entry.svelte generated by Svelte v3.59.2 */
 const Entry = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	let { src } = $$props;
+	let { src = "entry.js" } = $$props;
 	if ($$props.src === void 0 && $$bindings.src && src !== void 0) $$bindings.src(src);
 	return `${slots.default

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default as Cayo } from './cayo.svelte.js';
 export { default as Entry } from './entry.svelte.js';
+export { cayoPreprocess } from '../lib/preprocessors/index.js';

package/docs/config-reference.md CHANGED Viewed

@@ -275,6 +275,39 @@ export default {
 ```
 ---
+### Enable Cayo Preprocessors
+To use enhanced Cayo features like imported components instead of string paths in `<Cayo>` components, add the `cayoPreprocess` preprocessors:
+```js
+// cayo.config.js
+import { cayoPreprocess } from 'cayo/build';
+export default {
+  svelte: {
+    preprocess: [
+      cayoPreprocess(),
+      // other preprocessors...
+    ],
+  }
+}
+```
+This enables the improved component syntax:
+```svelte
+<!-- Instead of string paths -->
+<Cayo src="counter.cayo.svelte" />
+<!-- You can use imported components -->
+<script>
+  import Counter from '$components/counter.cayo.svelte';
+</script>
+<Cayo component={Counter} />
+```
+This preprocessor provides enhanced Cayo functionality. The component preprocessor provides better developer experience with IDE support, auto-completion, and build-time error checking.
+---
 ### Add `mdsvex`
 Adding other Svelte preprocessors works similar to how it would in any other Vite + Svelte project.

package/lib/core/bundle.js CHANGED Viewed

@@ -1,34 +1,63 @@
-import fs, { pathExists } from 'fs-extra';
+import fs from 'fs-extra';
 import { rollup } from 'rollup';
 import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import css from 'rollup-plugin-import-css';
 import json from '@rollup/plugin-json';
 function inputOptions(input) {
   return {
     input,
-    external: ['svelte/internal', 'svelte'],
+    external: (id) => id === 'svelte' || id.startsWith('svelte/'),
     onwarn: function ( message ) {
       if ( /external dependency/.test( message ) ) return;
     },
   };
 }
+function resolvePluginDefaults(overrides = {}) {
+  return {
+    browser: false,
+    exportConditions: ['svelte'],
+    extensions: ['.svelte'],
+    dedupe: ['svelte'],
+    ...overrides,
+  }
+}
+function sveltePluginDefaults() {
+  return {
+    onwarn: (warning, handler) => {
+      console.log('Svelte processing:', warning.filename);
+      handler(warning);
+    }
+  }
+}
 function defaultRollupPlugins() {
-  return [css(), json()];
+  return [
+    commonjs({
+      include: /node_modules/,
+    }),
+    css(),
+    json()
+  ];
 }
 function userRollupPlugins(config) {
   return config.vite.rollupOptions.plugins;
 }
-export async function getDeps(input, config) {
-  let bundle;
-  // User-defined preprocessors
-  let preprocessors = config.svelte.preprocess.length > 0
+function getUserDefinedPreprocessors(config) {
+  return config.svelte.preprocess.length > 0
     ? config.svelte.preprocess
     : [config.svelte.preprocess];
+}
+export async function getDeps(input, config) {
+  let bundle;
+  let preprocessors = getUserDefinedPreprocessors(config);
   const options = {
     ...inputOptions(input),
@@ -37,11 +66,10 @@ export async function getDeps(input, config) {
         preprocess: [
           ...preprocessors,
         ],
+        ...sveltePluginDefaults(),
       }),
       resolve({
-        browser: true,
-        exportConditions: ['svelte'],
-        extensions: ['.svelte'],
+        ...resolvePluginDefaults(),
       }),
       ...defaultRollupPlugins(),
       ...userRollupPlugins(config),
@@ -77,15 +105,26 @@ export async function getDeps(input, config) {
 }
 export async function build(input, config, type = 'page') {
-  const template = (type === 'page' || type === 'template');
+  const ssr = (type === 'page' || type === 'template');
+  const isCayo = (type === 'cayo');
   const requiredCompilerOptions = {
-    generate: template ? 'ssr' : 'dom',
-    hydratable: template ? false : true,
-    preserveComments: template
-      ? false
-      : config.svelte.compilerOptions.preserveComments
-        ? config.svelte.compilerOptions.preserveComments
-        : true,
+    // Generic defaults for all builds
+    preserveWhitespace: true,
+  }
+  if (ssr) {
+    // Pages & Templates (SSR): server-side rendered
+    requiredCompilerOptions.generate = 'ssr';
+    requiredCompilerOptions.hydratable = false;
+    if (type === 'template') {
+      // Templates need comments preserved for Cayo placeholders
+      requiredCompilerOptions.preserveComments = true;
+    }
+  } else {
+    // Cayo Components (DOM): client-side hydration
+    requiredCompilerOptions.generate = 'dom';
+    requiredCompilerOptions.hydratable = true;
   }
   let bundle;
@@ -94,18 +133,17 @@ export async function build(input, config, type = 'page') {
     css: { code: '' },
     dependencies: [],
   };
-  // User-defined preprocessors
-  let preprocessors = config.svelte.preprocess.length > 0
-    ? config.svelte.preprocess
-    : [config.svelte.preprocess];
+  let preprocessors = getUserDefinedPreprocessors(config);
   const options = {
     ...inputOptions(input),
     plugins: [
+      ...defaultRollupPlugins(),
       svelte({
         preprocess: [
           ...preprocessors,
         ],
+        ...sveltePluginDefaults(),
         compilerOptions: {
           preserveWhitespace: true,
           ...config.svelte.compilerOptions,
@@ -113,7 +151,11 @@ export async function build(input, config, type = 'page') {
         },
         extensions: config.svelte.extensions,
       }),
-      ...defaultRollupPlugins(),
+      resolve({
+        ...resolvePluginDefaults({
+          browser: isCayo,
+        }),
+      }),
       ...userRollupPlugins(config),
     ]
   }

package/lib/core/render/prerender.js CHANGED Viewed

@@ -123,7 +123,7 @@ export async function processPage(content, page, _cayo, logger) {
   } 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.'),
+        chalk.yellow.bold('Warning') + chalk.yellow(': No <template cayo="css"> found in template, but there is CSS used in source files.'),
         { timestamp: true, clear: false, }
       );
     }

package/lib/core/render/renderer.js CHANGED Viewed

@@ -1,3 +1,6 @@
+import logger from '../logger.js';
+import chalk from 'chalk';
 export class Renderer {
   constructor(template) {
@@ -35,17 +38,44 @@ export class Renderer {
     // 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
+    // Check for deprecated %cayo.*% syntax and log deprecation warnings
+    // Use a more specific regex and avoid overlapping matches
+    const deprecatedPlaceholders = [];
+    const regex = /%cayo\.[a-zA-Z]+%/g;
+    let match;
+    while ((match = regex.exec(this.template.html)) !== null) {
+      deprecatedPlaceholders.push(match[0]);
+    }
+    if (deprecatedPlaceholders.length > 0 && !this._deprecationWarningLogged) {
+      this._deprecationWarningLogged = true;
+      const uniquePlaceholders = [...new Set(deprecatedPlaceholders)];
+      logger.log.info(
+        chalk.yellow.bold('Deprecation Warning') + chalk.yellow(` [Page: ${page.name}]: Found deprecated placeholder syntax: ${uniquePlaceholders.join(', ')}. Please migrate to <template cayo="..."> syntax. \nMore info: https://github.com/matthew-ia/cayo#template-placeholder-migration`),
+        { timestamp: true, clear: false }
+      );
+    }
+    const finalHtml = this.template.html
+      // Strip placeholders wrapped in HTML comments
+      .replace(/<!--[\s\S]?%cayo\.\w+%[\s\S]*?(-->)/g, '')
+      // Inject markup in HTML comment placeholders
+      .replace(/<!--\s*\[cayo-css\]\s*-->/g, () => cssElements)
+      .replace(/<!--\s*\[cayo-head\]\s*-->/g, () => head)
+      .replace(/<!--\s*\[cayo-body\]\s*-->/g, () => html)
+      .replace(/<!--\s*\[cayo-title\]\s*-->/g, () => !head.includes('<title>') ? title() : '')
+      .replace(/<!--\s*\[cayo-script\]\s*-->/g, () => `<script type="module" src="./index.js"></script>`)
+      // Support deprecated %cayo.*% syntax for backward compatibility
+      .replace(/%cayo\.title%/g, () => !head.includes('<title>') ? title() : '')
+      .replace(/%cayo\.head%/g, () => head)
+      .replace(/%cayo\.body%/g, () => html)
+      .replace(/%cayo\.css%/g, () => cssElements)
+      .replace(/%cayo\.script%/g, () => `<script type="module" src="./index.js"></script>`);
     return {
-      html: this.template.html
-        // 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)
-        // Vite needs the entry file in this format
-        .replace('%cayo.script%', () => `<script type="module" src="./index.js"></script>`),
+      html: finalHtml,
       css,
     }
   }

package/lib/preprocessors/cayo-component.js ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * Svelte preprocessor that transforms Cayo component imports
+ * from object references to string paths
+ */
+export function cayoComponentPreprocessor() {
+  return {
+    script({ content, attributes }) {
+      // Only process if the script contains .cayo.svelte imports
+      if (!content.includes('.cayo.svelte')) return;
+      // Transform: import Component from '$components/Component.cayo.svelte' or './components/Component.cayo.svelte'
+      // Into: import Component from '...'; Component.__cayoPath = 'Component.cayo.svelte';
+      const transformedContent = content.replace(
+        /import\s+(\w+)\s+from\s+['"]([^'"]*\/)?([^\/'"]+\.cayo\.svelte)['"]\s*;/g,
+        (match, varName, pathPrefix, filename) => {
+          return `${match}\n  if (${varName}) ${varName}.__cayoPath = '${filename}';`;
+        }
+      );
+      return transformedContent !== content ? { code: transformedContent } : null;
+    }
+  };
+}

package/lib/preprocessors/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { cayoComponentPreprocessor } from './cayo-component.js';
+/**
+ * Cayo preprocessor for Svelte
+ * Currently includes component import transformation
+ * Future preprocessors and config options can be added here
+ */
+export function cayoPreprocess(options = {}) {
+  return cayoComponentPreprocessor();
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cayo",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "start": "node cayo dev --projectRoot test",
@@ -30,6 +30,7 @@
   },
   "homepage": "https://github.com/matthew-ia/cayo#readme",
   "dependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "chalk": "^2.4.2",

package/scripts/build.js CHANGED Viewed

@@ -36,6 +36,8 @@ function generateIndex(modules) {
   for (const m of modules) {
     js += `export { default as ${m[0]} } from '${m[1]}';\n`;
   }
+  // Add preprocessor exports
+  js += `export { cayoPreprocess } from '../lib/preprocessors/index.js';\n`;
   return { code: js };
 }

package/src/cayo.svelte CHANGED Viewed

@@ -1,8 +1,25 @@
 <script>
   import { getWarnings } from './cayo-warnings.js';
-  export let src;
+  export let src = undefined;
+  export let component = undefined; // New prop for component objects
   export let attributes;
+  // Determine the actual source path
+  let actualSrc;
+  if (src) {
+    // Traditional string src prop
+    actualSrc = src;
+  } else if (component && component.__cayoPath) {
+    // Component object with extracted path
+    actualSrc = component.__cayoPath;
+  } else if (typeof component === 'string') {
+    // Component passed as string directly
+    actualSrc = component;
+  } else {
+    // Fallback error case
+    actualSrc = '';
+  }
   // Save unserializable prop keys (during stringification)
   // so we can report them later
   const badProps = [];
@@ -21,9 +38,9 @@
   // const props = toSource({...$$restProps})
   const props = JSON.stringify({...$$restProps}, replacer);
-  const warnings = getWarnings(src, badProps);
+  const warnings = getWarnings(actualSrc, badProps);
   const cayoInstanceData = {
-    'data-cayo-src': !warnings.invalidSrc ? `${src}` : '',
+    'data-cayo-src': !warnings.invalidSrc ? `${actualSrc}` : '',
     'data-cayo-id': '', // will get set during prerender process based on the src
   };
   if (warnings) {

package/src/entry.svelte CHANGED Viewed

@@ -1,5 +1,5 @@
 <script>
-  export let src;
+  export let src = "entry.js";
 </script>
 <slot>
   <script src="{src}" data-cayo-entry />

package/template/cayo.config.js CHANGED Viewed

@@ -1,3 +1,11 @@
+import { cayoPreprocess } from 'cayo/build';
 export default {
-  // options...
+  svelte: {
+    preprocess: [
+      cayoPreprocess(),
+      // Add other preprocessors here as needed
+    ]
+  }
+  // Add other options as needed...
 }

package/template/src/__template.svelte CHANGED Viewed

@@ -3,12 +3,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏝</text></svg>">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    %cayo.title%
-    %cayo.css%
-    %cayo.head%
+    <template cayo="title"></template>
+    <template cayo="css"></template>
+    <template cayo="head"></template>
   </head>
   <body>
-    %cayo.body%
-    %cayo.script%
+    <template cayo="body"></template>
+    <template cayo="script"></template>
   </body>
 </html>

package/template/src/pages/index.svelte CHANGED Viewed

@@ -1,15 +1,28 @@
 <script>
   import { Cayo, Entry } from 'cayo';
+  import Counter from '../components/counter.cayo.svelte';
   const heading = '🏝 Cayo';
 </script>
 <h1>{heading}</h1>
+<p>Example with component import (recommended):</p>
+<Cayo component={Counter} />
+<p>Example with string path (classic):</p>
 <Cayo src="counter.cayo.svelte" />
-<Entry src="index.js" />
+<Entry />
 <style>
   h1 {
     text-align: center;
     font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
+  p {
+    text-align: center;
+    color: #888;
+    font-size: 0.9rem;
+    margin: 1rem 0 0.5rem 0;
+  }
 </style>