feat(compiler): Add sourcemaps

packages/abell/package.json

@@ -42,14 +42,18 @@
   "homepage": "https://abelljs.org",
   "license": "MIT",
   "dependencies": {
+    "@jridgewell/sourcemap-codec": "^1.4.15",
     "commander": "^7.2.0",
+    "dedent": "^0.7.0",
     "express": "^4.17.2",
     "node-match-path": "^0.6.3",
     "postcss-selector-parser": "^6.0.10",
+    "source-map": "^0.7.4",
     "stylis": "^4.1.0",
     "vite": "4.4.9"
   },
   "devDependencies": {
+    "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.13",
     "@types/stylis": "^4.0.2"
   }

packages/abell/src/type-utils.ts

@@ -13,6 +13,18 @@ export type Route = {
   };
 };
 
+export type SourceMapObject = { pos?: number; col?: number; line?: number };
+export type BlockMapType = {
+  start?: SourceMapObject;
+  end?: SourceMapObject;
+  type?: 'default' | 'import' | 'declaration';
+};
+export type MapsObject = {
+  importTextMap: SourceMapObject[];
+  declarationTextMap: SourceMapObject[];
+  abellTextMap: SourceMapObject[];
+};
+
 export type StyleTagAttributes = Record<string, string | boolean>;
 export type CSSBlockType = {
   text: string;
@@ -27,6 +39,7 @@ export type AbstractSyntaxArrayType = {
     text: string;
     blocks: { text: string }[];
   };
+  maps: BlockMapType[];
 };
 
 export type AbellOptions = {

packages/abell/src/utils/__tests__/test-files/generated.ts

@@ -0,0 +1,26 @@
+import { default as _path } from 'path';
+import { evaluateAbellBlock as e } from 'abell';
+
+    import x from './x';
+
+const __filename = "/test.abell";
+const __dirname = _path.dirname(__filename);
+const root = _path.relative(__dirname, "/")
+export const html = (props = {}) => {
+  const Abell = { props, __filename, __dirname };
+
+    /** @declarations */
+    const x = 999;
+
+  return `
+
+
+  <b></b>
+
+
+  </style>
+  <nav></nav>
+  `
+};
+export default html;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9yaWdpbmFsLmFiZWxsIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztLQUNLOztLQUVBIiwiZmlsZSI6ImdlbmVyYXRlZC50cyIsInNvdXJjZVJvb3QiOiIvVXNlcnMvc2F1cmFiaGRhd2FyZS9EZXNrdG9wL3Byb2plY3RzL2FiZWxsLW9yZy9hYmVsbC1tb25vcmVwby9wYWNrYWdlcy9hYmVsbC9zcmMvdXRpbHMvX190ZXN0c19fL3Rlc3QtZmlsZXMiLCJzb3VyY2VzQ29udGVudCI6WyJcbiAgICB7e1xuICAgICAgaW1wb3J0IHggZnJvbSAnLi94JztcbiAgICB9fVxuXG4gICAgPGI+e3sgMyArIDQgfX08L2I+XG4gICAge3tcbiAgICAgIC8qKiBAZGVjbGFyYXRpb25zICovXG4gICAgICBjb25zdCB4ID0gOTk5O1xuICAgIH19XG5cbiAgICA8c3R5bGUgYWJlbGwtZ2VuZXJhdGVkPlxuICAgIG5hdiB7XG4gICAgICBiYWNrZ3JvdW5kOiB7eyAyICsgMyB9fVxuICAgIH1cbiAgICA8L3N0eWxlPlxuICAgIDxuYXY+e3sgeCAqIDIgfX08L25hdj5cbiAgICAiXX0=

packages/abell/src/utils/__tests__/test-files/original.abell

@@ -0,0 +1,18 @@
+
+    {{
+      import x from './x';
+    }}
+
+    <b>{{ 3 + 4 }}</b>
+    {{
+      /** @declarations */
+      const x = 999;
+    }}
+
+    <style abell-generated>
+    nav {
+      background: {{ 2 + 3 }}
+    }
+    </style>
+    <nav>{{ x * 2 }}</nav>
+

packages/abell/src/vite-plugin-abell/compiler/compiler.spec.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import fs from 'fs';
 import path from 'path';
 import { describe, test, expect, vi, beforeAll, afterAll } from 'vitest';
 import { compile } from './index';
@@ -74,7 +75,7 @@ describe('compile()', () => {
     `);
   });
 
-  test('should place declarations and imports at correct places', () => {
+  test.only('should place declarations and imports at correct places', () => {
     const abellCode = `
     {{
       import x from './x';
@@ -85,18 +86,40 @@ describe('compile()', () => {
       /** @declarations */
       const x = 999;
     }}
+
+    <style abell-generated>
+    nav {
+      background: {{ 2 + 3 }}
+    }
+    </style>
     <nav>{{ x * 2 }}</nav>
     `;
 
     const js = compile(abellCode, {
       filepath: consistentPathJoin(process.cwd(), 'test.abell'),
       cwd: process.cwd()
     });
-    expect(js.trim().replace(`\\\\test.abell`, '/test.abell'))
+
+    fs.writeFileSync(
+      path.resolve(
+        __dirname,
+        '../../utils/__tests__/test-files/original.abell'
+      ),
+      abellCode
+    );
+
+    fs.writeFileSync(
+      path.resolve(__dirname, '../../utils/__tests__/test-files/generated.ts'),
+      js.code +
+        `\n//# sourceMappingURL=data:application/json;base64,` +
+        Buffer.from(js.map.toString()).toString('base64')
+    );
+
+    expect(js.code.replace(`\\\\test.abell`, '/test.abell'))
       .toMatchInlineSnapshot(`
-      "import { default as _path } from 'path';
+        "import { default as _path } from 'path';
         import { evaluateAbellBlock as e } from 'abell';
-        
+
             import x from './x';
 
         const __filename = \\"/test.abell\\";
@@ -117,7 +140,7 @@ describe('compile()', () => {
           \`
         };
         export default html;"
-    `);
+      `);
   });
 
   test('should successfully compile with imports', () => {

packages/abell/src/vite-plugin-abell/compiler/compiler.ts

@@ -1,5 +1,7 @@
 /* eslint-disable max-len */
-import { AbstractSyntaxArrayType } from '../../type-utils.js';
+import path from 'path';
+import dedent from 'dedent';
+import { SourceMapGenerator } from 'source-map';
 import tokenize from './generic-tokenizer.js';
 import { getScopedHTML } from './scope-css/index.js';
 import { getSyntaxBlocks } from './syntax-blocks.js';
@@ -20,28 +22,22 @@ interface CompileOptions {
   outputType?: 'js-string' | 'syntax-blocks';
 }
 
-interface HTMLOutputCompileOptions extends CompileOptions {
-  outputType: 'syntax-blocks';
-}
-
-interface JSOutputCompileOptions extends CompileOptions {
-  outputType?: 'js-string';
-}
-
-type CompileOutputType = string | AbstractSyntaxArrayType;
+type CompileOutputType = {
+  code: string;
+  map: SourceMapGenerator;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  meta: any;
+};
 
-export function compile(
-  abellTemplate: string,
-  options: HTMLOutputCompileOptions
-): AbstractSyntaxArrayType;
-export function compile(
-  abellTemplate: string,
-  options: JSOutputCompileOptions
-): string;
 export function compile(
   abellTemplate: string,
   options: CompileOptions
 ): CompileOutputType {
+  const sourceMap = new SourceMapGenerator({
+    file: 'generated.ts',
+    sourceRoot: path.join(__dirname, '../../utils/__tests__/test-files')
+  });
+
   const tokens = tokenize<TokenSchemaType>(
     abellTemplate,
     tokenSchema,
@@ -52,31 +48,129 @@ export function compile(
     abellTemplate.includes('<html') && abellTemplate.includes('</html>');
   const isAbellComponent = !isHTMLPage;
 
-  const { declarationBlocks, importBlock, cssBlocks, out } = getSyntaxBlocks(
-    tokens,
-    {
+  const { declarationBlocks, importBlock, cssBlocks, out, maps } =
+    getSyntaxBlocks(tokens, {
       isPage: isHTMLPage
-    }
-  );
+    });
 
   let htmlOut = out.text;
   if (isAbellComponent) {
     htmlOut = getScopedHTML(htmlOut, cssBlocks, options.filepath);
   }
 
-  if (options.outputType === 'syntax-blocks') {
-    return {
-      declarationBlocks,
-      importBlock,
-      out: {
-        blocks: out.blocks,
-        text: htmlOut
-      },
-      cssBlocks
-    };
+  const IMPORTS_OFFSET = 2;
+  // const DECLARATIONS_OFFSET = {
+  //   line: 9 +
+  // }
+
+  // // const mapss = [];
+  // const importLinesDiff =
+  //   maps.importTextMap[maps.importTextMap.length - 1].line! -
+  //   maps.importTextMap[0].line!;
+
+  // const DECLARATIONS_OFFSET = {
+  //   line: 9 + importLinesDiff,
+  //   col: 2
+  // };
+
+  // console.dir(maps, { depth: Infinity });
+
+  for (const blockMap of maps.filter((map) => map.type === 'import')) {
+    const { start, end } = blockMap;
+    if (typeof start?.col !== undefined && typeof start?.line !== undefined) {
+      sourceMap.addMapping({
+        generated: {
+          line: IMPORTS_OFFSET + start.line,
+          column: start?.col
+        },
+        source: 'original.abell',
+        original: {
+          line: start.line,
+          column: start.col
+        }
+      });
+    }
+
+    if (typeof end?.col !== undefined && typeof end?.line !== undefined) {
+      sourceMap.addMapping({
+        generated: {
+          line: IMPORTS_OFFSET + end.line,
+          column: end?.col
+        },
+        source: 'original.abell',
+        original: {
+          line: end.line,
+          column: end.col
+        }
+      });
+    }
   }
 
-  const jsOut = `
+  // for (const importTextMapIndex in maps.importTextMap) {
+  //   const importTextMapObj = maps.importTextMap[importTextMapIndex];
+  //   const idx = Number(importTextMapIndex);
+
+  //   if (importTextMapObj.col && importTextMapObj.line) {
+  //     sourceMap.addMapping({
+  //       generated: {
+  //         line:
+  //           idx <= 0
+  //             ? IMPORTS_OFFSET
+  //             : IMPORTS_OFFSET +
+  //               (maps.importTextMap[idx]?.line ?? 0) -
+  //               (maps.importTextMap[idx - 1]?.line ?? 0),
+  //         column: importTextMapObj.col
+  //       },
+  //       source: 'original.abell',
+  //       original: {
+  //         line: importTextMapObj.line,
+  //         column: importTextMapObj.col
+  //       }
+  //     });
+  //   }
+  // }
+
+  // for (const declarationTextMapIndex in maps.declarationTextMap) {
+  //   const declarationTextMapObj =
+  //     maps.declarationTextMap[declarationTextMapIndex];
+  //   const idx = Number(declarationTextMapIndex);
+
+  //   if (declarationTextMapObj.col && declarationTextMapObj.line) {
+  //     sourceMap.addMapping({
+  //       generated: {
+  //         line:
+  //           idx <= 0
+  //             ? DECLARATIONS_OFFSET.line
+  //             : DECLARATIONS_OFFSET.line +
+  //               (maps.declarationTextMap[idx]?.line ?? 0) -
+  //               (maps.declarationTextMap[idx - 1]?.line ?? 0),
+  //         column: DECLARATIONS_OFFSET.col + declarationTextMapObj.col
+  //       },
+  //       source: 'original.abell',
+  //       original: {
+  //         line: declarationTextMapObj.line,
+  //         column: declarationTextMapObj.col
+  //       }
+  //     });
+  //   }
+  // }
+
+  // console.log(mapss);
+
+  const meta = {
+    declarationBlocks,
+    importBlock,
+    out: {
+      blocks: out.blocks,
+      text: htmlOut
+    },
+    cssBlocks,
+    maps
+  };
+
+  sourceMap.setSourceContent('original.abell', abellTemplate);
+
+  const jsOut = dedent`
   import { default as _path } from 'path';
   import { evaluateAbellBlock as e } from 'abell';
   ${importBlock.text}
@@ -89,9 +183,13 @@ export function compile(
     return \`${htmlOut}\`
   };
   export default html;
-  `.trim();
+  `;
 
-  return jsOut;
+  return {
+    code: jsOut,
+    map: sourceMap,
+    meta
+  };
 }
 
 export default compile;