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.