fix: add createRequire banner for CJS compat in ESM bundles

Bundled CJS dependencies (e.g. reading-time) use require() for Node
builtins like 'stream' and 'util'. In ESM output, the esbuild-generated
__require shim throws 'Dynamic require of X is not supported' because
there is no global require in ESM context.

Add platform: 'node' and a banner that injects createRequire from the
'module' builtin, providing a working require() function for the CJS
compatibility layer.

dist/components/index.js

@@ -1,5 +1,8 @@
+import { createRequire } from 'module';
 import { jsx } from 'preact/jsx-runtime';
 
+createRequire(import.meta.url);
+
 // src/util/lang.ts
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");

dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/util/lang.ts","../../src/components/styles/example.scss","../../src/components/scripts/example.inline.ts","../../src/components/ExampleComponent.tsx"],"names":[],"mappings":";;;AAAO,SAAS,cAAc,OAAA,EAAwD;AACpF,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;;;ACFA,IAAA,eAAA,GAAA,wMAAA;;;ACAA,IAAA,sBAAA,GAAA,mqCAAA;ACgBA,IAAO,wBAAA,IAAS,CAAC,IAAA,KAAmC;AAClD,EAAA,MAAM,EAAE,SAAS,EAAA,EAAI,MAAA,GAAS,IAAI,SAAA,GAAY,mBAAA,EAAoB,GAAI,IAAA,IAAQ,EAAC;AAE/E,EAAA,MAAM,SAAA,GAA6B,CAAC,KAAA,KAAgC;AAClE,IAAA,MAAM,WAAA,GAAc,MAAM,QAAA,EAAU,WAAA;AACpC,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAA,IAAS,UAAA;AACpC,IAAA,MAAM,WAAW,CAAA,EAAG,MAAM,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,CAAA;AAE3C,IAAA,2BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,UAAA,CAAW,SAAS,GAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,EACtD,CAAA;AAEA,EAAA,SAAA,CAAU,GAAA,GAAM,eAAA;AAChB,EAAA,SAAA,CAAU,cAAA,GAAiB,sBAAA;AAE3B,EAAA,OAAO,SAAA;AACT,CAAA","file":"index.js","sourcesContent":["export function classNames(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n",".example-component {\n  padding: 8px 16px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 4px;\n  font-weight: 600;\n  display: inline-block;\n}","function l(){let e=window.location.pathname;return e.startsWith(\"/\")&&(e=e.slice(1)),e.endsWith(\"/\")&&(e=e.slice(0,-1)),e||\"index\"}function r(){let e=document.querySelectorAll(\".example-component\");if(e.length===0)return;let t=[];function o(n){(n.ctrlKey||n.metaKey)&&n.shiftKey&&n.key.toLowerCase()===\"e\"&&(n.preventDefault(),console.log(\"[ExampleComponent] Keyboard shortcut triggered!\"))}document.addEventListener(\"keydown\",o),t.push(()=>document.removeEventListener(\"keydown\",o));for(let n of e){let i=()=>{console.log(\"[ExampleComponent] Clicked!\")};n.addEventListener(\"click\",i),t.push(()=>n.removeEventListener(\"click\",i))}typeof window<\"u\"&&window.addCleanup&&window.addCleanup(()=>{t.forEach(n=>n())}),console.log(\"[ExampleComponent] Initialized with\",e.length,\"component(s)\")}document.addEventListener(\"nav\",e=>{let t=e.detail?.url||l();console.log(\"[ExampleComponent] Navigation to:\",t),r()});document.addEventListener(\"render\",()=>{console.log(\"[ExampleComponent] Render event - re-initializing\"),r()});document.addEventListener(\"prenav\",()=>{let e=document.querySelector(\".example-component\");e&&sessionStorage.setItem(\"exampleScrollTop\",e.scrollTop?.toString()||\"0\")});\n","import type {\n  QuartzComponent,\n  QuartzComponentProps,\n  QuartzComponentConstructor,\n} from \"@quartz-community/types\";\nimport { classNames } from \"../util/lang\";\nimport style from \"./styles/example.scss\";\n// @ts-expect-error - inline script import handled by Quartz bundler\nimport script from \"./scripts/example.inline.ts\";\n\nexport interface ExampleComponentOptions {\n  prefix?: string;\n  suffix?: string;\n  className?: string;\n}\n\nexport default ((opts?: ExampleComponentOptions) => {\n  const { prefix = \"\", suffix = \"\", className = \"example-component\" } = opts ?? {};\n\n  const Component: QuartzComponent = (props: QuartzComponentProps) => {\n    const frontmatter = props.fileData?.frontmatter as { title?: string } | undefined;\n    const title = frontmatter?.title ?? \"Untitled\";\n    const fullText = `${prefix}${title}${suffix}`;\n\n    return <div class={classNames(className)}>{fullText}</div>;\n  };\n\n  Component.css = style;\n  Component.afterDOMLoaded = script;\n\n  return Component;\n}) satisfies QuartzComponentConstructor;\n"]}
+{"version":3,"sources":["../../src/util/lang.ts","../../src/components/styles/example.scss","../../src/components/scripts/example.inline.ts","../../src/components/ExampleComponent.tsx"],"names":[],"mappings":";;;;;;AAAO,SAAS,cAAc,OAAA,EAAwD;AACpF,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;;;ACFA,IAAA,eAAA,GAAA,wMAAA;;;ACAA,IAAA,sBAAA,GAAA,mqCAAA;ACgBA,IAAO,wBAAA,IAAS,CAAC,IAAA,KAAmC;AAClD,EAAA,MAAM,EAAE,SAAS,EAAA,EAAI,MAAA,GAAS,IAAI,SAAA,GAAY,mBAAA,EAAoB,GAAI,IAAA,IAAQ,EAAC;AAE/E,EAAA,MAAM,SAAA,GAA6B,CAAC,KAAA,KAAgC;AAClE,IAAA,MAAM,WAAA,GAAc,MAAM,QAAA,EAAU,WAAA;AACpC,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAA,IAAS,UAAA;AACpC,IAAA,MAAM,WAAW,CAAA,EAAG,MAAM,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,CAAA;AAE3C,IAAA,2BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,UAAA,CAAW,SAAS,GAAI,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,EACtD,CAAA;AAEA,EAAA,SAAA,CAAU,GAAA,GAAM,eAAA;AAChB,EAAA,SAAA,CAAU,cAAA,GAAiB,sBAAA;AAE3B,EAAA,OAAO,SAAA;AACT,CAAA","file":"index.js","sourcesContent":["export function classNames(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n",".example-component {\n  padding: 8px 16px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 4px;\n  font-weight: 600;\n  display: inline-block;\n}","function l(){let e=window.location.pathname;return e.startsWith(\"/\")&&(e=e.slice(1)),e.endsWith(\"/\")&&(e=e.slice(0,-1)),e||\"index\"}function r(){let e=document.querySelectorAll(\".example-component\");if(e.length===0)return;let t=[];function o(n){(n.ctrlKey||n.metaKey)&&n.shiftKey&&n.key.toLowerCase()===\"e\"&&(n.preventDefault(),console.log(\"[ExampleComponent] Keyboard shortcut triggered!\"))}document.addEventListener(\"keydown\",o),t.push(()=>document.removeEventListener(\"keydown\",o));for(let n of e){let i=()=>{console.log(\"[ExampleComponent] Clicked!\")};n.addEventListener(\"click\",i),t.push(()=>n.removeEventListener(\"click\",i))}typeof window<\"u\"&&window.addCleanup&&window.addCleanup(()=>{t.forEach(n=>n())}),console.log(\"[ExampleComponent] Initialized with\",e.length,\"component(s)\")}document.addEventListener(\"nav\",e=>{let t=e.detail?.url||l();console.log(\"[ExampleComponent] Navigation to:\",t),r()});document.addEventListener(\"render\",()=>{console.log(\"[ExampleComponent] Render event - re-initializing\"),r()});document.addEventListener(\"prenav\",()=>{let e=document.querySelector(\".example-component\");e&&sessionStorage.setItem(\"exampleScrollTop\",e.scrollTop?.toString()||\"0\")});\n","import type {\n  QuartzComponent,\n  QuartzComponentProps,\n  QuartzComponentConstructor,\n} from \"@quartz-community/types\";\nimport { classNames } from \"../util/lang\";\nimport style from \"./styles/example.scss\";\n// @ts-expect-error - inline script import handled by Quartz bundler\nimport script from \"./scripts/example.inline.ts\";\n\nexport interface ExampleComponentOptions {\n  prefix?: string;\n  suffix?: string;\n  className?: string;\n}\n\nexport default ((opts?: ExampleComponentOptions) => {\n  const { prefix = \"\", suffix = \"\", className = \"example-component\" } = opts ?? {};\n\n  const Component: QuartzComponent = (props: QuartzComponentProps) => {\n    const frontmatter = props.fileData?.frontmatter as { title?: string } | undefined;\n    const title = frontmatter?.title ?? \"Untitled\";\n    const fullText = `${prefix}${title}${suffix}`;\n\n    return <div class={classNames(className)}>{fullText}</div>;\n  };\n\n  Component.css = style;\n  Component.afterDOMLoaded = script;\n\n  return Component;\n}) satisfies QuartzComponentConstructor;\n"]}

dist/index.js

@@ -1,7 +1,10 @@
+import { createRequire } from 'module';
 import path2 from 'path';
 import fs from 'fs/promises';
 import { jsx } from 'preact/jsx-runtime';
 
+createRequire(import.meta.url);
+
 // node_modules/ccount/index.js
 function ccount(value, character) {
   const source = String(value);

dist/types.js

@@ -1,3 +1,5 @@
+import { createRequire } from 'module';
 
+createRequire(import.meta.url);
 //# sourceMappingURL=types.js.map
 //# sourceMappingURL=types.js.map

tsup.config.ts

@@ -85,6 +85,10 @@ export default defineConfig({
   target: "es2022",
   splitting: false,
   outDir: "dist",
+  platform: "node",
+  banner: {
+    js: 'import { createRequire } from "module"; const require = createRequire(import.meta.url);',
+  },
   esbuildOptions(options) {
     options.jsx = "automatic";
     options.jsxImportSource = "preact";