cayo 0.9.11 → 1.1.0

package/README.md

@@ -11,7 +11,7 @@ The main purpose of Cayo is to be a tool that lets you use modern front-end tool
 
 - **Cayo lets you define where you _do_ want reactivity, with [Cayo Components](#cayo-components)**. If you want Svelte reactivity, you can have it—with Cayo Components (or "cayos" a.k.a. the "islands of reactivity"). These are components that are individually bundled and run as Svelte client-side components.
 
-- **Cayo is built for that person who has constraints on their output**—someone who needs control over their HTML generation workflow, and wants to use tools like [Svelte](https://svelte.dev) and [Vite](https://vitejs.dev). All while not having to buy into the typical use of creating an _entire website_, as frameworks are typically designed to be used.
+- **Cayo is built for that person who has constraints on their output**—someone who needs control over their HTML generation workflow, and wants to use tools like [Svelte](https://svelte.dev) and [Vite](https://vitejs.dev). All while not having to buy into the typical use case of creating an _entire website_, as frameworks are typically designed to be used.
 
 - **Cayo is _not_ a feature-rich web app framework** like Astro or SvelteKit. Read more about [how Cayo differs](#cayo--the-rest) from similar tools.
 
@@ -64,10 +64,12 @@ public/
 ```
 
 ### Source Directory
-Most of your projects files should go in `src`. This is where pages, components, styles, etc. should go. These files will be watched while running `cayo dev`, and used to build your project.
+Most of your project files, such as pages, cayos, styles, etc. should go in `src`.
 - `pages` contains the pages, or "inputs" of your project 
 - `components` contains your Cayo Components, and can contain any other components
-- `__template.svelte` is your page template 
+- `__template.svelte` is your page template
+
+Note: `cayo` watches and builds from the project root, but certain paths are expected as relative to the source directory rather than the root, e.g., cayos and pages. Read the config reference for more information.
 
 ### Pages
 Cayo uses a file-based routing system, meaning the file structure within the pages directory gets used to generate output files. All pages are expected to be valid Svelte components. Since your outputs just become regular old HTML files, there is no real "routing" going on here beyond the expected default of HTML files being served on a web server. 

package/dist/cayo.svelte.js

@@ -1,4 +1,4 @@
-import { create_ssr_component, compute_rest_props, spread, escape_object } from 'svelte/internal';
+import { create_ssr_component, compute_rest_props, add_attribute } from 'svelte/internal';
 
 function getWarnings(src, badProps) {
   const warnings = {};
@@ -72,7 +72,7 @@ const Cayo = create_ssr_component(($$result, $$props, $$bindings, slots) => {
 
 	if ($$props.src === void 0 && $$bindings.src && src !== void 0) $$bindings.src(src);
 
-	return `<div${spread([escape_object(cayoInstanceData)], {})}>
+	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)}>
   ${slots.default ? slots.default({}) : ``}
 </div>`;
 });

package/docs/config-reference.md

@@ -37,7 +37,7 @@ Check out [more config examples](#more-examples).
 - **Type**: `string`
 - **Default**: `'.'`
 
-The project root directory, where Cayo will look for the required project structure. Can be an absolute path or a directory relative to the current working directory. 
+The project root directory, where Cayo will look for the required project structure. Can be an absolute path or a directory relative to the current working directory. This folder will be watched for changes during dev.
 
 ---
 
@@ -45,7 +45,7 @@ The project root directory, where Cayo will look for the required project struct
 - **Type**: `string`
 - **Default**: `'src'`
 
-Specify the directory where your source files will be, relative to the [project root](#projectroot). This folder will be watched for changes during dev. 
+Specify the directory where your source files will be, relative to the [project root](#projectroot).
 
 ---
 

package/lib/cli/watch.js

@@ -10,7 +10,7 @@ import { debugStats } from '#core/utils.js';
 export function watch(_cayo) {
   const { config } = _cayo;
 
-  const watcher = chokidar.watch(config.src, {
+  const watcher = chokidar.watch(config.projectRoot, {
     // awaitWriteFinish: {
     //   stabilityThreshold: 1,
     //   pollInterval: 250
@@ -61,7 +61,7 @@ export function watch(_cayo) {
           await handleCayo(filepath, _cayo);
 
         // Handle Components
-        } else if (filepath.startsWith(config.components)) {
+        } else if (!filepath.startsWith(config.pages)) {
           logChange('component', filepath);
           await handleComponent(filepath, _cayo);
         }

package/lib/core/utils.js

@@ -16,16 +16,20 @@ export function hash(str = '', bytes = 5) {
 }
 
 export function generateSafeName(inputPath) {
-  return inputPath
+  let safeName = inputPath
     .replace(/^\.\//g, '')
+    .replace(/\.\.\//g, '')
     .replace(/\/+/g, '__')
     .replace(/\-+/g, '_');
+
+  // safeName += `_${hash(inputPath)}`;
+  return { name: safeName, suffix: hash(inputPath) };
 }
 
 export function generateCayoComponentId(componentPath) {
-  const name = generateSafeName(componentPath)
-    .replace('.cayo.svelte', '');
-  
+  let { name, suffix } = generateSafeName(componentPath)
+  name = name.replace('.cayo.svelte', ''); 
+  name += `_${suffix}`;
   const id = `${name}-${hash(name)}`;
 
   return {

package/package.json

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

package/src/cayo.svelte

@@ -28,9 +28,14 @@
   if (warnings) {
     cayoInstanceData['data-cayo-warn'] = JSON.stringify(warnings);
   }
-
 </script>
-
-<div {...cayoInstanceData}>
+<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']}
+>
   <slot/>
 </div>
+
+