feat: add linkPrefetch to config

fix: use optimize-links on all pages
chore: fix portfolio build
2021-05-21 15:54:36 -05:00 · 2021-05-21 15:54:36 -05:00 · 2021-05-21 15:54:36 -05:00 · 2021-05-21 15:54:36 -05:00
7 changed files with 190 additions and 4 deletions
--- a/examples/portfolio/src/pages/404.astro
+++ b/examples/portfolio/src/pages/404.astro
@ -2,6 +2,7 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer/index.jsx';
 import Nav from '../components/Nav/index.jsx';
 import MainHead from '../components/MainHead.astro';
 ---
 <html>
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@ -9,7 +9,7 @@
    ".": "./astro.mjs",
    "./snowpack-plugin": "./snowpack-plugin.cjs",
    "./components/*": "./components/*",
-    "./runtime/svelte": "./dist/frontend/runtime/svelte.js"
+    "./runtime/*": "./dist/frontend/runtime/*.js"
  },
  "imports": {
    "#astro/compiler": "./dist/compiler/index.js",
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@ -28,6 +28,8 @@ export interface AstroConfig {
    site?: string;
    /** Generate sitemap (set to "false" to disable) */
    sitemap: boolean;
    /** Automatically prefetch internal <a> links (set to "false" to disable) */
    linkPrefetch?: boolean;
  };
  /** Options for the development server run with `astro dev`. */
  devOptions: {
--- a/packages/astro/src/ast.ts
+++ b/packages/astro/src/ast.ts
@ -13,7 +13,10 @@ export function getAttr(attributes: Attribute[], name: string): Attribute | unde
 export function getAttrValue(attributes: Attribute[], name: string): string | undefined {
  const attr = getAttr(attributes, name);
  if (attr) {
-    return attr.value[0]?.data;
+    const child = attr.value[0];
    if (!child) return;
    if (child.type === 'Text') return child.data;
    if (child.type === 'MustacheTag') return child.expression.codeChunks[0];
  }
 }
--- a/packages/astro/src/compiler/transform/index.ts
+++ b/packages/astro/src/compiler/transform/index.ts
@ -6,9 +6,9 @@ import { walk } from 'estree-walker';
 // Transformers
 import transformStyles from './styles.js';
 import transformDoctype from './doctype.js';
 import optimizeLinks from './optimize-links.js';
 import transformModuleScripts from './module-scripts.js';
 import transformCodeBlocks from './prism.js';
 interface VisitorCollection {
  enter: Map<string, VisitorFn[]>;
  leave: Map<string, VisitorFn[]>;
@ -84,7 +84,7 @@ export async function transform(ast: Ast, opts: TransformOptions) {
  const cssVisitors = createVisitorCollection();
  const finalizers: Array<() => Promise<void>> = [];
-  const optimizers = [transformStyles(opts), transformDoctype(opts), transformModuleScripts(opts), transformCodeBlocks(ast.module)];
+  const optimizers = [transformStyles(opts), transformDoctype(opts), optimizeLinks(opts), transformModuleScripts(opts), transformCodeBlocks(ast.module)];
  for (const optimizer of optimizers) {
    collectVisitors(optimizer, htmlVisitors, cssVisitors, finalizers);
--- a/packages/astro/src/compiler/transform/optimize-links.ts
+++ b/packages/astro/src/compiler/transform/optimize-links.ts
@ -0,0 +1,60 @@
 import type { Transformer, TransformOptions } from '../../@types/transformer';
 import { getAttrValue } from '../../ast.js';
 /** Transform <!doctype> tg */
 export default function (_opts: TransformOptions): Transformer {
  return {
    visitors: {
      html: {
        Element: {
          leave(node) {
            let name = node.name;
            if (name !== 'body') {
              return;
            }
            if (node.children?.find(el => el.name === 'script' && el.data.linkOptim)) return;
            const prefetchScript = {
              start: 0,
              end: 0,
              type: 'Element',
              name: 'script',
              data: {
                linkOptim: true
              },
              attributes: [
                {
                  type: 'Attribute',
                  name: 'type',
                  value: [
                    {
                      type: 'Text',
                      raw: 'module',
                      data: 'module',
                    },
                  ],
                },
                {
                  type: 'Attribute',
                  name: 'src',
                  value: [
                    {
                      type: 'Text',
                      raw: '/_astro_internal/runtime/prefetch.js',
                      data: '/_astro_internal/runtime/prefetch.js',
                    },
                  ],
                },
              ],
              children: [],
            };
            const newBody = { ...node, children: [...(node.children ?? []), prefetchScript] };
            this.replace(newBody);
          }
        },
      },
    },
    async finalize() {},
  };
 }
--- a/packages/astro/src/frontend/runtime/prefetch.ts
+++ b/packages/astro/src/frontend/runtime/prefetch.ts
@ -0,0 +1,120 @@
 // Cache of URLs we've already prefetched
 const cache = new Set();
 const listeners = new Map<HTMLAnchorElement, (...args: any) => any>();
 const events = ["focus", "pointerenter"];
 // RIC and shim for browsers setTimeout() without it
 const requestIdleCallback =
  (window as any).requestIdleCallback ||
  function (cb: (...args: any) => any) {
    const start = Date.now();
    return setTimeout(function () {
      cb({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        }
      });
    }, 1);
  };
 /**
 * Fetches a given URL using `<link rel=prefetch>`
 * @param {string} url - the URL to fetch
 * @return {Promise<Event>} a Promise
 */
 function addToHead(url: string): Promise<Event> {
  let link: HTMLLinkElement;
  return new Promise((res, rej) => {
    link = document.createElement(`link`);
    link.rel = `prefetch`;
    link.href = url;
    link.onload = res;
    link.onerror = rej;
    document.head.appendChild(link);
  });
 }
 /**
 * Checks if a Node is an HTMLAnchorElement
 * @param node DOM node to check
 */
 function isAnchor(node: Node): node is HTMLAnchorElement {
  return (
    node.nodeType === node.ELEMENT_NODE && (node as Element).tagName === "A"
  );
 }
 /** prefecth a given URL */
 function prefetch(url: string) {
  const conn = (window.navigator as any).connection;
  if (conn) {
    // Don't prefetch if using 2G or if Save-Data is enabled.
    if (conn.saveData || /2g/.test(conn.effectiveType)) {
      return;
    }
  }
  if (!cache.has(url)) {
    cache.add(url);
    return addToHead(new URL(url, window.location.href).toString());
  }
 }
 /** Observe link visiblity and add listeners to prefetch the URL as needed */
 function listen() {
  if (!window.IntersectionObserver) return;
  const io = new IntersectionObserver((entries) => {
    entries.forEach((_entry) => {
      if (_entry.isIntersecting) {
        const entry = _entry.target as HTMLAnchorElement;
        if (cache.has(entry.href)) return;
        const cb = () => {
          const cleanup = () => {
            for (const event of events) {
              entry.removeEventListener(event, cb);
            }
            listeners.delete(entry);
          };
          prefetch(entry.href)
            ?.then(() => cleanup())
            ?.catch(() => cleanup());
        };
        listeners.set(entry, cb);
        for (const event of events) {
          entry.addEventListener(event, cb, { once: true });
        }
      }
    });
  });
  const mo = new MutationObserver((entries) => {
    entries.forEach((entry) => {
      if (!(entry.addedNodes.length > 0)) {
        return;
      }
      const links = Array.from(entry.addedNodes).filter((node) =>
        isAnchor(node)
      ) as HTMLAnchorElement[];
      if (!(links.length > 0)) return;
      links.forEach((link) => {
        io.observe(link);
      });
    });
  });
  requestIdleCallback(() => {
    mo.observe(document.body, { childList: true, subtree: true });
    document.querySelectorAll("a").forEach((link) => {
      io.observe(link);
    });
  });
 }
 listen();
Author	SHA1	Message	Date
Nate Moore	0393860169	feat: add `linkPrefetch` to config	2021-05-21 15:54:36 -05:00
Nate Moore	d107ae7e10	fix: use optimize-links on all pages	2021-05-21 15:54:36 -05:00
Nate Moore	c3b75b223e	chore: fix portfolio build	2021-05-21 15:54:36 -05:00
Nate Moore	c610ff40e5	feat: add prefetch utility	2021-05-21 15:54:36 -05:00