@ktjs/babel-plugin-ktjsx 0.0.4 → 0.2.1

package/README.md

@@ -1,25 +1,52 @@
-# babel-plugin-ktjsx
+# @ktjs/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.
+`@ktjs/babel-plugin-ktjsx` is the Babel entry for KT.js JSX transforms, re-exported from `@ktjs/transformer`.
 
-Basic usage (Babel):
+Current behavior:
+
+- add KT.js internal SVG / MathML flags on JSX elements in SVG / MathML context
+- validate directive combinations (`k-if` + `k-else`, and `k-for` mixed with conditional directives)
+- transform `k-for` into `source.map(...)` and remove `k-for` / `k-key` attributes
+- normalize sibling `k-if` / `k-else-if` / `k-else` chains into explicit `k-if` conditions
+
+## Install
+
+```bash
+pnpm add -D @ktjs/babel-plugin-ktjsx @babel/core
+```
+
+## Usage (ESM Babel config)
 
 ```js
-// babel.config.js
+// babel.config.mjs
+import ktjsx from '@ktjs/babel-plugin-ktjsx';
+
+export default {
+  plugins: [ktjsx],
+};
+```
+
+## Usage (CommonJS Babel config)
+
+```js
+// babel.config.cjs
+const { default: ktjsx } = require('@ktjs/babel-plugin-ktjsx');
+
 module.exports = {
-  plugins: [['@ktjs/babel-plugin-ktjsx', { svgTags: ['svg', 'g', 'path'] }]],
+  plugins: [ktjsx],
 };
 ```
 
-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.
+## Named exports
 
-Options:
+```ts
+import { transformerKTjsx, transformWithKTjsx } from '@ktjs/babel-plugin-ktjsx';
+```
 
-- `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']`)
+- `transformerKTjsx`: Babel plugin factory (same as default export)
+- `transformWithKTjsx`: programmatic transform helper
 
-Notes:
+## 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.
+- This plugin works on JSX AST directly (not on `createElement(...)` output).
+- There are no custom plugin options yet.

package/dist/babel-plugin-ktjsx/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, transformerKTjsx } from '@ktjs/transformer';
+export type { KTjsxTransformOptions } from '@ktjs/transformer';
+export { transformWithKTjsx } from '@ktjs/transformer';
+//# sourceMappingURL=index.d.ts.map

package/dist/babel-plugin-ktjsx/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/babel-plugin-ktjsx/src/transform.d.ts

@@ -0,0 +1,3 @@
+export type { KTjsxTransformOptions } from '@ktjs/transformer';
+export { transformWithKTjsx } from '@ktjs/transformer';
+//# sourceMappingURL=transform.d.ts.map

package/dist/babel-plugin-ktjsx/src/transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/transform.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1 @@
-import { PluginObj } from '@babel/core';
-/**
- * Transform `<svg ...>` and `<math ...>` JSX elements to include a special attribute flag
- */
-export default function babelKTjsx(): PluginObj;
-//# sourceMappingURL=index.d.ts.map
+export { KTjsxTransformOptions, default, transformWithKTjsx, transformerKTjsx } from '@ktjs/transformer';

package/dist/index.mjs

@@ -0,0 +1,2 @@
+export { default, transformWithKTjsx, transformerKTjsx } from '@ktjs/transformer';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/transformer/src/if-else.d.ts

@@ -0,0 +1,4 @@
+import type { NodePath } from '@babel/core';
+import * as t from '@babel/types';
+export declare function transformConditionalChains(path: NodePath<t.JSXElement>): void;
+//# sourceMappingURL=if-else.d.ts.map

package/dist/transformer/src/if-else.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"if-else.d.ts","sourceRoot":"","sources":["../../../../transformer/src/if-else.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAiFlC,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QA8DtE"}

package/dist/transformer/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, transformerKTjsx } from './plugin.js';
+export type { KTjsxTransformOptions } from './transform.js';
+export { transformWithKTjsx } from './transform.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/transformer/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../transformer/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/transformer/src/k-for.d.ts

@@ -0,0 +1,5 @@
+import { type NodePath } from '@babel/core';
+import * as t from '@babel/types';
+export declare function validateDirectiveCombinations(path: NodePath<t.JSXElement>): void;
+export declare function transformKFor(path: NodePath<t.JSXElement>): boolean;
+//# sourceMappingURL=k-for.d.ts.map

package/dist/transformer/src/k-for.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"k-for.d.ts","sourceRoot":"","sources":["../../../../transformer/src/k-for.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAWlC,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAkBzE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,OAAO,CAqCnE"}

package/dist/transformer/src/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { PluginObj } from '@babel/core';
+export declare function transformerKTjsx(): PluginObj;
+export default transformerKTjsx;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/transformer/src/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../../transformer/src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK7C,wBAAgB,gBAAgB,IAAI,SAAS,CAgB5C;AAED,eAAe,gBAAgB,CAAC"}

package/dist/transformer/src/svg-mathml-flag.d.ts

@@ -0,0 +1,4 @@
+import type { NodePath } from '@babel/core';
+import * as t from '@babel/types';
+export declare function addFlagToSvgMathMLElement(path: NodePath<t.JSXElement>): void;
+//# sourceMappingURL=svg-mathml-flag.d.ts.map

package/dist/transformer/src/svg-mathml-flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-mathml-flag.d.ts","sourceRoot":"","sources":["../../../../transformer/src/svg-mathml-flag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAiFrE"}

package/dist/transformer/src/transform.d.ts

@@ -0,0 +1,8 @@
+import { type TransformOptions } from '@babel/core';
+type ReservedTransformOptions = 'ast' | 'babelrc' | 'configFile' | 'parserOpts' | 'plugins' | 'sourceMaps';
+export type KTjsxTransformOptions = Omit<TransformOptions, ReservedTransformOptions> & {
+    parserPlugins?: NonNullable<TransformOptions['parserOpts']>['plugins'];
+};
+export declare function transformWithKTjsx(code: string, options?: KTjsxTransformOptions): Promise<import("@babel/core").BabelFileResult>;
+export {};
+//# sourceMappingURL=transform.d.ts.map

package/dist/transformer/src/transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../transformer/src/transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAKpE,KAAK,wBAAwB,GACzB,KAAK,GACL,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,YAAY,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,GAAG;IACrF,aAAa,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;CACxE,CAAC;AAEF,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,qBAA0B,kDAezF"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@ktjs/babel-plugin-ktjsx",
-  "version": "0.0.4",
+  "version": "0.2.1",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -25,6 +25,10 @@
   },
   "license": "MIT",
   "description": "Babel plugin to make JSX-generated SVG use proper namespaces.",
+  "description_zh": "用于让 JSX 生成的 SVG 使用正确命名空间的 Babel 插件。",
+  "dependencies": {
+    "@ktjs/transformer": "^*"
+  },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/types": "^7.0.0",
@@ -35,9 +39,5 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"
-  },
-  "scripts": {
-    "build": "node build.js",
-    "test": "node tests/run.js"
   }
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAiBxC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,IAAI,SAAS,CAwF9C"}

package/dist/index.js

@@ -1,96 +0,0 @@
-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:'));
-}
-//_: any, options: KTJSXPluginOptions
-/**
- * Transform `<svg ...>` and `<math ...>` JSX elements to include a special attribute flag
- */
-export default function babelKTjsx() {
-    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;
-                }
-            },
-        },
-    };
-}