<script src="/js/tkDebug_le.js"></script>
<script src="/js/tkUtils_le.js"></script>
<script src="/js/tkCSS_le.js"></script>
<script src="/js/tkHTMLApplication_le.js"></script>
<script src="/js/tkfunctions/tkInsertHeader.js"></script>
<script src="/js/tkfunctions/tkSearch.js"></script>

<script src="https://cdnjs.cloudflare.com/.../xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/.../papaparse.min.js"></script>
...

<script type="module" src="/js/tkLibraries.wrapper.mjs"></script>

import "/js/tkUtils_le.js";

<script src="A.js"></script>
<script src="B.js"></script>
<script src="C.js"></script>

<script type="module" src="/js/tkLibraries.wrapper.mjs"></script>

const app = new tkHTMLApplication(4);

export function ...
import ...

import { ... } from "./tkUtils.mjs";

const LIBRARIES = [
  // Basic D2MatE utilities
  "/js/tkDebug_le.js",
  "/js/tkUtils_le.js",

  // CDN libraries
  "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js",

  // D2MatE UI / HTML helpers
  "/js/tkCSS_le.js",
  "/js/tkHTMLApplication_le.js",
  "/js/tkInclude.js",
  "/js/tkfunctions/tkInsertHeader.js",
  "/js/tkfunctions/tkSearch.js",
  "/js/tkfunctions/event_js.js",
];

const LIBRARIES = [
  "A.js",
  "B.js",
];

function loadClassicScript(src) {
  const promise = new Promise((resolve, reject) => {
    const script = document.createElement("script");

    script.src = src;
    script.async = false;

    script.addEventListener(
      "load",
      () => resolve(src),
      { once: true }
    );

    script.addEventListener(
      "error",
      () => reject(
        new Error(`Failed to load script: ${src}`)
      ),
      { once: true }
    );

    document.head.appendChild(script);
  });

  return promise;
}

document.createElement("script")

const loadedScripts = new Map();

if (loadedScripts.has(src)) {
  return loadedScripts.get(src);
}

for (const src of LIBRARIES) {
  try {
    await loadClassicScript(src);
  } catch (error) {
    ...
  }
}

function insertHeader(...) {
  ...
}

window.insertHeader

window.insertHeader(...)

class tkHTMLApplication {
  ...
}

const tkCSS = ...

window.tkHTMLApplication
window.tkCSS

if (typeof tkCSS !== "undefined") {
  window.tkCSS = tkCSS;
}

if (typeof tkHTMLApplication !== "undefined") {
  window.tkHTMLApplication = tkHTMLApplication;
}

window.tkCSS.standard();

window.app = new window.tkHTMLApplication(4);

window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      window.tkCSS &&
      typeof window.tkCSS.standard === "function"
    ) {
      window.tkCSS.standard();
    }
  },
  { once: true }
);

typeof window.tkCSS
typeof window.tkCSS.standard
typeof window.createSearchForm
typeof window.insertHeader
typeof window.tkHTMLApplication

window.xxx

const myLibrary = ...

if (typeof myLibrary !== "undefined") {
  window.myLibrary = myLibrary;
}

<script>
window.addEventListener(
  "tk-libraries-ready",
  function (event) {
    // ライブラリを使用する処理
  },
  { once: true }
);
</script>

<script
  type="module"
  src="/js/tkLibraries.wrapper.mjs">
</script>

<script
  nomodule
  src="/js/unsupportedBrowser.js">
</script>

AddType text/javascript .mjs

sudo apachectl configtest
sudo systemctl reload httpd

<script nomodule src="/js/unsupportedBrowser.js"></script>

if (typeof window.injectCopyBoxCSS === "function") {
  window.injectCopyBoxCSS();
}

injectCopyBoxCSS();

if (
  typeof window.initModal === "function" &&
  !document.getElementById("messageDialog")
) {
  window.initModal();
}

if (
  window.hljs &&
  typeof window.hljs.highlightAll === "function"
) {
  window.hljs.highlightAll();
}

<script>
hljs.highlightAll();
</script>

failures.push({ src, error });

window.tkLibrariesFailures = failures;

event.detail.failures

window.addEventListener(
  "tk-libraries-ready",
  function (event) {
    const failures =
      event.detail && event.detail.failures
        ? event.detail.failures
        : [];

    for (const failure of failures) {
      console.error(
        "Failed to load resource:",
        failure.src,
        failure.error
      );
    }
  },
  { once: true }
);

if (typeof window.displayError === "function") {
  window.displayError(
    "Failed to load resource: " + failure.src,
    "#errorMessages"
  );
}

<script>
insertErrorHandlers("errorMessages");
</script>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.insertErrorHandlers === "function"
    ) {
      window.insertErrorHandlers("errorMessages");
    }
  },
  { once: true }
);
</script>

document.addEventListener(
  "DOMContentLoaded",
  function () {
    insertHeader(
      "/D2MatE/d2mate_header.html"
    ).catch(console.error);
  }
);

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.insertHeader === "function"
    ) {
      window.insertHeader(
        "/D2MatE/d2mate_header.html"
      ).catch(console.error);
    }
  },
  { once: true }
);
</script>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.tkHTMLApplication === "function"
    ) {
      window.app =
        new window.tkHTMLApplication(4);

      window.attrs = {
        target: "_blank"
      };

      window.fontAttrs = {};
    }
  },
  { once: true }
);
</script>

const app = window.app;

<div id="target"></div>
<script>
  ...
</script>

<div id="maze_animation2"></div>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    const app = window.app;

    if (!app) {
      console.error(
        "tkHTMLApplication is not initialized."
      );
      return;
    }

    const dir =
      "/Lecture/FundamentalsCMS/student2025/";

    const path =
      "maze_animation2.py";

    const attrs =
      window.attrs || { target: "_blank" };

    const content = app.urlContent(
      path,
      dir + path,
      {},
      attrs,
      { target: "_blank" },
      path
    );

    app.append(
      "maze_animation2",
      content
    );
  },
  { once: true }
);
</script>

<div id="20250110"></div>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    const app = window.app;

    if (!app) {
      console.error(
        "tkHTMLApplication is not initialized."
      );
      return;
    }

    const dir =
      "/Lecture/FundamentalsCMS/";

    const paths = [
      "01/data.csv",
      "01/test.ipynb",
      "01/test.py",
      "01/read.ipynb"
    ];

    const attrs =
      window.attrs || { target: "_blank" };

    const fontAttrs =
      window.fontAttrs || {};

    const ulItems = [];

    for (
      let i = 0;
      i < paths.length;
      i++
    ) {
      const path = paths[i];

      ulItems.push(
        app.li([
          app.urlContent(
            path,
            dir + path,
            {},
            attrs,
            { target: "_blank" },
            path
          )
        ])
      );
    }

    const ulList = app.ul(
      ulItems,
      { class: "unordered-list" }
    );

    app.append(
      "20250110",
      app.font(
        ulList,
        fontAttrs
      )
    );
  },
  { once: true }
);
</script>

dir = ...
path = ...
ulItems = ...

const dir = ...
const paths = ...
const ulItems = ...

<div id="searchContainer"></div>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.createSearchForm ===
      "function"
    ) {
      window.createSearchForm(
        "searchContainer",
        "searchInput",
        "検索",
        "検索キーワードを入力"
      );
    }
  },
  { once: true }
);
</script>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      window.tkCSS &&
      typeof window.tkCSS.standard ===
      "function"
    ) {
      window.tkCSS.standard();
    }
  },
  { once: true }
);
</script>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    // 共通 app 初期化
  },
  { once: true }
);
</script>

...

<div id="target1"></div>
<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    // target1 を作成
  },
  { once: true }
);
</script>

...

<div id="target2"></div>
<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    // target2 を作成
  },
  { once: true }
);
</script>

window.tkLibrariesReady = true;

function whenTkLibrariesReady(callback) {
  if (window.tkLibrariesReady) {
    callback({
      detail: {
        failures:
          window.tkLibrariesFailures || []
      }
    });
    return;
  }

  window.addEventListener(
    "tk-libraries-ready",
    callback,
    { once: true }
  );
}

whenTkLibrariesReady(function () {
  window.insertHeader(
    "/D2MatE/d2mate_header.html"
  );
});

const LIBRARIES = [
  ...
  "/js/tkfunctions/myFunction.js",
];

typeof window.myFunction

const myFunction = ...

class MyClass {
  ...
}

if (
  typeof MyClass !== "undefined"
) {
  window.MyClass = MyClass;
}

window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.myFunction ===
      "function"
    ) {
      window.myFunction();
    }
  },
  { once: true }
);

const LIBRARIES = [
  ...
  "https://example.com/library.min.js",
];

window.tkLibrariesReady
window.tkLibrariesFailures

window.tkLibrariesReady = true;

console.log(
  window.tkLibrariesFailures
);

export const ready =
  loadAllLibraries();

export {
  loadClassicScript
};

import {
  ready,
  loadClassicScript
} from "/js/tkLibraries.wrapper.mjs";

import {
  ready
} from "/js/tkLibraries.wrapper.mjs";

await ready;

<head>
  <script src="/js/tkDebug_le.js"></script>
  <script src="/js/tkUtils_le.js"></script>
  <script src="/js/tkCSS_le.js"></script>
  <script src="/js/tkHTMLApplication_le.js"></script>
  <script src="/js/tkfunctions/tkSearch.js"></script>

  <script src="https://cdnjs.cloudflare.com/..."></script>
</head>

<body>

<script>
insertErrorHandlers(
  "errorMessages"
);
</script>

<div id="searchContainer"></div>

<script>
document.addEventListener(
  "DOMContentLoaded",
  function () {
    createSearchForm(...);
  }
);
</script>

</body>

<head>
  <script
    type="module"
    src="/js/tkLibraries.wrapper.mjs">
  </script>

  <script
    nomodule
    src="/js/unsupportedBrowser.js">
  </script>
</head>

<body>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.insertErrorHandlers
      === "function"
    ) {
      window.insertErrorHandlers(
        "errorMessages"
      );
    }
  },
  { once: true }
);
</script>

<div id="searchContainer"></div>

<script>
window.addEventListener(
  "tk-libraries-ready",
  function () {
    if (
      typeof window.createSearchForm
      === "function"
    ) {
      window.createSearchForm(...);
    }
  },
  { once: true }
);
</script>

</body>

<script
  type="module"
  src="/js/tkLibraries.wrapper.mjs">
</script>
<script
  nomodule
  src="/js/unsupportedBrowser.js">
</script>

AddType text/javascript .mjs

window.tkLibrariesReady
window.tkLibrariesFailures
typeof window.xxx

{ once: true }

export function insertHeader(...) {
  ...
}

import {
  insertHeader
} from "./tkInsertHeader.mjs";

<script type="module">
import ...
</script>

pandoc ESM_wrapper_guide.md \
  --toc \
  -o ESM_wrapper_guide.docx

pandoc ESM_wrapper_guide.md \
  --toc \
  --reference-doc=reference.docx \
  -o ESM_wrapper_guide.docx

pandoc ESM_wrapper_guide.md \
  --standalone \
  --toc \
  -o ESM_wrapper_guide.html

pandoc ESM_wrapper_guide.md \
  --standalone \
  --toc \
  --css=style.css \
  -o ESM_wrapper_guide.html