cayo 0.9.0

package/lib/files.js

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

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

@@ -0,0 +1,45 @@
+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` : '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>`;
+    }
+
+    return {
+      html: this.template.html
+        // Ignore placeholders wrapped in HTML comments
+        .replaceAll(/<!--[^]*\%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

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

package/lib/utils.js

@@ -0,0 +1,120 @@
+import fs from 'fs-extra';
+import fg from 'fast-glob';
+import crypto from 'crypto';
+import chalk from 'chalk';
+import path from 'path';
+
+export function getPageModules(modules, config) {
+  // TODO: build path from config
+  const extRegex = new RegExp(String.raw`(\.svelte)$`);
+
+  return Object.entries(modules).reduce((pages, [modulePath, page]) => {
+    // Make these paths actually useful
+    // /^(.+)\/pages/
+    // /^(\/\w+)*\/pages/
+    const filePath = modulePath.replace(/^(.+)\/pages\//, '').replace(extRegex, '')
+    const urlPath = filePath === 'index' ? filePath.replace(/index$/, '/') : `${filePath}/`
+    // name = name.split('.', 1)[0];
+    pages[urlPath] = {
+      Component: page.default,
+      meta: page.meta ? page.meta : {},
+      filePath,
+      modulePath,
+      urlPath
+    }
+    return pages;
+  }, {})
+}
+
+export function getComponentModules(modules, config) {
+
+  return Object.entries(modules).reduce((components, [modulePath, component]) => {
+    const componentNameRegex = /\/(?<name>\w+)\.cayo\.svelte/; // Foo-{hash}
+    const name = modulePath.match(componentNameRegex).groups.name;
+    if (components[name]) {
+      config.logger.info(
+        chalk.red(
+          `Cayo component with name '${name}' already exists. Cayo components must have unique file names.`
+        ) + chalk.dim(`\n\t\t\t${modulePath}`), 
+        { timestamp: true, clear: true, }
+      );
+    }
+    components[name] = {
+      Component: component.default,
+      modulePath,
+    }
+    return components;
+  }, {})
+}
+
+export function hash(bytes = 5) {
+  return crypto.randomBytes(bytes).toString('hex');
+}
+
+export async function getPageModulePaths(pagesPath) {
+  return await fg([path.resolve(pagesPath, './**/*.svelte')]);
+}
+
+export async function getComponentModulePaths(srcPath) {
+  return await fg([path.resolve(srcPath, './components/**/*.cayo.svelte')]);
+}
+
+export async function createPageManifest(pagesPath, outDir) {
+  const pagePaths = await getPageModulePaths(pagesPath);
+  let importPages = `import { createRequire } from 'module';\n`
+  importPages += `const require = createRequire(import.meta.url);\n`
+  importPages += `require('svelte/register');\n`;
+  pagePaths.forEach((path, i) => {
+    importPages += `delete require.cache['${path}'];\n`
+    importPages += `const page_${i} = require('${path}');\n`;
+  }); 
+  importPages += 'export const pages = {\n';
+  pagePaths.forEach((path, i) => {
+    importPages += `  '${path}': page_${i},\n`;
+  })
+  importPages += '}\n';
+  return await fs.outputFile(path.resolve(outDir, './__cayo/pages.js'), importPages);
+}
+
+export async function createComponentManifest(srcPath, outDir) {
+  const componentPaths = await getComponentModulePaths(srcPath);
+  let importComponents = `import { createRequire } from 'module';\n`;
+  importComponents += `const require = createRequire(import.meta.url);\n`;
+  importComponents += `require('svelte/register');\n`;
+  componentPaths.forEach((path, i) => {
+    importComponents += `delete require.cache['${path}'];\n`;
+    importComponents += `const component_${i} = require('${path}');\n`;
+  }); 
+  importComponents += 'export const components = {\n';
+  componentPaths.forEach((path, i) => {
+    importComponents += `  '${path}': component_${i},\n`;
+  })
+  importComponents += '}\n';
+  return await fs.outputFile(path.resolve(outDir, './__cayo/components.js'), importComponents);
+}
+
+
+export async function createTemplateManifest(templatePath, outDir) {
+  let importTemplate = `import { createRequire } from 'module';\n`;
+  importTemplate += `const require = createRequire(import.meta.url);\n`;
+  importTemplate += `require('svelte/register');\n`;
+  importTemplate += `delete require.cache['${templatePath}'];\n`;
+  importTemplate += `export const Template = require('${templatePath}').default;\n`;
+  return await fs.outputFile(path.resolve(outDir, './__cayo/template.js'), importTemplate);
+}
+
+
+// Credit: https://github.com/snowpackjs/astro
+/** Add / to the end of string (but don’t double-up) */
+export function addTrailingSlash(_path) {
+  return _path.replace(/\/?$/, '/');
+}
+
+export function normalizePath(root, _path) {
+  if (root === _path) return root;
+  return path.normalize(path.join(root, addTrailingSlash(_path)));
+}
+
+export function getOutDir(config) {
+  return config.mode === 'production' ? config.buildOptions.outDir : config.cayoPath;
+}

package/lib/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import sveltePreprocess from 'svelte-preprocess'
+
+export default defineConfig({
+  clearScreen: false,
+  plugins: [svelte({
+    preprocess: sveltePreprocess({ preserve: ['json'] }),
+    compilerOptions: {
+      hydratable: true,
+    },
+  })],
+  server: {
+    port: '5000',
+  }
+});

package/notes.md

@@ -0,0 +1,3 @@
+```bash
+vite build --outDir dist --ssr prerender.js --mode development && node dist/prerender.js
+```

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "cayo",
+  "version": "0.9.0",
+  "type": "module",
+  "scripts": {
+    "start": "node cayo dev --projectRoot test"
+  },
+  "bin": {
+    "cayo": "cayo.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matthew-ia/cayo.git"
+  },
+  "author": "Matthew I. Alicea",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matthew-ia/cayo/issues"
+  },
+  "homepage": "https://github.com/matthew-ia/cayo#readme",
+  "devDependencies": {
+    "@vitejs/plugin-legacy": "^1.6.2"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
+    "chalk": "^2.4.2",
+    "chokidar": "^3.5.2",
+    "deepmerge": "^4.2.2",
+    "fast-glob": "^3.2.7",
+    "fs-extra": "^10.0.0",
+    "jsdom": "^18.0.0",
+    "linkedom": "^0.13.0",
+    "svelte": "^3.37.0",
+    "svelte-preprocess": "^4.7.4",
+    "vite": "^2.6.4",
+    "yargs-parser": "^20.2.9",
+    "zod": "^3.10.3"
+  }
+}

package/test/cayo.config.js

@@ -0,0 +1,35 @@
+
+// vite config example
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import sveltePreprocess from 'svelte-preprocess'
+// const viteConfig = defineConfig({
+//   // root: './.cayo/',
+//   plugins: [svelte({
+//     preprocess: sveltePreprocess({ preserve: ['json'] }),
+//     compilerOptions: {
+//       hydratable: true,
+//     },
+//   })],
+// });
+
+export default {
+  // projectRoot: '.',
+  // css: {
+  //   internal: false,
+  // },
+  templateFileName: '__layout',
+  viteConfig: {
+    base: '/vite/',
+    plugins: [svelte({
+      preprocess: sveltePreprocess({ preserve: ['json'] }),
+      compilerOptions: {
+        hydratable: true,
+      },
+    })],
+    server: {
+      port: '5005',
+    },
+  },
+  base: '/cayo/'
+}

package/test/public/assets/cow.js

@@ -0,0 +1 @@
+console.log("I'm main");

package/test/src/__layout.svelte

@@ -0,0 +1,20 @@
+<!-- <!DOCTYPE html> -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    %cayo.title%
+    %cayo.css%    
+    %cayo.head%
+  </head>
+  <body class="hey">
+    <!-- 
+      TODO: Show how to condtionally render any of these pieces based on dev vs. prod
+      E.g., I need to remove head from prod, but want it there in dev
+    -->
+    %cayo.body%
+    %cayo.script%
+  </body>
+  
+</html>

package/test/src/components/Cool.cayo.svelte

@@ -0,0 +1,4 @@
+<script>
+  export let beans = '';
+</script>
+<div>{beans}</div>

package/test/src/components/Some.svelte

@@ -0,0 +1 @@
+a

package/test/src/index.js

@@ -0,0 +1,5 @@
+// console.log("I'm main");
+import { default as renderComponents } from './cayo-runtime.js';
+document.addEventListener('DOMContentLoaded', () => {
+  renderComponents();
+});

package/test/src/main2.js

@@ -0,0 +1 @@
+console.log("I'm main also");

package/test/src/pages/hey.svelte

@@ -0,0 +1,8 @@
+yessir
+<br><a href="/">Back</a>
+
+<style>
+  br {
+    display: block;
+  }
+</style>

package/test/src/pages/howdy.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Cayo from '../../../lib/components/Cayo.svelte';
+</script>
+
+howdyyy
+<br><a href="/">Back</a>
+<Cayo name="Cool" beans='on Howdy' />
+
+<slot name="entry">
+  <script src="/main2.js" data-cayo-entry />
+</slot>

package/test/src/pages/index.svelte

@@ -0,0 +1,33 @@
+<script context="module">
+  export const meta = {
+    title: 'Home',
+  };
+</script>
+<script>
+  import Cayo from '../../../lib/components/Cayo.svelte';
+</script>
+
+
+I'm index howdy ok<br>
+<a href="/howdy/">Howdy</a><br>
+<a href="/hey/" class="red">Hey</a>
+<a href="/some/page/" class="red">Some</a>
+
+<Cayo name="Cool" beans='ayo'></Cayo>
+<Cayo name="Cool" beans='beeeeaaaaasnnss' />
+<Cayo name="Cool" beans='NOT BEANS' />
+
+<img src="/images/app-icon.png" alt="">
+
+<slot name="entry">
+  <script src="/index.js" data-cayo-entry />
+</slot>
+
+<style>
+  .red {
+    color: red;
+  }
+  img {
+    width: 50px;
+  }
+</style>

package/test/src/pages/some/page.svelte

@@ -0,0 +1,2 @@
+<div>hey</div>
+<br><a href="/">Back</a>

package/tests/asset-dir/cayo.config.js

@@ -0,0 +1,38 @@
+
+// vite config example
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import sveltePreprocess from 'svelte-preprocess'
+// const viteConfig = defineConfig({
+//   // root: './.cayo/',
+//   plugins: [svelte({
+//     preprocess: sveltePreprocess({ preserve: ['json'] }),
+//     compilerOptions: {
+//       hydratable: true,
+//     },
+//   })],
+// });
+
+export default {
+  // projectRoot: '.',
+  // css: {
+  //   internal: false,
+  // },
+  templateFileName: '__layout',
+  viteConfig: {
+    // base: '/vite/',
+    plugins: [svelte({
+      preprocess: sveltePreprocess({ preserve: ['json'] }),
+      compilerOptions: {
+        hydratable: true,
+      },
+    })],
+    server: {
+      // port: '5005',
+    },
+  },
+  build: {
+    assetsDir: 'some/specific/path',
+  },
+  base: '/some/specific/path/',
+}