fixing up the examples

bradwestfall · bradwestfall · commit a10688237055 · 2024-06-19T22:07:54.000-04:00
diff --git a/examples/04-browser-modules/app/favicon.ico b/examples/04-browser-modules/app/favicon.ico
diff --git a/examples/04-browser-modules/app/index.html b/examples/04-browser-modules/app/index.html
@@ -15,7 +15,7 @@ <h1>Browser Modules</h1>
     Also, see the MDN docs on <a target="_blank"
       href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#browser_compatibility">script tags</a>
   </p>
-  <script type="module" src="index.js"></script>
+  <script type="module" async src="index.js"></script>
 </body>
 
 </html>
diff --git a/examples/04-browser-modules/app/sayHi.js b/examples/04-browser-modules/app/sayHi.js
@@ -0,0 +1,3 @@
+export function sayHi() {
+  console.log("Let's bundle this code")
+}
diff --git a/examples/04-browser-modules/app/utils.js b/examples/04-browser-modules/app/utils.js
@@ -1,3 +1,2 @@
-export function sayHi() {
-  console.log("Let's bundle this code")
-}
+import { sayHi } from './sayHi.js'
+export { sayHi }
diff --git a/examples/04-browser-modules/package.json b/examples/04-browser-modules/package.json
@@ -1,6 +1,5 @@
 {
   "name": "browser-modules",
-  "type": "module",
   "scripts": {
     "start": "http-server app -p 3000"
   },
diff --git a/examples/06-bundle-for-browser/app/favicon.ico b/examples/06-bundle-for-browser/app/favicon.ico
diff --git a/examples/06-bundle-for-browser/app/index.html b/examples/06-bundle-for-browser/app/index.html
@@ -9,7 +9,10 @@
 <body>
   <h1>Bundle for the Browser</h1>
   <p>Check the JavaScript console in the browser</p>
-  <script src="build.js"></script>
+  <div>
+    <button id="button">Load Another Bundle</button>
+  </div>
+  <script src="index.js"></script>
 </body>
 
 </html>
diff --git a/examples/06-bundle-for-browser/app/index.js b/examples/06-bundle-for-browser/app/index.js
@@ -1,3 +1,9 @@
 import { sayHi } from './utils.js'
 
 sayHi()
+
+document.getElementById('button').addEventListener('click', () => {
+  import('./other').then((module) => {
+    module.other()
+  })
+})
diff --git a/examples/06-bundle-for-browser/app/other.js b/examples/06-bundle-for-browser/app/other.js
@@ -0,0 +1,3 @@
+export function other() {
+  console.log('other')
+}
diff --git a/examples/06-bundle-for-browser/scripts/run-build.js b/examples/06-bundle-for-browser/scripts/run-build.js
@@ -6,13 +6,17 @@ async function build() {
   await esbuild.build({
     entryPoints: ['app/index.js'],
     bundle: true,
-    outfile: 'build/build.js',
+    outdir: 'build',
     minify: true,
     sourcemap: true,
+    splitting: true,
+    format: 'esm',
   })
 
   await fsPromises.copyFile('app/index.html', 'build/index.html')
+  await fsPromises.copyFile('app/favicon.ico', 'build/favicon.ico')
 }
+
 build()
 
 const watcher = watch(['app/**/*'])

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function sayHi() {`
	`2`	`+ console.log("Let's bundle this code")`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "browser-modules",`
`3`		`- "type": "module",`
`4`	`3`	`"scripts": {`
`5`	`4`	`"start": "http-server app -p 3000"`
`6`	`5`	`},`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function other() {`
	`2`	`+ console.log('other')`
	`3`	`+}`