Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed the default export shape in strict ESM environments #543

Merged
merged 20 commits into from
May 1, 2023
Merged

Fixed the default export shape in strict ESM environments #543

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
fd91a80
Fixed the default export shape in strict ESM environments
Andarist Apr 14, 2023
1a2cd08
simplify reexporting named exports at runtime level
Andarist Apr 14, 2023
68b1680
do the same for types
Andarist Apr 14, 2023
95e70f0
remove unused function
Andarist Apr 14, 2023
9a36362
Reuse the same template for mjs and dmts
Andarist Apr 14, 2023
f8fa3ee
useMjsProxy -> unwrappedDefaultExportForImportCondition
Andarist Apr 14, 2023
d80fa6f
add a changeset
Andarist Apr 14, 2023
3dbee6f
Change `unwrappedDefaultExportForImportCondition` to `importDefaultEx…
Andarist Apr 27, 2023
dfdcc1a
add dev thing
Andarist Apr 27, 2023
973d6b7
dmts and dmtsmaps in dev
Andarist Apr 27, 2023
34ca570
Add some more tests
emmatown Apr 27, 2023
f9011d4
Fix declaration maps for .d.mts in build
emmatown Apr 28, 2023
d8d9e87
Docs
emmatown Apr 29, 2023
fed31ff
Allow configuring importDefaultExport at the project level
emmatown Apr 29, 2023
40ad162
Fix variable names
emmatown Apr 29, 2023
c5cc67a
Fix some things
emmatown Apr 29, 2023
465787e
Fix dev
emmatown Apr 29, 2023
f2ad733
Update naming
emmatown May 1, 2023
338daef
Fix unnecessary mjs proxies for use client boundaries
emmatown May 1, 2023
a863d53
Don't export a thing that isn't used elsewhere
emmatown May 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
376 changes: 376 additions & 0 deletions packages/cli/src/build/__tests__/build.ts
View file
Open in desktop
Expand Up @@ -18,6 +18,7 @@ import {
import { doPromptInput as _doPromptInput } from "../../prompt";
import { confirms as _confirms } from "../../messages";
import spawn from "spawndamnit";
import stripAnsi from "strip-ansi";

const f = fixturez(__dirname);

Expand Down Expand Up @@ -1054,6 +1055,9 @@ test("correct default export using mjs and dmts proxies", async () => {
import ns from "./declarations/src/index.js";
export default ns.default;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-a/dist/pkg-a.cjs.d.mts.map ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
{"version":3,"file":"pkg-a.cjs.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA"}

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-a/dist/pkg-a.cjs.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export * from "./declarations/src/index";
export { default } from "./declarations/src/index";
Expand Down Expand Up @@ -1135,6 +1139,378 @@ test("correct default export using mjs and dmts proxies", async () => {
expect(node.stderr.toString("utf8")).toMatchInlineSnapshot(`""`);
});

test("importing a package via dynamic import from another package provides the right types", async () => {
let dir = await testdir({
"package.json": JSON.stringify({
name: "@mjs-proxy/repo",
preconstruct: {
packages: ["packages/*"],
},
}),
"packages/pkg-a/package.json": JSON.stringify({
name: "pkg-a",
main: "dist/pkg-a.cjs.js",
module: "dist/pkg-a.esm.js",
exports: {
".": {
module: "./dist/pkg-a.esm.js",
import: "./dist/pkg-a.cjs.mjs",
default: "./dist/pkg-a.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
}),
"packages/pkg-a/src/index.ts": ts`
export const thing = "index";
export default true;
`,
"packages/pkg-b/package.json": JSON.stringify({
name: "pkg-b",
main: "dist/pkg-b.cjs.js",
module: "dist/pkg-b.esm.js",
exports: {
".": {
module: "./dist/pkg-b.esm.js",
import: "./dist/pkg-b.cjs.mjs",
default: "./dist/pkg-b.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
dependencies: {
"pkg-a": "^1.0.0",
},
}),

"packages/pkg-b/src/index.ts": ts`
export const thing = import("pkg-a").then((x) => x.default);
`,

"node_modules/typescript": {
kind: "symlink",
path: path.join(repoNodeModules, "typescript"),
},
"tsconfig.json": JSON.stringify({
compilerOptions: {
module: "NodeNext",
moduleResolution: "nodenext",
strict: true,
declaration: true,
},
}),
});
await fs.ensureSymlink(
path.join(dir, "packages/pkg-a"),
path.join(dir, "node_modules/pkg-a")
);
await fs.ensureSymlink(
path.join(dir, "packages/pkg-b"),
path.join(dir, "node_modules/pkg-b")
);
await build(dir);

expect(await getFiles(dir, ["packages/pkg-b/dist/**"]))
.toMatchInlineSnapshot(`
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/declarations/src/index.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export declare const thing: Promise<boolean>;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.mts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export {
thing
} from "./declarations/src/index.js";

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.mts.map ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
{"version":3,"file":"pkg-b.cjs.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA"}

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export * from "./declarations/src/index";
//# sourceMappingURL=pkg-b.cjs.d.ts.map

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.ts.map ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
{"version":3,"file":"pkg-b.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.dev.js, packages/pkg-b/dist/pkg-b.cjs.prod.js ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}

const thing = Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('pkg-a')); }).then(x => x.default);

exports.thing = thing;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.js ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
'use strict';

if (process.env.NODE_ENV === "production") {
module.exports = require("./pkg-b.cjs.prod.js");
} else {
module.exports = require("./pkg-b.cjs.dev.js");
}

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.mjs ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export {
thing
} from "./pkg-b.cjs.js";

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.esm.js ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
const thing = import('pkg-a').then(x => x.default);

export { thing };

`);
});

test("importing another package via dynamic import and exporting the namespace produces a typescript error because the type cannot be named", async () => {
let dir = await testdir({
"package.json": JSON.stringify({
name: "@mjs-proxy/repo",
preconstruct: {
packages: ["packages/*"],
},
}),
"packages/pkg-a/package.json": JSON.stringify({
name: "pkg-a",
main: "dist/pkg-a.cjs.js",
module: "dist/pkg-a.esm.js",
exports: {
".": {
module: "./dist/pkg-a.esm.js",
import: "./dist/pkg-a.cjs.mjs",
default: "./dist/pkg-a.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
}),
"packages/pkg-a/src/index.ts": ts`
export const thing = "index";
export default true;
`,
"packages/pkg-b/package.json": JSON.stringify({
name: "pkg-b",
main: "dist/pkg-b.cjs.js",
module: "dist/pkg-b.esm.js",
exports: {
".": {
module: "./dist/pkg-b.esm.js",
import: "./dist/pkg-b.cjs.mjs",
default: "./dist/pkg-b.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
dependencies: {
"pkg-a": "^1.0.0",
},
}),

"packages/pkg-b/src/index.ts": ts`
export const thing = import("pkg-a");
`,

"node_modules/typescript": {
kind: "symlink",
path: path.join(repoNodeModules, "typescript"),
},
"tsconfig.json": JSON.stringify({
compilerOptions: {
module: "NodeNext",
moduleResolution: "nodenext",
strict: true,
declaration: true,
},
}),
});
await fs.ensureSymlink(
path.join(dir, "packages/pkg-a"),
path.join(dir, "node_modules/pkg-a")
);
await fs.ensureSymlink(
path.join(dir, "packages/pkg-b"),
path.join(dir, "node_modules/pkg-b")
);
const error = await build(dir).catch((x) => x);
expect(stripAnsi(error + "")).toMatchInlineSnapshot(`
"Error: 🎁 Generating TypeScript declarations for packages/pkg-b/src/index.ts failed:
🎁 packages/pkg-b/src/index.ts:1:14 - error TS2841: The type of this expression cannot be named without a 'resolution-mode' assertion, which is an unstable feature. Use nightly TypeScript to silence this error. Try updating with 'npm install -D typescript@next'.
🎁
🎁 1 export const thing = import("pkg-a");
Comment on lines +1344 to +1346
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this because TS already supported import in declaration files, it had its own semantics and stuff so now it can't use that syntax alone to differentiate between loading a thing with import/require semantics? 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes

🎁 ~~~~~
🎁"
`);
});

test("importing another package via dynamic import and exporting something that requires importing a type from the other package works", async () => {
let dir = await testdir({
"package.json": JSON.stringify({
name: "@mjs-proxy/repo",
preconstruct: {
packages: ["packages/*"],
},
}),
"packages/pkg-a/package.json": JSON.stringify({
name: "pkg-a",
main: "dist/pkg-a.cjs.js",
module: "dist/pkg-a.esm.js",
exports: {
".": {
module: "./dist/pkg-a.esm.js",
import: "./dist/pkg-a.cjs.mjs",
default: "./dist/pkg-a.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
}),
"packages/pkg-a/src/index.ts": ts`
export type A = {
a?: A;
};
export const thing: A = {};
const _default: A = {};
export default _default;
`,
"packages/pkg-b/package.json": JSON.stringify({
name: "pkg-b",
main: "dist/pkg-b.cjs.js",
module: "dist/pkg-b.esm.js",
exports: {
".": {
module: "./dist/pkg-b.esm.js",
import: "./dist/pkg-b.cjs.mjs",
default: "./dist/pkg-b.cjs.js",
},
"./package.json": "./package.json",
},
preconstruct: {
entrypoints: ["index.ts"],
exports: {
importDefaultExport: "unwrapped-default",
},
},
dependencies: {
"pkg-a": "^1.0.0",
},
}),

"packages/pkg-b/src/index.ts": ts`
export const pkgADefault = import("pkg-a").then((x) => x.default);
export const pkgAThing = import("pkg-a").then((x) => x.thing);
`,

"node_modules/typescript": {
kind: "symlink",
path: path.join(repoNodeModules, "typescript"),
},
"node_modules/@babel/preset-typescript": {
kind: "symlink",
path: path.join(repoNodeModules, "@babel/preset-typescript"),
},
"babel.config.json": JSON.stringify({
presets: ["@babel/preset-typescript"],
}),
"tsconfig.json": JSON.stringify({
compilerOptions: {
module: "NodeNext",
moduleResolution: "nodenext",
strict: true,
declaration: true,
},
}),
});
await fs.ensureSymlink(
path.join(dir, "packages/pkg-a"),
path.join(dir, "node_modules/pkg-a")
);
await fs.ensureSymlink(
path.join(dir, "packages/pkg-b"),
path.join(dir, "node_modules/pkg-b")
);
await build(dir);

expect(await getFiles(dir, ["packages/*/dist/**/*.d.{,m}ts"]))
.toMatchInlineSnapshot(`
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-a/dist/declarations/src/index.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export declare type A = {
a?: A;
};
export declare const thing: A;
declare const _default: A;
export default _default;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-a/dist/pkg-a.cjs.d.mts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export {
thing
} from "./declarations/src/index.js";
import ns from "./declarations/src/index.js";
export default ns.default;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-a/dist/pkg-a.cjs.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export * from "./declarations/src/index";
export { default } from "./declarations/src/index";
//# sourceMappingURL=pkg-a.cjs.d.ts.map

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/declarations/src/index.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export declare const pkgADefault: Promise<import("pkg-a").A>;
export declare const pkgAThing: Promise<import("pkg-a").A>;

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.mts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export {
pkgADefault,
pkgAThing
} from "./declarations/src/index.js";

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ packages/pkg-b/dist/pkg-b.cjs.d.ts ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
export * from "./declarations/src/index";
//# sourceMappingURL=pkg-b.cjs.d.ts.map

`);
});

test("no __esModule when reexporting namespace with mjs proxy", async () => {
let dir = await testdir({
"package.json": JSON.stringify({
Expand Down