Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack magic comments in import() statements look ugly and potentially break #4617

Closed
mikegreiling opened this Issue May 31, 2018 · 3 comments

Comments

Projects
None yet
5 participants
@mikegreiling
Copy link

mikegreiling commented May 31, 2018

Webpack allows for special comments within dynamic import() statements to effect the way in which it statically analyzes, splits, and names its bundles. The comment block must be within the parens of the import function, and this tends to look somewhat ugly after they are run through prettier.

Here are several examples of my attempts to reconcile prettier reformatting with webpack import comments.

In most cases the easiest option is to keep everything in one line, but with multiple webpack options this can run rather long and it can look nicer to break these webpack comments onto separate lines, as in examples 2-4.

Note that example 4 actually breaks the functionality entirely by moving the comments outside of the function!

ref: https://webpack.js.org/api/module-methods/#import-

Prettier 1.13.3
Playground link

--parser babylon

Input:

function example1() {
  import(/* webpackChunkName: "my-chunk-name", webpackMode: "lazy" */ `./locale/${language}`).then(module => module.default());
}

function example2() {
  import(
    /* webpackInclude: /\.json$/ */
    /* webpackExclude: /\.noimport\.json$/ */
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
    `./locale/${language}`
  ).then(module => module.default());
}

function example3() {
  import(/*
    webpackInclude: /\.json$/,
    webpackExclude: /\.noimport\.json$/,
    webpackChunkName: "my-chunk-name",
    webpackMode: "lazy"
    */
    `./locale/${language}`
  ).then(module => module.default());
}

function example4() {
  import(
    `./locale/${language}`
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
  ).then(module => module.default());
}

Output:

function example1() {
  import(/* webpackChunkName: "my-chunk-name", webpackMode: "lazy" */ `./locale/${language}`).then(
    module => module.default()
  );
}

function example2() {
  import(/* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  `./locale/${language}`).then(module => module.default());
}

function example3() {
  import(/*
    webpackInclude: /\.json$/,
    webpackExclude: /\.noimport\.json$/,
    webpackChunkName: "my-chunk-name",
    webpackMode: "lazy"
    */
  `./locale/${language}`).then(module => module.default());
}

function example4() {
  import(`./locale/${language}`)
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
    .then(module => module.default());
}

Expected behavior:

  1. Comments within function call parens should never be moved outside of the parens. They were likely there for a reason and this can break expected behavior by other static analyzers that use comments to denote directives (e.g. webpack, istanbul, eslint, etc).

  2. Comments within function call parens should be allowed to preserve leading whitespace. e.g.

    func(
      /* foo */
      bar
    );

    should not become

    func(/* foo */
      bar
    );
  3. Params within function calls that have embedded comments should still be indented properly.

    func(
      /* foo */
      bar
    );

    should not become

    func(
      /* foo */
    bar);

@mikegreiling mikegreiling changed the title Webpack magic comments in import() statements look ugly Webpack magic comments in import() statements look ugly and potentially break May 31, 2018

@evilebottnawi

This comment has been minimized.

Copy link
Member

evilebottnawi commented May 31, 2018

Looks we have bug, it is break webpack logic

function example4() {
  import(
    `./locale/${language}`
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
  ).then(module => module.default());
}

to

function example4() {
  import(`./locale/${language}`)
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
    .then(module => module.default());
}

Other ugly, need fix

@lydell

This comment has been minimized.

Copy link
Collaborator

lydell commented May 31, 2018

Possibly good to keep in mind while fixing: #2853 #1489

@noahsug noahsug referenced this issue Apr 2, 2019

Merged

Fix multiline dynamic import comments #6025

3 of 3 tasks complete
@noahsug

This comment has been minimized.

Copy link
Contributor

noahsug commented Apr 2, 2019

I've put up a PR that fixes this issue: #6025

@vjeux vjeux closed this in #6025 Apr 2, 2019

@ikatyang ikatyang added this to the 1.17 milestone Apr 12, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.