Skip to content

Commit af5d069

Browse files
feat: transform entrypoint. (#88)
1 parent 246f74c commit af5d069

7 files changed

Lines changed: 1185 additions & 17 deletions

File tree

README.md

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -68,39 +68,52 @@ const button = jsx`
6868
document.body.append(button)
6969
```
7070

71-
### Source transpilation (`transpileJsxSource`)
71+
### Source transpilation (`transpileJsxSource` + `transformJsxSource`)
7272

73-
Need to transform raw JSX source text (e.g. code typed in an editor) without Babel? Use `transpileJsxSource`:
73+
Need to transform raw JSX source text (for example, code typed in an editor) without Babel?
74+
Use one of these subpath exports:
75+
76+
- `@knighted/jsx/transpile` for code-only output (`{ code, changed }`).
77+
- `@knighted/jsx/transform` for code plus parser-backed import metadata and diagnostics
78+
(`{ code, changed, imports, diagnostics }`).
7479

7580
```ts
7681
import { transpileJsxSource } from '@knighted/jsx/transpile'
82+
import { transformJsxSource } from '@knighted/jsx/transform'
7783

7884
const input = `
79-
const App = () => {
80-
return <button>click me</button>
81-
}
85+
import React from 'react'
86+
const App = () => <button>click me</button>
8287
`
8388

84-
const { code } = transpileJsxSource(input)
85-
// -> const App = () => { return React.createElement("button", null, "click me") }
89+
const transpiled = transpileJsxSource(input)
90+
// -> { code, changed }
91+
92+
const transformed = transformJsxSource(input, { typescript: 'strip' })
93+
// -> { code, changed, imports, diagnostics }
8694
```
8795

88-
By default this emits `React.createElement(...)` and `React.Fragment`. Override them when needed:
96+
Both entrypoints emit `React.createElement(...)` and `React.Fragment` by default. Override
97+
them when needed:
8998

9099
```ts
91100
transpileJsxSource(input, {
92101
createElement: '__jsx',
93102
fragment: '__fragment',
94103
})
104+
105+
transformJsxSource(input, {
106+
createElement: '__jsx',
107+
fragment: '__fragment',
108+
})
95109
```
96110

97-
By default, TypeScript syntax is preserved in the output. If your source needs to run directly
98-
as JavaScript (for example, code entered in an editor), enable type stripping:
111+
By default, TypeScript syntax is preserved in output. If your source needs to run directly as
112+
JavaScript, enable type stripping:
99113

100114
```ts
101-
transpileJsxSource(input, {
102-
typescript: 'strip',
103-
})
115+
transpileJsxSource(input, { typescript: 'strip' })
116+
transformJsxSource(input, { typescript: 'strip' })
104117
```
105118

106119
Supported `typescript` modes:
@@ -109,6 +122,13 @@ Supported `typescript` modes:
109122
- `'strip'`: remove type-only declarations and erase inline type syntax (`: T`, `as T`,
110123
`satisfies T`, non-null assertions, and type assertions) while still transpiling JSX.
111124

125+
Environment note:
126+
127+
- Both APIs are ESM-first and work in Node.
128+
- For direct browser usage of `@knighted/jsx/transform`, use a CDN/runtime that can resolve
129+
`oxc-transform` for the browser build (for example, modern ESM CDNs that bundle or map
130+
WASM/native bindings automatically).
131+
112132
### React runtime (`reactJsx`)
113133

114134
Need to compose React elements instead of DOM nodes? Import the dedicated helper from the `@knighted/jsx/react` subpath (React 18+ and `react-dom` are still required to mount the tree):

docs/next-steps.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ A few focused improvements will give @knighted/jsx a more polished, batteries-in
66
2. **Starter templates** – Ship StackBlitz/CodeSandbox starters (DOM-only, React, Lit + React) that highlight CDN flows and bundler builds. Link them in the README/docs so developers can experiment without cloning the repo.
77
3. **Diagnostics UX polish** – Build on the new `enableJsxDebugDiagnostics` helper by surfacing template codeframes, component names, and actionable remediation steps. Ship CLI toggles / README callouts so CDN demos and starters enable debug mode automatically in development while keeping production bundles pristine.
88
4. **Bundle-size trims** – With debug helpers moved to opt-in paths, refocus on analyzer-driven trims (property-information lookups, node bootstrap reuse, shared helper chunks). Validate the new floor across lite + standard builds with `npm run sizecheck` and document any remaining hotspots so future releases keep shrinking.
9-
5. **TypeScript transform strategy**Evaluate replacing (or augmenting) manual TS syntax erasure in `transpileJsxSource` with `oxc-transform` for `typescript: 'strip'` mode. Build a fixture matrix (annotations, interfaces/type aliases, `as`, `satisfies`, non-null assertions, generics) and compare output correctness, runtime behavior, and bundle impact before deciding whether to adopt `oxc-transform` as the default implementation.
9+
5. **CLI init support for transform browser runtime**Extend `@knighted/jsx init` so browser-oriented projects can opt into the `@knighted/jsx/transform` runtime path with the required `oxc-transform` browser/WASM setup (and clear install guidance for bundler vs CDN flows). Define a small contract for what init configures, then validate with fixture projects that call `transformJsxSource` in browser builds and confirm both successful execution and actionable failure diagnostics when bindings are missing.

0 commit comments

Comments
 (0)