Fix relative imports in wasm loader (#3752)

Currently, the loader script emitted by `build_web_compilers` resolves URLs against the base-URL of the active document. This breaks when the entrypoint script is not in the same directory as the page, e.g. in

```
web/
  index.html
  src/
    app.dart
```

To fix this, this PR changes the logic to resolve URLs against the loader script (which would be `/src/app.dart.js` in the example, properly resolving the other dart2wasm/dart2js components).
I've also added an integration test using a `<script>` tag pointing to a subdirectory to make sure that this is working now.

Closes #3751

Author: simolus3

_test/build.both.yaml

@@ -18,6 +18,9 @@ targets:
           - test/hello_world_deferred_test.dart.browser_test.dart
           - test/hello_world_custom_html_test.dart
           - test/hello_world_custom_html_test.dart.browser_test.dart
+          - test/subdir_source_test.dart
+          - test/subdir_source_test.dart.browser_test.dart
           - test/other_test.dart.browser_test.dart
+          - test/sub-dir/subdir_source.dart
           - test/sub-dir/subdir_test.dart
           - test/sub-dir/subdir_test.dart.browser_test.dart

_test/build.dart2js.yaml

@@ -17,6 +17,9 @@ targets:
           - test/hello_world_deferred_test.dart.browser_test.dart
           - test/hello_world_custom_html_test.dart
           - test/hello_world_custom_html_test.dart.browser_test.dart
+          - test/subdir_source_test.dart
+          - test/subdir_source_test.dart.browser_test.dart
           - test/other_test.dart.browser_test.dart
+          - test/sub-dir/subdir_source.dart
           - test/sub-dir/subdir_test.dart
           - test/sub-dir/subdir_test.dart.browser_test.dart

_test/build.dart2wasm.yaml

@@ -23,6 +23,9 @@ targets:
           - test/hello_world_deferred_test.dart.browser_test.dart
           - test/hello_world_custom_html_test.dart
           - test/hello_world_custom_html_test.dart.browser_test.dart
+          - test/subdir_source_test.dart
+          - test/subdir_source_test.dart.browser_test.dart
           - test/other_test.dart.browser_test.dart
+          - test/sub-dir/subdir_source.dart
           - test/sub-dir/subdir_test.dart
           - test/sub-dir/subdir_test.dart.browser_test.dart

_test/build.yaml

@@ -10,4 +10,6 @@ targets:
           - test/hello_world_deferred_test.dart.browser_test.dart
           - test/hello_world_custom_html_test.dart.browser_test.dart
           - test/other_test.dart.browser_test.dart
+          - test/subdir_source_test.dart.browser_test.dart
+          - test/sub-dir/subdir_source.dart
           - test/sub-dir/subdir_test.dart.browser_test.dart

_test/dart_test.yaml

@@ -4,10 +4,10 @@ timeout: 16x
 concurrency: 1
 
 tags:
-  integration:
   # This tag is used for integration tests - we don't need special options at the
   # moment, but want to avoid warnings from the test runner about using undefined
   # targets.
+  integration:
 
 define_platforms:
   chrome_without_wasm:

_test/mono_pkg.yaml

@@ -11,7 +11,7 @@ stages:
     os: linux
 - unit_test:
   - command: dart run build_runner test -- -p chrome --test-randomize-ordering-seed=random
-  # TODO(https://github.com/dart-lang/build/issues/3423): restore this on windows 
+  # TODO(https://github.com/dart-lang/build/issues/3423): restore this on windows
   - command: dart run build_runner test -- -p vm test/configurable_uri_test.dart --test-randomize-ordering-seed=random
     os: linux
 - e2e_test:

_test/test/sub-dir/subdir_source.dart

@@ -0,0 +1,10 @@
+// Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
+void main() {
+  globalContext['otherScriptLoaded'] = true.toJS;
+}

_test/test/subdir_source_test.dart

@@ -0,0 +1,41 @@
+// Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+@TestOn('browser')
+library;
+
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
+import 'package:test/test.dart';
+import 'package:web/web.dart';
+
+void main() {
+  final wasCompiledWithDdc = globalContext.has('define');
+
+  test(
+    'did load script from a subdirectory',
+    () async {
+      final scriptTag = document.createElement('script') as HTMLScriptElement;
+      scriptTag
+        ..type = 'application/javascript'
+        ..src = 'sub-dir/subdir_source.dart.js';
+      document.head!.append(scriptTag);
+
+      await Future.any([
+        scriptTag.onLoad.first,
+        scriptTag.onError.first
+            .then((_) => fail('Script from sub directory failed to load'))
+      ]);
+
+      await pumpEventQueue();
+
+      // `sub-dir/subdir_source.dart.js` should have set the `otherScriptLoader`
+      // propery.
+      expect(globalContext.has('otherScriptLoaded'), isTrue);
+    },
+    skip: wasCompiledWithDdc
+        ? 'This requires multiple Dart entrypoints, which appears to break DDC'
+        : null,
+  );
+}

build_web_compilers/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 4.1.0-wip
+
+- Fix loading compiled modules from subdirectories.
+
 ## 4.1.0-beta.0
 
 - Support compiling to WebAssembly by using `dart2wasm` as a value for the

build_web_compilers/lib/src/web_entrypoint_builder.dart

@@ -334,7 +334,15 @@ class WebEntrypointBuilder implements Builder {
     var jsCompiler = options.optionsFor(WebCompiler.Dart2Js) ??
         options.optionsFor(WebCompiler.DartDevc);
 
-    var loaderResult = StringBuffer('''(async () => {
+    var loaderResult = StringBuffer('''
+(async () => {
+const thisScript = document.currentScript;
+
+function relativeURL(ref) {
+  const base = thisScript?.src ?? document.baseURI;
+  return new URL(ref, base).toString();
+}
+
 ''');
 
     // If we're compiling to JS, start a feature detection to prefer wasm but
@@ -355,19 +363,19 @@ if (supportsWasmGC()) {
     }
 
     loaderResult.writeln('''
-let { instantiate, invoke } = await import("./$basename${wasmCompiler.extension}");
+let { compileStreaming } = await import("./$basename${wasmCompiler.extension}");
 
-let modulePromise = WebAssembly.compileStreaming(fetch("$basename.wasm"));
-let instantiated = await instantiate(modulePromise, {});
-invoke(instantiated, []);
+let app = await compileStreaming(fetch(relativeURL("$basename.wasm")));
+let module = await app.instantiate({});
+module.invokeMain();
 ''');
 
     if (jsCompiler != null) {
       loaderResult.writeln('''
 } else {
 const scriptTag = document.createElement("script");
 scriptTag.type = "application/javascript";
-scriptTag.src = new URL("./$basename${jsCompiler.extension}", document.baseURI).toString();
+scriptTag.src = relativeURL("./$basename${jsCompiler.extension}");
 document.head.append(scriptTag);
 }
 ''');