From eebb0ea14fa2061fd721992c0fc31734fe9d1e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= <kdy1997.dev@gmail.com>
Date: Thu, 30 Jan 2025 15:10:58 +0900
Subject: [PATCH] feat: Add (experimental) `js-interop` npm package (#9975)

**Description:**

I created a new package for this experiment because I didn't want to bloat the `@swc/core` size.
---
 Cargo.lock                                    |   9 +-
 bindings/Cargo.lock                           |  21 +
 bindings/Cargo.toml                           |   1 +
 bindings/binding_js_interop_node/Cargo.toml   |  51 ++
 bindings/binding_js_interop_node/LICENSE      | 201 ++++++
 bindings/binding_js_interop_node/build.rs     |  29 +
 bindings/binding_js_interop_node/src/lib.rs   |  45 ++
 .../binding_js_interop_node/src/transform.rs  | 109 +++
 bindings/binding_js_interop_node/src/util.rs  | 114 +++
 crates/swc_interop_babel/Cargo.toml           |   1 +
 crates/swc_interop_babel/src/transform.rs     |   2 +
 packages/js-interop/.gitignore                |   3 +
 packages/js-interop/.npmignore                |  71 ++
 packages/js-interop/binding.d.ts              |  30 +
 packages/js-interop/binding.js                | 342 +++++++++
 packages/js-interop/index.ts                  |  34 +
 packages/js-interop/package.json              |  62 ++
 packages/js-interop/scripts/bench.js          |  94 +++
 packages/js-interop/scripts/cli_artifacts.sh  |  22 +
 packages/js-interop/scripts/input.js.1.txt    |  21 +
 packages/js-interop/scripts/input.js.2.txt    | 647 ++++++++++++++++++
 .../scripts/npm/darwin-arm64/README.md        |   3 +
 .../scripts/npm/darwin-arm64/package.json     |  40 ++
 .../scripts/npm/darwin-x64/README.md          |   3 +
 .../scripts/npm/darwin-x64/package.json       |  40 ++
 .../scripts/npm/linux-arm-gnueabihf/README.md |   3 +
 .../npm/linux-arm-gnueabihf/package.json      |  40 ++
 .../scripts/npm/linux-arm64-gnu/README.md     |   3 +
 .../scripts/npm/linux-arm64-gnu/package.json  |  43 ++
 .../scripts/npm/linux-arm64-musl/README.md    |   3 +
 .../scripts/npm/linux-arm64-musl/package.json |  43 ++
 .../scripts/npm/linux-x64-gnu/README.md       |   3 +
 .../scripts/npm/linux-x64-gnu/package.json    |  43 ++
 .../scripts/npm/linux-x64-musl/README.md      |   3 +
 .../scripts/npm/linux-x64-musl/package.json   |  43 ++
 .../scripts/npm/win32-arm64-msvc/README.md    |   3 +
 .../scripts/npm/win32-arm64-msvc/package.json |  40 ++
 .../scripts/npm/win32-ia32-msvc/README.md     |   3 +
 .../scripts/npm/win32-ia32-msvc/package.json  |  40 ++
 .../scripts/npm/win32-x64-msvc/README.md      |   3 +
 .../scripts/npm/win32-x64-msvc/package.json   |  40 ++
 packages/js-interop/tsconfig.json             | 103 +++
 yarn.lock                                     | 252 +++++++
 43 files changed, 2702 insertions(+), 4 deletions(-)
 create mode 100644 bindings/binding_js_interop_node/Cargo.toml
 create mode 100644 bindings/binding_js_interop_node/LICENSE
 create mode 100644 bindings/binding_js_interop_node/build.rs
 create mode 100644 bindings/binding_js_interop_node/src/lib.rs
 create mode 100644 bindings/binding_js_interop_node/src/transform.rs
 create mode 100644 bindings/binding_js_interop_node/src/util.rs
 create mode 100644 packages/js-interop/.gitignore
 create mode 100644 packages/js-interop/.npmignore
 create mode 100644 packages/js-interop/binding.d.ts
 create mode 100644 packages/js-interop/binding.js
 create mode 100644 packages/js-interop/index.ts
 create mode 100644 packages/js-interop/package.json
 create mode 100644 packages/js-interop/scripts/bench.js
 create mode 100755 packages/js-interop/scripts/cli_artifacts.sh
 create mode 100644 packages/js-interop/scripts/input.js.1.txt
 create mode 100644 packages/js-interop/scripts/input.js.2.txt
 create mode 100644 packages/js-interop/scripts/npm/darwin-arm64/README.md
 create mode 100644 packages/js-interop/scripts/npm/darwin-arm64/package.json
 create mode 100644 packages/js-interop/scripts/npm/darwin-x64/README.md
 create mode 100644 packages/js-interop/scripts/npm/darwin-x64/package.json
 create mode 100644 packages/js-interop/scripts/npm/linux-arm-gnueabihf/README.md
 create mode 100644 packages/js-interop/scripts/npm/linux-arm-gnueabihf/package.json
 create mode 100644 packages/js-interop/scripts/npm/linux-arm64-gnu/README.md
 create mode 100644 packages/js-interop/scripts/npm/linux-arm64-gnu/package.json
 create mode 100644 packages/js-interop/scripts/npm/linux-arm64-musl/README.md
 create mode 100644 packages/js-interop/scripts/npm/linux-arm64-musl/package.json
 create mode 100644 packages/js-interop/scripts/npm/linux-x64-gnu/README.md
 create mode 100644 packages/js-interop/scripts/npm/linux-x64-gnu/package.json
 create mode 100644 packages/js-interop/scripts/npm/linux-x64-musl/README.md
 create mode 100644 packages/js-interop/scripts/npm/linux-x64-musl/package.json
 create mode 100644 packages/js-interop/scripts/npm/win32-arm64-msvc/README.md
 create mode 100644 packages/js-interop/scripts/npm/win32-arm64-msvc/package.json
 create mode 100644 packages/js-interop/scripts/npm/win32-ia32-msvc/README.md
 create mode 100644 packages/js-interop/scripts/npm/win32-ia32-msvc/package.json
 create mode 100644 packages/js-interop/scripts/npm/win32-x64-msvc/README.md
 create mode 100644 packages/js-interop/scripts/npm/win32-x64-msvc/package.json
 create mode 100644 packages/js-interop/tsconfig.json

diff --git a/Cargo.lock b/Cargo.lock
index 113b663e6459..060eb09acaf0 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2891,9 +2891,9 @@ dependencies = [
 
 [[package]]
 name = "napi-derive"
-version = "2.16.12"
+version = "2.16.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17435f7a00bfdab20b0c27d9c56f58f6499e418252253081bfff448099da31d1"
+checksum = "7cbe2585d8ac223f7d34f13701434b9d5f4eb9c332cccce8dee57ea18ab8ab0c"
 dependencies = [
  "cfg-if",
  "convert_case",
@@ -2905,9 +2905,9 @@ dependencies = [
 
 [[package]]
 name = "napi-derive-backend"
-version = "1.0.74"
+version = "1.0.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "967c485e00f0bf3b1bdbe510a38a4606919cf1d34d9a37ad41f25a81aa077abe"
+checksum = "1639aaa9eeb76e91c6ae66da8ce3e89e921cd3885e99ec85f4abacae72fc91bf"
 dependencies = [
  "convert_case",
  "once_cell",
@@ -6018,6 +6018,7 @@ name = "swc_interop_babel"
 version = "0.1.0"
 dependencies = [
  "napi",
+ "napi-derive",
  "serde",
  "serde_json",
  "swc_interop_nodejs",
diff --git a/bindings/Cargo.lock b/bindings/Cargo.lock
index 1e09aedf188b..46c182ed3c9c 100644
--- a/bindings/Cargo.lock
+++ b/bindings/Cargo.lock
@@ -321,6 +321,27 @@ dependencies = [
  "tracing-subscriber",
 ]
 
+[[package]]
+name = "binding_js_interop_node"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "backtrace",
+ "napi",
+ "napi-build",
+ "napi-derive",
+ "node_macro_deps",
+ "path-clean 1.0.1",
+ "serde",
+ "serde_json",
+ "swc_core",
+ "swc_malloc",
+ "tracing",
+ "tracing-chrome 0.7.2",
+ "tracing-futures",
+ "tracing-subscriber",
+]
+
 [[package]]
 name = "binding_macros"
 version = "12.0.0"
diff --git a/bindings/Cargo.toml b/bindings/Cargo.toml
index 7ef7be8d6e28..1bd1be154657 100644
--- a/bindings/Cargo.toml
+++ b/bindings/Cargo.toml
@@ -3,6 +3,7 @@ members = [
   "binding_core_node",
   "binding_core_wasm",
   "binding_html_node",
+  "binding_js_interop_node",
   "binding_minifier_node",
   "binding_minifier_wasm",
   "binding_typescript_wasm",
diff --git a/bindings/binding_js_interop_node/Cargo.toml b/bindings/binding_js_interop_node/Cargo.toml
new file mode 100644
index 000000000000..24cf8e47bd98
--- /dev/null
+++ b/bindings/binding_js_interop_node/Cargo.toml
@@ -0,0 +1,51 @@
+[package]
+authors = ["강동윤 <kdy1997.dev@gmail.com>"]
+build   = "build.rs"
+edition = "2021"
+exclude = ["artifacts.json", "index.node"]
+license = "Apache-2.0"
+name    = "binding_js_interop_node"
+publish = false
+version = "0.1.0"
+
+[lib]
+bench      = false
+crate-type = ["cdylib"]
+
+[features]
+default = ["swc_v1"]
+swc_v1  = ["swc_core/bundler_node_v1"]
+swc_v2  = ["swc_core/bundler_node_v2"]
+
+[build-dependencies]
+napi-build = { workspace = true }
+
+[dependencies]
+anyhow             = { workspace = true }
+backtrace          = { workspace = true }
+napi               = { workspace = true, features = ["napi3", "serde-json"] }
+napi-derive        = { workspace = true, features = ["type-def"] }
+node_macro_deps    = { path = "../node_macro_deps" }
+path-clean         = { workspace = true }
+serde              = { workspace = true, features = ["derive"] }
+serde_json         = { workspace = true, features = ["unbounded_depth"] }
+tracing            = { workspace = true, features = ["release_max_level_info"] }
+tracing-chrome     = { workspace = true }
+tracing-futures    = { workspace = true }
+tracing-subscriber = { workspace = true, features = ["env-filter"] }
+
+swc_core = { workspace = true, features = [
+  "allocator_node",
+  "ecma_ast",
+  "ecma_codegen",
+  "common_concurrent",
+  "bundler",
+  "ecma_loader",
+  "ecma_transforms",
+  "ecma_visit",
+  "base_node",
+  "base_concurrent",
+] }
+swc_interop_babel = { version = "0.1.0" }
+swc_interop_nodejs = { version = "0.1.0" }
+swc_malloc = { workspace = true }
diff --git a/bindings/binding_js_interop_node/LICENSE b/bindings/binding_js_interop_node/LICENSE
new file mode 100644
index 000000000000..6a08504909fe
--- /dev/null
+++ b/bindings/binding_js_interop_node/LICENSE
@@ -0,0 +1,201 @@
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+   To apply the Apache License to your work, attach the following
+   boilerplate notice, with the fields enclosed by brackets "[]"
+   replaced with your own identifying information. (Don't include
+   the brackets!)  The text should be enclosed in the appropriate
+   comment syntax for the file format. We also recommend that a
+   file or class name and description of purpose be included on the
+   same "printed page" as the copyright notice for easier
+   identification within third-party archives.
+
+Copyright 2024 SWC contributors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
\ No newline at end of file
diff --git a/bindings/binding_js_interop_node/build.rs b/bindings/binding_js_interop_node/build.rs
new file mode 100644
index 000000000000..a6220cd0337c
--- /dev/null
+++ b/bindings/binding_js_interop_node/build.rs
@@ -0,0 +1,29 @@
+use std::{
+    env,
+    fs::File,
+    io::{BufWriter, Write},
+    path::Path,
+};
+
+extern crate napi_build;
+
+#[cfg(all(not(feature = "swc_v1"), not(feature = "swc_v2")))]
+compile_error!("Please enable swc_v1 or swc_v2 feature");
+
+#[cfg(all(feature = "swc_v1", feature = "swc_v2"))]
+compile_error!("Features swc_v1 and swc_v2 are incompatible");
+
+fn main() {
+    let out_dir = env::var("OUT_DIR").expect("Outdir should exist");
+    let dest_path = Path::new(&out_dir).join("triple.txt");
+    let mut f =
+        BufWriter::new(File::create(dest_path).expect("Failed to create target triple text"));
+    write!(
+        f,
+        "{}",
+        env::var("TARGET").expect("Target should be specified")
+    )
+    .expect("Failed to write target triple text");
+
+    napi_build::setup();
+}
diff --git a/bindings/binding_js_interop_node/src/lib.rs b/bindings/binding_js_interop_node/src/lib.rs
new file mode 100644
index 000000000000..46937da12a29
--- /dev/null
+++ b/bindings/binding_js_interop_node/src/lib.rs
@@ -0,0 +1,45 @@
+#![recursion_limit = "2048"]
+#![allow(dead_code)]
+
+#[macro_use]
+extern crate napi_derive;
+
+extern crate swc_malloc;
+
+use std::{env, panic::set_hook, sync::Arc};
+
+use backtrace::Backtrace;
+use swc_core::{
+    base::Compiler,
+    common::{sync::Lazy, FilePathMapping, SourceMap},
+};
+
+mod transform;
+mod util;
+
+static COMPILER: Lazy<Arc<Compiler>> = Lazy::new(|| {
+    let cm = Arc::new(SourceMap::new(FilePathMapping::empty()));
+
+    Arc::new(Compiler::new(cm))
+});
+
+#[napi::module_init]
+fn init() {
+    if cfg!(debug_assertions) || env::var("SWC_DEBUG").unwrap_or_default() == "1" {
+        set_hook(Box::new(|panic_info| {
+            let backtrace = Backtrace::new();
+            println!("Panic: {:?}\nBacktrace: {:?}", panic_info, backtrace);
+        }));
+    }
+}
+
+fn get_compiler() -> Arc<Compiler> {
+    COMPILER.clone()
+}
+
+/// Hack for `Type Generation`
+#[napi(object)]
+pub struct TransformOutput {
+    pub code: String,
+    pub map: Option<String>,
+}
diff --git a/bindings/binding_js_interop_node/src/transform.rs b/bindings/binding_js_interop_node/src/transform.rs
new file mode 100644
index 000000000000..afb744491dfe
--- /dev/null
+++ b/bindings/binding_js_interop_node/src/transform.rs
@@ -0,0 +1,109 @@
+use std::path::Path;
+
+use napi::{Env, JsBuffer, JsBufferValue, JsFunction, JsObject, Ref};
+use swc_core::{base::config::Options, common::FileName, node::MapErr};
+use swc_interop_babel::transform::{JsTrasnform, TransformOutput};
+use tracing::instrument;
+
+use crate::{get_compiler, util::try_with};
+
+fn apply_swc(input: TransformOutput, options: Ref<JsBufferValue>) -> napi::Result<TransformOutput> {
+    let c = get_compiler();
+    let mut options: Options = serde_json::from_slice(options.as_ref())?;
+    if !options.filename.is_empty() {
+        options.config.adjust(Path::new(&options.filename));
+    }
+
+    let error_format = options.experimental.error_format.unwrap_or_default();
+
+    try_with(
+        c.cm.clone(),
+        !options.config.error.filename.into_bool(),
+        error_format,
+        |handler| {
+            c.run(|| {
+                let fm = c.cm.new_source_file(
+                    if options.filename.is_empty() {
+                        FileName::Anon.into()
+                    } else {
+                        FileName::Real(options.filename.clone().into()).into()
+                    },
+                    input.code,
+                );
+
+                let output = c.process_js_file(fm, handler, &options)?;
+
+                Ok(TransformOutput {
+                    code: output.code,
+                    map: output.map,
+                })
+            })
+        },
+    )
+    .convert_err()
+}
+
+#[napi]
+#[instrument(level = "trace", skip_all)]
+pub fn transform_3_times(
+    env: Env,
+    src: String,
+    first_options: JsBuffer,
+    babel_transform: JsFunction,
+    third_options: JsBuffer,
+) -> napi::Result<JsObject> {
+    let first_options = first_options.into_ref()?;
+    let third_options = third_options.into_ref()?;
+    let babel_hook = JsTrasnform::new(&env, &babel_transform)?;
+
+    env.spawn_future(async move {
+        let input = TransformOutput {
+            code: src,
+            map: None,
+        };
+
+        let output = apply_swc(input, first_options)?;
+
+        let output = babel_hook.transform(output).await?;
+
+        apply_swc(output, third_options)
+    })
+}
+
+#[napi]
+#[instrument(level = "trace", skip_all)]
+pub fn transform_2_times(
+    env: Env,
+    src: String,
+    first_options: JsBuffer,
+    babel_transform: JsFunction,
+) -> napi::Result<JsObject> {
+    let first_options = first_options.into_ref()?;
+    let babel_hook = JsTrasnform::new(&env, &babel_transform)?;
+
+    env.spawn_future(async move {
+        let input = TransformOutput {
+            code: src,
+            map: None,
+        };
+
+        let output = apply_swc(input, first_options)?;
+
+        babel_hook.transform(output).await
+    })
+}
+
+#[napi]
+#[instrument(level = "trace", skip_all)]
+pub fn transform_once(env: Env, src: String, first_options: JsBuffer) -> napi::Result<JsObject> {
+    let first_options = first_options.into_ref()?;
+
+    env.spawn_future(async move {
+        let input = TransformOutput {
+            code: src,
+            map: None,
+        };
+
+        apply_swc(input, first_options)
+    })
+}
diff --git a/bindings/binding_js_interop_node/src/util.rs b/bindings/binding_js_interop_node/src/util.rs
new file mode 100644
index 000000000000..8f2a621b35f2
--- /dev/null
+++ b/bindings/binding_js_interop_node/src/util.rs
@@ -0,0 +1,114 @@
+#![deny(warnings)]
+
+use std::panic::{catch_unwind, AssertUnwindSafe};
+
+use anyhow::{anyhow, Error};
+use napi::Env;
+use swc_core::{
+    base::{config::ErrorFormat, try_with_handler},
+    common::{
+        errors::Handler,
+        sync::{Lrc, OnceCell},
+        SourceMap, GLOBALS,
+    },
+};
+use tracing::instrument;
+use tracing_chrome::ChromeLayerBuilder;
+use tracing_subscriber::{
+    filter, prelude::__tracing_subscriber_SubscriberExt, util::SubscriberInitExt, EnvFilter, Layer,
+};
+
+static TARGET_TRIPLE: &str = include_str!(concat!(env!("OUT_DIR"), "/triple.txt"));
+static CUSTOM_TRACE_SUBSCRIBER: OnceCell<bool> = OnceCell::new();
+
+#[napi]
+pub fn get_target_triple() -> napi::Result<String> {
+    Ok(TARGET_TRIPLE.to_string())
+}
+
+#[napi]
+pub fn init_custom_trace_subscriber(
+    mut env: Env,
+    trace_out_file_path: Option<String>,
+) -> napi::Result<()> {
+    CUSTOM_TRACE_SUBSCRIBER.get_or_init(|| {
+        let mut layer = ChromeLayerBuilder::new().include_args(true);
+        if let Some(trace_out_file) = trace_out_file_path {
+            layer = layer.file(trace_out_file);
+        }
+
+        let (chrome_layer, guard) = layer.build();
+        tracing_subscriber::registry()
+            .with(chrome_layer.with_filter(filter::filter_fn(|metadata| {
+                !metadata.target().contains("cranelift") && !metadata.name().contains("log ")
+            })))
+            .try_init()
+            .expect("Failed to register tracing subscriber");
+
+        env.add_env_cleanup_hook(guard, |flush_guard| {
+            flush_guard.flush();
+            drop(flush_guard);
+        })
+        .expect("Should able to initialize cleanup for custom trace subscriber");
+
+        true
+    });
+
+    Ok(())
+}
+
+#[instrument(level = "trace", skip_all)]
+pub fn try_with<F, Ret>(
+    cm: Lrc<SourceMap>,
+    skip_filename: bool,
+    _error_format: ErrorFormat,
+    op: F,
+) -> Result<Ret, Error>
+where
+    F: FnOnce(&Handler) -> Result<Ret, Error>,
+{
+    GLOBALS.set(&Default::default(), || {
+        try_with_handler(
+            cm,
+            swc_core::base::HandlerOpts {
+                skip_filename,
+                ..Default::default()
+            },
+            |handler| {
+                //
+                let result = catch_unwind(AssertUnwindSafe(|| op(handler)));
+
+                let p = match result {
+                    Ok(v) => return v,
+                    Err(v) => v,
+                };
+
+                if let Some(s) = p.downcast_ref::<String>() {
+                    Err(anyhow!("failed to handle: {}", s))
+                } else if let Some(s) = p.downcast_ref::<&str>() {
+                    Err(anyhow!("failed to handle: {}", s))
+                } else {
+                    Err(anyhow!("failed to handle with unknown panic message"))
+                }
+            },
+        )
+    })
+}
+
+// This was originally under swc_nodejs_common, but this is not a public
+// interface for the custom binary - they should choose own trace initialization
+// instead. Will keep as hidden for now until there's proper usecase.
+
+/// Trying to initialize default subscriber if global dispatch is not set.
+/// This can be called multiple time, however subsequent calls will be ignored
+/// as tracing_subscriber only allows single global dispatch.
+pub fn init_default_trace_subscriber() {
+    let _unused = tracing_subscriber::FmtSubscriber::builder()
+        .without_time()
+        .with_target(false)
+        .with_writer(std::io::stderr)
+        .with_ansi(true)
+        .with_env_filter(EnvFilter::from_env("SWC_LOG"))
+        .pretty()
+        .try_init();
+}
diff --git a/crates/swc_interop_babel/Cargo.toml b/crates/swc_interop_babel/Cargo.toml
index 3cbc2285d4b2..3ae74d7764c9 100644
--- a/crates/swc_interop_babel/Cargo.toml
+++ b/crates/swc_interop_babel/Cargo.toml
@@ -11,6 +11,7 @@ version       = "0.1.0"
 
 [dependencies]
 napi       = { workspace = true, features = ["napi4"] }
+napi-derive = { workspace = true }
 serde      = { workspace = true, features = ["derive"] }
 serde_json = { workspace = true }
 
diff --git a/crates/swc_interop_babel/src/transform.rs b/crates/swc_interop_babel/src/transform.rs
index d92b4c6d2219..48ac53fcb787 100644
--- a/crates/swc_interop_babel/src/transform.rs
+++ b/crates/swc_interop_babel/src/transform.rs
@@ -1,4 +1,5 @@
 use napi::JsFunction;
+use napi_derive::napi;
 use serde::{Deserialize, Serialize};
 use swc_interop_nodejs::{js_hook::JsHook, types::AsJsonString};
 
@@ -6,6 +7,7 @@ pub struct JsTrasnform {
     f: JsHook<AsJsonString<TransformOutput>, AsJsonString<TransformOutput>>,
 }
 
+#[napi(object)]
 #[derive(Debug, Serialize, Deserialize)]
 pub struct TransformOutput {
     pub code: String,
diff --git a/packages/js-interop/.gitignore b/packages/js-interop/.gitignore
new file mode 100644
index 000000000000..3bf7311b8adb
--- /dev/null
+++ b/packages/js-interop/.gitignore
@@ -0,0 +1,3 @@
+/*.js
+!binding.js
+index.d.ts
\ No newline at end of file
diff --git a/packages/js-interop/.npmignore b/packages/js-interop/.npmignore
new file mode 100644
index 000000000000..ed6bd0593e5c
--- /dev/null
+++ b/packages/js-interop/.npmignore
@@ -0,0 +1,71 @@
+target/
+native/index.node
+native/artifacts.json
+**/*~
+**/node_modules
+**/.DS_Store
+artifacts/
+
+pkg/
+
+yarn.lock
+package-lock.json
+*.log
+.idea/
+docs/
+
+wasm/
+
+# Reduce package size
+**/tests.rs
+**/tests/
+**/benches/
+**/target/
+*.svg
+
+# napi is cool
+*.rs
+/scripts/npm
+/native/
+/src
+/.vscode
+/ecmascript/transforms/src/helpers
+/node-swc/__tests__/
+/*.node
+
+atoms
+bundler
+Cargo.lock
+Cargo.toml
+common
+CONTRIBUTING.md
+ecmascript
+macros
+node
+node-swc
+examples
+scripts
+spack
+testing
+ARCHITECTURE.md
+tsconfig.json
+rust-toolchain
+.github
+.cargo
+.gitmodules
+.rustfmt.toml
+.gitattributes
+.travis.yml
+.husky/
+.prettierrc
+crates/
+packages/
+cspell.json
+deny.toml
+.mocha.setup.js
+.mocharc.js
+jest.config.js
+cliff.toml
+.kodiak.toml
+clippy.toml
+.tsbuildinfo
diff --git a/packages/js-interop/binding.d.ts b/packages/js-interop/binding.d.ts
new file mode 100644
index 000000000000..2753341e1e60
--- /dev/null
+++ b/packages/js-interop/binding.d.ts
@@ -0,0 +1,30 @@
+/* auto-generated by NAPI-RS */
+/* eslint-disable */
+
+export declare function getTargetTriple(): string
+
+export declare function initCustomTraceSubscriber(traceOutFilePath?: string | undefined | null): void
+
+export declare function transform2Times(src: string, firstOptions: Buffer, babelTransform: (...args: any[]) => any): object
+
+export declare function transform3Times(src: string, firstOptions: Buffer, babelTransform: (...args: any[]) => any, thirdOptions: Buffer): object
+
+export declare function transformOnce(src: string, firstOptions: Buffer): object
+
+export interface TransformOutput {
+  code: string
+  map?: string
+  output?: string
+}
+
+export interface TransformOutput {
+  code: string
+  map?: string
+}
+
+/** Hack for `Type Generation` */
+export interface TransformOutput {
+  code: string
+  map?: string
+}
+
diff --git a/packages/js-interop/binding.js b/packages/js-interop/binding.js
new file mode 100644
index 000000000000..a5e7f428afb3
--- /dev/null
+++ b/packages/js-interop/binding.js
@@ -0,0 +1,342 @@
+// prettier-ignore
+/* eslint-disable */
+/* auto-generated by NAPI-RS */
+
+const { readFileSync } = require('fs')
+
+let nativeBinding = null
+const loadErrors = []
+
+const isMusl = () => {
+  let musl = false
+  if (process.platform === 'linux') {
+    musl = isMuslFromFilesystem()
+    if (musl === null) {
+      musl = isMuslFromReport()
+    }
+    if (musl === null) {
+      musl = isMuslFromChildProcess()
+    }
+  }
+  return musl
+}
+
+const isFileMusl = (f) => f.includes('libc.musl-') || f.includes('ld-musl-')
+
+const isMuslFromFilesystem = () => {
+  try {
+    return readFileSync('/usr/bin/ldd', 'utf-8').includes('musl')
+  } catch {
+    return null
+  }
+}
+
+const isMuslFromReport = () => {
+  const report = typeof process.report.getReport === 'function' ? process.report.getReport() : null
+  if (!report) {
+    return null
+  }
+  if (report.header && report.header.glibcVersionRuntime) {
+    return false
+  }
+  if (Array.isArray(report.sharedObjects)) {
+    if (report.sharedObjects.some(isFileMusl)) {
+      return true
+    }
+  }
+  return false
+}
+
+const isMuslFromChildProcess = () => {
+  try {
+    return require('child_process').execSync('ldd --version', { encoding: 'utf8' }).includes('musl')
+  } catch (e) {
+    // If we reach this case, we don't know if the system is musl or not, so is better to just fallback to false
+    return false
+  }
+}
+
+function requireNative() {
+  if (process.platform === 'android') {
+    if (process.arch === 'arm64') {
+      try {
+        return require('./swc-js-interop.android-arm64.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-android-arm64')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'arm') {
+      try {
+        return require('./swc-js-interop.android-arm-eabi.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-android-arm-eabi')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else {
+      loadErrors.push(new Error(`Unsupported architecture on Android ${process.arch}`))
+    }
+  } else if (process.platform === 'win32') {
+    if (process.arch === 'x64') {
+      try {
+        return require('./swc-js-interop.win32-x64-msvc.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-win32-x64-msvc')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'ia32') {
+      try {
+        return require('./swc-js-interop.win32-ia32-msvc.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-win32-ia32-msvc')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'arm64') {
+      try {
+        return require('./swc-js-interop.win32-arm64-msvc.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-win32-arm64-msvc')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else {
+      loadErrors.push(new Error(`Unsupported architecture on Windows: ${process.arch}`))
+    }
+  } else if (process.platform === 'darwin') {
+    try {
+        return require('./swc-js-interop.darwin-universal.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-darwin-universal')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    if (process.arch === 'x64') {
+      try {
+        return require('./swc-js-interop.darwin-x64.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-darwin-x64')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'arm64') {
+      try {
+        return require('./swc-js-interop.darwin-arm64.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-darwin-arm64')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else {
+      loadErrors.push(new Error(`Unsupported architecture on macOS: ${process.arch}`))
+    }
+  } else if (process.platform === 'freebsd') {
+    if (process.arch === 'x64') {
+      try {
+        return require('./swc-js-interop.freebsd-x64.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-freebsd-x64')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'arm64') {
+      try {
+        return require('./swc-js-interop.freebsd-arm64.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-freebsd-arm64')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else {
+      loadErrors.push(new Error(`Unsupported architecture on FreeBSD: ${process.arch}`))
+    }
+  } else if (process.platform === 'linux') {
+    if (process.arch === 'x64') {
+      if (isMusl()) {
+        try {
+        return require('./swc-js-interop.linux-x64-musl.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-x64-musl')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      } else {
+        try {
+        return require('./swc-js-interop.linux-x64-gnu.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-x64-gnu')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      }
+    } else if (process.arch === 'arm64') {
+      if (isMusl()) {
+        try {
+        return require('./swc-js-interop.linux-arm64-musl.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-arm64-musl')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      } else {
+        try {
+        return require('./swc-js-interop.linux-arm64-gnu.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-arm64-gnu')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      }
+    } else if (process.arch === 'arm') {
+      try {
+        return require('./swc-js-interop.linux-arm-gnueabihf.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-arm-gnueabihf')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else if (process.arch === 'riscv64') {
+      if (isMusl()) {
+        try {
+        return require('./swc-js-interop.linux-riscv64-musl.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-riscv64-musl')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      } else {
+        try {
+        return require('./swc-js-interop.linux-riscv64-gnu.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-riscv64-gnu')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+      }
+    } else if (process.arch === 's390x') {
+      try {
+        return require('./swc-js-interop.linux-s390x-gnu.node')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+      try {
+        return require('@swc/experimental-js-interop-linux-s390x-gnu')
+      } catch (e) {
+        loadErrors.push(e)
+      }
+
+    } else {
+      loadErrors.push(new Error(`Unsupported architecture on Linux: ${process.arch}`))
+    }
+  } else {
+    loadErrors.push(new Error(`Unsupported OS: ${process.platform}, architecture: ${process.arch}`))
+  }
+}
+
+nativeBinding = requireNative()
+
+if (!nativeBinding || process.env.NAPI_RS_FORCE_WASI) {
+  try {
+    nativeBinding = require('./swc-js-interop.wasi.cjs')
+  } catch (err) {
+    if (process.env.NAPI_RS_FORCE_WASI) {
+      console.error(err)
+    }
+  }
+  if (!nativeBinding) {
+    try {
+      nativeBinding = require('@swc/experimental-js-interop-wasm32-wasi')
+    } catch (err) {
+      if (process.env.NAPI_RS_FORCE_WASI) {
+        console.error(err)
+      }
+    }
+  }
+}
+
+if (!nativeBinding) {
+  if (loadErrors.length > 0) {
+    // TODO Link to documentation with potential fixes
+    //  - The package owner could build/publish bindings for this arch
+    //  - The user may need to bundle the correct files
+    //  - The user may need to re-install node_modules to get new packages
+    throw new Error('Failed to load native binding', { cause: loadErrors })
+  }
+  throw new Error(`Failed to load native binding`)
+}
+
+module.exports.getTargetTriple = nativeBinding.getTargetTriple
+module.exports.initCustomTraceSubscriber = nativeBinding.initCustomTraceSubscriber
+module.exports.transform2Times = nativeBinding.transform2Times
+module.exports.transform3Times = nativeBinding.transform3Times
+module.exports.transformOnce = nativeBinding.transformOnce
diff --git a/packages/js-interop/index.ts b/packages/js-interop/index.ts
new file mode 100644
index 000000000000..cd862a7a64f0
--- /dev/null
+++ b/packages/js-interop/index.ts
@@ -0,0 +1,34 @@
+import * as binding from "./binding";
+import { TransformOutput } from "./binding";
+
+interface Options {
+
+}
+
+type BabelTransform = (_:null,input: string) => Promise<string>;
+
+export async function transform3Times(
+    content: string,
+    firstOptions: Options,
+    babelTransform: BabelTransform,
+    thirdOptions: Options
+): Promise<TransformOutput> {
+    return await binding.transform3Times(content, toBuffer(firstOptions ?? {}), babelTransform, toBuffer(thirdOptions ?? {})) as any;
+}
+export async function transform2Times(
+    content: string,
+    firstOptions: Options,
+    babelTransform: BabelTransform,
+): Promise<TransformOutput> {
+    return await binding.transform2Times(content, toBuffer(firstOptions ?? {}), babelTransform) as any;
+}
+export async function transformOnce(
+    content: string,
+    firstOptions: Options,
+): Promise<TransformOutput> {
+    return await binding.transformOnce(content, toBuffer(firstOptions ?? {})) as any;
+}
+
+function toBuffer(t: any): Buffer {
+    return Buffer.from(JSON.stringify(t));
+}
diff --git a/packages/js-interop/package.json b/packages/js-interop/package.json
new file mode 100644
index 000000000000..998474103a9a
--- /dev/null
+++ b/packages/js-interop/package.json
@@ -0,0 +1,62 @@
+{
+    "name": "@swc/experimental-js-interop",
+    "version": "0.1.0",
+    "description": "Experimental JS interop",
+    "homepage": "https://swc.rs",
+    "main": "./index.js",
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "license": "Apache-2.0",
+    "keywords": [
+        "swc",
+        "js",
+        "interop"
+    ],
+    "engines": {
+        "node": ">=14"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    },
+    "napi": {
+        "binaryName": "swc-js-interop",
+        "targets": [
+            "x86_64-apple-darwin",
+            "x86_64-pc-windows-msvc",
+            "x86_64-unknown-linux-gnu",
+            "x86_64-unknown-linux-musl",
+            "i686-pc-windows-msvc",
+            "armv7-unknown-linux-gnueabihf",
+            "aarch64-apple-darwin",
+            "aarch64-unknown-linux-gnu",
+            "aarch64-unknown-linux-musl",
+            "aarch64-pc-windows-msvc"
+        ]
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "scripts": {
+        "artifacts": "napi artifacts --npm-dir scripts/npm",
+        "prepack": "tsc -d && napi prepublish -p scripts/npm --tag-style npm",
+        "prepublishOnly": "tsc -d && napi prepublish -p scripts/npm --tagstyle npm",
+        "build:ts": "tsc -d",
+        "build": "(tsc -d || true) && napi build --manifest-path ../../bindings/Cargo.toml --platform -p binding_js_interop_node --js ./binding.js --dts ./binding.d.ts --release -o .",
+        "build:dev": "(tsc -d || true) && napi build --manifest-path ../../bindings/Cargo.toml --platform -p binding_js_interop_node --js ./binding.js --dts ./binding.d.ts -o .",
+        "test": "echo 'done!'",
+        "version": "napi version --npm-dir scripts/npm"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.26.7",
+        "@napi-rs/cli": "^3.0.0-alpha.43",
+        "benchmark": "^2.1.4",
+        "typescript": "^5.1.6"
+    },
+    "dependencies": {
+        "@swc/counter": "^0.1.3"
+    }
+}
diff --git a/packages/js-interop/scripts/bench.js b/packages/js-interop/scripts/bench.js
new file mode 100644
index 000000000000..d8cc7c27dfd5
--- /dev/null
+++ b/packages/js-interop/scripts/bench.js
@@ -0,0 +1,94 @@
+const fs = require('node:fs');
+const Benchmark = require('benchmark');
+const babel = require("@babel/core");
+
+const lib = require('../index');
+
+function createBabelTransform({ lower }) {
+    return async (_, input) => {
+        const { code, map } = JSON.parse(input);
+
+        return new Promise((resolve, reject) => {
+            babel.transform(code, {
+                inputSourceMap: map,
+            }, function (err, result) {
+                const { code, map } = result;
+                resolve(JSON.stringify({ code, map }));
+            });
+        });
+    }
+}
+
+const SOURCE = fs.readFileSync('./scripts/input.js.txt', 'utf8');
+
+var suite = new Benchmark.Suite;
+
+const firstSwcOption = {
+    jsc: {
+        parser: {
+            syntax: 'ecmascript',
+            jsx: true
+        },
+        target: 'esnext'
+    }
+};
+
+const secondSwcOption = {
+    jsc: {
+        target: 'es2019'
+    }
+};
+
+// add tests
+suite
+    .add('swc (code) -> babel (code) -> swc', {
+        defer: true,
+        fn: async function (deferred) {
+            await lib.transform3Times(SOURCE, firstSwcOption, createBabelTransform({ lower: false }), secondSwcOption);
+            deferred.resolve();
+        },
+    })
+    .add('swc (code) -> babel', {
+        defer: true,
+        fn: async function (deferred) {
+            await lib.transform2Times(SOURCE, firstSwcOption, createBabelTransform({ lower: true }));
+            deferred.resolve();
+        },
+    })
+    .add('swc', {
+        defer: true,
+        fn: async function (deferred) {
+            await lib.transformOnce(SOURCE, {
+                jsc: {
+                    parser: {
+                        syntax: 'ecmascript',
+                        jsx: true
+                    },
+                    target: 'es2019'
+                }
+            });
+            deferred.resolve();
+        },
+    })
+    .add('babel', {
+        defer: true,
+        fn: async function (deferred) {
+            babel.transform(SOURCE, {
+                inputSourceMap: map,
+            }, function (err, result) {
+                const { code, map } = result;
+                JSON.stringify({ code, map });
+
+                deferred.resolve();
+            });
+        },
+    })
+    // add listeners
+    .on('cycle', function (event) {
+        console.log(String(event.target));
+    })
+    .on('complete', function () {
+        console.log('Fastest is ' + this.filter('fastest').map('name'));
+    })
+    // run async
+    .run({ 'async': true });
diff --git a/packages/js-interop/scripts/cli_artifacts.sh b/packages/js-interop/scripts/cli_artifacts.sh
new file mode 100755
index 000000000000..19ef8af25749
--- /dev/null
+++ b/packages/js-interop/scripts/cli_artifacts.sh
@@ -0,0 +1,22 @@
+#!/bin/sh
+
+mkdir -p ./artifacts_cli
+# Naive substitution to napi artifacts for the cli binary.
+for filename in artifacts/*/*.node
+do
+  BINDING_NAME=${filename#*.}
+  BINDING_ABI=${BINDING_NAME%%.*}
+  CLI_BINARY_PATH=${filename%%.*}
+
+  echo "Preparing build artifacts:"
+  echo "Binding name $BINDING_NAME"
+  echo "Filename $filename"
+  echo "Cli binary path $CLI_BINARY_PATH"
+
+  if [ -f "$CLI_BINARY_PATH" ]; then
+      chmod +x $CLI_BINARY_PATH
+      mv -v $CLI_BINARY_PATH ./artifacts_cli/swc-$BINDING_ABI
+  elif [ -f "$CLI_BINARY_PATH.exe" ]; then
+      mv -v $CLI_BINARY_PATH.exe ./artifacts_cli/swc-$BINDING_ABI.exe
+  fi
+done
\ No newline at end of file
diff --git a/packages/js-interop/scripts/input.js.1.txt b/packages/js-interop/scripts/input.js.1.txt
new file mode 100644
index 000000000000..0dabcdb95056
--- /dev/null
+++ b/packages/js-interop/scripts/input.js.1.txt
@@ -0,0 +1,21 @@
+import { CONST } from "removed/constants";
+import Comp1 from "removed/1";
+import Comp2 from "removed/2";
+import Comp3 from "removed/3";
+import Comp4 from "removed/4";
+
+export default function HiddenComponent() {
+    return (
+        <Comp1 title={`My title`} hideHeader fullViewport>
+            <Comp2
+                image="/example.com/images/my.png"
+                title={`Title of an example page`}
+                url={`${CONST}/directory`}
+                description="Hidden component, and maybe it's a good input for performance bug"
+            />
+            <Comp4>
+                <Comp3 />
+            </Comp4>
+        </Comp1>
+    );
+}
diff --git a/packages/js-interop/scripts/input.js.2.txt b/packages/js-interop/scripts/input.js.2.txt
new file mode 100644
index 000000000000..87e220384fcd
--- /dev/null
+++ b/packages/js-interop/scripts/input.js.2.txt
@@ -0,0 +1,647 @@
+import { Button, IconButton, Menu, MenuItem, Tooltip } from '@affine/component';
+import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/components/hooks/use-affine-adapter';
+import { DocLinksService } from '@affine/core/modules/doc-link';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
+import { i18nTime, useI18n } from '@affine/i18n';
+import { track } from '@affine/track';
+import { assertExists } from '@blocksuite/affine/global/utils';
+import { ArrowDownSmallIcon, DeleteIcon, InvisibleIcon, MoreHorizontalIcon, PlusIcon, TagsIcon, ToggleExpandIcon, ViewIcon, } from '@blocksuite/icons/rc';
+import { DndContext, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { restrictToParentElement, restrictToVerticalAxis, } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { DocService, useLiveData, useServices, WorkspaceService, } from '@toeverything/infra';
+import clsx from 'clsx';
+import { use } from 'foxact/use';
+import { useDebouncedValue } from 'foxact/use-debounced-value';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { Suspense, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { AffinePageReference } from '../reference-link';
+import { managerContext } from './common';
+import { ConfirmDeletePropertyModal } from './confirm-delete-property-modal';
+import { getDefaultIconName, nameToIcon } from './icons-mapping';
+import { EditPropertyNameMenuItem, PropertyTypeMenuItem, renderMenuItemOptions, } from './menu-items';
+import { newPropertyTypes, PagePropertiesManager, } from './page-properties-manager';
+import { propertyValueRenderers, TagsValue, } from './property-row-value-renderer';
+import * as styles from './styles.css';
+const Divider = () => <div className={styles.tableHeaderDivider}/>;
+const editingPropertyAtom = atom(null);
+const modifiers = [restrictToParentElement, restrictToVerticalAxis];
+export const SortableProperties = ({ children }) => {
+    const manager = useContext(managerContext);
+    const properties = useMemo(() => manager.sorter.getOrderedItems(), [manager]);
+    const editingItem = useAtomValue(editingPropertyAtom);
+    const draggable = !manager.readonly && !editingItem;
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }));
+    // use localProperties since changes applied to upstream may be delayed
+    // if we use that one, there will be weird behavior after reordering
+    const [localProperties, setLocalProperties] = useState(properties);
+    useEffect(() => {
+        setLocalProperties(properties);
+    }, [properties]);
+    const onDragEnd = useCallback((event) => {
+        if (!draggable) {
+            return;
+        }
+        const { active, over } = event;
+        if (over) {
+            manager.sorter.move(active.id, over.id);
+        }
+        setLocalProperties(manager.sorter.getOrderedItems());
+    }, [manager, draggable]);
+    const filteredProperties = useMemo(() => localProperties.filter(p => manager.getCustomPropertyMeta(p.id)), [localProperties, manager]);
+    return (<DndContext sensors={sensors} onDragEnd={onDragEnd} modifiers={modifiers}>
+      <SortableContext disabled={!draggable} items={properties}>
+        {children(filteredProperties)}
+      </SortableContext>
+    </DndContext>);
+};
+const SortablePropertyRow = ({ property, className, children, ...props }) => {
+    const manager = useContext(managerContext);
+    const { setNodeRef, attributes, listeners, transform, transition, active, isDragging, isSorting, } = useSortable({
+        id: property.id,
+    });
+    const style = useMemo(() => ({
+        transform: transform
+            ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+            : undefined,
+        transition: isSorting ? transition : undefined,
+        pointerEvents: manager.readonly ? 'none' : undefined,
+    }), [isSorting, manager.readonly, transform, transition]);
+    return (<div style={style} ref={setNodeRef} className={clsx(styles.propertyRow, className)} data-property={property.id} data-draggable={!manager.readonly} data-dragging={isDragging} data-other-dragging={active ? active.id !== property.id : false} {...props} {...attributes} {...listeners}>
+      {typeof children === 'function'
+            ? children({ attributes, listeners })
+            : children}
+    </div>);
+};
+const visibilities = ['visible', 'hide', 'hide-if-empty'];
+const rotateVisibility = (visibility) => {
+    const index = visibilities.indexOf(visibility);
+    return visibilities[(index + 1) % visibilities.length];
+};
+const visibilityMenuText = (visibility = 'visible') => {
+    switch (visibility) {
+        case 'hide':
+            return 'com.affine.page-properties.property.hide-in-view';
+        case 'hide-if-empty':
+            return 'com.affine.page-properties.property.hide-in-view-when-empty';
+        case 'visible':
+            return 'com.affine.page-properties.property.show-in-view';
+        default:
+            throw new Error(`unknown visibility: ${visibility}`);
+    }
+};
+const visibilitySelectorText = (visibility = 'visible') => {
+    switch (visibility) {
+        case 'hide':
+            return 'com.affine.page-properties.property.always-hide';
+        case 'hide-if-empty':
+            return 'com.affine.page-properties.property.hide-when-empty';
+        case 'visible':
+            return 'com.affine.page-properties.property.always-show';
+        default:
+            throw new Error(`unknown visibility: ${visibility}`);
+    }
+};
+const VisibilityModeSelector = ({ property, }) => {
+    const manager = useContext(managerContext);
+    const t = useI18n();
+    const meta = manager.getCustomPropertyMeta(property.id);
+    const visibility = property.visibility || 'visible';
+    const menuItems = useMemo(() => {
+        const options = [];
+        options.push(visibilities.map(v => {
+            const text = visibilityMenuText(v);
+            return {
+                text: t[text](),
+                selected: visibility === v,
+                onClick: () => {
+                    manager.updateCustomProperty(property.id, {
+                        visibility: v,
+                    });
+                },
+            };
+        }));
+        return renderMenuItemOptions(options);
+    }, [manager, property.id, t, visibility]);
+    if (!meta) {
+        return null;
+    }
+    const required = meta.required;
+    return (<Menu items={menuItems} rootOptions={{
+            open: required ? false : undefined,
+        }} contentOptions={{
+            onClick(e) {
+                e.stopPropagation();
+            },
+        }}>
+      <div role="button" data-required={required} className={styles.selectorButton}>
+        {required ? (t['com.affine.page-properties.property.required']()) : (<>
+            {t[visibilitySelectorText(visibility)]()}
+            <ArrowDownSmallIcon width={16} height={16}/>
+          </>)}
+      </div>
+    </Menu>);
+};
+export const PagePropertiesSettingsPopup = ({ children, }) => {
+    const manager = useContext(managerContext);
+    const t = useI18n();
+    const menuItems = useMemo(() => {
+        const options = [];
+        options.push(<div role="heading" className={styles.menuHeader} style={{ minWidth: 320 }}>
+        {t['com.affine.page-properties.settings.title']()}
+      </div>);
+        options.push('-');
+        options.push([
+            <SortableProperties key="sortable-settings">
+        {properties => properties.map(property => {
+                    const meta = manager.getCustomPropertyMeta(property.id);
+                    assertExists(meta, 'meta should exist for property');
+                    const Icon = nameToIcon(meta.icon, meta.type);
+                    const name = meta.name;
+                    return (<SortablePropertyRow key={meta.id} property={property} className={styles.propertySettingRow} data-testid="page-properties-settings-menu-item">
+                <Icon />
+                <div data-testid="page-property-setting-row-name" className={styles.propertyRowName}>
+                  {name}
+                </div>
+                <VisibilityModeSelector property={property}/>
+              </SortablePropertyRow>);
+                })}
+      </SortableProperties>,
+        ]);
+        return renderMenuItemOptions(options);
+    }, [manager, t]);
+    return (<Menu contentOptions={{
+            onClick(e) {
+                e.stopPropagation();
+            },
+        }} items={menuItems}>
+      {children}
+    </Menu>);
+};
+export const PageBacklinksPopup = ({ backlinks, children, }) => {
+    return (<Menu contentOptions={{
+            onClick(e) {
+                e.stopPropagation();
+            },
+        }} items={<div className={styles.backlinksList}>
+          {backlinks.map(link => (<AffinePageReference key={link.docId + ':' + link.blockId} wrapper={MenuItem} pageId={link.docId}/>))}
+        </div>}>
+      {children}
+    </Menu>);
+};
+export const PagePropertyRowNameMenu = ({ editing, meta, property, onFinishEditing, children, }) => {
+    const manager = useContext(managerContext);
+    const [localPropertyMeta, setLocalPropertyMeta] = useState(() => ({
+        ...meta,
+    }));
+    const [localProperty, setLocalProperty] = useState(() => ({ ...property }));
+    const nextVisibility = rotateVisibility(localProperty.visibility);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    useEffect(() => {
+        setLocalPropertyMeta(meta);
+    }, [meta]);
+    useEffect(() => {
+        setLocalProperty(property);
+    }, [property]);
+    const handleFinishEditing = useCallback(() => {
+        onFinishEditing();
+        manager.updateCustomPropertyMeta(meta.id, localPropertyMeta);
+        manager.updateCustomProperty(property.id, localProperty);
+    }, [
+        localProperty,
+        localPropertyMeta,
+        manager,
+        meta.id,
+        onFinishEditing,
+        property.id,
+    ]);
+    const t = useI18n();
+    const handleNameBlur = useCallback((v) => {
+        manager.updateCustomPropertyMeta(meta.id, {
+            name: v,
+        });
+    }, [manager, meta.id]);
+    const handleNameChange = useCallback(name => {
+        setLocalPropertyMeta(prev => ({
+            ...prev,
+            name: name,
+        }));
+    }, []);
+    const toggleHide = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setLocalProperty(prev => ({
+            ...prev,
+            visibility: nextVisibility,
+        }));
+    }, [nextVisibility]);
+    const handleDelete = useCallback(() => {
+        manager.removeCustomProperty(property.id);
+    }, [manager, property.id]);
+    const handleIconChange = useCallback((icon) => {
+        setLocalPropertyMeta(prev => ({
+            ...prev,
+            icon,
+        }));
+        manager.updateCustomPropertyMeta(meta.id, {
+            icon: icon,
+        });
+    }, [manager, meta.id]);
+    const menuItems = useMemo(() => {
+        const options = [];
+        options.push(<EditPropertyNameMenuItem property={localPropertyMeta} onIconChange={handleIconChange} onNameBlur={handleNameBlur} onNameChange={handleNameChange}/>);
+        options.push(<PropertyTypeMenuItem property={localPropertyMeta}/>);
+        if (!localPropertyMeta.required) {
+            options.push('-');
+            options.push({
+                icon: nextVisibility === 'hide' || nextVisibility === 'hide-if-empty' ? (<InvisibleIcon />) : (<ViewIcon />),
+                text: t[visibilityMenuText(rotateVisibility(localProperty.visibility))](),
+                onClick: toggleHide,
+            });
+            options.push({
+                type: 'danger',
+                icon: <DeleteIcon />,
+                text: t['com.affine.page-properties.property.remove-property'](),
+                onClick: () => setShowDeleteModal(true),
+            });
+        }
+        return renderMenuItemOptions(options);
+    }, [
+        handleIconChange,
+        handleNameBlur,
+        handleNameChange,
+        localProperty.visibility,
+        localPropertyMeta,
+        nextVisibility,
+        t,
+        toggleHide,
+    ]);
+    return (<>
+      <Menu rootOptions={{
+            open: editing,
+        }} contentOptions={{
+            onInteractOutside: handleFinishEditing,
+            onClick(e) {
+                e.stopPropagation();
+            },
+            onKeyDown(e) {
+                if (e.key === 'Escape') {
+                    handleFinishEditing();
+                }
+            },
+        }} items={menuItems}>
+        {children}
+      </Menu>
+      <ConfirmDeletePropertyModal onConfirm={() => {
+            setShowDeleteModal(false);
+            handleDelete();
+        }} onCancel={() => setShowDeleteModal(false)} show={showDeleteModal} property={meta}/>
+    </>);
+};
+// backlinks - #no                Updated yyyy-mm-dd
+// ─────────────────────────────────────────────────
+// Page Info ...
+export const PagePropertiesTableHeader = ({ className, style, open, onOpenChange, }) => {
+    const manager = useContext(managerContext);
+    const t = useI18n();
+    const { docLinksServices, docService, workspaceService, editorSettingService, } = useServices({
+        DocLinksServices: DocLinksService,
+        DocService,
+        WorkspaceService,
+        EditorSettingService,
+    });
+    const docBacklinks = docLinksServices.backlinks;
+    const backlinks = useLiveData(docBacklinks.backlinks$);
+    const displayDocInfo = useLiveData(editorSettingService.editorSetting.settings$.selector(s => s.displayDocInfo));
+    const { syncing, retrying, serverClock } = useLiveData(workspaceService.workspace.engine.doc.docState$(docService.doc.id));
+    const timestampElement = useMemo(() => {
+        const localizedCreateTime = manager.createDate
+            ? i18nTime(manager.createDate)
+            : null;
+        const createTimeElement = (<div className={styles.tableHeaderTimestamp}>
+        {t['Created']()} {localizedCreateTime}
+      </div>);
+        return serverClock ? (<Tooltip side="right" content={<>
+            <div className={styles.tableHeaderTimestamp}>
+              {t['Updated']()} {i18nTime(serverClock)}
+            </div>
+            {manager.createDate && (<div className={styles.tableHeaderTimestamp}>
+                {t['Created']()} {i18nTime(manager.createDate)}
+              </div>)}
+          </>}>
+        <div className={styles.tableHeaderTimestamp}>
+          {!syncing && !retrying ? (<>
+              {t['Updated']()}{' '}
+              {i18nTime(serverClock, {
+                    relative: {
+                        max: [1, 'day'],
+                        accuracy: 'minute',
+                    },
+                    absolute: {
+                        accuracy: 'day',
+                    },
+                })}
+            </>) : (<>{t['com.affine.syncing']()}</>)}
+        </div>
+      </Tooltip>) : manager.updatedDate ? (<Tooltip side="right" content={createTimeElement}>
+        <div className={styles.tableHeaderTimestamp}>
+          {t['Updated']()} {i18nTime(manager.updatedDate)}
+        </div>
+      </Tooltip>) : (createTimeElement);
+    }, [
+        manager.createDate,
+        manager.updatedDate,
+        retrying,
+        serverClock,
+        syncing,
+        t,
+    ]);
+    const dTimestampElement = useDebouncedValue(timestampElement, 500);
+    const handleCollapse = useCallback(() => {
+        track.doc.inlineDocInfo.$.toggle();
+        onOpenChange(!open);
+    }, [onOpenChange, open]);
+    const properties = manager.sorter.getOrderedItems();
+    return (<div className={clsx(styles.tableHeader, className)} style={style}>
+      {/* TODO(@Peng): add click handler to backlinks */}
+      <div className={styles.tableHeaderInfoRow}>
+        {backlinks.length > 0 ? (<PageBacklinksPopup backlinks={backlinks}>
+            <div className={styles.tableHeaderBacklinksHint}>
+              {t['com.affine.page-properties.backlinks']()} · {backlinks.length}
+            </div>
+          </PageBacklinksPopup>) : null}
+        {dTimestampElement}
+      </div>
+      <Divider />
+      {displayDocInfo ? (<div className={styles.tableHeaderSecondaryRow}>
+          <div className={clsx(!open ? styles.pageInfoDimmed : null)}>
+            {t['com.affine.page-properties.page-info']()}
+          </div>
+          {properties.length === 0 || manager.readonly ? null : (<PagePropertiesSettingsPopup>
+              <IconButton data-testid="page-info-show-more" size="20">
+                <MoreHorizontalIcon />
+              </IconButton>
+            </PagePropertiesSettingsPopup>)}
+          <Collapsible.Trigger asChild role="button" onClick={handleCollapse}>
+            <div className={styles.tableHeaderCollapseButtonWrapper} data-testid="page-info-collapse">
+              <IconButton size="20">
+                <ToggleExpandIcon className={styles.collapsedIcon} data-collapsed={!open}/>
+              </IconButton>
+            </div>
+          </Collapsible.Trigger>
+        </div>) : null}
+    </div>);
+};
+export const PagePropertyRow = ({ property, rowNameClassName, }) => {
+    const manager = useContext(managerContext);
+    const meta = manager.getCustomPropertyMeta(property.id);
+    assertExists(meta, 'meta should exist for property');
+    const Icon = nameToIcon(meta.icon, meta.type);
+    const name = meta.name;
+    const ValueRenderer = propertyValueRenderers[meta.type];
+    const [editingMeta, setEditingMeta] = useState(false);
+    const setEditingItem = useSetAtom(editingPropertyAtom);
+    const handleEditMeta = useCallback(() => {
+        if (!manager.readonly) {
+            setEditingMeta(true);
+        }
+        setEditingItem(property.id);
+    }, [manager.readonly, property.id, setEditingItem]);
+    const handleFinishEditingMeta = useCallback(() => {
+        setEditingMeta(false);
+        setEditingItem(null);
+    }, [setEditingItem]);
+    // NOTE: if we define a new property type, the value render may not exists in old client
+    //       skip rendering if value render is not define yet
+    if (!ValueRenderer || typeof ValueRenderer !== 'function')
+        return null;
+    return (<SortablePropertyRow property={property} data-testid="page-property-row">
+      {({ attributes, listeners }) => (<>
+          <PagePropertyRowNameMenu editing={editingMeta} meta={meta} property={property} onFinishEditing={handleFinishEditingMeta}>
+            <div {...attributes} {...listeners} data-testid="page-property-row-name" className={clsx(styles.sortablePropertyRowNameCell, rowNameClassName)} onClick={handleEditMeta}>
+              <div className={styles.propertyRowNameContainer}>
+                <div className={styles.propertyRowIconContainer}>
+                  <Icon />
+                </div>
+                <div className={styles.propertyRowName}>{name}</div>
+              </div>
+            </div>
+          </PagePropertyRowNameMenu>
+          <ValueRenderer meta={meta} property={property}/>
+        </>)}
+    </SortablePropertyRow>);
+};
+export const PageTagsRow = ({ rowNameClassName, }) => {
+    const t = useI18n();
+    return (<div className={styles.tagsPropertyRow} data-testid="page-property-row" data-property="tags">
+      <div className={clsx(styles.propertyRowNameCell, rowNameClassName)} data-testid="page-property-row-name">
+        <div className={styles.propertyRowNameContainer}>
+          <div className={styles.propertyRowIconContainer}>
+            <TagsIcon />
+          </div>
+          <div className={styles.propertyRowName}>{t['Tags']()}</div>
+        </div>
+      </div>
+      <TagsValue />
+    </div>);
+};
+// 🏷️ Tags     (⋅ xxx) (⋅ yyy)
+// #️⃣ Number   123456
+// +  Add a property
+export const PagePropertiesTableBody = ({ className, style, }) => {
+    const manager = useContext(managerContext);
+    return (<Collapsible.Content className={clsx(styles.tableBodyRoot, className)} style={style}>
+      <PageTagsRow />
+      <SortableProperties>
+        {properties => properties.length ? (<div className={styles.tableBodySortable}>
+              {properties
+                .filter(property => manager.isPropertyRequired(property.id) ||
+                (property.visibility !== 'hide' &&
+                    !(property.visibility === 'hide-if-empty' &&
+                        !property.value)))
+                .map(property => (<PagePropertyRow key={property.id} property={property}/>))}
+            </div>) : null}
+      </SortableProperties>
+      {manager.readonly ? null : <PagePropertiesAddProperty />}
+      <Divider />
+    </Collapsible.Content>);
+};
+const findNextDefaultName = (name, allNames) => {
+    const nameExists = allNames.includes(name);
+    if (nameExists) {
+        const match = name.match(/(\d+)$/);
+        if (match) {
+            const num = parseInt(match[1], 10);
+            const nextName = name.replace(/(\d+)$/, `${num + 1}`);
+            return findNextDefaultName(nextName, allNames);
+        }
+        else {
+            return findNextDefaultName(`${name} 2`, allNames);
+        }
+    }
+    else {
+        return name;
+    }
+};
+export const PagePropertiesCreatePropertyMenuItems = ({ onCreated, metaManager, }) => {
+    const t = useI18n();
+    const onAddProperty = useCallback((e, option) => {
+        const schemaList = metaManager.getOrderedPropertiesSchema();
+        const nameExists = schemaList.some(meta => meta.name === option.name);
+        const allNames = schemaList.map(meta => meta.name);
+        const name = nameExists
+            ? findNextDefaultName(option.name, allNames)
+            : option.name;
+        const { id } = metaManager.addPropertyMeta({
+            name,
+            icon: option.icon,
+            type: option.type,
+        });
+        onCreated?.(e, id);
+    }, [metaManager, onCreated]);
+    return useMemo(() => {
+        const options = [];
+        options.push(<div role="heading" className={styles.menuHeader}>
+        {t['com.affine.page-properties.create-property.menu.header']()}
+      </div>);
+        options.push('-');
+        options.push(newPropertyTypes.map(type => {
+            const iconName = getDefaultIconName(type);
+            const Icon = nameToIcon(iconName, type);
+            const name = t[`com.affine.page-properties.property.${type}`]();
+            return {
+                icon: <Icon />,
+                text: name,
+                onClick: (e) => {
+                    onAddProperty(e, {
+                        icon: iconName,
+                        name: name,
+                        type: type,
+                    });
+                },
+            };
+        }));
+        return renderMenuItemOptions(options);
+    }, [onAddProperty, t]);
+};
+const PagePropertiesAddPropertyMenuItems = ({ onCreateClicked, }) => {
+    const manager = useContext(managerContext);
+    const t = useI18n();
+    const metaList = manager.metaManager.getOrderedPropertiesSchema();
+    const nonRequiredMetaList = metaList.filter(meta => !meta.required);
+    const isChecked = useCallback((m) => {
+        return manager.hasCustomProperty(m);
+    }, [manager]);
+    const onClickProperty = useCallback((e, id) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isChecked(id)) {
+            manager.removeCustomProperty(id);
+        }
+        else {
+            manager.addCustomProperty(id);
+        }
+    }, [isChecked, manager]);
+    const menuItems = useMemo(() => {
+        const options = [];
+        options.push(<div role="heading" className={styles.menuHeader}>
+        {t['com.affine.page-properties.add-property.menu.header']()}
+      </div>);
+        if (nonRequiredMetaList.length > 0) {
+            options.push('-');
+            const nonRequiredMetaOptions = nonRequiredMetaList.map(meta => {
+                const Icon = nameToIcon(meta.icon, meta.type);
+                const name = meta.name;
+                return {
+                    icon: <Icon />,
+                    text: name,
+                    selected: isChecked(meta.id),
+                    onClick: (e) => onClickProperty(e, meta.id),
+                };
+            });
+            options.push(nonRequiredMetaOptions);
+        }
+        options.push('-');
+        options.push({
+            icon: <PlusIcon />,
+            text: t['com.affine.page-properties.add-property.menu.create'](),
+            onClick: onCreateClicked,
+        });
+        return renderMenuItemOptions(options);
+    }, [isChecked, nonRequiredMetaList, onClickProperty, onCreateClicked, t]);
+    return menuItems;
+};
+export const PagePropertiesAddProperty = () => {
+    const t = useI18n();
+    const [adding, setAdding] = useState(true);
+    const manager = useContext(managerContext);
+    const toggleAdding = useCallback(e => {
+        e.stopPropagation();
+        e.preventDefault();
+        setAdding(prev => !prev);
+    }, []);
+    const menuOptions = useMemo(() => {
+        const handleCreated = (e, id) => {
+            toggleAdding(e);
+            manager.addCustomProperty(id);
+        };
+        const items = adding ? (<PagePropertiesAddPropertyMenuItems onCreateClicked={toggleAdding}/>) : (<PagePropertiesCreatePropertyMenuItems metaManager={manager.metaManager} onCreated={handleCreated}/>);
+        return {
+            contentOptions: {
+                onClick(e) {
+                    e.stopPropagation();
+                },
+            },
+            rootOptions: {
+                onOpenChange: () => setAdding(true),
+            },
+            items,
+        };
+    }, [adding, manager, toggleAdding]);
+    return (<Menu {...menuOptions}>
+      <Button variant="plain" prefix={<PlusIcon />} className={styles.addPropertyButton}>
+        {t['com.affine.page-properties.add-property']()}
+      </Button>
+    </Menu>);
+};
+const PagePropertiesTableInner = () => {
+    const manager = useContext(managerContext);
+    const [expanded, setExpanded] = useState(false);
+    use(manager.workspace.docCollection.doc.whenSynced);
+    return (<div className={styles.root}>
+      <Collapsible.Root open={expanded} onOpenChange={setExpanded} className={styles.rootCentered}>
+        <PagePropertiesTableHeader open={expanded} onOpenChange={setExpanded}/>
+        <PagePropertiesTableBody />
+      </Collapsible.Root>
+    </div>);
+};
+export const usePagePropertiesManager = (docId) => {
+    // the workspace properties adapter adapter is reactive,
+    // which means it's reference will change when any of the properties change
+    // also it will trigger a re-render of the component
+    const adapter = useCurrentWorkspacePropertiesAdapter();
+    const manager = useMemo(() => {
+        return new PagePropertiesManager(adapter, docId);
+    }, [adapter, docId]);
+    return manager;
+};
+// this is the main component that renders the page properties table at the top of the page below
+// the page title
+export const PagePropertiesTable = ({ docId }) => {
+    const manager = usePagePropertiesManager(docId);
+    // if the given page is not in the current workspace, then we don't render anything
+    // eg. when it is in history modal
+    if (!manager.page) {
+        return null;
+    }
+    return (<managerContext.Provider value={manager}>
+      <Suspense>
+        <PagePropertiesTableInner />
+      </Suspense>
+    </managerContext.Provider>);
+};
diff --git a/packages/js-interop/scripts/npm/darwin-arm64/README.md b/packages/js-interop/scripts/npm/darwin-arm64/README.md
new file mode 100644
index 000000000000..a0e2943c3341
--- /dev/null
+++ b/packages/js-interop/scripts/npm/darwin-arm64/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-darwin-arm64`
+
+This is the **aarch64-apple-darwin** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/darwin-arm64/package.json b/packages/js-interop/scripts/npm/darwin-arm64/package.json
new file mode 100644
index 000000000000..a834e8b5b371
--- /dev/null
+++ b/packages/js-interop/scripts/npm/darwin-arm64/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-darwin-arm64",
+    "version": "1.10.12",
+    "os": [
+        "darwin"
+    ],
+    "cpu": [
+        "arm64"
+    ],
+    "main": "swc-experimental-js-interop.darwin-arm64.node",
+    "files": [
+        "swc-experimental-js-interop.darwin-arm64.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/darwin-x64/README.md b/packages/js-interop/scripts/npm/darwin-x64/README.md
new file mode 100644
index 000000000000..0c931ed777b4
--- /dev/null
+++ b/packages/js-interop/scripts/npm/darwin-x64/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-darwin-x64`
+
+This is the **x86_64-apple-darwin** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/darwin-x64/package.json b/packages/js-interop/scripts/npm/darwin-x64/package.json
new file mode 100644
index 000000000000..ef1b63579779
--- /dev/null
+++ b/packages/js-interop/scripts/npm/darwin-x64/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-darwin-x64",
+    "version": "1.10.12",
+    "os": [
+        "darwin"
+    ],
+    "cpu": [
+        "x64"
+    ],
+    "main": "swc-experimental-js-interop.darwin-x64.node",
+    "files": [
+        "swc-experimental-js-interop.darwin-x64.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/linux-arm-gnueabihf/README.md b/packages/js-interop/scripts/npm/linux-arm-gnueabihf/README.md
new file mode 100644
index 000000000000..d182bfc0120b
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm-gnueabihf/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-linux-arm-gnueabihf`
+
+This is the **armv7-unknown-linux-gnueabihf** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/linux-arm-gnueabihf/package.json b/packages/js-interop/scripts/npm/linux-arm-gnueabihf/package.json
new file mode 100644
index 000000000000..cc17792f80fd
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm-gnueabihf/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-linux-arm-gnueabihf",
+    "version": "1.10.12",
+    "os": [
+        "linux"
+    ],
+    "cpu": [
+        "arm"
+    ],
+    "main": "swc-experimental-js-interop.linux-arm-gnueabihf.node",
+    "files": [
+        "swc-experimental-js-interop.linux-arm-gnueabihf.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/linux-arm64-gnu/README.md b/packages/js-interop/scripts/npm/linux-arm64-gnu/README.md
new file mode 100644
index 000000000000..89936855d080
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm64-gnu/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-linux-arm64-gnu`
+
+This is the **aarch64-unknown-linux-gnu** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/linux-arm64-gnu/package.json b/packages/js-interop/scripts/npm/linux-arm64-gnu/package.json
new file mode 100644
index 000000000000..0814e2ac4c5f
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm64-gnu/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "@swc/experimental-js-interop-linux-arm64-gnu",
+    "version": "1.10.12",
+    "os": [
+        "linux"
+    ],
+    "cpu": [
+        "arm64"
+    ],
+    "main": "swc-experimental-js-interop.linux-arm64-gnu.node",
+    "files": [
+        "swc-experimental-js-interop.linux-arm64-gnu.node"
+    ],
+    "libc": [
+        "glibc"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/linux-arm64-musl/README.md b/packages/js-interop/scripts/npm/linux-arm64-musl/README.md
new file mode 100644
index 000000000000..b999229fad2e
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm64-musl/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-linux-arm64-musl`
+
+This is the **aarch64-unknown-linux-musl** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/linux-arm64-musl/package.json b/packages/js-interop/scripts/npm/linux-arm64-musl/package.json
new file mode 100644
index 000000000000..a99b0dc8c9cc
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-arm64-musl/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "@swc/experimental-js-interop-linux-arm64-musl",
+    "version": "1.10.12",
+    "os": [
+        "linux"
+    ],
+    "cpu": [
+        "arm64"
+    ],
+    "main": "swc-experimental-js-interop.linux-arm64-musl.node",
+    "files": [
+        "swc-experimental-js-interop.linux-arm64-musl.node"
+    ],
+    "libc": [
+        "musl"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/linux-x64-gnu/README.md b/packages/js-interop/scripts/npm/linux-x64-gnu/README.md
new file mode 100644
index 000000000000..db5dab2f3b0a
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-x64-gnu/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-linux-x64-gnu`
+
+This is the **x86_64-unknown-linux-gnu** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/linux-x64-gnu/package.json b/packages/js-interop/scripts/npm/linux-x64-gnu/package.json
new file mode 100644
index 000000000000..3cd87bf327a9
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-x64-gnu/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "@swc/experimental-js-interop-linux-x64-gnu",
+    "version": "1.10.12",
+    "os": [
+        "linux"
+    ],
+    "cpu": [
+        "x64"
+    ],
+    "main": "swc-experimental-js-interop.linux-x64-gnu.node",
+    "files": [
+        "swc-experimental-js-interop.linux-x64-gnu.node"
+    ],
+    "libc": [
+        "glibc"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/linux-x64-musl/README.md b/packages/js-interop/scripts/npm/linux-x64-musl/README.md
new file mode 100644
index 000000000000..2150cc7bddaa
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-x64-musl/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-linux-x64-musl`
+
+This is the **x86_64-unknown-linux-musl** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/linux-x64-musl/package.json b/packages/js-interop/scripts/npm/linux-x64-musl/package.json
new file mode 100644
index 000000000000..4eb4afc09263
--- /dev/null
+++ b/packages/js-interop/scripts/npm/linux-x64-musl/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "@swc/experimental-js-interop-linux-x64-musl",
+    "version": "1.10.12",
+    "os": [
+        "linux"
+    ],
+    "cpu": [
+        "x64"
+    ],
+    "main": "swc-experimental-js-interop.linux-x64-musl.node",
+    "files": [
+        "swc-experimental-js-interop.linux-x64-musl.node"
+    ],
+    "libc": [
+        "musl"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/win32-arm64-msvc/README.md b/packages/js-interop/scripts/npm/win32-arm64-msvc/README.md
new file mode 100644
index 000000000000..acbba30c2b24
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-arm64-msvc/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-win32-arm64-msvc`
+
+This is the **aarch64-pc-windows-msvc** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/win32-arm64-msvc/package.json b/packages/js-interop/scripts/npm/win32-arm64-msvc/package.json
new file mode 100644
index 000000000000..bfcd9525d44f
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-arm64-msvc/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-win32-arm64-msvc",
+    "version": "1.10.12",
+    "os": [
+        "win32"
+    ],
+    "cpu": [
+        "arm64"
+    ],
+    "main": "swc-experimental-js-interop.win32-arm64-msvc.node",
+    "files": [
+        "swc-experimental-js-interop.win32-arm64-msvc.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/win32-ia32-msvc/README.md b/packages/js-interop/scripts/npm/win32-ia32-msvc/README.md
new file mode 100644
index 000000000000..15f6d2ed851d
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-ia32-msvc/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-win32-ia32-msvc`
+
+This is the **i686-pc-windows-msvc** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/win32-ia32-msvc/package.json b/packages/js-interop/scripts/npm/win32-ia32-msvc/package.json
new file mode 100644
index 000000000000..e46ea2c4c07b
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-ia32-msvc/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-win32-ia32-msvc",
+    "version": "1.10.12",
+    "os": [
+        "win32"
+    ],
+    "cpu": [
+        "ia32"
+    ],
+    "main": "swc-experimental-js-interop.win32-ia32-msvc.node",
+    "files": [
+        "swc-experimental-js-interop.win32-ia32-msvc.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/scripts/npm/win32-x64-msvc/README.md b/packages/js-interop/scripts/npm/win32-x64-msvc/README.md
new file mode 100644
index 000000000000..3fbbf90c1a2d
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-x64-msvc/README.md
@@ -0,0 +1,3 @@
+# `@swc/experimental-js-interop-win32-x64-msvc`
+
+This is the **x86_64-pc-windows-msvc** binary for `@swc/experimental-js-interop`
diff --git a/packages/js-interop/scripts/npm/win32-x64-msvc/package.json b/packages/js-interop/scripts/npm/win32-x64-msvc/package.json
new file mode 100644
index 000000000000..1a49f3bafc2e
--- /dev/null
+++ b/packages/js-interop/scripts/npm/win32-x64-msvc/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@swc/experimental-js-interop-win32-x64-msvc",
+    "version": "1.10.12",
+    "os": [
+        "win32"
+    ],
+    "cpu": [
+        "x64"
+    ],
+    "main": "swc-experimental-js-interop.win32-x64-msvc.node",
+    "files": [
+        "swc-experimental-js-interop.win32-x64-msvc.node"
+    ],
+    "description": "Super-fast HTML minifier",
+    "keywords": [
+        "swcpack",
+        "babel",
+        "typescript",
+        "rust",
+        "webpack",
+        "tsc"
+    ],
+    "author": "강동윤 <kdy1997.dev@gmail.com>",
+    "homepage": "https://swc.rs",
+    "license": "Apache-2.0 AND MIT",
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/swc-project/swc.git"
+    },
+    "bugs": {
+        "url": "https://github.com/swc-project/swc/issues"
+    }
+}
diff --git a/packages/js-interop/tsconfig.json b/packages/js-interop/tsconfig.json
new file mode 100644
index 000000000000..2b7ad90e16b5
--- /dev/null
+++ b/packages/js-interop/tsconfig.json
@@ -0,0 +1,103 @@
+{
+    "compilerOptions": {
+        /* Visit https://aka.ms/tsconfig to read more about this file */
+
+        /* Projects */
+        // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+        // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+        // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+        // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+        // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+        // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+        /* Language and Environment */
+        "target": "es2019" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+        // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+        // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+        // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+        // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+        // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+        // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+        // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+        // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+        // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+        // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+        // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+        /* Modules */
+        "module": "commonjs" /* Specify what module code is generated. */,
+        // "rootDir": "./src",                                  /* Specify the root folder within your source files. */
+        "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+        // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+        // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+        // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+        // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+        // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+        // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+        // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+        // "resolveJsonModule": true,                        /* Enable importing .json files. */
+        // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+        /* JavaScript Support */
+        // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+        // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+        // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+        /* Emit */
+        "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+        // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+        // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+        // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+        // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+        // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+        // "removeComments": true,                           /* Disable emitting comments. */
+        // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+        // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+        // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+        // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+        // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+        // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+        // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+        // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+        // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+        // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+        // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+        // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+        // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+        // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+        // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+        // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+        /* Interop Constraints */
+        // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+        // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+        // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+        /* Type Checking */
+        "strict": true /* Enable all strict type-checking options. */,
+        // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+        // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+        // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+        // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+        // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+        // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+        // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+        // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+        // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+        // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+        // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+        // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+        // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+        // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+        // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+        // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+        // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+        // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+        /* Completeness */
+        // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+        "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 62274892b0cf..241d72083088 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -138,6 +138,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.2":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: db2c2122af79d31ca916755331bb4bac96feb2b334cdaca5097a6b467fdd41963b89b14b6836a14f083de7ff887fc78fa1b3c10b14e743d33e12dbfe5ee3d223
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.0, @babel/compat-data@npm:^7.22.3":
   version: 7.23.2
   resolution: "@babel/compat-data@npm:7.23.2"
@@ -159,6 +170,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.26.5":
+  version: 7.26.5
+  resolution: "@babel/compat-data@npm:7.26.5"
+  checksum: afe35751f27bda80390fa221d5e37be55b7fc42cec80de9896086e20394f2306936c4296fcb4d62b683e3b49ba2934661ea7e06196ca2dacdc2e779fbea4a1a9
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.1.0, @babel/core@npm:^7.7.5":
   version: 7.24.6
   resolution: "@babel/core@npm:7.24.6"
@@ -205,6 +223,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/core@npm:7.26.7"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.26.2"
+    "@babel/generator": "npm:^7.26.5"
+    "@babel/helper-compilation-targets": "npm:^7.26.5"
+    "@babel/helper-module-transforms": "npm:^7.26.0"
+    "@babel/helpers": "npm:^7.26.7"
+    "@babel/parser": "npm:^7.26.7"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.26.7"
+    "@babel/types": "npm:^7.26.7"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 1ca1c9b1366a1ee77ade9c72302f288b2b148e4190e0f36bc032d09c686b2c7973d3309e4eec2c57243508c16cf907c17dec4e34ba95e7a18badd57c61bbcb7c
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.18.13, @babel/generator@npm:^7.22.0, @babel/generator@npm:^7.7.2":
   version: 7.22.3
   resolution: "@babel/generator@npm:7.22.3"
@@ -229,6 +270,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.26.5":
+  version: 7.26.5
+  resolution: "@babel/generator@npm:7.26.5"
+  dependencies:
+    "@babel/parser": "npm:^7.26.5"
+    "@babel/types": "npm:^7.26.5"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^3.0.2"
+  checksum: aa5f176155431d1fb541ca11a7deddec0fc021f20992ced17dc2f688a0a9584e4ff4280f92e8a39302627345cd325762f70f032764806c579c6fd69432542bcb
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -275,6 +329,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.26.5":
+  version: 7.26.5
+  resolution: "@babel/helper-compilation-targets@npm:7.26.5"
+  dependencies:
+    "@babel/compat-data": "npm:^7.26.5"
+    "@babel/helper-validator-option": "npm:^7.25.9"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: f3b5f0bfcd7b6adf03be1a494b269782531c6e415afab2b958c077d570371cf1bfe001c442508092c50ed3711475f244c05b8f04457d8dea9c34df2b741522bf
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.1":
   version: 7.22.1
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.1"
@@ -402,6 +469,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-module-imports@npm:7.25.9"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: e090be5dee94dda6cd769972231b21ddfae988acd76b703a480ac0c96f3334557d70a965bf41245d6ee43891e7571a8b400ccf2b2be5803351375d0f4e5bcf08
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.20.11, @babel/helper-module-transforms@npm:^7.21.5, @babel/helper-module-transforms@npm:^7.22.1":
   version: 7.22.1
   resolution: "@babel/helper-module-transforms@npm:7.22.1"
@@ -433,6 +510,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 9841d2a62f61ad52b66a72d08264f23052d533afc4ce07aec2a6202adac0bfe43014c312f94feacb3291f4c5aafe681955610041ece2c276271adce3f570f2f5
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -536,6 +626,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-string-parser@npm:7.25.9"
+  checksum: c28656c52bd48e8c1d9f3e8e68ecafd09d949c57755b0d353739eb4eae7ba4f7e67e92e4036f1cd43378cc1397a2c943ed7bcaf5949b04ab48607def0258b775
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
   version: 7.19.1
   resolution: "@babel/helper-validator-identifier@npm:7.19.1"
@@ -550,6 +647,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 3f9b649be0c2fd457fa1957b694b4e69532a668866b8a0d81eabfa34ba16dbf3107b39e0e7144c55c3c652bf773ec816af8df4a61273a2bb4eb3145ca9cf478e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/helper-validator-option@npm:7.21.0"
@@ -564,6 +668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-option@npm:7.25.9"
+  checksum: 9491b2755948ebbdd68f87da907283698e663b5af2d2b1b02a2765761974b1120d5d8d49e9175b167f16f72748ffceec8c9cf62acfbee73f4904507b246e2b3d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.18.9":
   version: 7.20.5
   resolution: "@babel/helper-wrap-function@npm:7.20.5"
@@ -597,6 +708,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/helpers@npm:7.26.7"
+  dependencies:
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.7"
+  checksum: 97593a0c9b3c5e2e7cf824e549b5f6fa6dc739593ad93d5bb36d06883d8124beac63ee2154c9a514dbee68a169d5683ab463e0ac6713ad92fb4854cea35ed4d4
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/highlight@npm:7.18.6"
@@ -638,6 +759,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.5, @babel/parser@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/parser@npm:7.26.7"
+  dependencies:
+    "@babel/types": "npm:^7.26.7"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 3ccc384366ca9a9b49c54f5b24c9d8cff9a505f2fbdd1cfc04941c8e1897084cc32f100e77900c12bc14a176cf88daa3c155faad680d9a23491b997fd2a59ffc
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -1790,6 +1922,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/template@npm:7.25.9"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.9"
+    "@babel/parser": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: e861180881507210150c1335ad94aff80fd9e9be6202e1efa752059c93224e2d5310186ddcdd4c0f0b0fc658ce48cb47823f15142b5c00c8456dde54f5de80b2
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.24.6":
   version: 7.24.6
   resolution: "@babel/traverse@npm:7.24.6"
@@ -1826,6 +1969,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/traverse@npm:7.26.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.26.2"
+    "@babel/generator": "npm:^7.26.5"
+    "@babel/parser": "npm:^7.26.7"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.7"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: c821c9682fe0b9edf7f7cbe9cc3e0787ffee3f73b52c13b21b463f8979950a6433f5e7e482a74348d22c0b7a05180e6f72b23eb6732328b49c59fc6388ebf6e5
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.14.0, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.5, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.4, @babel/types@npm:^7.21.5, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.22.3
   resolution: "@babel/types@npm:7.22.3"
@@ -1848,6 +2006,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.5, @babel/types@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/types@npm:7.26.7"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 2264efd02cc261ca5d1c5bc94497c8995238f28afd2b7483b24ea64dd694cf46b00d51815bf0c87f0d0061ea221569c77893aeecb0d4b4bb254e9c2f938d7669
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -4632,6 +4800,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@swc/experimental-js-interop@workspace:packages/js-interop":
+  version: 0.0.0-use.local
+  resolution: "@swc/experimental-js-interop@workspace:packages/js-interop"
+  dependencies:
+    "@babel/core": "npm:^7.26.7"
+    "@napi-rs/cli": "npm:^3.0.0-alpha.43"
+    "@swc/counter": "npm:^0.1.3"
+    benchmark: "npm:^2.1.4"
+    typescript: "npm:^5.1.6"
+  languageName: unknown
+  linkType: soft
+
 "@swc/helpers@workspace:^, @swc/helpers@workspace:packages/helpers":
   version: 0.0.0-use.local
   resolution: "@swc/helpers@workspace:packages/helpers"
@@ -6651,6 +6831,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.24.0":
+  version: 4.24.4
+  resolution: "browserslist@npm:4.24.4"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001688"
+    electron-to-chromium: "npm:^1.5.73"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.1"
+  bin:
+    browserslist: cli.js
+  checksum: 11fda105e803d891311a21a1f962d83599319165faf471c2d70e045dff82a12128f5b50b1fcba665a2352ad66147aaa248a9d2355a80aadc3f53375eb3de2e48
+  languageName: node
+  linkType: hard
+
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -6888,6 +7082,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001688":
+  version: 1.0.30001696
+  resolution: "caniuse-lite@npm:1.0.30001696"
+  checksum: 7230d3258e73daf769d1dcc46546282343970218b357b097a868176306d0ce1dd45f57d3a9ea09817dca0fc70effd3408bf4555d33238c14bb4b54b8e88d213c
+  languageName: node
+  linkType: hard
+
 "capture-exit@npm:^2.0.0":
   version: 2.0.0
   resolution: "capture-exit@npm:2.0.0"
@@ -8348,6 +8549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.73":
+  version: 1.5.89
+  resolution: "electron-to-chromium@npm:1.5.89"
+  checksum: e513c1588ce9b07406f90b7c6258ede8d7d3ae942b1f68b3e81ff7120181624f2a11ccca3dd4be40844101fa5f7aaaf1eba1ca4d1108c99994e519e361ab2931
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.5":
   version: 6.5.5
   resolution: "elliptic@npm:6.5.5"
@@ -8665,6 +8873,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
+  languageName: node
+  linkType: hard
+
 "escape-html@npm:~1.0.3":
   version: 1.0.3
   resolution: "escape-html@npm:1.0.3"
@@ -12324,6 +12539,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsesc@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "jsesc@npm:3.1.0"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 20bd37a142eca5d1794f354db8f1c9aeb54d85e1f5c247b371de05d23a9751ecd7bd3a9c4fc5298ea6fa09a100dafb4190fa5c98c6610b75952c3487f3ce7967
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:~0.3.x":
   version: 0.3.0
   resolution: "jsesc@npm:0.3.0"
@@ -13664,6 +13888,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.19":
+  version: 2.0.19
+  resolution: "node-releases@npm:2.0.19"
+  checksum: c2b33b4f0c40445aee56141f13ca692fa6805db88510e5bbb3baadb2da13e1293b738e638e15e4a8eb668bb9e97debb08e7a35409b477b5cc18f171d35a83045
+  languageName: node
+  linkType: hard
+
 "noms@npm:0.0.0":
   version: 0.0.0
   resolution: "noms@npm:0.0.0"
@@ -14343,6 +14574,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -17259,6 +17497,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "update-browserslist-db@npm:1.1.2"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: e7bf8221dfb21eba4a770cd803df94625bb04f65a706aa94c567de9600fe4eb6133fda016ec471dad43b9e7959c1bffb6580b5e20a87808d2e8a13e3892699a9
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"