marko-js / marko

A declarative, HTML-based language that makes building web apps fun

Home Page:https://markojs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`onInput` is not running when it is used in `component-browser.ts`

AndresBarreto-code opened this issue · comments

Marko Version: @5.29.2

Details

I have created a component that has a component-browser.ts file and an index.marko file. This is a pure logic component, so the index.marko file could be empty. However, I tried to create the file as follows and it does not work:

import * as Sentry from "@sentry/browser";
// Input intefarce and so on.
...
export default class extends Marko.Component<Input, Input> {
  onInput() {
    // This is not running.
    console.log("onInput")
    ...
  }
  onMount() {
    console.log("onMount")
    ...
  }
}

Expected Behavior

I was expecting the onInput function to run as usual. The index.marko file only has this function and it could be unnecessary.

Actual Behavior

onInput is not running when it is in component-browser.ts.

Additional Info

Your Environment

  • Chrome 115.0.5790.173, node v18.15.0.
  • Windows 11.

Steps to Reproduce

Create a component using component-browser.ts with the following code:

import * as Sentry from "@sentry/browser";
interface Input {
 name: string
}
export default class extends Marko.Component<Input, Input> {
 onInput(input: Input) {
   // This is not running.
   console.log("onInput")
   this.sate = { ...input };
 }
 onMount() {
   console.log("onMount")
   // The following will be undefined or throw an error.
   console.log(this.state.name)
 }
}

@AndresBarreto-code this is expected behavior, the component-browser.js will only go through a subset of events when it is a top level server component (namely onMount) since it does not rerender to hydrate in the browser like a template with a normal component.js.