cayo 1.5.1 → 1.5.3

package/dist/cayo.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from 'svelte';
+
+export interface CayoProps {
+  /**
+   * Component object with __cayoPath property or string path
+   */
+  component?: object | string;
+  
+  /**
+   * HTML attributes to spread on the wrapper div
+   */
+  attributes?: Record<string, any>;
+
+  /**
+   * Traditional string path to the component file
+   * @deprecated Use `component` prop instead for better type safety and preprocessor support
+   */
+  src?: string;
+}
+
+/**
+ * Cayo component wrapper that handles hydration and renders components.
+ * 
+ * Accepts a component via the `component` prop and passes additional props 
+ * to the child component via `$$restProps`.
+ * 
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Cayo } from 'cayo';
+ *   import Counter from './components/counter.cayo.svelte';
+ * </script>
+ * 
+ * <Cayo 
+ *   component={Counter} 
+ *   count={0}
+ *   attributes={{ class: "counter-wrapper" }}
+ * />
+ * ```
+ */
+export default class Cayo extends SvelteComponentTyped<CayoProps & Record<string, any>> {}

package/dist/entry.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from 'svelte';
+
+export interface EntryProps {
+  /**
+   * Path to the entry script file (defaults to "entry.js")
+   */
+  src?: string;
+}
+
+/**
+ * Entry component that injects the hydration entry point script.
+ * 
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Entry } from 'cayo';
+ * </script>
+ * 
+ * <Entry src="custom.js" />
+ * ```
+ */
+export default class Entry extends SvelteComponentTyped<EntryProps> {}

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,3 +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';
+export { cayoPreprocess } from './preprocessors/index.js';

package/dist/preprocessors/cayo-component.js

@@ -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/dist/preprocessors/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Svelte preprocessor that transforms .cayo.svelte imports
+ * Adds __cayoPath property to imported components for runtime path resolution
+ * 
+ * @example
+ * ```javascript
+ * // svelte.config.js
+ * import { cayoPreprocess } from 'cayo';
+ * 
+ * export default {
+ *   preprocess: cayoPreprocess()
+ * };
+ * ```
+ */
+export function cayoPreprocess(): {
+  markup: (options: { content: string; filename: string }) => { code: string };
+};

package/dist/preprocessors/index.js

@@ -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/lib/core/bundle.js

@@ -28,6 +28,7 @@ function resolvePluginDefaults(overrides = {}) {
 
 function sveltePluginDefaults() {
   return {
+    emitCss: false, // Bundle CSS into JS instead of separate file
     onwarn: (warning, handler) => {
       // console.log('Svelte processing:', warning.filename);
       // console.log('Svelte warning:', warning.message);

package/lib/core/render/renderer.js

@@ -31,7 +31,9 @@ export class Renderer {
 
     const title = () => {
       let title = page.name;
-      title = title.charAt(0).toUpperCase() + title.substring(1);
+      if (page.name !== page.url && page.url !== '/') {
+        title += ` • ${page.url}`;
+      }
       return `<title>${title}</title>`
     }
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "cayo",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "type": "module",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "start": "node cayo dev --projectRoot test",
     "build": "node scripts/build"
@@ -15,6 +16,7 @@
   "svelte": "./dist/index.js",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json"

package/scripts/build.js

@@ -23,6 +23,14 @@ async function compileComponents(components, config) {
       output[component] = { path: `./${component}.svelte.js` }
       console.log(chalk.green.bold(`Compiled ${component}.svelte → ${component}.svelte.js`));
       console.log(chalk.dim(`./dist/${component}.svelte.js`));
+      
+      // Copy type definition file
+      const typeDefPath = path.resolve(`./src/${component}.svelte.d.ts`);
+      const typeDefOutputPath = path.resolve(`./dist/${component}.svelte.d.ts`);
+      if (await fs.pathExists(typeDefPath)) {
+        await fs.copy(typeDefPath, typeDefOutputPath);
+        console.log(chalk.cyan(`Copied ${component}.svelte.d.ts`));
+      }
     } catch (err) {
       throw new Error(`Cayo Internal Error: Could not compile ./src/${component}.svelte`, { cause: err });
     }
@@ -37,10 +45,20 @@ function generateIndex(modules) {
     js += `export { default as ${m[0]} } from '${m[1]}';\n`;
   }
   // Add preprocessor exports
-  js += `export { cayoPreprocess } from '../lib/preprocessors/index.js';\n`;
+  js += `export { cayoPreprocess } from './preprocessors/index.js';\n`;
   return { code: js };
 }
 
+function generateIndexTypes(modules) {
+  let dts = '';
+  for (const m of modules) {
+    dts += `export { default as ${m[0]} } from '${m[1]}';\n`;
+  }
+  // Add preprocessor type exports
+  dts += `export { cayoPreprocess } from './preprocessors/index';\n`;
+  return { code: dts };
+}
+
 try {
   const cayoConfig = await validateConfig({});
   const output = await compileComponents(['cayo', 'entry'], cayoConfig);
@@ -49,11 +67,26 @@ try {
     ['Cayo', output.cayo.path],
     ['Entry', output.entry.path],
   ]);
-  await fs.outputFile('./dist/index.js', index.code)
-    .then(() => {
-      console.log(chalk.green.bold(`✅ Components built.`));
-      console.log(chalk.dim(`./dist/index.js`));
-    });
+  await fs.outputFile('./dist/index.js', index.code);
+  
+  // Generate TypeScript definitions
+  const indexTypes = generateIndexTypes([
+    ['Cayo', './cayo.svelte'],
+    ['Entry', './entry.svelte'],
+  ]);
+  await fs.outputFile('./dist/index.d.ts', indexTypes.code);
+  
+  // Copy preprocessors directory
+  const preprocessorsPath = path.resolve('./src/preprocessors');
+  const preprocessorsOutputPath = path.resolve('./dist/preprocessors');
+  if (await fs.pathExists(preprocessorsPath)) {
+    await fs.copy(preprocessorsPath, preprocessorsOutputPath);
+    console.log(chalk.cyan(`Copied preprocessors/`));
+  }
+  
+  console.log(chalk.green.bold(`✅ Components built.`));
+  console.log(chalk.dim(`./dist/index.js`));
+  console.log(chalk.dim(`./dist/index.d.ts`));
 
 } catch (err) {
   logger.error(err);

package/src/cayo.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from 'svelte';
+
+export interface CayoProps {
+  /**
+   * Component object with __cayoPath property or string path
+   */
+  component?: object | string;
+  
+  /**
+   * HTML attributes to spread on the wrapper div
+   */
+  attributes?: Record<string, any>;
+
+  /**
+   * Traditional string path to the component file
+   * @deprecated Use `component` prop instead for better type safety and preprocessor support
+   */
+  src?: string;
+}
+
+/**
+ * Cayo component wrapper that handles hydration and renders components.
+ * 
+ * Accepts a component via the `component` prop and passes additional props 
+ * to the child component via `$$restProps`.
+ * 
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Cayo } from 'cayo';
+ *   import Counter from './components/counter.cayo.svelte';
+ * </script>
+ * 
+ * <Cayo 
+ *   component={Counter} 
+ *   count={0}
+ *   attributes={{ class: "counter-wrapper" }}
+ * />
+ * ```
+ */
+export default class Cayo extends SvelteComponentTyped<CayoProps & Record<string, any>> {}

package/src/entry.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from 'svelte';
+
+export interface EntryProps {
+  /**
+   * Path to the entry script file (defaults to "entry.js")
+   */
+  src?: string;
+}
+
+/**
+ * Entry component that injects the hydration entry point script.
+ * 
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Entry } from 'cayo';
+ * </script>
+ * 
+ * <Entry src="custom.js" />
+ * ```
+ */
+export default class Entry extends SvelteComponentTyped<EntryProps> {}

package/src/preprocessors/cayo-component.js

@@ -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/src/preprocessors/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Svelte preprocessor that transforms .cayo.svelte imports
+ * Adds __cayoPath property to imported components for runtime path resolution
+ * 
+ * @example
+ * ```javascript
+ * // svelte.config.js
+ * import { cayoPreprocess } from 'cayo';
+ * 
+ * export default {
+ *   preprocess: cayoPreprocess()
+ * };
+ * ```
+ */
+export function cayoPreprocess(): {
+  markup: (options: { content: string; filename: string }) => { code: string };
+};

package/src/preprocessors/index.js

@@ -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();
+}