feat: use unique handle for runtime.js

By doing this, we are preventing multiple enqueue of the same file
in the same page and executing modules multiple time.

Fixes swashata/wp-webpack-script#13

Author: swashata

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
-  "phpcs.enable": true
+  "phpcs.enable": true,
+  "spellright.language": [
+    "en"
+  ],
+  "spellright.documentTypes": [
+    "markdown",
+    "latex",
+    "plaintext"
+  ]
 }

inc/Enqueue.php

@@ -194,6 +194,12 @@ public function getAssets( $dir, $entryPoint, $config ) {
 		if ( $config['js'] && isset( $enqueue['js'] ) && count( (array) $enqueue['js'] ) ) {
 			foreach ( $enqueue['js'] as $index => $js ) {
 				$handle = $identifier . '_' . $index;
+				// If the js is runtime, then use an unique handle
+				if ( $js === $dir . '/runtime.js' ) {
+					$handle = 'wpackio_' . $this->appName . $dir . '_runtime';
+					// By making it unique, we rely on WordPress to only
+					// enqueue it once.
+				}
 				$js_handles[] = [
 					'handle' => $handle,
 					'url' => $this->getUrl( $js ),

tests/data/dist/app/manifest.json

@@ -6,28 +6,32 @@
   "main.js.map": "app/main.js.map",
   "mobile.js": "app/mobile.js",
   "mobile.js.map": "app/mobile.js.map",
+  "runtime.js": "app/runtime.js",
+  "runtime.js.map": "app/runtime.js.map",
   "wpackioEp": {
     "main": {
-      "css": [
-        "app/main.css",
-        "app/foo.css"
-      ],
       "js": [
-        "app/main.js",
-        "app/foo.js"
-      ],
-      "css.map": [
-        "app/main.css.map"
+        "app/runtime.js",
+        "app/main.js"
       ],
       "js.map": [
+        "app/runtime.js.map",
         "app/main.js.map"
+      ],
+      "css": [
+        "app/main.css"
+      ],
+      "css.map": [
+        "app/main.css.map"
       ]
     },
     "mobile": {
       "js": [
+        "app/runtime.js",
         "app/mobile.js"
       ],
       "js.map": [
+        "app/runtime.js.map",
         "app/mobile.js.map"
       ]
     }

tests/testcases/EnqueueTest.php

@@ -172,6 +172,45 @@ public function test_getAssets_for_plugin() {
 		$this->assertMatchesSnapshot( $assets );
 	}
 
+	public function test_getAssets_has_same_handle_for_every_runtime() {
+		$runtime_handles = [];
+		$enqueue = new \WPackio\Enqueue( 'foo', 'dist', '1.0.0', 'plugin', $this->pp );
+		$ass_main = $enqueue->getAssets( 'app', 'main', [
+			'js' => true,
+			'css' => true,
+			'js_dep' => [],
+			'css_dep' => [],
+			'identifier' => false,
+			'in_footer' => true,
+			'media' => 'all',
+		] );
+		$ass_mobile = $enqueue->getAssets( 'app', 'mobile', [
+			'js' => true,
+			'css' => true,
+			'js_dep' => [],
+			'css_dep' => [],
+			'identifier' => false,
+			'in_footer' => true,
+			'media' => 'all',
+		] );
+
+		foreach ( $ass_main['js'] as $js ) {
+			if ( strpos( $js['url'], 'runtime.js' ) !== false ) {
+				$runtime_handles[] = $js['handle'];
+			}
+		}
+		foreach ( $ass_mobile['js'] as $js ) {
+			if ( strpos( $js['url'], 'runtime.js' ) !== false ) {
+				$runtime_handles[] = $js['handle'];
+			}
+		}
+		$this->assertTrue(
+			count( array_unique( $runtime_handles ) ) === 1
+			&& end( $runtime_handles ) === 'wpackio_fooapp_runtime'
+		);
+	}
+
+
 	public function test_enqueue() {
 		// Get the manifest beforehand for assertion
 		$path_to_manifest = dirname( $this->pp ) . '/dist/app/manifest.json';

tests/testcases/__snapshots__/EnqueueTest__test_enqueue__1.php

@@ -6,23 +6,18 @@
       'handle' => 'wpackIoAppMain_0_css',
       'url' => 'http://example.com/path/to/plugin/dist/app/main.css',
     ),
-    1 => 
-    array (
-      'handle' => 'wpackIoAppMain_1_css',
-      'url' => 'http://example.com/path/to/plugin/dist/app/foo.css',
-    ),
   ),
   'js' => 
   array (
     0 => 
     array (
-      'handle' => 'wpackIoAppMain_0',
-      'url' => 'http://example.com/path/to/plugin/dist/app/main.js',
+      'handle' => 'wpackio_fooapp_runtime',
+      'url' => 'http://example.com/path/to/plugin/dist/app/runtime.js',
     ),
     1 => 
     array (
       'handle' => 'wpackIoAppMain_1',
-      'url' => 'http://example.com/path/to/plugin/dist/app/foo.js',
+      'url' => 'http://example.com/path/to/plugin/dist/app/main.js',
     ),
   ),
 );

tests/testcases/__snapshots__/EnqueueTest__test_getAssets_for_plugin__1.php

@@ -6,23 +6,18 @@
       'handle' => 'wpackIoAppMain_0_css',
       'url' => 'http://example.com/path/to/plugin/dist/app/main.css',
     ),
-    1 => 
-    array (
-      'handle' => 'wpackIoAppMain_1_css',
-      'url' => 'http://example.com/path/to/plugin/dist/app/foo.css',
-    ),
   ),
   'js' => 
   array (
     0 => 
     array (
-      'handle' => 'wpackIoAppMain_0',
-      'url' => 'http://example.com/path/to/plugin/dist/app/main.js',
+      'handle' => 'wpackio_fooapp_runtime',
+      'url' => 'http://example.com/path/to/plugin/dist/app/runtime.js',
     ),
     1 => 
     array (
       'handle' => 'wpackIoAppMain_1',
-      'url' => 'http://example.com/path/to/plugin/dist/app/foo.js',
+      'url' => 'http://example.com/path/to/plugin/dist/app/main.js',
     ),
   ),
 );

tests/testcases/__snapshots__/EnqueueTest__test_getAssets_for_theme__1.php

@@ -6,23 +6,18 @@
       'handle' => 'wpackIoAppMain_0_css',
       'url' => 'http://example.com/path/to/template/directory/dist/app/main.css',
     ),
-    1 => 
-    array (
-      'handle' => 'wpackIoAppMain_1_css',
-      'url' => 'http://example.com/path/to/template/directory/dist/app/foo.css',
-    ),
   ),
   'js' => 
   array (
     0 => 
     array (
-      'handle' => 'wpackIoAppMain_0',
-      'url' => 'http://example.com/path/to/template/directory/dist/app/main.js',
+      'handle' => 'wpackio_fooapp_runtime',
+      'url' => 'http://example.com/path/to/template/directory/dist/app/runtime.js',
     ),
     1 => 
     array (
       'handle' => 'wpackIoAppMain_1',
-      'url' => 'http://example.com/path/to/template/directory/dist/app/foo.js',
+      'url' => 'http://example.com/path/to/template/directory/dist/app/main.js',
     ),
   ),
 );

tests/testcases/__snapshots__/EnqueueTest__test_getManifest__1.php

@@ -6,38 +6,42 @@
   'main.js.map' => 'app/main.js.map',
   'mobile.js' => 'app/mobile.js',
   'mobile.js.map' => 'app/mobile.js.map',
+  'runtime.js' => 'app/runtime.js',
+  'runtime.js.map' => 'app/runtime.js.map',
   'wpackioEp' => 
   array (
     'main' => 
     array (
-      'css' => 
+      'js' => 
       array (
-        0 => 'app/main.css',
-        1 => 'app/foo.css',
+        0 => 'app/runtime.js',
+        1 => 'app/main.js',
       ),
-      'js' => 
+      'js.map' => 
       array (
-        0 => 'app/main.js',
-        1 => 'app/foo.js',
+        0 => 'app/runtime.js.map',
+        1 => 'app/main.js.map',
       ),
-      'css.map' => 
+      'css' => 
       array (
-        0 => 'app/main.css.map',
+        0 => 'app/main.css',
       ),
-      'js.map' => 
+      'css.map' => 
       array (
-        0 => 'app/main.js.map',
+        0 => 'app/main.css.map',
       ),
     ),
     'mobile' => 
     array (
       'js' => 
       array (
-        0 => 'app/mobile.js',
+        0 => 'app/runtime.js',
+        1 => 'app/mobile.js',
       ),
       'js.map' => 
       array (
-        0 => 'app/mobile.js.map',
+        0 => 'app/runtime.js.map',
+        1 => 'app/mobile.js.map',
       ),
     ),
   ),