From 625c7ebdda2ef0473ee8d593dd30a1d34d3ee54a Mon Sep 17 00:00:00 2001
From: Yaniv Efraim <yaniv.efraim@gmail.com>
Date: Wed, 14 Mar 2018 22:07:48 +0200
Subject: [PATCH] feat(FrameManager): add type=module to addScriptTag (#2090)

This patch adds a new "type" option to the `addScriptTag` method that
allows adding "module" tags to the page.

Fixes #2078
---
 docs/api.md                      |  2 ++
 lib/FrameManager.js              | 16 ++++++++++------
 test/assets/es6/.eslintrc        |  5 +++++
 test/assets/es6/es6import.js     |  2 ++
 test/assets/es6/es6module.js     |  1 +
 test/assets/es6/es6pathimport.js |  2 ++
 test/test.js                     | 20 ++++++++++++++++++++
 7 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 test/assets/es6/.eslintrc
 create mode 100644 test/assets/es6/es6import.js
 create mode 100644 test/assets/es6/es6module.js
 create mode 100644 test/assets/es6/es6pathimport.js

diff --git a/docs/api.md b/docs/api.md
index 1df45c5a7d2..08fe7062307 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -668,6 +668,7 @@ Shortcut for [page.mainFrame().$x(expression)](#frameexpression)
   - `url` <[string]> URL of a script to be added.
   - `path` <[string]> Path to the JavaScript file to be injected into frame. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd).
   - `content` <[string]> Raw JavaScript content to be injected into frame.
+  - `type` <[string]> Script type. Use 'module' in order to load a Javascript ES6 module. See [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for more details.
 - returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script's onload fires or when the script content was injected into frame.
 
 Adds a `<script>` tag into the page with the desired url or content.
@@ -1718,6 +1719,7 @@ The method evaluates the XPath expression.
   - `url` <[string]> URL of a script to be added.
   - `path` <[string]> Path to the JavaScript file to be injected into frame. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd).
   - `content` <[string]> Raw JavaScript content to be injected into frame.
+  - `type` <[string]> Script type. Use 'module' in order to load a Javascript ES6 module. See [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for more details.
 - returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script's onload fires or when the script content was injected into frame.
 
 Adds a `<script>` tag into the page with the desired url or content.
diff --git a/lib/FrameManager.js b/lib/FrameManager.js
index 9f748eca10a..71e35ca83d2 100644
--- a/lib/FrameManager.js
+++ b/lib/FrameManager.js
@@ -440,7 +440,7 @@ class Frame {
       const url = options.url;
       try {
         const context = await this._contextPromise;
-        return (await context.evaluateHandle(addScriptUrl, url)).asElement();
+        return (await context.evaluateHandle(addScriptUrl, url, options.type)).asElement();
       } catch (error) {
         throw new Error(`Loading script from ${url} failed`);
       }
@@ -450,23 +450,26 @@ class Frame {
       let contents = await readFileAsync(options.path, 'utf8');
       contents += '//# sourceURL=' + options.path.replace(/\n/g, '');
       const context = await this._contextPromise;
-      return (await context.evaluateHandle(addScriptContent, contents)).asElement();
+      return (await context.evaluateHandle(addScriptContent, contents, options.type)).asElement();
     }
 
     if (typeof options.content === 'string') {
       const context = await this._contextPromise;
-      return (await context.evaluateHandle(addScriptContent, options.content)).asElement();
+      return (await context.evaluateHandle(addScriptContent, options.content, options.type)).asElement();
     }
 
     throw new Error('Provide an object with a `url`, `path` or `content` property');
 
     /**
      * @param {string} url
+     * @param {string} type
      * @return {!Promise<!HTMLElement>}
      */
-    async function addScriptUrl(url) {
+    async function addScriptUrl(url, type) {
       const script = document.createElement('script');
       script.src = url;
+      if (type)
+        script.type = type;
       document.head.appendChild(script);
       await new Promise((res, rej) => {
         script.onload = res;
@@ -477,11 +480,12 @@ class Frame {
 
     /**
      * @param {string} content
+     * @param {string} type
      * @return {!HTMLElement}
      */
-    function addScriptContent(content) {
+    function addScriptContent(content, type = 'text/javascript') {
       const script = document.createElement('script');
-      script.type = 'text/javascript';
+      script.type = type;
       script.text = content;
       document.head.appendChild(script);
       return script;
diff --git a/test/assets/es6/.eslintrc b/test/assets/es6/.eslintrc
new file mode 100644
index 00000000000..1903e176f51
--- /dev/null
+++ b/test/assets/es6/.eslintrc
@@ -0,0 +1,5 @@
+{
+    "parserOptions": {
+        "sourceType": "module"
+    }
+}
\ No newline at end of file
diff --git a/test/assets/es6/es6import.js b/test/assets/es6/es6import.js
new file mode 100644
index 00000000000..9a0a1095d15
--- /dev/null
+++ b/test/assets/es6/es6import.js
@@ -0,0 +1,2 @@
+import num from './es6module.js';
+window.__es6injected = num;
\ No newline at end of file
diff --git a/test/assets/es6/es6module.js b/test/assets/es6/es6module.js
new file mode 100644
index 00000000000..a4012bff06c
--- /dev/null
+++ b/test/assets/es6/es6module.js
@@ -0,0 +1 @@
+export default 42;
\ No newline at end of file
diff --git a/test/assets/es6/es6pathimport.js b/test/assets/es6/es6pathimport.js
new file mode 100644
index 00000000000..99919621a82
--- /dev/null
+++ b/test/assets/es6/es6pathimport.js
@@ -0,0 +1,2 @@
+import num from './es6/es6module.js';
+window.__es6injected = num;
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
index d9b446de3c8..986c2f018b5 100644
--- a/test/test.js
+++ b/test/test.js
@@ -2984,6 +2984,26 @@ describe('Page', function() {
       expect(await page.evaluate(() => __injected)).toBe(42);
     });
 
+    it('should work with a url and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ url: '/es6/es6import.js', type: 'module' });
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
+    it('should work with a path and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ path: path.join(__dirname, 'assets/es6/es6pathimport.js'), type: 'module' });
+      await page.waitForFunction('window.__es6injected');
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
+    it('should work with a content and type=module', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await page.addScriptTag({ content: `import num from '/es6/es6module.js';window.__es6injected = num;`, type: 'module' });
+      await page.waitForFunction('window.__es6injected');
+      expect(await page.evaluate(() => __es6injected)).toBe(42);
+    });
+
     it('should throw an error if loading from url fail', async({page, server}) => {
       await page.goto(server.EMPTY_PAGE);
       let error = null;