does not inject script, no live reload.

[trusktr]

Why does it not inject <script> to reload page on changes?

This is the HTML file, and it arrives to the browser un-modified:

<title>&lt;lume-gltf-model&gt;</title>

<style>
	html,
	body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background: white;
		touch-action: none;
	}
</style>

<lume-scene id="scene" perspective="800" webgl fog-mode="linear" fog-near="100" fog-far="500" fog-color="white">
	<lume-ambient-light color="white" intensity="0.4"></lume-ambient-light>

	<lume-camera-rig active initial-distance="200" max-distance="700" min-distance="100">
		<lume-point-light position="200 0 200" intensity="0.7" color="white" slot="camera-child"></lume-point-light>
	</lume-camera-rig>

	<lume-node position="0 1000 0">
		<!--
		FIXME mesh with manual behaviors not working initially. Change the has
		attribute to something else and back, then it works. Code load order
		issue.
		-->
		<!-- <lume-mesh has="shape-geometry phong-material" size="0 0 5" color="white" position="30 0 0" sidedness="double" receive-shadow="false"> -->
		<lume-shape
			size="30 60 5"
			color="red"
			position="-120 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="30 60 10"
			color="red"
			position="-50 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
			fitment="contain"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="30 60 15"
			color="red"
			position="30 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
			fitment="cover"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="30 60 15"
			color="red"
			position="50 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="10 60 15"
			color="red"
			position="100 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="30 10 15"
			color="red"
			position="120 0 0"
			mount-point="0.5 1"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>
	</lume-node>

	<lume-node position="0 10 0" scale="-1 1 1">
		<lume-shape
			size="40 25 5"
			color="red"
			position="-120 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="40 25 10"
			color="red"
			position="-50 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
			fitment="contain"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="40 25 15"
			color="red"
			position="0 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
			fitment="cover"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="40 25 15"
			color="red"
			position="50 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="40 10 15"
			color="red"
			position="100 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>

		<lume-shape
			size="10 25 15"
			color="red"
			position="120 0 0"
			mount-point="0.5 0"
			sidedness="double"
			receive-shadow="false"
			fitment="scale-down"
		>
			<lume-box
				visible="false"
				has="basic-material"
				opacity="0.9"
				size-mode="proportional proportional proportional"
				size="1 1 1"
				wireframe
			></lume-box>
		</lume-shape>
	</lume-node>

	<!-- prettier-ignore -->
	<!-- <test>
		<lume-mesh has="heart-2d-geometry phong-material" size="10 10 34" extrude shape-fit="contain"></lume-mesh>
		<lume-heart-2d size="10 10 34" extrude></lume-heart-2d>

		<lume-mesh has="path-shape-geometry phong-material" size="10 10 34" extrude shape-fit="contain" path="12.1 13, 5.3 16, 17 13"></lume-mesh>
		<lume-path-shape size="10 10 34" extrude shape-fit="contain" path="12.1 13, 5.3 16, 17 13"></lume-path-shape>
	</test> -->
</lume-scene>

<div class="ui">
	<fieldset>
		<legend>Options</legend>
		<label> <input type="checkbox" onchange="updateSize()" />&nbsp; Show size boundaries </label>
		<br />
		<label> <input type="checkbox" onchange="updateBevel()" />&nbsp; Bevel </label>
	</fieldset>
</div>

<script>
	let showSize = false
	const boxes = Array.from(document.querySelectorAll('lume-box'))

	function updateSize() {
		showSize = !showSize
		for (const box of boxes) box.visible = showSize
	}

	let bevel = false
	const hearts = Array.from(document.querySelectorAll('lume-shape'))

	function updateBevel() {
		bevel = !bevel
		console.log(bevel)
		for (const heart of hearts) {
			heart.bevel = bevel
			// if (bevel) heart.setAttribute('bevel', '')
			// else heart.removeAttribute('bevel')
		}
	}
</script>

<style>
	.ui {
		position: absolute;
		margin: 15px;
		padding: 10px;
		top: 0;
		left: 0;
		color: red;
		font-family: sans-serif;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 7px;
	}

	fieldset legend {
		color: red;
	}
	fieldset {
		border-color: red;
		border-radius: 4px;
	}
</style>

<script src="global.js"></script>
<script>
	// Define all the LUME elements with their default names.
	LUME.useDefaultNames()
</script>

[trusktr]

It has a bug. If I use <body> in the HTML file, then it injects the script. But even with the script injected, it does not reload on file change.