cayo 0.9.9 → 0.9.11

package/lib/core/render/prerender.js

@@ -0,0 +1,240 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { JSDOM } from 'jsdom';
+import { Renderer } from './renderer.js';
+import { compileCayos } from '../compile/cayos.js';
+import { generateCayoRuntime, generateRuntimeIssuesScript } from '../codegen.js';
+import { generateCayoComponentId } from '../utils.js';
+import logger from '../logger.js';
+
+export async function prerender(page, _cayo) {
+  const renderer = new Renderer(page.layout);
+  const componentList = new Set();
+
+  const content = await renderer.render(page, _cayo.config);
+  // Postprocess the content, get deps and inject dep references
+  const processed = await processPage(
+    content, 
+    page, 
+    _cayo, 
+    logger
+  );
+
+  const { cayoInstances } = processed;
+
+  Object.keys(cayoInstances).forEach(component => componentList.add(component))
+
+  return {
+    ...processed,
+    components: [...componentList],
+  }
+}
+
+// Derive JS dependencies from the prerendered html
+export async function processPage(content, page, _cayo, logger) {
+  const { config } = _cayo;
+  // JSDOM Initialization
+  const dom = new JSDOM(content.html);
+  const { document } = dom.window;
+  // For storing issues while we process the page
+  const warnings = {
+    cayos: {},
+    page: {},
+  };
+  const errors = {
+    cayos: {},
+    page: {},
+  };
+  // For generated file contents
+  let js = { code: '' };
+  let entry = { path: '' };
+  // Get component instance info
+  const cayoIds = [];
+  const cayoInstances = {};
+  const cayoAssets = {};
+  // Find all cayo instances in the markup
+  for (const el of document.querySelectorAll('[data-cayo-src]')) {
+    let src = el.dataset.cayoSrc;
+    if (src !== '') {
+      const { id, name } = generateCayoComponentId(src);
+      cayoIds.push(id);
+      el.dataset.cayoId = id;
+
+      // Get warnings added by the Cayo component during compile time
+      if (el.dataset.cayoWarn && el.dataset.cayoWarn !== '{}') {
+        warnings.cayos[id] = JSON.parse(el.dataset.cayoWarn);
+      }
+      
+      // Add cayos to stats for dependency handling
+      let absoluteSrc = path.resolve(config.components, src);
+      if (_cayo.stats.cayoComponents[name]) {
+        _cayo.stats.cayoComponents[name].src = absoluteSrc;
+        _cayo.stats.cayoComponents[name].pages.add(page.sourcePath);
+      } else {
+        _cayo.stats.cayoComponents[name] = { 
+          src: absoluteSrc,
+          pages: new Set([page.sourcePath]),
+        }; 
+      }
+      _cayo.stats.dependencies.pages[page.sourcePath].add(absoluteSrc);      
+      
+      // Compile cayos & keep track of them for this page
+      const [cayo] = await compileCayos({ [name]: _cayo.stats.cayoComponents[name] }, _cayo);
+      // Store references of each cayo instance on the page
+      if (cayoInstances[name]) {
+        cayoInstances[name].push(id);
+      } else {
+        cayoInstances[name] = [id];
+      }
+      // Include the assets needed by a cayo
+      // CSS is the only thing currently output other than the component JS
+      if (cayo && !cayoAssets[name]) {
+        cayoAssets[name] = { 
+          css: { 
+            code: cayo.output.css.code 
+          } 
+        };
+      }
+      
+    } else {
+      // At least one error will be reported if the src is invalid
+      if (el.dataset.cayoWarn) {
+        warnings.cayos['undefined'] = JSON.parse(el.dataset.cayoWarn);
+      }
+    }
+    // Clean up data attributes we don't need during runtime
+    delete el.dataset.cayoSrc;
+    delete el.dataset.cayoWarn;
+  }
+
+  let cayoAssetCssElements = '';
+  for (const [name, cayo] of Object.entries(cayoAssets)) {
+    if (cayo.css.code !== '') {
+      cayoAssetCssElements += config.css.internal 
+        ? `<style>/* ${name} CSS */${cayo.css.code}</style>\n`
+        : `<link rel="stylesheet" href="/${name}.css">\n`
+    }
+  }
+  const cayoAssetsCssMarker = document.querySelector('link[data-cayo-assets-css]');
+  cayoAssetsCssMarker.outerHTML = cayoAssetCssElements;
+
+  // Get user-specified entry placeholder
+  const entryScriptPlaceholder = document.querySelector('script[data-cayo-entry]');
+  let entryScriptSrc = entryScriptPlaceholder ? entryScriptPlaceholder.src : '';
+  // This is injected by Renderer.render based on the template
+  const entryScript = document.querySelector(`script[type="module"][src="./index.js"]`);
+
+  if (entryScriptSrc) {
+    // Remove user-specified entry file placeholder
+    entryScriptPlaceholder.remove();
+    // Validate the file path
+    const absoluteEntrySrcPath = path.resolve(config.src, entryScriptSrc);
+    if (!fs.pathExistsSync(absoluteEntrySrcPath)) {
+      let relativePath = entryScriptSrc.replace(config.projectRoot, '');
+      errors.page.entryFileDoesNotExist = {
+        title: `Bad entry file`,
+        src: page.sourcePath.replace(config.pages, ''),
+        message: `Entry file '${relativePath}' does not exist.`,
+        log: `Entry file '${entryScriptSrc}' does not exist.`,
+      }
+      // Remove the entry file script because the file doesn't exist
+      entryScript.remove();
+    } else {
+      entry.path = absoluteEntrySrcPath;
+      _cayo.stats.dependencies.pages[page.sourcePath].add(absoluteEntrySrcPath);
+    }
+  } else {
+    if (cayoIds.length > 0) {
+      let message = 'An entry file is required in order to render Cayos on the page.'
+      warnings.page.noEntryFile = {
+        title: `No entry file`,
+        src: page.sourcePath.replace(config.pages, ''),
+        message: message,
+        log: `No entry file found. ${message}`,
+      }
+    } else {
+      // Remove the entry point script tag because the page doesn't need any JS
+      entryScript.remove();
+    }
+  }
+
+  // Generate JS for cayos to run in the browser as needed
+  const cayoRuntimePath = page.url === '/' ? `/index.js` : `${page.url}/index.js`;
+  js = generateCayoRuntime(cayoInstances, cayoRuntimePath, _cayo);
+
+  // Indicate that we need to make this entry ready to render cayos later,
+  // if there are cayo instances on this page
+  if (cayoIds.length > 0) {
+    entry.renderCayos = true;
+  }
+  
+  // Append runtime warnings
+  const { 
+    script: warningScript, 
+    logs: warningLogs 
+  } = generateRuntimeIssuesScript({ config, document, page }, warnings, 'warning');
+  if (config.mode === 'development') {
+    document.body.appendChild(warningScript);
+  }
+  // Append runtime errors
+  const { 
+    script: errorScript, 
+    logs: errorLogs,
+  } = generateRuntimeIssuesScript({ config, document, page }, errors,  'error');
+  if (config.mode === 'development') {
+    document.body.appendChild(errorScript);;
+  }
+  // Log any runtime warnings and errors
+  for (const message of [...warningLogs, ...errorLogs]) {
+    logger.log.info(
+      message, 
+      { timestamp: true, clear: false, }
+    );
+  }
+  
+  // Construct the correct HTML string based on the document structure
+  // that was 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)
+  const tags = tagsExist(content.html);
+  let processedHTML = '';
+  if (tags.doctype) {
+    processedHTML += tags.doctype;
+  }  
+  if (tags.html) {
+    processedHTML += document.documentElement.outerHTML;
+  } else {
+    if (tags.head) {
+      processedHTML += document.head.outerHTML;
+    } else {
+      processedHTML += document.head.innerHTML;
+    }
+
+    if (tags.body) {
+      processedHTML += document.body.outerHTML;
+    } else {
+      processedHTML += document.body.innerHTML;
+    }
+  }
+
+  return { 
+    html: processedHTML, 
+    css: content.css.code, 
+    js, 
+    cayoInstances,
+    cayoAssets,
+    entry,
+  };
+}
+
+function tagsExist(source) {
+  const doctype = source.match(/\<!DOCTYPE\s\w*\>/g);
+  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 {
+    doctype: doctype === null ? false : doctype,
+    head: head === null ? false : true,
+    body: body === null ? false : true,
+    html: html === null ? false : true,
+  };
+}

package/lib/core/render/renderer.js

@@ -0,0 +1,52 @@
+export class Renderer {
+
+  constructor(template) {
+    this.template = template;
+  }
+
+  async render(page, config) {
+    const { css: cssOptions } = config;
+    const Component = await page.load();
+    const res = Component.render();
+    const { html, css, head } = res;
+
+    let cssElements = '';
+    if (cssOptions.internal === false) {
+      if (this.template.css && this.template.css.code !== '') {
+        cssElements += `<link rel="stylesheet" href="/__index.css">\n`;
+      }
+      cssElements += `<link rel="stylesheet" href="./index.css">`;
+      
+    } else {
+      if (this.template.css && this.template.css.code !== '') {
+        cssElements += `<style>/* Template CSS */${this.template.css.code}</style>\n`;  
+      }
+      cssElements += `<style>${css.code}</style>`;
+    }
+
+    cssElements += '\n<link data-cayo-assets-css>';
+
+    const title = () => {
+      let title = page.name;
+      title = title.charAt(0).toUpperCase() + title.substring(1);
+      return `<title>${title}</title>`
+    }
+
+    // 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
+      // FIXME#83: this regex is bad; accidentally removes elements like head
+      // Ignore placeholders wrapped in HTML comments
+      // .replace(/<!--[^]*\%cayo\.\w+\%[^]*-->/g, '') 
+        .replace('%cayo.title%', () => !head.includes('<title>') ? title() : '')
+        .replace('%cayo.head%', () => head)
+        .replace('%cayo.body%', () => html)
+        .replace('%cayo.css%', () => cssElements)
+        // Vite needs the entry file in this format
+        .replace('%cayo.script%', () => `<script type="module" src="./index.js"></script>`), 
+      css,
+    }
+  }
+}

package/lib/core/utils.js

@@ -0,0 +1,60 @@
+import path from 'path';
+import crypto from 'crypto';
+import fs from 'fs-extra';
+
+// https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/utils/hash.ts
+export function hash(str = '', bytes = 5) {
+  const random = crypto.randomBytes(bytes).toString('hex');
+  str += random;
+  
+  str = str.replace(/\r/g, '');
+  let hash = 5381;
+  let i = str.length;
+
+  while (i--) hash = ((hash << bytes) - hash) ^ str.charCodeAt(i);
+  return (hash >>> 0).toString(36);
+}
+
+export function generateSafeName(inputPath) {
+  return inputPath
+    .replace(/^\.\//g, '')
+    .replace(/\/+/g, '__')
+    .replace(/\-+/g, '_');
+}
+
+export function generateCayoComponentId(componentPath) {
+  const name = generateSafeName(componentPath)
+    .replace('.cayo.svelte', '');
+  
+  const id = `${name}-${hash(name)}`;
+
+  return {
+    id,
+    name,
+  };
+}
+
+// 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)));
+}
+
+// TODO: need to use this somewhere?
+export function getOutDir(config) {
+  return config.mode === 'production' ? config.buildOptions.outDir : config.cayoPath;
+}
+
+export async function debugStats(_cayo) {
+  const { stats, config } = _cayo;
+  fs.outputFile(path.resolve(config.cayoPath, './__cayo/stats.json'), JSON.stringify(
+    stats, 
+    (key, value) => value instanceof Set ? [...value] : value,
+    2
+  ));
+}

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "cayo",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "type": "module",
   "scripts": {
-    "start": "node cayo dev --projectRoot test"
+    "start": "node cayo dev --projectRoot test",
+    "build": "node scripts/build"
+  },
+  "imports": {
+    "#core/*": "./lib/core/*"
   },
   "bin": {
     "cayo": "cayo.js"
   },
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/matthew-ia/cayo.git"
@@ -18,21 +29,21 @@
     "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",
+    "@rollup/plugin-json": "^4.1.0",
     "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",
+    "precinct": "^9.0.0",
+    "prettier": "^2.7.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-svelte": "^7.1.0",
+    "svelte": "^3.49.0",
+    "vite": "^3.1.2",
     "yargs-parser": "^20.2.9",
     "zod": "^3.10.3"
   }

package/scripts/build.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+// Build
+//   - Compile Svelte components to JS
+//   - Generate an index file for these components to be 
+//     used as the Cayo package's exports
+
+import fs from 'fs-extra';
+import { validateConfig } from '../lib/core/config.js';
+import { build } from '../lib/core/bundle.js';
+import logger from '../lib/core/logger.js';
+import chalk from 'chalk';
+import path from 'path';
+
+async function compileComponents(components, config) {
+  const output = {};
+  for (const component of components) {
+    try {
+      const inputPath = path.resolve(`./src/${component}.svelte`);
+      const outputPath = path.resolve(`./dist/${component}.svelte.js`);
+      const { js } = await build(inputPath, config);
+      await fs.outputFile(outputPath, js.code);
+      output[component] = { path: `./${component}.svelte.js` }
+      console.log(chalk.green.bold(`Compiled ${component}.svelte → ${component}.svelte.js`));
+      console.log(chalk.dim(`./dist/${component}.svelte.js`));
+    } catch (err) {
+      throw new Error(`Cayo Internal Error: Could not compile ./src/${component}.svelte`, { cause: err });
+    }
+  }
+
+  return output;
+}
+
+function generateIndex(modules) {
+  let js = '';
+  for (const m of modules) {
+    js += `export { default as ${m[0]} } from '${m[1]}';\n`;
+  }
+  return { code: js };
+}
+
+try {
+  const cayoConfig = await validateConfig({});
+  const output = await compileComponents(['cayo', 'entry'], cayoConfig);
+  const index = generateIndex([
+    // Tuples of modules to import in the index file
+    ['Cayo', output.cayo.path],
+    ['Entry', output.entry.path],
+  ]);
+  await fs.outputFile('./dist/index.js', index.code)
+    .then(() => {
+      console.log(chalk.green.bold(`✅ Components built.`));
+      console.log(chalk.dim(`./dist/index.js`));
+    });
+
+} catch (err) {
+  logger.error(err);
+  console.error(err.stack);
+  process.exit(1);
+}

package/src/cayo-warnings.js

@@ -0,0 +1,37 @@
+export function getWarnings(src, badProps) {
+  const warnings = {};
+  checkInvalidSrc(warnings, src);
+  checkBadProps(warnings, src, badProps);
+  return warnings;
+}
+
+// Warning: invalid src prop')
+function checkInvalidSrc(warnings, src) {
+  if (!src || typeof src !== 'string') {
+    warnings.invalidSrc = {
+      title: `Invalid src prop`,
+      src: !src ? 'undefined' : typeof src,
+      message: `The src prop is required and must be a string.`,
+      log: `Use of <Cayo> without a src prop found. No cayo instance will be rendered.`,
+    }
+  }
+}
+
+// Warning: unserializable props
+function checkBadProps(warnings, src, keys) {
+  if (keys.length > 0) {
+    let propsStr = '';
+    for (let i = 0; i < keys.length; i++) {
+      propsStr += `'${keys[i]}'`;
+      if (i+1 < keys.length) {
+        propsStr += `, `;
+      }
+    }
+    warnings.badProps = {
+      title: `Bad props`,
+      src,
+      message: `Unserializable props found: ${propsStr}. Cayo component props must be serializable in order to be used for hydration.`,
+      log: `Unserializable instance props found: ${propsStr}.`,
+    }
+  }
+}

package/src/cayo.svelte

@@ -0,0 +1,36 @@
+<script>
+  export let src;
+  import { getWarnings } from './cayo-warnings.js';
+
+  // Save unserializable prop keys (during stringification)
+  // so we can report them later
+  const badProps = [];
+  function replacer(key, value) {
+    const type = typeof value;
+    if (
+      type === 'function' || 
+      type === 'undefined' || 
+      type === 'symbol'
+    ) {
+      badProps.push(key);
+    }
+    
+    return value;
+  };
+
+  const json = JSON.stringify({...$$restProps}, replacer);
+  const warnings = getWarnings(src, badProps);
+  const cayoInstanceData = {
+    'data-cayo-id': '',
+    'data-cayo-src': !warnings.invalidSrc ? `${src}` : '',  
+    'data-cayo-props': json,
+  };
+  if (warnings) {
+    cayoInstanceData['data-cayo-warn'] = JSON.stringify(warnings);
+  }
+
+</script>
+
+<div {...cayoInstanceData}>
+  <slot/>
+</div>

package/src/entry.svelte

@@ -0,0 +1,6 @@
+<script>
+  export let src;
+</script>
+<slot>
+  <script src="{src}" data-cayo-entry />
+</slot>

package/template/cayo.config.js

@@ -0,0 +1,3 @@
+export default {
+  // options...
+}

package/template/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "cayo dev",
+    "build": "cayo build"
+  }
+}

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/{tests/basic cases (old)/src/__index.svelte → template/src/__template.svelte}

@@ -2,17 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏝</text></svg>">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     %cayo.title%
+    %cayo.css%    
     %cayo.head%
   </head>
   <body>
-    <!-- 
-      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>
+</html>

package/template/src/components/counter.cayo.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let count = 0;
+</script>
+
+<div class="wrapper">
+  <button on:click={() => count++}>Count: {count}</button>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    justify-content: center;
+  }
+  button {
+    padding: .5rem;
+    background-color: transparent;
+    border: 1px solid rgba(81, 95, 240, .75);
+    color: white;
+    border-radius: 5px;
+    transition: .2s;
+  }
+  button:hover {
+    cursor: pointer;
+    border-color: rgb(81, 95, 240);
+    background-color: rgba(81, 95, 240, .25);
+  }
+</style>

package/template/src/index.js

@@ -0,0 +1,4 @@
+import './style.css';
+window.addEventListener('load', () => {
+  renderCayos();
+})

package/template/src/pages/index.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Cayo, Entry } from 'cayo';
+  const heading = '🏝 Cayo';
+</script>
+
+<h1>{heading}</h1>
+<Cayo src="counter.cayo.svelte" />
+<Entry src="index.js" />
+
+<style>
+  h1 {
+    text-align: center;
+    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+</style>

package/template/src/style.css

@@ -0,0 +1,13 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+  background-color: #232731;
+  color: white;
+}
+h1 {
+  margin-top: 0;
+}