anonyco / FastestSmallestTextEncoderDecoder

The fastest smallest Javascript polyfill for encodeInto of TextEncoder, encode of TextEncoder, and decode of TextDecoder for UTF-8 only.
https://anonyco.github.io/FastestSmallestTextEncoderDecoder/gh-pages/
Creative Commons Zero v1.0 Universal
145 stars 33 forks source link

TextEncoder is not a constructor #5

Closed JamesMHenderson closed 5 years ago

JamesMHenderson commented 5 years ago

In version 1.0.4 calling the text encoder like

new TextEncoder('utf-8').encode(value).length

causes the following error TypeError: fastestsmallesttextencoderdecoder__WEBPACK_IMPORTED_MODULE_0__.TextEncoder is not a constructor

This error does not occur in v1.0.3

anonyco commented 5 years ago

Thank you for bringing this to my attention. The soonest that I shall be able to look into it will be at around 6:00PM EST (10:00PM UTC). I shall not stop until this is resolved or I fall asleep. Thank you so much! I wish I had a free slot right now where I could do something about it.

anonyco commented 5 years ago

After learning the webpack build system, cross-referencing multiple articles, and studying the generated code in the bundle output file, I believe I have identified that the problem is providing webkit with a ES6 flavour of the soup which can be accomplished, according to this article, via the "module" and "es2015" entries in the package.json file. This inadvertently appears to also be a possible solution to #3 . Hooray! I'm working on brewing that soup right now. It should be ready to eat rather soon.

anonyco commented 5 years ago

Success (I think)! I have pushed up a new version of the library to integrate an ES6 module alternative to the library because it appears as though ES6 modules are easier for webpack to swallow (please don't quote me on this--I just learned webpack today, so I do not know much about webpack).

Below is a download link for a "poor-man's" test used to validate whether or not the library is compatible with webpack. After opening the console on the demo.html page and refreshing, the number 15 appeared in the console and no errors were reported. Thus, I assume that my changes have fixed the issues with webpack. I realize that this is not a very good benchmark, but I am at a loss to find any better way to test this library's compatibility with webpack.

As I am still very new and inexperienced with ES6 modules and webpack, I would really appreciate your inspection and critique of my work in order to verify that everything has been done correctly with best-practices and so forth. Thank you so much for bringing this issue to my attention and explaining the problem so clearly and concisely. I really appreciate that you have spent your time to contribute to this project.

~ Happy coding!


Download my "poor-man's" webpack test

JamesMHenderson commented 5 years ago

Thanks for looking at this so quickly. I've tried using it in my project and it is working.

anonyco commented 5 years ago

Thank you so much for getting back to me so quickly. I shall apply these changes to my other npm libraries.

JamesMHenderson commented 5 years ago

I have not had time to look into why this is occurring, but when I run test using jest the tests fail as encode is not a function. FYI I am using create-react-app.

anonyco commented 5 years ago

I am sorry, but I do not fully understand your comment as I sometimes struggle with English. Are you saying that my fixes do not actually work? If my fixes do not actually work, then please tell me and attach a zip file of your project to your comment so that I can debug it myself in the hopes of finding the problem.

Because I am unfamiliar either with react or with webpack, I am at a loss to find probable explanations. Thus, I do not know how to proceed with finding the error other than by using your project in its current state. If you are concerned about the privacy, piracy, and privy of your project, then please upload the project to an external website where you can delete the file as soon as I have downloaded it.

Further, after I am finished debugging the problem with FastestSmallestTextEncoderDecoder in your project, I can promise to purge your project from my SSD hard disk.

JamesMHenderson commented 5 years ago

Your fix works when running the code in the browser, but it does not work when running tests using jest.

I have created a mock project to show you the issue with testing that I am experiencing

https://github.com/JamesMHenderson/fastestsmallesttextencoderdecoderreact

Run npm test to run the test

You will see that running the tests causes the fllowing error

TypeError: (intermediate value).encode is not a function

  2 | 
  3 | export const ByteLength = (text) => {
> 4 |   return new TextEncoder('utf-8').encode(text).length;
    |                                   ^
  5 | };
  6 | 

  at encode (src/encode.js:4:35)
  at Object.<anonymous> (src/encode.test.js:5:14)
anonyco commented 5 years ago

Thank you so much for bringing this to my attention. I am reopening the issue and getting right on it. Thank you for all your help.

~ Happy coding!

anonyco commented 5 years ago

Oops! I found my very silly mistake. Closure Compiler mangles property names and I forgot to explicitly mark the encode and decode property names as not to be mangled.

TextDecoder.prototype.decode = decode; // BAD
TextEncoder.prototype.encode = encode; // BAD

TextDecoder.prototype["decode"] = decode; // GOOD
TextEncoder.prototype["encode"] = encode; // GOOD

I have made these fixes and pushed up version 1.0.7 of this library. After updating and running yarn test, it appears that both tests have passed. Thank you so much for bringing this issue to my attention and providing follow-up on it.

Please tell me whether my changes have fixed your project. Thank you.

~ Happy Coding!

JamesMHenderson commented 5 years ago

Thank you.

I've tested the changes in my mock project and it is working. I will check tomorrow that this is working in my actual project.

I did pull this repository locally to see if I could work out what this issue is but I couldn't run any of the npm scripts. Please could you provide instructions to set this up?

anonyco commented 5 years ago

Thank you for getting back to me so quickly. You have been so helpful with finding and eliminating this bug. I am so glad that this project now works for you.

As for the instructions, please see the development section of the README.

~ Happy coding!