cayo 0.9.10 → 1.0.0

package/lib/cli/watch.js

@@ -0,0 +1,125 @@
+import path from 'path';
+import chokidar from 'chokidar';
+import chalk from 'chalk';
+import logger from '#core/logger.js';
+import * as compile from '#core/compile/index.js';
+import { findDependentPages } from '#core/dependencies.js';
+import { writePageFiles, writeEntryFile } from '#core/files.js';
+import { debugStats } from '#core/utils.js';
+
+export function watch(_cayo) {
+  const { config } = _cayo;
+
+  const watcher = chokidar.watch(config.src, {
+    // awaitWriteFinish: {
+    //   stabilityThreshold: 1,
+    //   pollInterval: 250
+    // },
+  });
+
+  const configWatcher = chokidar.watch(path.resolve(config.projectRoot, './cayo.config.js'));
+
+  configWatcher.on('change', (filepath) => {
+    logger.log.info(
+      chalk.yellow(`config updated... restart dev server to use new config.`),
+      { timestamp: true, clear: true, }
+    );
+  })
+
+  const logChange = (type, filepath = '') => {
+    if (filepath !== '') {
+      if (type === 'component' || 'cayo') {
+        filepath = filepath.replace(config.components, '');
+      } else if (type === 'page') {
+        filepath = filepath.replace(config.pages, '');
+      }
+    }
+    
+    logger.log.info(
+      `${type} updated ${chalk.dim(filepath)}`,
+      { timestamp: true, clear: true, }
+    );
+  }
+
+  watcher.on('change', async (filepath) => {
+    try {
+      // Handle Svelte files
+      if (filepath.endsWith('.svelte')) {
+        // Handle Template
+        if (filepath.endsWith(`${config.templateName}.svelte`)) {
+          logChange('template');
+          await handleTemplate(_cayo);
+
+          // Handle Pages
+        } else if (filepath.startsWith(config.pages)) {
+          logChange('page', filepath);
+          await handlePage(filepath, _cayo);
+        
+        // Handle Cayos
+        } else if (filepath.includes(`.${config.cayoComponentInfix}`)) {
+          logChange('cayo', filepath);
+          await handleCayo(filepath, _cayo);
+
+        // Handle Components
+        } else if (filepath.startsWith(config.components)) {
+          logChange('component', filepath);
+          await handleComponent(filepath, _cayo);
+        }
+      // Handle everything else
+      } else {
+        if (_cayo.stats.dependencies.entries[filepath]) {
+          logChange('entry', filepath);
+          await handleEntry(filepath, _cayo);
+        } else {
+          await handleOther(filepath, _cayo);
+        }
+      }  
+    } catch (err) {
+      logger.error(err);
+    }
+  });
+}
+
+async function handleTemplate(_cayo) {
+  await compile.template(_cayo);
+  for (const [key] of _cayo.pages) {
+    await handlePage(key, _cayo);
+  }
+}
+
+async function handleCayo(filepath, _cayo) {
+  await handleOther(filepath, _cayo);
+}
+
+async function handleComponent(filepath, _cayo) {
+  await handleOther(filepath, _cayo);
+}
+
+async function handleOther(filepath, _cayo) {
+  const dependentPages = findDependentPages(filepath, _cayo);
+  for (const page of dependentPages) {
+    await handlePage(page, _cayo);
+  }
+}
+
+async function handleEntry(filepath, _cayo) {
+  for (const [, page] of _cayo.pages) {
+    if (filepath === page.result.entry.path) {
+      await writeEntryFile(page, _cayo);
+    }
+  }
+}
+
+async function handlePage(filepath, _cayo) {
+  const { pages } = _cayo;
+
+  const page = (await compile.pages([filepath], _cayo))[0];
+  pages.set(filepath, page);
+  await page.render(_cayo, { load: true });
+
+  if (_cayo.config.debug) {
+    debugStats(_cayo);
+  }
+
+  await writePageFiles(page, _cayo);
+}

package/lib/core/bundle.js

@@ -0,0 +1,155 @@
+import fs, { pathExists } from 'fs-extra';
+import { rollup } from 'rollup';
+import svelte from 'rollup-plugin-svelte';
+import css from 'rollup-plugin-import-css';
+import json from '@rollup/plugin-json';
+
+function inputOptions(input) {
+  return { 
+    input, 
+    onwarn: function ( message ) {
+      if ( /external dependency/.test( message ) ) return;
+    },
+  };
+}
+
+function defaultRollupPlugins() {
+  return [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 
+    ? config.svelte.preprocess 
+    : [config.svelte.preprocess];
+
+  const options = { 
+    ...inputOptions(input),
+    plugins: [
+      svelte({
+        preprocess: [
+          ...preprocessors,
+        ],
+      }), 
+      ...defaultRollupPlugins(),
+      ...userRollupPlugins(config),
+    ]
+  }
+  try {
+    // Create a bundle
+    bundle = await rollup(options);
+    if (bundle) {
+      await bundle.close();
+    }
+    if (bundle) {
+      await bundle.close();
+    }
+    // An array of file names this bundle depends on
+    return bundle.watchFiles.filter(dep => (dep !== input));
+
+  } catch (err) {
+    let errorMessage = `Parsing dependencies of '${input.replace(config.src, 'src/')}'`;
+    if (!fs.pathExistsSync(input)) {
+      errorMessage += `\n> File does not exist: '${input}'.`;
+    } else {
+      errorMessage += `\n> Rollup Error: ${err.code}`; 
+      if (err.code === 'PLUGIN_ERROR') {
+        errorMessage += `\n> ${err.plugin} (Error code: ${err.pluginCode})`;  
+      }
+      errorMessage += `\n> Trace: ${err.stack}`;
+    }
+    
+    throw new Error(errorMessage, { cause: err });
+  }
+  
+}
+
+export async function build(input, config, type = 'page') {
+  const ssr = (type === 'page' || type === 'template');
+  const requiredCompilerOptions = {
+    generate: ssr ? 'ssr' : 'dom', 
+    hydratable: ssr ? false : true, 
+  }
+
+  let bundle;
+  let output = {
+    js: { code: '' },
+    css: { code: '' },
+    dependencies: [],
+  };
+  // User-defined preprocessors
+  let preprocessors = config.svelte.preprocess.length > 0 
+    ? config.svelte.preprocess 
+    : [config.svelte.preprocess];
+
+  const options = { 
+    ...inputOptions(input),
+    plugins: [
+      svelte({
+        preprocess: [
+          ...preprocessors,
+        ],
+        compilerOptions: {
+          preserveComments: true,
+          preserveWhitespace: true,
+          ...config.svelte.compilerOptions,
+          ...requiredCompilerOptions,
+        },
+        extensions: config.svelte.extensions,
+      }), 
+      ...defaultRollupPlugins(),
+      ...userRollupPlugins(config),
+    ]
+  }
+
+  try {
+    bundle = await rollup(options);
+    output.dependencies = bundle.watchFiles.filter(dep => (dep !== input));
+    const { js, css } = await generateOutputs(bundle, input);
+    output.js = js;
+    output.css = css;
+
+    if (bundle) {
+      await bundle.close();
+    }
+
+    return output;
+
+  } catch (err) {
+    let absoluteBase = type !== 'cayo' 
+      ? config[`${type}s`] 
+      : pathExists.join(config.components);
+
+    let relativeFilePath = input.replace(absoluteBase, '');
+    let errorMessage = `Could not compile ${type}: '${relativeFilePath}'`;
+    errorMessage += `\n> Rollup Error: ${err.code}`; 
+    if (err.code === 'PLUGIN_ERROR') {
+      errorMessage += `\n> ${err.plugin} (Error code: ${err.pluginCode})`;  
+    }
+    errorMessage += `\n\n> Source: ${input}`;
+    errorMessage += `\n${err.frame}`
+    errorMessage += `\n> ${err.stack}`;
+
+    throw new Error(errorMessage, { cause: err });
+  }
+}
+
+async function generateOutputs(bundle, input) {
+  const outputOptions = { }
+  const { output } = await bundle.generate(outputOptions);
+  return {
+    js: {
+      code: output[0].code,
+    },
+    css: {
+      code: output[1] && output[1].fileName === 'bundle.css'
+        ? output[1].source 
+        : ''
+    }
+  };
+}

package/lib/core/codegen.js

@@ -0,0 +1,156 @@
+import path from 'path';
+import chalk from 'chalk';
+
+// Generate runtime helper that finds and parses a component instance's prop data
+export function generateGetProps() {
+  return (
+`
+function getProps(cayoElement) {
+  const json = cayoElement.dataset.cayoProps;
+  return JSON.parse(json);
+}
+`
+  );
+}
+
+// Generate the Cayo Runtime which is unique per page to render the cayos on the page
+export function generateCayoRuntime(components, fileName, _cayo) {
+  const { config, __VERSION__ } = _cayo;
+  let code = '';
+  let instances = '';
+  // Add banner
+  code += `/* ${fileName} generated by Cayo v${__VERSION__} */\n`;
+  
+  if (Object.keys(components).length !== 0) {
+    // TODO: add this path to config (internal only)
+    const componentPathBase = path.resolve(config.cayoPath, './__cayo/components');
+    Object.entries(components).forEach(([name, ids]) => {
+      // Add component dependency import
+      code += `import ${name} from '${componentPathBase}/${name}.svelte.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 = cb ? cb : (node) => node;
+  let cayos = {};
+${contents}
+  return cayos;
+}
+`
+  );
+}
+
+// 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 (
+` 
+  cayos['${cayoId}'] = {};
+  cayos['${cayoId}'].target = document.querySelector('[data-cayo-id="${cayoId}"]');
+  cayos['${cayoId}'].instance = new ${componentName}({
+    target: target(cayos['${cayoId}'].target),
+    hydrate: true,
+    props: getProps(cayos['${cayoId}'].target),
+  });
+`
+  );
+}
+
+// Generate the code to import the the generated Cayo Runtime file
+export function generateCayoRuntimeImport() {
+  return `import { default as renderCayos } from './cayo-runtime.js';\n`
+}
+
+// TODO: add links to relevant docs
+// Generate console warnings that need to show in the browser
+export function generateRuntimeIssuesScript(runtime, issues, type) {
+  const { config, document, page } = runtime;
+  const script = document.createElement('script');
+  const logs = [];
+
+  // Formatting and label stuff
+  let prefix = 'Warning';
+  let f_log = (str) => str;
+  let f_prefix = prefix
+  let consoleType = 'log';
+  if (type === 'warning') {
+    prefix = 'Warning';
+    f_log = chalk.yellow;
+    f_prefix = chalk.yellow.bold(prefix);
+    consoleType = 'warn';
+  } else if (type === 'error') {
+    prefix = 'Error';
+    f_log = chalk.redBright;
+    f_prefix = chalk.redBright.bold(prefix);
+    consoleType = 'error';
+  }
+  
+  const { 
+    cayos: cayoIssues, 
+    page: pageIssues,
+  } = issues;
+
+  script.innerHTML = `/* ${prefix}s for this page. See issues in console. */\n`;
+
+  // Handle issues derived during initial compilation of the cayo instance
+  if (Object.keys(cayoIssues).length > 0) {
+    for (const cayoId in cayoIssues) {
+      let message = `Cayo ${prefix}: Cayo '${cayoId}' has runtime issues.\n\n`;
+      for (const key in cayoIssues[cayoId]) {
+        const issue = cayoIssues[cayoId][key];
+        message += `${issue.title}: ${issue.message}\n\n`;
+        if (cayoId !== 'undefined') {
+          message += `Hint: review instances of <Cayo src="${issue.src}"> intended to be rendered on page '${page.sourcePath.replace(config.pages, '')}'\n`;
+        } else {
+          message += `Hint: review instances of <Cayo src={<undefined>}> or <Cayo> without a src prop intended to be rendered on page '${page.sourcePath.replace(config.pages, '')}'\n`;
+        }
+        if (issue.log) {
+          logs.push(`${f_log(`${f_prefix}: ${issue.log}`)} ${chalk.dim(`${page.name}`)}`);
+        }
+      }
+      script.innerHTML += `console.${consoleType}(\`${message}\`);\n`;
+    }
+  }
+  // Handle issues derived from parsing the rendered HTML page
+  if (Object.keys(pageIssues).length > 0) {
+    for (const key in pageIssues) {
+      const issue = pageIssues[key];
+      let message = `${prefix}: page '${page.name}' has runtime issues.\n\n`;
+      message += `${issue.title}: ${issue.message}\n\n`;
+      script.innerHTML += `console.${consoleType}(\`${message}\`);\n`;
+      if (issue.log) {
+        logs.push(`${f_log(`${f_prefix}: ${issue.log}`)} ${chalk.dim(`${page.name}`)}`);
+      }
+    }
+  }
+
+  return { script, logs };
+}

package/lib/core/compile/cayos.js

@@ -0,0 +1,65 @@
+import fs from 'fs-extra';
+import path from 'path';
+
+import { handleDependencies } from '../dependencies.js';
+import { Component } from '../component.js';
+import { build } from '../bundle.js';
+import logger from '../logger.js';
+
+export async function compileCayos(components, _cayo) {
+  const compiledComponents = [];
+
+  if (components === null) {
+    components = _cayo.stats.cayoComponents;
+  }
+
+  for (const [name, cayo] of Object.entries(components)) {
+    if (!fs.pathExistsSync(cayo.src)) {
+      let relativeFilePath = cayo.src.replace(_cayo.config.projectRoot, '.');
+      let errorMessage = `Could not compile cayo. Path does not exist: '${relativeFilePath}'`
+      throw new Error(errorMessage);  
+    } else {
+      compiledComponents.push(
+        await compileCayo(name, cayo, _cayo)
+      );
+    }
+    
+  }
+
+  return compiledComponents;
+}
+
+export async function compileCayo(name, cayo, _cayo) {
+  const { config } = _cayo;
+  const { src: filepath } = cayo;
+  let filename = filepath.replace(`${config.components}`, '');
+  const { js, css, dependencies } = await build(filepath, config, 'cayo');
+  
+  const depender = { 
+    type: 'component', 
+    path: filepath, 
+    dependencies,
+  }
+  
+  try {
+    await handleDependencies(depender, _cayo);
+    
+    // Write bundle to a file
+    let outputPath = path.resolve(
+      config.cayoPath, 
+      `./__cayo/components/${name}.svelte.js`
+    );
+
+    await fs.outputFile(outputPath, js.code);
+
+    // Create new Component and add it to the runtime object
+    const cayo = new Component(name, { js, css }, filepath, outputPath, dependencies, config);
+    _cayo.components.set(filepath, cayo);
+
+    return cayo;
+
+  } catch (err) {
+    throw new Error(`Compiling Cayo Component: ${filename}\n`, {cause: err});
+  }
+}
+

package/lib/core/compile/index.js

@@ -0,0 +1,3 @@
+export { compileTemplate as template } from './template.js';
+export { compilePages as pages } from './pages.js';
+export { compileCayos as cayos } from './cayos.js';

package/lib/core/compile/pages.js

@@ -0,0 +1,61 @@
+import fs from 'fs-extra';
+import fg from 'fast-glob';
+import path from 'path';
+
+import { handleDependencies } from '../dependencies.js';
+import { Page } from '../page.js';
+import { build } from '../bundle.js';
+
+export async function compilePages(pagePaths, _cayo) {
+  const compiledPages = [];
+
+  if (pagePaths === null) {
+    pagePaths = await getPagePaths(_cayo.config.pages);
+  }
+
+  for await (const pagePath of pagePaths) {
+    compiledPages.push(
+      await compilePage(pagePath, _cayo)
+    );
+  }
+
+  return compiledPages;
+}
+
+async function compilePage(filepath, _cayo) {
+  const { template, config } = _cayo;
+  let filename = filepath.replace(`${config.pages}`, '');
+
+  const { js, dependencies } = await build(filepath, config);
+
+  const depender = { 
+    type: 'page', 
+    path: filepath, 
+    dependencies: dependencies 
+  }
+  
+  try {
+    // Create the dependency tree for this page
+    // (This dep tree includes components that are children and nested children)
+    await handleDependencies(depender, _cayo);
+
+    // TODO: configure output path base in internal cayoConfig?
+    let outputPath = path.resolve(
+      config.cayoPath, 
+      `./__cayo/pages/${filename.replace('.svelte', '.svelte.js')}`
+    );
+    await fs.outputFile(outputPath, js.code);
+
+    const page = new Page(js.code, template, filepath, outputPath, dependencies, config);
+    _cayo.pages.set(filepath, page);
+
+    return page;
+
+  } catch (err) {
+    throw new Error(`Compiling page: ${filename}\n`, {cause: err});
+  }
+}
+
+async function getPagePaths(pagesPath) {
+  return await fg([path.resolve(pagesPath, './**/*.svelte')]);
+}

package/lib/core/compile/template.js

@@ -0,0 +1,24 @@
+import path from 'path';
+import fs from 'fs-extra';
+import { build } from '../bundle.js';
+import { Component } from '../component.js';
+import { writeTemplateCSS } from '../files.js';
+
+export async function compileTemplate(_cayo) {
+  const { template: templatePath, templateName } = _cayo.config;
+  let filename = `${templateName}.svelte`;
+  try {
+    const { js, dependencies } = await build(templatePath, _cayo.config, 'template');
+    let outputPath = path.resolve(_cayo.config.cayoPath, `./__cayo/template.js`);
+    await fs.outputFile(outputPath, js.code);
+
+    const Template = new Component('template', { js }, templatePath, outputPath, dependencies, _cayo.config);
+    _cayo.template = await Template.render(_cayo, { load: true });
+    await writeTemplateCSS(_cayo.template.css, _cayo);
+
+    return Template;
+
+  } catch (err) {
+    throw new Error(`Compiling template: ${filename}`, {cause: err});
+  }
+}

package/lib/core/component.js

@@ -0,0 +1,62 @@
+import { hash } from './utils.js';
+
+export class Component {
+  constructor(
+    name, 
+    output = { js: { code: '' }, css: { code: '' } }, 
+    sourcePath, 
+    modulePath, 
+    dependencies, 
+    config
+  ) {
+    this._config = config;
+    this._name = name;
+    this._dependencies = dependencies || new Set();
+    this._source = sourcePath;
+    this._module = null;
+    this._modulePath = modulePath;
+    this._output = output;
+  }
+
+  async load() {
+    this._module = (await import(`${this._modulePath}?v=${hash()}`)).default;
+    return this._module;
+  }
+
+  async render(_cayo, options = {}) {
+    const { load = false } = options;
+    if (load) await this.load();
+
+    try {
+      this._result = this._module.render();
+    } catch (err) {
+      throw new Error(`Could not render component: ${this._name} at ${this._source}`, { cause: err })
+    }
+    return this._result;
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  get dependencies() {
+    return this._dependencies;
+  }
+
+  set dependencies(deps) {
+    this._dependencies = deps;
+  }
+
+  get output() {
+    return this._output;
+  }
+
+  get source() {
+    return this._source;
+  }
+
+  get result() {
+    return this._result;
+  }
+
+}