anu-verzum 1.11.0 → 1.13.0

package/README.md

@@ -17,22 +17,85 @@ npm install anu-verzum
 
 <h3>Babel setup</h3>
 
-The package ships with a Babel preset that configures JSX for you.
-Add it to your project's <code>babel.config.json</code>:
+Create a `babel.config.json` in your project root:
 
 ```json
 {
-    "presets": ["anu-verzum/babel-preset"]
+    "presets": [
+        "anu-verzum/babel-preset",
+        ["@babel/preset-env", { "targets": "last 2 Chrome versions" }]
+    ]
 }
 ```
 
-This preset transforms JSX to <code>Anu.createElement()</code> calls automatically,
-including the <code>&lt;&gt;...&lt;/&gt;</code> fragment shorthand (mapped to <code>Anu.Fragment</code>).
+`anu-verzum/babel-preset` handles two things automatically:
+
+- Transforms JSX to `Anu.createElement()` calls, including the `<>...</>` fragment shorthand (mapped to `Anu.Fragment`).
+- Strips TypeScript syntax via `@babel/plugin-transform-typescript` with `jsxPragma: 'Anu'` pre-configured, so the `Anu` import is never incorrectly elided — even in files that only use host elements like `<div>` or `<span>`.
+
+Because the preset handles TypeScript stripping itself, **do not** add `@babel/preset-typescript` separately — running both would transform TypeScript twice and cause errors.
+
+<h3>Webpack setup</h3>
+
+Install the required build dependencies:
+
+```bash
+npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env
+```
+
+Create (or update) `webpack.config.js`:
+
+```js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.tsx',           // use index.js for JavaScript-only projects
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js',
+        publicPath: '/'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.[jt]sx?$/,     // use /\.jsx?$/ for JavaScript-only projects
+                exclude: /node_modules/,
+                use: 'babel-loader'
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.tsx', '.ts']
+    },
+    plugins: [
+        new HtmlWebpackPlugin({ template: './index.html' })
+    ],
+    devServer: {
+        port: 3000,
+        historyApiFallback: true,
+        open: true
+    }
+};
+```
+
+Add scripts to `package.json`:
+
+```json
+{
+    "scripts": {
+        "start": "webpack serve",
+        "build": "webpack --mode production"
+    }
+}
+```
 
 <h3>Importing in your files</h3>
 
-Every file that contains JSX must import <code>Anu</code>, because the JSX transform
-expands to <code>Anu.createElement(...)</code> calls at compile time:
+Every file that contains JSX should import `Anu`, because the JSX transform expands to
+`Anu.createElement(...)` calls at compile time. The preset keeps this import in scope
+automatically, but it is still required at runtime:
 
 ```javascript
 import Anu from 'anu-verzum';
@@ -46,26 +109,55 @@ Anu.render(<App />, document.getElementById('root'));
 
 <h3>TypeScript setup</h3>
 
-The library is written in TypeScript and ships with declaration files (`.d.ts`) out of the box —
-no extra `@types` package is needed. The `dist/` directory contains only compiled `.js` files and
-`.d.ts` declarations, so the package works correctly under all standard TypeScript `moduleResolution`
-modes including `"node"`, `"node16"`, and `"bundler"`.
+The library ships with declaration files (`.d.ts`) out of the box — no `@types` package is needed.
+
+Install TypeScript for type checking:
+
+```bash
+npm install --save-dev typescript
+```
+
+> **Note:** `@babel/preset-typescript` is **not** needed — `anu-verzum/babel-preset` already handles TypeScript stripping. Only install `typescript` to get the `tsc` CLI for type checking.
 
-If your project uses TypeScript, add the following to your `tsconfig.json` so the compiler
-understands JSX produced by ANUVerzum:
+Create `tsconfig.json`:
 
 ```json
 {
     "compilerOptions": {
+        "target": "ES2017",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
         "jsx": "react",
         "jsxFactory": "Anu.createElement",
-        "jsxFragmentFactory": "Anu.Fragment"
-    }
+        "jsxFragmentFactory": "Anu.Fragment",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    },
+    "include": ["src"]
 }
 ```
 
-Every JSX file must still import `Anu` so that `Anu.createElement` is in scope at runtime (same
-as the plain JavaScript case).
+| Option | Value | Reason |
+|--------|-------|--------|
+| `jsx` | `"react"` | Enables JSX type-checking with a custom factory |
+| `jsxFactory` | `"Anu.createElement"` | Matches ANUVerzum's JSX transform |
+| `jsxFragmentFactory` | `"Anu.Fragment"` | Matches ANUVerzum's fragment syntax |
+| `noEmit` | `true` | Type checking only — Babel handles compilation |
+| `skipLibCheck` | `true` | Skips type checking inside `node_modules` |
+| `moduleResolution` | `"bundler"` | Correct setting for Webpack/Babel projects |
+
+#### Build pipeline
+
+Compilation and type checking are intentionally separate:
+
+```bash
+npm start          # dev server — Babel compiles, always succeeds
+npx tsc --noEmit   # type check only — surfaces type errors
+```
+
+Because compilation goes through Babel, `npm start` and `npm run build` succeed regardless of type errors. Run `npx tsc --noEmit` during development to catch type issues without blocking the build.
 
 #### Typed class components
 

package/babel-preset.js

@@ -7,6 +7,13 @@ module.exports = function () {
                     pragma: 'Anu.createElement',
                     pragmaFrag: 'Anu.Fragment'
                 }
+            ],
+            [
+                require('@babel/plugin-transform-typescript'),
+                {
+                    isTSX: true,
+                    jsxPragma: 'Anu'
+                }
             ]
         ]
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",
@@ -38,7 +38,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.21.0"
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/plugin-transform-typescript": "^7.28.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",