native-document 1.0.15 → 1.0.16-8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (649) hide show
  1. package/.npmrc.example +1 -0
  2. package/.vitepress/config.js +166 -0
  3. package/CHANGELOG.md +153 -0
  4. package/cdn.js +19 -0
  5. package/components.d.ts +2 -0
  6. package/components.js +30 -0
  7. package/devtools/ComponentRegistry.js +113 -0
  8. package/devtools/index.js +8 -0
  9. package/devtools/plugin/dev-tools-plugin.js +15 -0
  10. package/devtools/transformers/nd-vite-devtools.js +55 -0
  11. package/devtools/transformers/src/transformComponentForHrm.js +73 -0
  12. package/devtools/transformers/src/transformJsFile.js +9 -0
  13. package/devtools/transformers/src/utils.js +79 -0
  14. package/devtools/transformers/templates/hrm.hook.template.js +46 -0
  15. package/devtools/transformers/templates/hrm.orbservable.hook.template.js +76 -0
  16. package/devtools/widget/Widget.js +49 -0
  17. package/devtools/widget/widget.css +81 -0
  18. package/devtools/widget.js +23 -0
  19. package/dist/native-document.components.min.css +1 -0
  20. package/dist/native-document.components.min.js +23847 -0
  21. package/dist/native-document.dev.js +8421 -1492
  22. package/dist/native-document.dev.js.map +1 -0
  23. package/dist/native-document.devtools.min.js +1 -0
  24. package/dist/native-document.min.js +1 -1
  25. package/docs/advanced-components.md +419 -0
  26. package/docs/anchor.md +181 -257
  27. package/docs/cache.md +180 -0
  28. package/docs/cli.md +179 -0
  29. package/docs/components/accordion.md +172 -0
  30. package/docs/components/alert.md +99 -0
  31. package/docs/components/avatar.md +160 -0
  32. package/docs/components/badge.md +102 -0
  33. package/docs/components/breadcrumb.md +89 -0
  34. package/docs/components/button.md +183 -0
  35. package/docs/components/card.md +69 -0
  36. package/docs/components/context-menu.md +118 -0
  37. package/docs/components/data-table.md +345 -0
  38. package/docs/components/dropdown.md +214 -0
  39. package/docs/components/form/autocomplete-field.md +81 -0
  40. package/docs/components/form/checkbox-field.md +41 -0
  41. package/docs/components/form/checkbox-group-field.md +54 -0
  42. package/docs/components/form/color-field.md +64 -0
  43. package/docs/components/form/date-field.md +92 -0
  44. package/docs/components/form/field-collection.md +63 -0
  45. package/docs/components/form/file-field.md +203 -0
  46. package/docs/components/form/form-control.md +87 -0
  47. package/docs/components/form/image-field.md +90 -0
  48. package/docs/components/form/index.md +115 -0
  49. package/docs/components/form/number-field.md +65 -0
  50. package/docs/components/form/radio-field.md +51 -0
  51. package/docs/components/form/select-field.md +123 -0
  52. package/docs/components/form/slider.md +136 -0
  53. package/docs/components/form/string-field.md +134 -0
  54. package/docs/components/form/textarea-field.md +65 -0
  55. package/docs/components/form-fields.md +372 -0
  56. package/docs/components/getting-started.md +264 -0
  57. package/docs/components/index.md +337 -0
  58. package/docs/components/layout.md +279 -0
  59. package/docs/components/list.md +73 -0
  60. package/docs/components/menu.md +215 -0
  61. package/docs/components/modal.md +156 -0
  62. package/docs/components/pagination.md +95 -0
  63. package/docs/components/popover.md +131 -0
  64. package/docs/components/progress.md +111 -0
  65. package/docs/components/shortcut-manager.md +221 -0
  66. package/docs/components/simple-table.md +107 -0
  67. package/docs/components/skeleton.md +155 -0
  68. package/docs/components/spinner.md +100 -0
  69. package/docs/components/splitter.md +133 -0
  70. package/docs/components/stepper.md +163 -0
  71. package/docs/components/switch.md +113 -0
  72. package/docs/components/tabs.md +153 -0
  73. package/docs/components/toast.md +119 -0
  74. package/docs/components/tooltip.md +151 -0
  75. package/docs/components/traits.md +261 -0
  76. package/docs/conditional-rendering.md +177 -502
  77. package/docs/contributing.md +300 -25
  78. package/docs/core-concepts.md +207 -366
  79. package/docs/elements.md +266 -254
  80. package/docs/extending-native-document-element.md +259 -0
  81. package/docs/filters.md +247 -0
  82. package/docs/getting-started.md +195 -257
  83. package/docs/i18n.md +241 -0
  84. package/docs/index.md +76 -0
  85. package/docs/lifecycle-events.md +146 -67
  86. package/docs/list-rendering.md +240 -460
  87. package/docs/memory-management.md +135 -46
  88. package/docs/native-document-element.md +487 -0
  89. package/docs/native-fetch.md +213 -0
  90. package/docs/observable-resource.md +364 -0
  91. package/docs/observables.md +690 -357
  92. package/docs/routing.md +246 -646
  93. package/docs/state-management.md +213 -306
  94. package/docs/svg-elements.md +231 -0
  95. package/docs/theming.md +409 -0
  96. package/docs/tutorials/.gitkeep +0 -0
  97. package/docs/validation.md +98 -91
  98. package/docs/vitepress-conventions.md +219 -0
  99. package/elements.d.ts +7 -0
  100. package/elements.js +3 -4
  101. package/eslint.config.js +35 -0
  102. package/i18n.js +1 -0
  103. package/i18n.ts +2 -0
  104. package/index.d.ts +21 -0
  105. package/index.def.js +1086 -0
  106. package/index.js +19 -13
  107. package/package.json +59 -9
  108. package/readme.md +296 -93
  109. package/rollup.config.js +52 -3
  110. package/router.d.ts +7 -0
  111. package/router.js +0 -0
  112. package/src/components/$traits/has-draggable/HasDraggable.d.ts +4 -0
  113. package/src/components/$traits/has-draggable/HasDraggable.js +82 -0
  114. package/src/components/$traits/has-draggable/has-draggable.css +8 -0
  115. package/src/components/$traits/has-items/HasItems.d.ts +9 -0
  116. package/src/components/$traits/has-items/HasItems.js +64 -0
  117. package/src/components/$traits/has-position/HasFullPosition.d.ts +14 -0
  118. package/src/components/$traits/has-position/HasFullPosition.js +95 -0
  119. package/src/components/$traits/has-position/HasPosition.d.ts +7 -0
  120. package/src/components/$traits/has-position/HasPosition.js +45 -0
  121. package/src/components/$traits/has-resizable/HasResizable.d.ts +13 -0
  122. package/src/components/$traits/has-resizable/HasResizable.js +122 -0
  123. package/src/components/$traits/has-resizable/has-resizable.css +121 -0
  124. package/src/components/$traits/has-validation/HasValidation.d.ts +17 -0
  125. package/src/components/$traits/has-validation/HasValidation.js +133 -0
  126. package/src/components/BaseComponent.d.ts +32 -0
  127. package/src/components/BaseComponent.js +247 -0
  128. package/src/components/accordion/Accordion.js +268 -0
  129. package/src/components/accordion/AccordionItem.js +233 -0
  130. package/src/components/accordion/index.js +7 -0
  131. package/src/components/accordion/types/Accordion.d.ts +47 -0
  132. package/src/components/accordion/types/AccordionItem.d.ts +48 -0
  133. package/src/components/alert/Alert.js +350 -0
  134. package/src/components/alert/index.js +6 -0
  135. package/src/components/alert/types/Alert.d.ts +62 -0
  136. package/src/components/avatar/Avatar.js +430 -0
  137. package/src/components/avatar/AvatarGroup.js +97 -0
  138. package/src/components/avatar/index.js +7 -0
  139. package/src/components/avatar/types/Avatar.d.ts +74 -0
  140. package/src/components/avatar/types/AvatarGroup.d.ts +32 -0
  141. package/src/components/badge/Badge.js +245 -0
  142. package/src/components/badge/index.js +6 -0
  143. package/src/components/badge/types/Badge.d.ts +51 -0
  144. package/src/components/base-component.css +0 -0
  145. package/src/components/breadcrumb/BreadCrumb.js +138 -0
  146. package/src/components/breadcrumb/index.js +5 -0
  147. package/src/components/breadcrumb/types/BreadCrumb.d.ts +42 -0
  148. package/src/components/button/Button.js +320 -0
  149. package/src/components/button/index.js +5 -0
  150. package/src/components/button/types/Button.d.ts +62 -0
  151. package/src/components/card/Card.js +282 -0
  152. package/src/components/card/index.js +5 -0
  153. package/src/components/card/types/Card.d.ts +42 -0
  154. package/src/components/context-menu/ContextMenu.js +127 -0
  155. package/src/components/context-menu/ContextMenuGroup.js +29 -0
  156. package/src/components/context-menu/ContextMenuItem.js +28 -0
  157. package/src/components/context-menu/index.js +10 -0
  158. package/src/components/context-menu/types/ContextMenu.d.ts +30 -0
  159. package/src/components/context-menu/types/ContextMenuGroup.d.ts +18 -0
  160. package/src/components/context-menu/types/ContextMenuItem.d.ts +18 -0
  161. package/src/components/divider/Divider.js +256 -0
  162. package/src/components/divider/index.js +6 -0
  163. package/src/components/divider/types/Divider.d.ts +55 -0
  164. package/src/components/dropdown/Dropdown.js +531 -0
  165. package/src/components/dropdown/DropdownDivider.js +45 -0
  166. package/src/components/dropdown/DropdownGroup.js +83 -0
  167. package/src/components/dropdown/DropdownItem.js +150 -0
  168. package/src/components/dropdown/DropdownTrigger.js +93 -0
  169. package/src/components/dropdown/helpers.js +53 -0
  170. package/src/components/dropdown/index.js +13 -0
  171. package/src/components/dropdown/types/Dropdown.d.ts +88 -0
  172. package/src/components/dropdown/types/DropdownDivider.d.ts +20 -0
  173. package/src/components/dropdown/types/DropdownGroup.d.ts +25 -0
  174. package/src/components/dropdown/types/DropdownItem.d.ts +41 -0
  175. package/src/components/dropdown/types/DropdownTrigger.d.ts +32 -0
  176. package/src/components/form/FormControl.js +498 -0
  177. package/src/components/form/field/Field.js +419 -0
  178. package/src/components/form/field/FieldCollection.js +292 -0
  179. package/src/components/form/field/types/AutocompleteField.js +168 -0
  180. package/src/components/form/field/types/CheckboxField.js +77 -0
  181. package/src/components/form/field/types/CheckboxGroupField.js +171 -0
  182. package/src/components/form/field/types/ColorField.js +102 -0
  183. package/src/components/form/field/types/DateField.js +315 -0
  184. package/src/components/form/field/types/EmailField.js +104 -0
  185. package/src/components/form/field/types/FileField.js +276 -0
  186. package/src/components/form/field/types/HiddenField.js +44 -0
  187. package/src/components/form/field/types/ImageField.js +138 -0
  188. package/src/components/form/field/types/NumberField.js +177 -0
  189. package/src/components/form/field/types/PasswordField.js +200 -0
  190. package/src/components/form/field/types/RadioField.js +145 -0
  191. package/src/components/form/field/types/RangeField.js +117 -0
  192. package/src/components/form/field/types/SearchField.js +66 -0
  193. package/src/components/form/field/types/SelectField.js +247 -0
  194. package/src/components/form/field/types/StringField.js +148 -0
  195. package/src/components/form/field/types/TelField.js +98 -0
  196. package/src/components/form/field/types/TextAreaField.js +142 -0
  197. package/src/components/form/field/types/TimeField.js +215 -0
  198. package/src/components/form/field/types/UrlField.js +115 -0
  199. package/src/components/form/field/types/file-field-mode/FileAvatarMode.js +183 -0
  200. package/src/components/form/field/types/file-field-mode/FileDropzoneMode.js +117 -0
  201. package/src/components/form/field/types/file-field-mode/FileItemPreview.js +150 -0
  202. package/src/components/form/field/types/file-field-mode/FileNativeMode.js +43 -0
  203. package/src/components/form/field/types/file-field-mode/FileUploadButtonMode.js +120 -0
  204. package/src/components/form/field/types/file-field-mode/FileWallMode.js +106 -0
  205. package/src/components/form/index.js +61 -0
  206. package/src/components/form/merge +0 -0
  207. package/src/components/form/types/Field.d.ts +73 -0
  208. package/src/components/form/types/FieldCollection.d.ts +53 -0
  209. package/src/components/form/types/FormControl.d.ts +64 -0
  210. package/src/components/form/types/fields/AutocompleteField.d.ts +48 -0
  211. package/src/components/form/types/fields/CheckboxField.d.ts +33 -0
  212. package/src/components/form/types/fields/CheckboxGroupField.d.ts +49 -0
  213. package/src/components/form/types/fields/ColorField.d.ts +37 -0
  214. package/src/components/form/types/fields/DateField.d.ts +70 -0
  215. package/src/components/form/types/fields/EmailField.d.ts +35 -0
  216. package/src/components/form/types/fields/FileAvatarMode.d.ts +46 -0
  217. package/src/components/form/types/fields/FileDropzoneMode.d.ts +28 -0
  218. package/src/components/form/types/fields/FileField.d.ts +56 -0
  219. package/src/components/form/types/fields/FileItemPreview.d.ts +35 -0
  220. package/src/components/form/types/fields/FileNativeMode.d.ts +21 -0
  221. package/src/components/form/types/fields/FileUploadButtonMode.d.ts +34 -0
  222. package/src/components/form/types/fields/FileWallMode.d.ts +32 -0
  223. package/src/components/form/types/fields/HiddenField.d.ts +26 -0
  224. package/src/components/form/types/fields/ImageField.d.ts +45 -0
  225. package/src/components/form/types/fields/NumberField.d.ts +48 -0
  226. package/src/components/form/types/fields/PasswordField.d.ts +46 -0
  227. package/src/components/form/types/fields/RadioField.d.ts +48 -0
  228. package/src/components/form/types/fields/RangeField.d.ts +44 -0
  229. package/src/components/form/types/fields/SearchField.d.ts +34 -0
  230. package/src/components/form/types/fields/SelectField.d.ts +71 -0
  231. package/src/components/form/types/fields/StringField.d.ts +48 -0
  232. package/src/components/form/types/fields/TelField.d.ts +37 -0
  233. package/src/components/form/types/fields/TextAreaField.d.ts +44 -0
  234. package/src/components/form/types/fields/TimeField.d.ts +51 -0
  235. package/src/components/form/types/fields/UrlField.d.ts +35 -0
  236. package/src/components/form/utils.js +17 -0
  237. package/src/components/form/validation/Validation.js +565 -0
  238. package/src/components/index.d.ts +160 -0
  239. package/src/components/list/HasListItem.js +171 -0
  240. package/src/components/list/List.js +125 -0
  241. package/src/components/list/ListDivider.js +39 -0
  242. package/src/components/list/ListGroup.js +135 -0
  243. package/src/components/list/ListItem.js +212 -0
  244. package/src/components/list/index.js +12 -0
  245. package/src/components/list/types/List.d.ts +43 -0
  246. package/src/components/list/types/ListGroup.d.ts +37 -0
  247. package/src/components/list/types/ListItem.d.ts +53 -0
  248. package/src/components/menu/HasMenuItem.js +182 -0
  249. package/src/components/menu/Menu.js +227 -0
  250. package/src/components/menu/MenuDivider.js +37 -0
  251. package/src/components/menu/MenuGroup.js +126 -0
  252. package/src/components/menu/MenuItem.js +190 -0
  253. package/src/components/menu/MenuLink.js +51 -0
  254. package/src/components/menu/index.js +14 -0
  255. package/src/components/menu/types/Menu.d.ts +60 -0
  256. package/src/components/menu/types/MenuDivider.d.ts +19 -0
  257. package/src/components/menu/types/MenuGroup.d.ts +44 -0
  258. package/src/components/menu/types/MenuItem.d.ts +46 -0
  259. package/src/components/menu/types/MenuLink.d.ts +16 -0
  260. package/src/components/modal/Modal.js +524 -0
  261. package/src/components/modal/index.js +5 -0
  262. package/src/components/modal/types/Modal.d.ts +94 -0
  263. package/src/components/pagination/Pagination.js +411 -0
  264. package/src/components/pagination/index.js +5 -0
  265. package/src/components/pagination/types/Pagination.d.ts +68 -0
  266. package/src/components/popover/Popover.js +459 -0
  267. package/src/components/popover/PopoverFooter.js +61 -0
  268. package/src/components/popover/PopoverHeader.js +68 -0
  269. package/src/components/popover/index.js +10 -0
  270. package/src/components/popover/types/Popover.d.ts +83 -0
  271. package/src/components/popover/types/PopoverFooter.d.ts +24 -0
  272. package/src/components/popover/types/PopoverHeader.d.ts +26 -0
  273. package/src/components/progress/Progress.js +401 -0
  274. package/src/components/progress/index.js +6 -0
  275. package/src/components/progress/types/Progress.d.ts +77 -0
  276. package/src/components/skeleton/Skeleton.js +228 -0
  277. package/src/components/skeleton/index.js +6 -0
  278. package/src/components/skeleton/types/Skeleton.d.ts +55 -0
  279. package/src/components/slider/Slider.js +406 -0
  280. package/src/components/slider/index.js +5 -0
  281. package/src/components/slider/types/Slider.d.ts +82 -0
  282. package/src/components/spacer/Spacer.js +27 -0
  283. package/src/components/spacer/index.js +5 -0
  284. package/src/components/spacer/types/Spacer.d.ts +19 -0
  285. package/src/components/spinner/Spinner.js +350 -0
  286. package/src/components/spinner/index.js +5 -0
  287. package/src/components/spinner/types/Spinner.d.ts +71 -0
  288. package/src/components/splitter/Splitter.js +164 -0
  289. package/src/components/splitter/SplitterGutter.js +140 -0
  290. package/src/components/splitter/SplitterPanel.js +143 -0
  291. package/src/components/splitter/index.js +10 -0
  292. package/src/components/splitter/types/Splitter.d.ts +38 -0
  293. package/src/components/splitter/types/SplitterGutter.d.ts +38 -0
  294. package/src/components/splitter/types/SplitterPanel.d.ts +41 -0
  295. package/src/components/stacks/AbsoluteStack.js +53 -0
  296. package/src/components/stacks/FixedStack.js +53 -0
  297. package/src/components/stacks/HStack.js +54 -0
  298. package/src/components/stacks/PositionStack.js +254 -0
  299. package/src/components/stacks/RelativeStack.js +53 -0
  300. package/src/components/stacks/Stack.js +166 -0
  301. package/src/components/stacks/VStack.js +55 -0
  302. package/src/components/stacks/index.js +21 -0
  303. package/src/components/stacks/types/AbsoluteStack.d.ts +16 -0
  304. package/src/components/stacks/types/FixedStack.d.ts +16 -0
  305. package/src/components/stacks/types/HStack.d.ts +16 -0
  306. package/src/components/stacks/types/PositionStack.d.ts +54 -0
  307. package/src/components/stacks/types/RelativeStack.d.ts +17 -0
  308. package/src/components/stacks/types/Stack.d.ts +39 -0
  309. package/src/components/stacks/types/VStack.d.ts +16 -0
  310. package/src/components/stepper/Stepper.js +461 -0
  311. package/src/components/stepper/StepperStep.js +241 -0
  312. package/src/components/stepper/index.js +8 -0
  313. package/src/components/stepper/types/Stepper.d.ts +68 -0
  314. package/src/components/stepper/types/StepperStep.d.ts +54 -0
  315. package/src/components/switch/Switch.js +266 -0
  316. package/src/components/switch/index.js +6 -0
  317. package/src/components/switch/types/Switch.d.ts +55 -0
  318. package/src/components/table/Column.js +212 -0
  319. package/src/components/table/ColumnGroup.js +90 -0
  320. package/src/components/table/DataTable.js +720 -0
  321. package/src/components/table/SimpleTable.js +139 -0
  322. package/src/components/table/index.js +7 -0
  323. package/src/components/table/types/Column.d.ts +49 -0
  324. package/src/components/table/types/ColumnGroup.d.ts +28 -0
  325. package/src/components/table/types/DataTable.d.ts +97 -0
  326. package/src/components/table/types/SimpleTable.d.ts +40 -0
  327. package/src/components/tabs/Tabs.js +395 -0
  328. package/src/components/tabs/index.js +6 -0
  329. package/src/components/tabs/types/Tabs.d.ts +78 -0
  330. package/src/components/toast/Toast.js +262 -0
  331. package/src/components/toast/ToastError.js +0 -0
  332. package/src/components/toast/ToastInfo.js +0 -0
  333. package/src/components/toast/ToastSuccess.js +0 -0
  334. package/src/components/toast/ToastWarning.js +0 -0
  335. package/src/components/toast/index.js +5 -0
  336. package/src/components/toast/types/Toast.d.ts +57 -0
  337. package/src/components/toast/types/ToastError.d.ts +7 -0
  338. package/src/components/toast/types/ToastInfo.d.ts +7 -0
  339. package/src/components/toast/types/ToastSuccess.d.ts +7 -0
  340. package/src/components/toast/types/ToastWarning.d.ts +7 -0
  341. package/src/components/tooltip/Tooltip.js +359 -0
  342. package/src/components/tooltip/index.js +5 -0
  343. package/src/components/tooltip/prototypes.js +6 -0
  344. package/src/components/tooltip/types/Tooltip.d.ts +65 -0
  345. package/src/{data → core/data}/MemoryManager.js +2 -3
  346. package/src/core/data/Observable.js +227 -0
  347. package/src/core/data/ObservableArray.js +522 -0
  348. package/src/core/data/ObservableChecker.js +39 -0
  349. package/src/core/data/ObservableItem.js +611 -0
  350. package/src/core/data/ObservableObject.js +274 -0
  351. package/src/core/data/ObservableResource.js +315 -0
  352. package/src/core/data/ObservableWhen.js +54 -0
  353. package/src/core/data/Store.js +520 -0
  354. package/src/core/data/observable-helpers/observable.is-to.js +390 -0
  355. package/src/core/data/observable-helpers/observable.prototypes.js +145 -0
  356. package/src/core/elements/anchor/anchor-with-sentinel.js +66 -0
  357. package/src/core/elements/anchor/anchor.js +210 -0
  358. package/src/core/elements/anchor/one-child-anchor-overwriting.js +66 -0
  359. package/src/core/elements/content-formatter.js +169 -0
  360. package/src/core/elements/control/for-each-array.js +292 -0
  361. package/src/{elements → core/elements}/control/for-each.js +42 -23
  362. package/src/core/elements/control/show-if.js +94 -0
  363. package/src/core/elements/control/show-when.js +54 -0
  364. package/src/core/elements/control/switch.js +141 -0
  365. package/src/core/elements/description-list.js +19 -0
  366. package/src/core/elements/form.js +255 -0
  367. package/src/core/elements/fragment.js +8 -0
  368. package/src/core/elements/html5-semantics.js +55 -0
  369. package/src/core/elements/img.js +59 -0
  370. package/src/{elements → core/elements}/index.js +4 -4
  371. package/src/core/elements/interactive.js +25 -0
  372. package/src/core/elements/list.js +37 -0
  373. package/src/core/elements/medias.js +37 -0
  374. package/src/core/elements/meta-data.js +43 -0
  375. package/src/core/elements/svg.js +61 -0
  376. package/src/core/elements/table.js +73 -0
  377. package/src/{errors → core/errors}/ArgTypesError.js +1 -1
  378. package/src/{errors → core/errors}/NativeDocumentError.js +0 -0
  379. package/src/core/utils/HasEventEmitter.js +85 -0
  380. package/src/core/utils/args-types.js +140 -0
  381. package/src/core/utils/cache.js +5 -0
  382. package/src/core/utils/callback-handler.js +50 -0
  383. package/src/core/utils/debug-manager.js +40 -0
  384. package/src/core/utils/events.js +148 -0
  385. package/src/core/utils/filters/date.js +178 -0
  386. package/src/core/utils/filters/index.js +4 -0
  387. package/src/core/utils/filters/standard.js +263 -0
  388. package/src/core/utils/filters/strings.js +67 -0
  389. package/src/core/utils/filters/utils.js +77 -0
  390. package/src/core/utils/formatters.js +90 -0
  391. package/src/core/utils/helpers.js +144 -0
  392. package/src/core/utils/localstorage.js +57 -0
  393. package/src/core/utils/memoize.js +115 -0
  394. package/src/core/utils/plugins-manager.js +81 -0
  395. package/src/core/utils/property-accumulator.js +72 -0
  396. package/src/core/utils/prototypes.js +44 -0
  397. package/src/core/utils/shortcut-manager.js +242 -0
  398. package/src/{utils → core/utils}/validator.js +58 -22
  399. package/src/core/wrappers/AttributesWrapper.js +98 -0
  400. package/src/core/wrappers/DocumentObserver.js +182 -0
  401. package/src/core/wrappers/ElementCreator.js +120 -0
  402. package/src/core/wrappers/HtmlElementWrapper.js +98 -0
  403. package/src/core/wrappers/NDElement.js +613 -0
  404. package/src/core/wrappers/NdPrototype.js +233 -0
  405. package/src/core/wrappers/SingletonView.js +99 -0
  406. package/src/core/wrappers/SvgElementWrapper.js +15 -0
  407. package/src/core/wrappers/TemplateBinding.js +7 -0
  408. package/src/core/wrappers/constants.js +66 -0
  409. package/src/core/wrappers/prototypes/attributes-extensions.js +179 -0
  410. package/src/core/wrappers/prototypes/bind-class-extensions.js +0 -0
  411. package/src/core/wrappers/prototypes/nd-element-extensions.js +157 -0
  412. package/src/core/wrappers/prototypes/nd-element.transition.extensions.js +127 -0
  413. package/src/core/wrappers/template-cloner/NodeCloner.js +209 -0
  414. package/src/core/wrappers/template-cloner/TemplateCloner.js +192 -0
  415. package/src/core/wrappers/template-cloner/attributes-hydrator.js +142 -0
  416. package/src/core/wrappers/template-cloner/utils.js +173 -0
  417. package/src/fetch/NativeFetch.js +89 -0
  418. package/src/i18n/bin/scan.js +132 -0
  419. package/src/i18n/index.d.ts +2 -0
  420. package/src/i18n/service/I18nService.d.ts +27 -0
  421. package/src/i18n/service/I18nService.js +46 -0
  422. package/src/i18n/service/functions.d.ts +22 -0
  423. package/src/i18n/service/functions.js +29 -0
  424. package/src/router/Route.js +33 -8
  425. package/src/router/RouteGroupHelper.js +10 -2
  426. package/src/router/Router.js +63 -22
  427. package/src/router/RouterComponent.js +114 -6
  428. package/src/{errors → router/errors}/RouterError.js +0 -1
  429. package/src/router/link.js +9 -10
  430. package/src/router/modes/HashRouter.js +2 -2
  431. package/src/router/modes/HistoryRouter.js +2 -3
  432. package/src/router/modes/MemoryRouter.js +1 -1
  433. package/src/ui/components/accordion/AccordionItemRender.js +63 -0
  434. package/src/ui/components/accordion/AccordionRender.js +35 -0
  435. package/src/ui/components/accordion/accordion.css +121 -0
  436. package/src/ui/components/alert/AlertRender.js +81 -0
  437. package/src/ui/components/alert/alert.css +163 -0
  438. package/src/ui/components/avatar/avata-group/AvatarGroupRender.js +50 -0
  439. package/src/ui/components/avatar/avata-group/avatar-group.css +38 -0
  440. package/src/ui/components/avatar/avatar/AvatarRender.js +87 -0
  441. package/src/ui/components/avatar/avatar/avatar.css +189 -0
  442. package/src/ui/components/badge/BadgeRender.js +25 -0
  443. package/src/ui/components/badge/badge.css +168 -0
  444. package/src/ui/components/breadcrumb/BreadcrumbRender.js +44 -0
  445. package/src/ui/components/breadcrumb/breadcrumb.css +55 -0
  446. package/src/ui/components/button/ButtonRender.js +65 -0
  447. package/src/ui/components/button/button.css +296 -0
  448. package/src/ui/components/card/CardRender.js +133 -0
  449. package/src/ui/components/card/card.css +169 -0
  450. package/src/ui/components/contextmenu/ContextmenuRender.js +68 -0
  451. package/src/ui/components/contextmenu/contextmenu.css +36 -0
  452. package/src/ui/components/divider/DividerRender.js +70 -0
  453. package/src/ui/components/divider/divider.css +70 -0
  454. package/src/ui/components/dropdown/DropdownRender.js +92 -0
  455. package/src/ui/components/dropdown/divider/DropdownDividerRender.js +9 -0
  456. package/src/ui/components/dropdown/divider/dropdown-divider.css +0 -0
  457. package/src/ui/components/dropdown/dropdown.css +179 -0
  458. package/src/ui/components/dropdown/group/DropdownGroupRender.js +23 -0
  459. package/src/ui/components/dropdown/group/dropdown-group.css +0 -0
  460. package/src/ui/components/dropdown/item/DropdownItemRender.js +29 -0
  461. package/src/ui/components/dropdown/item/dropdown-item.css +0 -0
  462. package/src/ui/components/form/FieldCollectionRender.js +110 -0
  463. package/src/ui/components/form/FormControlRender.js +85 -0
  464. package/src/ui/components/form/field-collection.css +55 -0
  465. package/src/ui/components/form/fields/AutocompleteFieldRender.js +143 -0
  466. package/src/ui/components/form/fields/CheckboxFieldRender.js +59 -0
  467. package/src/ui/components/form/fields/CheckboxGroupFieldRender.js +92 -0
  468. package/src/ui/components/form/fields/ColorFieldRender.js +30 -0
  469. package/src/ui/components/form/fields/DateFieldRender.js +155 -0
  470. package/src/ui/components/form/fields/EmailFieldRender.js +5 -0
  471. package/src/ui/components/form/fields/FieldRender.js +118 -0
  472. package/src/ui/components/form/fields/FileFieldRender.js +41 -0
  473. package/src/ui/components/form/fields/HiddenFieldRender.js +13 -0
  474. package/src/ui/components/form/fields/ImageFieldRender.js +0 -0
  475. package/src/ui/components/form/fields/NumberFieldRender.js +52 -0
  476. package/src/ui/components/form/fields/PasswordFieldRender.js +65 -0
  477. package/src/ui/components/form/fields/RadioFieldRender.js +77 -0
  478. package/src/ui/components/form/fields/RangeFieldRender.js +122 -0
  479. package/src/ui/components/form/fields/SelectFieldRender.js +248 -0
  480. package/src/ui/components/form/fields/SliderFieldRender.js +359 -0
  481. package/src/ui/components/form/fields/StringFieldRender.js +6 -0
  482. package/src/ui/components/form/fields/TelFieldRender.js +6 -0
  483. package/src/ui/components/form/fields/TextAreaFieldRender.js +96 -0
  484. package/src/ui/components/form/fields/TimeFieldRender.js +142 -0
  485. package/src/ui/components/form/fields/UrlFieldRender.js +6 -0
  486. package/src/ui/components/form/fields/date-field.css +32 -0
  487. package/src/ui/components/form/fields/field.css +402 -0
  488. package/src/ui/components/form/fields/file-field.css +79 -0
  489. package/src/ui/components/form/fields/password-field.css +50 -0
  490. package/src/ui/components/form/fields/range-field.css +120 -0
  491. package/src/ui/components/form/fields/slider.css +195 -0
  492. package/src/ui/components/form/file-upload-mode/FileAvatarModeRender.js +143 -0
  493. package/src/ui/components/form/file-upload-mode/FileDropzoneModeRender.js +108 -0
  494. package/src/ui/components/form/file-upload-mode/FileNativeModeRender.js +22 -0
  495. package/src/ui/components/form/file-upload-mode/FileUploadButtonModeRender.js +89 -0
  496. package/src/ui/components/form/file-upload-mode/FileWallModeRender.js +90 -0
  497. package/src/ui/components/form/file-upload-mode/file-avatar-mode.css +139 -0
  498. package/src/ui/components/form/file-upload-mode/file-dropzone-mode.css +88 -0
  499. package/src/ui/components/form/file-upload-mode/file-upload-button-mode.css +44 -0
  500. package/src/ui/components/form/file-upload-mode/file-wall-mode.css +88 -0
  501. package/src/ui/components/form/form-control.css +40 -0
  502. package/src/ui/components/form/helpers.js +111 -0
  503. package/src/ui/components/form/index.js +27 -0
  504. package/src/ui/components/list/ListRender.js +18 -0
  505. package/src/ui/components/list/divider/ListDividerRender.js +10 -0
  506. package/src/ui/components/list/divider/list-divider.css +12 -0
  507. package/src/ui/components/list/group/ListGroupRender.js +61 -0
  508. package/src/ui/components/list/group/list-group.css +62 -0
  509. package/src/ui/components/list/item/ListItemRender.js +238 -0
  510. package/src/ui/components/list/item/list-item.css +191 -0
  511. package/src/ui/components/list/list.css +24 -0
  512. package/src/ui/components/menu/MenuDividerRender.js +12 -0
  513. package/src/ui/components/menu/MenuGroupRender.js +59 -0
  514. package/src/ui/components/menu/MenuItemRender.js +57 -0
  515. package/src/ui/components/menu/MenuLinkRender.js +55 -0
  516. package/src/ui/components/menu/MenuRender.js +22 -0
  517. package/src/ui/components/menu/helpers.js +121 -0
  518. package/src/ui/components/menu/menu.css +308 -0
  519. package/src/ui/components/modal/ModalRender.js +118 -0
  520. package/src/ui/components/modal/modal.css +156 -0
  521. package/src/ui/components/pagination/PaginationRender.js +112 -0
  522. package/src/ui/components/pagination/pagination.css +63 -0
  523. package/src/ui/components/popover/PopoverRender.js +233 -0
  524. package/src/ui/components/popover/popover.css +139 -0
  525. package/src/ui/components/progress/ProgressRender.js +168 -0
  526. package/src/ui/components/progress/progress.css +197 -0
  527. package/src/ui/components/skeleton/SkeletonRender.js +136 -0
  528. package/src/ui/components/skeleton/skeleton.css +154 -0
  529. package/src/ui/components/spacer/SpacerRender.js +10 -0
  530. package/src/ui/components/spinner/SpinnerRender.js +47 -0
  531. package/src/ui/components/spinner/spinner.css +152 -0
  532. package/src/ui/components/splitter/SplitterGutterRender.js +94 -0
  533. package/src/ui/components/splitter/SplitterPanelRender.js +38 -0
  534. package/src/ui/components/splitter/SplitterRender.js +75 -0
  535. package/src/ui/components/splitter/splitter.css +128 -0
  536. package/src/ui/components/stacks/PositionStackRender.js +39 -0
  537. package/src/ui/components/stacks/StackRender.js +41 -0
  538. package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js +5 -0
  539. package/src/ui/components/stacks/fixed-stack/FixedStackRender.js +5 -0
  540. package/src/ui/components/stacks/h-stack/HStackRender.js +7 -0
  541. package/src/ui/components/stacks/h-stack/h-stack.css +4 -0
  542. package/src/ui/components/stacks/index.js +5 -0
  543. package/src/ui/components/stacks/position-stack.css +62 -0
  544. package/src/ui/components/stacks/relative-stack/RelativeStackRender.js +7 -0
  545. package/src/ui/components/stacks/relative-stack/relative-stack.css +3 -0
  546. package/src/ui/components/stacks/stack.css +78 -0
  547. package/src/ui/components/stacks/v-stack/VStackRender.js +6 -0
  548. package/src/ui/components/stacks/v-stack/v-stack.css +4 -0
  549. package/src/ui/components/stepper/StepperRender.js +71 -0
  550. package/src/ui/components/stepper/StepperStepRender.js +67 -0
  551. package/src/ui/components/stepper/stepper.css +359 -0
  552. package/src/ui/components/switch/SwitchRender.js +83 -0
  553. package/src/ui/components/switch/switch.css +143 -0
  554. package/src/ui/components/table/data-table/DataTableRender.js +50 -0
  555. package/src/ui/components/table/data-table/bulk-actions.js +34 -0
  556. package/src/ui/components/table/data-table/data-table.css +246 -0
  557. package/src/ui/components/table/data-table/pagination.js +56 -0
  558. package/src/ui/components/table/data-table/tables.js +368 -0
  559. package/src/ui/components/table/data-table/toolbar.js +67 -0
  560. package/src/ui/components/table/simple-table/SimpleTableRender.js +203 -0
  561. package/src/ui/components/table/simple-table/simple-table.css +50 -0
  562. package/src/ui/components/tabs/TabsRender.js +226 -0
  563. package/src/ui/components/tabs/tabs.css +253 -0
  564. package/src/ui/components/toast/ToastRender.js +99 -0
  565. package/src/ui/components/toast/toast.css +201 -0
  566. package/src/ui/components/tooltip/TooltipRender.js +8 -0
  567. package/src/ui/components/tooltip/tooltip.css +113 -0
  568. package/src/ui/index.js +47 -0
  569. package/src/ui/theme.js +0 -0
  570. package/src/ui/theme.scss +1 -0
  571. package/src/ui/tokens/animation.scss +36 -0
  572. package/src/ui/tokens/colors-dark.scss +58 -0
  573. package/src/ui/tokens/colors.scss +54 -0
  574. package/src/ui/tokens/components.scss +32 -0
  575. package/src/ui/tokens/fonts.scss +57 -0
  576. package/src/ui/tokens/glass.scss +10 -0
  577. package/src/ui/tokens/index.scss +38 -0
  578. package/src/ui/tokens/layouts.scss +228 -0
  579. package/src/ui/tokens/opacity.scss +21 -0
  580. package/src/ui/tokens/others.scss +11 -0
  581. package/src/ui/tokens/radius.scss +6 -0
  582. package/src/ui/tokens/reset.scss +51 -0
  583. package/src/ui/tokens/shadows.scss +29 -0
  584. package/src/ui/tokens/spacings.scss +13 -0
  585. package/src/ui/tokens/vars.scss +35 -0
  586. package/src/ui/tokens/viewports.scss +30 -0
  587. package/types/args-types.d.ts +58 -0
  588. package/types/control-flow.d.ts +62 -0
  589. package/types/elements.d.ts +231 -0
  590. package/types/filters/dates.d.ts +43 -0
  591. package/types/filters/index.d.ts +4 -0
  592. package/types/filters/standard.d.ts +70 -0
  593. package/types/filters/strings.d.ts +21 -0
  594. package/types/filters/types.d.ts +20 -0
  595. package/types/forms.d.ts +84 -0
  596. package/types/globals.d.ts +543 -0
  597. package/types/images.d.ts +23 -0
  598. package/types/localStorage.ts +102 -0
  599. package/types/memoize.d.ts +26 -0
  600. package/types/native-fetch.d.ts +72 -0
  601. package/types/nd-element.d.ts +407 -0
  602. package/types/observable-resource.d.ts +3 -0
  603. package/types/observable.d.ts +227 -0
  604. package/types/plugins-manager.d.ts +65 -0
  605. package/types/polyfill.d.ts +18 -0
  606. package/types/property-accumulator.d.ts +33 -0
  607. package/types/router.d.ts +85 -0
  608. package/types/service.d.ts +23 -0
  609. package/types/singleton.d.ts +19 -0
  610. package/types/store.d.ts +63 -0
  611. package/types/template-cloner.ts +43 -0
  612. package/types/validator.ts +66 -0
  613. package/ui.js +1 -0
  614. package/utils.d.ts +4 -0
  615. package/utils.js +12 -0
  616. package/src/data/Observable.js +0 -55
  617. package/src/data/ObservableChecker.js +0 -39
  618. package/src/data/ObservableItem.js +0 -195
  619. package/src/data/Store.js +0 -74
  620. package/src/data/observable-helpers/array.js +0 -74
  621. package/src/data/observable-helpers/batch.js +0 -22
  622. package/src/data/observable-helpers/computed.js +0 -28
  623. package/src/data/observable-helpers/object.js +0 -111
  624. package/src/elements/anchor.js +0 -129
  625. package/src/elements/content-formatter.js +0 -32
  626. package/src/elements/control/for-each-array.js +0 -280
  627. package/src/elements/control/show-if.js +0 -79
  628. package/src/elements/control/switch.js +0 -98
  629. package/src/elements/description-list.js +0 -5
  630. package/src/elements/form.js +0 -71
  631. package/src/elements/html5-semantics.js +0 -12
  632. package/src/elements/img.js +0 -45
  633. package/src/elements/interactive.js +0 -7
  634. package/src/elements/list.js +0 -10
  635. package/src/elements/medias.js +0 -8
  636. package/src/elements/meta-data.js +0 -9
  637. package/src/elements/table.js +0 -14
  638. package/src/utils/args-types.js +0 -100
  639. package/src/utils/debug-manager.js +0 -31
  640. package/src/utils/helpers.js +0 -60
  641. package/src/utils/plugins-manager.js +0 -12
  642. package/src/utils/prototypes.js +0 -45
  643. package/src/wrappers/AttributesWrapper.js +0 -144
  644. package/src/wrappers/DocumentObserver.js +0 -80
  645. package/src/wrappers/ElementCreator.js +0 -114
  646. package/src/wrappers/HtmlElementEventsWrapper.js +0 -64
  647. package/src/wrappers/HtmlElementWrapper.js +0 -50
  648. package/src/wrappers/NdPrototype.js +0 -109
  649. package/src/wrappers/constants.js +0 -2
package/docs/getting-started.md CHANGED
@@ -1,14 +1,46 @@
1
+ ---
2
+ title: Getting Started
3
+ description: Install NativeDocument and build your first application in minutes
4
+ ---
5
+
1
6
  # Getting Started
2
7
 
3
- Welcome to NativeDocument! This guide will help you set up and create your first application with NativeDocument.
8
+ Welcome to NativeDocument! This guide will help you set up and create your first application.
4
9
 
5
10
  ## Installation
6
11
 
7
- NativeDocument offers multiple installation methods to fit your development workflow.
12
+ NativeDocument offers multiple installation methods to fit your workflow.
13
+
14
+ ### Option 1: CLI (Recommended)
15
+
16
+ The fastest way to start a complete project with Vite, routing, i18n, and a ready-to-use folder structure:
17
+
18
+ ```bash
19
+ npm install -g @native-document/cli
20
+
21
+ nd create MyApp # default structure
22
+ nd create MyApp --feature # feature-based architecture
23
+
24
+ cd MyApp
25
+ npm install
26
+ npm start
27
+ ```
28
+
29
+ Verify the CLI is installed correctly:
30
+
31
+ ```bash
32
+ nd --help
33
+ ```
34
+
35
+ > The CLI source is available at [github.com/afrocodeur/native-document-cli](https://github.com/afrocodeur/native-document-cli).
36
+
37
+ See the **[CLI guide](./cli.md)** for all available commands.
8
38
 
9
- ### Method 1: CDN (Recommended for beginners)
39
+ ---
10
40
 
11
- The fastest way to get started is using our CDN. Simply add this script tag to your HTML:
41
+ ### Option 2: CDN (No build step)
42
+
43
+ The quickest way to experiment without any tooling:
12
44
 
13
45
  ```html
14
46
  <!DOCTYPE html>
@@ -24,12 +56,11 @@ The fastest way to get started is using our CDN. Simply add this script tag to y
24
56
  const { Div, Button } = NativeDocument.elements;
25
57
  const { Observable } = NativeDocument;
26
58
 
27
- // Your code here
28
59
  const count = Observable(0);
29
60
 
30
61
  const App = Div({ class: 'app' }, [
31
62
  Div(['Count: ', count]),
32
- Button('Increment').nd.onClick(() => count.set(count.val() + 1))
63
+ Button('Increment').nd.onClick(() => count.$value++)
33
64
  ]);
34
65
 
35
66
  document.body.appendChild(App);
@@ -38,26 +69,11 @@ The fastest way to get started is using our CDN. Simply add this script tag to y
38
69
  </html>
39
70
  ```
40
71
 
41
- ### Method 2: Vite Template (Recommended for projects)
42
-
43
- For a complete development setup with Vite, use our official template:
72
+ ---
44
73
 
45
- ```bash
46
- npx degit afrocodeur/native-document-vite my-app
47
- cd my-app
48
- npm install
49
- npm run dev
50
- ```
74
+ ### Option 3: NPM/Yarn (existing project)
51
75
 
52
- This template includes:
53
- - Pre-configured Vite setup
54
- - Development server with auto reload
55
- - Build optimization
56
- - Example components
57
-
58
- ### Method 3: NPM/Yarn Package
59
-
60
- Install NativeDocument as a dependency in your existing project:
76
+ Install NativeDocument into an existing Vite project:
61
77
 
62
78
  ```bash
63
79
  npm install native-document
@@ -68,337 +84,259 @@ yarn add native-document
68
84
  Then import what you need:
69
85
 
70
86
  ```javascript
71
- import { Div, Button } from 'native-document/src/elements'
72
- import { Observable } from 'native-document'
87
+ import { Div, Button } from 'native-document/elements';
88
+ import { Observable } from 'native-document';
73
89
 
74
90
  const count = Observable(0);
75
91
 
76
92
  const App = Div({ class: 'app' }, [
77
93
  Div(['Count: ', count]),
78
- Button('Increment').nd.onClick(() => count.set(count.val() + 1))
94
+ Button('Increment').nd.onClick(() => count.$value++)
79
95
  ]);
80
96
 
81
97
  document.body.appendChild(App);
82
98
  ```
83
99
 
84
- ## Your First Application
100
+ ---
85
101
 
86
- Let's build a simple counter application to understand NativeDocument basics.
102
+ ## Project Structure
87
103
 
88
- ### Step 1: Create the HTML Structure
104
+ ### Default structure
89
105
 
90
- ```html
91
- <!DOCTYPE html>
92
- <html lang="en">
93
- <head>
94
- <meta charset="UTF-8">
95
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
96
- <title>Counter App</title>
97
- <style>
98
- .counter-app {
99
- max-width: 400px;
100
- margin: 50px auto;
101
- padding: 20px;
102
- text-align: center;
103
- font-family: Arial, sans-serif;
104
- }
105
- .count-display {
106
- font-size: 2rem;
107
- margin: 20px 0;
108
- color: #333;
109
- }
110
- button {
111
- margin: 0 10px;
112
- padding: 10px 20px;
113
- font-size: 1rem;
114
- cursor: pointer;
115
- }
116
- </style>
117
- </head>
118
- <body>
119
- <script src="https://cdn.jsdelivr.net/gh/afrocodeur/native-document@latest/dist/native-document.min.js"></script>
120
- <script>
121
- // Your JavaScript code will go here
122
- </script>
123
- </body>
124
- </html>
125
106
  ```
107
+ src/
108
+ ├── main.js # Entry point
109
+ ├── index.css # Global styles
110
+ │
111
+ ├── core/
112
+ │ ├── lang/
113
+ │ │ ├── lang.js # i18n configuration
114
+ │ │ └── locales/
115
+ │ │ ├── en.json # English translations
116
+ │ │ └── fr.json # French translations
117
+ │ ├── middlewares/ # Route middlewares
118
+ │ └── services/ # Core services (http, i18n...)
119
+ │
120
+ ├── routes/
121
+ │ ├── routes.js # Route definitions
122
+ │ └── layouts/
123
+ │ └── DefaultLayout/ # Default layout
124
+ │
125
+ ├── components/ # Reusable UI components
126
+ │
127
+ ├── pages/
128
+ │ ├── home/
129
+ │ │ ├── HomePage.js
130
+ │ │ └── home.css
131
+ │ └── not-found/
132
+ │ ├── NotFoundPage.js
133
+ │ └── not-found.css
134
+ │
135
+ └── services/ # Business logic + observables
136
+ ```
137
+
138
+ ### Feature-based structure (`--feature`)
126
139
 
127
- ### Step 2: Add the JavaScript Logic
140
+ When created with `nd create MyApp --feature`, a `src/features/` folder is added. Each feature is self-contained:
141
+
142
+ ```
143
+ src/features/auth/
144
+ ├── components/
145
+ ├── services/
146
+ │ └── AuthService/
147
+ │ └── AuthService.js
148
+ ├── utils/
149
+ └── index.js # Public API - import from here
150
+ ```
151
+
152
+ Import from a feature via its public API:
128
153
 
129
154
  ```javascript
130
- const { Div, Button, H1 } = NativeDocument.elements;
131
- const { Observable } = NativeDocument;
155
+ import { AuthService } from '@/features/auth';
156
+ ```
157
+
158
+ ---
159
+
160
+ ## Available Scripts
161
+
162
+ ```bash
163
+ npm start # Start the development server
164
+ npm run build # Build for production
165
+ npm run preview # Preview the production build
166
+ npm run lint # Run ESLint
167
+ npm run i18n:scan # Scan for missing translation keys
168
+ ```
169
+
170
+ ---
132
171
 
133
- // Create reactive state
172
+ ## Your First Application
173
+
174
+ Let's build a counter to understand NativeDocument basics.
175
+
176
+ ```javascript
177
+ import { Div, Button, H1 } from 'native-document/elements';
178
+ import { Observable } from 'native-document';
179
+
180
+ // Reactive state
134
181
  const count = Observable(0);
135
182
 
136
- // Create the application
183
+ // Build the UI
137
184
  const CounterApp = Div({ class: 'counter-app' }, [
138
- H1('Counter Application'),
185
+ H1('Counter'),
139
186
 
140
- Div({ class: 'count-display' }, [
141
- 'Current count: ', count
142
- ]),
187
+ Div({ class: 'count-display' }, ['Current count: ', count]),
143
188
 
144
189
  Div([
145
- Button('Decrease').nd.onClick(() => {
146
- count.$value--;
147
- }),
148
-
149
- Button('Reset').nd.onClick(() => {
150
- count.set(0);
151
- }),
152
-
153
- Button('Increase').nd.onClick(() => {
154
- count.$value++;
155
- })
190
+ Button('−').nd.onClick(() => count.$value--),
191
+ Button('Reset').nd.onClick(() => count.set(0)),
192
+ Button('+').nd.onClick(() => count.$value++),
156
193
  ])
157
194
  ]);
158
195
 
159
- // Mount the application
160
196
  document.body.appendChild(CounterApp);
161
197
  ```
162
198
 
163
- ### Step 3: Understanding What Happened
199
+ ### What happened
200
+
201
+ 1. `Observable(0)` creates a reactive value starting at `0`
202
+ 2. `count` is passed directly as a child - the DOM updates automatically when it changes
203
+ 3. `.nd.onClick()` attaches a native click listener
204
+ 4. `count.$value++` mutates the value and triggers a DOM update
164
205
 
165
- 1. **Imported Components**: We used `Div`, `Button`, and `H1` from `NativeDocument.elements`
166
- 2. **Created Reactive State**: `Observable(0)` creates a reactive value that starts at 0
167
- 3. **Built the UI**: Elements are created with attributes and children
168
- 4. **Added Event Handlers**: `.nd.onClick()` attaches click event listeners
169
- 5. **Automatic Updates**: When `count` changes, the UI updates automatically
206
+ ---
170
207
 
171
- ## Todo List Application
208
+ ## Todo List Example
172
209
 
173
- Let's build something more complex - a todo list with add, delete, and filter functionality:
210
+ A more complete example with list rendering, filtering, and computed values:
174
211
 
175
212
  ```javascript
176
- const { Div, Input, Button, ShowIf, ForEach } = NativeDocument.elements;
177
- const { Observable } = NativeDocument;
213
+ import { Div, Input, Button, ShowIf, ForEachArray } from 'native-document/elements';
214
+ import { Observable } from 'native-document';
178
215
 
179
- // Reactive state
180
216
  const todos = Observable.array([]);
181
217
  const newTodo = Observable('');
182
- const filter = Observable('all'); // 'all', 'active', 'completed'
218
+ const filter = Observable('all'); // 'all' | 'active' | 'completed'
183
219
 
184
- // Computed values
185
220
  const filteredTodos = Observable.computed(() => {
186
- const allTodos = todos.val();
187
- const currentFilter = filter.val();
188
-
189
- if (currentFilter === 'active') {
190
- return allTodos.filter(todo => !todo.done);
221
+ const all = todos.val();
222
+ if (filter.val() === 'active') {
223
+ return all.filter(t => t.done.equals(false));
191
224
  }
192
- if (currentFilter === 'completed') {
193
- return allTodos.filter(todo => todo.done);
225
+ if (filter.val() === 'completed') {
226
+ return all.filter(t => t.done.equals(true));
194
227
  }
195
-
196
- return [...allTodos];
228
+ return [...all];
197
229
  }, [todos, filter]);
198
230
 
199
231
  const addTodo = () => {
200
232
  if (!newTodo.val().trim()) {
201
233
  return;
202
234
  }
203
- todos.push({
235
+ const todo = Observable.object({
204
236
  id: Date.now(),
205
237
  text: newTodo.val().trim(),
206
238
  done: false
207
239
  });
240
+
241
+ todos.push(todo);
208
242
  newTodo.set('');
209
243
  };
210
244
 
211
- // Todo application
212
245
  const TodoApp = Div({ class: 'todo-app' }, [
213
- // Header
246
+
214
247
  Div({ class: 'header' }, [
215
- Input({
216
- placeholder: 'What needs to be done?',
217
- value: newTodo
218
- }),
248
+ Input({ placeholder: 'What needs to be done?', value: newTodo }),
219
249
  Button('Add').nd.onClick(addTodo)
220
250
  ]),
221
251
 
222
- // Todo list container
223
- Div({ class: 'todos-list'}, [
224
- ShowIf(todos.check(list => list.length === 0),
225
- Div({ class: 'empty' }, 'No todos yet! Add one above.')), // Empty state
226
-
227
- // List of todos
228
- ForEach(filteredTodos, (todo, index) => // Todo list
229
- Div({ class: 'todo-item' }, [
230
- Input({
231
- type: 'checkbox',
232
- checked: Observable(todo.done)
233
- }).nd.onChange((e) => {
234
- const todoList = todos.val();
235
- todoList[index.val()].done = e.target.checked;
236
- todos.set([...todoList]);
237
- }),
238
-
239
- Div(['Task: ', todo.text]),
240
-
241
- Button('Delete').nd.onClick(() => {
242
- todos.splice(index.val(), 1);
243
- })
244
- ]),
245
- // Key function for efficient updates
246
- (item) => item.id
247
- )
248
- ]),
252
+ ShowIf(todos.isEmpty(),
253
+ Div({ class: 'empty' }, 'No todos yet! Add one above.')
254
+ ),
255
+
256
+ ForEachArray(filteredTodos, (todo, index) =>
257
+ Div({ class: 'todo-item' }, [
258
+ Input({ type: 'checkbox', checked: todo.done }),
259
+ Div(todo.text),
260
+ Button('Delete').nd.onClick(() => todos.removeItem(todo))
261
+ ]),
262
+ (item) => item.id
263
+ ),
249
264
 
250
- // Filters
251
265
  Div({ class: 'filters' }, [
252
266
  Button('All').nd.onClick(() => filter.set('all')),
253
267
  Button('Active').nd.onClick(() => filter.set('active')),
254
268
  Button('Completed').nd.onClick(() => filter.set('completed'))
255
269
  ])
256
-
257
270
  ]);
258
271
 
259
272
  document.body.appendChild(TodoApp);
260
273
  ```
261
274
 
262
- ## Key Concepts Demonstrated
263
-
264
- ### Observables
265
- - `Observable(value)` - Creates reactive primitive values
266
- - `Observable.array([])` - Creates reactive arrays with array methods
267
- - `Observable.computed(() => {}, [deps])` - Creates computed values
268
-
269
- ### Elements
270
- - Elements are functions that return DOM nodes
271
- - First parameter is attributes object (optional)
272
- - Second parameter is children array or single child
273
- - Children can be strings, numbers, elements, or observables
274
-
275
- ### Event Handling
276
- - `.nd.onClick()` - Add click event listener
277
- - `.nd.onChange()` - Add change event listener
278
- - Event handlers receive the native event object
279
-
280
- ### Conditional Rendering
281
- - `ShowIf(condition, content)` - Show content when condition is true
282
- - `ForEach(array, callback, propertyKey || keyFn)` - Render lists efficiently
283
-
284
- ## Project Structure
285
-
286
- For larger applications, organize your code like this:
287
-
288
- ```
289
- my-app/
290
- ├── index.html
291
- ├── src/
292
- │ ├── main.js # Application entry point
293
- │ ├── components/ # Reusable components
294
- │ │ ├── TodoItem.js
295
- │ │ └── Header.js
296
- │ ├── stores/ # Global state
297
- │ │ └── TodoStore.js
298
- │ └── utils/ # Helper functions
299
- │ └── validators.js
300
- ├── styles/
301
- │ └── main.css
302
- └── package.json
303
- ```
304
-
305
- ### Example Component (components/TodoItem.js)
306
-
307
- ```javascript
308
- import { Div, Input, Button } from 'native-document/src/elements';
309
-
310
- export function TodoItem(todo, onToggle, onDelete) {
311
- return Div({ class: 'todo-item' }, [
312
- Input({
313
- type: 'checkbox',
314
- checked: todo.done
315
- }).nd.onChange(onToggle),
316
-
317
- Div(['Task: ', todo.text]),
318
-
319
- Button('Delete').nd.onClick(onDelete)
320
- ]);
321
- }
322
- ```
323
-
324
- ## Development Workflow
325
-
326
- ### Auto Reload with Vite
327
-
328
- When using the Vite template, your development server automatically reloads when you make changes:
329
-
330
- ```bash
331
- npm run dev # Start development server
332
- npm run build # Build for production
333
- npm run preview # Preview production build
334
- ```
275
+ ---
335
276
 
336
277
  ## Browser Support
337
278
 
338
- NativeDocument works in all modern browsers that support:
279
+ NativeDocument requires:
339
280
  - ES6 Modules
340
281
  - Proxy objects
341
- - FinalizationRegistry (for automatic memory management)
342
-
343
- **Supported browsers:**
344
- - Chrome 84+
345
- - Firefox 79+
346
- - Safari 14.1+
347
- - Edge 84+
348
-
349
- ## Next Steps
282
+ - `FinalizationRegistry` (for automatic memory management)
350
283
 
351
- Now that you've built your first NativeDocument applications, explore these topics:
284
+ | Browser | Minimum version |
285
+ |---------|----------------|
286
+ | Chrome | 84+ |
287
+ | Firefox | 79+ |
288
+ | Safari | 14.1+ |
289
+ | Edge | 84+ |
352
290
 
353
- - **[Core Concepts](core-concepts.md)** - Understanding the fundamentals
354
- - **[Observables](observables.md)** - Reactive state management
355
- - **[Elements](elements.md)** - Creating and composing UI
356
- - **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
357
- - **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
358
- - **[Routing](routing.md)** - Navigation and URL management
359
- - **[State Management](state-management.md)** - Global state patterns
360
- - **[Lifecycle Events](lifecycle-events.md)** - Lifecycle events
361
- - **[Memory Management](memory-management.md)** - Memory management
362
- - **[Anchor](anchor.md)** - Anchor
291
+ ---
363
292
 
364
293
  ## Common Issues
365
294
 
366
- ### Import Errors
367
- **Problem**: `Cannot resolve module 'native-document'`
295
+ ### Import errors
368
296
 
369
- **Solution**: Make sure you're using the correct import path:
370
297
  ```javascript
371
- // Correct
372
- import { Div } from 'native-document/src/elements'
373
- import { Observable } from 'native-document'
298
+ // ✅ Correct
299
+ import { Div, Button } from 'native-document/elements';
300
+ import { Observable } from 'native-document';
301
+ import { Router, Link } from 'native-document/router';
302
+ import { tr } from 'native-document/i18n';
374
303
 
375
304
  // CDN
376
- const { Div } = NativeDocument.elements;
305
+ const { Div, Button } = NativeDocument.elements;
377
306
  const { Observable } = NativeDocument;
378
307
  ```
379
308
 
380
- ### Observable Not Updating
381
- **Problem**: UI doesn't update when you change observable values
309
+ ### Observable not updating the DOM
382
310
 
383
- **Solution**: Make sure you're using `.set()` method:
384
311
  ```javascript
385
- // Wrong
312
+ // ❌ Wrong - direct assignment on the outer variable
386
313
  count = 5;
387
314
 
388
- // Correct
315
+ // ✅ Correct
389
316
  count.set(5);
390
- // Correct
391
317
  count.$value = 5;
392
318
  ```
393
319
 
394
- ### Memory Leaks
395
- **Problem**: Application slows down over time
320
+ ### Memory leaks
321
+
322
+ NativeDocument handles cleanup automatically. For manual subscriptions, store and call the unsubscribe function:
396
323
 
397
- **Solution**: NativeDocument has automatic memory management, but you can help by cleaning up manual subscriptions:
398
324
  ```javascript
399
- const unsubscribe = observable.subscribe(callback);
325
+ const callback = () => {};
326
+ observable.subscribe(callback);
327
+
400
328
  // Later...
401
- unsubscribe(); // Clean up manually if needed
329
+ observable.unsubscribe(callback)
402
330
  ```
403
331
 
404
- Ready to dive deeper? Continue with [Core Concepts](core-concepts.md)!
332
+ ---
333
+
334
+ ## Next Steps
335
+
336
+ - **[Core Concepts](./core-concepts.md)** - Understanding the fundamentals
337
+ - **[Observables](./observables.md)** - Reactive state management
338
+ - **[Elements](./elements.md)** - Creating and composing UI
339
+ - **[Routing](./routing.md)** - Navigation and URL management
340
+ - **[State Management](./state-management.md)** - Global state patterns
341
+ - **[CLI](./cli.md)** - All scaffolding commands
342
+ - **[i18n & Formatting](./i18n.md)** - Translations and locale-aware formatting