feat(next/swc): support experimental swc plugins #36790

kwonoj · 2022-05-09T21:21:01Z

This PR enables experimental plugin support to next/swc. SWC-compatible plugins (i.e https://github.com/swc-project/plugins) can be loaded transparently into next-swc with new experimental configuration options.

Currently, next/swc enables multiple custom transform @core/swc doesn't support. It is based on using compile-time custom pass provided in swc's rust api. Users may not able to configure their own custom behavior or experiment dynamically unless core next.js include those features in the new release.

This feature in contrast, allows to configure runtime / dynamic way to specify custom transform behavior without rebuilding whole next/swc binary. New experiments, or user internal custom transformation which is not suitable for the core next.js can be enabled using this.

Configuring plugin is currently transparent to the core swc's config itself. It is likely possible @swc/core to have changes to the config interface as it's not clearly straightforward.

// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      ['plugin', {
        ..pluginOptions
      }]
    ]
  }
}

First element to the tuple points paths to the plugin - it can be either npm package name (if package.json's main field resolves to plugin binary) or absolute path the to .wasm. Second element is an option for configuring plugin.

Note wasm target (next-swc/wasm) does not support plugins yet: there is a tracking effort in upstream to support this. (swc-project/swc#3934)

Existing custom pass vs. plugin

As mentioned, next/swc already have numbers of custom transform passes overlaps to the plugin. Internally, both shares nearly identical visitor implementations - for example, #36692 uses custom pass but plugins for the @swc/core uses exact same visitor (https://github.com/kwonoj/swc-coverage-instrument/tree/main/packages/swc-coverage-instrument). The only difference is if it uses entrypoint for the plugin or not.

This means,

next/swc, and core next.js may not need to change way to enable custom transform.
Internal visitor implementation can be shared across, so maybe next.js custom transform can be publihsed as plugin as well (which swc-project/plugins does for some already)
Users for their application, or if some core experiment in next/swc needed without rebuilding whole, they can use plugins instead.

TL:DR plugins are more user-level, custom passes are for core next.js as-is.

Related to #34384.

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

ijjk · 2022-05-09T21:47:13Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
buildDuration	16.2s	16.2s	⚠️ +22ms
buildDurationCached	6.5s	6.4s	-35ms
nodeModulesSize	626 MB	626 MB	⚠️ +597 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.025	4.108	⚠️ +0.08
/ avg req/sec	621.11	608.6	⚠️ -12.51
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.39	1.419	⚠️ +0.03
/error-in-render avg req/sec	1798.79	1762	⚠️ -36.79

Client Bundles (main, webpack)

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	73 kB	73 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.74 kB	5.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	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	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
buildDuration	18.3s	18.4s	⚠️ +123ms
buildDurationCached	6.4s	6.4s	⚠️ +54ms
nodeModulesSize	626 MB	626 MB	⚠️ +597 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.076	4.036	-0.04
/ avg req/sec	613.3	619.42	+6.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.385	1.372	-0.01
/error-in-render avg req/sec	1805.37	1822.45	+17.08

Client Bundles (main, webpack)

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.7 kB	29.7 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	74 kB	74 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.9 kB	2.9 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.84 kB	5.84 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.4 kB	16.4 kB	✓

Client Build Manifests

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	kwonoj/next.js feat-swc-experimental-plugin	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	529 B	529 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 5577efa

kwonoj · 2022-05-10T00:02:23Z

@Brooooooklyn may I able to ask some help to resolve CI failure? It passes native build CI job, but dependent tasks are failing to load binaries.

ijjk · 2022-05-10T16:32:41Z

Failing test suites

Commit: e4b6438

yarn testheadless test/integration/async-modules/test/index.test.js

Async modules > serverless mode > can render async AMP pages

Expand output

● Async modules › serverless mode › can render async AMP pages

TIMED OUT: just now

10 seconds ago

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at Object.<anonymous> (integration/async-modules/test/index.test.js:85:7)

Read more about building and testing Next.js in contributing.md.

padmaia · 2022-05-13T22:02:49Z

docs/advanced-features/compiler.md

@@ -316,6 +316,42 @@ This transform uses [handlebars](https://docs.rs/handlebars) to template the rep
 2. `member`: Has type `string`. The name of the member import.
 3. `lowerCase`, `upperCase`, `camelCase`: Helper functions to convert a string to lower, upper or camel cases.

+### SWC Trace profiling


Is this a separate feature? Thought I remembered a different PR for this one.

Yes, it's a separate feature and forgot to update docs then included in this PR. If it's required, can split PR into another. (feature is already in, only docs are missing)

docs/advanced-features/compiler.md

Co-authored-by: Maia Teegarden <[email protected]>

jantimon · 2022-05-31T12:20:08Z

wow 🤩 thank you @padmaia & @kwonoj

kwonoj requested review from timneutkens, ijjk, shuding, padmaia, huozhi, styfle, leerob and balazsorban44 as code owners May 9, 2022 21:21

ijjk added area: documentation type: next labels May 9, 2022

kwonoj mentioned this pull request May 9, 2022

feat(next/swc): support experimental coverage instrument #36692

Closed

10 tasks

kwonoj force-pushed the feat-swc-experimental-plugin branch 5 times, most recently from 9032fd5 to 5655ae8 Compare May 9, 2022 23:28

luixo mentioned this pull request May 10, 2022

Refactor proposal: simpler variables near/near-explorer#968

Merged

kwonoj force-pushed the feat-swc-experimental-plugin branch 2 times, most recently from 1754bab to 09d6c08 Compare May 10, 2022 16:12

kwonoj force-pushed the feat-swc-experimental-plugin branch from 09d6c08 to d288e65 Compare May 10, 2022 19:13

padmaia reviewed May 13, 2022

View reviewed changes

kwonoj force-pushed the feat-swc-experimental-plugin branch 5 times, most recently from 766cb21 to a711c22 Compare May 17, 2022 19:53

padmaia mentioned this pull request May 20, 2022

Enable Wasm plugins #37063

Closed

6 tasks

kwonoj force-pushed the feat-swc-experimental-plugin branch 2 times, most recently from e4b6438 to 0e6e5ca Compare May 23, 2022 22:57

kwonoj added 5 commits May 24, 2022 10:56

build(cargo): build swc with plugin support

883be3d

feat(next): expose experimental swcplugins config

bf3d923

docs(compiler): add description

8d76b67

build(cargo): resolve feature conflicts

37dad3b

build(cargo): resolve build conflict

65522ba

kwonoj force-pushed the feat-swc-experimental-plugin branch from 0e6e5ca to 65522ba Compare May 24, 2022 17:59

padmaia reviewed May 24, 2022

View reviewed changes

docs/advanced-features/compiler.md Outdated Show resolved Hide resolved

kwonoj and others added 2 commits May 24, 2022 11:35

Update docs/advanced-features/compiler.md

150724a

Co-authored-by: Maia Teegarden <[email protected]>

Merge branch 'canary' into feat-swc-experimental-plugin

08c619f

padmaia approved these changes May 24, 2022

View reviewed changes

padmaia added 2 commits May 25, 2022 14:30

Merge branch 'canary' into feat-swc-experimental-plugin

00a6d3d

Merge branch 'canary' into feat-swc-experimental-plugin

5577efa

padmaia merged commit fc61428 into vercel:canary May 26, 2022

kwonoj deleted the feat-swc-experimental-plugin branch May 27, 2022 21:57

github-actions bot locked as resolved and limited conversation to collaborators Jul 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(next/swc): support experimental swc plugins #36790

feat(next/swc): support experimental swc plugins #36790

kwonoj commented May 9, 2022 •

edited

Loading

ijjk commented May 9, 2022 •

edited

Loading

kwonoj commented May 10, 2022

ijjk commented May 10, 2022 •

edited

Loading

padmaia May 13, 2022

kwonoj May 13, 2022

jantimon commented May 31, 2022

feat(next/swc): support experimental swc plugins #36790

feat(next/swc): support experimental swc plugins #36790

Conversation

kwonoj commented May 9, 2022 • edited Loading

Existing custom pass vs. plugin

Bug

Feature

Documentation / Examples

ijjk commented May 9, 2022 • edited Loading

Stats from current PR

kwonoj commented May 10, 2022

ijjk commented May 10, 2022 • edited Loading

Failing test suites

padmaia May 13, 2022

Choose a reason for hiding this comment

kwonoj May 13, 2022

Choose a reason for hiding this comment

jantimon commented May 31, 2022

kwonoj commented May 9, 2022 •

edited

Loading

ijjk commented May 9, 2022 •

edited

Loading

ijjk commented May 10, 2022 •

edited

Loading