neo.mjs 10.0.0-beta.5 → 10.0.0

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 (491) hide show
  1. package/.github/RELEASE_NOTES/v10.0.0-beta.1.md +20 -0
  2. package/.github/RELEASE_NOTES/v10.0.0-beta.2.md +73 -0
  3. package/.github/RELEASE_NOTES/v10.0.0-beta.3.md +39 -0
  4. package/.github/RELEASE_NOTES/v10.0.0-beta.5.md +70 -0
  5. package/.github/RELEASE_NOTES/v10.0.0-beta.6.md +48 -0
  6. package/.github/RELEASE_NOTES/v10.0.0.md +52 -0
  7. package/.github/epic-functional-components.md +498 -0
  8. package/.github/ticket-asymmetric-vdom-updates.md +122 -0
  9. package/README.md +0 -3
  10. package/ServiceWorker.mjs +2 -2
  11. package/apps/colors/store/Colors.mjs +1 -0
  12. package/apps/colors/view/GridContainer.mjs +3 -0
  13. package/apps/colors/view/HeaderToolbar.mjs +2 -0
  14. package/apps/colors/view/Viewport.mjs +3 -0
  15. package/apps/covid/view/FooterContainer.mjs +3 -0
  16. package/apps/covid/view/GalleryContainer.mjs +2 -0
  17. package/apps/covid/view/GalleryContainerController.mjs +1 -0
  18. package/apps/covid/view/HeaderContainer.mjs +2 -0
  19. package/apps/covid/view/HelixContainer.mjs +2 -0
  20. package/apps/covid/view/HelixContainerController.mjs +1 -0
  21. package/apps/covid/view/MainContainer.mjs +3 -0
  22. package/apps/covid/view/TableContainer.mjs +3 -0
  23. package/apps/covid/view/TableContainerController.mjs +1 -0
  24. package/apps/covid/view/WorldMapContainer.mjs +2 -0
  25. package/apps/covid/view/country/Gallery.mjs +3 -0
  26. package/apps/covid/view/country/Helix.mjs +8 -0
  27. package/apps/covid/view/country/HistoricalDataTable.mjs +1 -0
  28. package/apps/covid/view/country/Table.mjs +2 -0
  29. package/apps/covid/view/mapboxGl/Component.mjs +1 -0
  30. package/apps/covid/view/mapboxGl/Container.mjs +2 -0
  31. package/apps/email/EPIC_PLAN.md +58 -0
  32. package/apps/email/neo-config.json +2 -2
  33. package/apps/email/store/Emails.mjs +11 -1
  34. package/apps/email/view/ComposeView.mjs +44 -0
  35. package/apps/email/view/MainView.mjs +89 -0
  36. package/apps/email/view/Viewport.mjs +4 -33
  37. package/apps/email/view/ViewportStateProvider.mjs +3 -3
  38. package/apps/form/store/SideNav.mjs +1 -0
  39. package/apps/form/view/FormContainer.mjs +1 -0
  40. package/apps/form/view/FormPageContainer.mjs +2 -0
  41. package/apps/form/view/SideNavList.mjs +1 -0
  42. package/apps/form/view/Viewport.mjs +3 -0
  43. package/apps/portal/childapps/preview/MainContainer.mjs +1 -0
  44. package/apps/portal/index.html +1 -1
  45. package/apps/portal/store/BlogPosts.mjs +2 -0
  46. package/apps/portal/store/Content.mjs +1 -0
  47. package/apps/portal/store/ContentSections.mjs +1 -0
  48. package/apps/portal/store/Examples.mjs +1 -0
  49. package/apps/portal/view/HeaderToolbar.mjs +1 -0
  50. package/apps/portal/view/Viewport.mjs +5 -0
  51. package/apps/portal/view/ViewportController.mjs +11 -3
  52. package/apps/portal/view/about/Container.mjs +2 -0
  53. package/apps/portal/view/about/MemberContainer.mjs +7 -0
  54. package/apps/portal/view/blog/Container.mjs +2 -0
  55. package/apps/portal/view/blog/List.mjs +2 -0
  56. package/apps/portal/view/examples/List.mjs +29 -19
  57. package/apps/portal/view/examples/TabContainer.mjs +4 -0
  58. package/apps/portal/view/home/ContentBox.mjs +3 -0
  59. package/apps/portal/view/home/FeatureSection.mjs +8 -0
  60. package/apps/portal/view/home/FooterContainer.mjs +4 -1
  61. package/apps/portal/view/home/MainContainer.mjs +2 -0
  62. package/apps/portal/view/home/parts/AfterMath.mjs +2 -0
  63. package/apps/portal/view/home/parts/BaseContainer.mjs +1 -0
  64. package/apps/portal/view/home/parts/Colors.mjs +4 -0
  65. package/apps/portal/view/home/parts/Features.mjs +2 -0
  66. package/apps/portal/view/home/parts/Helix.mjs +5 -0
  67. package/apps/portal/view/home/parts/How.mjs +4 -0
  68. package/apps/portal/view/home/parts/MainNeo.mjs +1 -0
  69. package/apps/portal/view/home/parts/References.mjs +2 -0
  70. package/apps/portal/view/learn/ContentComponent.mjs +11 -5
  71. package/apps/portal/view/learn/ContentTreeList.mjs +2 -0
  72. package/apps/portal/view/learn/CubeLayoutButton.mjs +1 -0
  73. package/apps/portal/view/learn/MainContainer.mjs +4 -0
  74. package/apps/portal/view/learn/PageContainer.mjs +2 -0
  75. package/apps/portal/view/learn/PageSectionsContainer.mjs +3 -0
  76. package/apps/portal/view/learn/PageSectionsList.mjs +1 -0
  77. package/apps/portal/view/services/Component.mjs +1 -0
  78. package/apps/realworld/api/Base.mjs +1 -0
  79. package/apps/realworld/view/HeaderComponent.mjs +4 -0
  80. package/apps/realworld/view/HomeComponent.mjs +7 -0
  81. package/apps/realworld/view/MainContainer.mjs +2 -0
  82. package/apps/realworld/view/MainContainerController.mjs +2 -0
  83. package/apps/realworld/view/article/CommentComponent.mjs +3 -0
  84. package/apps/realworld/view/article/Component.mjs +17 -10
  85. package/apps/realworld/view/article/CreateCommentComponent.mjs +2 -0
  86. package/apps/realworld/view/article/CreateComponent.mjs +5 -0
  87. package/apps/realworld/view/article/PreviewComponent.mjs +9 -0
  88. package/apps/realworld/view/article/TagListComponent.mjs +2 -0
  89. package/apps/realworld/view/user/ProfileComponent.mjs +7 -0
  90. package/apps/realworld/view/user/SettingsComponent.mjs +5 -0
  91. package/apps/realworld/view/user/SignUpComponent.mjs +3 -0
  92. package/apps/realworld2/api/Base.mjs +1 -0
  93. package/apps/realworld2/view/FooterComponent.mjs +1 -0
  94. package/apps/realworld2/view/HeaderToolbar.mjs +3 -0
  95. package/apps/realworld2/view/HomeContainer.mjs +1 -0
  96. package/apps/realworld2/view/MainContainer.mjs +2 -0
  97. package/apps/realworld2/view/MainContainerController.mjs +1 -0
  98. package/apps/realworld2/view/article/Helix.mjs +1 -0
  99. package/apps/realworld2/view/article/PreviewComponent.mjs +9 -0
  100. package/apps/realworld2/view/article/PreviewList.mjs +1 -0
  101. package/apps/realworld2/view/article/TagListComponent.mjs +2 -0
  102. package/apps/route/view/CenterContainer.mjs +1 -0
  103. package/apps/route/view/MainView.mjs +1 -0
  104. package/apps/sharedcovid/childapps/sharedcovidchart/MainContainer.mjs +1 -0
  105. package/apps/sharedcovid/childapps/sharedcovidgallery/MainContainer.mjs +1 -0
  106. package/apps/sharedcovid/childapps/sharedcovidhelix/MainContainer.mjs +1 -0
  107. package/apps/sharedcovid/childapps/sharedcovidmap/MainContainer.mjs +1 -0
  108. package/apps/sharedcovid/view/FooterContainer.mjs +3 -0
  109. package/apps/sharedcovid/view/GalleryContainer.mjs +2 -0
  110. package/apps/sharedcovid/view/GalleryContainerController.mjs +1 -0
  111. package/apps/sharedcovid/view/HeaderContainer.mjs +2 -0
  112. package/apps/sharedcovid/view/HelixContainer.mjs +2 -0
  113. package/apps/sharedcovid/view/HelixContainerController.mjs +1 -0
  114. package/apps/sharedcovid/view/MainContainer.mjs +3 -0
  115. package/apps/sharedcovid/view/TableContainer.mjs +3 -0
  116. package/apps/sharedcovid/view/TableContainerController.mjs +1 -0
  117. package/apps/sharedcovid/view/WorldMapContainer.mjs +2 -0
  118. package/apps/sharedcovid/view/country/Gallery.mjs +3 -0
  119. package/apps/sharedcovid/view/country/Helix.mjs +8 -0
  120. package/apps/sharedcovid/view/country/HistoricalDataTable.mjs +1 -0
  121. package/apps/sharedcovid/view/country/Table.mjs +2 -0
  122. package/apps/sharedcovid/view/mapboxGl/Component.mjs +1 -0
  123. package/apps/sharedcovid/view/mapboxGl/Container.mjs +2 -0
  124. package/apps/shareddialog/childapps/shareddialog2/view/MainContainer.mjs +2 -0
  125. package/apps/shareddialog/view/DemoDialog.mjs +2 -0
  126. package/apps/shareddialog/view/MainContainer.mjs +2 -0
  127. package/apps/shareddialog/view/MainContainerController.mjs +1 -0
  128. package/buildScripts/addReactiveTags.mjs +191 -0
  129. package/buildScripts/checkReactiveTags.mjs +160 -0
  130. package/docs/app/store/Api.mjs +1 -0
  131. package/docs/app/store/Examples.mjs +1 -0
  132. package/docs/app/view/ApiTreeList.mjs +1 -0
  133. package/docs/app/view/ContentTabContainer.mjs +2 -0
  134. package/docs/app/view/ExamplesTreeList.mjs +2 -0
  135. package/docs/app/view/HeaderContainer.mjs +3 -0
  136. package/docs/app/view/MainContainer.mjs +5 -0
  137. package/docs/app/view/classdetails/HeaderComponent.mjs +1 -0
  138. package/docs/app/view/classdetails/MainContainer.mjs +3 -0
  139. package/docs/app/view/classdetails/MembersList.mjs +5 -0
  140. package/docs/app/view/classdetails/SourceViewComponent.mjs +2 -0
  141. package/examples/ConfigurationViewport.mjs +14 -8
  142. package/examples/calendar/weekview/MainContainer.mjs +4 -0
  143. package/examples/component/coronaGallery/CountryGallery.mjs +2 -0
  144. package/examples/component/coronaGallery/CountryStore.mjs +1 -0
  145. package/examples/component/coronaGallery/Viewport.mjs +3 -0
  146. package/examples/component/coronaGallery/ViewportController.mjs +1 -0
  147. package/examples/component/coronaHelix/CountryHelix.mjs +7 -0
  148. package/examples/component/coronaHelix/MainContainer.mjs +1 -0
  149. package/examples/component/gallery/ImageStore.mjs +1 -0
  150. package/examples/component/helix/ImageStore.mjs +1 -0
  151. package/examples/component/helix/Viewport.mjs +3 -0
  152. package/examples/component/helix/ViewportController.mjs +1 -0
  153. package/examples/component/multiWindowCoronaGallery/childapp/Viewport.mjs +1 -0
  154. package/examples/component/multiWindowHelix/childapp/Viewport.mjs +1 -0
  155. package/examples/component/wrapper/googleMaps/MapComponent.mjs +2 -0
  156. package/examples/core/config/MainContainer.mjs +2 -0
  157. package/examples/dialog/DemoDialog.mjs +2 -0
  158. package/examples/dialog/MainContainer.mjs +1 -0
  159. package/examples/form/field/color/MainStore.mjs +1 -0
  160. package/examples/functional/button/base/MainContainer.mjs +207 -0
  161. package/examples/functional/button/base/app.mjs +6 -0
  162. package/examples/functional/button/base/index.html +11 -0
  163. package/examples/functional/button/base/neo-config.json +6 -0
  164. package/examples/functional/defineComponent/Component.mjs +18 -0
  165. package/examples/functional/defineComponent/MainContainer.mjs +41 -0
  166. package/examples/functional/defineComponent/app.mjs +6 -0
  167. package/examples/functional/defineComponent/index.html +11 -0
  168. package/examples/functional/defineComponent/neo-config.json +6 -0
  169. package/examples/functional/hostComponent/Component.mjs +32 -0
  170. package/examples/functional/hostComponent/MainContainer.mjs +48 -0
  171. package/examples/functional/hostComponent/app.mjs +6 -0
  172. package/examples/functional/hostComponent/index.html +11 -0
  173. package/examples/functional/hostComponent/neo-config.json +6 -0
  174. package/examples/grid/animatedRowSorting/Viewport.mjs +1 -1
  175. package/examples/grid/bigData/ControlsContainer.mjs +3 -0
  176. package/examples/grid/bigData/GridContainer.mjs +4 -2
  177. package/examples/grid/bigData/MainContainer.mjs +2 -0
  178. package/examples/grid/bigData/MainModel.mjs +1 -0
  179. package/examples/grid/bigData/MainStore.mjs +3 -0
  180. package/examples/grid/cellEditing/MainContainer.mjs +1 -1
  181. package/examples/grid/container/MainContainer.mjs +1 -1
  182. package/examples/grid/covid/GridContainer.mjs +3 -0
  183. package/examples/grid/covid/MainContainer.mjs +2 -0
  184. package/examples/grid/covid/Store.mjs +1 -0
  185. package/examples/grid/nestedRecordFields/EditUserDialog.mjs +3 -0
  186. package/examples/grid/nestedRecordFields/Viewport.mjs +3 -1
  187. package/examples/list/animate/List.mjs +4 -0
  188. package/examples/list/animate/MainContainer.mjs +2 -0
  189. package/examples/list/circle/MainStore.mjs +1 -0
  190. package/examples/list/color/MainStore.mjs +1 -0
  191. package/examples/preloadingAssets/view/MainContainer.mjs +2 -0
  192. package/examples/stateProvider/advanced/MainContainer.mjs +1 -0
  193. package/examples/stateProvider/dialog/EditUserDialog.mjs +2 -0
  194. package/examples/stateProvider/dialog/MainContainer.mjs +1 -0
  195. package/examples/stateProvider/extendedClass/MainContainer.mjs +2 -0
  196. package/examples/stateProvider/inline/MainContainer.mjs +1 -0
  197. package/examples/stateProvider/inlineNoStateProvider/MainContainer.mjs +1 -0
  198. package/examples/stateProvider/inlineNoStateProvider/MainContainerController.mjs +2 -0
  199. package/examples/stateProvider/multiWindow/EditUserDialog.mjs +3 -0
  200. package/examples/stateProvider/multiWindow/MainContainer.mjs +1 -0
  201. package/examples/stateProvider/multiWindow/Viewport.mjs +1 -0
  202. package/examples/stateProvider/nestedData/MainContainer.mjs +1 -0
  203. package/examples/stateProvider/table/MainContainer.mjs +1 -0
  204. package/examples/table/covid/MainContainer.mjs +2 -0
  205. package/examples/table/covid/Store.mjs +1 -0
  206. package/examples/table/covid/TableContainer.mjs +3 -0
  207. package/examples/table/nestedRecordFields/EditUserDialog.mjs +3 -0
  208. package/examples/table/nestedRecordFields/Viewport.mjs +1 -0
  209. package/examples/todoList/version1/MainComponent.mjs +1 -1
  210. package/examples/toolbar/breadcrumb/view/MainContainer.mjs +2 -0
  211. package/examples/toolbar/paging/store/Users.mjs +1 -0
  212. package/examples/toolbar/paging/view/AddUserDialog.mjs +3 -0
  213. package/examples/toolbar/paging/view/MainContainer.mjs +3 -0
  214. package/examples/treeAccordion/MainContainer.mjs +2 -2
  215. package/examples/worker/task/MainContainer.mjs +1 -0
  216. package/learn/Glossary.md +1 -0
  217. package/learn/UsingTheseTopics.md +1 -0
  218. package/learn/benefits/ConfigSystem.md +2 -0
  219. package/learn/benefits/Effort.md +1 -0
  220. package/learn/benefits/Features.md +1 -0
  221. package/learn/benefits/FormsEngine.md +1 -0
  222. package/learn/benefits/FourEnvironments.md +2 -0
  223. package/learn/benefits/Introduction.md +2 -0
  224. package/learn/benefits/MultiWindow.md +3 -1
  225. package/learn/benefits/OffTheMainThread.md +2 -0
  226. package/learn/benefits/Quick.md +2 -0
  227. package/learn/benefits/RPCLayer.md +2 -0
  228. package/learn/benefits/Speed.md +2 -0
  229. package/learn/blog/v10-deep-dive-functional-components.md +293 -0
  230. package/learn/blog/v10-deep-dive-reactivity.md +522 -0
  231. package/learn/blog/v10-deep-dive-state-provider.md +432 -0
  232. package/learn/blog/v10-deep-dive-vdom-revolution.md +194 -0
  233. package/learn/blog/v10-post1-love-story.md +383 -0
  234. package/learn/comparisons/NeoVsAngular.md +90 -0
  235. package/learn/comparisons/NeoVsExtJs.md +178 -0
  236. package/learn/comparisons/NeoVsNextJs.md +124 -0
  237. package/learn/comparisons/NeoVsReact.md +95 -0
  238. package/learn/comparisons/NeoVsSolid.md +78 -0
  239. package/learn/comparisons/NeoVsVue.md +92 -0
  240. package/learn/comparisons/Overview.md +46 -0
  241. package/learn/gettingstarted/ComponentModels.md +2 -0
  242. package/learn/gettingstarted/Config.md +2 -0
  243. package/learn/gettingstarted/DescribingTheUI.md +2 -0
  244. package/learn/gettingstarted/Events.md +2 -0
  245. package/learn/gettingstarted/Extending.md +2 -0
  246. package/learn/gettingstarted/References.md +2 -0
  247. package/learn/gettingstarted/Setup.md +3 -2
  248. package/learn/gettingstarted/Workspaces.md +2 -0
  249. package/learn/guides/datahandling/Collections.md +1 -0
  250. package/learn/guides/datahandling/Records.md +1 -0
  251. package/learn/guides/datahandling/StateProviders.md +130 -16
  252. package/learn/guides/datahandling/Tables.md +1 -1
  253. package/learn/guides/fundamentals/ConfigSystemDeepDive.md +1 -0
  254. package/learn/guides/fundamentals/DeclarativeComponentTreesVsImperativeVdom.md +2 -0
  255. package/learn/guides/fundamentals/DeclarativeVDOMWithEffects.md +10 -8
  256. package/learn/guides/fundamentals/ExtendingNeoClasses.md +1 -0
  257. package/learn/guides/fundamentals/InstanceLifecycle.md +3 -1
  258. package/learn/guides/fundamentals/MainThreadAddons.md +2 -0
  259. package/learn/guides/specificfeatures/Mixins.md +3 -1
  260. package/learn/guides/specificfeatures/MultiWindow.md +3 -1
  261. package/learn/guides/specificfeatures/PortalApp.md +2 -0
  262. package/learn/guides/uibuildingblocks/ComponentsAndContainers.md +2 -0
  263. package/learn/guides/uibuildingblocks/CustomComponents.md +2 -0
  264. package/learn/guides/uibuildingblocks/Layouts.md +2 -0
  265. package/learn/guides/uibuildingblocks/WorkingWithVDom.md +28 -2
  266. package/learn/guides/userinteraction/Forms.md +2 -0
  267. package/learn/guides/userinteraction/events/CustomEvents.md +2 -1
  268. package/learn/guides/userinteraction/events/DomEvents.md +2 -0
  269. package/learn/javascript/ClassFeatures.md +4 -3
  270. package/learn/javascript/Classes.md +10 -13
  271. package/learn/javascript/Overrides.md +10 -6
  272. package/learn/javascript/Super.md +12 -8
  273. package/learn/tree.json +71 -64
  274. package/learn/tutorials/Earthquakes.md +2 -0
  275. package/learn/tutorials/RSP.md +3 -1
  276. package/learn/tutorials/TodoList.md +103 -7
  277. package/package.json +8 -6
  278. package/resources/scss/src/apps/email/ComposeView.scss +16 -0
  279. package/resources/scss/src/apps/email/MainView.scss +5 -0
  280. package/resources/scss/src/apps/portal/learn/ContentComponent.scss +5 -4
  281. package/src/DefaultConfig.mjs +12 -2
  282. package/src/Main.mjs +1 -0
  283. package/src/Neo.mjs +219 -166
  284. package/src/Xhr.mjs +1 -0
  285. package/src/button/Base.mjs +13 -0
  286. package/src/button/Effect.mjs +16 -2
  287. package/src/button/Split.mjs +2 -0
  288. package/src/calendar/store/Calendars.mjs +1 -0
  289. package/src/calendar/store/Colors.mjs +1 -0
  290. package/src/calendar/store/Events.mjs +1 -0
  291. package/src/calendar/view/DayComponent.mjs +2 -0
  292. package/src/calendar/view/EditEventContainer.mjs +4 -1
  293. package/src/calendar/view/MainContainer.mjs +13 -0
  294. package/src/calendar/view/MainContainerStateProvider.mjs +14 -28
  295. package/src/calendar/view/SettingsContainer.mjs +1 -0
  296. package/src/calendar/view/YearComponent.mjs +16 -0
  297. package/src/calendar/view/calendars/ColorsList.mjs +2 -0
  298. package/src/calendar/view/calendars/Container.mjs +2 -0
  299. package/src/calendar/view/calendars/EditContainer.mjs +1 -0
  300. package/src/calendar/view/month/Component.mjs +11 -0
  301. package/src/calendar/view/settings/GeneralContainer.mjs +1 -0
  302. package/src/calendar/view/settings/MonthContainer.mjs +1 -0
  303. package/src/calendar/view/settings/WeekContainer.mjs +1 -0
  304. package/src/calendar/view/settings/YearContainer.mjs +1 -0
  305. package/src/calendar/view/week/Component.mjs +15 -1
  306. package/src/calendar/view/week/TimeAxisComponent.mjs +4 -0
  307. package/src/code/LivePreview.mjs +51 -23
  308. package/src/collection/Base.mjs +7 -10
  309. package/src/collection/Filter.mjs +6 -0
  310. package/src/collection/Sorter.mjs +3 -0
  311. package/src/component/Abstract.mjs +412 -0
  312. package/src/component/Base.mjs +48 -1077
  313. package/src/component/Canvas.mjs +1 -0
  314. package/src/component/Chip.mjs +4 -0
  315. package/src/component/Circle.mjs +14 -0
  316. package/src/component/Clock.mjs +4 -0
  317. package/src/component/DateSelector.mjs +12 -0
  318. package/src/component/Gallery.mjs +11 -0
  319. package/src/component/Helix.mjs +24 -0
  320. package/src/component/Label.mjs +1 -0
  321. package/src/component/Legend.mjs +3 -0
  322. package/src/component/MagicMoveText.mjs +4 -0
  323. package/src/component/Progress.mjs +3 -0
  324. package/src/component/Splitter.mjs +3 -0
  325. package/src/component/StatusBadge.mjs +6 -0
  326. package/src/component/Timer.mjs +4 -0
  327. package/src/component/Toast.mjs +6 -0
  328. package/src/component/Video.mjs +1 -0
  329. package/src/component/mwc/Button.mjs +7 -0
  330. package/src/component/mwc/TextField.mjs +9 -0
  331. package/src/component/wrapper/AmChart.mjs +2 -0
  332. package/src/component/wrapper/GoogleMaps.mjs +3 -0
  333. package/src/component/wrapper/MapboxGL.mjs +5 -0
  334. package/src/component/wrapper/MonacoEditor.mjs +12 -0
  335. package/src/container/Accordion.mjs +2 -0
  336. package/src/container/Base.mjs +7 -3
  337. package/src/container/Panel.mjs +1 -0
  338. package/src/container/Viewport.mjs +1 -0
  339. package/src/controller/Application.mjs +1 -0
  340. package/src/controller/Base.mjs +1 -0
  341. package/src/controller/Component.mjs +1 -0
  342. package/src/core/Base.mjs +86 -33
  343. package/src/core/Compare.mjs +4 -7
  344. package/src/core/Config.mjs +65 -52
  345. package/src/core/Effect.mjs +86 -24
  346. package/src/core/EffectManager.mjs +117 -8
  347. package/src/core/IdGenerator.mjs +13 -44
  348. package/src/core/Observable.mjs +69 -65
  349. package/src/data/Model.mjs +2 -0
  350. package/src/data/Store.mjs +7 -0
  351. package/src/data/connection/WebSocket.mjs +2 -0
  352. package/src/date/DayViewComponent.mjs +2 -0
  353. package/src/date/SelectorContainer.mjs +14 -0
  354. package/src/dialog/Base.mjs +8 -0
  355. package/src/draggable/DragZone.mjs +5 -0
  356. package/src/draggable/tree/DragZone.mjs +1 -0
  357. package/src/filter/BooleanContainer.mjs +2 -0
  358. package/src/filter/NumberContainer.mjs +3 -0
  359. package/src/filter/ToggleOperatorsButton.mjs +2 -0
  360. package/src/form/Fieldset.mjs +6 -0
  361. package/src/form/field/Base.mjs +7 -0
  362. package/src/form/field/CheckBox.mjs +18 -0
  363. package/src/form/field/Chip.mjs +1 -0
  364. package/src/form/field/ComboBox.mjs +8 -0
  365. package/src/form/field/Country.mjs +1 -0
  366. package/src/form/field/Currency.mjs +2 -0
  367. package/src/form/field/Date.mjs +4 -0
  368. package/src/form/field/Display.mjs +1 -0
  369. package/src/form/field/Email.mjs +1 -0
  370. package/src/form/field/FileUpload.mjs +7 -0
  371. package/src/form/field/Hidden.mjs +1 -0
  372. package/src/form/field/Number.mjs +7 -0
  373. package/src/form/field/Password.mjs +1 -0
  374. package/src/form/field/Phone.mjs +3 -0
  375. package/src/form/field/Picker.mjs +2 -0
  376. package/src/form/field/Radio.mjs +1 -0
  377. package/src/form/field/Range.mjs +3 -0
  378. package/src/form/field/Search.mjs +2 -0
  379. package/src/form/field/Text.mjs +43 -5
  380. package/src/form/field/TextArea.mjs +7 -0
  381. package/src/form/field/Time.mjs +6 -0
  382. package/src/form/field/Url.mjs +3 -0
  383. package/src/form/field/ZipCode.mjs +2 -0
  384. package/src/form/field/trigger/Base.mjs +3 -0
  385. package/src/form/field/trigger/Clear.mjs +2 -0
  386. package/src/form/field/trigger/CopyToClipboard.mjs +2 -0
  387. package/src/form/field/trigger/Date.mjs +1 -0
  388. package/src/form/field/trigger/Picker.mjs +1 -0
  389. package/src/form/field/trigger/Search.mjs +1 -0
  390. package/src/form/field/trigger/SpinDown.mjs +2 -0
  391. package/src/form/field/trigger/SpinUp.mjs +1 -0
  392. package/src/form/field/trigger/Time.mjs +2 -0
  393. package/src/functional/_export.mjs +6 -0
  394. package/src/functional/button/Base.mjs +384 -0
  395. package/src/functional/component/Base.mjs +405 -0
  396. package/src/functional/defineComponent.mjs +102 -0
  397. package/src/functional/useConfig.mjs +52 -0
  398. package/src/functional/useEvent.mjs +43 -0
  399. package/src/grid/Body.mjs +20 -1
  400. package/src/grid/Container.mjs +50 -60
  401. package/src/grid/ScrollManager.mjs +2 -0
  402. package/src/grid/VerticalScrollbar.mjs +2 -0
  403. package/src/grid/column/Base.mjs +2 -0
  404. package/src/grid/header/Button.mjs +7 -0
  405. package/src/grid/header/Toolbar.mjs +6 -0
  406. package/src/grid/plugin/AnimateRows.mjs +2 -0
  407. package/src/layout/Base.mjs +3 -0
  408. package/src/layout/Card.mjs +1 -0
  409. package/src/layout/Cube.mjs +18 -4
  410. package/src/layout/Fit.mjs +1 -0
  411. package/src/layout/Flexbox.mjs +7 -0
  412. package/src/layout/Form.mjs +2 -0
  413. package/src/layout/Grid.mjs +1 -0
  414. package/src/layout/HBox.mjs +1 -0
  415. package/src/layout/VBox.mjs +1 -0
  416. package/src/list/Base.mjs +13 -0
  417. package/src/list/Chip.mjs +1 -0
  418. package/src/list/Circle.mjs +2 -0
  419. package/src/list/Color.mjs +1 -0
  420. package/src/list/plugin/Animate.mjs +2 -0
  421. package/src/main/DeltaUpdates.mjs +1 -0
  422. package/src/main/DomEvents.mjs +2 -0
  423. package/src/main/addon/CloneNode.mjs +1 -0
  424. package/src/main/addon/Cookie.mjs +1 -0
  425. package/src/main/addon/GoogleMaps.mjs +1 -0
  426. package/src/main/addon/LocalStorage.mjs +1 -0
  427. package/src/main/addon/MapboxGL.mjs +1 -0
  428. package/src/main/addon/Markdown.mjs +1 -0
  429. package/src/main/addon/Navigator.mjs +1 -0
  430. package/src/main/addon/Popover.mjs +1 -0
  431. package/src/main/addon/Stylesheet.mjs +1 -0
  432. package/src/main/addon/WindowPosition.mjs +1 -0
  433. package/src/manager/Component.mjs +0 -71
  434. package/src/manager/VDomUpdate.mjs +320 -0
  435. package/src/menu/List.mjs +6 -0
  436. package/src/menu/Model.mjs +1 -0
  437. package/src/menu/Panel.mjs +3 -0
  438. package/src/menu/Store.mjs +1 -0
  439. package/src/mixin/DomEvents.mjs +130 -0
  440. package/src/mixin/VdomLifecycle.mjs +670 -0
  441. package/src/plugin/Base.mjs +1 -0
  442. package/src/plugin/Resizable.mjs +2 -0
  443. package/src/selection/Model.mjs +15 -18
  444. package/src/selection/grid/BaseModel.mjs +1 -0
  445. package/src/sitemap/Component.mjs +1 -0
  446. package/src/state/Provider.mjs +129 -87
  447. package/src/state/createHierarchicalDataProxy.mjs +39 -25
  448. package/src/tab/Container.mjs +6 -0
  449. package/src/tab/Strip.mjs +1 -0
  450. package/src/tab/header/Button.mjs +2 -0
  451. package/src/tab/header/EffectButton.mjs +2 -0
  452. package/src/tab/header/Toolbar.mjs +1 -0
  453. package/src/table/Body.mjs +3 -0
  454. package/src/table/Container.mjs +10 -0
  455. package/src/table/header/Button.mjs +8 -0
  456. package/src/table/header/Toolbar.mjs +5 -0
  457. package/src/table/plugin/CellEditing.mjs +1 -0
  458. package/src/toolbar/Base.mjs +4 -0
  459. package/src/toolbar/Breadcrumb.mjs +3 -0
  460. package/src/toolbar/Paging.mjs +5 -0
  461. package/src/tooltip/Base.mjs +2 -0
  462. package/src/tree/List.mjs +3 -0
  463. package/src/util/HashHistory.mjs +1 -0
  464. package/src/util/KeyNavigation.mjs +2 -0
  465. package/src/util/Matrix.mjs +1 -0
  466. package/src/util/VDom.mjs +18 -5
  467. package/src/util/VNode.mjs +7 -1
  468. package/src/util/vdom/TreeBuilder.mjs +105 -0
  469. package/src/vdom/Helper.mjs +35 -23
  470. package/src/vdom/VNode.mjs +4 -6
  471. package/src/worker/App.mjs +1 -0
  472. package/src/worker/Base.mjs +2 -0
  473. package/src/worker/Manager.mjs +2 -0
  474. package/src/worker/ServiceBase.mjs +6 -1
  475. package/src/worker/mixin/RemoteMethodAccess.mjs +1 -6
  476. package/test/siesta/siesta.js +17 -2
  477. package/test/siesta/tests/VdomCalendar.mjs +19 -15
  478. package/test/siesta/tests/VdomHelper.mjs +7 -7
  479. package/test/siesta/tests/classic/Button.mjs +113 -0
  480. package/test/siesta/tests/core/Effect.mjs +10 -14
  481. package/test/siesta/tests/core/EffectBatching.mjs +72 -79
  482. package/test/siesta/tests/functional/Button.mjs +113 -0
  483. package/test/siesta/tests/state/ProviderNestedDataConfigs.mjs +314 -0
  484. package/test/siesta/tests/state/createHierarchicalDataProxy.mjs +42 -55
  485. package/test/siesta/tests/vdom/Advanced.mjs +14 -8
  486. package/test/siesta/tests/vdom/VdomAsymmetricUpdates.mjs +366 -0
  487. package/test/siesta/tests/vdom/VdomRealWorldUpdates.mjs +249 -0
  488. package/test/siesta/tests/vdom/layout/Cube.mjs +11 -7
  489. package/test/siesta/tests/vdom/table/Container.mjs +9 -5
  490. package/learn/javascript/NewNode.md +0 -31
  491. package/src/core/EffectBatchManager.mjs +0 -68
@@ -0,0 +1,383 @@
1
+ # A Frontend Love Story: Why the Strategies of Today Won't Build the Apps of Tomorrow
2
+
3
+ If you’re a frontend developer in 2025, you are a survivor. You’ve mastered a craft that exists in a state of constant,
4
+ churning evolution. You embraced the power of declarative UIs, celebrated the elegance of modern component models, and
5
+ learned to build entire worlds inside a browser tab. It was, for a time, a kind of honeymoon. We were in love with what
6
+ we could create.
7
+
8
+ But honeymoons end. And for many of us, the love story has become strained. The passion is still there, but it’s buried
9
+ under layers of accumulated complexity, performance anxiety, and the nagging feeling that we’re spending more time fighting
10
+ our tools than building the ambitious applications we dream of.
11
+
12
+ This isn’t just a story about the pain of frontend development. It’s a story about a false choice we’ve been forced into
13
+ a choice between two flawed paradigms that are holding us back from building the future.
14
+
15
+ *(Part 1 of 5 in the v10 blog series. Details at the bottom.)*
16
+
17
+ ---
18
+
19
+ ## Part 1: The Client-Side Heartbreak - A War on a Single Front
20
+
21
+ Our first love was the interactive, client-side application. We were promised a world of rich, stateful experiences that
22
+ felt like native desktop software, running entirely in the browser. But as our ambitions grew, so did the heartbreak.
23
+ The very architecture that gave us this power became our cage.
24
+
25
+ ### The Tyranny of the Main Thread
26
+
27
+ The core philosophy of a truly performant system should be that *"the browser's main thread must be treated like a
28
+ neurosurgeon: only perform precise, scheduled operations with zero distractions."*
29
+
30
+ Mainstream frameworks do the opposite. They treat the main thread like a frantic, overworked general practitioner.
31
+ We ask this single, precious resource to be a world-class UI renderer, a high-performance JavaScript VM, a sophisticated
32
+ layout engine, and a millisecond-responsive event handler—all at the same time.
33
+
34
+ The result is a constant, low-grade war for milliseconds. Every developer knows the feeling in their gut: the janky
35
+ scroll as a list virtualizer struggles to keep up; the button that feels "stuck" because a complex component is rendering;
36
+ the entire UI freezing during a heavy data calculation.
37
+
38
+ This isn't just a technical failure; it's a breach of trust with the user. Every stutter and freeze erodes their confidence
39
+ in our creations.
40
+
41
+ ### Death by a Thousand Optimizations
42
+
43
+ To compensate for this architectural flaw, we've been given a toolbox of manual overrides. In the React world, this is
44
+ the "memoization tax." In other frameworks, it might be manual change detection strategies or complex observable setups.
45
+
46
+ The result is the same: you, the developer, are forced to write extra code to prevent the framework from doing unnecessary work.
47
+
48
+ This tax is most obvious when looking at a "performant" component side-by-side with one that is performant by design.
49
+
50
+ <center>
51
+ <table>
52
+ <tr>
53
+ <th>A "Performant" React Component</th>
54
+ <th>The Neo.mjs Equivalent</th>
55
+ </tr>
56
+ <tr>
57
+ <td>
58
+
59
+ ```javascript
60
+ import {useState, useMemo} from 'react';
61
+
62
+ // A typical "optimized" React component
63
+ const MyComponent = React.memo(({ user }) => {
64
+ // This will only log when the component *actually* re-renders
65
+ console.log('Rendering MyComponent');
66
+ return <div>{user.name}</div>;
67
+ });
68
+
69
+ const App = () => {
70
+ const [count, setCount] = useState(0);
71
+
72
+ // We must wrap this in useMemo...
73
+ const user = useMemo(() => ({ name: 'John Doe' }), []);
74
+
75
+ // ...to prevent MyComponent from re-rendering
76
+ // every time the App's state changes.
77
+ return (
78
+ <div>
79
+ <button onClick={() => setCount(c => c + 1)}>
80
+ App Clicks: {count}
81
+ </button>
82
+ <MyComponent user={user} />
83
+ </div>
84
+ );
85
+ };
86
+ ```
87
+
88
+ </td>
89
+ <td>
90
+
91
+ ```javascript
92
+ import {defineComponent, useConfig} from 'neo.mjs/src/functional/_export.mjs';
93
+
94
+ const MyComponent = defineComponent({
95
+ // The user config is passed in from the parent
96
+ createVdom({user}) {
97
+ // This will only log when the component *actually* re-renders
98
+ console.log('Rendering MyComponent');
99
+ return {text: user.name};
100
+ }
101
+ });
102
+
103
+ export default defineComponent({
104
+ createVdom() {
105
+ const [count, setCount] = useConfig(0);
106
+ // By using useConfig, the user object is stable across re-renders
107
+ const [user] = useConfig({name: 'John Doe'});
108
+
109
+ return {
110
+ cn: [{
111
+ tag : 'button',
112
+ text : `App Clicks: ${count}`,
113
+ handler: () => setCount(prev => prev + 1)
114
+ }, {
115
+ module: MyComponent,
116
+ // Pass the stable user object to the child
117
+ user
118
+ }]
119
+ }
120
+ }
121
+ });
122
+ ```
123
+
124
+ </td>
125
+ </tr>
126
+ </table>
127
+ </center>
128
+
129
+ At first glance, the Neo.mjs syntax might seem more verbose than JSX. That's a deliberate design choice.
130
+ Instead of a custom syntax that requires transpilation, Neo.mjs uses plain, structured JavaScript objects to define the UI.
131
+ This makes the code more explicit, eliminates a build step, and creates a blueprint that is incredibly easy for LMMs/AIs
132
+ to read and manipulate.
133
+
134
+ Because the core is pure JavaScript, it also opens the door for optional, more familiar syntaxes
135
+ based on [Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) in the
136
+ future, should the community desire it. The real story, however, isn't the syntax, but the outcome:
137
+ the elimination of the memoization tax.
138
+
139
+ This isn't an advanced optimization strategy; it's a tedious, mandatory chore. It's a tax on our time and a cage for our
140
+ creativity. We spend a significant portion of our development cycle simply preventing the framework from doing unnecessary
141
+ work, a task that the framework should be doing for us.
142
+
143
+ One of the core goals for Neo.mjs v10 was to 'meet developers where they are,' making the framework more approachable
144
+ with familiar patterns.
145
+
146
+ While the syntax for these functional components might feel familiar, it's crucial to understand that this familiarity
147
+ is just the tip of the iceberg. There is a LOT more to it.
148
+
149
+ ### The State Management Labyrinth
150
+
151
+ Nowhere is this pain more acute than when building a truly complex, stateful UI. Forget a simple login form. Imagine a
152
+ common enterprise requirement: a massive, multi-page, drag-and-drop form generator for a government agency, with 300+ fields,
153
+ conditional logic, and real-time validation.
154
+
155
+ How do we even begin to build this in a single-threaded world?
156
+
157
+ The state management alone is a paralyzing choice.
158
+
159
+ Do we use hundreds of local state hooks and create a component tree
160
+ so riddled with props-drilling that it becomes unmanageable? Or do we build a monolithic state object in a global store,
161
+ only to find that every keystroke triggers a performance-killing update across the entire application?
162
+
163
+ We reach for heroic third-party libraries—each a brilliant solution to a problem that, if we're being honest, shouldn't
164
+ be this hard in the first place. The simple act of building a form, a fundamental building block of the web, has become
165
+ an architectural nightmare.
166
+
167
+ In Neo.mjs, forms are powerful, self-contained state managers. Each `FormContainer` inherently manages the data for its
168
+ fields, building a hierarchical data object based on field `name` attributes. This simplifies data collection, validation,
169
+ and even supports complex nested structures and lazy-loaded sections **without requiring an external state provider**.
170
+ While forms can seamlessly integrate with the framework's state providers for broader application-level data sharing,
171
+ their core functionality for managing form data is self-sufficient.
172
+
173
+ ---
174
+
175
+ ## Part 2: The Server-Side Mirage - A Different Kind of Heartbreak
176
+
177
+ The industry saw this pain and offered a solution: "The client is too slow! Let's move rendering to the server with
178
+ Server-Side Rendering (SSR)." Frameworks like Next.js and SvelteKit promised to solve our problems by delivering
179
+ fast-loading, pre-rendered HTML.
180
+
181
+ And for a certain class of website, it was a revelation. Blogs, marketing sites, and e-commerce storefronts have never
182
+ been faster. SSR is a brilliant strategy for delivering *content*.
183
+
184
+ But it is a poor strategy for building *applications*.
185
+
186
+ The promise of SSR quickly becomes a mirage when confronted with the applications we truly want to build.
187
+
188
+ How do you build a multi-window IDE, where a user can drag a component from one screen to another,
189
+ when the server's job is to send you static HTML? How do you manage the persistent, real-time state of a financial trading
190
+ dashboard when every update requires a round trip to a serverless function?
191
+
192
+ You can't. You end up with a clunky hybrid, where the dream of a fluid, native-like web app dies, caught between a slow
193
+ client and an inflexible server. The server can't possibly know the intricate, second-by-second state of a complex user
194
+ interface, and the client is left trying to hydrate static markup into a living, breathing application.
195
+
196
+ SSR isn't a solution to the problem of application complexity; it's an elegant retreat from it.
197
+
198
+ ---
199
+
200
+ ## Part 3: The Architectural Epiphany - The Third Way
201
+
202
+ We've been trapped in a false choice: a client-side app that's a nightmare to scale, or a server-side site that can't
203
+ handle true interactivity. Neither of these paths leads to the future we were promised.
204
+
205
+ The entire client vs. server debate is a distraction. The answer isn't about *where* you render, but *how* your entire
206
+ application is architected.
207
+
208
+ The only real solution is to **escape the main thread entirely.**
209
+
210
+ This is the architectural epiphany that powers Neo.mjs. It’s a framework built on a simple, powerful idea: your
211
+ application should not live on the main thread. It should live in a Web Worker.
212
+
213
+ By moving the entire application—the component tree, the state management, and the business logic—into a dedicated App Worker,
214
+ we liberate the main thread to do what it does best: paint pixels. The result is a level of performance and responsiveness
215
+ that single-threaded frameworks can only dream of.
216
+
217
+ That 300-field form generator that was an architectural nightmare? In Neo.mjs, it's trivial. The form's state and
218
+ validation logic live in the worker, completely decoupled from the DOM. The main thread only ever receives the minimal
219
+ set of changes required to update the view. The UI remains fluid and responsive, even with hundreds of fields, because
220
+ it is architecturally impossible for the application logic to block it.
221
+
222
+ This isn't a workaround. It's a new paradigm.
223
+
224
+ ---
225
+
226
+ ## Part 4: The AI Revelation - The Framework for the Next Generation
227
+
228
+ This architectural shift doesn't just solve the problems of today; it unlocks the possibilities of tomorrow. The next
229
+ great leap in software development is upon us: the rise of AI as a co-developer and a core part of the user experience.
230
+ And this new reality exposes the flaws of our current tools in a new and unforgiving light.
231
+
232
+ Neo.mjs is uniquely positioned as **The Framework For and By AI.**
233
+
234
+ ### The Framework FOR AI: Building the Cockpit
235
+
236
+ Interacting with powerful AI models requires more than a simple chat window. It requires a cockpit. A multi-window,
237
+ IDE-like environment where a user can write a prompt in one window, see the AI's reasoning in a second, view the
238
+ generated code in a third, and see a live preview in a fourth.
239
+
240
+ This is impossible with traditional frameworks.
241
+
242
+ But it's native to Neo.mjs. Its multi-threaded, multi-window architecture
243
+ is the perfect foundation for building the complex, data-intensive UIs that the AI era demands.
244
+
245
+ ### The Framework BY AI: Speaking the Right Language
246
+
247
+ AIs are now writing frontend code. But we are asking them to write JSX or other template syntaxes—a mix of HTML and
248
+ JavaScript that is verbose, error-prone, and fundamentally human-centric.
249
+
250
+ AIs don't think in JSX. They think in structured data. They think in JSON.
251
+
252
+ Neo.mjs is built on the language of AI. It uses **declarative JSON blueprints** to define UI. An AI generating a JSON
253
+ blueprint is an order of magnitude simpler, faster, and more reliable than an AI generating JSX. The framework's
254
+ `DomApiRenderer` then takes this simple blueprint and translates it into hyper-performant, secure DOM operations.
255
+ The AI doesn't need to know *how* to build the UI; it just needs to describe *what* the UI is.
256
+
257
+ Beyond the architectural innovations, a significant effort has been invested in making the Neo.mjs codebase inherently
258
+ understandable for AI. Through countless dedicated sessions, we've meticulously added intent-driven comments to core
259
+ files (like `src/core/Config.mjs`), ensuring that when Large Language Models are pointed to relevant source code, they
260
+ can easily grasp the underlying logic and design. This commitment to AI-readability is a testament to Neo.mjs truly
261
+ being a 'Framework For and By AI,' designed for the future of collaborative development.
262
+
263
+ ---
264
+
265
+ ## Your Invitation to a New Way of Building
266
+
267
+ This brings us to today. **Neo.mjs v10 is not an upgrade—it's a new operating system for the web.** It is the culmination
268
+ of years of architectural pioneering, refined into a cohesive and powerful whole. It is the realization of the "third way."
269
+
270
+ **Quick Project Overview**
271
+
272
+ Neo.mjs is a pioneering multi-threaded JavaScript framework that redefines web development. Leveraging an Off-Main-Thread
273
+ (OMT) architecture, it delivers unparalleled performance and scalability for complex applications, enabling desktop-class
274
+ multi-window experiences with advanced features like shared state and component persistence, and a zero-builds development
275
+ workflow. Its unified class config system provides a consistent, declarative approach to building UIs, managing data, and
276
+ orchestrating application logic, ensuring linear scalability even for the most intricate projects.
277
+
278
+ ---
279
+
280
+ We've rebuilt our core, created a new functional component model, and revolutionized our rendering engine. But you don't
281
+ have to take our word for it. We invite you to explore for yourself.
282
+
283
+ ### Choose Your Own Adventure:
284
+
285
+ * **I'm skeptical. Show me the code.**
286
+ Dive into our collection of 74 live, interactive examples. See the code, edit it in real-time, and witness the
287
+ performance for yourself. No setup required. Many more demo apps can get navigated to from here.
288
+ <br>
289
+ **[=> Explore the Examples Portal](https://neomjs.com/dist/esm/apps/portal/#/home)**
290
+
291
+ * **I'm intrigued. How does it actually work?**
292
+ This article is the first in a five-part series that goes deep into the architecture of v10. Start with our deep
293
+ dive on the new reactivity system that makes manual optimizations a thing of the past.
294
+ <br>
295
+ **[=> Next Article: Deep Dive into the Two-Tier Reactivity System](./v10-deep-dive-reactivity.md)**
296
+
297
+ * **I'm ready to build. What's the "Hello World"?**
298
+ Our `create-app` script will have you running your first multi-threaded application in under a minute. Experience
299
+ the difference firsthand.
300
+ <br>
301
+ `npx neo-app@latest`
302
+
303
+ ---
304
+
305
+ ## Conclusion: Fall in Love with Frontend Again
306
+
307
+ For too long, we have accepted the limitations of our tools. We have patched the symptoms, paid the performance tax,
308
+ and lowered our ambitions. We have forgotten the initial joy of building for the web—the thrill of creating something
309
+ new, powerful, and beautiful.
310
+
311
+ Neo.mjs v10 is an invitation to rediscover that passion. It's a framework built on the belief that you shouldn't have
312
+ to choose between performance and interactivity, between a powerful developer experience and an ambitious user experience.
313
+
314
+ It's time to stop fighting the main thread. It's time to stop paying the performance tax. It's time to start building
315
+ the applications of the future.
316
+
317
+ It's time to fall in love with frontend again.
318
+
319
+ ---
320
+
321
+ ## The Neo.mjs v10 Blog Post Series
322
+
323
+ 1. A Frontend Love Story: Why the Strategies of Today Won't Build the Apps of Tomorrow
324
+ 2. [Deep Dive: Named vs. Anonymous State - A New Era of Component Reactivity](./v10-deep-dive-reactivity.md)
325
+ 3. [Beyond Hooks: A New Breed of Functional Components for a Multi-Threaded World](./v10-deep-dive-functional-components.md)
326
+ 4. [Deep Dive: The VDOM Revolution - JSON Blueprints & Asymmetric Rendering](./v10-deep-dive-vdom-revolution.md)
327
+ 5. [Deep Dive: The State Provider Revolution](./v10-deep-dive-state-provider.md)
328
+
329
+ ---
330
+
331
+ ## A Personal Note from the Author
332
+
333
+ Neo.mjs is one of Europe's biggest Open Source Projects, using the MIT license.</br>
334
+ Meaning: The entire code base, as well as all demo apps and examples, are **free to use**.
335
+
336
+ To put the magnitude of the project in numbers:
337
+
338
+ **Number of files:**
339
+ * `/src` 303
340
+ * `/apps` 260
341
+ * `/examples` 471 (105 executable example apps)
342
+ * `/test` 48
343
+ * `/resources` 420
344
+
345
+ We are talking about **22,000+** commits inside the ecosystem, and **5000+** closed tickets.
346
+ **770** passing unit tests.
347
+
348
+ While the Blog Post Series goes deep into the heart of the v10 core changes, they are barely touching the surface
349
+ of the entire project. We are talking about a `Buffered Grid` on AG Grid level, Multi-Window IDEs directly included
350
+ inside the Neo.mjs Website, a fully functional `Calendar` app, a vast component library, and more.
351
+
352
+ While Neo.mjs made it into the Top5 of "The most exciting use of technology in 2021" of the OS Awards Program,
353
+ it is fair to say that the framework is an underdog. Maybe the most underrated framework in the history of
354
+ frontend development.
355
+
356
+ I encourage you to take a deeper dive into the code base and examples. You will find countless hidden gems, and
357
+ concepts which would have been worth patents.
358
+
359
+ Neo.mjs is an Enabler. Using it can give developers wings, and push companies literally years ahead of the competition.
360
+
361
+ My belief in Neo.mjs's transformative potential led me to dedicate myself fully to its development, stepping away from a
362
+ "Custom Software Engineering Senior Manager" role to bring this vision to life. While the open-source landscape presents
363
+ challenges, we are actively seeking partners and sponsors who share our vision and want to accelerate the future of web development.
364
+
365
+ There are several exciting enhancements on the horizon for v11+:
366
+ * A Neo.mjs middleware (SEO support, critical rendering paths, backend-connectors, Websocket connections to clients)
367
+ * A multi-window LLM UI
368
+ * A new design and theming system
369
+ * `Template Literls` support, for those who really want it
370
+ * A new version of the Docs App
371
+ * A lot more Learning Section Content
372
+
373
+ ---
374
+
375
+ Neo.mjs is at a pivotal moment, poised for its next phase of growth. Your engagement is crucial to shaping its future and
376
+ accelerating its impact. Use your chance to influence the project roadmap, let us know what you would love to see next,
377
+ e.g. via opening feature requests. Most importantly, you can help to increase the visibility, to allow the right
378
+ people to find the project. Even with something as simple as a mention on social media.
379
+
380
+ A huge **"Thank you!"**, to everyone who was involved with reviewing v10 items.
381
+
382
+ Best regards & happy coding,</br>
383
+ Tobias
@@ -0,0 +1,90 @@
1
+ # Neo.mjs vs Angular
2
+
3
+ Neo.mjs is a comprehensive JavaScript ecosystem for building high-performance, multi-threaded web applications. Unlike frameworks like Angular that require a complex, mandatory build process even for development, Neo.mjs is a self-contained system with **zero runtime dependencies**. It provides a complete, out-of-the-box solution that includes four distinct development and deployment environments, from a revolutionary zero-builds development mode to thread-optimized production bundles.
4
+
5
+ This article provides a focused comparison between the Neo.mjs ecosystem and Angular. While both are used to build modern user interfaces, they employ fundamentally different architectural and rendering strategies to achieve their goals. We will explore their approaches to **rendering, reactivity, and DOM updates**, highlighting the trade-offs between Angular's Main-Thread-bound, build-centric model and Neo.mjs's holistic, worker-based paradigm.
6
+
7
+ ## Core Similarities: Building Modern UIs
8
+
9
+ Both Neo.mjs and Angular share common ground in building modern user interfaces:
10
+
11
+ * **Component-Based Architecture (with a distinction):** Both frameworks promote building UIs as a composition of reusable components. However, Neo.mjs extends this concept with `Neo.core.Base`, allowing any class-based entity (like controllers, models, or routers) to leverage the framework's powerful class system, even if they don't directly render UI. This contrasts with frameworks where non-visual logic might often be shoehorned into component structures.
12
+ * **Declarative UI:** Developers describe *what* the UI should look like for a given state, and the framework handles *how* to update the DOM.
13
+ * **Reactive Programming:** Both leverage reactive programming principles. Angular heavily uses RxJS for reactivity and change detection. Neo.mjs uses its own fine-grained reactivity system based on `Neo.core.Config` and `Effect`, which conceptually aligns with the "signals" pattern for highly efficient, granular updates.
14
+ * **Comprehensive & Opinionated Frameworks:** Both provide a structured and opinionated way to build applications, offering extensive out-of-the-box solutions. However, their *nature* of opinionation differs, as explored in "Framework Rigidity vs. Flexible Structure."
15
+
16
+ ## Key Differences: Architectural & Rendering Strategies
17
+
18
+ This is where the two frameworks diverge significantly, each offering unique trade-offs and advantages.
19
+
20
+ ### 1. Overall Architecture: Main Thread vs. Worker-Based
21
+
22
+ * **Angular: Main Thread Focused**
23
+ * Angular applications run predominantly on the Main JavaScript Thread of the browser. All component logic, change detection, VDOM reconciliation (if used), and direct DOM manipulation occur on this single thread.
24
+ * **Implication:** While Angular is highly optimized (e.g., with Ahead-of-Time (AOT) compilation and Ivy renderer), complex computations, large state updates, or extensive component trees can still block the Main Thread, leading to UI jank and unresponsiveness. Angular's change detection mechanism, even with optimizations, can become a bottleneck in very large applications.
25
+
26
+ * **Neo.mjs: Worker-Based (Main Thread + App Worker + VDom Worker)**
27
+ * Neo.mjs's defining feature is its multi-threaded architecture. Application logic (component instances, state, business logic, `vdomEffect`s) runs in a dedicated **App Worker**, separate from the Main Thread. The VDOM diffing occurs in a **VDom Worker**.
28
+ * Communication between workers and the Main Thread happens via asynchronous message passing.
29
+ * **Benefit:** This architecture keeps the Main Thread almost entirely free and responsive, preventing UI freezes even during heavy computations or complex application logic. It inherently leverages multi-core CPUs for parallel processing, leading to superior UI responsiveness and performance under heavy load.
30
+
31
+ ### 2. Rendering Mechanism & Change Detection
32
+
33
+ * **Angular: Template-Based & Zone.js/Ivy Change Detection**
34
+ * Angular uses templates (HTML with Angular-specific syntax) to define UI. These templates are compiled into renderable instructions.
35
+ * **Change Detection:** Angular traditionally relies on Zone.js to monkey-patch asynchronous browser APIs, detecting when data changes and triggering a change detection cycle. The Ivy renderer further optimizes this by compiling templates into more efficient instructions.
36
+ * **VDOM:** Angular does not use a traditional Virtual DOM in the same way React does. Its Ivy renderer directly updates the DOM based on detected changes.
37
+ * **Performance Consideration (Two-Way Binding & Direct DOM Access):** Angular's two-way data binding, while convenient, inherently ties the application's data model directly to the DOM. This often leads to frequent DOM read/write operations. Since **DOM read/write access is significantly slower (often 20x or more) compared to pure JavaScript logic**, this can cause performance bottlenecks and UI jank in complex applications with many bindings, as each change detection cycle can trigger a cascade of expensive DOM manipulations on the Main Thread.
38
+ * **DOM Pollution:** Angular often adds numerous internal `data-set` attributes to the real DOM for its own tracking and debugging purposes. While functional, this can lead to a less clean and more verbose DOM structure.
39
+ * **Immutability Considerations:** While Angular doesn't enforce immutability, performance optimizations like `OnPush` change detection often benefit significantly from immutable data patterns. This can introduce a cognitive burden for developers to manage data immutably for optimal performance.
40
+
41
+ * **Neo.mjs: Off-Thread, Scoped VDOM & Atomic Insertion**
42
+ * Neo.mjs uses a Virtual DOM defined by plain JavaScript objects. The diffing process happens in a VDom Worker, keeping the Main Thread free.
43
+ * **Scoped VDOM (Encapsulation & Performance):** Neo.mjs's VDOM is **scoped by default**. When a parent component renders, its children are represented by simple `{componentId: '...'}` placeholders. This provides two key advantages: 1) **Performance:** A parent's update never processes the complex VDOM of its children, keeping update payloads extremely small. 2) **Encapsulation:** It is architecturally impossible for a parent to accidentally manipulate a child's internal VDOM structure, enforcing clear ownership.
44
+ * **Atomic Insertion:** For insertions, the Main Thread receives a VNode structure and uses `DomApiRenderer` to **build the entire new DOM subtree in memory**, completely detached from the live document. This fully constructed fragment is then inserted into the live DOM in a **single, atomic operation**.
45
+ * **Fine-Grained Reactivity vs. Zone.js:** Instead of Angular's Zone.js, which broadly detects changes, Neo.mjs uses a precise, `Effect`-based system. When a piece of state (`config`) changes, only the `createVdom` functions that *directly depend* on that state are re-executed, ensuring optimal performance by default.
46
+
47
+ ### 3. Component Model & State Management
48
+
49
+ * **Angular: Modules, Components, Services, Dependency Injection**
50
+ * Angular applications are structured around NgModules, components (with templates and decorators), and services. Dependency Injection (DI) is a core concept for managing dependencies and state.
51
+ * **State Management:** Often relies on services for shared state, or third-party libraries like NgRx (RxJS-based state management).
52
+
53
+ * **Neo.mjs: Class-Based & Functional Components, State Providers**
54
+ * Neo.mjs offers a dual component model. Developers can use a robust class-based system (`Neo.component.Base`) for complex, stateful components, or leverage modern, lightweight functional components via the `defineComponent()` API.
55
+ * This functional approach uses hooks like `useConfig()` for state, providing a clean, declarative way to build UI while benefiting from Neo.mjs's underlying fine-grained reactivity.
56
+ * **State Management:** Features integrated state providers and a unified config system for managing and sharing bindable data across the component tree, often simplifying cross-component communication compared to traditional DI or prop passing.
57
+
58
+ ### 4. Build Process & Development Workflow
59
+
60
+ * **Angular: Comprehensive CLI & Mandatory Build Process**
61
+ * Angular relies heavily on its CLI for scaffolding, development, and building. It has a mandatory and often complex build process (Webpack, TypeScript compilation, Ahead-of-Time (AOT) compilation) even for development.
62
+ * **Implication:** This leads to slower development server startup times, requires source maps for debugging transpiled and bundled code, and can introduce debugging challenges due to the abstraction layer between the source code and what runs in the browser. For Angular, a build step is an inherent part of the development workflow.
63
+
64
+ * **Neo.mjs: The Revolutionary Zero Builds Development Mode**
65
+ * Neo.mjs champions a **"zero builds" instant development mode** as its primary workflow. This means developers create and debug their applications entirely within this instant environment, leveraging native ES Modules, ES6 classes, and dynamic imports directly in the browser.
66
+ * **Benefit:** This offers unparalleled speed and debugging clarity. Code changes are reflected instantly without any compilation step. Developers work directly with the real code in the browser's dev tools, eliminating the need for source maps and vastly simplifying debugging. This is a fundamental departure from the build-centric development paradigm of Angular and most other modern frameworks.
67
+ * **Deployment Flexibility:** While development is zero-builds, Neo.mjs provides optimized build environments for deployment:
68
+ * **`dist/esm`:** Deploys as native ES Modules, preserving the dev mode's file structure for efficient modular loading in modern browsers.
69
+ * **`dist/production`:** Generates highly optimized, thread-specific bundles using Webpack for maximum compatibility and minification.
70
+ * **Dynamic Module Loading:** Neo.mjs uniquely supports dynamically loading code-based modules (even with arbitrary `import` statements) from different environments at runtime, a powerful feature for plugin architectures or user-generated code that most other frameworks struggle with due to their static build graphs.
71
+
72
+ ### Other Considerations:
73
+
74
+ * **Framework Rigidity vs. Flexible Structure:** Angular is often perceived as a "straightjacket" due to its highly opinionated and prescriptive nature, dictating specific patterns (e.g., NgModules, decorators, strict DI) that can limit flexibility and make it challenging to deviate from "the Angular way." Neo.mjs, while also a comprehensive framework, offers a different kind of opinionation. Its core architectural choices (worker-based, unified config system, `Neo.core.Base` for any class-based entity) provide a robust structure, but within that structure, it offers significant flexibility (e.g., plain JS for VDOM, choice of functional or class components, integrated features reducing external dependencies), allowing developers more freedom without sacrificing consistency.
75
+
76
+ * **TypeScript:** Angular is built with TypeScript and strongly encourages its use. Neo.mjs is written in plain JavaScript but supports TypeScript usage.
77
+ * **Learning Curve:** Angular has a reputation for a steeper learning curve due to its opinionated structure, extensive concepts (modules, decorators, DI, RxJS), and reliance on its CLI. Neo.mjs also has an initial learning curve (especially its worker architecture), but its core concepts are often simpler once understood.
78
+ * **Ecosystem & Maturity:** Angular has a large, mature ecosystem backed by Google. Neo.mjs has a smaller but dedicated community, with a focus on framework-level solutions and integrated features.
79
+ * **Dependency Management (Batteries Included):** Angular projects often involve a large `node_modules` directory and can lead to complex dependency trees and version conflicts. Neo.mjs, in contrast, is a "batteries included" framework. It literally has zero real runtime dependencies outside of its own core. This native ES Module approach and integrated framework, significantly reduces this complexity, offering a much leaner and more controlled dependency management experience.
80
+
81
+ ## Conclusion: Why Neo.mjs Offers Significant Technical Advantages Over Angular
82
+
83
+ While Angular is a powerful and widely adopted framework, Neo.mjs offers fundamental architectural advantages that can lead to superior technical performance and responsiveness, particularly in demanding applications:
84
+
85
+ * **Unblocked Main Thread & Inherent Performance:** Neo.mjs's unique worker-based architecture fundamentally shifts application logic off the Main Thread. This ensures the UI remains fluid and responsive, even during heavy computations, leading to inherently higher performance ceilings without the need for extensive manual optimizations.
86
+ * **Optimized & Precise DOM Updates:** Through off-Main-Thread VDOM diffing, sophisticated batching, and surgical direct DOM API updates, Neo.mjs achieves highly efficient and smooth visual updates, precisely targeting changes and avoiding unnecessary re-renders, often more granularly than Angular's zone-based change detection.
87
+ * **Linear Effort for Complexity:** Unlike frameworks where effort can grow exponentially with application complexity, Neo.mjs's unified config system, predictable component lifecycle, and modular design enable a more linear relationship between complexity and development effort, leading to faster development cycles and lower maintenance costs in the long run.
88
+ * **Streamlined Development Workflow:** The "zero builds" development mode and native ES Module approach offer a significantly faster and more transparent development experience compared to Angular's mandatory build process.
89
+
90
+ The choice between them depends on the specific application's needs. For applications where guaranteed Main Thread responsiveness, high performance under load, leveraging multi-core processing, and a streamlined development workflow are paramount, Neo.mjs presents a compelling and technically superior alternative.