@ktjs/babel-plugin-ktjsx 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 kasukabe tsumugi
+
+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.

package/README.md

@@ -0,0 +1,25 @@
+# babel-plugin-ktjsx
+
+`@ktjs/babel-plugin-ktjsx` is a Babel plugin that enhances compiled JSX output to better support SVG and namespace-aware element creation.
+
+Basic usage (Babel):
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [['@ktjs/babel-plugin-ktjsx', { svgTags: ['svg', 'g', 'path'] }]],
+};
+```
+
+This plugin will transform calls like `createElement('svg', ...)` (or `h('svg', ...)`) into `createElementNS('http://www.w3.org/2000/svg', 'svg', ...)` so that SVG elements are created in the correct namespace.
+
+Options:
+
+- `svgTags` - array of tag names to treat as SVG (default includes common SVG tags)
+- `namespaceURI` - SVG namespace (default `http://www.w3.org/2000/svg`)
+- `createElementNames` - functions to consider as element factories (default `['createElement','h']`)
+
+Notes:
+
+- The plugin is intended to run after JSX has been transformed to `createElement`/`h` calls. If you use a custom JSX pragma, include that name in `createElementNames`.
+- A Rollup wrapper can be created to run this plugin during bundling; prefer using Babel for precise AST-level transforms.

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { PluginObj } from '@babel/core';
+type KTJSXPluginOptions = {};
+export default function babelPluginKtjsx(_: any, options: KTJSXPluginOptions): PluginObj;
+export { babelPluginKtjsx };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,KAAK,kBAAkB,GAAG,EAAE,CAAC;AAa7B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,kBAAkB,GAAG,SAAS,CAwFvF;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,93 @@
+import * as t from '@babel/types';
+const SVG_ATTR_FLAG = '__kt_svg__';
+const MATHML_ATTR_FLAG = '__kt_mathml__';
+function isSvgTag(tag) {
+    return tag === 'svg' || (typeof tag === 'string' && tag.startsWith('svg:'));
+}
+function isMathTag(tag) {
+    return tag === 'math' || (typeof tag === 'string' && tag.startsWith('math:'));
+}
+export default function babelPluginKtjsx(_, options) {
+    return {
+        name: 'babel-plugin-ktjsx',
+        visitor: {
+            JSXElement(path) {
+                const opening = path.node.openingElement;
+                if (!opening) {
+                    return;
+                }
+                const oname = opening.name;
+                if (t.isJSXNamespacedName(oname)) {
+                    return;
+                }
+                if (!t.isJSXIdentifier(oname)) {
+                    return;
+                }
+                const tag = oname.name;
+                const isSvgRoot = isSvgTag(tag);
+                const isMathRoot = isMathTag(tag);
+                let insideSvg = false;
+                if (!isSvgRoot) {
+                    /**
+                     * @type {import('@babel/core').NodePath | null}
+                     */
+                    const parentSvg = path.findParent((p) => {
+                        if (!p.isJSXElement()) {
+                            return false;
+                        }
+                        const popping = p.node.openingElement && p.node.openingElement.name;
+                        if (!popping) {
+                            return false;
+                        }
+                        if (t.isJSXIdentifier(popping)) {
+                            return isSvgTag(popping.name);
+                        }
+                        if (t.isJSXNamespacedName(popping)) {
+                            return t.isJSXIdentifier(popping.namespace) && popping.namespace.name === 'svg';
+                        }
+                        return false;
+                    });
+                    insideSvg = !!parentSvg;
+                }
+                let insideMath = false;
+                if (!isMathRoot) {
+                    /**
+                     * @type {import('@babel/core').NodePath | null}
+                     */
+                    const parentMath = path.findParent((p) => {
+                        if (!p.isJSXElement()) {
+                            return false;
+                        }
+                        const popping = p.node.openingElement && p.node.openingElement.name;
+                        if (!popping) {
+                            return false;
+                        }
+                        if (t.isJSXIdentifier(popping)) {
+                            return isMathTag(popping.name);
+                        }
+                        if (t.isJSXNamespacedName(popping)) {
+                            return t.isJSXIdentifier(popping.namespace) && popping.namespace.name === 'math';
+                        }
+                        return false;
+                    });
+                    insideMath = !!parentMath;
+                }
+                // If this element is neither an svg/math root nor inside one, skip.
+                const inSvgContext = isSvgRoot || insideSvg;
+                const inMathContext = isMathRoot || insideMath;
+                if (!inSvgContext && !inMathContext) {
+                    return;
+                }
+                // Add boolean attribute (SVG or MATHML) to opening element if not present
+                const attrs = opening.attributes || [];
+                const flag = inSvgContext ? SVG_ATTR_FLAG : MATHML_ATTR_FLAG;
+                const hasFlag = attrs.some((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === flag);
+                if (!hasFlag) {
+                    attrs.push(t.jsxAttribute(t.jsxIdentifier(flag)));
+                    opening.attributes = attrs;
+                }
+            },
+        },
+    };
+}
+export { babelPluginKtjsx };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ktjs/babel-plugin-ktjsx",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Kasukabe Tsumugi",
+    "email": "futami16237@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ktjs/kt.js"
+  },
+  "license": "MIT",
+  "description": "Babel plugin to make JSX-generated SVG use proper namespaces.",
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/types": "^7.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/babel__core": "^7.20.5",
+    "rollup": "^3.0.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b --force",
+    "test": "node tests/run.js"
+  }
+}