Add index.html and missing 'dist' files to npm package

[pofallon]

Q	A
Bug or feature request?	Bug?
Which Swagger/OpenAPI version?	n/a
Which Swagger-Editor version?	3.1.7
How did you install Swagger-Editor?	yarn add swagger-editor
Which broswer & version?	n/a
Which operating system?	Windows 10

Demonstration API definition

n/a

Configuration (browser query string, constructor, config.yaml)

n/a

Expected Behavior

The npm package should contain the necessary files to load the Swagger Editor in a browser. In other words, if I add swagger-editor as a node.js dependency in my project, I should be able to load the swagger-editor index.html file and have the editor render correctly.

Current Behavior

Currently the npm package contains:

• dist/swagger-editor.css
• dist/swagger-editor.css.map
• dist/swagger-editor.js
• dist/swagger-editor.js.map
• dist/validation.worker.js
• dist/validation.worker.js.map

However, cloning the repo and running npm run build yields several more files in dist:

• dist/swagger-editor-bundle.js
• dist/swagger-editor-bundle.js.map
• dist/swagger-editor-standalone-preset.js
• dist/swagger-editor-standalone-preset.js.map
• dist/favicon-16x16.png
• dist/favicon-32x32.png

Possible Solution

Adding the missing dist files above, along with index.html from the root of the project, should enable someone to add this project as a dependency and correctly render the swagger editor.

Context

I'd like to provide an easy way for my developers to add the swagger editor as a "dependency" of their Swagger JSON project and fire up a local editor to manipulate their API definition.

[webron]

Note that we offer two packages, one of them is swagger-editor-dist.

[shockey]

Hi @pofallon!

As @webron mentioned, we maintain two different npm modules for the project, in order to support two very different use cases. I'll try to give some more context...

The swagger-editor package is meant for consumption within other browser-based JavaScript projects that are capable of handling the way NPM installs dependencies (i.e., a module bundler). We expect that you're doing something along the lines of importing the module into your project's code and creating an instance of Swagger Editor that mounts into your application, running in a user's browser.

If you want to use Swagger Editor indirectly, say by having a Node project open a browser window to the static index.html you can see in our repository, you'll want to use the swagger-editor-dist package, which comes with the bundle files (dependencies included) and the HTML/image assets necessary to use Swagger-Editor without any build system or frontend code on your end.

[pofallon]

Thanks for the replies, the context, and the pointer to swagger-editor-dist, I appreciate it! (I wasn't aware of that module.)

I think my use case trends towards the latter, so swagger-editor-dist may be the module for me. However, I don't see index.html in that npm module. Should I expect to see it there, or did I misunderstand?

[shockey]

Hmmm - I see that from my end too. That's an oversight on our part, probably stemming from the fact that we borrowed the dist package's build script from Swagger-UI - for legacy reasons, index.html is in UI's dist folder, but in Editor's root directory.

I'll open a PR that fixes that today, which should go live when we release a new version on Friday. In the meantime, you should be able to safely copy the index.html we have in the repository and use it for building out your project!

[pofallon]

Awesome, thanks very much!

[shockey]

@pofallon, I just merged #1492 which will include index.html in future releases of swagger-editor-dist. Thanks for bringing this to our attention!

I'm going to close this since it seems like this is solved. If you have any lingering concerns, feel free to reply and I'll reopen this ticket.