Add decoratorMetadata flag if enabled by tsconfig #32914

sannajammeh · 2021-12-31T01:21:44Z

fixes #32913
Adds support for decorator metadata in SWC when enabled through ts/jsconfig.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

egoist · 2022-01-01T11:02:33Z

Maybe also add a keepClassNames option? It's often used with decorator metadata: swc-project/swc#1656

sannajammeh · 2022-01-04T08:49:22Z

Maybe also add a keepClassNames option? It's often used with decorator metadata: swc-project/swc#1656

I agree, enabling keepClassNames would be ideal. However, according to SWC, this requires the target to be ES2016 or upper.

@storyofams/next-api-decorators, class-validator, and class-transformer work fine with keepClassNames disabled. TypeOrm does not when using string-based reference rather than object reference.

timneutkens

This is missing an integration test to verify that the change works.

abriginets · 2022-01-14T00:37:16Z

@sannajammeh I've prepared integration tests for you but for some reason I can't push my changes to your PR here. Will you be so kind and add them to this PR?

test/development/basic/emit-decorator-metadata.test.ts

import { join } from 'path'
import webdriver from 'next-webdriver'
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import { BrowserInterface } from 'test/lib/browsers/base'

describe('emitDecoratorMetadata SWC option', () => {
  let next: NextInstance

  beforeAll(async () => {
    next = await createNext({
      files: {
        'jsconfig.json': new FileRef(
          join(__dirname, 'emit-decorator-metadata/jsconfig.json')
        ),
        pages: new FileRef(join(__dirname, 'emit-decorator-metadata/pages')),
      },
    })
  })

  afterAll(() => next.destroy())

  it('should compile with emitDecoratorMetadata enabled', async () => {
    let browser: BrowserInterface;
    try {
      browser = await webdriver(next.appPort, '/')
      const message = await browser.elementByCss('#message').text()

      expect(message).toBe('Hello, world!')
    } finally {
      if (browser) {
        await browser.close()
      }
    }
  })
})

test/development/basic/emit-decorator-metadata/jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "jsx":"preserve"
    },
}

test/development/basic/emit-decorator-metadata/pages/index.tsx

import React from 'react';
import 'reflect-metadata';
import { container, singleton } from 'tsyringe';

@singleton()
export class HelloService {
    getHello() {
        return 'Hello, world!';
    }
}

const helloService = container.resolve(HelloService);

export default function Home() {
    const message = helloService.getHello();
    
    return <p id="message">{message}</p>;
}

Also you need to add tsyringe and reflect-metadata as dev dependencies with the following command:

yarn add reflect-metadata tsyringe -D -W

boredland · 2022-01-18T20:16:58Z

this would be quite awesome when added! thanks so much for your work!

sannajammeh · 2022-01-20T07:47:24Z

@abriginets Appreciate these you adding these tests! I have added them to this PR.

timneutkens

Looks fine to land now if it passes the tests, thanks!

sannajammeh · 2022-01-20T09:51:50Z

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)

This seems to be the only issue currently. Not sure what is causing it as the legacy-decorators test uses the same method without presenting a parser issue.

timneutkens · 2022-01-20T10:24:50Z

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)
This seems to be the only issue currently. Not sure what is causing it as the legacy-decorators test uses the same method without presenting a parser issue.

I'm assuming it's Eslint

boredland · 2022-01-20T11:16:51Z

This seems to be the only issue currently. Not sure what is causing it as the legacy-decorators test uses the same method without presenting a parser issue.

I'm assuming it's Eslint

I guess this is due to eslint using babel as a parser under the hood, isn't it? shouldn't we then be able to add sth like along the lines of this to the eslint config?

"parserOptions": {
    ...
    "babelOptions": {
      "plugins":  ["@babel/plugin-proposal-decorators", { "legacy": true }],
    },
  },

abriginets · 2022-01-20T15:56:36Z

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (5:0)
This seems to be the only issue currently. Not sure what is causing it as the legacy-decorators test uses the same method without presenting a parser issue.

If it's eslint that is not satisfied with the code you should just add a comment to eslint-ignore it. I'm not sure what Next.js team's opinion is about ignoring linter issues but we do it all the time as long as those issues occurs in test files and not in the actual runtime codebase.

timneutkens · 2022-01-21T11:33:42Z

The particular file can be eslint ignored as it's a test file. Main question this raises for me is if the eslint integration in Next.js will error on this as well 🤔

sannajammeh · 2022-01-24T16:17:57Z

The particular file can be eslint ignored as it's a test file. Main question this raises for me is if the eslint integration in Next.js will error on this as well 🤔

Not sure. I have been running decorators with Next JS 12 without SWC and faced no linter issues.
Should be ok to just ignore the file.

boredland · 2022-01-24T16:22:24Z

Not sure. I have been running decorators with Next JS 12 without SWC and faced no linter issues.
Should be ok to just ignore the file.

I can confirm this. Using decorators with a custom babel config rn without an eslint issue (or any special config there).

Had to turn off SWC compilation in next.js. Should be fixed in vercel/next.js#32914 Added some babel plugins needed for decoratorMetadata emit Workaround for DB connection failure when dealing with HMR in dev mode Workaround for loading Entity classes (has to have ormconfig.js config overridden in app to get around dynamic import which was causing all sorts of issues with JS module loading)

sannajammeh · 2022-02-01T00:16:31Z

Is any movement possible here?

# Conflicts: # package.json

ijjk · 2022-02-06T16:29:20Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
buildDuration	15.3s	15.5s	⚠️ +131ms
buildDurationCached	6s	6s	-20ms
nodeModulesSize	359 MB	359 MB	⚠️ +543 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.179	3.222	⚠️ +0.04
/ avg req/sec	786.3	775.82	⚠️ -10.48
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.328	1.353	⚠️ +0.02
/error-in-render avg req/sec	1881.83	1847.93	⚠️ -33.9

Client Bundles (main, webpack, commons)

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.4 kB	27.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.2 kB	71.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.94 kB	4.94 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
buildDuration	18.7s	19s	⚠️ +241ms
buildDurationCached	6s	6s	-14ms
nodeModulesSize	359 MB	359 MB	⚠️ +543 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.174	3.172	0
/ avg req/sec	787.6	788.19	+0.59
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.324	1.315	-0.01
/error-in-render avg req/sec	1888.56	1900.5	+11.94

Client Bundles (main, webpack, commons)

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.4 kB	27.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.97 kB	4.97 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.21 kB	2.21 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	sannajammeh/next.js add/emit-decorator-metadata	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 9b9190a

ijjk

Thanks for the PR!

fixes vercel#32913 Adds support for decorator metadata in SWC when enabled through ts/jsconfig. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

Add decoratorMetadata flag if enabled by tsconfig

2a43ff0

sannajammeh requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners December 31, 2021 01:21

ijjk added the type: next label Dec 31, 2021

sannajammeh changed the title ~~Fixes #32913 - Add decoratorMetadata flag if enabled by tsconfig~~ fixes #32913 - Add decoratorMetadata flag if enabled by tsconfig Dec 31, 2021

sannajammeh changed the title ~~fixes #32913 - Add decoratorMetadata flag if enabled by tsconfig~~ Add decoratorMetadata flag if enabled by tsconfig Dec 31, 2021

sannajammeh mentioned this pull request Dec 31, 2021

Using @Param or @Query causes handler to throw error due to missing Reflect metadata for "design:paramtypes" instantcommerce/next-api-decorators#320

Closed

lucalves previously approved these changes Jan 1, 2022

View reviewed changes

Merge branch 'canary' into add/emit-decorator-metadata

74c402f

This comment has been minimized.

Sign in to view

timneutkens requested changes Jan 13, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

test: Add integration tests

59ca175

sannajammeh dismissed lucalves’s stale review via 59ca175 January 20, 2022 07:31

sannajammeh added 3 commits January 20, 2022 08:41

Merge canary of https://github.com/vercel/next.js into vercel-canary

24264fe

Merge branch 'vercel-canary' into add/emit-decorator-metadata

9078cdc

deps: Resolve conflict

2e567d3

sannajammeh requested a review from timneutkens January 20, 2022 07:48

fix(test): Correctly add dependencies

67c83c0

timneutkens previously approved these changes Jan 20, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

lint: Add test files to eslint ignore

4c15ddc

sannajammeh dismissed timneutkens’s stale review via 4c15ddc January 24, 2022 16:23

Merge branch 'canary' into add/emit-decorator-metadata

3ce1021

sannajammeh requested review from timneutkens January 25, 2022 02:44

casperiv0 mentioned this pull request Feb 4, 2022

Next 12 SWC Support instantcommerce/next-api-decorators#356

Closed

ijjk added 3 commits February 6, 2022 09:33

Merge branch 'canary' into add/emit-decorator-metadata

a55138a

# Conflicts: # package.json

remove extra deps

e7eef74

update test

9b9190a

ijjk approved these changes Feb 6, 2022

View reviewed changes

kodiakhq bot merged commit e0c7794 into vercel:canary Feb 6, 2022

HeadFox mentioned this pull request Feb 10, 2022

SWC compatibility inversify/InversifyJS#1403

Open

github-actions bot locked as resolved and limited conversation to collaborators Mar 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add decoratorMetadata flag if enabled by tsconfig #32914

Add decoratorMetadata flag if enabled by tsconfig #32914

sannajammeh commented Dec 31, 2021 •

edited

egoist commented Jan 1, 2022

sannajammeh commented Jan 4, 2022 •

edited

This comment has been minimized.

timneutkens left a comment •

edited

abriginets commented Jan 14, 2022

This comment has been minimized.

boredland commented Jan 18, 2022 •

edited

sannajammeh commented Jan 20, 2022

timneutkens left a comment •

edited

This comment has been minimized.

sannajammeh commented Jan 20, 2022

timneutkens commented Jan 20, 2022

boredland commented Jan 20, 2022 •

edited

abriginets commented Jan 20, 2022 •

edited

timneutkens commented Jan 21, 2022

sannajammeh commented Jan 24, 2022

boredland commented Jan 24, 2022

sannajammeh commented Feb 1, 2022

ijjk commented Feb 6, 2022

ijjk left a comment

Add decoratorMetadata flag if enabled by tsconfig #32914

Add decoratorMetadata flag if enabled by tsconfig #32914

Conversation

sannajammeh commented Dec 31, 2021 • edited

Bug

Feature

Documentation / Examples

egoist commented Jan 1, 2022

sannajammeh commented Jan 4, 2022 • edited

This comment has been minimized.

timneutkens left a comment • edited

Choose a reason for hiding this comment

abriginets commented Jan 14, 2022

This comment has been minimized.

boredland commented Jan 18, 2022 • edited

sannajammeh commented Jan 20, 2022

timneutkens left a comment • edited

Choose a reason for hiding this comment

This comment has been minimized.

sannajammeh commented Jan 20, 2022

timneutkens commented Jan 20, 2022

boredland commented Jan 20, 2022 • edited

abriginets commented Jan 20, 2022 • edited

timneutkens commented Jan 21, 2022

sannajammeh commented Jan 24, 2022

boredland commented Jan 24, 2022

sannajammeh commented Feb 1, 2022

ijjk commented Feb 6, 2022

Stats from current PR

ijjk left a comment

Choose a reason for hiding this comment

sannajammeh commented Dec 31, 2021 •

edited

sannajammeh commented Jan 4, 2022 •

edited

timneutkens left a comment •

edited

boredland commented Jan 18, 2022 •

edited

timneutkens left a comment •

edited

boredland commented Jan 20, 2022 •

edited

abriginets commented Jan 20, 2022 •

edited