cayo 0.9.10 → 1.0.0

package/lib/core/config.js

@@ -0,0 +1,206 @@
+import path from 'path';
+import fs from 'fs-extra';
+import { z } from 'zod';
+import merge from 'deepmerge';
+import { defineConfig } from 'vite';
+import { normalizePath } from './utils.js';
+
+export async function validateConfig(userConfig) {
+  const ConfigSchema = z.object({
+    projectRoot: z
+      .string()
+      .default('.'),
+    src: z
+      .string()
+      .default('./src'),
+    pages: z
+      .string()
+      .default('./pages'),
+    components: z
+      .string()
+      .default('./components'),
+    publicDir: z
+      .string()
+      .default('./public'),
+    // TODO: make this an object with `value` and `mode` so it can be toggled per env if needed
+    base: z
+      .string()
+      .default('/'),
+    build: z
+      .object({
+        outDir: z
+          .string()
+          .default('./dist'),
+        assetsDir: z
+          .string()
+          .default('assets'),
+      })
+      .optional()
+      .default({}),
+    css: z
+      .object({
+        internal: z
+          .boolean()
+          .default(false),
+      })
+      .optional()
+      .default({}),
+    // Note: explicitly only supports these svelte config options
+    svelte: z.object({
+      preprocess: z.any().default([]),
+      compilerOptions: z.any().default({}),
+      extensions: z.string().array().default(['.svelte']),
+    }).default({}),
+    // Note: allows all vite config options
+    vite: z.any({}).default({
+      clearScreen: false,
+      rollupOptions: {
+        plugins: [],
+      },
+    }),
+    cayoPath: z
+      .string()
+      .default('.cayo/'),
+    cayoComponentInfix: z
+      .string()
+      .default('cayo'),
+    templateName: z
+      .string()
+      .default('__template'),
+    //TODO: make sure this matches the config docs
+    mode: z
+      .string()
+      .default('development'),
+    debug: z
+      .boolean()
+      .default(false),
+  });
+
+  return await ConfigSchema.strict().parseAsync(userConfig);
+}
+
+async function handlePaths(config, input, base) {
+  // Build paths from the config options
+  let projectRoot = normalizePath(base, config.projectRoot);
+  let src = normalizePath(projectRoot, config.src);
+  let pages = normalizePath(src, config.pages);
+  let components = normalizePath(src, config.components);
+  let publicDir = normalizePath(projectRoot, config.publicDir);
+  let build = {
+    outDir: normalizePath(projectRoot, config.build.outDir),
+  };
+
+
+  // Handle the template path a little differently below, since the option is a name not a path
+  let templateName = config.templateName;
+  let templatePath = path.join(src, `${templateName}.svelte`);
+
+  // Validate the built paths
+  let errorMessage = '';
+  let isError = false;
+  let isInvalidInput = false;
+  const pathsToCheck = { projectRoot, src, pages, components, templatePath, publicDir };
+  const exists = async (key, value) => {
+    if (!(await fs.pathExists(value))) {
+      if (!input[key] && key !== 'templatePath') {
+        errorMessage += `\n\n> Expected '${key}' path does not exist: ${value}`;
+      } else {
+        switch(key) {
+          case 'templatePath':
+            errorMessage += `\n\n> 'templateName': ${templateName} (.svelte) not found at root of 'src' path.`;
+            errorMessage += `\n  Expected template path does not exist: ${templatePath}`;
+            break;
+          default:
+            errorMessage += `\n\n> ${key}: realtive path does not exist: ${input[key]}`
+            errorMessage += `\n  Expected '${key}' path does not exist: ${value}`;
+            isInvalidInput = true;
+        }
+      }
+      isError = true;
+    }
+  }
+  for (const [key, value] of Object.entries(pathsToCheck)) {
+    exists(key, value);
+  }
+
+  if (!isError) {
+    // Update the config to use the validated absolute path values
+    config.projectRoot = projectRoot;
+    config.src = src;
+    config.pages = pages;
+    config.components = components;
+    config.template = templatePath;
+    config.publicDir = publicDir;
+    config.build.outDir = build.outDir;
+    
+  } else {
+    if (isInvalidInput) errorMessage = 'Config includes an invalid path.' + errorMessage;
+    else errorMessage = `Project structure is invalid.` + errorMessage;
+    throw new Error(errorMessage);
+  }
+}
+
+function handleZodError(error) {
+  let msg = 'Config is invalid.';
+  for (const e of error.issues) {
+    msg += `\n\n> ${e.message}`; 
+  }
+  throw new Error(msg);
+}
+
+export async function loadConfig(options) {
+  const configFileName = 'cayo.config.js';
+
+  // Use command-line options if user passes them
+  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,
+    };
+  }
+
+  let config = null;
+  try {
+    config = await validateConfig(userConfig);
+    await handlePaths(config, userConfig, root);
+  } catch (err) {
+    if (err instanceof z.ZodError) {
+      throw handleZodError(err);
+    }
+    throw err;
+  }
+
+  if (config && config.vite) {
+    const mergedViteConfig = merge(defineConfig({}), config.vite, { arrayMerge: combineMerge });
+    config.vite = 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/core/dependencies.js

@@ -0,0 +1,167 @@
+import path from 'path';
+import precinct from 'precinct';
+import { getDeps } from './bundle.js';
+
+/**
+ * Adds dependencies to the dependency tree
+ * 
+ * @param {object} depender – a dependency branch (for a page or child component)
+ * @param {object} dependencies – the dependency tree
+ */
+function addDependencies(depender, dependencies) {
+  let type;
+  let branch = [...depender.dependencies];
+
+  // Update existing branches with these new deps where applicable
+  for (const [key, page] of Object.entries(dependencies.pages)) {
+    for (const component of dependencies.pages[key]) {
+      if (depender.path === component && dependencies.components[component]) {
+        dependencies.pages[key] = new Set([
+          ...dependencies.pages[key], 
+          ...dependencies.components[component]
+        ]);
+        depender.dependencies = [...dependencies.pages[key]];
+      }
+    }
+  }
+
+  switch (depender.type) {
+    case 'page':
+      type = 'pages';
+      break;
+    case 'component':
+      type = 'components';
+      break;
+    case 'entry':
+      type = 'entries';
+      break;
+    case 'asset':
+    default:
+      type = 'assets';
+      break;
+  }
+
+  dependencies[type][depender.path] = new Set([...branch]);
+}
+
+/**
+ * Recursively handles component deps, 
+ * updates the depedendency tree, 
+ * and updates the list of compiled components
+ * 
+ * @param {object} depender a dependency branch (for a page or child component)
+ * @param {object} stats information about all dependers, their dependencies,
+ *                         and what components have been compiled this run
+ * @param {object} config cayo config
+ */
+export async function handleDependencies(depender, _cayo) {
+  const { stats, config } = _cayo;
+
+  // Add the depender to the dependency tree
+  const branch = addDependencies(depender, stats.dependencies);
+  // Add the depender to the list of compiled dependencies
+  stats.compiled.paths.add(depender.path);
+
+  // Iterate over the dependency tree
+  for (const dependency of depender.dependencies) {
+    let type;
+    if (dependency.endsWith('.svelte')) {
+      type = 'component';
+    } else if (dependency.endsWith('.js')) {
+      type = 'asset';
+    } else {
+      // Return early if it's not a file we can handle
+      return branch;
+    }
+
+    if (!stats.compiled.paths.has(dependency)) {
+      const deps = (await getDeps(dependency, config));
+      // Recursively handle nested dependencies
+      if (deps) {
+        await handleDependencies({ 
+          type,
+          path: dependency, 
+          dependencies: deps 
+        }, _cayo, config);
+      }
+    }
+  }
+
+  return branch;
+}
+
+export function findDependentPages(dependency, _cayo) {
+  const { components, pages } = _cayo.stats.dependencies;
+  const dependentComponents = new Set([dependency]);
+  const dependentPages = new Set();
+
+  // Lookup dependency in other components
+  for (const [depender, deps] of Object.entries(components)) {
+    if (deps.has(dependency)) {
+      dependentComponents.add(depender);
+    }
+  }
+
+  // Lookup any dependent components in pages
+  for (const [depender, deps] of Object.entries(pages)) {
+    for (const component of dependentComponents) {
+      if (deps.has(component)) {
+        dependentPages.add(depender)
+      }
+    }
+  }
+
+  return dependentPages;
+}
+
+export function findDependentCayos(pageDependency, _cayo) {
+  const { components, pages } = _cayo.stats.dependencies;
+  const dependentComponents = new Set([]);
+  const cayos = new Set([]);
+
+  // Lookup dependency in the page
+  for (const dep of pages[pageDependency]) {
+    if (dep.endsWith('.cayo.svelte')) cayos.add(dep);
+    else if (dep.endsWith('.svelte')) dependentComponents.add(dep);    
+  }
+
+  // Lookup dependency in components that the page is dependent on
+  for (const component of dependentComponents) {
+    for (const dep of components[component]) {
+      if (dep.endsWith('.cayo.svelte')) {
+        cayos.add(dep);
+      }
+    }
+  }
+
+  return cayos;
+}
+
+export async function getEntryDependencies(entry, page, _cayo) {
+  const { config } = _cayo;
+  let imports = precinct(entry.code, { type: 'es6' });
+  // Filter out public path ('/') and node_modules ('<package>')
+  let localDeps = imports.filter(d => d.startsWith('../') || d.startsWith('./'));
+  let absoluteDeps = localDeps.map(d => path.resolve(path.dirname(entry.path), d));
+  let srcRelativeLocalDeps = localDeps.map((d, i) => {
+    let pageCayoPath = path.resolve(config.cayoPath, page.url === '/' ? './' : page.url);
+    return path.relative(pageCayoPath, absoluteDeps[i]);
+  });
+
+  entry.dependencies = [];
+  for (let i = 0; i < localDeps.length; i++) {
+    entry.dependencies.push([localDeps[i], srcRelativeLocalDeps[i]]);
+  }
+
+  const depender = { 
+    type: 'entry', 
+    path: entry.path, 
+    dependencies: absoluteDeps, 
+  }
+
+  try {
+    await handleDependencies(depender, _cayo);
+  } catch (err) {
+    throw new Error(`Parsing dependencies of entry file '${entry.path}'`, { cause: err })
+  }
+}

package/lib/core/entry.js

@@ -0,0 +1,24 @@
+import fs from 'fs-extra';
+import { getEntryDependencies } from './dependencies.js';
+import { generateCayoRuntimeImport } from './codegen.js';
+
+export async function processEntrySource(entry, page, _cayo) {
+  try {
+    entry.code = await fs.readFile(entry.path, { encoding: 'utf8' });
+  } catch (err) {
+    throw err;
+  }
+  
+  let code = `${entry.code}`;
+  // Rewrite dependency imports
+  await getEntryDependencies(entry, page, _cayo);
+  for (const [relativeDep, srcRelativeDep] of entry.dependencies) {
+    code = code.replace(relativeDep, srcRelativeDep);
+  }
+  // Prepend cayo runtime import to entry source code
+  if (entry.renderCayos) {
+    code = generateCayoRuntimeImport() + code;
+  }
+
+  return code;
+}

package/lib/core/files.js

@@ -0,0 +1,99 @@
+import path from 'path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import { processEntrySource } from './entry.js';
+import prettier from 'prettier';
+// import logger from './logger.js';
+
+const logger = {
+  log: {
+    info: () => {}
+  }
+}
+
+// Write file content for a page
+export async function writePageFiles(page, _cayo) {
+  const { config } = _cayo;
+  const outDir = config.cayoPath;
+  const { html, css, js, cayoAssets } = page.result;
+  const htmlPath = page.url === '/' ? 'index.html' : `${page.url}/index.html`;
+  const prettyHtml = prettier.format(html, { parser: 'html'})
+
+  // Write HTML
+  await fs.outputFile(path.resolve(outDir, `${htmlPath}`), prettyHtml)
+    .then(() => logger.log.info(
+      chalk.green('page build ') + chalk.dim(`${page.name}`), 
+      { timestamp: true })
+    );
+  // Write CSS
+  if (css.code !== '' && !config.css.internal) {
+    const cssPath = page.url === '/' ? 'index.css' : `${page.url}/index.css`;
+    await fs.outputFile(path.resolve(outDir, cssPath), css)
+      .then(() => logger.log.info(
+        chalk.green('css build ') + chalk.dim(`${page.name}`), 
+        { timestamp: true })
+      );
+  }
+  // Write Cayo runtime JS
+  if (js.code !== '') {
+    let jsPath = page.url === '/' ? 'cayo-runtime.js' : `${page.url}/cayo-runtime.js`;
+    let content = '';
+    content += js.code;
+    await fs.outputFile(path.resolve(outDir, jsPath), content)
+      .then(() => logger.log.info(
+        chalk.green('cayo runtime build ') + chalk.dim(`${page.name}`), 
+        { timestamp: true })
+      );
+  }
+  // Write Cayo CSS
+  for (const [name, cayo] of Object.entries(cayoAssets)) {
+    if (cayo.css.code !== '' && !config.css.internal) {
+      const cssPath = `${name}.css`;
+      await fs.outputFile(path.resolve(outDir, cssPath), cayo.css.code)
+        .then(() => logger.log.info(
+          chalk.green('css build ') + chalk.dim(`${cssPath}`), 
+          { timestamp: true })
+        );
+    }
+  }
+
+  await writeEntryFile(page, _cayo);
+}
+
+export async function writeEntryFile(page, _cayo) {
+  const { config } = _cayo;
+  const { entry } = page.result;
+  
+  if (entry.path) {
+    // Get the processed entry code
+    // TODO: should this happen here?
+    let code = await processEntrySource(entry, page, _cayo);
+    // Write the processed entry file
+    let entryOutputPath = page.url === '/' ? `./index.js` : `${page.url}/index.js`;
+    await fs.outputFile(path.resolve(config.cayoPath, entryOutputPath), code)
+      .then(() => logger.log.info(
+        chalk.green('entry build ') + chalk.dim(`${page.name}`), 
+        { timestamp: true }
+      ))
+      .catch(err => console.error(err));
+  }
+}
+
+export async function writeTemplateCSS(css, _cayo) {
+  const { config } = _cayo;
+  const outDir = config.cayoPath;
+  
+  if (css.code !== '' && !config.css.internal) {
+    const cssPath = `__index.css`;
+    await fs.outputFile(path.resolve(outDir, cssPath), css.code)
+      .then(() => logger.log.info(
+        chalk.green('css build ') + chalk.dim(`${config.templateFileName}`), 
+        { timestamp: true })
+      );
+  }
+}
+
+export function cleanCayoPath(cayoPath) {
+  fs.removeSync(cayoPath);
+  fs.ensureDirSync(cayoPath);
+}

package/lib/core/logger.js

@@ -0,0 +1,47 @@
+import { createLogger } from 'vite';
+import chalk from 'chalk';
+
+export const infoLogger = createLogger('info', {
+  prefix: chalk.magenta.bold('[cayo]'),
+  // allowClearScreen: true,
+});
+export const errorLoggerVite = createLogger('error', {
+  prefix: chalk.red.bold('[cayo]'),
+  // allowClearScreen: true,
+});
+
+const errorLogger = (err) => {
+  let errorMessage = err;
+  // TODO: good reason to write a new logger that is
+  // globally initialized and passed in a runtime object, 
+  // so this could have access to _cayo.config options
+  // Only really useful for dev
+  // if (err.stack) errorMessage = err.stack;
+  console.error(chalk.red.bold(`${errorMessage}`));
+  
+  if (err.cause && !err.cause.cause) {
+    console.error(`${chalk.red.bold('> Cause:')} ${chalk.red.bold(err.cause)}`);
+    // console.error(err.cause.stack);
+  } else {
+    handleCause(err);
+  }
+}
+
+const handleCause = (err) => {
+  let prefix = chalk.red.bold('> Cause:');
+  if (err.cause) {
+    console.error(`${prefix} ${chalk.red.bold(err.cause)}`);
+    // console.error(err.cause.stack);
+    handleCause(err.cause);
+  } else {
+    // console.error(`${prefix} ${chalk.red.bold(err.stack)}`);
+    // console.error(err.stack);
+  }
+}
+
+const logger = { 
+  log: infoLogger,
+  error: errorLogger,
+}
+
+export default logger;

package/lib/core/page.js

@@ -0,0 +1,59 @@
+import { Component } from "./component.js";
+import { prerender } from "./render/prerender.js";
+
+export class Page extends Component {
+  constructor(
+    code, 
+    layout, 
+    sourcePath, 
+    modulePath, 
+    dependencies, 
+    config
+  ) {
+    super(null, code, sourcePath, modulePath, dependencies, config);
+    this._url = sourcePath.replace(config.pages, '').replace('.svelte', '');
+    this._name = sourcePath.split('/').pop().replace('.svelte', '');
+    this._modulePath = modulePath;
+    this._sourcePath = sourcePath;
+    this._layout = layout;
+    this._result;
+    this._cayoComponents = {};
+
+    if (this._url === 'index') this._url = '/';
+  }
+
+  async render(_cayo, options = {}) {
+    const { load = false } = options;
+    if (load) await this.load();
+    try {
+      this._result = await prerender(
+        this,
+        _cayo,
+      );  
+    } catch (err) {
+      throw new Error(`Could not prerender page '${this._name}'`, { cause: err })
+    }
+
+    return this;
+  }
+
+  get layout() {
+    return this._layout;
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  get result() {
+    return this._result;
+  }
+
+  get sourcePath() {
+    return this._sourcePath;
+  }
+
+  addCayoComponents(name, cayo) {
+    this._cayoComponents[name] = cayo;
+  }
+}