LIT decorators

[Anmo]

Hi,

I was trying the experimental playwright with your web components implementation, but I got some errors regarding decorators

Error: [path]: Support for the experimental syntax 'decorators' isn't currently enabled ([position]):

> [line] | @customElement(

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

Is there a way to specify a babel plugin in the configuration? Or should this modules do it by default?

[sand4rt]

@Anmo thanks again for creating the issue! Does the Vite Babel plugin works for you?:

https://www.npmjs.com/package/vite-plugin-babel

import { defineConfig } from '@sand4rt/experimental-ct-web';
import babel from 'vite-plugin-babel';

export default defineConfig({
  use: {
    ctViteConfig: {
      plugins: [
        babel({
          babelConfig: { plugins: ['@babel/plugin-proposal-decorators'] }
        })
      ]
    },
  },
});

[Anmo]

I will try this, hope today, and report back, anyway, thanks for the fast reply :)

[sand4rt]

I assume this has been resolved. Feel free to create a new issue when needed.

[NicoVogel]

@sand4rt
I have a related issue.
The error I am getting:

SyntaxError: /nx-lit-vite/libs/components/src/lib/my-component.ts: Decorators must be placed *after* the 'export' keyword. Remove the 'decoratorsBeforeExport: false' option to use the '@decorator export class {}' syntax. (14:0)

The code can be found here: https://github.com/NicoVogel/nx-lit-vite/tree/feat/playwright-component-testing
In the directory: libs/components

But here are the relevant snippets:

// my-component.ts
@customElement('my-component')
export class MyComponent extends LitElement {
  // ...
}

/// <reference types="vitest" />
import { defineConfig, devices } from '@sand4rt/experimental-ct-web';

import babel from 'vite-plugin-babel'

export default defineConfig({
  testDir: 'src',
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
    ctViteConfig: {
      // https://babeljs.io/docs/babel-plugin-proposal-decorators
      // https://stackoverflow.com/questions/66032589/the-decorators-plugin-requires-a-decoratorsbeforeexport-option
      plugins: [
        babel({
          babelConfig: {
            plugins: ['@babel/plugin-proposal-decorators', {version: "legacy"}]
          }
        })
      ]
    }
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

I already tried to fix it with passing the custom babel config, but it does not seem to care when I change these settings...
Maybe @nx:playwright overrules here something, but I wanted to post the issue here non the less

[sand4rt]

@NicoVogel thanks for reporting.

I think this has something to do with your monorepo / nx setup. It works as expected when i:

1. install "@playwright/test": "^1.37.1" and "@sand4rt/experimental-ct-web": "^1.37.1" inside "@myorg/components"
2. remove the import '../src' inside playwright/index.ts
3. remove the babel vite-plugin-babel
4. run npx playwright test inside "@myorg/components"

It seems that the components are not being built when the tests are executed with nx, hence you see the error about the decorators :/