refactor: removed ref and unref api for useable loader

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();
  });
 }`
  : '';