cayo 0.9.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Matthew I. Alicea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,6 @@
+To run:
+```shell
+> node cayo dev --projectRoot test
+> node cayo dev
+> node cayo build 
+```

package/cayo.js

@@ -0,0 +1,295 @@
+#!/usr/bin/env node
+
+import yargs from 'yargs-parser';
+import chokidar from 'chokidar';
+import path from 'path';
+import chalk from 'chalk';
+import merge from 'deepmerge';
+import { createServer, createLogger, build as viteBuild } from 'vite';
+import { loadConfig, checkConfigPaths } from './lib/config.js';
+import { prerender } from './lib/prerender.js';
+import { 
+  writePageFiles,
+  writeComponentFile,
+  cleanCayoPath,
+  writeTemplateCSS,
+} from './lib/files.js';
+import { 
+  hash,
+  getPageModules, 
+  getComponentModules,
+  createTemplateManifest,
+  createPageManifest,
+  createComponentManifest,
+} from './lib/utils.js';
+
+const logger = createLogger('info', {
+  prefix: chalk.magenta.bold('[cayo]'),
+  // allowClearScreen: true,
+});
+const errorLogger = createLogger('warn', {
+  prefix: chalk.red.bold('[cayo]'),
+  // allowClearScreen: true,
+});
+
+const data = {
+  template: undefined,
+  pages: undefined,
+  components: undefined,
+}
+
+// / Handle arguments
+function resolveArgs(argv) {
+  const cmd = argv._[2];
+
+  const options = {
+    projectRoot: typeof argv.projectRoot === 'string' ? argv.projectRoot : undefined,
+    configPath: typeof argv.config === 'string' ? argv.config : undefined,
+    mode: cmd === 'build' ? 'production' : 'development',
+  }
+
+  switch (cmd) {
+    case 'build':
+    case 'dev':
+    case 'help':
+      return { cmd: cmd, options };
+    default:
+      return { cmd: 'help', options };
+  }
+}
+
+function printHelp() {
+  // TODO: help info
+  console.log('help');
+}
+
+// Run
+export async function cli(args) {
+  const argv = yargs(args);
+  const command = resolveArgs(argv);
+
+  switch(command.cmd) {
+    case 'dev':
+    case 'build':
+      run(command);
+      break;
+    case 'help':
+    default:
+      printHelp();
+  }
+}
+
+const commands = new Map([
+  ['build', async (config) => {
+    await prerenderPages(config).then((pages)=> {
+      build(config, pages);
+    });
+  }],
+  ['dev', (config) => {
+    prerenderPages(config);
+    watch(config);
+    serve(config);
+  }]
+]);
+
+async function run(command) {
+  const { cmd, options } = command;
+
+  logger.info(
+    `\n  ${chalk.magenta.bold(`cayo.${cmd}`)}${chalk.dim(` starting`)}`, 
+    { timestamp: false }
+  );
+
+  try {
+    const config = await loadConfig(options);
+    checkConfigPaths(config, errorLogger);
+
+    // Create a fresh cayo folder for this run
+    cleanCayoPath(config.cayoPath);
+
+    getTemplate(config)
+      .then(() => getPages(config))
+      .then(() => getCayoComponents(config))
+      .then((components) => {
+        handleCayoComponents(components, config);
+      })
+      .then(() => {
+        const runCommand = commands.get(cmd);
+        runCommand(config);   
+      });
+
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+async function getTemplate(config) {
+  const { src, cayoPath, templateFileName } = config;
+  return createTemplateManifest(path.resolve(src, `${templateFileName}.svelte`), cayoPath)
+    .then(async () => {
+      const { Template } = await import(path.resolve(cayoPath, `./__cayo/template.js?v=${hash()}`)) 
+      data.template = Template;
+      return data.template;
+    });
+}
+
+async function getPages(config) {
+  const { pages, cayoPath } = config;
+  return createPageManifest(pages, cayoPath)
+    .then(async () => await import(path.resolve(cayoPath, `./__cayo/pages.js?v=${hash()}`)))
+    .then(({ pages }) => {
+      data.pages = getPageModules(pages, config);
+      return data.pages;
+    });
+}
+
+async function getCayoComponents(config) {
+  const { src, cayoPath } = config;
+  return createComponentManifest(src, cayoPath)
+    .then(async () => await import(path.resolve(cayoPath, `./__cayo/components.js?v=${hash()}`)))
+    .then(({ components }) => {
+      data.components = getComponentModules(components, config);
+      return data.components;
+    });
+}
+
+function watch(config) {
+
+  const watcher = chokidar.watch(config.src, {
+    // awaitWriteFinish: {
+    //   stabilityThreshold: 1,
+    //   pollInterval: 250
+    // },
+  });
+
+  const configWatcher = chokidar.watch(path.resolve(config.src, '../cayo.config.js'));
+  configWatcher.on('change', (filePath) => {
+    logger.info(
+      chalk.yellow(`> config updated... restart dev server to use new config.`),
+      { timestamp: true, clear: true, }
+    );
+  })
+
+  const logChange = (type) => {
+    logger.info(
+      `> ${type} updated`,
+      { timestamp: true, clear: true, }
+    );
+  }
+
+  watcher.on('change', async (filePath) => {
+    if (filePath.endsWith('.svelte')) {
+      if (filePath.endsWith(`${config.templateFileName}.svelte`)) {
+        logChange('template')
+        getTemplate(config)
+          .then(() => prerenderPages(config));
+
+      } else if (filePath.startsWith(config.pages)) {
+        logChange('page');
+        getPages(config)
+          .then((pages) => {
+            let pageModule = Object.entries(pages).find(([, { modulePath }]) => modulePath === filePath);
+            let page = pageModule ? { [`${pageModule[0]}`]: pageModule[1] } : {}
+            prerenderPages(config, page);
+          })
+
+      } else if (filePath.includes(`.${config.cayoComponentInfix}`)) {
+        logChange('cayo component');
+        getCayoComponents(config)
+          .then((components) => {
+            let componentModule = Object.entries(components).find(([, { modulePath }]) => modulePath === filePath);
+            handleCayoComponent(componentModule[0], componentModule[1].modulePath, config);
+          })
+      // TODO: watch component changes
+      // } else if (componentFileChanged) {
+      // find out which pages are affected
+      // find out which components are affected (imports)?
+      } else {
+        prerenderPages(config);
+      }
+    }
+  });
+  // watcher.close();
+}
+
+async function serve(config) {
+
+  const internalConfig = {
+    root: config.cayoPath, 
+    publicDir: config.publicDir,
+    mode: config.mode,
+    base: config.base,
+    configFile: false,
+  } 
+
+  const mergedConfig = merge(config.viteConfig, internalConfig);
+  
+  const server = await createServer({
+    ...mergedConfig,
+  })
+
+  await server.listen()
+}
+
+async function build(config, pages) {
+
+  // Create inputs for rollup based on the pages
+  const inputs = {};
+
+  for (const [, page] of Object.entries(pages)) {
+    if (page.filePath === 'index') {
+      inputs['main'] = path.resolve(config.cayoPath, 'index.html');
+    } else {
+      inputs[page.filePath] = path.resolve(config.cayoPath, `${page.filePath}/index.html`);
+    }
+  }
+
+  const internalConfig = {
+    root: config.cayoPath, 
+    publicDir: config.publicDir,
+    base: config.base,
+    mode: config.mode,
+    build: {
+      outDir: config.build.outDir,
+      assetsDir: config.build.assetsDir,
+      emptyOutDir: true,
+      rollupOptions: {
+        input: { ...inputs },
+      }
+    },
+  };
+
+  const mergedConfig = merge(config.viteConfig, internalConfig);
+
+  return await viteBuild({
+    ...mergedConfig,
+  })
+}
+
+async function prerenderPages(config, pages = data.pages) {
+  const { template: Template, components } = data;
+  const { prerendered, template } = prerender(Template, pages, components, config, logger);
+
+  for (const [, page] of Object.entries(prerendered)) {
+    await writePageFiles(page, config.cayoPath, logger, config);
+  }
+
+  // Does nothing, if no CSS generated by template file render
+  await writeTemplateCSS(template.css, config.cayoPath, logger, config);
+
+  return prerendered;
+}
+
+async function handleCayoComponent(name, modulePath, config) {
+  writeComponentFile(name, modulePath, config.cayoPath, logger);
+}
+
+async function handleCayoComponents(components = data.components, config) {
+  Object.keys(components).forEach(name => {
+    let component = components[name];
+    handleCayoComponent(name, component.modulePath, config);
+  })
+}
+
+cli(process.argv);

package/jsconfig.json.txt

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": false
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/lib/cli.js

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,77 @@
+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() {
+${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: document.querySelector('[data-cayo-id="${cayoId}"]'),
+    hydrate: true,
+    props: getProps('${cayoId}'),
+  });
+`
+  );
+}

package/lib/components/Cayo.svelte

@@ -0,0 +1,24 @@
+<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}>Cayo loading...<slot/></div>
+<slot/>
+

package/lib/config.js

@@ -0,0 +1,155 @@
+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
+}