babel-plugin-glamorous-displayname - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0

dist/index.js

@@ -7,19 +7,17 @@ 'use strict';
 
-var _from = require('babel-runtime/core-js/array/from');
-
-var _from2 = _interopRequireDefault(_from);
-
-var _set = require('babel-runtime/core-js/set');
-
-var _set2 = _interopRequireDefault(_set);
-
 exports.default = function (babel) {
-  var t = babel.types;
+  var t = babel.types,
+      template = babel.template;
 
-  var identifiers = new _set2.default();
-  var declarators = new _set2.default();
+  var identifiers = new Set();
+  var buildBuiltInWithConfig = template(`
+    GLAMOROUS.BUILT_IN.withConfig({displayName: DISPLAY_NAME})
+  `);
+  var buildCustomWithConfig = template(`
+    GLAMOROUS(ARGUMENTS).withConfig({displayName: DISPLAY_NAME})
+  `);
   return {
     name: 'babel-plugin-glamorous-displayName',
     visitor: {
-      ImportDeclaration: function ImportDeclaration(path) {
+      ImportDeclaration(path) {
         var defaultSpecifierPath = path.get('specifiers')[0];
@@ -38,3 +36,3 @@ if (path.node.source.value !== 'glamorous' || !t.isImportDefaultSpecifier(defaultSpecifierPath)) {
       },
-      VariableDeclarator: function VariableDeclarator(path) {
+      VariableDeclarator(path) {
         var node = path.node;
@@ -48,2 +46,5 @@
         var binding = path.scope.getBinding(name);
+        // I'm not sure whether this could ever happen
+        // but I don't want a bug report hitting me because it did...
+        // istanbul ignore else
         if (binding) {
@@ -57,28 +58,11 @@ var referencePaths = binding.referencePaths;
       },
-
       Program: {
-        exit: function exit(path, _ref) {
-          var filename = _ref.file.opts.filename;
+        exit(path, _ref) {
+          var file = _ref.file;
 
-          (0, _from2.default)(identifiers).forEach(function (identifier) {
-            var declarator = identifier.findParent(t.isVariableDeclarator);
-            if (!declarator || declarators.has(declarator) || !t.isCallExpression(declarator.node.init)) {
-              return;
-            }
-            declarators.add(declarator);
-            var _declarator = declarator,
-                name = _declarator.node.id.name;
+          Array.from(identifiers).forEach(function (identifier) {
+            var displayName = getDisplayName(identifier, file);
 
-            var displayName = name;
-            if (filename && filename !== 'unknown') {
-              displayName = nodePath.parse(filename).name + '__' + displayName;
-            }
-
-            if (declarator.parentPath.findParent(t.isExportNamedDeclaration)) {
-              declarator = declarator.parentPath;
-            }
-            var lastBodyItem = getLastBodyItem(declarator.scope.path);
-            var insertMethod = lastBodyItem.type === 'ReturnStatement' ? 'insertBefore' : 'insertAfter';
-
-            lastBodyItem[insertMethod](t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier(name), t.identifier('displayName')), t.stringLiteral(displayName))));
+            handleBuiltIns(identifier, displayName);
+            handleCustomComponent(identifier, displayName);
           });
@@ -90,30 +74,120 @@ }
 
-  function isRequireCall(callExpression) {
-    return callExpression && callExpression.type === 'CallExpression' && callExpression.callee.name === 'require' && callExpression.arguments.length === 1 && callExpression.arguments[0].value === 'glamorous';
+  function handleBuiltIns(path, displayName) {
+    var isBuiltIn = looksLike(path, {
+      parentPath: {
+        type: 'MemberExpression',
+        node: {
+          property: {
+            type: 'Identifier'
+          }
+        },
+        parent: {
+          type: 'CallExpression'
+        }
+      }
+    });
+    if (!isBuiltIn) {
+      return;
+    }
+    path.parentPath.replaceWith(buildBuiltInWithConfig({
+      GLAMOROUS: path.node,
+      BUILT_IN: path.parent.property,
+      DISPLAY_NAME: t.stringLiteral(displayName)
+    }));
   }
-};
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  function handleCustomComponent(path, displayName) {
+    var isCustom = looksLike(path, {
+      parent: {
+        type: 'CallExpression'
+      }
+    });
+    if (!isCustom) {
+      return;
+    }
+    path.parentPath.replaceWith(buildCustomWithConfig({
+      GLAMOROUS: path.node,
+      ARGUMENTS: path.parent.arguments,
+      DISPLAY_NAME: t.stringLiteral(displayName)
+    }));
+  }
 
-var nodePath = require('path');
-
-function getLastBodyItem(path) {
-  var bodyItems = getBody(path);
-  var last = bodyItems[bodyItems.length - 1];
-  if (last.type === 'TryStatement') {
-    if (last.node.finalizer) {
-      last = getLastBodyItem(last.get('finalizer'));
+  // credit: https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/visitors/displayNameAndId.js
+  function getDisplayName(path, file) {
+    var componentName = getName(path);
+    var filename = getFileName(file);
+    if (filename) {
+      if (filename === componentName) {
+        return componentName;
+      }
+      return componentName ? `${filename}__${componentName}` : filename;
     } else {
-      last = getLastBodyItem(last.get('block'));
+      return componentName;
     }
   }
-  return last;
+
+  // credit: https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/utils/getName.js
+  function getName(path) {
+    var namedNode = void 0;
+
+    path.find(function (parentPath) {
+      if (parentPath.isObjectProperty()) {
+        // const X = { Y: glamorous }
+        namedNode = parentPath.node.key;
+      } else if (parentPath.isVariableDeclarator()) {
+        // let X; X = glamorous
+        namedNode = parentPath.node.id;
+      } else if (parentPath.isStatement()) {
+        // we've hit a statement, we should stop crawling up
+        return true;
+      }
+
+      // we've got an displayName (if we need it) no need to continue
+      if (namedNode) {
+        return true;
+      }
+      return false;
+    });
+
+    // identifiers are the only thing we can reliably get a name from
+    return t.isIdentifier(namedNode) ? namedNode.name : undefined;
+  }
+};
+
+var nodePath = require('path');
+// const nodePath = {} // handy when you wanna copy this into astexplorer.net
+
+function getFileName(file) {
+  if (!file || file.opts.filename === 'unknown') {
+    return '';
+  }
+  return file.opts.basename === 'index' ? nodePath.basename(nodePath.dirname(file.opts.filename)) : file.opts.basename;
 }
 
-function getBody(path) {
-  if (path.node && path.node.body) {
-    return getBody(path.get('body'));
-  } else {
-    return path;
-  }
+function isRequireCall(callExpression) {
+  return looksLike(callExpression, {
+    type: 'CallExpression',
+    callee: {
+      name: 'require'
+    },
+    arguments: function _arguments(args) {
+      return args && args.length === 1 && args[0].value === 'glamorous';
+    }
+  });
+}
+
+function looksLike(a, b) {
+  return a && b && Object.keys(b).every(function (bKey) {
+    var bVal = b[bKey];
+    var aVal = a[bKey];
+    if (typeof bVal === 'function') {
+      return bVal(aVal);
+    }
+    return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal);
+  });
+}
+
+function isPrimitive(val) {
+  // eslint-disable-next-line
+  return val == null || /^[sbn]/.test(typeof val);
 }

package.json

 {
   "name": "babel-plugin-glamorous-displayname",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "add a displayName property to glamorous components",
-  "keywords": [
-    "babel",
-    "babel-plugin",
-    "react",
-    "glamorous"
-  ],
   "main": "dist/index.js",
-  "files": [
-    "dist"
-  ],
+  "engines": {
+    "node": "> 4",
+    "npm": "> 3"
+  },
   "scripts": {
-    "build": "babel src --out-dir dist --ignore *.test.js,__snapshots__",
-    "prepublishOnly": "npm run test && npm run build",
-    "test": "jest --coverage"
+    "start": "nps",
+    "test": "nps test",
+    "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\""
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bernard-lin/babel-plugin-glamorous-displayname.git"
-  },
+  "files": ["dist"],
+  "keywords": ["babel", "babel-plugin", "react", "glamorous"],
   "author": "Kent C. Dodds, Bernard Lin",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/bernard-lin/babel-plugin-glamorous-displayname/issues"
-  },
-  "homepage": "https://github.com/bernard-lin/babel-plugin-glamorous-displayname#readme",
   "dependencies": {
-    "babel-runtime": "^6.23.0"
+    "babel-runtime": "^6.26.0"
   },
   "devDependencies": {
+    "all-contributors-cli": "^4.3.0",
     "ast-pretty-print": "^2.0.0",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-plugin-tester": "^3.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^20.0.3",
+    "babel-plugin-tester": "^4.0.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "jest": "^20.0.4"
-  }
+    "babel-preset-env": "^1.6.0",
+    "babel-register": "^6.24.1",
+    "eslint": "^4.2.0",
+    "eslint-config-kentcdodds": "^12.4.1",
+    "husky": "^0.14.3",
+    "jest": "^20.0.4",
+    "lint-staged": "^4.0.1",
+    "nps": "^5.4.0",
+    "nps-utils": "^1.2.0",
+    "opt-cli": "^1.5.1",
+    "prettier-eslint-cli": "^4.1.1"
+  },
+  "lint-staged": {
+    "*.+(js|json)": ["prettier-eslint --write", "git add"]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bernard-lin/babel-plugin-glamorous-displayname.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bernard-lin/babel-plugin-glamorous-displayname/issues"
+  },
+  "homepage": "https://github.com/bernard-lin/babel-plugin-glamorous-displayname#readme"
 }

README.md

@@ -1,12 +0,33 @@
-# babel-plugin-glamorous-displayname
+<div align="center">
+<h1>babel-plugin-glamorous-displayname</h1>
 
-This plugin adds a displayName property to your Glamorous components for use with React DevTools. 
+<p>add a displayName property to glamorous components</p>
+</div>
 
-[![npm](https://img.shields.io/npm/dt/babel-plugin-glamorous-displayname.svg)](https://www.npmjs.com/package/babel-plugin-glamorous-displayname)
-[![npm](https://img.shields.io/npm/v/babel-plugin-glamorous-displayname.svg)](https://www.npmjs.com/package/babel-plugin-glamorous-displayname)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/bernard-lin/babel-plugin-glamorous-displayname/master/LICENSE)
+<hr />
 
-## Example
+[![Build Status][build-badge]][build]
+[![Code Coverage][coverage-badge]][coverage]
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][npmcharts]
+[![MIT License][license-badge]][LICENSE]
 
+[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors)
+[![PRs Welcome][prs-badge]][prs]
+[![Code of Conduct][coc-badge]][coc]
+
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+
+## The problem
+
+You want to use glamorous, but you want to have a better experience with the
+DevTools (because you lose the automatic `displayName` magic that the react
+babel preset gives you).
+
+## This solution
+
+Adds the `displayName` to glamorous components.
+
 **In**
@@ -23,4 +44,5 @@
 ```js
-const MyStyledButton = glamorous.button();
-MyStyledButton.displayName = 'MyStyledButton'
+const MyStyledButton = glamorous.button.withConfig({
+  displayName: 'MyStyledButton'
+});
 ```
@@ -32,6 +54,10 @@
 
-```sh
-$ npm install babel-plugin-glamorous-displayname
+This module is distributed via [npm][npm] which is bundled with [node][node] and
+should be installed as one of your project's `devDependencies`:
+
 ```
+npm install --save-dev babel-plugin-glamorous-displayname
+```
 
+
 ## Usage
@@ -61,2 +87,51 @@
 });
-```
+```
+
+## Inspiration
+
+- [styled-components](https://github.com/styled-components/babel-plugin-styled-components)
+
+## Other Solutions
+
+I'm not aware of any, if you are please [make a pull request][prs] and add it
+here!
+
+## Contributors
+
+Thanks goes to these people ([emoji key][emojis]):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors][all-contributors] specification.
+Contributions of any kind welcome!
+
+## LICENSE
+
+MIT
+
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[build-badge]: https://img.shields.io/travis/kentcdodds/babel-plugin-glamorous-displayname.svg?style=flat-square
+[build]: https://travis-ci.org/kentcdodds/babel-plugin-glamorous-displayname
+[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/babel-plugin-glamorous-displayname.svg?style=flat-square
+[coverage]: https://codecov.io/github/kentcdodds/babel-plugin-glamorous-displayname
+[version-badge]: https://img.shields.io/npm/v/babel-plugin-glamorous-displayname.svg?style=flat-square
+[package]: https://www.npmjs.com/package/babel-plugin-glamorous-displayname
+[downloads-badge]: https://img.shields.io/npm/dm/babel-plugin-glamorous-displayname.svg?style=flat-square
+[npmcharts]: http://npmcharts.com/compare/babel-plugin-glamorous-displayname
+[license-badge]: https://img.shields.io/npm/l/babel-plugin-glamorous-displayname.svg?style=flat-square
+[license]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/blob/master/other/CODE_OF_CONDUCT.md
+[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/babel-plugin-glamorous-displayname.svg?style=social
+[github-watch]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/watchers
+[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/babel-plugin-glamorous-displayname.svg?style=social
+[github-star]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20babel-plugin-glamorous-displayname!%20https://github.com/bernard-lin/babel-plugin-glamorous-displayname%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/babel-plugin-glamorous-displayname.svg?style=social
+[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
+[all-contributors]: https://github.com/kentcdodds/all-contributors

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13028

increased by75.01%

Number of package files

5

increased by25%

Lines of code

165

increased by81.32%

Number of lines in readme file

135

increased by128.81%

Worsened metrics

Dev dependency count

20

increased by185.71%

Dependency changes

• Updatedbabel-runtime@^6.26.0