nfreear · October 2, 2022 10:14
diff --git a/import-test.js.html b/import-test.js.html
 <!doctype html> <title> Import tests </title>

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
     crossorigin=""/>

 <style>
  #map { x-height: 180px; height: 72vh; }
  button { font-size: inherit; padding: .5rem 1rem; }
 </style>

 <h1> Import tests </h1>

 <p>Loading non-module Javascripts using <tt>import()</tt>.</p>


 <article id="map" aria-label="My map"></article>


 <script type="module">
 (async () => {
  // Import non-module JS for side-effects ('M' is empty).
  const M = await import('https://unpkg.com/[email protected]/dist/leaflet.js');
  const E = await import('./import-test.mjs');

  const { L } = window;

  console.debug('Import:', E, M, L);

  const map = L.map('map').setView([51.505, -0.09], 13);

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
 })();
 </script>


 <p><button id="start-button">Start</button></p>


 <script data-X-type="module">
 const BTN = document.querySelector('#start-button');

 BTN.addEventListener('click', async (ev) => {
  // Import non-module JS for side-effects ('M' is empty).
  const M = await import('https://unpkg.com/[email protected]/build/Tone.js');

  const { Tone } = window;

  console.debug('Tone:', M, Tone);

  const synth = new Tone.Synth().toDestination();

  // play a middle 'C' for the duration of an 8th note
  synth.triggerAttackRelease("C4", "8n");
 });
 </script>



 <pre>


 NDF, 02-Oct-2022.

 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
 * https://leafletjs.com/
 * https://tonejs.github.io/

 </pre>
	<!doctype html> <title> Import tests </title>

	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
	integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
	crossorigin=""/>

	<style>
	#map { x-height: 180px; height: 72vh; }
	button { font-size: inherit; padding: .5rem 1rem; }
	</style>

	<h1> Import tests </h1>

	<p>Loading non-module Javascripts using <tt>import()</tt>.</p>


	<article id="map" aria-label="My map"></article>


	<script type="module">
	(async () => {
	// Import non-module JS for side-effects ('M' is empty).
	const M = await import('https://unpkg.com/[email protected]/dist/leaflet.js');
	const E = await import('./import-test.mjs');

	const { L } = window;

	console.debug('Import:', E, M, L);

	const map = L.map('map').setView([51.505, -0.09], 13);

	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	L.marker([51.5, -0.09]).addTo(map)
	.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
	.openPopup();
	})();
	</script>


	<p><button id="start-button">Start</button></p>


	<script data-X-type="module">
	const BTN = document.querySelector('#start-button');

	BTN.addEventListener('click', async (ev) => {
	// Import non-module JS for side-effects ('M' is empty).
	const M = await import('https://unpkg.com/[email protected]/build/Tone.js');

	const { Tone } = window;

	console.debug('Tone:', M, Tone);

	const synth = new Tone.Synth().toDestination();

	// play a middle 'C' for the duration of an 8th note
	synth.triggerAttackRelease("C4", "8n");
	});
	</script>



	<pre>


	NDF, 02-Oct-2022.

	* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
	* https://leafletjs.com/
	* https://tonejs.github.io/

	</pre>