Component not being rendered with Vite + preact-ts template

[arieshi255]

Using plugins: [ preact() ] in vite.config.js

Tried to create a basic component, as shown in the guide:

import {controller} from '@github/catalyst';

@controller
class TestThingElement extends HTMLElement {

  connectedCallback() {
    this.innerHTML = 'Hello World!';
  }
}

Then use it from HTML:

<test-thing></test-thing>

Nothing gets rendered on the page, and there's no errors. However, if I don't use the @controller decorator, or if I remove the preact plugin, it does work. I looked at the transpiled code and noticed this:

let TestThingElement = controller(_class = class TestThingElement2 extends HTMLElement {

Any idea what's going on here? I assume this is causing problems with how Catalyst uses the class name to determine the custom element tag.

[keithamus]

Looks like the transpile step might be causing issues with the class name. You can add the following to see if it is a problem:

import {controller} from '@github/catalyst';

@controller
class TestThingElement extends HTMLElement {

  static get name() {
    return 'TestThingElement'
  }

  connectedCallback() {
    this.innerHTML = 'Hello World!';
  }
}

The static get name is a way to ensure your class has the right name. It's not ideal but it can work around some transpiler issues. Let me know if the above code works for you. If it does it's likely an issue with the transpiler changing the name.

I'm not super familiar with Vite so unfortunately I can't tell you if there's some configuration option to enable to get it to not change the class name. But at least if we can pin it down to that we might be able to figure out what to do next.

[arieshi255]

Yeah, that definitely solves my issue. Certainly not ideal having to add that everywhere, but at least that's the problem.

[keithamus]

What does your Vite configuration look like?

[arieshi255]

export default defineConfig({
  server: {
    proxy: {
      '*' : {
        target: 'http://localhost:5228',
        changeOrigin: true
      }
    }
  },
  esbuild: {
    keepNames: true,
  },
  optimizeDeps: {
    esbuildOptions: {
      keepNames: true,
    },
  },
  build: {
    target: [
      'esnext'
    ],
    manifest: true,
    rollupOptions: {
      input: {
        app: resolve(__dirname, 'src/js/app.ts'),
        playground: resolve(__dirname, 'src/js/playground.tsx')
      },
      external: ['preact'],
      output: {
        globals: {
          preact: 'Preact',
        },
      },
    },
  },
  plugins: [
    preact({
      babel: {
        babelrc: true,
        parserOpts: {
          plugins: ['decorators-legacy'],
        },
        presets: [
          '@babel/preset-typescript'
        ],
        plugins: [
          ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
          ['@babel/plugin-proposal-decorators', { version: "legacy" }],
          "@babel/plugin-proposal-private-methods",
          "@babel/plugin-proposal-private-property-in-object",
          '@babel/plugin-proposal-class-properties'
        ]
      }
    }),
    tsconfigPaths()
  ],
})

[arieshi255]

I've tried messing with the babel plugins, hasn't really helped yet.

[keithamus]

You could try removing Babel. esbuild should be able to transform any stage 4 features, as well as decorators and jsx, so Babel shouldn't be needed.

[arieshi255]

Not sure how, to be honest. The preact plugin doesn't really have an option for it.