cayo 0.9.10 → 0.9.11

package/lib/cli.js

@@ -1,69 +0,0 @@
-import { loadConfig } from './config.js';
-import yargs from 'yargs-parser';
-import { devServer } from './dev.js';
-import { build } from './build.js';
-import fs from 'fs-extra';
-
-// TODO: move this elsewhere
-if (!fs.existsSync(dotPath)) {
-  await fs.mkdir(dotPath)
-}
-
-// Load config
-
-// Handle arguments
-function resolveArgs(argv) {
-
-  const cmd = argv._[2]
-  const options = {
-    //TODO: support options from command line
-  }
-
-  switch (cmd) {
-    case 'dev':
-      return { cmd: 'dev', options };
-    case 'build':
-      return { cmd: 'build', options };
-    default:
-      return { cmd: 'help', options };
-  }
-}
-
-function printHelp() {
-  // TODO: help info
-  console.log('help');
-}
-
-function run(command) {
-  const { cmd, options } = command;
-  try {
-    // const { projectRoot, configPath } = options;
-    const config = await loadConfig(options);
-
-    // TODO: actually run command now
-  } catch (err) {
-    console.error(err);
-    process.exit(1);
-  }
-}
-
-// Run
-export async function cli(args) {
-  const argv = yargs(args);
-  const command = resolveArgs(argv);
-  // TODO: do something with options
-
-  switch(command.cmd) {
-    case 'dev':
-      // run server
-      devServer();
-      break;
-    case 'build':
-      // run build
-      build();
-      break;
-    case 'help':
-    default:
-      printHelp();
-  }
-}

package/lib/codegen.js

@@ -1,79 +0,0 @@
-import path from 'path';
-
-// Generate runtime helper that finds and parses a component instance's prop data
-export function generateGetProps() {
-  return (
-`
-function getProps(cayoId) {
-  const componentElement = document.querySelector(\`[data-cayo-id="\${cayoId}"]\`);
-  const json = componentElement.dataset.cayoProps;
-  return JSON.parse(json);
-}
-`
-  );
-}
-
-export function generateCayoRuntime(components, config) {
-  let code = '';
-  let instances = '';
-
-  if (Object.keys(components).length !== 0) {
-    // TODO: add this path to config (internal only)
-    // const componentPath = path.resolve(config.cayoPath, './__cayo/components');
-    const componentPath = '/__cayo/components';
-    Object.entries(components).forEach(([name, ids]) => {
-      // Add component dependency import
-      code += `import { ${name} } from '${componentPath}/${name}.js';\n`;
-      // Generate component instances
-      ids.forEach(id => {
-        instances += generateComponentInstance(id, name)
-      });
-    });
-    
-    // Add getProps (used by component instances)
-    code += generateGetProps();
-  } else {
-    instances += `  // No cayo component instances found in page HTML`;
-  }
-
-  // Add main render, which runs the component instantiations
-  code += generateRender(instances);
-
-  return { code };
-}
-
-function generateRender(contents) {
-  return (
-`
-export default function render(cb) {
-  var target = function (node) { return node; }
-  if (cb) target = cb;
-${contents}
-}
-`
-  );
-}
-
-// Generate the code to wrap component instances in an event listener wrapper
-export function generateComponentInstanceWrapper(contents) {
-  return (
-`
-document.addEventListener('DOMContentLoaded', function() {
-${contents}
-});
-`
-  );
-}
-
-// Generate the code for a component instance
-export function generateComponentInstance(cayoId, componentName) {
-  return (
-` 
-  new ${componentName}({
-    target: target(document.querySelector('[data-cayo-id="${cayoId}"]')),
-    hydrate: true,
-    props: getProps('${cayoId}'),
-  });
-`
-  );
-}

package/lib/components/Cayo.svelte

@@ -1,25 +0,0 @@
-<script>
-  import * as crypto from 'crypto';
-  // import { Boundary } from '@crownframework/svelte-error-boundary';
-
-  export let name;
-
-  // TODO: Consider error handling for required stuff
-  // if (!name) throw new Error('No name for component');
-  // try {
-    // if (!name) throw new Error(`\x1b[31mCayo Component: 'name' prop is required and can't be an empty string`);
-  // } catch (err) {
-  //   new Error(err);
-  // }
-
-  function hash() {
-    return crypto.randomBytes(3).toString('hex');
-  }
-
-  const json = JSON.stringify($$restProps);
-</script>
-
-<div data-cayo-id={name ? `${name}-${hash()}` : ''} data-cayo-props={json}>
-  <slot/>
-</div>
-

package/lib/config.js

@@ -1,155 +0,0 @@
-import path from 'path';
-import fs from 'fs-extra';
-import { z } from 'zod';
-import { normalizePath } from './utils.js';
-import { default as viteConfig } from './vite.config.js';
-import chalk from 'chalk';
-import merge from 'deepmerge';
-
-async function validateConfig(userConfig, base) {
-  const ConfigSchema = z.object({
-    projectRoot: z
-      .string()
-      .optional()
-      .default('.')
-      .transform(val => normalizePath(base, val)),
-    src: z
-      .string()
-      .optional()
-      .default('./src')
-      .transform(val => normalizePath(base, val)),
-    pages: z
-      .string()
-      .optional()
-      .default('./src/pages')
-      .transform(val => normalizePath(base, val)),
-    publicDir: z
-      .string()
-      .optional()
-      .default('./public')
-      .transform(val => normalizePath(base, val)),
-    base: z
-      .string()
-      .optional(),
-    build: z
-      .object({
-        outDir: z
-          .string()
-          .optional()
-          .default('./dist')
-          .transform(val => normalizePath(base, val)),
-        assetsDir: z
-          .string()
-          .optional()
-          .default('assets'),
-          // .transform(val => normalizePath(base, val)),
-        legacy: z.
-          boolean()
-          .optional()
-          .default(false),
-      })
-      .optional()
-      .default({}),
-    css: z
-      .object({
-        internal: z
-          .boolean()
-          .optional()
-          .default(false),
-      })
-      .optional()
-      .default({}),
-    viteConfig: z
-      .any({}),
-      // .default(viteConfig),
-    cayoPath: z
-      .string()
-      .optional()
-      .default('.cayo/')
-      .transform(val => normalizePath(base, val)),
-    cayoComponentInfix: z
-      .string()
-      .optional()
-      .default('cayo'),
-    templateFileName: z
-      .string()
-      .default('__layout'),
-    mode: z
-      .string()
-      .optional()
-      .default('development'),
-  });
-
-  return await ConfigSchema.parseAsync(userConfig);
-}
-
-export function checkConfigPaths(config, logger) {
-  let errorLogged = false;
-  const log = (option, value) => {
-    logger.warn(
-      chalk.red(`Config Error: ${option}: '${value}' does not exist`),
-      { timestamp: true, clear: false, }
-    );
-    errorLogged = true;
-  }
-  if (!fs.existsSync(config.projectRoot)) 
-    log('config.projectRoot', config.projectRoot);
-  if (!fs.existsSync(path.resolve(config.projectRoot, config.src))) 
-    log('config.src', config.projectRoot);
-  if (!fs.existsSync(path.resolve(config.projectRoot, config.pages))) 
-    log('config.pages', config.pages);  
-  if (!fs.existsSync(path.resolve(config.projectRoot, config.publicDir))) 
-    log('config.publicDir', config.publicDir);  
-  if (!fs.existsSync(path.resolve(config.src, `${config.templateFileName}.svelte`))) 
-    log('config.templateFileName', `${config.templateFileName}(.svelte)`);
-  if (!fs.existsSync(path.resolve(config.projectRoot, config.publicDir))) 
-    log('config.publicDir', config.publicDir);  
-
-  if(errorLogged) throw new Error('Config Error: fix the issues above in your config file');
-}
-
-export async function loadConfig(options) {
-  const configFileName = 'cayo.config.js';
-
-  // Use options passed to the CLI for projectRoot and configPath
-  const root = options.projectRoot 
-    ? path.resolve(options.projectRoot) 
-    : process.cwd();
-
-  const configPath = options.configPath 
-    ? path.resolve(root, options.configPath)
-    : path.resolve(root, `./${configFileName}`);
-
-  // Load config from user config file
-  let userConfig = { projectRoot: root, mode: options.mode };
-  if (fs.existsSync(configPath)) {
-    userConfig = { 
-      ...(await import(configPath)).default,
-      ...userConfig,
-    };
-  }
-
-  const config = await validateConfig(userConfig, root);
-  if (config.viteConfig) {
-    const mergedViteConfig = merge(viteConfig, config.viteConfig, { arrayMerge: combineMerge });
-    config.viteConfig = mergedViteConfig;
-  }
-  
-  return config;
-}
-
-// Credit: https://github.com/TehShrike/deepmerge#arraymerge-example-combine-arrays
-function combineMerge(target, source, options) {
-	const destination = target.slice()
-
-	source.forEach((item, index) => {
-		if (typeof destination[index] === 'undefined') {
-			destination[index] = options.cloneUnlessOtherwiseSpecified(item, options)
-		} else if (options.isMergeableObject(item)) {
-			destination[index] = merge(target[index], item, options)
-		} else if (target.indexOf(item) === -1) {
-			destination.push(item)
-		}
-	})
-	return destination
-}

package/lib/files.js

@@ -1,84 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-import chalk from 'chalk';
-
-// Write file content for a page
-export async function writePageFiles(page, outDir, logger, config) {
-  const { html, css, js, entry } = page;
-  const htmlPath = page.urlPath === '/' ? 'index.html' : `${page.filePath}/index.html`;
-  // Write HTML
-  await fs.outputFile(path.resolve(outDir, `${htmlPath}`), html)
-    .then(() => logger.info(
-      chalk.green('page build ') + chalk.dim(`${page.filePath}`), 
-      { timestamp: true })
-    );
-  // Write CSS
-  if (css.code !== '' && !config.css.internal) {
-    const cssPath = page.urlPath === '/' ? 'index.css' : `${page.filePath}/index.css`;
-    await fs.outputFile(path.resolve(outDir, cssPath), css)
-      .then(() => logger.info(
-        chalk.green('css build ') + chalk.dim(`${page.filePath}`), 
-        { timestamp: true })
-      );
-  }
-  // Write Cayo runtime JS
-  if (js.code !== '') {
-    let jsPath = page.urlPath === '/' ? 'cayo-runtime.js' : `${page.filePath}/cayo-runtime.js`;
-    let content = '';
-    content += js.code;
-    await fs.outputFile(path.resolve(outDir, jsPath), content)
-      .then(() => logger.info(
-        chalk.green('cayo runtime build ') + chalk.dim(`${page.filePath}`), 
-        { timestamp: true })
-      );
-  }
-
-  // Copy user entry JS
-  if (entry.path !== '') {
-    let entryRelativePath = page.urlPath === '/' ? `./index.js` : `${page.filePath}${path.sep}index.js`;
-    await fs.copy(entry.path, path.resolve(outDir, entryRelativePath))
-      .then(() => logger.info(
-        chalk.green('entry build ') + chalk.dim(`${page.filePath}`), 
-        { timestamp: true })
-      ).catch(err => console.error(err));
-  }
-}
-
-export async function writeTemplateCSS(css, outDir, logger, config) {
-  if (css.code !== '' && !config.css.internal) {
-    const cssPath = `__index.css`;
-    await fs.outputFile(path.resolve(outDir, cssPath), css.code)
-      .then(() => logger.info(
-        chalk.green('css build ') + chalk.dim(`${config.templateFileName}`), 
-        { timestamp: true })
-      );
-  }
-}
-
-export async function writeComponentFile(name, modulePath, outDir, logger) {
-  let content = `export { default as ${name} } from '${modulePath}';\n`;
-  await fs.outputFile(path.resolve(outDir, `./__cayo/components/${name}.js`), content)
-    .then(() => logger.info(
-      chalk.green('component dep ') + chalk.dim(`${name}`), 
-      { timestamp: true })
-    );
-}
-
-export function cleanCayoPath(cayoPath) {
-  fs.removeSync(cayoPath);
-  fs.ensureDirSync(cayoPath);
-  // if (!fs.existsSync(cayoPath)) {
-  //   try {
-  //     fs.mkdirSync(cayoPath)
-  //   } catch (err) {
-  //     console.error(err);
-  //   }
-  // } else {
-  //   try {
-  //     fs.removeSync(cayoPath)
-  //     fs.mkdirSync(cayoPath);
-  //   } catch (err) {
-  //     console.error(err);
-  //   }
-  // }
-}

package/lib/prerender.js

@@ -1,181 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-import { JSDOM } from 'jsdom';
-import { Renderer } from './renderer.js';
-import { generateCayoRuntime } from './codegen.js';
-import chalk from 'chalk';
-
-export function prerender(Template, pages, componentModules, config, logger) {
-  const template = Template.render();
-  const renderer = new Renderer(template);
-  const componentList = new Set();
-
-  // const prerendered = {};
-  // Render page, parse html, and save its deps
-  const prerendered = Object.entries(pages).reduce(
-    (prerendered, [pathname, page]) => {
-      // Render page
-      const content = renderer.render(page, config);
-      // Postprocess the content, get deps and inject dep references
-      const { html, css, js, entry, components } = processPage(content, page, Object.keys(componentModules), config, logger);
-      prerendered[pathname] = {
-        html,
-        css, 
-        js,
-        entry,
-        components,
-        ...page,
-      }
-      Object.keys(components).forEach(component => componentList.add(component))
-      return prerendered;
-    }, {}
-  );
-
-  return { 
-    prerendered,
-    componentList,
-    template,
-  }
-}
-
-// Derive JS dependencies from the prerendered html
-export function processPage(content, page, componentNames, config, logger) {
-  const tags = findDocumentTags(content.html);
-  const dom = new JSDOM(content.html);
-  const { document } = dom.window;
-
-  // Get component instance ids
-  let cayoIds = [];
-  document.querySelectorAll('[data-cayo-id]').forEach((el) => {
-    if (el.dataset.cayoId !== '') {
-      cayoIds.push(el.dataset.cayoId);
-    } else {
-      logger.info(
-        chalk.red(`Cayo component instance without a name found`) + chalk.dim(` ${page.filePath}`), 
-        { timestamp: true, clear: true, }
-      );
-    }
-  });
-
-  // Get component list
-  // TODO: make this regex allow '-' character, before the last one, to be part of the component name?
-  const componentNameRegex = /(?<name>\w+)-/; // Foo-{hash}
-  const components = cayoIds.reduce((components, id) => {
-    let name = id.match(componentNameRegex).groups.name;
-    if (!componentNames.includes(name)) {
-      logger.warn(
-        chalk.red(
-          `Cayo component with name '${name}' does not exist but is trying to be rendered`
-        ) + chalk.dim(` ${page.filePath}`), 
-        { timestamp: true, clear: true, }
-      );
-      return components;
-    }
-
-    if (!components[name]) {
-      components[name] = [id]
-    } else {
-      components[name].push(id);
-    }
-    return components;
-  }, {});
-
-  // Get user-specified entry file name
-  // TODO: can just be querySelector? should only be one instance. maybe warn if more than one.
-  const entryScripts = document.querySelectorAll('script[data-cayo-entry]');
-  let userEntryFile = entryScripts.length !== 0 ? entryScripts[0].src : '';
-  // Remove user-specified entry file placeholder
-  if (userEntryFile) { 
-    entryScripts.forEach((script) => {
-      script.remove();
-    });
-  }
-
-  // Build generated entry file contents
-  let js = { code: '' };
-  let entry = {
-    path: '',
-  }
-
-  if (!userEntryFile) {
-    // Remove the entry point script tag if the page doesn't need any JS
-    // This is injected by Renderer.render based on the template
-    const entryScript = document.querySelector(`script[type="module"][src="./index.js"]`);
-    if (entryScript) {
-      entryScript.remove();
-    } else {
-      logger.info(
-        chalk.bgRed.white(`No entry placeholder in template file.`) + chalk.dim(` Cayo components will not render.`), 
-        { timestamp: true }
-      );
-    }
-  }
-
-  if (userEntryFile[0] === '/') {
-    userEntryFile = userEntryFile.substring(1);
-  } else if (userEntryFile && userEntryFile[0] !== '/') {
-    logger.warn(
-      chalk.red(
-        `Entry file path '${userEntryFile}' requires a leading slash and to be relative to src`
-      ) + chalk.dim(` ${page.filePath}`), 
-      { timestamp: true, clear: true, }
-    );
-  }
-
-  if (userEntryFile) {
-    const entryFilePath = path.resolve(
-      config.src,
-      userEntryFile
-    );
-  
-    if (!fs.pathExistsSync(entryFilePath)) {
-      console.error(`Can't read entry file ${userEntryFile} in ${page.modulePath}`);
-    } else {
-      entry.path = entryFilePath;
-    }
-  }
-  
-  js = generateCayoRuntime(components, config);
-
-  // Construct the correct HTML string based on the document tags
-  // that were rendered from the source (jsdom wraps the source HTML in a document,
-  // which always includes `html`, `head`, and `body`, even if the source doesn't)
-  let processedHTML = '';
-  if (tags.html) {
-    processedHTML = dom.window.document.documentElement.outerHTML;
-
-  } else {
-    if (tags.head) {
-      processedHTML += dom.window.document.head.outerHTML;
-    } else {
-      processedHTML += dom.window.document.head.innerHTML;
-    }
-
-    if (tags.body) {
-      processedHTML += dom.window.document.body.outerHTML;
-    } else {
-      processedHTML += dom.window.document.body.innerHTML;
-    }
-  }
-
-  return { 
-    html: processedHTML, 
-    css: content.css.code, 
-    js, 
-    components,
-    entry,
-  };
-}
-
-
-function findDocumentTags(source) {
-  const head = source.match(/\<head[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/head\>/g);
-  const body = source.match(/\<body[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/body\>/g);
-  const html = source.match(/\<html[\s\S]*\>(?<innerHTML>[\s\S]*)\<\/html\>/g);
-
-  return {
-    head: head === null ? false : true,
-    body: body === null ? false : true,
-    html: html === null ? false : true,
-  };
-}

package/lib/renderer.js

@@ -1,49 +0,0 @@
-import path from 'path';
-
-export class Renderer {
-
-  constructor(template) {
-    this.template = template;
-  }
-
-  render(page, config) {
-    const { css: cssOptions } = config;
-
-    const { Component } = page;
-    const { html, css, head } = Component.render();
-
-    // TODO: template function for page title
-    let title = page.meta.title ? `${page.meta.title}` : 'Cayo';
-
-    let cssTag = '';
-    if (cssOptions.internal === false) {
-      if (this.template.css.code !== '') {
-        cssTag += `<link rel="stylesheet" href="/__index.css">\n`;
-      }
-      cssTag += `<link rel="stylesheet" href="./index.css">`;
-    } else {
-      if (this.template.css.code !== '') {
-        cssTag += `<style>/* Template CSS */${this.template.css.code}</style>\n`;  
-      }
-      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>`)
-      ,
-      css: css,
-    }
-  }
-}

package/lib/runtime.js

@@ -1,6 +0,0 @@
-
-export function getProps(cayoId) {
-  const componentElement = document.querySelector(`[data-cayo-id="${cayoId}"]`);
-  const json = '' + componentElement.dataset.cayoProps;
-  return JSON.parse(json);
-}