ES6 Modules #262

johannwagner · 2018-10-26T10:00:16Z

Is there a real reason, why we don't ship ES6 modules?
I would like to see an additional export at this point, I would also do a PR, if wished and needed.

Regards,
Johann

KonradHoeffner · 2019-02-07T09:48:39Z

This would be much appreciated!

import Fuse from 'fuse.js'; works for me in node and in code transpiled with Babel but not in pure JavaScript in the browser, which forces me to do cumbersome workarounds, like:

mocha unit tests

import Fuse from 'fuse.js';
global.Fuse = Fuse;
... run the test code ...

index.html

...
<script src="node_modules/fuse.js/dist/fuse.js"></script>
...

hwindo · 2020-03-15T01:08:15Z

I would love to see this happen, in the mean time, load it from <script> tag like @KonradHoeffner example

danielfdickinson · 2020-03-18T01:37:42Z

Does 31fc5b7 help or make it easy to add by adding an es6 target?

danielfdickinson · 2020-03-18T01:41:13Z

btw if you have a script tag in your head section loading fuse.js you all the classes and functions are available under the fuse global var, so I'm not sure what more you are looking for.

hwindo · 2020-03-18T03:03:45Z

It is for more control, sometimes you don't need to put it on global, or don't need to load fuse inside every page

danielfdickinson · 2020-03-18T05:04:15Z

That sounds like you're looking for something like dynamic imports, which as far as I know ought to work with the webpack generated UMD (fuse*.js that are in dist/). If it doesn't work can you show a minimal test case along with any error messages?

KonradHoeffner · 2020-03-18T09:32:56Z

We don't use webpack anymore so it would be great to have the module option for pure JavaScript. It doesn't have to be a dynamic import, static is fine. I just don't need it as a global in every file, but prefer to have it statically imported in just the files that need it.

danielfdickinson · 2020-03-18T09:43:21Z

@KonradHoeffner Your project doesn't need to use webpack to consume a library that does. You ought to be able to just import fuse.js as things are today. Or is the objection that the library is built with webpack? If so, why (honest question, if there is a good reason to object to webpack I'd like to know for my own projects and things I depend on)?

I presume you're not building from fuse.js' source since if you were you could use your own build tooling and this would be a non-issue.

Trying to understand exactly what is being asked for. My understanding is that webpack umd is an ES2015 module in environments that support them, so I think the title and premise of this bug might be outdated, so am trying to clarify.

KonradHoeffner · 2020-03-18T09:47:58Z

Sorry for the confusion. I have absolutely no problem with using a library that uses Webpack, I just meant that our project doesn't use it and that as far as I know, UMD and ES6 modules are different systems that are not compatible, so I understood your post as though Webpack somehow makes the two compatible by rewriting ES6 code to UMD code, so if I don't use Webpack, my ES6 import code would not be rewritten to UMD. I will create a minimal working example.

sidvishnoi · 2020-03-18T09:53:06Z

With ES6 module support, I'll be able to run Fuse directly in the browser:

<script type="module">
import Fuse from '/path/to/fuse.esm.js';
const fuse = new Fuse(options);
</script>

As an example, presently I've to import Fuse as a global at https://respec.org/xref/ (using the UMD bundle). That means, I can't use defer or async on it, as script[type="module"] is async by default and I'll run into race conditions.

 <script src="fuse.js"></script> <!-- can't defer this, otherwise script.js will face race conditions -->
 <script src="script.js" type="module"></script>

A ESM build would also allow running fuse in Deno and Node v13+ with ESM support.

KonradHoeffner · 2020-03-18T10:08:46Z

@cshoredaniel: I just tested it with version 3.6.1 and it does not work as a module right now, as the following code fails:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module">
  import * as fuse from "https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.6.1/fuse.js";  
  </script>
</head>
<body>
</body>
</html>

I also tried it locally with the npm module via import * as fuse from "./node_modules/fuse.js/dist/fuse.js";, resulting in "TypeError: e is undefined" and via import fuse from "./node_modules/fuse.js/dist/fuse.js";, resulting in "SyntaxError: import not found: default test.html:6:9".

So it seems like Webpack does actually not create an ES6 module automatically.

danielfdickinson · 2020-03-18T10:28:24Z

Thanks. I'll look into this more deeply. The docs I read claimed to ES2015. Since that's clearly not the case, I apologize for the confusion (and will see if I can find a solution).

sidvishnoi · 2020-03-18T11:00:35Z

Probably need to use rollup instead: webpack/webpack#2933

danielfdickinson · 2020-03-18T19:54:01Z

@sidvishnoi thanks. I don't remember where I saw the es2015 thing -- probably misread something. Anyway it does looks like rollup is the best option for getting the umd modules we have now plus an es6 module (or es6 min and unmin). Time to read docs and learn something new...

danielfdickinson · 2020-03-19T22:20:21Z

I'd welcome testing and comments of #365 (Switch bundler to Rollup)

KonradHoeffner · 2020-03-20T08:54:48Z

@cshoredaniel: Thanks, that works perfectly!

$ git clone https://github.com/cshoredaniel/krisk-Fuse.git
$ npm install
$ npm run build
$ git log  
commit b4b9866df053be71f947d641b60c8772c261b108 (HEAD -> master, origin/master, origin/HEAD)
Merge: 8b8fcac e0395ea
Author: Daniel Dickinson <cshored@cshore.thecshore.com>
Date:   Thu Mar 19 19:12:12 2020 -0400

    Merge pull request #7 from cshoredaniel/pr-master-switch-bundler
    
    Merge switch bundler and upstream changes
[...]

Opening the HTML file below in the browser results in the following output, so I assume it works:
[{"item":{"title":"Old Man's War","author":{"firstName":"John","lastName":"Scalzi"}},"refIndex":0}] test.html:36:11

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module">
  import Fuse from "./dist/fuse.es6.js";

  let options = {
  shouldSort: true,
  threshold: 0.2,
  location: 0,
  distance: 100,
  minMatchCharLength: 1,
  keys: [
    "title",
    "author.firstName"
  ]
  };
  let list = [
  {
      title: "Old Man's War",
      author: {
        firstName: "John",
        lastName: "Scalzi"
      }
  },
  {
      title: "The Lock Artist",
      author: {
        firstName: "Steve",
        lastName: "Hamilton"
      }
  }];
  let fuse = new Fuse(list, options);
  let result = fuse.search("old man war");
  console.log(JSON.stringify(result));
  </script>                                                                                                                                                   
</head>
<body>
</body>
</html>

- Added ES6 modules for bundlers and browsers (fixed #262) - Added CommonJS - Added UMD - Name change so that .min actually reflects the minified version

- Changed bundler to Rollup - Added ES6 modules for bundlers and browsers (fixed #262) - Added CommonJS builds - Added UMD builds - Name change so that .min actually reflects the minified version

danielfdickinson mentioned this issue Mar 19, 2020

[RFT] Switch bundler to Rollup #365

Closed

krisk added a commit that referenced this issue Mar 21, 2020

- Changed bundler to Rollup

237489d

- Added ES6 modules for bundlers and browsers (fixed #262) - Added CommonJS - Added UMD - Name change so that .min actually reflects the minified version

krisk mentioned this issue Mar 21, 2020

Changed bundler to Rollup #367

Merged

krisk closed this as completed in #367 Mar 23, 2020

danielfdickinson mentioned this issue Mar 23, 2020

Un-minified version in distribution #346

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ES6 Modules #262

ES6 Modules #262

johannwagner commented Oct 26, 2018

KonradHoeffner commented Feb 7, 2019 •

edited

Loading

hwindo commented Mar 15, 2020

danielfdickinson commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

hwindo commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

KonradHoeffner commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

KonradHoeffner commented Mar 18, 2020 •

edited

Loading

sidvishnoi commented Mar 18, 2020 •

edited

Loading

KonradHoeffner commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

sidvishnoi commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

danielfdickinson commented Mar 19, 2020

KonradHoeffner commented Mar 20, 2020

ES6 Modules #262

ES6 Modules #262

Comments

johannwagner commented Oct 26, 2018

KonradHoeffner commented Feb 7, 2019 • edited Loading

hwindo commented Mar 15, 2020

danielfdickinson commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

hwindo commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

KonradHoeffner commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

KonradHoeffner commented Mar 18, 2020 • edited Loading

sidvishnoi commented Mar 18, 2020 • edited Loading

KonradHoeffner commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

sidvishnoi commented Mar 18, 2020

danielfdickinson commented Mar 18, 2020

danielfdickinson commented Mar 19, 2020

KonradHoeffner commented Mar 20, 2020

KonradHoeffner commented Feb 7, 2019 •

edited

Loading

KonradHoeffner commented Mar 18, 2020 •

edited

Loading

sidvishnoi commented Mar 18, 2020 •

edited

Loading