fix(common): Fix handling of input source maps

crates/swc/Cargo.toml

@@ -98,6 +98,7 @@ swc_plugin_runner = { version = "0.78.1", path = "../swc_plugin_runner", optiona
 swc_timer = { version = "0.17.17", path = "../swc_timer" }
 swc_visit = { version = "0.5.2", path = "../swc_visit" }
 tracing = "0.1.32"
+url = "2.3.1"
 
   [dependencies.napi-derive]
   default-features = false

crates/swc/src/lib.rs

@@ -158,6 +158,7 @@ use swc_ecma_visit::{noop_visit_type, FoldWith, Visit, VisitMutWith, VisitWith};
 pub use swc_error_reporters::handler::{try_with_handler, HandlerOpts};
 pub use swc_node_comments::SwcComments;
 use swc_timer::timer;
+use url::Url;
 
 pub use crate::builder::PassBuilder;
 use crate::config::{
@@ -328,20 +329,35 @@ impl Compiler {
                 }
                 InputSourceMap::Str(ref s) => {
                     if s == "inline" {
+                        const NEEDLE: &str = "sourceMappingURL=";
                         // Load inline source map by simple string
                         // operations
-                        let s = "sourceMappingURL=data:application/json;base64,";
-                        let idx = fm.src.rfind(s);
+                        let idx = fm.src.rfind(NEEDLE);
                         let idx = match idx {
                             None => bail!(
                                 "failed to parse inline source map: `sourceMappingURL` not found"
                             ),
                             Some(v) => v,
                         };
-                        let encoded = &fm.src[idx + s.len()..];
+                        let data_url = fm.src[idx + NEEDLE.len()..].trim();
+                        let url = Url::parse(data_url).with_context(|| {
+                            format!("failed to parse inline source map url\n{}", data_url)
+                        })?;
 
-                        let res = base64::decode(encoded.as_bytes())
-                            .context("failed to decode base64-encoded source map")?;
+                        let idx = match url.path().find("base64,") {
+                            Some(v) => v,
+                            None => {
+                                bail!("failed to parse inline source map: not base64: {:?}", url)
+                            }
+                        };
+
+                        let content = url.path()[idx + "base64,".len()..].trim();
+
+                        let res = base64::decode_config(
+                            content.as_bytes(),
+                            base64::Config::new(base64::CharacterSet::Standard, true),
+                        )
+                        .context("failed to decode base64-encoded source map")?;
 
                         Ok(Some(sourcemap::SourceMap::from_slice(&res).context(
                             "failed to read input source map from inlined base64 encoded string",

crates/swc/tests/fixture/next-39878/input/.swcrc

@@ -0,0 +1,14 @@
+{
+    "env": {
+        "targets": {
+            "chrome": "95"
+        }
+    },
+    "jsc": {
+        "parser": {
+            "syntax": "typescript",
+            "tsx": true
+        }
+    },
+    "sourceMaps": true
+}

crates/swc/tests/fixture/next-39878/input/box-model.ts

@@ -0,0 +1,63 @@
+import type { UIStore, UIThunkAction } from "ui/actions";
+import { isInspectorSelected } from "ui/reducers/app";
+import { AppStartListening } from "ui/setup/listenerMiddleware";
+import { getBoundingRectAsync, getComputedStyleAsync } from "ui/suspense/styleCaches";
+
+import { nodeSelected } from "../../markup/reducers/markup";
+import { LAYOUT_NUMERIC_FIELDS, Layout, layoutUpdated } from "../reducers/box-model";
+
+export function setupBoxModel(store: UIStore, startAppListening: AppStartListening) {
+  // Any time a new node is selected in the "Markup" panel,
+  // try to update the box model layout data
+  startAppListening({
+    actionCreator: nodeSelected,
+    effect: async (action, listenerApi) => {
+      const { extra, getState, dispatch } = listenerApi;
+      const { ThreadFront, protocolClient, replayClient } = extra;
+      const state = getState();
+      const { selectedNode, tree } = state.markup;
+
+      if (!isInspectorSelected(state) || !selectedNode || !ThreadFront.currentPause?.pauseId) {
+        return;
+      }
+
+      const nodeInfo = tree.entities[selectedNode];
+
+      if (!nodeInfo) {
+        return;
+      }
+
+      const [bounds, style] = await Promise.all([
+        getBoundingRectAsync(
+          protocolClient,
+          ThreadFront.sessionId!,
+          ThreadFront.currentPause.pauseId,
+          selectedNode
+        ),
+        getComputedStyleAsync(
+          protocolClient,
+          ThreadFront.sessionId!,
+          ThreadFront.currentPause.pauseId,
+          selectedNode
+        ),
+      ]);
+
+      if (!bounds || !style) {
+        return;
+      }
+
+      const layout = {
+        width: parseFloat(bounds.width.toPrecision(6)),
+        height: parseFloat(bounds.height.toPrecision(6)),
+        autoMargins: {},
+      } as Layout;
+
+      for (const prop of LAYOUT_NUMERIC_FIELDS) {
+        layout[prop] = style.get(prop)!;
+      }
+
+      // Update the redux store with the latest layout properties and update the box model view.
+      dispatch(layoutUpdated(layout));
+    },
+  });
+}

crates/swc/tests/fixture/next-39878/output/box-model.map

@@ -0,0 +1,52 @@
+{
+  "mappings": "AACA,SAASA,mBAAmB,QAAQ,kBAAkB;AAEtD,SAASC,oBAAoB,EAAEC,qBAAqB,QAAQ,0BAA0B;AAEtF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,qBAAqB,EAAUC,aAAa,QAAQ,wBAAwB;AAErF,OAAO,SAASC,cAAcC,KAAc,EAAEC,iBAAoC,EAAE;IAClF,yDAAyD;IACzD,0CAA0C;IAC1CA,kBAAkB;QAChBC,eAAeN;QACfO,QAAQ,OAAOC,QAAQC,cAAgB;YACrC,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGH;YACtC,MAAM,EAAEI,YAAW,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGL;YACtD,MAAMM,QAAQL;YACd,MAAM,EAAEM,aAAY,EAAEC,KAAI,EAAE,GAAGF,MAAMG,MAAM;YAE3C,IAAI,CAACtB,oBAAoBmB,UAAU,CAACC,gBAAgB,CAACJ,YAAYO,YAAY,EAAEC,SAAS;gBACtF;YACF,CAAC;YAED,MAAMC,WAAWJ,KAAKK,QAAQ,CAACN,aAAa;YAE5C,IAAI,CAACK,UAAU;gBACb;YACF,CAAC;YAED,MAAM,CAACE,QAAQC,MAAM,GAAG,MAAMC,QAAQC,GAAG,CAAC;gBACxC7B,qBACEgB,gBACAD,YAAYe,SAAS,EACrBf,YAAYO,YAAY,CAACC,OAAO,EAChCJ;gBAEFlB,sBACEe,gBACAD,YAAYe,SAAS,EACrBf,YAAYO,YAAY,CAACC,OAAO,EAChCJ;aAEH;YAED,IAAI,CAACO,UAAU,CAACC,OAAO;gBACrB;YACF,CAAC;YAED,MAAMI,SAAS;gBACbC,OAAOC,WAAWP,OAAOM,KAAK,CAACE,WAAW,CAAC;gBAC3CC,QAAQF,WAAWP,OAAOS,MAAM,CAACD,WAAW,CAAC;gBAC7CE,aAAa,CAAC;YAChB;YAEA,KAAK,MAAMC,QAAQlC,sBAAuB;gBACxC4B,MAAM,CAACM,KAAK,GAAGV,MAAMW,GAAG,CAACD;YAC3B;YAEA,0FAA0F;YAC1FvB,SAASV,cAAc2B;QACzB;IACF;AACF,CAAC",
+  "names": [
+    "isInspectorSelected",
+    "getBoundingRectAsync",
+    "getComputedStyleAsync",
+    "nodeSelected",
+    "LAYOUT_NUMERIC_FIELDS",
+    "layoutUpdated",
+    "setupBoxModel",
+    "store",
+    "startAppListening",
+    "actionCreator",
+    "effect",
+    "action",
+    "listenerApi",
+    "extra",
+    "getState",
+    "dispatch",
+    "ThreadFront",
+    "protocolClient",
+    "replayClient",
+    "state",
+    "selectedNode",
+    "tree",
+    "markup",
+    "currentPause",
+    "pauseId",
+    "nodeInfo",
+    "entities",
+    "bounds",
+    "style",
+    "Promise",
+    "all",
+    "sessionId",
+    "layout",
+    "width",
+    "parseFloat",
+    "toPrecision",
+    "height",
+    "autoMargins",
+    "prop",
+    "get"
+  ],
+  "sources": [
+    "../../input/box-model.ts"
+  ],
+  "sourcesContent": [
+    "import type { UIStore, UIThunkAction } from \"ui/actions\";\nimport { isInspectorSelected } from \"ui/reducers/app\";\nimport { AppStartListening } from \"ui/setup/listenerMiddleware\";\nimport { getBoundingRectAsync, getComputedStyleAsync } from \"ui/suspense/styleCaches\";\n\nimport { nodeSelected } from \"../../markup/reducers/markup\";\nimport { LAYOUT_NUMERIC_FIELDS, Layout, layoutUpdated } from \"../reducers/box-model\";\n\nexport function setupBoxModel(store: UIStore, startAppListening: AppStartListening) {\n  // Any time a new node is selected in the \"Markup\" panel,\n  // try to update the box model layout data\n  startAppListening({\n    actionCreator: nodeSelected,\n    effect: async (action, listenerApi) => {\n      const { extra, getState, dispatch } = listenerApi;\n      const { ThreadFront, protocolClient, replayClient } = extra;\n      const state = getState();\n      const { selectedNode, tree } = state.markup;\n\n      if (!isInspectorSelected(state) || !selectedNode || !ThreadFront.currentPause?.pauseId) {\n        return;\n      }\n\n      const nodeInfo = tree.entities[selectedNode];\n\n      if (!nodeInfo) {\n        return;\n      }\n\n      const [bounds, style] = await Promise.all([\n        getBoundingRectAsync(\n          protocolClient,\n          ThreadFront.sessionId!,\n          ThreadFront.currentPause.pauseId,\n          selectedNode\n        ),\n        getComputedStyleAsync(\n          protocolClient,\n          ThreadFront.sessionId!,\n          ThreadFront.currentPause.pauseId,\n          selectedNode\n        ),\n      ]);\n\n      if (!bounds || !style) {\n        return;\n      }\n\n      const layout = {\n        width: parseFloat(bounds.width.toPrecision(6)),\n        height: parseFloat(bounds.height.toPrecision(6)),\n        autoMargins: {},\n      } as Layout;\n\n      for (const prop of LAYOUT_NUMERIC_FIELDS) {\n        layout[prop] = style.get(prop)!;\n      }\n\n      // Update the redux store with the latest layout properties and update the box model view.\n      dispatch(layoutUpdated(layout));\n    },\n  });\n}\n"
+  ],
+  "version": 3
+}

crates/swc/tests/fixture/next-39878/output/box-model.ts

@@ -0,0 +1,41 @@
+import { isInspectorSelected } from "ui/reducers/app";
+import { getBoundingRectAsync, getComputedStyleAsync } from "ui/suspense/styleCaches";
+import { nodeSelected } from "../../markup/reducers/markup";
+import { LAYOUT_NUMERIC_FIELDS, layoutUpdated } from "../reducers/box-model";
+export function setupBoxModel(store, startAppListening) {
+    // Any time a new node is selected in the "Markup" panel,
+    // try to update the box model layout data
+    startAppListening({
+        actionCreator: nodeSelected,
+        effect: async (action, listenerApi)=>{
+            const { extra , getState , dispatch  } = listenerApi;
+            const { ThreadFront , protocolClient , replayClient  } = extra;
+            const state = getState();
+            const { selectedNode , tree  } = state.markup;
+            if (!isInspectorSelected(state) || !selectedNode || !ThreadFront.currentPause?.pauseId) {
+                return;
+            }
+            const nodeInfo = tree.entities[selectedNode];
+            if (!nodeInfo) {
+                return;
+            }
+            const [bounds, style] = await Promise.all([
+                getBoundingRectAsync(protocolClient, ThreadFront.sessionId, ThreadFront.currentPause.pauseId, selectedNode),
+                getComputedStyleAsync(protocolClient, ThreadFront.sessionId, ThreadFront.currentPause.pauseId, selectedNode)
+            ]);
+            if (!bounds || !style) {
+                return;
+            }
+            const layout = {
+                width: parseFloat(bounds.width.toPrecision(6)),
+                height: parseFloat(bounds.height.toPrecision(6)),
+                autoMargins: {}
+            };
+            for (const prop of LAYOUT_NUMERIC_FIELDS){
+                layout[prop] = style.get(prop);
+            }
+            // Update the redux store with the latest layout properties and update the box model view.
+            dispatch(layoutUpdated(layout));
+        }
+    });
+}

crates/swc/tests/source_map.rs

@@ -11,13 +11,13 @@ use std::{
 
 use anyhow::{Context, Error};
 use swc::{
-    config::{Config, IsModule, ModuleConfig, Options, SourceMapsConfig},
+    config::{Config, InputSourceMap, IsModule, ModuleConfig, Options, SourceMapsConfig},
     Compiler,
 };
 use testing::{assert_eq, NormalizedOutput, StdErr, Tester};
 use walkdir::WalkDir;
 
-fn file(f: &str) -> Result<(), StdErr> {
+fn file(f: &str, config: Config) -> Result<(), StdErr> {
     Tester::new().print_errors(|cm, handler| {
         let path = canonicalize(f).expect("failed to canonicalize");
 
@@ -32,7 +32,7 @@ fn file(f: &str) -> Result<(), StdErr> {
                     config: Config {
                         is_module: IsModule::Bool(true),
                         inline_sources_content: true.into(),
-                        ..Default::default()
+                        ..config
                     },
                     swcrc: true,
                     source_maps: Some(SourceMapsConfig::Bool(true)),
@@ -69,7 +69,7 @@ fn file(f: &str) -> Result<(), StdErr> {
 
 #[test]
 fn issue_622() {
-    file("tests/srcmap/issue-622/index.js").unwrap();
+    file("tests/srcmap/issue-622/index.js", Default::default()).unwrap();
 }
 
 fn inline(f: &str) -> Result<(), StdErr> {
@@ -412,3 +412,15 @@ fn should_work_with_emit_source_map_columns() {
         Ok(())
     });
 }
+
+#[test]
+fn issue_4578() {
+    file(
+        "tests/srcmap/issue-4578/after-babel.js",
+        Config {
+            input_source_map: Some(InputSourceMap::Str("inline".into())),
+            ..Default::default()
+        },
+    )
+    .unwrap();
+}

crates/swc_common/src/source_map.rs

@@ -1281,12 +1281,17 @@ impl SourceMap {
             let mut col = max(chpos, linechpos) - min(chpos, linechpos);
 
             if let Some(orig) = &orig {
-                if let Some(token) = orig.lookup_token(line, col) {
+                if let Some(token) = orig
+                    .tokens()
+                    .find(|token| token.get_src_line() == line - 1 && token.get_src_col() == col)
+                {
                     line = token.get_src_line() + 1;
                     col = token.get_src_col();
                     if let Some(src) = token.get_source() {
                         src_id = builder.add_source(src);
                     }
+                } else {
+                    continue;
                 }
             }