[HELP] Bundling via esbuild produces Runtime Error.

[LePichu]

I had this problem a few weeks ago and it seems that this one rather extends off of that one. This time, I am bundling multiple components via one file.

• material3.ts:

import "./Counter.tsx"
import "./HelloWorld.tsx"

• Counter.tsx:

import { Component, customElement, property, listen, h, Fragment } from "@chialab/dna"

@customElement("counter")
export class Counter extends Component {
    @property() time = 0
    
    render() {
        return <>
            <h1 id="counter">{this.time}</h1>
        </>
    }
    @listen("click", "#counter")
    function (event: Event, target: HTMLInputElement) {
        this.time += 1
    }
}

• HelloWorld.tsx:

import { Component, customElement, property, listen, h, Fragment } from "@chialab/dna"

@customElement("hello-world")
export class HelloWorld extends Component {
    @property() name = ""

    render() {
        return <>
            <input name="firstName" value={this.name} />
            <h1>Hello {this.name || "World"}!</h1>
        </>
    }

    @listen("input", "input[name='firstName']")
    function (event: Event, target: HTMLInputElement) {
        this.name = target.value
    }
}

Buildscript:

import { build, PluginBuild, BuildResult } from "esbuild"
import { httpImports } from "esbuild_plugin_http_imports"
import { load, plugin } from "esbuild_plugin_import_map"

load(JSON.parse(Deno.readTextFileSync("./import_map.json")))

const watcher = Deno.args.join(" ").match("--watch") ? true : false

const exitOnBuild = {
    name: "close-on-complete",
    setup(build: PluginBuild) {
        build.onEnd((result: BuildResult) => {
            console.log("Finished Complete Building!")
            Deno.exit(result.errors.length >= 1 ? 1 : 0)
        })
    }
}

await build({
    entryPoints: [
        "platforms/material3/material3.ts"
    ],
    outdir: "dist",
    bundle: true,
    platform: "browser",
    format: "esm",
    target: "esnext",
    plugins: [
        plugin()
    ],
    tsconfig: "deno.json",
    minify: true,
    treeShaking: true,
    watch: watcher
})

await build({
    entryPoints: [
        "dist/material3.js"
    ],
    outdir: "build",
    bundle: true,
    platform: "browser",
    format: "esm",
    target: "esnext",
    allowOverwrite: true,
    plugins: [
        exitOnBuild,
        httpImports({
            defaultToJavascriptIfNothingElseFound: true
        })
    ],
    tsconfig: "deno.json",
    minify: true,
    treeShaking: true,
    watch: watcher    
})

Deno configuration:

{
    "compilerOptions": {
        "lib": [
            "deno.window"
        ],
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment",
        "useDefineForClassFields": false
    },
    "tasks": {
        "serve": "",
        "build": "deno run --allow-write --allow-read --allow-net --allow-env --allow-run src/build.ts",
        "dev": "",
        "tailwind:build": "",
        "tailwind:dev": ""
    },
    "importMap": "import_map.json"
}

This all seems to bundle until I run it in a browser, and then, I am hit with this error:

This is the produced output:

• https://hastebin.com/jucameqaqo.js

Now, if I take out import "Counter.tsx" from material3.ts, this works properly in browser too. @edoardocavazza any clue why this happens?

[edoardocavazza]

Hello @LePichu. Please note that DNA is built on Custom Elements standard. Custom Elements names must include an hyphen as described here.

Try this instead:

-@customElement("counter")
+@customElement("app-counter")

[LePichu]

Hello @LePichu. Please note that DNA is built on Custom Elements standard. Custom Elements names must include an hyphen as described here.

Try this instead:

-@customElement("counter")
+@customElement("app-counter")

Thank you, that stops the error and it works now, while at it, is there any way to make a timer component of sorts which updates every millisecond and shows the time precisely? We have useEffect() in React for this and I was wondering if an equivalent existed here too.

[edoardocavazza]

There are two ways to trigger a component re-render:

1. update a component property:

@customElement('app-counter')
class Counter extends Component {
  @property() currentTime: number;

  render() {
    return new Date(this.currentTime).toLocaleString();
  }

  connectedCallback() {
    super.connectedCallback();
    this.interval = setInterval(() => {
      this.currentTime = Date.now();
    }, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.interval);
  }
}

2. Use the this.forceUpdate() method:

@customElement('app-counter')
class Counter extends Component {
  render() {
    return new Date(this.currentTime ?? Date.now()).toLocaleString();
  }

  connectedCallback() {
    super.connectedCallback();
    this.interval = setInterval(() => {
      this.currentTime = Date.now();
      this.forceUpdate();
    }, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.interval);
  }
}

[LePichu]

Late reply but damn, that is so much better than React for some reason. Thanks!