{"_id":"@brandonsussman/jmapper","name":"@brandonsussman/jmapper","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@brandonsussman/jmapper","version":"0.1.0","description":"Use JSON markup in react instead of html","keywords":["JMapper"],"homepage":"https://github.com/brandonsussman/JMapper#readme","bugs":{"url":"https://github.com/brandonsussman/JMapper/issues"},"repository":{"type":"git","url":"git+https://github.com/brandonsussman/JMapper.git"},"license":"UNLICENSED","author":{"name":"Brandon Sussman"},"type":"module","exports":{".":{"types":"./dist-lib/index.d.ts","import":"./dist-lib/index.js","default":"./dist-lib/index.js"},"./plugin":{"types":"./plugins/vite-plugin-jmapper.ts","import":"./plugins/vite-plugin-jmapper.ts","default":"./plugins/vite-plugin-jmapper.ts"}},"main":"./dist-lib/index.js","types":"./dist-lib/index.d.ts","scripts":{"generate-html":"node scripts/generate-html.mjs","dev":"npm run generate-html && vite","build":"npm run generate-html && tsc && vite build","build:lib":"vite build --config vite.config.lib.ts && tsc -p tsconfig.lib.json","preview":"vite preview","prepublishOnly":"npm run build:lib"},"dependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@babel/core":"^7.29.0","@babel/plugin-transform-typescript":"^7.28.6","@babel/traverse":"^7.29.0","@babel/types":"^7.29.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","jsdom":"^28.1.0","typescript":"~5.9.3","vite":"^8.0.0-beta.13","vitest":"^4.0.18"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"overrides":{"vite":"^8.0.0-beta.13"},"module":"./dist-lib/index.js","gitHead":"38122ac0f5ec65cb0e7f3a49c4b74da6738d6be9","_id":"@brandonsussman/jmapper@0.1.0","_nodeVersion":"22.17.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-bFMbR9FW1m1456K+YiR8CjzL11cZjOjvwmWRu/ZMDkU+mp8NIw5vd7tiWUB8kj0B0X0TU9LclGBD3NNd3pW38w==","shasum":"59ffaa104b74cbddc7934934e8746e2a2cf34043","tarball":"https://registry.npmjs.org/@brandonsussman/jmapper/-/jmapper-0.1.0.tgz","fileCount":8,"unpackedSize":19479,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBcu8d6z0k+DfvEBueYQX2QpmaqT7SsUh7UfqGIRPgorAiEAxNcMmZ5W0J91brhmSauO0qwpip7vt2sQc0WuCQzq1g0="}]},"_npmUser":{"name":"brandonsussman","email":"brandonsussman23@gmail.com"},"directories":{},"maintainers":[{"name":"brandonsussman","email":"brandonsussman23@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/jmapper_0.1.0_1771787532276_0.8721717619527731"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-22T19:12:12.145Z","0.1.0":"2026-02-22T19:12:12.427Z","modified":"2026-02-22T19:12:12.681Z"},"maintainers":[{"name":"brandonsussman","email":"brandonsussman23@gmail.com"}],"description":"Use JSON markup in react instead of html","homepage":"https://github.com/brandonsussman/JMapper#readme","keywords":["JMapper"],"repository":{"type":"git","url":"git+https://github.com/brandonsussman/JMapper.git"},"author":{"name":"Brandon Sussman"},"bugs":{"url":"https://github.com/brandonsussman/JMapper/issues"},"license":"UNLICENSED","readme":"# JMapper\n\n**JMapper** is a framework that renders **JML (JSON Markup Language)** by harvesting local React lexical scope via a Babel-powered Vite plugin. UI is declared as data; component logic stays in React with a **zero-JSX return**: `return JMapper(schema)`.\n\n## SDUI Architecture\n\n- **Schema-driven UI (SDUI)**: The component returns a single call `JMapper(schema)`. The schema is JSON that describes the tree of components/nodes.\n- **Scope injection**: A Vite plugin (Babel visitor) finds `JMapper(schema)` and injects the function’s lexical scope as the second argument: `JMapper(schema, { user, items, show, set, ... })`.\n- **Runtime**: `JMapper(schema, scope)` recursively renders the schema with `React.createElement`, evaluating directives and interpolations against `scope`.\n\n## JML Specification\n\n| Feature | JML Example |\n|--------|--------------|\n| **Interpolation** | `\"text\": \"Hello {{user.name}}\"` |\n| **Conditionals** | `\"if\": \"show\", \"type\": \"Modal\"` |\n| **Loops** | `\"repeat\": \"items\", \"type\": \"li\", \"props\": {\"key\": \"item.id\"}, \"text\": \"{{item.text}}\"` |\n| **Events** | `\"onClick\": \"set(1)\"` or `\"onClick\": \"toggle()\"` |\n\n- **`type`**: React component or HTML tag name.\n- **`props`**: Props object; values can use `{{...}}` interpolation.\n- **`text`**: Text content; supports `{{...}}`.\n- **`children`**: Array of child JML nodes.\n- **`if`**: Optional; expression string. If falsy, render nothing.\n- **`repeat`**: Optional; array name in scope. Renders once per item; `item` and `index` in scope for children.\n- **`on*`**: Event handlers as string expressions (e.g. `onClick`, `onChange`), evaluated in scope.\n\n## Using in other projects\n\nInstall as a dependency (from npm when published, or locally via `npm link` / `file:`):\n\n```bash\nnpm install jmapper\n```\n\n**1. Runtime** – use the renderer and types in your app:\n\n```js\nimport { JMapper, JMapperErrorBoundary } from 'jmapper';\nimport type { JMLSchema, JMapperScope, JMapperOptions } from 'jmapper';\n\nconst schema = { type: 'div', text: 'Hello {{name}}' };\nconst scope = { name: 'World' };\nexport function App() {\n  return JMapper(schema, scope);\n}\n```\n\n**2. Vite plugin** – for automatic scope injection (`return JMapper(schema)` with no second argument), add the plugin **before** the React plugin:\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport jmapperPlugin from 'jmapper/plugin';\n\nexport default defineConfig({\n  plugins: [jmapperPlugin(), react()],\n});\n```\n\nYour component can then return `JMapper(schema)`; the plugin injects the function’s lexical scope as the second argument. The plugin is TypeScript; use a Vite config that supports `.ts` (e.g. `vite.config.ts`) or ensure the plugin is resolved by your build.\n\n**3. Local / link usage**\n\n```bash\ncd /path/to/JMapper && npm run build:lib\ncd /path/to/your-app && npm install /path/to/JMapper\n```\n\nThen `import { JMapper } from 'jmapper'` and `import jmapperPlugin from 'jmapper/plugin'` as above.\n\n## Project layout\n\n- `dist-lib/` — Built runtime (generated by `npm run build:lib`).\n- `plugins/vite-plugin-jmapper.ts` — Vite plugin source.\n- `src/lib/` — Runtime source (JMapper, types).\n- `src/examples/` — Example Dashboard and schema.\n\n## Commands\n\n- `npm run dev` — Start Vite dev server (demo app).\n- `npm run build` — Build demo app for production.\n- `npm run build:lib` — Build the library into `dist-lib` (run before publishing or when using via `file:`).\n- `npx vitest run` — Run tests.\n\n## Zero-JSX Rule\n\nComponents using JMapper must return only `JMapper(schema)`. No JSX in the return path; the Babel plugin supplies the scope automatically.\n","readmeFilename":"README.md","_rev":"1-97337a118ac2300a32d5c8b03b8e152a"}