feat: new build pipeline

esbuild/build.mjs

@@ -51,6 +51,20 @@ const common = {
             format: 'iife',
             plugins,
         }),
+        build({
+            ...common,
+            entryPoints: ['src/scss/base.scss'],
+            outfile: 'dist/css/base.css',
+            format: 'iife',
+            plugins,
+        }),
+        build({
+            ...common,
+            entryPoints: ['src/scss/_yfm-only.scss'],
+            outfile: 'dist/css/_yfm-only.css',
+            format: 'iife',
+            plugins,
+        }),
         build({
             ...common,
             entryPoints: ['src/scss/print.scss'],
@@ -60,12 +74,26 @@ const common = {
         }),
     ]);
 
-    await build({
-        ...common,
-        entryPoints: ['dist/css/yfm.css'],
-        outfile: 'dist/css/yfm.min.css',
-        minify: true,
-    });
+    await Promise.all([
+        build({
+            ...common,
+            entryPoints: ['dist/css/yfm.css'],
+            outfile: 'dist/css/yfm.min.css',
+            minify: true,
+        }),
+        build({
+            ...common,
+            entryPoints: ['dist/css/base.css'],
+            outfile: 'dist/css/base.min.css',
+            minify: true,
+        }),
+        build({
+            ...common,
+            entryPoints: ['dist/css/_yfm-only.css'],
+            outfile: 'dist/css/_yfm-only.min.css',
+            minify: true,
+        }),
+    ]);
 })();
 
 (async function buildJs() {
@@ -75,17 +103,41 @@ const common = {
             entryPoints: ['src/js/index.ts'],
             outfile: 'dist/js/yfm.js',
         }),
+        build({
+            ...common,
+            entryPoints: ['src/js/base.ts'],
+            outfile: 'dist/js/base.js',
+        }),
+        build({
+            ...common,
+            entryPoints: ['src/js/_yfm-only.ts'],
+            outfile: 'dist/js/_yfm-only.js',
+        }),
         build({
             ...common,
             entryPoints: ['src/js/print/index.ts'],
             outfile: 'dist/js/print.js',
         }),
     ]);
 
-    await build({
-        ...common,
-        entryPoints: ['dist/js/yfm.js'],
-        outfile: 'dist/js/yfm.min.js',
-        minify: true,
-    });
+    await Promise.all([
+        build({
+            ...common,
+            entryPoints: ['dist/js/yfm.js'],
+            outfile: 'dist/js/yfm.min.js',
+            minify: true,
+        }),
+        build({
+            ...common,
+            entryPoints: ['dist/js/base.js'],
+            outfile: 'dist/js/base.min.js',
+            minify: true,
+        }),
+        build({
+            ...common,
+            entryPoints: ['dist/js/_yfm-only.js'],
+            outfile: 'dist/js/_yfm-only.min.js',
+            minify: true,
+        }),
+    ]);
 })();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/transform",
-  "version": "4.32.4",
+  "version": "4.34.0",
   "description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
   "keywords": [
     "markdown",

src/js/_yfm-only.ts

@@ -0,0 +1 @@
+import './term';

src/js/base.ts

@@ -0,0 +1,2 @@
+import './polyfill';
+import './code';

src/js/index.ts

@@ -1,8 +1,7 @@
 import '@diplodoc/cut-extension/runtime';
 import '@diplodoc/tabs-extension/runtime';
 
-import './polyfill';
-import './code';
-import './term';
+import './base';
+import './_yfm-only';
 import './wide-mode';
 import './patch';

src/scss/_yfm-only.scss

@@ -0,0 +1,12 @@
+/**
+    Note: This file excludes "cut" and "tabs" as they are handled separately
+    in dedicated extensions (packages). In the future, "note", "file", "term"
+    and "table" will also be excluded from this file and moved to yfm.scss,
+    once they are moved to separate packages. Direct usage is not recommended,
+    as the file is subject to changes without prior notice.
+ */
+
+@import 'note';
+@import 'file';
+@import 'table';
+@import 'term';

src/scss/base.scss

@@ -0,0 +1,4 @@
+@import 'common';
+@import 'anchor';
+@import 'highlight';
+@import 'code';

src/scss/yfm.scss

@@ -1,12 +1,5 @@
-@import 'common';
-@import 'note';
-@import 'anchor';
-@import 'highlight';
-@import 'code';
-@import 'file';
-@import 'term';
-@import 'table';
+@import 'base';
+@import 'yfm-only';
 @import 'modal';
-
 @import '@diplodoc/cut-extension/runtime';
 @import '@diplodoc/tabs-extension/runtime';

src/transform/fsContext.ts

@@ -0,0 +1,37 @@
+import {readFileSync, writeFileSync} from 'fs';
+import {readFile, writeFile} from 'fs/promises';
+
+import {FsContext} from './typings';
+import {isFileExists, isFileExistsAsync} from './utilsFS';
+
+export class DefaultFsContext implements FsContext {
+    exist(path: string): boolean {
+        return isFileExists(path);
+    }
+
+    read(path: string): string {
+        return readFileSync(path, 'utf8');
+    }
+
+    write(path: string, content: string): void {
+        writeFileSync(path, content, {
+            encoding: 'utf8',
+        });
+    }
+
+    async existAsync(path: string): Promise<boolean> {
+        return await isFileExistsAsync(path);
+    }
+
+    async readAsync(path: string): Promise<string> {
+        return readFile(path, 'utf8');
+    }
+
+    async writeAsync(path: string, content: string): Promise<void> {
+        writeFile(path, content, {
+            encoding: 'utf8',
+        });
+    }
+}
+
+export const defaultFsContext = new DefaultFsContext();

src/transform/plugins/images/collect.ts

@@ -12,21 +12,21 @@ type Options = MarkdownItPluginOpts & {
     singlePage: boolean;
 };
 
-const collect = (input: string, options: Options) => {
+const collect = async (input: string, options: Options) => {
     const md = new MarkdownIt().use(imsize);
 
-    const {root, path, destPath = '', copyFile, singlePage} = options;
+    const {root, path, destPath = '', copyFile, singlePage, deps} = options;
     const tokens = md.parse(input, {});
     let result = input;
 
-    tokens.forEach((token) => {
+    for (const token of tokens) {
         if (token.type !== 'inline') {
             return;
         }
 
         const children = token.children || [];
 
-        children.forEach((childToken) => {
+        for (const childToken of children) {
             if (childToken.type !== 'image') {
                 return;
             }
@@ -40,15 +40,16 @@ const collect = (input: string, options: Options) => {
             const targetPath = resolveRelativePath(path, src);
             const targetDestPath = resolveRelativePath(destPath, src);
 
-            if (singlePage && !path.includes('_includes/')) {
-                const newSrc = relative(root, resolveRelativePath(path, src));
+            deps?.markDep?.(path, targetPath, 'image');
 
+            if (singlePage && !path.includes('_includes/')) {
+                const newSrc = relative(root, targetPath);
                 result = result.replace(src, newSrc);
             }
 
-            copyFile(targetPath, targetDestPath);
-        });
-    });
+            await copyFile(targetPath, targetDestPath);
+        }
+    }
 
     if (singlePage) {
         return result;

src/transform/plugins/images/index.ts

@@ -2,22 +2,23 @@ import {join, sep} from 'path';
 import {bold} from 'chalk';
 import {optimize} from 'svgo';
 import Token from 'markdown-it/lib/token';
-import {readFileSync} from 'fs';
 
-import {isFileExists, resolveRelativePath} from '../../utilsFS';
+import {resolveRelativePath} from '../../utilsFS';
 import {isExternalHref, isLocalUrl} from '../../utils';
 import {MarkdownItPluginCb, MarkdownItPluginOpts} from '../typings';
-import {StateCore} from '../../typings';
+import {FsContext, StateCore} from '../../typings';
+import {defaultFsContext} from '../../fsContext';
 
 interface ImageOpts extends MarkdownItPluginOpts {
     assetsPublicPath: string;
     inlineSvg?: boolean;
 }
 
 function replaceImageSrc(
+    fs: FsContext,
     token: Token,
     state: StateCore,
-    {assetsPublicPath = sep, root = '', path: optsPath, log}: ImageOpts,
+    {assetsPublicPath = sep, root = '', path: optsPath, log, deps}: ImageOpts,
 ) {
     const src = token.attrGet('src') || '';
     const currentPath = state.env.path || optsPath;
@@ -28,7 +29,9 @@ function replaceImageSrc(
 
     const path = resolveRelativePath(currentPath, src);
 
-    if (isFileExists(path)) {
+    deps?.markDep?.(currentPath, path, 'image');
+
+    if (fs.exist(path)) {
         state.md.assets?.push(path);
     } else {
         log.error(`Asset not found: ${bold(src)} in ${bold(currentPath)}`);
@@ -51,15 +54,18 @@ function prefix() {
 }
 
 function convertSvg(
+    fs: FsContext,
     token: Token,
     state: StateCore,
-    {path: optsPath, log, notFoundCb, root}: SVGOpts,
+    {path: optsPath, log, notFoundCb, root, deps}: SVGOpts,
 ) {
     const currentPath = state.env.path || optsPath;
     const path = resolveRelativePath(currentPath, token.attrGet('src') || '');
 
     try {
-        const raw = readFileSync(path).toString();
+        deps?.markDep?.(currentPath, path, 'image');
+
+        const raw = fs.read(path).toString();
         const result = optimize(raw, {
             plugins: [
                 {
@@ -90,6 +96,8 @@ function convertSvg(
 type Opts = SVGOpts & ImageOpts;
 
 const index: MarkdownItPluginCb<Opts> = (md, opts) => {
+    const fs = opts.fs ?? defaultFsContext;
+
     md.assets = [];
 
     const plugin = (state: StateCore) => {
@@ -117,9 +125,9 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
                     const shouldInlineSvg = opts.inlineSvg !== false && !isExternalHref(imgSrc);
 
                     if (imgSrc.endsWith('.svg') && shouldInlineSvg) {
-                        childrenTokens[j] = convertSvg(childrenTokens[j], state, opts);
+                        childrenTokens[j] = convertSvg(fs, childrenTokens[j], state, opts);
                     } else {
-                        replaceImageSrc(childrenTokens[j], state, opts);
+                        replaceImageSrc(fs, childrenTokens[j], state, opts);
                     }
 
                     childrenTokens[j].attrSet('yfm_patched', '1');