feat: add style['--source-code-location'] to all JSX Elements

Author: zjffun

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 2

.github/workflows/publish.yml

@@ -0,0 +1,18 @@
+name: Node.js Package
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+      - run: yarn install
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,3 +1,6 @@
+lib
+.DS_Store
+
 # Logs
 logs
 *.log

.npmignore

@@ -0,0 +1,3 @@
+src
+test
+*.log

.prettierrc

@@ -0,0 +1 @@
+{}

CHANGELOG.md

@@ -0,0 +1,3 @@
+# v0.0.1
+
+Add `style['--source-code-location']` to all JSX Elements

README.md

@@ -1,2 +1,59 @@
 # babel-plugin-transform-react-jsx-source-to-style
-Add `style['--source-code-location']` to all JSX Elements.
+
+[![npm](https://img.shields.io/npm/v/babel-plugin-transform-react-jsx-source-to-style)](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source-to-style)
+
+> Add `style['--source-code-location']` to all JSX Elements.
+
+English | [简体中文](./README.zh-CN.md)
+
+## Example
+
+**In**
+
+```
+<sometag />
+```
+
+**Out**
+
+```
+<sometag style={{'--source-code-location': `${__jsxFileName}:${lineNumber}:${columnNumber}`}} />
+```
+
+## Install
+
+Using npm:
+
+```sh
+npm install --save-dev babel-plugin-transform-react-jsx-source-to-style
+```
+
+or using yarn:
+
+```sh
+yarn add babel-plugin-transform-react-jsx-source-to-style --dev
+```
+
+## Usage
+
+### With a configuration file (Recommended)
+
+```json title="babel.config.json"
+{
+  "plugins": ["babel-plugin-transform-react-jsx-source-to-style"]
+}
+```
+
+### Via CLI
+
+```sh
+babel --plugins babel-plugin-transform-react-jsx-source-to-style script.js
+```
+
+### Via Node API
+
+```js
+require("@babel/core").transformSync("code", {
+  plugins: ["babel-plugin-transform-react-jsx-source-to-style"],
+});
+```

README.zh-CN.md

@@ -0,0 +1,59 @@
+# babel-plugin-transform-react-jsx-source-to-style
+
+[![npm](https://img.shields.io/npm/v/babel-plugin-transform-react-jsx-source-to-style)](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source-to-style)
+
+> 为所有 JSX 元素增加 `style['--source-code-location']`。
+
+English | [简体中文](./README.zh-CN.md)
+
+## 示例
+
+**输入**
+
+```
+<sometag />
+```
+
+**输入**
+
+```
+<sometag style={{'--source-code-location': `${__jsxFileName}:${lineNumber}:${columnNumber}`}} />
+```
+
+## 安装
+
+使用 npm：
+
+```sh
+npm install --save-dev babel-plugin-transform-react-jsx-source-to-style
+```
+
+或者使用 yarn：
+
+```sh
+yarn add babel-plugin-transform-react-jsx-source-to-style --dev
+```
+
+## 使用
+
+### 通过配置文件（推荐）
+
+```json title="babel.config.json"
+{
+  "plugins": ["babel-plugin-transform-react-jsx-source-to-style"]
+}
+```
+
+### 通过 CLI
+
+```sh
+babel --plugins babel-plugin-transform-react-jsx-source-to-style script.js
+```
+
+### 通过 Node API
+
+```js
+require("@babel/core").transformSync("code", {
+  plugins: ["babel-plugin-transform-react-jsx-source-to-style"],
+});
+```

eslint.config.mjs

@@ -0,0 +1,29 @@
+import { includeIgnoreFile } from "@eslint/compat";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import eslint from "@eslint/js";
+import prettierConfig from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+import globals from "globals";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, ".gitignore");
+
+export default tseslint.config(
+  includeIgnoreFile(gitignorePath),
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierConfig,
+  {
+    files: ["**/*.test.js"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
+  },
+);

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "babel-plugin-transform-react-jsx-source-to-style",
+  "version": "0.0.0",
+  "description": "Add style['--source-code-location'] to all JSX Elements.",
+  "keywords": [
+    "babel-plugin"
+  ],
+  "homepage": "https://github.com/zjffun/babel-plugin-transform-react-jsx-source-to-style#readme",
+  "bugs": {
+    "url": "https://github.com/zjffun/babel-plugin-transform-react-jsx-source-to-style/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zjffun/babel-plugin-transform-react-jsx-source-to-style.git"
+  },
+  "license": "MIT",
+  "author": "Jufeng Zhang <[email protected]>",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.js",
+  "scripts": {
+    "build": "rimraf lib && tsc",
+    "dev": "tsc -w",
+    "eslint-fix": "eslint --fix .",
+    "prepublishOnly": "npm run test && npm run build",
+    "prettier-fix": "prettier --write .",
+    "sort-package-json": "sort-package-json",
+    "test": "jest",
+    "update-snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@babel/helper-plugin-utils": "^7.24.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/helper-plugin-test-runner": "^7.24.7",
+    "@babel/plugin-syntax-jsx": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@eslint/compat": "^1.1.1",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.7.0"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0-0"
+  },
+  "engines": {
+    "node": ">=6.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

src/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic-sample 1`] = `
+"var _jsxFileName = "/fake/path/mock.js";
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: {
+    '--source-code-location': _jsxFileName + ':' + 2 + ':' + 9
+  }
+});"
+`;
+
+exports[`no-jsx 1`] = `"var x = 42;"`;
+
+exports[`with-style add add string style 1`] = `
+"var _jsxFileName = "/fake/path/mock.js";
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: '--source-code-location:' + (_jsxFileName + ':' + 2 + ':' + 9) + ';' + ""
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: '--source-code-location:' + (_jsxFileName + ':' + 3 + ':' + 9) + ';' + ""
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: '--source-code-location:' + (_jsxFileName + ':' + 4 + ':' + 9) + ';' + 0
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: '--source-code-location:' + (_jsxFileName + ':' + 5 + ':' + 9) + ';' + 1
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: '--source-code-location:' + (_jsxFileName + ':' + 6 + ':' + 9) + ';' + "--source-code-location: test"
+});"
+`;
+
+exports[`with-style add assign object style 1`] = `
+"var _jsxFileName = "/fake/path/mock.js";
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: Object.assign({
+    '--source-code-location': _jsxFileName + ':' + 2 + ':' + 9
+  }, null)
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: Object.assign({
+    '--source-code-location': _jsxFileName + ':' + 3 + ':' + 9
+  }, undefined)
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: Object.assign({
+    '--source-code-location': _jsxFileName + ':' + 4 + ':' + 9
+  }, {
+    '--source-code-location': test
+  })
+});
+var x = /*#__PURE__*/React.createElement("sometag", {
+  style: Object.assign({
+    '--source-code-location': _jsxFileName + ':' + 5 + ':' + 9
+  }, styleObj)
+});"
+`;

src/__tests__/index.test.js

@@ -0,0 +1,47 @@
+const babel = require("@babel/core");
+const plugin = require("../../");
+
+const babelConfig = {
+  filename: "/fake/path/mock.js",
+  presets: ["@babel/preset-react"],
+  plugins: [plugin],
+};
+
+it("basic-sample", () => {
+  const example = `
+var x = <sometag />;
+`;
+  const { code } = babel.transform(example, babelConfig);
+  expect(code).toMatchSnapshot();
+});
+
+it("no-jsx", () => {
+  const example = `
+var x = 42;
+`;
+  const { code } = babel.transform(example, babelConfig);
+  expect(code).toMatchSnapshot();
+});
+
+it("with-style add assign object style", () => {
+  const example = `
+var x = <sometag style={null} />;
+var x = <sometag style={undefined} />;
+var x = <sometag style={{'--source-code-location': test}} />;
+var x = <sometag style={styleObj} />;
+`;
+  const { code } = babel.transform(example, babelConfig);
+  expect(code).toMatchSnapshot();
+});
+
+it("with-style add add string style", () => {
+  const example = `
+var x = <sometag style="" />;
+var x = <sometag style={""} />;
+var x = <sometag style={0} />;
+var x = <sometag style={1} />;
+var x = <sometag style={"--source-code-location: test"} />;
+`;
+  const { code } = babel.transform(example, babelConfig);
+  expect(code).toMatchSnapshot();
+});