0.8.0-beta.1 includes `.html` require in dist file about office-js-helpers

[WrathOfZombies]

Hmm good catch let me look at that. file-loader marks file paths and serves them as is. We want to avoid that and bundle the html code as a template string in JavaScript.

[IanVS]

This does indeed seem to now be working correctly. Using source-map-explorer, I can see that all of lodash is no longer being included, and @microsoft/office-js-helpers has gotten slightly larger (because it is now including the parts of lodash it needs, presumably).

0.7.4:
plus

0.8.0-beta.3:

Those are uncompressed file sizes. After compression, switching from 0.7.4 to 0.8.0-beta.3 caused my bundle size to decrease by 18.89 KB. Not bad! Thanks for taking the time to improve this. 👍 0.8.0-beta.3 is working well.

[WrathOfZombies]

Are you using es6 import? If so then that's addressed now in the new build as I included the html file in the compiled output. Otherwise, the html template has already been stringified and included.

[WrathOfZombies]

the new version is 0.8.0-beta.2

[IanVS]

Yes I am using es6 imports:

import {Authenticator} from '@microsoft/office-js-helpers';

I just gave beta.2 a shot, and am now getting this error:

./~/@microsoft/office-js-helpers/dist/ui/message-banner.html
Module parse failed: node_modules/@microsoft/office-js-helpers/dist/ui/message-banner.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div class="office-js-helpers-notification ms-font-m ms-MessageBar @@CLASS">
|   <style>
|     .office-js-helpers-notification {

error Command failed with exit code 1.

I believe this is because my webpack config is set up to only be used on my own files, and not on node_modules. So, the require is treating the html file as if it were JavaScript.

[WrathOfZombies]

Let me try it out with the angular & react starter kits and get back to you. If it works then I think we'll need to investigate your config further.

[IanVS]

Thanks for looking into it.

Normally it is expected that node_modules contain compiled files that do not require further processing or the use of a a particular bundler like webpack in order to be used within the intended target environment. Requiring an html file is not something that node or javascript generally knows how to deal with, without the use of something like webpack. I don't think that asking consumers of this library to change their webpack configs (or start using webpack) to handle the particular needs of this package is the way to go.

[WrathOfZombies]

Yup and I agree. What I am trying to achieve is the same actually. I don't expect node or javascript to import html. It was meant for webpack to pick it up. That said, I am not sure why its trying to do something like that in your build and hence I suggested that something might be funny there.

What I was expecting is office.helpers.js is given to webpack and it sees a require statement for a module named template.html and we define a fake module called template.html that just exports a variable containing the entire html string.

[WrathOfZombies]

Here's a new build of the library - https://unpkg.com/@microsoft/[email protected]/dist/office.helpers.js.

It includes a bunch of optimizations on how the Storage module works and also fixes the webpack loading problem. Problem was that webpack was using the source files to recompile the library but with the new tree shaking capabilities of webpack this is no longer needed. If you see the dist folder now as only the required files.

[WrathOfZombies]

Thanks for taking a look. I'll do some more testing and will be publishing the new version. Some new features are going to be added in as well.