[worklets] Rename import to addModule for worklets. \o/

This fixes w3c#374.

This didn't have as many text edits as I thought it would.

Author: bfgeek

css-layout-api/EXPLAINER.md

@@ -41,20 +41,19 @@ coordinates is:
 Getting Started
 ---------------
 
-First you'll need to import a script into the layout worklet.
+First you'll need to add a module script into the layout worklet.
 
 ```js
 if ('layoutWorklet' in CSS) {
-  CSS.layoutWorklet.import('my-layout-script.js').then(() => {
-    console.log('layout script installed!');
-  });
+  await CSS.layoutWorklet.addModule('my-layout-script.js');
+  console.log('layout script installed!');
 }
 ```
 
 See the worklets [explainer](../worklets/EXPLAINER.md) for a more involved explanation of worklets.
 
-After the promise returned from the `import` method resolves the layouts defined in the script will
-apply to the page.
+After the promise returned from the `addModule` method resolves the layouts defined in the script
+will apply to the page.
 
 A Centering Layout
 ------------------

css-paint-api/EXPLAINER.md

@@ -64,13 +64,12 @@ engine.
 Getting Started
 ---------------
 
-First you'll need to import a script into the paint worklet.
+First you'll need to add a module script into the paint worklet.
 
 ```js
 if ('paintWorklet' in CSS) {
-  CSS.paintWorklet.import('my-paint-script.js').then(() => {
-    console.log('paint script installed!');
-  }
+  await CSS.paintWorklet.addModule('my-paint-script.js');
+  console.log('paint script installed!');
 }
 ```
 

css-paint-api/Overview.bs

@@ -521,7 +521,7 @@ following steps:
                 <div class=example-1></div>
                 <div class=example-2></div>
                 <script>
-                    CSS.paintWorklet.import('paint.js');
+                    CSS.paintWorklet.addModule('paint.js');
                 </script>
             </pre>
 
@@ -657,7 +657,7 @@ When the user agent wants to <dfn>invoke a paint callback</dfn> given |name|, |i
                 &lt;div class=div-1>&lt;/div>
                 &lt;div class=div-2>&lt;/div>
                 &lt;script>
-                    CSS.paintWorklet.import('paint.js');
+                    CSS.paintWorklet.addModule('paint.js');
                 &lt;/script>
             </pre>
         </div>
@@ -724,7 +724,7 @@ Animations API.
       initialValue: 'black',
       inherit: false
     });
-    CSS.paintWorklet.import('circle.js');
+    CSS.paintWorklet.addModule('circle.js');
 &lt;/script>
 </pre>
 
@@ -772,7 +772,7 @@ loaded.
         name: '--image',
         syntax: '&lt;image&gt;'
     });
-    CSS.paintWorklet.import('image-placeholder.js');
+    CSS.paintWorklet.addModule('image-placeholder.js');
 &lt;/script>
 </pre>
 
@@ -822,7 +822,7 @@ Example 3: Arcs {#example-3}
 &lt;div id="example">&lt;/div>
 
 &lt;script>
-    CSS.paintWorklet.import('arc.js');
+    CSS.paintWorklet.addModule('arc.js');
 &lt;/script>
 </pre>
 
@@ -905,7 +905,7 @@ h1 {
 &lt;/style>
 
 &lt;script>
-    CSS.paintWorklet.import('heading-color.js');
+    CSS.paintWorklet.addModule('heading-color.js');
 &lt;/script>
 </pre>
 

css-paint-api/arc/index.html

@@ -14,5 +14,5 @@
 <div id="example"></div>
 
 <script>
-  (CSS.paintWorklet || paintWorklet).import('arc.js');
+  (CSS.paintWorklet.addModule || paintWorkle.import)('arc.js');
 </script>

css-paint-api/chat/index.html

@@ -33,7 +33,7 @@
 });
 
 (async function() {
-  await (CSS.paintWorklet || paintWorklet).import('chat.js');
+  await (CSS.paintWorklet.addModule || paintWorkle.import)('chat.js');
 
   const elem = document.getElementById('example');
   const add = document.getElementById('add');

css-paint-api/circle/index.html

@@ -25,6 +25,6 @@
       initialValue: 'black',
       inherit: false
     });
-    (CSS.paintWorklet || paintWorklet).import('circle.js');
+    (CSS.paintWorklet.addModule || paintWorkle.import)('circle.js');
 </script>
 

worklets/Overview.bs

@@ -162,7 +162,7 @@ WorkletGlobalScope</a> algorithm.
 
 The <a>event loop</a> is run on the <a>worklet global scope execution environment</a> defined above.
 
-It is expected that only tasks associated {{Worklet/import()}}, the user agent invoking author
+It is expected that only tasks associated {{Worklet/addModule()}}, the user agent invoking author
 defined callbacks, and <a>microtasks</a> will use this <a>event loop</a>.
 
 Note:
@@ -293,13 +293,13 @@ Issue: Merge this with https://html.spec.whatwg.org/multipage/workers.html#set-u
 Worklet {#worklet-section}
 --------------------------
 
-The {{Worklet}} object provides the capability to import module scripts into its associated
+The {{Worklet}} object provides the capability to add module scripts into its associated
 {{WorkletGlobalScope}}s. The user agent can then create classes registered on the
 {{WorkletGlobalScope}}s and invoke their methods.
 
 <pre class='idl'>
 interface Worklet {
-    [NewObject] Promise&lt;void> import(USVString moduleURL, optional WorkletOptions options);
+    [NewObject] Promise&lt;void> addModule(USVString moduleURL, optional WorkletOptions options);
 };
 
 dictionary WorkletOptions {
@@ -325,7 +325,7 @@ additional {{WorkletGlobalScope}}s should be transparent to the author.
 
 <div class='note'>
     Practically user agents aren't expected to implement the following algorithm using a
-    thread-safe map. Instead when {{Worklet/import()}} is called user agents can fetch the module
+    thread-safe map. Instead when {{Worklet/addModule()}} is called user agents can fetch the module
     graph on the main thread, and send the fetched sources (the data contained in the <a>module
     responses map</a>) to each thread which has a {{WorkletGlobalScope}}.
 
@@ -338,7 +338,7 @@ A <dfn>pending tasks struct</dfn> is a <a>struct</a> consiting of:
 This is used by the algorithms below.
 
 <div algorithm>
-When the <dfn method for=Worklet>import(|moduleURL|, |options|)</dfn> method is called on a
+When the <dfn method for=Worklet>addModule(|moduleURL|, |options|)</dfn> method is called on a
 {{Worklet}} object, the user agent <em>must</em> run the following steps:
     1. Let |promise| be <a>a new promise</a>.
 
@@ -464,7 +464,7 @@ Note: Specifically, if a script fails to parse or fails to load over the network
     classes may have been registered correctly.
 
 <div class=example>
-    When an author imports code into a {{Worklet}} the code may run against multiple
+    When an author adds code into a {{Worklet}} the code may run against multiple
     {{WorkletGlobalScope}}s, for example:
     <pre class='lang-javascript'>
         // script.js
@@ -473,7 +473,7 @@ Note: Specifically, if a script fails to parse or fails to load over the network
 
     <pre class='lang-javascript'>
         // main.js
-        await CSS.paintWorklet.import('script.js');
+        await CSS.paintWorklet.addModule('script.js');
     </pre>
 
     Behind the scenes the user agent may load the <code class='lang-javascript'>script.js</code>
@@ -546,8 +546,8 @@ Loading scripts into a worklet. {#example-single}
 -------------------------------------------------
 
 <pre class='lang-javascript'>
-window.fakeWorklet1.import('script1.js');
-window.fakeWorklet1.import('script2.js');
+window.fakeWorklet1.addModule('script1.js');
+window.fakeWorklet1.addModule('script2.js');
 
 // Assuming no other calls to fakeWorklet1 valid script loading orderings are:
 // 1. 'script1.js', 'script2.js'
@@ -559,8 +559,8 @@ Loading scripts into multiple worklets. {#example-multiple}
 
 <pre class='lang-javascript'>
 Promise.all([
-    window.fakeWorklet1.import('script1.js'),
-    window.fakeWorklet2.import('script2.js')
+    window.fakeWorklet1.addModule('script1.js'),
+    window.fakeWorklet2.addModule('script2.js')
 ]).then(function() {
     // Both scripts now have loaded code, can do a task which relies on this.
 });