Skip to content

Support publishing @typescript/sandbox package to NPM #2437

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.

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

Merged
merged 4 commits into from
Jul 1, 2022
Merged
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
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -76,5 +76,5 @@ packages/documentation/output/attribution.json
.yarn/install-state.gz

packages/sandbox/src/releases.json
packages/sandbox/src/releases.ts
packages/sandbox/src/release_data.ts
packages/typescriptlang-org/src/lib/documentationNavigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const go = async () => {
host + "/js/playground/ds/createDesignSystem.d.ts",
join(ds, "createDesignSystem.d.ts"),
text => {
const renameImport = text.replace("typescriptlang-org/static/js/sandbox", "../sandbox")
const renameImport = text.replace("@typescript/sandbox", "../sandbox")
return renameImport
}
)
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/ds/createDesignSystem.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Sandbox } from "typescriptlang-org/static/js/sandbox"
import type { Sandbox } from "@typescript/sandbox"
import type { DiagnosticRelatedInformation, Node } from "typescript"

export type LocalStorageOption = {
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type StoryContent =
| { type: "code"; code: string; params: string; title: string }
| { type: "hr" }

import type { Sandbox } from "typescriptlang-org/static/js/sandbox"
import type { Sandbox } from "@typescript/sandbox"
import type { UI } from "./createUI"

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/sidebar/runtime.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Sandbox } from "typescriptlang-org/static/js/sandbox"
import { Sandbox } from "@typescript/sandbox"
import { PlaygroundPlugin, PluginFactory } from ".."
import { createUI, UI } from "../createUI"
import { localize } from "../localizeWithFallback"
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/sidebar/showErrors.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { IDisposable } from "monaco-editor"
import type { Sandbox } from "typescriptlang-org/static/js/sandbox"
import type { Sandbox } from "@typescript/sandbox"
import { PlaygroundPlugin, PluginFactory, Playground } from ".."
import { localize } from "../localizeWithFallback"

Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/twoslashInlays.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Sandbox } from "typescriptlang-org/static/js/sandbox"
import { Sandbox } from "@typescript/sandbox"

export const createTwoslashInlayProvider = (sandbox: Sandbox) => {
const provider: import("monaco-editor").languages.InlayHintsProvider = {
Expand Down
6 changes: 2 additions & 4 deletions packages/sandbox/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ This project is useful to you if:

## Builds

This library currently ships as an AMD module. This is the same format that vscode/monaco use, and so you can use
the same runtime loader patterns for importing into your web page. It is not a goal to provide ESM builds so people
can run JS packagers over the project. If someone can make that work and have tests which validate it doesn't break,
we'll accept it.
This library is published to the CDN as an AMD module. This is the same format that vscode/monaco use, and so you can use
the same runtime loader patterns for importing into your web page. This package is also available as an ESM and CJS module on NPM.

## Installation

Expand Down
28 changes: 24 additions & 4 deletions packages/sandbox/package.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,34 @@
{
"name": "@typescript/sandbox",
"version": "0.1.0",
"main": "dist/index.js",
"private": true,
"license": "MIT",
"types": "../../typescriptlang-org/static/js/sandbox/index.d.ts",
"author": "TypeScript team",
"homepage": "https://github.com/microsoft/TypeScript-Website",
"repository": {
"url": "https://github.com/microsoft/TypeScript-Website.git",
"directory": "packages/sandbox",
"type": "git"
},
"bugs": {
"url": "https://github.com/microsoft/TypeScript-Website/issues"
},
"main": "./dist/index.js",
"module": "./dist/sandbox.esm.js",
Copy link
Member

Choose a reason for hiding this comment

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

Did you know that module is something bundlers made up out of thin air? 🙃 It’s ok to keep it, but we should use the new standard exports too:

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "import": "./dist/sandbox.esm.js",
    "default": "./dist/index.js"
  }
}

This is assuming that the index.d.ts file works equally well for the ESM and CJS file, which is probably true if there’s no default export. If there are appreciable differences, there should be a separate sandbox.esm.d.ts. (By the way, why not just sandbox.mjs or index.mjs for that?)

Copy link
Contributor

Choose a reason for hiding this comment

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

This is likely to keep it consistent with the rest of the packages in this repo, it's safe to say that tsdx has not kept up with the times: https://github.com/jaredpalmer/tsdx/releases

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have to admit, my experience publishing packages to NPM is fairly limited! I didn't know about that key so good to know. Left the file extensions to keep things consistent per @orta's comment.

"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/sandbox.esm.js",
"default": "./dist/index.js"
}
},
"files": [
"dist"
],
"scripts": {
"bootstrap": "node script/downloadReleases.js",
"build": "tsc",
"build": "tsdx build --tsconfig tsconfig.lib.json && yarn make-for-website",
"make-for-website": "tsc",
"test": "jest"
},
"jest": {
Expand All @@ -26,11 +44,13 @@
"@typescript/vfs": "1.3.5"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^13.0.1",
"@types/jest": "^25.1.3",
"jest": "*",
"monaco-editor": "^0.32.1",
"monaco-typescript": "^3.7.0",
"ts-jest": "^26.4.4",
"tsdx": "^0.14.1",
"typescript": "*"
}
}
2 changes: 1 addition & 1 deletion packages/sandbox/script/downloadReleases.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const supportedReleases = ["${supportedVersions.join('", "')}"] as const
/** A type of all versions **/
export type ReleaseVersions = "${[possibleBeta, possibleRc, ...versions].join('" | "')}"
`
const path = join(__dirname, "..", "src", "releases.ts")
const path = join(__dirname, "..", "src", "release_data.ts")
writeFileSync(path, format(code, { filepath: path }), "utf8")

const jsonPath = join(__dirname, "..", "src", "releases.json")
Expand Down
2 changes: 1 addition & 1 deletion packages/sandbox/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
createURLQueryWithCompilerOptions,
} from "./compilerOptions"
import lzstring from "./vendor/lzstring.min"
import { supportedReleases } from "./releases"
import { supportedReleases } from "./release_data"
import { getInitialCode } from "./getInitialCode"
import { extractTwoSlashCompilerOptions, twoslashCompletions } from "./twoslashSupport"
import * as tsvfs from "./vendor/typescript-vfs"
Expand Down
2 changes: 1 addition & 1 deletion packages/sandbox/src/monacoTSVersions.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { supportedReleases, ReleaseVersions } from './releases'
import { supportedReleases, ReleaseVersions } from './release_data'

/** The versions you can get for the sandbox */
export type SupportedTSVersions = ReleaseVersions | 'Latest'
Expand Down
7 changes: 7 additions & 0 deletions packages/sandbox/tsconfig.lib.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./dist",
"module": "esnext",
}
}
11 changes: 11 additions & 0 deletions packages/sandbox/tsdx.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const commonjs = require("@rollup/plugin-commonjs");

// Modify the default tsdx rollup config
module.exports = {
rollup(config, options) {
// Required to import lzstring
config.plugins.push(commonjs());

return config;
},
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
type Sandbox = import("../../../../static/js/sandbox").Sandbox
type Sandbox = import("@typescript/sandbox").Sandbox
type Factory = import("../../../../static/js/playground").PluginFactory
type PluginUtils = import("../../../../static/js/playground").PluginUtils

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
type Sandbox = import("../../../../static/js/sandbox").Sandbox
type Sandbox = import("@typescript/sandbox").Sandbox
type Factory = import("../../../../static/js/playground").PluginFactory
type PluginUtils = import("../../../../static/js/playground").PluginUtils

Expand Down
21 changes: 20 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4503,6 +4503,23 @@ __metadata:
languageName: node
linkType: hard

"@rollup/plugin-commonjs@npm:^13.0.1":
version: 13.0.2
resolution: "@rollup/plugin-commonjs@npm:13.0.2"
dependencies:
"@rollup/pluginutils": ^3.0.8
commondir: ^1.0.1
estree-walker: ^1.0.1
glob: ^7.1.2
is-reference: ^1.1.2
magic-string: ^0.25.2
resolve: ^1.11.0
peerDependencies:
rollup: ^2.3.4
checksum: bed46b5f871551b972e95447212a5ccb3d040cb718c720abb387c417d25fe6aab7a0a31c28d07d568e880b81e690cdbb7df606585a2f6b78900f5f76c444107f
languageName: node
linkType: hard

"@rollup/plugin-json@npm:^4.0.0":
version: 4.0.1
resolution: "@rollup/plugin-json@npm:4.0.1"
Expand Down Expand Up @@ -4542,7 +4559,7 @@ __metadata:
languageName: node
linkType: hard

"@rollup/pluginutils@npm:^3.0.0, @rollup/pluginutils@npm:^3.0.9, @rollup/pluginutils@npm:^3.1.0":
"@rollup/pluginutils@npm:^3.0.0, @rollup/pluginutils@npm:^3.0.8, @rollup/pluginutils@npm:^3.0.9, @rollup/pluginutils@npm:^3.1.0":
version: 3.1.0
resolution: "@rollup/pluginutils@npm:3.1.0"
dependencies:
Expand Down Expand Up @@ -5568,13 +5585,15 @@ __metadata:
version: 0.0.0-use.local
resolution: "@typescript/sandbox@workspace:packages/sandbox"
dependencies:
"@rollup/plugin-commonjs": ^13.0.1
"@types/jest": ^25.1.3
"@typescript/ata": 0.9.3
"@typescript/vfs": 1.3.5
jest: "*"
monaco-editor: ^0.32.1
monaco-typescript: ^3.7.0
ts-jest: ^26.4.4
tsdx: ^0.14.1
typescript: "*"
languageName: unknown
linkType: soft
Expand Down