Chrome

Uses the VDOM framework as the element base but can also export any used resources for further processing. It is adequate for most single page applications and gives you the ability to preview your application before building a working copy of it.

Example usage

<script src="/dist/squared.min.js"></script>
<script src="/dist/squared.base.min.js"></script>
<script src="/dist/chrome.framework.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", async () => {
    squared.setFramework(chrome, {/* UserResourceSettings */});

    await squared.save(); // Uses defaults from settings
    /* OR */
    await squared.saveAs("android.zip", {/* RequestData */});
    /* OR */
    await squared.copyTo("/path/project", {/* RequestData */});
    /* OR */
    await squared.appendTo("/path/to/android.7z", {/* RequestData */});
  });
</script>

Import maps [1]

<script type="importmap">
  {
    "imports": {
      "squared/": "https://unpkg.com/squared@5.6.0/"
      /* OR */
      "squared/": "/node_modules/squared/" // NodeJS
      /* OR */
      "squared/": "/dist/esm/" // Docker
    }
  }
</script>
<script type="module">
  import { appendTo, copyTo, save, saveAs, userSettings } from "squared/chrome.js";
  import { parseColor } from "squared/lib/css.js";

  const blue = parseColor("#0000FF");

  document.addEventListener("DOMContentLoaded", async () => {
    userSettings({ preloadImages: true, preloadFonts: true }); // Optional

    await save(); // Uses defaults from settings
    /* OR */
    await saveAs("android.zip", {/* RequestData */});
    /* OR */
    await copyTo("/path/project", {/* RequestData */});
    /* OR */
    await appendTo("/path/to/android.7z", {/* RequestData */});
  });
</script>

Caution

Import maps is part of Baseline 2023 and is Widely available.

ESM

<script type="module">
  import { chrome, appendTo, copyTo, save, saveAs, userSettings } from "/dist/chrome.mjs";

  document.addEventListener("DOMContentLoaded", async () => {
    userSettings({ preloadImages: true, preloadFonts: true }); // Optional

    await save(); // Uses defaults from settings
    /* OR */
    await saveAs("android.zip", {/* RequestData */});
    /* OR */
    await copyTo("/path/project", {/* RequestData */});
    /* OR */
    await appendTo("/path/to/android.7z", {/* RequestData */});

    const { application } = chrome.cached(); // Application instance
    chrome.lib.constant.UUID.JS = '16'; // Length of auto-generated filenames
  });
</script>

Note

Libraries (squared.lib) are not exported when using an ES bundle.

Observe element

await squared.copyTo("/path/project", { useOriginalHtmlPage: false, observe: true }).then(() => {
  squared.observe(); // Watch all events
  /* OR */
  squared.observe({
    subtree: true,
    childList: true,
    attributes: true,
    characterData: true,
    attributeOldValue: true,
    characterDataOldValue: true
  });
});