Complete PR #980

[pierreneter]

Update webpack , antwar and dependencies.
Complete PR #980 (branch feat-webpack2).
Fix issues:

• Mobile Sidebar.
• ...
  After this PR was merged.
  We can merge feat-webpack2 branch.
  Related to: Port to webpack 3 and Upgrade Antwar #980, Dev - General Updates and Fixes #1525

[pierreneter]

yarn run lint:js
$ eslint . --ext .js --ext .jsx

C:\Users\Pierre\Github\webpack.js.org\src\utilities\markdown.js
  43:33  error  Unnecessary escape character: \[  no-useless-escape
  44:23  error  Unnecessary escape character: \[  no-useless-escape

✖ 2 problems (2 errors, 0 warnings)

So, I removed that \.

[pierreneter]

Hi @skipjack I have fixed #1085 with this branch.
The initial description for this PR is incomplete.
So I will summarize the content with this comment.

This PR will:

Complete:

• Port to webpack 3 and Upgrade Antwar #980 (branch: feat-webpack2), we just need merge Port to webpack 3 and Upgrade Antwar #980 after merge my PR (Complete PR #980 #1546)

Solve:

• Dev - Title Missing on Voting Page #720, Dev - Display Index Pages Correctly #1085 (two first row of Dev - General Updates and Fixes #1525)
• The row "Upgrade to use latest webpack" of Dev - Convert to PWA (checklist) #1400

[skipjack]

@pierreneter thank you for digging into this. Can you be a bit more specific about how you fixed these issues? #980 was pretty much ready to go aside from the section.all() data. Did you upgrade antwar to fix that? I get that the other updates are just to bring #980 (feat-webpack2) up to date with the recent restructuring from #1490. It just makes it hard to tell what you changed to fix the issues there.

[pierreneter]

Sure. Let me explain.
#980 is almost complete, and I'm just fixing some of the issues that it encounters.

• Route: It has problems with recursive content filtering, make the article list of a section incorrect and display this list wrong in the sidebar:

That's the recursion problem and the way to configure the paths in antwar.config.js

The origin code:

'/': {
      content: () => (
        require.context(
          './loaders/page-loader!./content',
          true,
          /^\.\/.*\.md$/
        )
      )
...
	paths: {
        'get-started': {
          redirects: {
            '': '/guides/getting-started',
            'install-webpack': '/guides/installation',
            'why-webpack': '/guides/why-webpack',
          }
        },
        guides: {
          redirects: {
            'code-splitting-import': '/guides/code-splitting-async',
            'code-splitting-require': '/guides/code-splitting-async/#require-ensure-',
            'why-webpack': '/guides/comparison',
            'production-build': '/guides/production'
          }
        },
        configuration: {
          redirects: {
            'external-configs': 'javascript-alternatives'
          }
        },
    ...
	}
}

The settings above make all posts have the same section.

My code makes configuring the path specified and does not have this problem anymore:

 paths: {
    '/': {
    ...
-       content: () => require.context('./src/loaders/page-loader!./src/content', true, /^\.\/.*\.md$/), //This causes an error when recursively
+       content: () => require.context('./src/loaders/page-loader!./src/content', false, /^\.\/.*\.md$/),
    ...
    },
    ...
    concepts: { // Move it out of the `paths` of '/'
        title: "Comcepts",
        content: () => require.context('./src/loaders/page-loader!./src/content/concepts', false, /^\.\/.*\.md$/),
        url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
        transform: (pages) => {
            return _.sortBy(pages, (page) => page.file.sort)
        },
        layout: () => require('./src/components/Page/Page.jsx').default
    },
    ...
}

• Sort: Sort not work at Port to webpack 3 and Upgrade Antwar #980,

I added this feature with add line:

result.sort = result.attributes.sort || null;

into ./src/loaders/page-loader.js (https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/loaders/page-loader.js#L16)

And add it to new structure of antwar.config.js:

transform: (pages) => {
    return _.sortBy(pages, (page) => page.file.sort)
},

• Anchors: (Dev - Display Index Pages Correctly #1085), It's about the first item of sidebar don't pass anchors to sidebar item of this index page.

The origin code (https://github.com/webpack/webpack.js.org/blob/feat-webpack2/components/sidebar/sidebar.jsx#L31):

<SidebarItem
    url={ `/${sectionName}/` }
    title="Introduction"
    currentPage= { currentPage } />

{
pages.map(({ url, title, anchors }, i) =>
  <SidebarItem
    key={ `sidebar-item-${i}` }
    index={i}
    url={ `${url}` }
    title={ title }
    anchors={ anchors }
    currentPage= { currentPage }
    onToggle={ this._recalculate.bind(this) } />
)
}

My code (https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/components/Sidebar/Sidebar.jsx#L33):

<SidebarItem
    url={ `/${sectionName}/` }
    title="Introduction"
    currentPage= { currentPage }
+   anchors= { anchors } />

{
pages.map(({ url, title, anchors }, i) =>
  <SidebarItem
    key={ `sidebar-item-${i}` }
    index={i}
    url={ `${url}` }
    title={ title }
    anchors={ anchors }
    currentPage= { currentPage }
    onToggle={ this._recalculate.bind(this) } />
)
}

This anchors from: https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/components/Sidebar/Sidebar.jsx#L13

let { sectionName, pages, currentPage, anchors } = this.props;

Added from Page.jsx (https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/components/Page/Page.jsx#L45):

<Interactive
        id="src/components/Sidebar/Sidebar.jsx"
        component={ Sidebar }
        sectionName={ section.name }
        pages={ section.pages().map(({
          file: {
            attributes: {
              anchors,
              title
            }
          },
          url
        }) => ({ url, title, anchors })) }
        currentPage={ url.replace('/index', '') }
+       anchors={ page.file.attributes.anchors } />

So:

• Mobile Sidebar:

It errors because the "Retrieve section data" at Site.jsx (https://github.com/webpack/webpack.js.org/blob/feat-webpack2/components/site/site.jsx#L28) is out of date compared to the latest version of antwar:

The origin code:

let sections = section.all()
.map(({ title, url, pages }) => ({
  title,
  url,
  pages: pages.map(({ title, url }) => ({
    title: title || url, // XXX: Title shouldn't be coming in as undefined
    url
  }))
}));

My fix (https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/components/Site/Site.jsx#L27):

let sections = section.all().filter(section => section.path.hideInSidebar !== true)
.map((section) => {
  let _section = {
    title: section.path.title,
    url: section.url,
    pages: section.pages.map(page => {
      let _page = {
        title: page.file.title,
        url: page.url
      };
      return _page;
    })
  };
  return _section;
});

Why need section.path.hideInSidebar. Because of some section don't need show in sidebar, it's just a redirects, we don't need show it (there are just a few cases that we need), like (we can config at antwar.config.js):

pluginsapi: {
	title: 'API Plugin',
	redirects: {
		'': '/api/plugins',
		'compiler': '/api/plugins/compiler',
		'template': '/api/plugins/template'
	},
	hideSidebar: true
},

Mobile Sidebar fixed:

• And some other bug fixes in the process of merging with the master branch.

All done.

[pierreneter]

Oops, it's hideInSidebar but I added hideSidebar: true at antwar.config.js. Fixed.
It work:

[pierreneter]

This is just an issue of #980.

Fixed with commit above.

[pierreneter]

And a small issue I fixed with this branch is:

present (https://github.com/webpack/webpack.js.org/blob/master/src/content/index.md):

fixed (https://github.com/pierreneter-repositories/webpack.js.org/blob/feat-webpack2/src/components/Splash/index.md):

[skipjack]

@pierreneter ok I think I followed most of that, thanks for the detailed explanation. I think I'll merge this into feat-webpack2 ( #980 ) which should then yield a much more concise diff (Files Changed) that we can carefully review/test. Thanks again for your work on this and patience with the delayed reviews 👍 .

[skipjack]

@pierreneter ok rolled everything up into one commit so we can easily roll that branch back if necessary. I'm going to check the diff there carefully now and test locally. If we can get #980 merged this week that would be fantastic 🎉 🎉