xpine 0.0.5 → 0.0.7

package/src/static/spa.mjs

@@ -1,175 +0,0 @@
-// Enables SPA like behavior for links
-
-async function replaceDocumentContentsWithLinkResponse() {
-  const links = [...document.querySelectorAll('[data-spa]')];
-  for (const link of links) {
-    link.addEventListener('click', updatePageOnLinkClick);
-  }
-
-}
-
-async function updatePageOnLinkClick(e) {
-  const targetHref = e?.target?.getAttribute('href');
-  if (!targetHref) return;
-  if (isExternalURL(targetHref) && !e?.target?.getAttribute('data-spa-crossorigin')) return;
-  e.preventDefault();
-  try {
-    await getNewPageContent(targetHref);
-    if (targetHref === window.location.pathname) return;
-    window.history.pushState(
-      {
-        type: 'link-click',
-        targetHref,
-      },
-      '',
-      targetHref
-    );
-    const event = new CustomEvent('spa:updatePageURL', {
-      detail: {
-        href: targetHref,
-      },
-    });
-    window.dispatchEvent(event);
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-async function getNewPageContent(href) {
-  try {
-    const res = await fetch(href);
-    const text = await res.text();
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(text, 'text/html');
-    diffHead(dom);
-    const newScripts = removeBodyScripts(dom);
-    const clonedPersistentNodes = getPersistentNodesFromDocument(dom);
-    const body = dom.body.innerHTML;
-    document.body.innerHTML = body;
-    for (const clonedNode of clonedPersistentNodes) {
-      // @ts-ignore
-      const newNode = document.body.querySelector(`[data-persistent="${clonedNode?.getAttribute('data-persistent')}"]`);
-      newNode.replaceWith(clonedNode);
-    }
-    replaceAttributesOnDocumentBody(dom);
-    replaceDocumentContentsWithLinkResponse();
-    for (const script of newScripts) document.body.appendChild(script);
-    // Send an event
-    const event = new CustomEvent('spa:updatePageContent', {
-      detail: {
-        href,
-      },
-    });
-    window.dispatchEvent(event);
-  } catch (err) {
-    console.error(err);
-    console.error('Error getting link', href);
-  }
-}
-
-function diffHead(dom) {
-  const domHeadChildren = [...dom.head.children];
-  const currentHeadChildren = [...document.head.children];
-  const result = {
-    childrenToAdd: [],
-    childrenToRemove: [],
-  };
-  for (const domChild of domHeadChildren) {
-    const foundInCurrentChildren = currentHeadChildren.find(child => child.outerHTML === domChild.outerHTML);
-    if (!foundInCurrentChildren) result.childrenToAdd.push(domChild);
-  }
-  for (const currentChild of currentHeadChildren) {
-    const foundInDomChildren = domHeadChildren.find(child => child.outerHTML === currentChild.outerHTML);
-    if (!foundInDomChildren) result.childrenToRemove.push(currentChild);
-  }
-  applyHeadDiffsToDocument(result);
-}
-
-function applyHeadDiffsToDocument(diff) {
-  for (const child of diff.childrenToRemove) {
-    // Remove from head
-    document.head.removeChild(child);
-  }
-  for (const child of diff.childrenToAdd) {
-    // Handle script tags
-    if (child?.nodeName?.toLowerCase() == 'script') {
-      const scriptElement = document.createElement('script');
-      portAttributesToElement(child, scriptElement);
-      scriptElement.innerHTML = child.innerHTML;
-      document.head.appendChild(scriptElement);
-      continue;
-    }
-    // Add to the head
-    document.head.appendChild(child);
-  }
-}
-
-function removeBodyScripts(dom) {
-  const scripts = [...dom.body.querySelectorAll('script')];
-  const newElements = [];
-  for (const script of scripts) {
-    const element = document.createElement('script');
-    portAttributesToElement(script, element);
-    element.innerHTML = script.innerHTML;
-    dom.body.removeChild(script);
-    newElements.push(element);
-  }
-  return newElements;
-}
-
-function portAttributesToElement(oldEl, newEl) {
-  for (const attribute of oldEl.attributes) {
-    newEl.setAttribute(attribute.name, attribute.nodeValue);
-  }
-}
-
-function getPersistentNodesFromDocument(dom) {
-  // Find persistent nodes
-  const persistentNodesFromDom = [...dom.querySelectorAll('[data-persistent]')].map(el => el.getAttribute('data-persistent'));
-  const persistentNodesFromBody = [...document.body.querySelectorAll('[data-persistent]')];
-  // Cross match the persistent nodes between current page and new page to find valid ones
-  const validPersistentNodes = persistentNodesFromBody.filter(el => {
-    return persistentNodesFromDom.includes(el.getAttribute('data-persistent'));
-  });
-  // Clone
-  return validPersistentNodes.map(el => el.cloneNode(true));
-}
-
-function replaceAttributesOnDocumentBody(dom) {
-  while (document.body.attributes.length > 0) {
-    document.body.removeAttribute(document.body.attributes[0].name);
-  }
-  // Set attributes on the body
-  for (const attribute of dom.body.attributes) {
-    document.body.setAttribute(attribute.name, attribute.nodeValue);
-  }
-}
-
-async function handleBackButton() {
-  await getNewPageContent(window.history.state?.targetHref || window.location.href);
-}
-
-function isRelativeURL(url) {
-  if (typeof url !== 'string') return false;
-  try {
-    new URL(url);
-    return false;
-  } catch (err) {
-    if (url?.startsWith('//')) return false;
-    return true;
-  }
-}
-
-function isExternalURL(url) {
-  if (isRelativeURL(url)) return false;
-  try {
-    const computedURL = new URL(url);
-    return computedURL?.origin !== window.location?.origin;
-  } catch {
-    return false; // Not a URL
-  }
-}
-
-window.addEventListener('DOMContentLoaded', replaceDocumentContentsWithLinkResponse);
-window.addEventListener('popstate', handleBackButton);
-

package/src/util/env.ts

@@ -1,7 +0,0 @@
-import dotenv from 'dotenv';
-import path from 'path';
-import { config } from './get-config';
-
-export function setupEnv() {
-  dotenv.config({ path: path.join(config.rootDir, `./.env.${process.env.STAGE || 'dev'}`),});
-}

package/src/util/get-config.ts

@@ -1,65 +0,0 @@
-import path from 'path';
-import require from './require';
-import { XPineConfig } from '../../types';
-
-const rootDir = process.cwd();
-
-export function fromRoot(pathName?: string) {
-  if (!pathName) return rootDir;
-  return path.join(rootDir, pathName);
-}
-
-const userConfig = require(path.join(process.cwd(), './xpine.config.mjs')).default;
-
-const configDefaults = {
-  rootDir: fromRoot(),
-  srcDir: fromRoot('./src'),
-  distDir: fromRoot('./dist'),
-  packageJsonPath: fromRoot('package.json'),
-  // We need to use getters here in the event someone wants to change folders, such as the dist folder
-  get distPublicDir() {
-    return path.join(this.distDir, './public');
-  },
-  get distPublicScriptsDir() {
-    return path.join(this.distPublicDir, './scripts');
-  },
-  get distTempFolder() {
-    return path.join(this.distDir, './temp');
-  },
-  get clientJSBundlePath() {
-    return path.join(this.distPublicScriptsDir, './app.js');
-  },
-  get alpineDataPath() {
-    return path.join(this.distTempFolder, './alpine-data.ts');
-  },
-  get serverDistDir() {
-    return path.join(this.distDir, './server');
-  },
-  get serverDistAppPath() {
-    return path.join(this.serverDistDir, './app.js');
-  },
-  // Important dirs/paths
-  get pagesDir() {
-    return path.join(this.srcDir, './pages');
-  },
-  get publicDir() {
-    return path.join(this.srcDir, './public');
-  },
-  get serverDir() {
-    return path.join(this.srcDir, './server');
-  },
-  get runDir() {
-    return path.join(this.serverDir, './run');
-  },
-  get serverAppPath() {
-    return path.join(this.serverDir, './app.ts');
-  },
-  get globalCSSFile() {
-    return path.join(this.publicDir, './styles/global.css');
-  },
-};
-
-export const config: XPineConfig = {
-  ...configDefaults,
-  ...userConfig,
-};

package/src/util/html.ts

@@ -1,32 +0,0 @@
-export class html {
-
-  static attributeObjectToString(props) {
-    if (!props) return '';
-    return Object.entries(props)
-      .filter(([, value]) => value !== null && value !== undefined)
-      .map(([key, value], index) => {
-        const start = index === 0 ? ' ' : '';
-        return `${start}${key}="${value}"`;
-      })
-      .join(' ');
-  }
-
-  static async fragment(props) {
-    const childrenResult = await Promise.all(props.children.flat());
-    return childrenResult.filter(Boolean).join('');
-  }
-
-  static async createElement(type, props, ...children) {
-    const childrenResult = await Promise.all(children.flat());
-    // Handle passing in another element
-    if (typeof type === 'function') {
-      const result = await type({ ...props, children: childrenResult, });
-      return result;
-    }
-    return `<${type}${this.attributeObjectToString(props)}>${childrenResult.filter(Boolean).join('')}</${type}>`;
-  }
-}
-
-export function JSXRuntime() {
-  return true;
-}

package/src/util/require.ts

@@ -1,5 +0,0 @@
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-export default require;