Source Maps

Source Maps — это механизм, позволяющий связывать скомпилированный или минимизированный код с исходными файлами. В контексте Slim.js они особенно важны при работе с компонентами, так как Slim.js использует виртуальный DOM и часто компилирует шаблоны и скрипты в компактный JavaScript для повышения производительности.

Назначение Source Maps

Основная цель Source Maps — облегчить отладку и анализ кода в браузере. При работе со скомпилированными компонентами Slim.js исходный код шаблонов и скриптов может отличаться от того, что фактически выполняется. Source Maps позволяют:

Отслеживать ошибки в исходных файлах, а не в минифицированной версии.
Навигация в отладчике браузера по оригинальным файлам Slim-компонентов.
Упрощение профилирования производительности и логирования.

Структура Source Maps

Source Map представляет собой JSON-файл с набором ключевых полей:

version — версия формата Source Map.
file — имя скомпилированного файла, к которому привязан Source Map.
sources — массив путей исходных файлов.
sourcesContent — содержимое исходных файлов (опционально, но удобно для полноценной отладки).
names — список идентификаторов переменных и функций.
mappings — строка, кодирующая соответствие между позициями в исходном и скомпилированном коде.

Пример структуры:

{
  "version": 3,
  "file": "bundle.js",
  "sources": ["component.slim.js"],
  "sourcesContent": ["console.log('Hello from Slim component');"],
  "names": ["console","log"],
  "mappings": "AAAAA,QAAQC,IAAI,CAAC,GAAG,CAAC"
}

Генерация Source Maps в Slim.js

Slim.js сам по себе не компилирует файлы, как TypeScript или Babel, но его сборка через инструмент сборки (Webpack, Vite, Rollup) позволяет автоматически создавать Source Maps. Основные параметры конфигурации:

devtool (Webpack) — указывает формат Source Maps. Значения: source-map, inline-source-map, eval-source-map.
sourcemap (Rollup/Vite) — булевое значение или строка формата, указывающая, включать ли Source Map.

Пример конфигурации Webpack для Slim.js:

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.slim$/,
        use: [
          'slim-loader'
        ]
      }
    ]
  }
};

Использование в браузере

При подключении скрипта с Source Map в браузере автоматически подхватывается файл .map, если в конце основного файла присутствует ссылка:

//# sourceMappingURL=bundle.js.map

После этого в инструментах разработчика Chrome, Firefox или Edge:

Ошибки показываются с указанием исходного файла .slim.js.
Можно ставить точки останова (breakpoints) в исходных файлах.
Легко просматривать значения переменных и стек вызовов в исходном коде.

Отладка компонентов Slim.js

Slim.js использует реактивные свойства и виртуальный DOM, что делает Source Maps особенно ценными:

Любая ошибка в рендеринге шаблона (render()) или реактивной функции будет ссылаться на точное место в исходном .slim файле.
При минификации код компонентов остаётся компактным, но Source Map сохраняет читаемость исходника.
Инструменты вроде VS Code позволяют прямо переходить к исходному коду при отладке.

Интеграция с другими инструментами

Source Maps Slim.js работают в связке с:

Babel — при использовании современных синтаксисов и трансформации JavaScript.
TypeScript — для компонентов, написанных с типами, сохраняется связь между .ts и скомпилированным JS.
PostCSS / SCSS — для стилей, если Slim.js инлайнит CSS, Source Map помогает отследить ошибки стилей в исходных файлах.