Skip to content

Enable @prettier/plugin-oxc in playground #17575

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

Draft
wants to merge 32 commits into
base: main
Choose a base branch
from
Draft
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
10 changes: 9 additions & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
YARN_VERSION = "1.22.22"

[[headers]]
for = "/worker.js"
for = "/playground/"
[headers.values]
Cross-Origin-Opener-Policy = "same-origin"
Cross-Origin-Embedder-Policy = "require-corp"
Permissions-Policy = "cross-origin-isolated=(*)"

[[headers]]
for = "/worker.mjs"
[headers.values]
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-eval'"
Cross-Origin-Embedder-Policy = "require-corp"
14 changes: 8 additions & 6 deletions scripts/build-website.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,14 @@ async function buildPlaygroundFiles() {

// TODO: Support stable version
if (IS_PULL_REQUEST) {
const fileName = "plugins/hermes.mjs";
files.push({
fileName,
file: path.join(DIST_DIR, "plugin-hermes/index.mjs"),
dist: path.join(PLAYGROUND_PRETTIER_DIR, fileName),
});
for (const pluginName of ["hermes", "oxc"]) {
const fileName = `plugins/${pluginName}.mjs`;
files.push({
fileName,
file: path.join(DIST_DIR, `plugin-${pluginName}/index.mjs`),
dist: path.join(PLAYGROUND_PRETTIER_DIR, fileName),
});
}
}

const packageManifest = {
Expand Down
3 changes: 2 additions & 1 deletion scripts/build/build-javascript-module.js
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,8 @@ function getEsbuildOptions({ packageConfig, file, cliOptions }) {
esbuildPluginVisualizer({ formats: cliOptions.reports }),
esbuildPluginThrowWarnings({
allowDynamicRequire: file.platform === "node",
allowDynamicImport: file.platform === "node",
allowDynamicImport:
buildOptions.allowDynamicImport ?? file.platform === "node",
}),
buildOptions.addDefaultExport && esbuildPluginAddDefaultExport(),
].filter(Boolean),
Expand Down
9 changes: 9 additions & 0 deletions scripts/build/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ const clear = () => {
async function buildFile({ packageConfig, file, cliOptions, results }) {
const { distDirectory } = packageConfig;
let displayName = file.output.file;

if (file.playgroundOnly) {
displayName = ` ${displayName} (playground)`;
}

if (
(file.platform === "universal" && file.output.format !== "esm") ||
(file.output.file.startsWith("index.") && file.output.format !== "esm") ||
Expand Down Expand Up @@ -179,6 +184,10 @@ async function run() {
const startTime = performance.now();
const results = [];
for (const file of packageConfig.files) {
if (!cliOptions.playground && file.playgroundOnly) {
continue;
}

const result = await buildFile({
packageConfig,
file,
Expand Down
44 changes: 41 additions & 3 deletions scripts/build/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import path from "node:path";
import url from "node:url";
import createEsmUtils from "esm-utils";
import { outdent } from "outdent";
import projectPackageJson from "../../package.json" with { type: "json" };
import { copyFile, DIST_DIR, PROJECT_ROOT } from "../utils/index.js";
import buildDependenciesLicense from "./build-dependencies-license.js";
import buildJavascriptModule from "./build-javascript-module.js";
Expand Down Expand Up @@ -71,6 +72,7 @@ function getTypesFileConfig({ input: jsFileInput, outputBaseName, isPlugin }) {
* @property {BuildOptions} buildOptions - ESBuild options
* @property {boolean?} isPlugin - file is a plugin
* @property {boolean?} addDefaultExport - add default export to bundle
* @property {boolean?} playgroundOnly - only build for playground
*/

const extensions = {
Expand Down Expand Up @@ -940,11 +942,13 @@ export default [
...[
{
input: "packages/plugin-oxc/index.js",
addDefaultExport: true,
external: ["oxc-parser"],
},
].flatMap((file) => {
let { input, output, outputBaseName, ...buildOptions } = file;
buildOptions = {
addDefaultExport: true,
...buildOptions,
};

const format = input.endsWith(".cjs") ? "cjs" : "esm";
outputBaseName ??= path.basename(input, path.extname(input));
Expand All @@ -957,10 +961,44 @@ export default [
file: `${outputBaseName}${extensions[format]}`,
},
platform: "node",
buildOptions,
buildOptions: { ...buildOptions, external: ["oxc-parser"] },
build: buildJavascriptModule,
kind: "javascript",
},
{
input,
output: {
format,
file: `${outputBaseName}${extensions[format]}`,
},
platform: "universal",
buildOptions: {
...buildJavascriptModule,
replaceModule: [
{
module: path.join(
PROJECT_ROOT,
"src/language-js/parse/oxc.js",
),
process(text) {
text = text.replace(
/async function importOxcParser\(\) \{.*?\}/su,
outdent`
const OXC_PARSER_URL = "/unpkg.com/@oxc-parser/binding-wasm32-wasi@${projectPackageJson.dependencies["oxc-parser"]}/browser-bundle.mjs"
const importOxcParser = () => import(OXC_PARSER_URL)
`,
);
return text;
},
},
],
allowDynamicImport: true,
},
build: buildJavascriptModule,
kind: "javascript",
playground: true,
playgroundOnly: true,
},
getTypesFileConfig({ input, outputBaseName, isPlugin: true }),
];
}),
Expand Down
12 changes: 8 additions & 4 deletions src/language-js/parse/oxc.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ function createParseError(error, { text }) {
});
}

// This function will be replaced on playground
async function importOxcParser() {
os.availableParallelism ??= () => os.cpus().length;
oxcParser = await import("oxc-parser");
return oxcParser;
}

let oxcParser;
/**
@param {string} filepath
Expand All @@ -42,10 +49,7 @@ let oxcParser;
@returns {Promise<ParseResult>}
*/
async function parseWithOptions(filepath, text, options) {
if (!oxcParser) {
os.availableParallelism ??= () => os.cpus().length;
oxcParser = await import("oxc-parser");
}
oxcParser ??= await importOxcParser();

const result = await oxcParser.parseAsync(filepath, text, {
preserveParens: true,
Expand Down
8 changes: 4 additions & 4 deletions website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@
<link rel="stylesheet" href="./playground/playground.css" />

<!-- Google tag (gtag.js) -->
<script
<!-- <script
async
src="https://www.googletagmanager.com/gtag/js?id=G-T57CP1SG02"
></script>
Expand All @@ -182,7 +182,7 @@
}
gtag("js", new Date());
gtag("config", "G-T57CP1SG02");
</script>
</script> -->
</head>

<body>
Expand All @@ -208,12 +208,12 @@ <h1>Prettier <span id="version"></span></h1>

<script type="module" src="./playground/index.jsx"></script>

<script
<!-- <script
async
defer
src="https://buttons.github.io/buttons.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
></script> -->
</body>
</html>
2 changes: 2 additions & 0 deletions website/playground/codeSamples.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default function getCodeSamples(parser) {
case "acorn":
case "espree":
case "meriyah":
case "oxc":
return [
'function HelloWorld({greeting = "hello", greeted = \'"World"\', silent = false, onMouseOver,}) {',
"",
Expand Down Expand Up @@ -42,6 +43,7 @@ export default function getCodeSamples(parser) {
].join("\n");
case "typescript":
case "babel-ts":
case "oxc-ts":
return [
"interface MyInterface {",
" foo(): string,",
Expand Down
2 changes: 1 addition & 1 deletion website/playground/index.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import "codemirror-graphql/cm6-legacy/mode.esm.js";
import "./install-service-worker.js";
// import "./install-service-worker.js";

import Playground from "./Playground.jsx";
import { fixPrettierVersion } from "./util.js";
Expand Down
3 changes: 3 additions & 0 deletions website/static/_redirects
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,6 @@
/en /
/en/* /:splat
/docs/en/* /docs/:splat

# Proxy `@oxc-parser/binding-wasm32-wasi`
/unpkg.com/@oxc-parser/binding-wasm32-wasi@* https://unpkg.com/@oxc-parser/binding-wasm32-wasi@:splat 200
Loading