refactor: removed ref and unref api for useable loader (#409)

BREAKING CHANGE: removed `ref`/`unref` api were removed for useable loader, please use `use`/`unuse` api

Author: evilebottnawi

README.md

@@ -97,18 +97,17 @@ Possible values:
 - `linkTag`
 
 When you `lazyStyleTag` or `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
-It is named `Reference Counter API`.
 
 **component.js**
 
 ```js
 import style from './file.css';
 
-style.use(); // = style.ref();
-style.unuse(); // = style.unref();
+style.use();
+style.unuse();
 ```
 
-By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`).
+We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
 
 **webpack.config.js**
 
@@ -118,11 +117,11 @@ module.exports = {
     rules: [
       {
         test: /\.css$/i,
-        exclude: /\.useable\.css$/i,
+        exclude: /\.lazy\.css$/i,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
       },
       {
-        test: /\.useable\.css$/i,
+        test: /\.lazy\.css$/i,
         use: [
           {
             loader: 'style-loader',
@@ -139,9 +138,9 @@ module.exports = {
 };
 ```
 
-Styles are not added on `import/require()`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`.
+Styles are not added on `import/require()`, but instead on call to `use`. Styles are removed from page if `unuse` is called exactly as often as `use`.
 
-> ⚠️ Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
+> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
 
 #### `styleTag`
 
@@ -243,7 +242,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.useable\.css$/i,
+        test: /\.lazy\.css$/i,
         use: [
           { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
           'css-loader',
@@ -286,7 +285,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.useable\.css$/i,
+        test: /\.lazy\.css$/i,
         use: [
           {
             loader: 'style-loader',

src/index.js

@@ -36,16 +36,16 @@ module.exports.pitch = function loader(request) {
     case 'linkTag': {
       const hmrCode = this.hot
         ? `
-if (module.hot) {  
+if (module.hot) {
   module.hot.accept(
-    ${loaderUtils.stringifyRequest(this, `!!${request}`)}, 
+    ${loaderUtils.stringifyRequest(this, `!!${request}`)},
     function() {
       update(require(${loaderUtils.stringifyRequest(this, `!!${request}`)}));
     }
   );
-    
-  module.hot.dispose(function() { 
-    update(); 
+
+  module.hot.dispose(function() {
+    update();
   });
 }`
         : '';
@@ -67,22 +67,22 @@ if (module.hot) {
       const hmrCode = this.hot
         ? `
 if (module.hot) {
-  var lastRefs = module.hot.data && module.hot.data.refs || 0; 
+  var lastRefs = module.hot.data && module.hot.data.refs || 0;
   
   if (lastRefs) {
     exports.ref();
     if (!content.locals) {
       refs = lastRefs;
     }
   }
-  
+
   if (!content.locals) {
     module.hot.accept();
-  } 
-  
+  }
+
   module.hot.dispose(function(data) {
     data.refs = content.locals ? 0 : refs;
-  
+
     if (dispose) {
       dispose();
     }
@@ -97,11 +97,11 @@ var options = ${JSON.stringify(options)};
 
 options.insertInto = ${insertInto};
 options.singleton = ${isSingleton};
-    
+
 if (typeof content === 'string') content = [[module.id, content, '']];
 if (content.locals) exports.locals = content.locals;
 
-exports.use = exports.ref = function() {
+exports.use = function() {
   if (!(refs++)) {
     dispose = require(${loaderUtils.stringifyRequest(
       this,
@@ -112,7 +112,7 @@ exports.use = exports.ref = function() {
  return exports;
 };
 
-exports.unuse = exports.unref = function() {
+exports.unuse = function() {
   if (refs > 0 && !--refs) {
     dispose();
     dispose = null;
@@ -131,18 +131,18 @@ ${hmrCode}
         ? `
 if (module.hot) {
   module.hot.accept(
-    ${loaderUtils.stringifyRequest(this, `!!${request}`)}, 
+    ${loaderUtils.stringifyRequest(this, `!!${request}`)},
     function() {
       var newContent = require(${loaderUtils.stringifyRequest(
         this,
         `!!${request}`
       )});
 
-      if (typeof newContent === 'string') 
+      if (typeof newContent === 'string')
         newContent = [[module.id, newContent, '']];
 
       var locals = (function(a, b) {
-        var key, 
+        var key,
           idx = 0;
 
         for (key in a) {
@@ -155,15 +155,15 @@ if (module.hot) {
         return idx === 0;
       }(content.locals, newContent.locals));
 
-      if (!locals) 
+      if (!locals)
         throw new Error('Aborting CSS HMR due to changed css-modules locals.');
 
       update(newContent);
     }
   );
 
   module.hot.dispose(function() { 
-    update(); 
+    update();
   });
 }`
         : '';