Manipulation: Respect script nomodule attribute in DOM manipulation

mgol · web-flow · commit e4de8b4626f8 · 2019-01-21T18:34:40.000+01:00
PR #3869 added support for `<script type="module">` & some support for the `nomodule` attribute but with no tests for `nomodule` and with the attribute only respected on inline scripts. This commit adds support for source-based scripts as well. It also adds tests for `nomodule`, including making sure legacy browsers execute such scripts as they'd natively do - that's the whole point of `nomodule` scripts, after all. Fixes gh-4281 Closes gh-4282 Ref gh-3871 Ref gh-3869
diff --git a/src/manipulation.js b/src/manipulation.js
@@ -198,7 +198,7 @@ function domManip( collection, args, callback, ignored ) {
 						if ( node.src && ( node.type || "" ).toLowerCase()  !== "module" ) {
 
 							// Optional AJAX dependency, but won't run scripts if not present
-							if ( jQuery._evalUrl ) {
+							if ( jQuery._evalUrl && !node.noModule ) {
 								jQuery._evalUrl( node.src );
 							}
 						} else {
diff --git a/test/data/inner_nomodule.js b/test/data/inner_nomodule.js
@@ -0,0 +1 @@
+window.ok( !QUnit.moduleTypeSupported, "evaluated: inner nomodule script with src" );
diff --git a/test/data/nomodule.js b/test/data/nomodule.js
@@ -0,0 +1 @@
+window.ok( !QUnit.moduleTypeSupported, "evaluated: nomodule script with src" );
diff --git a/test/unit/manipulation.js b/test/unit/manipulation.js
@@ -1798,7 +1798,7 @@ QUnit.test( "html(Function)", function( assert ) {
 } );
 
 QUnit[
-	// Support: Edge 16-17
+	// Support: Edge 16-18+
 	// Edge sometimes doesn't execute module scripts so skip the test there.
 	( QUnit.moduleTypeSupported && !/edge\//i.test( navigator.userAgent ) ) ?
 		"test" :
@@ -1825,6 +1825,36 @@ QUnit[
 	}, 1000 );
 } );
 
+QUnit[
+	// Support: IE 9-11 only, Android 4.0-4.4 only, iOS 7-10 only
+	// `nomodule` scripts should be executed by legacy browsers only.
+	// iOS 10 supports `<script type="module">` but doesn't support the nomodule attribute
+	// so let's skip it here; sites supporting it must handle `nomodule` in a custom way anyway.
+	!/iphone os 10_/i.test( navigator.userAgent ) ?
+		"test" :
+		"skip"
+]( "html(script nomodule)", function( assert ) {
+	assert.expect( QUnit.moduleTypeSupported ? 0 : 4 );
+	var done = assert.async(),
+		$fixture = jQuery( "#qunit-fixture" );
+
+	$fixture.html(
+		[
+			"<script nomodule>ok( !QUnit.moduleTypeSupported, 'evaluated: nomodule script' );</script>",
+			"<script nomodule src='" + url( "nomodule.js" ) + "'></script>",
+			"<div>",
+				"<script nomodule>ok( !QUnit.moduleTypeSupported, 'evaluated: inner nomodule script' );</script>",
+				"<script nomodule src='" + url( "inner_nomodule.js" ) + "'></script>",
+			"</div>"
+		].join( "" )
+	);
+
+	// Allow asynchronous script execution to generate assertions
+	setTimeout( function() {
+		done();
+	}, 1000 );
+} );
+
 QUnit.test( "html(Function) with incoming value -- direct selection", function( assert ) {
 
 	assert.expect( 4 );

Original file line number	Diff line number	Diff line change
`@@ -198,7 +198,7 @@ function domManip( collection, args, callback, ignored ) {`
`198`	`198`	`if ( node.src && ( node.type \|\| "" ).toLowerCase() !== "module" ) {`
`199`	`199`
`200`	`200`	`// Optional AJAX dependency, but won't run scripts if not present`
`201`		`- if ( jQuery._evalUrl ) {`
	`201`	`+ if ( jQuery._evalUrl && !node.noModule ) {`
`202`	`202`	`jQuery._evalUrl( node.src );`
`203`	`203`	`}`
`204`	`204`	`} else {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+window.ok( !QUnit.moduleTypeSupported, "evaluated: inner nomodule script with src" );`