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

Comparing version 2.1.0 to 2.2.0

dist/index.js

@@ -8,12 +8,5 @@ 'use strict';
 exports.default = function (babel) {
-  var t = babel.types,
-      template = babel.template;
+  var t = babel.types;
 
-  var identifiers = new Set();
-  var buildBuiltInWithConfig = template(`
-    GLAMOROUS.BUILT_IN.withConfig({displayName: DISPLAY_NAME})
-  `);
-  var buildCustomWithConfig = template(`
-    GLAMOROUS(ARGUMENTS).withConfig({displayName: DISPLAY_NAME})
-  `);
+  var references = new Set();
   return {
@@ -33,3 +26,3 @@ name: 'babel-plugin-glamorous-displayName',
         referencePaths.forEach(function (reference) {
-          identifiers.add(reference);
+          references.add(reference);
         });
@@ -53,3 +46,3 @@ },
           referencePaths.forEach(function (reference) {
-            identifiers.add(reference);
+            references.add(reference);
           });
@@ -62,8 +55,3 @@ }
 
-          Array.from(identifiers).forEach(function (identifier) {
-            var displayName = getDisplayName(identifier, file);
-
-            handleBuiltIns(identifier, displayName);
-            handleCustomComponent(identifier, displayName);
-          });
+          (0, _handleGlamorousReferences2.default)(Array.from(references), file, babel);
         }
@@ -73,97 +61,16 @@ }
   };
+};
 
-  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)
-    }));
-  }
+var _handleGlamorousReferences = require('./handle-glamorous-references');
 
-  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 _handleGlamorousReferences2 = _interopRequireDefault(_handleGlamorousReferences);
 
-  // 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 {
-      return componentName;
-    }
-  }
+var _looksLike = require('./looks-like');
 
-  // credit: https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/utils/getName.js
-  function getName(path) {
-    var namedNode = void 0;
+var _looksLike2 = _interopRequireDefault(_looksLike);
 
-    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;
-      }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-      // 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 isRequireCall(callExpression) {
-  return looksLike(callExpression, {
+  return (0, _looksLike2.default)(callExpression, {
     type: 'CallExpression',
@@ -177,18 +84,2 @@ callee: {
   });
-}
-
-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

@@ -1,67 +0,1 @@
-{
-  "name": "babel-plugin-glamorous-displayname",
-  "version": "2.1.0",
-  "description": "add a displayName property to glamorous components",
-  "main": "dist/index.js",
-  "engines": {
-    "node": "> 4",
-    "npm": "> 3"
-  },
-  "scripts": {
-    "start": "nps",
-    "test": "nps test",
-    "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\"",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
-  },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "babel",
-    "babel-plugin",
-    "react",
-    "glamorous"
-  ],
-  "author": "Kent C. Dodds, Bernard Lin",
-  "license": "MIT",
-  "dependencies": {
-    "babel-runtime": "^6.26.0"
-  },
-  "devDependencies": {
-    "all-contributors-cli": "^4.3.0",
-    "ast-pretty-print": "^2.0.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-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",
-    "semantic-release": "^7.0.2"
-  },
-  "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"
-}
+{"name":"babel-plugin-glamorous-displayname","version":"2.2.0","description":"add a displayName property to glamorous components","main":"dist/index.js","engines":{"node":"> 4","npm":"> 3"},"scripts":{"add-contributor":"kcd-scripts contributors add","build":"kcd-scripts build","lint":"kcd-scripts lint","test":"kcd-scripts test","test:update":"npm test -- --updateSnapshot","validate":"kcd-scripts validate","setup":"npm install && npm run validate -s","precommit":"kcd-scripts precommit"},"files":["dist","macro.js"],"keywords":["babel","babel-plugin","react","glamorous","babel-plugin-macros"],"author":"Kent C. Dodds, Bernard Lin","license":"MIT","dependencies":{"babel-plugin-macros":"^2.1.0","babel-runtime":"^6.26.0"},"devDependencies":{"ast-pretty-print":"^2.0.0","babel-plugin-tester":"^4.0.0","kcd-scripts":"^0.32.2"},"eslintConfig":{"extends":["./node_modules/kcd-scripts/eslint.js"]},"eslintIgnore":["node_modules","coverage","dist"],"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

@@ -13,3 +13,3 @@ <div align="center">
 [![downloads][downloads-badge]][npmcharts]
-[![MIT License][license-badge]][LICENSE]
+[![MIT License][license-badge]][license]
 
@@ -37,6 +37,6 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
 ```js
-const MyStyledButton = glamorous.button();
+const MyStyledButton = glamorous.button()
 ```
 
-![Alt text](https://cloud.githubusercontent.com/assets/16327281/25269334/2617d1c4-264a-11e7-98aa-9b67c9c26ad6.png "React DevTools")
+![Alt text](https://cloud.githubusercontent.com/assets/16327281/25269334/2617d1c4-264a-11e7-98aa-9b67c9c26ad6.png 'React DevTools')
 
@@ -47,8 +47,27 @@ **Out**
 const MyStyledButton = glamorous.button.withConfig({
-  displayName: 'MyStyledButton'
-});
+  displayName: 'MyStyledButton',
+})
 ```
 
-![Alt text](https://cloud.githubusercontent.com/assets/16327281/25269284/f4c4791a-2649-11e7-8457-f367ea8fab59.png "React DevTools")
+![Alt text](https://cloud.githubusercontent.com/assets/16327281/25269284/f4c4791a-2649-11e7-8457-f367ea8fab59.png 'React DevTools')
 
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+* [Installation](#installation)
+* [Usage](#usage)
+  * [Via `.babelrc` (Recommended)](#via-babelrc-recommended)
+  * [Via CLI](#via-cli)
+  * [Via Node API](#via-node-api)
+* [Use with `babel-plugin-macros`](#use-with-babel-plugin-macros)
+* [Inspiration](#inspiration)
+* [Other Solutions](#other-solutions)
+* [Contributors](#contributors)
+* [LICENSE](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## Installation
@@ -63,3 +82,2 @@
 
-
 ## Usage
@@ -87,9 +105,25 @@
 require('babel').transform('code', {
-  plugins: ['glamorous-displayname']
-});
+  plugins: ['glamorous-displayname'],
+})
 ```
 
+## Use with `babel-plugin-macros`
+
+Once you've [configured `babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md)
+you can import/require the `glamorous` macro at `babel-plugin-glamorous/macro`.
+For example:
+
+```javascript
+import glamorous from 'babel-plugin-glamorous/macro'
+
+const MyStyledInput = glamorous.input({
+  /* your styles */
+})
+```
+
+> You could also use [`glamorous.macro`][glamorous.macro] if you'd prefer to type less 😀
+
 ## Inspiration
 
-- [styled-components](https://github.com/styled-components/babel-plugin-styled-components)
+* [styled-components](https://github.com/styled-components/babel-plugin-styled-components)
 
@@ -106,4 +140,7 @@ ## Other Solutions
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars0.githubusercontent.com/u/16327281?v=4" width="100px;"/><br /><sub>Bernard Lin</sub>](https://github.com/bernard-lin)<br />[💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Documentation") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Tests") | [<img src="https://avatars0.githubusercontent.com/u/1500684?v=4" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[🐛](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/issues?q=author%3Akentcdodds "Bug reports") [💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Documentation") [🤔](#ideas-kentcdodds "Ideas, Planning, & Feedback") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [📢](#talk-kentcdodds "Talks") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Tests") |
+
+<!-- prettier-ignore -->
+| [<img src="https://avatars0.githubusercontent.com/u/16327281?v=4" width="100px;"/><br /><sub><b>Bernard Lin</b></sub>](https://github.com/bernard-lin)<br />[💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Documentation") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Tests") | [<img src="https://avatars0.githubusercontent.com/u/1500684?v=4" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[🐛](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/issues?q=author%3Akentcdodds "Bug reports") [💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Documentation") [🤔](#ideas-kentcdodds "Ideas, Planning, & Feedback") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [📢](#talk-kentcdodds "Talks") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Tests") |
 | :---: | :---: |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
@@ -143,1 +180,2 @@
 [all-contributors]: https://github.com/kentcdodds/all-contributors
+[glamorous.macro]: https://www.npmjs.com/package/glamorous.macro

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

Improved metrics

Total package byte prevSize

17341

increased by19.77%

Dev dependency count

3

decreased by-85.71%

Number of package files

9

increased by80%

Lines of code

216

increased by30.91%

Number of lines in readme file

175

increased by27.74%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbabel-plugin-macros@^2.1.0

• + Added@babel/code-frame@7.24.2(transitive)

• + Added@babel/helper-validator-identifier@7.22.20(transitive)

• + Added@babel/highlight@7.24.2(transitive)

• + Added@babel/runtime@7.24.4(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.13.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.0.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedyaml@1.10.2(transitive)