Add support for @import

[psydigital]

Would it be possible to add support for an import statement?

[tomickigrzegorz]

You mean importing a library into another project?
Or use a library as a module (<script src="script.js" type="module"></script>)

EDIT:

import Autocomplete from './autocomplete.esm.min.js';

new Autocomplete('basic', {
  onSearch: ({ currentValue }) => {
    const api = `https://rickandmortyapi.com/api/character?name=${encodeURI(
      currentValue
    )}`;
    return new Promise((resolve) => {
      fetch(api)
        .then((response) => response.json())
        .then((data) => {
          resolve(data.results);
        })
        .catch((error) => {
          console.error(error);
        });
    });
  },
  onResults: ({ matches }) =>
    matches.map(({ name }) => `<li>${name}</li>`).join(''),
});

The example above was used with webpack.
See the dist folder.

Of course you can also use this library as a module.

[psydigital]

Thanks @tomickigrzegorz. I was more wanting to install as a Yarn/NPM dep, but I went with this method as you describe.

[mbrodala]

@tomickigrzegorz Can you add more details how your styles should be @import'ed? No matter what I try, Webpack always complains with an error. Latest attempt:

app.js

import './autocomplete.scss';

autocomplete.scss

@import '@tomickigrzegorz/autocomplete/dist/css/autocomplete.css';

Error:

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: "./dist/css/autocomplete.css" is not exported under the condition "style" from package /.../node_modules/@tomickigrzegorz/autocomplete (see exports field in /.../node_modules/@tomickigrzegorz/autocomplete/package.json)

At least if I read your package.json correctly the mentioned CSS path should work:

https://github.com/tomickigrzegorz/autocomplete/blob/v3.0.3/package.json#L20

Or is this an error because there actually is no dist/css/autocomplete.css? But there is a dist/css/autocomplete.min.css instead …

[mbrodala]

Indeed two changes fix this issue:

1. Rename dist/css/autocomplete.min.css to dist/css/autocomplete.css
2. Update (S)CSS:

autocomplete.scss

@import '@tomickigrzegorz/autocomplete';

With this, the stylesheet is imported as expected.