docs(Icon): "Show similar" does not filter at all on the deployed docs site

[patrikmolsson]

Steps

Go to https://react.semantic-ui.com/elements/icon, have the "Show similar" checked (it is by default), and search for "home".

Environment

Have tested in Firefox 56.0.1 and Chrome 61.0.3163.100.

Expected Result

The icon "home" will show up (and maybe some related icons)

Actual Result

No filtering happens at all, for no search strings. It does however filter when not having the "Show similar" checked.

It does work on the local build, however. I.e. when running yarn start in the source directory and accessing it from localhost, the "Show similar" functionality works.

[layershifter]

@patrikmolsson thanks for report, any investigation of this problem is much appreciated

[patrikmolsson]

@layershifter I can look into it!

[patrikmolsson]

It seems like it was disabled by design in one of the library files, see

Semantic-UI-React/src/lib/leven.js

Line 7 in 0a29f6c

if (process.env.NODE_ENV !== 'production') {

Although, I removed that line on my deployed pages, and it seems to work OK.

[patrikmolsson]

What are your thoughts on this, @layershifter ? Can you think of any reason why this line should be there?

I found another usage of leven, and it seems to be used in

Semantic-UI-React/src/lib/customPropTypes.js

Line 21 in 0a29f6c

export const suggest = suggestions => (props, propName, componentName) => {

What is the usage of that function?

[layershifter]

@patrikmolsson Thanks for your research 👍 The suggest function is one of customPropTypes, their usage will be also removed in the production build.

I'm think that the better solution is duplicate the leven function if docs/app, because our users don't need it in their prodution builds. Do you want to make the PR?

[patrikmolsson]

@layershifter Sure, I can do it!

However, I don't really follow. If the customPropTypes are removed in the production build, then the if statement in the leven.js file have no effect, right? Then we could just remove it?

[levithomason]

There are two bundles in this repo, the /docs and the /src. Webpack is responsible for bundling all the dependencies for these, for which we have separate build scripts.

We include a custom copy of leven in the source code because we needed to ensure it was removed from the production build of the library. This is because it is only used to find related prop values. Prop types are removed from our production bundle, so we don't need to include leven in the production build either.

However, the docs do not have this limitation. They actually use leven in the production docs app, for similar icon search. In this case, we can just yarn add leven --dev and only import it in the docs. Then, instead of importing leven from src/lib, we can import it directly from node_modules import leven from 'leven'.

Now, the doc site will always include a bundled version of leven.

[patrikmolsson]

@levithomason @layershifter

I made a pull request in #2220. Any feedback is appreciated :)