Enable Wasm plugins #37063

martindisch · 2022-05-20T11:48:21Z

Many people would love to take advantage of SWC and have even begun porting some Babel plugins to WebAssembly in order to use it in their projects. This PR enables SWC's experimental plugin system so it can be used in Next.js.

Thanks @kdy1 for the support.

Usage

In next.config.js add the list of plugins (in this case loaded from a package) with their options.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [
      [require.resolve("css-variable/swc"), { displayName: true }]
    ]
  }
}
module.exports = nextConfig

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

fixes #34384 #30212

Since features are additive it's not technically necessary to do it for every usage, but it seems more correct to keep them all the same. This causes an issue with js-sys since it's locked to 0.3.49 but wasmer requires ^0.3.51.

This gets rid of the js-sys issue but introduces language features that can't be used with the overridden toolchain nightly-2022-02-23.

This allows for compilation, now we're running into the issue that wasmer-vfs requires either host-fs or mem-fs feature to be enabled.

This fixes our features issue but should be properly solved in swc.

ijjk · 2022-05-20T14:10:35Z

Failing test suites

Commit: 7056b9b

yarn testheadless test/integration/cli/test/index.test.js

CLI Usage > info > should print output

Expand output

● CLI Usage › info › should print output

expect(received).toBe(expected) // Object.is equality

Expected: ""
Received: "warn  - Latest canary version not detected, detected: \"12.1.7-canary.10\", newest: \"12.1.7-canary.9\".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
"

  496 |       // warning will show so skip this check for the stable release
  497 |       if (pkg.version.includes('-canary')) {
> 498 |         expect(info.stderr || '').toBe('')
      |                                   ^
  499 |       }
  500 |       expect(info.stdout).toMatch(
  501 |         new RegExp(`

  at Object.<anonymous> (integration/cli/test/index.test.js:498:35)

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

yarn testheadless test/development/acceptance/ReactRefreshLogBox.test.ts

ReactRefreshLogBox > logbox: can recover from a syntax error without losing state

Expand output

● ReactRefreshLogBox › logbox: can recover from a syntax error without losing state

expect(received).toMatchSnapshot()

Snapshot name: `ReactRefreshLogBox logbox: can recover from a syntax error without losing state 1`

- Snapshot  - 1
+ Received  + 0

  ./index.js
  Error: 
    x Unexpected eof
     ,----
   1 | export default () => <div/
-    :                           ^
     `----

  Caused by:
      0: failed to process input file
      1: Syntax Error

  45 |
  46 |     expect(await session.hasRedbox(true)).toBe(true)
> 47 |     expect(await session.getRedboxSource()).toMatchSnapshot()
     |                                             ^
  48 |
  49 |     await session.patch(
  50 |       'index.js',

  at Object.<anonymous> (development/acceptance/ReactRefreshLogBox.test.ts:47:45)

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

ijjk · 2022-05-20T14:13:09Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
buildDuration	16.1s	16s	-108ms
buildDurationCached	6.1s	6.3s	⚠️ +211ms
nodeModulesSize	595 MB	595 MB	⚠️ +428 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.878	3.803	-0.08
/ avg req/sec	644.69	657.38	+12.69
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.368	1.37	0
/error-in-render avg req/sec	1827.45	1825.04	⚠️ -2.41

Client Bundles (main, webpack)

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29 kB	29 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.6 kB	72.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	martindisch/next.js wasm-plugins	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.73 kB	5.73 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	martindisch/next.js wasm-plugins	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 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	martindisch/next.js wasm-plugins	Change
buildDuration	17.8s	18.5s	⚠️ +692ms
buildDurationCached	6.1s	6.4s	⚠️ +357ms
nodeModulesSize	595 MB	595 MB	⚠️ +428 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.784	3.863	⚠️ +0.08
/ avg req/sec	660.66	647.23	⚠️ -13.43
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.332	1.302	-0.03
/error-in-render avg req/sec	1876.18	1920.65	+44.47

Client Bundles (main, webpack)

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.5 kB	29.5 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73.8 kB	73.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	martindisch/next.js wasm-plugins	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.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.82 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.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	martindisch/next.js wasm-plugins	Change
index.html gzip	531 B	531 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: 7056b9b

padmaia · 2022-05-20T21:48:29Z

Duplicate #36790

martindisch · 2022-05-21T05:38:28Z

Great to see you've started working on it, thanks! We're looking forward to improving our buildtimes. If you need any help or would like someone to test it, let us know. We've already built two plugins we want to try out.

jantimon · 2022-05-21T10:48:13Z

thanks @padmaia for the hint 👍

sorry for missing the other pr - we started working on this pr a while back

both PRs look very similar - I guess some parts of our solution are slightly simpler and require less code

it is also in sync with the main branch

can we somehow merge both PRs?

cc @kwonoj

martindisch · 2022-05-21T11:12:44Z

The other one also seems up to date with canary, so I don't think it matters much. Bundling together the additional optional dependencies/feature activations in a new feature seems like a good idea too, so I think if we have any suggestions we can easily add them there.

martindisch and others added 5 commits May 20, 2022 10:46

Enable plugin feature of swc

a7c9ee9

Since features are additive it's not technically necessary to do it for every usage, but it seems more correct to keep them all the same. This causes an issue with js-sys since it's locked to 0.3.49 but wasmer requires ^0.3.51.

Update crates

3972e3e

This gets rid of the js-sys issue but introduces language features that can't be used with the overridden toolchain nightly-2022-02-23.

Update toolchain

70c6180

This allows for compilation, now we're running into the issue that wasmer-vfs requires either host-fs or mem-fs feature to be enabled.

Force enable required features of transitive dependencies

19cee08

This fixes our features issue but should be properly solved in swc.

add experimental swcPlugins next.config.js option

a794044

martindisch requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners May 20, 2022 11:48

ijjk added the type: next label May 20, 2022

optional next config

7056b9b

martindisch added 3 commits May 20, 2022 17:59

Make wasm crate compile as well

39d0c9a

Install nightly-2022-04-23 toolchain

2eaaf97

Fix missing trailing comma

2c8b3a7

martindisch requested review from balazsorban44 and styfle as code owners May 20, 2022 16:01

padmaia closed this May 20, 2022

This comment was marked as spam.

Sign in to view

github-actions bot locked as resolved and limited conversation to collaborators Jun 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Enable Wasm plugins #37063

Enable Wasm plugins #37063

Uh oh!

martindisch commented May 20, 2022

Uh oh!

ijjk commented May 20, 2022 •

edited

Loading

Uh oh!

ijjk commented May 20, 2022

Uh oh!

padmaia commented May 20, 2022

Uh oh!

martindisch commented May 21, 2022

Uh oh!

jantimon commented May 21, 2022 •

edited

Loading

Uh oh!

martindisch commented May 21, 2022

Uh oh!

This comment was marked as spam.

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Enable Wasm plugins #37063

Enable Wasm plugins #37063

Uh oh!

Conversation

martindisch commented May 20, 2022

Usage

Feature

Uh oh!

ijjk commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

ijjk commented May 20, 2022

Stats from current PR

Uh oh!

padmaia commented May 20, 2022

Uh oh!

martindisch commented May 21, 2022

Uh oh!

jantimon commented May 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

martindisch commented May 21, 2022

Uh oh!

This comment was marked as spam.

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ijjk commented May 20, 2022 •

edited

Loading

jantimon commented May 21, 2022 •

edited

Loading