Use and recommend module/nomodule snippet

lineCode · Mar 5, 2019 · 4adb9ef · 4adb9ef
1 parent df288c0
commit 4adb9ef
Show file tree

Hide file tree

Showing 20 changed files with 281 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,15 @@ You can load a _bundled build_ via
 [unpkg.com](https://unpkg.com/@google/model-viewer/dist/model-viewer.js):
 
 ```html
-<script src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
+<!-- Loads <model-viewer> only on modern browsers: -->
+<script type="module"
+    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
+</script>
+
+<!-- Loads <model-viewer> only on old browsers like IE11: -->
+<script nomodule
+    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
+</script>
 ```
 
 Alternatively, you can install the _npm package_:
@@ -51,11 +59,8 @@ dependencies.
 
 ## Usage
 
-If you are using a _bundled build_, first add a script tag to your page to load it
-
-```html
-<script src="path/to/bundled/model-viewer.js"></script>
-```
+If you are using a _bundled build_, first add a script tag to your page to load
+`<model-viewer>` as described in the [Installing](#installing) section.
 
 Alternatively, if you are using the _npm package_ and a bundler (see
 "Important note on bundling" above), you can import the module:

diff --git a/examples/accessibility.html b/examples/accessibility.html
@@ -60,7 +60,22 @@ <h1>&lt;model-viewer&gt; - Accessibility Tests</h1>
         </ul>
     </div>
 
-    <script src="./built/dependencies.js"></script>
-    <script src="../dist/model-viewer.js"></script>
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="examples/built/dependencies.js">
+  </script>
+  <script nomodule
+      src="examples/built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="dist/model-viewer-legacy.js">
+  </script>
 </body>
 </html>
diff --git a/examples/augmented-reality.html b/examples/augmented-reality.html
@@ -110,7 +110,23 @@ <h4>unstable-webxr</h4>
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-  <script src="./built/dependencies.js"></script>
-  <script src="../dist/model-viewer.js"></script>
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
+
 </body>
 </html>
diff --git a/examples/background-color.html b/examples/background-color.html
@@ -155,8 +155,24 @@ <h2>Changing background color</h2>
   </div>
 
   <script src="./scripts/helpers.js"></script>
-  <script src="./built/dependencies.js"></script>
-  <script src="../dist/model-viewer.js"></script>
+
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
 
 </body>
 </html>
diff --git a/examples/background-image.html b/examples/background-image.html
@@ -185,8 +185,24 @@ <h2>Cycling between <span class="attribute">background-image</span> and <span cl
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-    <script src="./scripts/helpers.js"></script>
-    <script src="./built/dependencies.js"></script>
-    <script src="../dist/model-viewer.js"></script>
+  <script src="./scripts/helpers.js"></script>
+
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
 </body>
 </html>
diff --git a/examples/default.html b/examples/default.html
@@ -76,7 +76,23 @@ <h4>This page tests the minimally-configured element.</h4>
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-    <script src="./built/dependencies.js"></script>
-    <script src="../dist/model-viewer.js"></script>
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
+
 </body>
 </html>
diff --git a/examples/list.html b/examples/list.html
@@ -89,6 +89,23 @@ <h4>This page tests usages of the <span class="attribute">&lt;model-viewer&gt; <
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-  <script src="../dist/model-viewer.js"></script>
+
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
 </body>
 </html>
diff --git a/examples/loading.html b/examples/loading.html
@@ -188,9 +188,25 @@ <h2>Cycling between posters</h2>
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-  <script src="scripts/helpers.js"></script>
-  <script src="./built/dependencies.js"></script>
-  <script src="../dist/model-viewer.js"></script>
+  <script src="./scripts/helpers.js"></script>
+
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
 
 </body>
 </html>
diff --git a/examples/multiple-elements.html b/examples/multiple-elements.html
@@ -137,6 +137,22 @@ <h4>This page tests many models in the same view at different sizes.</h4>
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-    <script src="../dist/model-viewer.js"></script>
-</body>
+    <!-- Documentation-specific dependencies: -->
+    <script type="module"
+        src="./built/dependencies.js">
+    </script>
+    <script nomodule
+        src="./built/dependencies-legacy.js">
+    </script>
+
+    <!-- Loads <model-viewer> only on modern browsers: -->
+    <script type="module"
+        src="../dist/model-viewer.js">
+    </script>
+
+    <!-- Loads <model-viewer> only on old browsers like IE11: -->
+    <script nomodule
+        src="../dist/model-viewer-legacy.js">
+    </script>
+  </body>
 </html>
diff --git a/examples/pbr.html b/examples/pbr.html
@@ -74,20 +74,16 @@ <h4>These examples use 16MB+ of assets. A local web server or landline connectio
             <h2>Helmet</h2>
           </div>
 
-          <lazy-inject>
-            <template slot="lazy">
-              <example-snippet stamp-to="demo-container-1" highlight-as="html">
-                <template>
+          <example-snippet lazy stamp-to="demo-container-1" highlight-as="html">
+            <template>
 <model-viewer
   src="assets/DamagedHelmet/DamagedHelmet.gltf"
   alt="A 3D model of a damaged helmet depicted within a hangar"
   controls auto-rotate
   background-image="assets/small_hangar_01_1k.jpg">
 </model-viewer>
-                </template>
-              </example-snippet>
             </template>
-          </lazy-inject>
+          </example-snippet>
         </div>
       </div>
     </div>
@@ -100,20 +96,16 @@ <h2>Helmet</h2>
             <div class="index">2</div>
             <h2>Barramundi Fish</h2>
           </div>
-          <lazy-inject>
-            <template slot="lazy">
-              <example-snippet stamp-to="demo-container-2" highlight-as="html">
-                <template>
+          <example-snippet lazy stamp-to="demo-container-2" highlight-as="html">
+            <template>
 <model-viewer
   src="assets/BarramundiFish/glTF-Binary/BarramundiFish.glb"
   alt="A 3D model of a fish depicted within a forest"
   controls auto-rotate
   background-image="assets/whipple_creek_regional_park_04_1k.jpg">
 </model-viewer>
-                </template>
-              </example-snippet>
             </template>
-          </lazy-inject>
+          </example-snippet>
         </div>
       </div>
     </div>
@@ -148,18 +140,34 @@ <h2>Barramundi Fish</h2>
   </div>
 
     <script src="./scripts/helpers.js"></script>
-    <script src="./scripts/lazy-inject.js"></script>
-    <script src="./built/dependencies.js"></script>
-    <script src="../dist/model-viewer.js"></script>
+
+    <!-- Documentation-specific dependencies: -->
+    <script type="module"
+        src="./built/dependencies.js">
+    </script>
+    <script nomodule
+        src="./built/dependencies-legacy.js">
+    </script>
+
+    <!-- Loads <model-viewer> only on modern browsers: -->
+    <script type="module"
+        src="../dist/model-viewer.js">
+    </script>
+
+    <!-- Loads <model-viewer> only on old browsers like IE11: -->
+    <script nomodule
+        src="../dist/model-viewer-legacy.js">
+    </script>
+
     <script>
-        $('#load-examples').addEventListener('click', e => {
+        $('#load-examples').addEventListener('click', function() {
             // Let the button animation play for a moment before
             // replacing the content
 
-            setTimeout(() => {
+            setTimeout(function() {
 
-              const injects = document.querySelectorAll('lazy-inject');
-              injects.forEach(inject => inject.inject());
+              const snippets = document.querySelectorAll('example-snippet');
+              snippets.forEach(function(snippet) { snippet.stamp(); });
 
               $('#hide-before-load').classList.remove('no-show');
               $('.modal').classList.add('no-show');

diff --git a/examples/scripts/lazy-inject.js b/examples/scripts/lazy-inject.js
diff --git a/examples/sources.html b/examples/sources.html
@@ -162,8 +162,24 @@ <h2>Cycling between different models</h2>
     <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
-    <script src="./scripts/helpers.js"></script>
-    <script src="./built/dependencies.js"></script>
-    <script src="../dist/model-viewer.js"></script>
+  <script src="./scripts/helpers.js"></script>
+
+  <!-- Documentation-specific dependencies: -->
+  <script type="module"
+      src="./built/dependencies.js">
+  </script>
+  <script nomodule
+      src="./built/dependencies-legacy.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on modern browsers: -->
+  <script type="module"
+      src="../dist/model-viewer.js">
+  </script>
+
+  <!-- Loads <model-viewer> only on old browsers like IE11: -->
+  <script nomodule
+      src="../dist/model-viewer-legacy.js">
+  </script>
 </body>
 </html>