{"_id":"@borovlioff/no-jsx","_rev":"2-8d4c19edd73cf2d2ab91d0e887448bba","name":"@borovlioff/no-jsx","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@borovlioff/no-jsx","version":"1.0.0","keywords":["reactive","dom","jsx","no-jsx","ui","library"],"author":{"name":"borovlioff"},"license":"MIT","_id":"@borovlioff/no-jsx@1.0.0","maintainers":[{"name":"borovlioff","email":"borovlioff@ya.ru"}],"homepage":"https://github.com/borovlioff/no-jsx#readme","bugs":{"url":"https://github.com/borovlioff/no-jsx/issues"},"dist":{"shasum":"18b537c7e67e97da5ccbfb887aebee7427c0390f","tarball":"https://registry.npmjs.org/@borovlioff/no-jsx/-/no-jsx-1.0.0.tgz","fileCount":5,"integrity":"sha512-1jOHpvkOJ6kYEugV4IsYC/xp6RFCvjxtjFTRBo1oUmCPNzk/P7c0e+wChcE909Ulv7HjjGC4+aMVPUfIsRpj3A==","signatures":[{"sig":"MEQCIDUb+sw3RG+lB/kHyX8siH9nTJcAd+WsEABrmTES6ekJAiAg7yf87IaMiikBXMaxB2fA6A5PGo6rX45afqKvubGF0g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10549},"main":"./dist/render.cjs","type":"module","types":"./dist/render.d.ts","module":"./dist/render.js","exports":{".":{"import":"./dist/render.js","require":"./dist/render.cjs"}},"gitHead":"d5c7135c9f58e7a4e5042e3dcc855948abc0f795","scripts":{"build":"vite build && tsc --emitDeclarationOnly --declaration --outDir dist"},"_npmUser":{"name":"borovlioff","email":"borovlioff@ya.ru"},"repository":{"url":"git+https://github.com/borovlioff/no-jsx.git","type":"git"},"_npmVersion":"10.9.2","description":"A minimal reactive UI library","directories":{},"_nodeVersion":"22.15.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","typescript":"^5.9.3","@types/node":"^25.0.0"},"_npmOperationalInternal":{"tmp":"tmp/no-jsx_1.0.0_1765442651305_0.6087645203599501","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@borovlioff/no-jsx","version":"1.1.0","main":"./dist/render.cjs","description":"A minimal reactive UI library","type":"module","types":"./dist/render.d.ts","exports":{".":{"import":"./dist/render.js","require":"./dist/render.cjs"}},"module":"./dist/render.js","scripts":{"build":"vite build && tsc --emitDeclarationOnly --declaration --outDir dist"},"devDependencies":{"@types/node":"^25.0.0","typescript":"^5.9.3","vite":"^5.4.21"},"keywords":["reactive","dom","jsx","no-jsx","ui","library"],"author":{"name":"borovlioff"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/borovlioff/no-jsx.git"},"_id":"@borovlioff/no-jsx@1.1.0","gitHead":"a86182726009f2f3ca56d6c2da682db16b05f5b1","bugs":{"url":"https://github.com/borovlioff/no-jsx/issues"},"homepage":"https://github.com/borovlioff/no-jsx#readme","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-R1np5Ch0sWxo1kFl8xEzVxsFpSnk1BYKcpp8Aqf35EYkL+mdHAv1C68X9Su7nDm39SRoueIQh4VitRZarWkO3Q==","shasum":"83493702e4a1e80b8f5913da0488bd884f9af3ad","tarball":"https://registry.npmjs.org/@borovlioff/no-jsx/-/no-jsx-1.1.0.tgz","fileCount":5,"unpackedSize":39298,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICvW2Fm7gE7GVX00Jhpl33eiOEifeM2dE/6R4vDkPnKdAiEAvxytaXWMIiInn7r6ULWpvuiVj319P4xi4Sv2npcEito="}]},"_npmUser":{"name":"borovlioff","email":"borovlioff@ya.ru"},"directories":{},"maintainers":[{"name":"borovlioff","email":"borovlioff@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/no-jsx_1.1.0_1779441590156_0.23994316924324766"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-11T08:44:11.226Z","modified":"2026-05-22T09:19:50.399Z","1.0.0":"2025-12-11T08:44:11.466Z","1.1.0":"2026-05-22T09:19:50.286Z"},"bugs":{"url":"https://github.com/borovlioff/no-jsx/issues"},"author":{"name":"borovlioff"},"license":"MIT","homepage":"https://github.com/borovlioff/no-jsx#readme","keywords":["reactive","dom","jsx","no-jsx","ui","library"],"repository":{"type":"git","url":"git+https://github.com/borovlioff/no-jsx.git"},"description":"A minimal reactive UI library","maintainers":[{"name":"borovlioff","email":"borovlioff@ya.ru"}],"readme":"```markdown\n# no-jsx\n\nA minimal, reactive UI library.  \nWrite declarative, reactive user interfaces using pure JavaScript (or TypeScript) functions.\n\n- ✅ Zero dependencies  \n- ✅ Works directly in the browser (`<script type=\"module\">`)  \n- ✅ Fine-grained reactivity with automatic dependency tracking  \n- ✅ Full TypeScript support with precise DOM element types  \n- ✅ No build step required for end users  \n\nInspired by Preact, Solid, and native DOM simplicity.\n\n---\n\n## 📦 Install\n\n```bash\nnpm install no-jsx\n```\n\n---\n\n## 🚀 Quick Example 1\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Document</title>\n\n</head>\n\n<body>\n</body>\n<script type=\"module\">\n  import { div, span, createStore, button, h1, ul ,li, input} from 'https://unpkg.com/@borovlioff/no-jsx@1.0.0/dist/render.js';\n\n\n\nexport const todosStore = createStore([\n  { id: 1, text: 'Learn reactive rendering', completed: false },\n  { id: 2, text: 'Build store', completed: true },\n]);\n\nexport const addTodo = (text) => {\n  const current = todosStore.get();\n  const newTodo = { id: Date.now(), text, completed: false };\n  todosStore.set([...current, newTodo]);\n};\n\nexport const toggleTodo = (id) => {\n  const current = todosStore.get();\n  todosStore.set(\n    current.map(todo =>\n      todo.id === id ? { ...todo, completed: !todo.completed } : todo\n    )\n  );\n};\n\nexport const removeTodo = (id) => {\n  todosStore.set(todosStore.get().filter(t => t.id !== id));\n};\n\nexport const TodoItem = ({ todo }) => {\n  return li(\n    { className: 'todo-item' },\n    input({\n      type: 'checkbox',\n      checked: todo.completed,\n      onchange: () => toggleTodo(todo.id),\n    }),\n    span(\n      {\n        style: `text-decoration: ${todo.completed ? 'line-through' : 'none'}; color: ${todo.completed ? '#ff0000ff' : 'inherit'}`,\n      },\n      todo.text\n    ),\n    button(\n      {\n        onclick: () => removeTodo(todo.id),\n      },\n      'Delete'\n    )\n  );\n};\n\n\nexport const TodoList = () => {\n  const todos = todosStore.get();\n  return ul(\n    { className: 'todo-list' },\n    ...todos.map(todo => TodoItem({ todo }))\n  );\n};\n\nconst TodoApp = () => {\n  const inputEl = input({\n    type: 'text',\n    placeholder: 'New todo...',\n  });\n\n  function handleAddTodo() {\n    const text = (inputEl).value.trim();\n    if (text) {\n      addTodo(text);\n      (inputEl).value = '';\n    }\n  }\n\n  return div(\n    { className: 'app' },\n    h1({}, 'Todo App'),\n    inputEl,\n    button({onclick: handleAddTodo, className: 'add-todo' }, 'Add Todo'),\n    () => TodoList()\n  );\n};\n\ndocument.body.appendChild(TodoApp());\n</script>\n\n</html>\n```\n## 🚀 Quick Example 1 \nUsing typescript\n\n```ts\n import { createStore} from \"@borovlioff/no-jsx\"\n\n export type Todo = {\n  id: number;\n  text: string;\n  completed: boolean;\n};\n\nexport const todosStore = createStore<Todo[]>([\n  { id: 1, text: 'Learn reactive rendering', completed: false },\n  { id: 2, text: 'Build store', completed: true },\n]);\n```\n\n\n---\n\n## 🧠 Core Concepts\n\n### `createStore(initialValue)`\nCreates a reactive store. Call `.get()` inside a render context to subscribe; `.set()` to update.\n\n### Functional Components\nComponents are just functions that return DOM nodes:\n```ts\nconst Greeting = ({ name }: { name: string }) =>\n  h1({}, `Hello, ${name}!`);\n```\n\n### Reactive Children\nPass a **function** as a child to make it reactive:\n```ts\ndiv({}, () => `Time: ${Date.now()}`) // updates on every store change\n```\nBut to react only to specific stores, use `.get()` inside:\n```ts\ndiv({}, () => `Count: ${count.get()}`) // updates only when `count` changes\n```\n\n### Built-in Tags\nAll standard HTML tags with precise TypeScript types:\n- `div`, `span`, `button`, `input`, `h1`, `ul`, `li`, `p`, `section`, etc.\n- Full autocomplete and type checking (e.g., `button` knows about `disabled`).\n\n### `fragment(...children)`\nGroups multiple nodes without a wrapper (like `<>...</>` in JSX).\n\n### `batch(() => { ... })`\nGroups multiple `.set()` calls into a single re-render.\n\n---\n","readmeFilename":"Readme.md"}