Migrate Core output from CJS to ESM

packages/cli/src/lib/live-server/index.js

@@ -28,7 +28,7 @@ import open from "opn";
 import es from "event-stream";
 import os from "os";
 import chokidar from "chokidar";
-import fsUtil from "@markbind/core/src/utils/fsUtil";
+import * as fsUtil from "@markbind/core/src/utils/fsUtil";
 import "colors";
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';

packages/core/.eslintrc.cjs

@@ -0,0 +1,33 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['./**/*.ts'],
+      rules: {
+        // Override airbnb import/extensions rule to require extension for non-package import
+        // ESM relative imports require file extensions: https://nodejs.org/api/esm.html#esm_import_specifiers
+        // This conflicts with the airbnb lint rule:
+        // https://github.com/airbnb/javascript?tab=readme-ov-file#modules--import-extensions
+        // Additional discussion on the issue: https://github.com/airbnb/javascript/issues/2030
+        'import/extensions': [
+          'error',
+          'ignorePackages',
+          {
+            js: 'always',
+            ts: 'always',
+            mjs: 'always',
+          },
+        ],
+        // Override lodash import-scope rule to turn it off and allow full import
+        // lodash currently does not have a mechanism to use its optimized imports
+        // along with type definitions: https://github.com/lodash/lodash/issues/3192
+        // Additional discussion here: https://github.com/MarkBind/markbind/issues/2615
+        'lodash/import-scope': 0,
+        // These rules are annoying and should go away
+        // (To be updated soon in lodash removal)
+        'lodash/prop-shorthand': 0,
+        'lodash/prefer-lodash-chain': 0,
+      },
+    },
+  ],
+};

packages/core/babel.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    '@babel/preset-typescript',
+    ['@babel/preset-env', { targets: { node: 'current' }, modules: 'cjs' }],
+  ],
+  plugins: [
+    '@babel/plugin-syntax-import-attributes',
+    ['babel-plugin-transform-import-meta', { module: 'ES6' }]
+  ],
+};

packages/core/index.ts

@@ -1,4 +1,4 @@
-import { Site } from './src/Site';
-import { Template } from './src/Site/template';
+import { Site } from './src/Site/index.js';
+import { Template } from './src/Site/template.js';
 
 export { Site, Template };

packages/core/jest.config.cjs

@@ -0,0 +1,11 @@
+const config = {
+  verbose: true,
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  testEnvironment: 'node',
+  collectCoverage: true,
+  testMatch: ['**/*.test.ts'],
+};
+
+module.exports = config;

packages/core/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@markbind/core",
   "version": "6.3.1",
+  "type": "module",
   "description": "MarkBind core module",
   "keywords": [
     "mark",
@@ -98,6 +99,7 @@
     "winston": "^3.19.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.27.0",
     "@jest/globals": "^29.5.0",
     "@types/cheerio": "^0.22.31",
     "@types/domhandler": "^2.4.2",
@@ -109,13 +111,20 @@
     "@types/katex": "^0.16.0",
     "@types/lodash": "4.14.181",
     "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-attrs": "^4.1.3",
+    "@types/markdown-it-emoji": "^3.0.1",
     "@types/nunjucks": "^3.2.1",
     "@types/path-is-inside": "^1.0.0",
     "@types/primer__octicons": "^17.11.0",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^9.0.0",
     "jest": "^29.7.0",
     "memfs": "^3.0.1",
-    "ts-jest": "^29.4.6"
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-dynamic-import": "^7.27.1",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-typescript": "^7.28.5",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-transform-import-meta": "^2.3.3"
   }
 }

packages/core/src/External/External.ts

@@ -1,10 +1,10 @@
 import fs from 'fs-extra';
 import path from 'path';
-import * as jsBeautify from 'js-beautify';
-import { PageSources } from '../Page/PageSources';
-import { NodeProcessor } from '../html/NodeProcessor';
-import * as fsUtil from '../utils/fsUtil';
-import type { ExternalManager, ExternalManagerConfig } from './ExternalManager';
+import jsBeautify from 'js-beautify';
+import { PageSources } from '../Page/PageSources.js';
+import { NodeProcessor } from '../html/NodeProcessor.js';
+import * as fsUtil from '../utils/fsUtil.js';
+import type { ExternalManager, ExternalManagerConfig } from './ExternalManager.js';
 
 const htmlBeautify = jsBeautify.html;
 

packages/core/src/External/ExternalManager.ts

@@ -1,17 +1,13 @@
 import path from 'path';
-import uniqBy from 'lodash/uniqBy';
-import { External } from './External';
-import * as fsUtil from '../utils/fsUtil';
-import * as urlUtil from '../utils/urlUtil';
-import type { DynamicSrc } from '../Page/PageSources';
-import type { VariableProcessor } from '../variables/VariableProcessor';
-import type { SiteLinkManager } from '../html/SiteLinkManager';
-import type { PluginManager } from '../plugins/PluginManager';
-import { NodeProcessorConfig } from '../html/NodeProcessor';
-
-const _ = {
-  uniqBy,
-};
+import _ from 'lodash';
+import { External } from './External.js';
+import * as fsUtil from '../utils/fsUtil.js';
+import * as urlUtil from '../utils/urlUtil.js';
+import type { DynamicSrc } from '../Page/PageSources.js';
+import type { VariableProcessor } from '../variables/VariableProcessor.js';
+import type { SiteLinkManager } from '../html/SiteLinkManager.js';
+import type { PluginManager } from '../plugins/PluginManager.js';
+import { NodeProcessorConfig } from '../html/NodeProcessor.js';
 
 export type ExternalManagerConfig = NodeProcessorConfig & {
   variableProcessor: VariableProcessor,

packages/core/src/Layout/Layout.ts

@@ -1,8 +1,8 @@
 import { v4 as uuidv4 } from 'uuid';
-import { PageSources } from '../Page/PageSources';
-import { NodeProcessor } from '../html/NodeProcessor';
-import * as logger from '../utils/logger';
-import { ExternalManager, ExternalManagerConfig } from '../External/ExternalManager';
+import { PageSources } from '../Page/PageSources.js';
+import { NodeProcessor } from '../html/NodeProcessor.js';
+import * as logger from '../utils/logger.js';
+import { ExternalManager, ExternalManagerConfig } from '../External/ExternalManager.js';
 
 const LAYOUT_PAGE_BODY_VARIABLE = 'content';
 

packages/core/src/Layout/LayoutManager.ts

@@ -1,7 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { Layout, LayoutConfig, PageNjkAssets } from './Layout';
-import * as logger from '../utils/logger';
+import { Layout, LayoutConfig, PageNjkAssets } from './Layout.js';
+import * as logger from '../utils/logger.js';
 
 const FRONTMATTER_NONE_ATTR = 'none';
 

packages/core/src/Layout/index.ts

@@ -1,5 +1,5 @@
-import { Layout } from './Layout';
-import { LayoutManager } from './LayoutManager';
+import { Layout } from './Layout.js';
+import { LayoutManager } from './LayoutManager.js';
 
 export const LAYOUT_DEFAULT_NAME = 'default.md';
 export const LAYOUT_FOLDER_PATH = '_markbind/layouts';

packages/core/src/Page/PageConfig.ts

@@ -1,9 +1,9 @@
 import type { Template } from 'nunjucks';
-import type { SiteLinkManager } from '../html/SiteLinkManager';
-import type { PluginManager } from '../plugins/PluginManager';
+import type { SiteLinkManager } from '../html/SiteLinkManager.js';
+import type { PluginManager } from '../plugins/PluginManager.js';
 
-import { VariableProcessor } from '../variables/VariableProcessor';
-import { LayoutManager } from '../Layout';
+import { VariableProcessor } from '../variables/VariableProcessor.js';
+import { LayoutManager } from '../Layout/index.js';
 
 export interface PageAssets {
   bootstrap: string;

packages/core/src/Page/PageSources.ts

@@ -1,6 +1,4 @@
-import clone from 'lodash/clone';
-
-const _ = { clone };
+import _ from 'lodash';
 
 interface Src {
   to: string,

packages/core/src/Page/PageVueServerRenderer.ts

@@ -11,17 +11,17 @@ import type { SFCTemplateCompileOptions, CompilerOptions } from 'vue/compiler-sf
 
 import path from 'path';
 import fs from 'fs-extra';
-import * as logger from '../utils/logger';
-import type { PageConfig, PageAssets } from './PageConfig';
-import type { Page } from '.';
-import { PluginManager } from '../plugins/PluginManager';
+import vueCommonAppFactory from '@markbind/core-web/dist/js/vueCommonAppFactory.min.js';
 
-/* eslint-enable import/no-import-module-exports */
-
-let bundle = require('@markbind/core-web/dist/js/vueCommonAppFactory.min');
+import * as logger from '../utils/logger.js';
+import type { PageConfig, PageAssets } from './PageConfig.js';
+import type { Page } from './index.js';
+import { PluginManager } from '../plugins/PluginManager.js';
 
 let customElementTagsCache: Set<string> | undefined;
 
+let bundle = { ...vueCommonAppFactory };
+
 /**
  * Retrieves the set of tags that should be treated as custom elements by the Vue compiler.
  * These are tags defined in plugins with isCustomElement: true.

packages/core/src/Page/index.ts

@@ -1,34 +1,33 @@
 import cheerio from 'cheerio';
 import fs from 'fs-extra';
 import path from 'path';
-import { html as htmlBeautify } from 'js-beautify';
+import jsPkg from 'js-beautify';
 
-import cloneDeep from 'lodash/cloneDeep';
-import isObject from 'lodash/isObject';
-import isArray from 'lodash/isArray';
-import { pageVueServerRenderer } from './PageVueServerRenderer';
+import _ from 'lodash';
+import { pageVueServerRenderer } from './PageVueServerRenderer.js';
 
-import CyclicReferenceError from '../errors/CyclicReferenceError';
-import { PageSources } from './PageSources';
-import { NodeProcessor, NodeProcessorConfig } from '../html/NodeProcessor';
+import { CyclicReferenceError } from '../errors/CyclicReferenceError.js';
+import { PageSources } from './PageSources.js';
+import { NodeProcessor, NodeProcessorConfig } from '../html/NodeProcessor.js';
 
-import * as logger from '../utils/logger';
-import type { PageAssets, PageConfig } from './PageConfig';
-import type { SiteConfig } from '../Site/SiteConfig';
-import type { FrontMatter } from '../plugins/Plugin';
-import type { ExternalManager } from '../External/ExternalManager';
-import { MbNode } from '../utils/node';
-import { checkForVueHydrationViolation } from '../utils/htmlValidationUtil';
+import * as logger from '../utils/logger.js';
+import type { PageAssets, PageConfig } from './PageConfig.js';
+import type { SiteConfig } from '../Site/SiteConfig.js';
+import type { FrontMatter } from '../plugins/Plugin.js';
+import type { ExternalManager } from '../External/ExternalManager.js';
+import { MbNode } from '../utils/node.js';
+import { checkForVueHydrationViolation } from '../utils/htmlValidationUtil.js';
 
-import { LAYOUT_DEFAULT_NAME } from '../Layout';
+import { LAYOUT_DEFAULT_NAME } from '../Layout/index.js';
+import { instance as LockManager } from '../utils/LockManager.js';
+import packageJson from '../../package.json' with { type: 'json' };
 
-require('../patches/htmlparser2');
+import '../patches/htmlparser2.js';
 
-const _ = { cloneDeep, isObject, isArray };
-
-const LockManager = require('../utils/LockManager');
-
-const PACKAGE_VERSION = require('../../package.json').version;
+// Destructure for CJS interoperability.
+// Using ESM-style import does not work due to the fact that jsPkg is exported as a CJS module.
+const { html: htmlBeautify } = jsPkg;
+const PACKAGE_VERSION = packageJson.version;
 
 const TITLE_PREFIX_SEPARATOR = ' - ';
 const TITLE_SUFFIX_SEPARATOR = ' - ';

packages/core/src/Site/SiteAssetsManager.ts

@@ -1,12 +1,19 @@
 import fs from 'fs-extra';
-import ignore, { Ignore } from 'ignore';
+import { type Ignore } from 'ignore';
 import path from 'path';
 import walkSync from 'walk-sync';
 
-import { SiteConfig, SiteConfigStyle } from './SiteConfig';
-import { delay } from '../utils/delay';
-import * as logger from '../utils/logger';
-import { TEMPLATE_SITE_ASSET_FOLDER_NAME, _ } from './constants';
+import { createRequire } from 'module';
+import { SiteConfig, SiteConfigStyle } from './SiteConfig.js';
+import { delay } from '../utils/delay.js';
+import * as logger from '../utils/logger.js';
+import { TEMPLATE_SITE_ASSET_FOLDER_NAME, _ } from './constants.js';
+
+const require = createRequire(import.meta.url);
+// `ignore` is a CJS package with no `exports` field. Under NodeNext, TS resolves
+// the default import as the module namespace (not callable). Using require() returns
+// module.exports directly, which is the callable factory function
+const ignore: (opts?: { ignorecase?: boolean }) => Ignore = require('ignore');
 
 function getBootswatchThemePath(theme: string) {
   return require.resolve(`bootswatch/dist/${theme}/bootstrap.min.css`);

packages/core/src/Site/SiteConfig.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { FrontMatter } from '../plugins/Plugin';
+import { FrontMatter } from '../plugins/Plugin.js';
 
 const HEADING_INDEXING_LEVEL_DEFAULT = 3;
 

packages/core/src/Site/SiteDeployManager.ts

@@ -1,11 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
-import simpleGit, { SimpleGit } from 'simple-git';
+import { simpleGit, SimpleGit } from 'simple-git';
 import ghpages, { PublishOptions } from 'gh-pages';
-import * as gitUtil from '../utils/git';
-import * as logger from '../utils/logger';
-import { _ } from './constants';
-import { SiteConfig } from './SiteConfig';
+import * as gitUtil from '../utils/git.js';
+import * as logger from '../utils/logger.js';
+import { _ } from './constants.js';
+import { SiteConfig } from './SiteConfig.js';
 
 export type DeployOptions = {
   branch: string,