Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 33 additions & 30 deletions tools/workspace-plugin/src/executors/build/executor.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,8 @@ describe('Build Executor', () => {
const styles = useStyles();
return \`<h1 class=\\"\${styles}\\">\${greeting} \${user.name} from \${(_user_hometown = user.hometown) === null || _user_hometown === void 0 ? void 0 : _user_hometown.name}</h1>\`;
}
"

//# sourceMappingURL=greeter.js.map"
`);
expect(readFileSync(join(workspaceRoot, 'libs/proj/lib/greeter.js.map'), 'utf-8')).toMatchInlineSnapshot(
`"{\\"version\\":3,\\"sources\\":[\\"../src/greeter.ts\\"],\\"sourcesContent\\":[\\"import { useStyles } from './greeter.styles';\\\\nexport function greeter(greeting: string, user: User): string {\\\\n const styles = useStyles();\\\\n return \`<h1 class=\\\\\\"\${styles}\\\\\\">\${greeting} \${user.name} from \${user.hometown?.name}</h1>\`;\\\\n}\\\\n\\\\ntype User = {\\\\n name: string;\\\\n hometown?: {\\\\n name: string;\\\\n };\\\\n};\\\\n\\"],\\"names\\":[\\"useStyles\\",\\"greeter\\",\\"greeting\\",\\"user\\",\\"styles\\",\\"name\\",\\"hometown\\"],\\"mappings\\":\\"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,OAAO,SAASC,QAAQC,QAAgB,EAAEC,IAAU;QAEYA;IAD9D,MAAMC,SAASJ;IACf,OAAO,CAAC,WAAW,EAAEI,OAAO,EAAE,EAAEF,SAAS,CAAC,EAAEC,KAAKE,IAAI,CAAC,MAAM,GAAEF,iBAAAA,KAAKG,QAAQ,cAAbH,qCAAAA,eAAeE,IAAI,CAAC,KAAK,CAAC;AAC1F\\"}"`,
Expand All @@ -228,7 +229,7 @@ describe('Build Executor', () => {
var _user_hometown;
const styles = (0, _greeterstyles.useStyles)();
return \`<h1 class=\\"\${styles}\\">\${greeting} \${user.name} from \${(_user_hometown = user.hometown) === null || _user_hometown === void 0 ? void 0 : _user_hometown.name}</h1>\`;
}
} //# sourceMappingURL=greeter.js.map
"
`);

Expand All @@ -243,7 +244,8 @@ describe('Build Executor', () => {
}
}, {
d: [\\".fe3e8s9{color:red;}\\"]
});"
});
//# sourceMappingURL=greeter.styles.js.map"
`);
expect(readFileSync(join(workspaceRoot, 'libs/proj/lib-commonjs/greeter.styles.js'), 'utf-8'))
.toMatchInlineSnapshot(`
Expand All @@ -266,7 +268,7 @@ describe('Build Executor', () => {
d: [
\\".fe3e8s9{color:red;}\\"
]
});
}); //# sourceMappingURL=greeter.styles.js.map
"
`);

Expand Down Expand Up @@ -319,34 +321,35 @@ describe('Build Executor', () => {
// assert raw styles content matches the original SWC-compiled styles (before Griffel transformation)
// =====================
expect(readFileSync(join(workspaceRoot, 'libs/proj/lib/greeter.styles.raw.js'), 'utf-8')).toMatchInlineSnapshot(`
"import { makeStyles } from '@griffel/react';
export const useStyles = makeStyles({
root: {
color: 'red'
}
});
"
`);
"import { makeStyles } from '@griffel/react';
export const useStyles = makeStyles({
root: {
color: 'red'
}
});

//# sourceMappingURL=greeter.styles.js.map"
`);
expect(readFileSync(join(workspaceRoot, 'libs/proj/lib-commonjs/greeter.styles.raw.js'), 'utf-8'))
.toMatchInlineSnapshot(`
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
Object.defineProperty(exports, \\"useStyles\\", {
enumerable: true,
get: function() {
return useStyles;
}
});
const _react = require(\\"@griffel/react\\");
const useStyles = (0, _react.makeStyles)({
root: {
color: 'red'
}
});
"
`);
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
Object.defineProperty(exports, \\"useStyles\\", {
enumerable: true,
get: function() {
return useStyles;
}
});
const _react = require(\\"@griffel/react\\");
const useStyles = (0, _react.makeStyles)({
root: {
color: 'red'
}
}); //# sourceMappingURL=greeter.styles.js.map
"
`);

// =====================
// showcase that babel transformation creates invalid source map - which differs with raw styles source maps produced by SWC-compiled source maps (before Griffel transformation)
Expand Down
9 changes: 1 addition & 8 deletions tools/workspace-plugin/src/executors/build/lib/babel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,7 @@ async function babel(esmModuleOutput: NormalizedOptions['moduleOutput'][number],
sourceFileName: basename(filename),
})) /* Bad `transformAsync` types. it can be null only if 2nd param is null(config)*/ as NonNullableRecord<BabelFileResult>;

// FIXME:
// - NOTE: needs to be fixed primarily in {@link 'file://./swc.ts'} as well
// - swc does not add source mapping url when using @swc/core imperative APIs (unlike @swc/cli) (//# sourceMappingURL=) !
// - we ship transpiled files without proper source mapping since - Wed, 31 May 2023 (the swithc from swc/cli to programatic api useage)
// - @swc/cli does add source mapping because besides invoking swc/core programatically it also contains custom logic to add source mapping url https://github.com/swc-project/pkgs/blob/main/packages/cli/src/swc/compile.ts#L42-L44
// const resultCode = addSourceMappingUrl(result.code, basename(filename) + '.map');

const resultCode = result.code;
const resultCode = addSourceMappingUrl(result.code, basename(filename) + '.map');

if (resultCode === sourceCode) {
logger.verbose(`babel: skipped ${filePath}`);
Expand Down
24 changes: 21 additions & 3 deletions tools/workspace-plugin/src/executors/build/lib/swc.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { mkdir, writeFile, copyFile } from 'node:fs/promises';
import { writeFileSync } from 'node:fs';
import { dirname, join } from 'node:path';
import { dirname, join, basename } from 'node:path';

import { globSync } from 'fast-glob';
import { isMatch } from 'micromatch';
Expand Down Expand Up @@ -64,15 +64,33 @@ export async function compileSwc(
// Create directory folder for new compiled file(s) to live in.
await mkdir(dirname(compiledFilePath), { recursive: true });

await writeFile(compiledFilePath, resultCode);
await applyTransforms(compiledFilePath, transforms);
// If a source map was produced, write it and append a sourceMappingURL comment to the JS output

let finalCode = resultCode;
if (result.map) {
const mapFilePath = `${compiledFilePath}.map`;

// write the map file
await writeFile(mapFilePath, result.map);
await applyTransforms(mapFilePath, transforms);

// append sourceMappingURL to the JS file (use basename so it's a relative filename)
finalCode = addSourceMappingUrl(finalCode, basename(mapFilePath));
}

await writeFile(compiledFilePath, finalCode);
await applyTransforms(compiledFilePath, transforms);
}
}

// NOTE: The SWC CLI adds the sourceMappingURL comment itself. Programmatic @swc/core does not,
// so we add it here to mirror the CLI behavior. See swc CLI implementation for reference:
// https://github.com/swc-project/pkgs/blob/main/packages/cli/src/swc/compile.ts#L42-L44
function addSourceMappingUrl(code: string, sourceMapLocation: string): string {
if (!code.includes('sourceMappingURL=')) {
return code + '\n//# sourceMappingURL=' + sourceMapLocation;
}
return code;
}

type Transform = (filePath: string) => Promise<void>;
Expand Down
Loading