Modify exports for use with commonjs/es6 modules

[tracker1]

It would be nice if you exported (test for module/module.exports as well as self) then exports against $, $$ so that they can be imported directly...

(function (context){
  context.$ = $;
  context.$$ = $.$;
}(
  typeof module !== 'undefined' && module.exports 
  || typeof self !== 'undefined' && self || this)
);

This way it can be used via cjs modules built via browserify/webpack or via es6 imports via babel as such.

import {$,$$} from 'blissfuljs';

Alternatively, if module.exports exists, module.exports = Bliss and assume "shy" mode.

[LeaVerou]

Sure! PR?

[oriSomething]

i think, that actually rollup might be a better tool for packaging it:

• because the compact syntax would be cleaner, more compact and much closer to the current source
• browserify / webpack tends to leave fingerprints because the way it work

[renoirb]

Making Bliss load as a ES6/CommonJS module is a side-effect of something else.

My concern is not how we load it, because we can always use require.config({shim:{}}); or similar, but more on how we can test an instance of bliss. Testing bliss.shy = true; doesn’t seem doable with current test infrastructure in the way it's written. (Notice: I am not a testing expert, and couldn’t make it work yet.)

It depends how and where Bliss will run. Only in a browser with an anonymous <script src="bliss.js"></script> or elsewhere like we do in Backbone/Require.js, or as a document "free" DOM manipulator (i.e. outside of the global document scope we get in a browser), or even in Node.js.

[cyrilchapon]

Is there a way to use it in an ES6, babel, webpack env right now ? :)

[joyously]

Does this article help?
https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

[LeaVerou]

@tracker1 Agreed! Pull request?

[matthiask]

I don't know how to solve this "correctly", but here's what I'm doing:

First, yarn add https://github.com/LeaVerou/bliss/ (you can also use a released versions, but why not use the latest and best version of Bliss?)

Then, once:

import 'blissfuljs/bliss.shy.js'
import 'blissfuljs/bliss._.js'

Afterwards, in all files where you want to use Bliss, do this:

const {$, $$} = window  // eslint-disable-line

The eslint-disable-line comment stops ESLint from complaining about unused variables. In this case I'm fine with not having to add and remove $ and $$ on a case-by-case basis.

[LeaVerou]

FWIW, I'm currently doing a rewrite of Bliss to use ESM. Should I close this as a duplicate of #226, since once that's complete, this will be resolved too?

[matthiask]

@LeaVerou Closing as a duplicate makes sense to me.

[tracker1]

I'm really sorry for not responding sooner, usually try to check GH notices a few times a week, but the past couple months have been abnormally busy... @LeaVerou cool beans on the rewrite. Honestly should have done a PR much sooner.