spotlight: Cannot use the package with Package Manager (NPM)

Hey.

It seems to be impossible to use the package with a package manager. When I install the package, I can’t just import it and use it:

import Spotlight from 'spotlight.js'; // This gives an empty object {}

You seem to miss the main entry in your package.json file. Also, your module does not declare any export definition. The only way to use your package is to manually download it or via CDN. Is that intentional or is it something you can fix?

Thanks

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15

Most upvoted comments

@ts-thomas Why does this package needs a build step? The optimal use would be to simply import the CSS and JS into my file and then invoke the script:

import 'spotlight.js/dist/spotlight.css';
import Spotlight from 'spotlight.js';

// Code to invoke Spotlight here

Wouldn’t that be preferable? I’m trying to think if I can somehow “automate” the build process with webpack. How would you do this?

kfirba on Jul 23, 2019

Any news about 0.7.0?

TheNemus on Feb 18, 2020

To make temporary files available, please run npm run build. Before you can also configure some flags in the “src/js/config.js” file. The build process also compiles ES6 to ES5. The final build is located in the “dist” folder.

ts-thomas on Jul 23, 2019

The upcoming version (0.7.0) will provide production ready ES6 modules and solves the problem with build flags.

ts-thomas on Nov 14, 2019

@ts-thomas Let’s try to break it down.

What you want to be able to do is to let people choose which features of the package they want, right? I think that in order to do allow for it while also being compatible with a package manager, you can take the approach of “plugins”.

What I would do is create multiple “plugin” files in my src directory and if a user wants to use them, he will import that file and “use” it, similar to Vue.js and its ecosystem:

import Vue from 'vue'; // The core library
import VueRouter from 'vue-router'; // A router plugin

Vue.use(VueRouter);

// In your case:
import Spotlight from 'spotlight.js'
import PluginA from 'spotlight.js/plugins/PluginA';

Spotlight.use(PluginA);
// or
new Spotlight({
  plugins: [PluginA],
});

This way you allow people to require just the plugins/functionality they want.

About the CSS, you should ship with some default implementation (maybe inline base 64 encoded images - as many packages do) but expose some way for the user to specify that he wants to use image files (during run-time, not build time) and maybe even specify his own image.

Ship the package with some sensible defaults and set up some ways for the user to override certain parts of it easily. The images issue is easily solvable by shipping the package with a default but let people specify their own image path as an option. This way, CDN users will just get the defaults and use it that way (also allowing them to override the images if they wish for it) and package manager users can further optimize their build.

What do you think?

kfirba on Jul 25, 2019