Init

node_modules/babel-plugin-transform-hook-names/.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [14.x, 15.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install
+      - run: yarn test

node_modules/babel-plugin-transform-hook-names/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present Marvin Hagemeister
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/babel-plugin-transform-hook-names/README.md

@@ -0,0 +1,73 @@
+# babel-plugin-transform-hook-names
+
+A babel plugin to automatically infer hook names from your code and show them in the [Preact Devtools](https://preactjs.github.io/preact-devtools/) extension.
+
+Before:
+
+![Screenshot of Preact devtools without this plugin](./screenshot-before.png)
+
+After:
+
+![Screenshot of Preact devtools with this plugin](./screenshot-after.png)
+
+Requires: Babel >= 7.12
+
+## Usage
+
+Install `babel-plugin-transform-hook-names` in your project:
+
+```bash
+npm install --save-dev babel-plugin-transform-hook-names
+# or via yarn
+yarn add -D babel-plugin-transform-hook-names
+```
+
+Then add it to your babel configuration:
+
+```json
+{
+	"plugins": ["babel-plugin-transform-hook-names"]
+}
+```
+
+## How does it work?
+
+The way it works is that each hook is wrapped with a function that is passed the same name as the variable:
+
+Input:
+
+```js
+// Works for "preact/compat" or "react" too
+import { useState, useReducer, useRef } from "preact/hooks";
+
+function Foo() {
+	const [text, setText] = useState("hello");
+	const [counter, increment] = useReducer(c => c + 1, 0);
+	const rootElement = useRef();
+	const memo = useMemo(() => text.toUpperCase(), ["text"]);
+}
+```
+
+Output:
+
+```js
+import { addHookName } from "preact/devtools";
+import { useState, useReducer, useRef } from "preact/hooks";
+
+function Foo() {
+	const [text, setText] = addHookName(useState("hello"), "text");
+	const [counter, increment] = addHookName(
+		useReducer(c => c + 1, 0),
+		"counter",
+	);
+	const rootElement = addHookName(useRef(), "rootElement");
+	const memo = addHookName(
+		useMemo(() => text.toUpperCase(), ["text"]),
+		"memo",
+	);
+}
+```
+
+## License
+
+MIT, see the [LICENSE file](./LICENSE)

node_modules/babel-plugin-transform-hook-names/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "babel-plugin-transform-hook-names",
+	"version": "1.0.2",
+	"description": "Babel plugin to add hook names for Preact devtools",
+	"main": "src/index.js",
+	"scripts": {
+		"test": "mocha -r ts-node/register --extension js,ts,tsx test/*.test.ts",
+		"prepublishOnly": "npm test"
+	},
+	"keywords": [
+		"babel",
+		"hook",
+		"preact",
+		"devtools"
+	],
+	"author": "The Preact Authors (https://preactjs.com)",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/preactjs/babel-plugin-transform-hook-names.git"
+	},
+	"peerDependencies": {
+		"@babel/core": "^7.12.10"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.10",
+		"@babel/preset-typescript": "^7.13.0",
+		"@types/babel__core": "^7.1.12",
+		"@types/chai": "^4.2.14",
+		"@types/mocha": "^8.2.0",
+		"@types/node": "^14.14.22",
+		"chai": "^4.2.0",
+		"husky": "^4.3.8",
+		"lint-staged": "^10.5.3",
+		"mocha": "^8.2.1",
+		"prettier": "^2.2.1",
+		"ts-node": "^9.1.1",
+		"typescript": "^4.1.3"
+	},
+	"lint-staged": {
+		"**/*.{js,jsx,ts,tsx,json}": [
+			"prettier --write"
+		]
+	},
+	"prettier": {
+		"useTabs": true,
+		"trailingComma": "all",
+		"arrowParens": "avoid"
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	}
+}

node_modules/babel-plugin-transform-hook-names/src/index.js

@@ -0,0 +1,88 @@
+module.exports = function ({ types: t, template }) {
+	const libs = ["preact/hooks", "preact/compat", "react"];
+	const helper = template`addHookName(CALL, NAME)`;
+
+	return {
+		name: "transform-hook-names",
+		visitor: {
+			Program: {
+				exit(path, state) {
+					if (!state.helper) return;
+					path.unshiftContainer(
+						"body",
+						template.ast`import { addHookName } from "preact/devtools";`,
+					);
+				},
+			},
+			CallExpression(path, state) {
+				const callee = path.get("callee");
+
+				if (!callee.isIdentifier()) return;
+				const hookName = callee.node.name;
+				if (!/^(useState|useReducer|useRef|useMemo)$/.test(hookName)) return;
+				if (!libs.some(lib => callee.referencesImport(lib))) return;
+
+				const p = path.parentPath.getOuterBindingIdentifierPaths();
+				const pathKeys = Object.keys(p);
+				if (!pathKeys.length) return;
+				const firstBinding = p[pathKeys[0]];
+
+				let name = firstBinding.getSource();
+
+				// If the binding is empty than the ArrayPattern was likely
+				// transpiled away. Check if this is the case
+				//
+				// ```js
+				// // untranspiled
+				// const [foo, setFoo] = useState(0)
+				//
+				// // transpiled
+				// var _useState = useState(0),
+				//   foo = _useState[0],
+				//   setFoo = _useState[1];
+				// ```
+				if (pathKeys.length === 1) {
+					if (
+						t.isVariableDeclaration(path.parentPath.parentPath.node) &&
+						t.isIdentifier(firstBinding.node)
+					) {
+						const declarations = path.parentPath.parentPath.getOuterBindingIdentifierPaths();
+						const bindingKeys = Object.keys(declarations);
+						const bindingName = firstBinding.node.name;
+
+						if (
+							/useState|useReducer/.test(hookName) &&
+							bindingKeys.length >= 3 &&
+							bindingKeys[0] === bindingName &&
+							bindingKeys.slice(1, 3).every(key => {
+								const decl = declarations[key];
+								const init = decl.parent.init;
+								return (
+									t.isMemberExpression(init) &&
+									t.isIdentifier(init.object) &&
+									init.object.name.includes(hookName)
+								);
+							})
+						) {
+							name = bindingKeys[1];
+						}
+						// Still downtranspiled but it's not a `useState` or
+						// `useReducer` call, so we can't make assumptions about
+						// the return value. We'll fall back to the hook name
+						// when this happens.
+						else if (name !== hookName && name.includes(hookName)) {
+							name = hookName;
+						}
+					}
+				}
+				state.helper = true;
+				path.replaceWith(
+					helper({
+						CALL: t.clone(path.node),
+						NAME: t.stringLiteral(name),
+					}),
+				);
+			},
+		},
+	};
+};