amateras 0.7.3 → 0.10.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 (257) hide show
  1. package/README.md +76 -85
  2. package/package.json +27 -21
  3. package/tsconfig.json +4 -3
  4. package/packages/core/package.json +0 -32
  5. package/packages/core/src/env.browser.ts +0 -21
  6. package/packages/core/src/env.node.ts +0 -21
  7. package/packages/core/src/global.ts +0 -18
  8. package/packages/core/src/index.ts +0 -96
  9. package/packages/core/src/lib/assignNodeProperties.ts +0 -11
  10. package/packages/core/src/lib/assignProperties.ts +0 -57
  11. package/packages/core/src/lib/chain.ts +0 -17
  12. package/packages/core/src/lib/dom.ts +0 -20
  13. package/packages/core/src/main.ts +0 -4
  14. package/packages/core/src/node/$Element.ts +0 -366
  15. package/packages/core/src/node/$EventTarget.ts +0 -48
  16. package/packages/core/src/node/$HTMLElement.ts +0 -99
  17. package/packages/core/src/node/$Node.ts +0 -201
  18. package/packages/core/src/node/$Virtual.ts +0 -65
  19. package/packages/css/README.md +0 -128
  20. package/packages/css/package.json +0 -17
  21. package/packages/css/src/ext/colors/amber.ts +0 -25
  22. package/packages/css/src/ext/colors/blackwhite.ts +0 -13
  23. package/packages/css/src/ext/colors/blue.ts +0 -25
  24. package/packages/css/src/ext/colors/cyan.ts +0 -25
  25. package/packages/css/src/ext/colors/emerald.ts +0 -25
  26. package/packages/css/src/ext/colors/fuchsia.ts +0 -25
  27. package/packages/css/src/ext/colors/gray.ts +0 -25
  28. package/packages/css/src/ext/colors/green.ts +0 -25
  29. package/packages/css/src/ext/colors/indigo.ts +0 -25
  30. package/packages/css/src/ext/colors/lime.ts +0 -25
  31. package/packages/css/src/ext/colors/neutral.ts +0 -25
  32. package/packages/css/src/ext/colors/orange.ts +0 -25
  33. package/packages/css/src/ext/colors/pink.ts +0 -25
  34. package/packages/css/src/ext/colors/purple.ts +0 -25
  35. package/packages/css/src/ext/colors/red.ts +0 -25
  36. package/packages/css/src/ext/colors/rose.ts +0 -25
  37. package/packages/css/src/ext/colors/sky.ts +0 -25
  38. package/packages/css/src/ext/colors/slate.ts +0 -25
  39. package/packages/css/src/ext/colors/stone.ts +0 -25
  40. package/packages/css/src/ext/colors/teal.ts +0 -25
  41. package/packages/css/src/ext/colors/violet.ts +0 -25
  42. package/packages/css/src/ext/colors/yellow.ts +0 -25
  43. package/packages/css/src/ext/colors/zinc.ts +0 -25
  44. package/packages/css/src/ext/colors.ts +0 -23
  45. package/packages/css/src/ext/container.ts +0 -32
  46. package/packages/css/src/ext/keyframes.ts +0 -54
  47. package/packages/css/src/ext/media.ts +0 -32
  48. package/packages/css/src/ext/property.ts +0 -48
  49. package/packages/css/src/ext/variable.ts +0 -51
  50. package/packages/css/src/index.ts +0 -436
  51. package/packages/css/src/lib/colorAssign.ts +0 -6
  52. package/packages/css/src/lib/utils.ts +0 -11
  53. package/packages/css/src/structure/$CSSContainerRule.ts +0 -13
  54. package/packages/css/src/structure/$CSSDeclaration.ts +0 -16
  55. package/packages/css/src/structure/$CSSKeyframesRule.ts +0 -13
  56. package/packages/css/src/structure/$CSSMediaRule.ts +0 -10
  57. package/packages/css/src/structure/$CSSProperty.ts +0 -19
  58. package/packages/css/src/structure/$CSSRule.ts +0 -13
  59. package/packages/css/src/structure/$CSSStyleRule.ts +0 -14
  60. package/packages/css/src/structure/$CSSVariable.ts +0 -30
  61. package/packages/dom/package.json +0 -20
  62. package/packages/dom/src/lib/HTMLElementMap.ts +0 -213
  63. package/packages/dom/src/lib/assignAttributes.ts +0 -16
  64. package/packages/dom/src/structure/CSS.ts +0 -7
  65. package/packages/dom/src/structure/CSSStyleSheet.ts +0 -10
  66. package/packages/dom/src/structure/DOMTokenList.ts +0 -19
  67. package/packages/dom/src/structure/Document.ts +0 -36
  68. package/packages/dom/src/structure/Element.ts +0 -106
  69. package/packages/dom/src/structure/HTMLElement.ts +0 -34
  70. package/packages/dom/src/structure/History.ts +0 -11
  71. package/packages/dom/src/structure/Location.ts +0 -9
  72. package/packages/dom/src/structure/Node.ts +0 -51
  73. package/packages/dom/src/structure/NodeList.ts +0 -10
  74. package/packages/dom/src/structure/Storage.ts +0 -8
  75. package/packages/dom/src/structure/Text.ts +0 -20
  76. package/packages/dom/src/structure/Window.ts +0 -14
  77. package/packages/dom/src/structure/html/HTMLAbbrElement.ts +0 -16
  78. package/packages/dom/src/structure/html/HTMLAddressElement.ts +0 -16
  79. package/packages/dom/src/structure/html/HTMLAnchorElement.ts +0 -25
  80. package/packages/dom/src/structure/html/HTMLAreaElement.ts +0 -26
  81. package/packages/dom/src/structure/html/HTMLArticleElement.ts +0 -16
  82. package/packages/dom/src/structure/html/HTMLAsideElement.ts +0 -16
  83. package/packages/dom/src/structure/html/HTMLAudioElement.ts +0 -16
  84. package/packages/dom/src/structure/html/HTMLBDIElement.ts +0 -16
  85. package/packages/dom/src/structure/html/HTMLBDOElement.ts +0 -16
  86. package/packages/dom/src/structure/html/HTMLBElement.ts +0 -16
  87. package/packages/dom/src/structure/html/HTMLBRElement.ts +0 -17
  88. package/packages/dom/src/structure/html/HTMLBaseElement.ts +0 -18
  89. package/packages/dom/src/structure/html/HTMLBodyElement.ts +0 -22
  90. package/packages/dom/src/structure/html/HTMLButtonElement.ts +0 -26
  91. package/packages/dom/src/structure/html/HTMLCanvasElement.ts +0 -18
  92. package/packages/dom/src/structure/html/HTMLCiteElement.ts +0 -16
  93. package/packages/dom/src/structure/html/HTMLCodeElement.ts +0 -16
  94. package/packages/dom/src/structure/html/HTMLDDElement.ts +0 -16
  95. package/packages/dom/src/structure/html/HTMLDFNElement.ts +0 -16
  96. package/packages/dom/src/structure/html/HTMLDListElement.ts +0 -17
  97. package/packages/dom/src/structure/html/HTMLDTElement.ts +0 -16
  98. package/packages/dom/src/structure/html/HTMLDataElement.ts +0 -17
  99. package/packages/dom/src/structure/html/HTMLDataListElement.ts +0 -16
  100. package/packages/dom/src/structure/html/HTMLDetailsElement.ts +0 -17
  101. package/packages/dom/src/structure/html/HTMLDialogElement.ts +0 -18
  102. package/packages/dom/src/structure/html/HTMLDivElement.ts +0 -17
  103. package/packages/dom/src/structure/html/HTMLEMElement.ts +0 -16
  104. package/packages/dom/src/structure/html/HTMLEmbedElement.ts +0 -20
  105. package/packages/dom/src/structure/html/HTMLFieldSetElement.ts +0 -19
  106. package/packages/dom/src/structure/html/HTMLFigCaptionElement.ts +0 -16
  107. package/packages/dom/src/structure/html/HTMLFigureElement.ts +0 -16
  108. package/packages/dom/src/structure/html/HTMLFooterElement.ts +0 -16
  109. package/packages/dom/src/structure/html/HTMLFormElement.ts +0 -24
  110. package/packages/dom/src/structure/html/HTMLHGroupElement.ts +0 -16
  111. package/packages/dom/src/structure/html/HTMLHRElement.ts +0 -21
  112. package/packages/dom/src/structure/html/HTMLHeadElement.ts +0 -16
  113. package/packages/dom/src/structure/html/HTMLHeaderElement.ts +0 -16
  114. package/packages/dom/src/structure/html/HTMLHeadingElement.ts +0 -17
  115. package/packages/dom/src/structure/html/HTMLHtmlElement.ts +0 -18
  116. package/packages/dom/src/structure/html/HTMLIElement.ts +0 -16
  117. package/packages/dom/src/structure/html/HTMLIFrameElement.ts +0 -31
  118. package/packages/dom/src/structure/html/HTMLImageElement.ts +0 -38
  119. package/packages/dom/src/structure/html/HTMLInputElement.ts +0 -55
  120. package/packages/dom/src/structure/html/HTMLKBDElement.ts +0 -16
  121. package/packages/dom/src/structure/html/HTMLLIElement.ts +0 -18
  122. package/packages/dom/src/structure/html/HTMLLabelElement.ts +0 -18
  123. package/packages/dom/src/structure/html/HTMLLegendElement.ts +0 -17
  124. package/packages/dom/src/structure/html/HTMLLinkElement.ts +0 -31
  125. package/packages/dom/src/structure/html/HTMLMainElement.ts +0 -16
  126. package/packages/dom/src/structure/html/HTMLMapElement.ts +0 -17
  127. package/packages/dom/src/structure/html/HTMLMarkElement.ts +0 -16
  128. package/packages/dom/src/structure/html/HTMLMediaElement.ts +0 -48
  129. package/packages/dom/src/structure/html/HTMLMenuElement.ts +0 -18
  130. package/packages/dom/src/structure/html/HTMLMetaElement.ts +0 -22
  131. package/packages/dom/src/structure/html/HTMLMeterElement.ts +0 -23
  132. package/packages/dom/src/structure/html/HTMLModElement.ts +0 -18
  133. package/packages/dom/src/structure/html/HTMLNavElement.ts +0 -16
  134. package/packages/dom/src/structure/html/HTMLNoscriptElement.ts +0 -16
  135. package/packages/dom/src/structure/html/HTMLOListElement.ts +0 -20
  136. package/packages/dom/src/structure/html/HTMLObjectElement.ts +0 -34
  137. package/packages/dom/src/structure/html/HTMLOptGroupElement.ts +0 -18
  138. package/packages/dom/src/structure/html/HTMLOptionElement.ts +0 -20
  139. package/packages/dom/src/structure/html/HTMLOutputElement.ts +0 -20
  140. package/packages/dom/src/structure/html/HTMLParagraphElement.ts +0 -17
  141. package/packages/dom/src/structure/html/HTMLPictureElement.ts +0 -16
  142. package/packages/dom/src/structure/html/HTMLPreElement.ts +0 -17
  143. package/packages/dom/src/structure/html/HTMLProgressElement.ts +0 -19
  144. package/packages/dom/src/structure/html/HTMLQuoteElement.ts +0 -17
  145. package/packages/dom/src/structure/html/HTMLRPElement.ts +0 -16
  146. package/packages/dom/src/structure/html/HTMLRTElement.ts +0 -16
  147. package/packages/dom/src/structure/html/HTMLRubyElement.ts +0 -16
  148. package/packages/dom/src/structure/html/HTMLSElement.ts +0 -16
  149. package/packages/dom/src/structure/html/HTMLSampElement.ts +0 -16
  150. package/packages/dom/src/structure/html/HTMLScriptElement.ts +0 -27
  151. package/packages/dom/src/structure/html/HTMLSectionElement.ts +0 -16
  152. package/packages/dom/src/structure/html/HTMLSelectElement.ts +0 -27
  153. package/packages/dom/src/structure/html/HTMLSlotElement.ts +0 -17
  154. package/packages/dom/src/structure/html/HTMLSmallElement.ts +0 -16
  155. package/packages/dom/src/structure/html/HTMLSourceElement.ts +0 -21
  156. package/packages/dom/src/structure/html/HTMLSpanElement.ts +0 -16
  157. package/packages/dom/src/structure/html/HTMLStrongElement.ts +0 -16
  158. package/packages/dom/src/structure/html/HTMLStyleElement.ts +0 -18
  159. package/packages/dom/src/structure/html/HTMLSubElement.ts +0 -16
  160. package/packages/dom/src/structure/html/HTMLSummaryElement.ts +0 -16
  161. package/packages/dom/src/structure/html/HTMLSupElement.ts +0 -16
  162. package/packages/dom/src/structure/html/HTMLTableCaptionElement.ts +0 -17
  163. package/packages/dom/src/structure/html/HTMLTableCellElement.ts +0 -31
  164. package/packages/dom/src/structure/html/HTMLTableColElement.ts +0 -23
  165. package/packages/dom/src/structure/html/HTMLTableElement.ts +0 -26
  166. package/packages/dom/src/structure/html/HTMLTableRowElement.ts +0 -23
  167. package/packages/dom/src/structure/html/HTMLTableSectionElement.ts +0 -20
  168. package/packages/dom/src/structure/html/HTMLTemplateElement.ts +0 -17
  169. package/packages/dom/src/structure/html/HTMLTextAreaElement.ts +0 -33
  170. package/packages/dom/src/structure/html/HTMLTimeElement.ts +0 -17
  171. package/packages/dom/src/structure/html/HTMLTitleElement.ts +0 -17
  172. package/packages/dom/src/structure/html/HTMLTrackElement.ts +0 -21
  173. package/packages/dom/src/structure/html/HTMLUElement.ts +0 -16
  174. package/packages/dom/src/structure/html/HTMLUListElement.ts +0 -18
  175. package/packages/dom/src/structure/html/HTMLVarElement.ts +0 -16
  176. package/packages/dom/src/structure/html/HTMLVideoElement.ts +0 -22
  177. package/packages/dom/src/structure/html/HTMLWBRElement.ts +0 -16
  178. package/packages/html/package.json +0 -18
  179. package/packages/html/src/index.ts +0 -13
  180. package/packages/html/src/node/$Anchor.ts +0 -49
  181. package/packages/html/src/node/$Canvas.ts +0 -38
  182. package/packages/html/src/node/$Dialog.ts +0 -16
  183. package/packages/html/src/node/$Form.ts +0 -16
  184. package/packages/html/src/node/$Image.ts +0 -72
  185. package/packages/html/src/node/$Input.ts +0 -193
  186. package/packages/html/src/node/$Label.ts +0 -25
  187. package/packages/html/src/node/$Media.ts +0 -16
  188. package/packages/html/src/node/$OptGroup.ts +0 -23
  189. package/packages/html/src/node/$Option.ts +0 -40
  190. package/packages/html/src/node/$Select.ts +0 -76
  191. package/packages/html/src/node/$TextArea.ts +0 -16
  192. package/packages/i18n/README.md +0 -73
  193. package/packages/i18n/package.json +0 -19
  194. package/packages/i18n/src/index.ts +0 -140
  195. package/packages/i18n/src/structure/I18n.ts +0 -44
  196. package/packages/i18n/src/structure/I18nDictionary.ts +0 -31
  197. package/packages/i18n/src/structure/I18nTranslation.ts +0 -41
  198. package/packages/idb/README.md +0 -127
  199. package/packages/idb/package.json +0 -19
  200. package/packages/idb/src/core.ts +0 -6
  201. package/packages/idb/src/index.ts +0 -17
  202. package/packages/idb/src/lib/$IDBRequest.ts +0 -8
  203. package/packages/idb/src/structure/$IDB.ts +0 -63
  204. package/packages/idb/src/structure/$IDBCursor.ts +0 -34
  205. package/packages/idb/src/structure/$IDBIndex.ts +0 -48
  206. package/packages/idb/src/structure/$IDBStore.ts +0 -103
  207. package/packages/idb/src/structure/$IDBStoreBase.ts +0 -30
  208. package/packages/idb/src/structure/$IDBTransaction.ts +0 -38
  209. package/packages/idb/src/structure/builder/$IDBBuilder.ts +0 -229
  210. package/packages/idb/src/structure/builder/$IDBStoreBuilder.ts +0 -100
  211. package/packages/markdown/README.md +0 -53
  212. package/packages/markdown/package.json +0 -19
  213. package/packages/markdown/src/index.ts +0 -3
  214. package/packages/markdown/src/lib/type.ts +0 -26
  215. package/packages/markdown/src/lib/util.ts +0 -21
  216. package/packages/markdown/src/structure/Markdown.ts +0 -54
  217. package/packages/markdown/src/structure/MarkdownLexer.ts +0 -111
  218. package/packages/markdown/src/structure/MarkdownParser.ts +0 -34
  219. package/packages/markdown/src/syntax/alert.ts +0 -46
  220. package/packages/markdown/src/syntax/blockquote.ts +0 -35
  221. package/packages/markdown/src/syntax/bold.ts +0 -11
  222. package/packages/markdown/src/syntax/code.ts +0 -11
  223. package/packages/markdown/src/syntax/codeblock.ts +0 -44
  224. package/packages/markdown/src/syntax/heading.ts +0 -14
  225. package/packages/markdown/src/syntax/horizontalRule.ts +0 -11
  226. package/packages/markdown/src/syntax/image.ts +0 -23
  227. package/packages/markdown/src/syntax/italic.ts +0 -11
  228. package/packages/markdown/src/syntax/link.ts +0 -46
  229. package/packages/markdown/src/syntax/list.ts +0 -121
  230. package/packages/markdown/src/syntax/table.ts +0 -67
  231. package/packages/markdown/src/syntax/text.ts +0 -19
  232. package/packages/router/README.md +0 -175
  233. package/packages/router/package.json +0 -19
  234. package/packages/router/src/index.ts +0 -68
  235. package/packages/router/src/node/Page.ts +0 -38
  236. package/packages/router/src/node/Router.ts +0 -212
  237. package/packages/router/src/node/RouterAnchor.ts +0 -24
  238. package/packages/router/src/structure/PageBuilder.ts +0 -24
  239. package/packages/router/src/structure/Route.ts +0 -105
  240. package/packages/signal/README.md +0 -93
  241. package/packages/signal/package.json +0 -18
  242. package/packages/signal/src/index.ts +0 -221
  243. package/packages/signal/src/structure/Signal.ts +0 -38
  244. package/packages/ui/lib/VirtualScroll.ts +0 -25
  245. package/packages/ui/node/Accordian.ts +0 -97
  246. package/packages/ui/node/Carousel.ts +0 -20
  247. package/packages/ui/node/Form.ts +0 -54
  248. package/packages/ui/node/Grid.ts +0 -0
  249. package/packages/ui/node/Modal.ts +0 -45
  250. package/packages/ui/node/Table.ts +0 -43
  251. package/packages/ui/node/Tabs.ts +0 -129
  252. package/packages/ui/node/Toast.ts +0 -16
  253. package/packages/ui/node/Waterfall.ts +0 -94
  254. package/packages/ui/package.json +0 -21
  255. package/packages/utils/package.json +0 -17
  256. package/packages/utils/src/global.ts +0 -25
  257. package/packages/utils/src/index.ts +0 -90
package/README.md CHANGED
@@ -1,108 +1,99 @@
1
1
  # Amateras
2
- Amateras is a DOM Utility library.
3
-
4
- ## Build DOM Tree in JS
5
- ```ts
6
- import 'amateras';
7
-
8
- $(document.body).content([
9
- $('h1').class('title').content('Hello, World')
10
- ])
2
+ Amateras 是一个构建用户界面的 JavaScript 库,目标是无需编译器也能直接编写和运行,让开发者只需用 JavaScript 或 TypeScript 的语法就能高效地构建用户界面。支持响应式数据、模板函数和组件化。
3
+
4
+ [English](/docs/README_en.md)
5
+
6
+ ## 优势
7
+ - **极简开发**:无需 JSX,无需编译器。
8
+ - **原生性能**:没有 Diff 开销,没有 VDOM,细粒度响应式框架。
9
+ - **类型安全**:强类型安全的编写环境(通过 TypeScript 编译)。
10
+ - **两端运行**:能够在客户端和服务端运行。
11
+ - **轻量体积**:极小的包体积,所有功能模块化,按需导入模块库。
12
+
13
+ ## 功能
14
+ - 组件化模块(Widget)
15
+ - 支持控制流(If、Match、For)
16
+ - 页面路由器(Router)
17
+ - 响应式数据(Signal)
18
+ - 热模块更新(HMR)
19
+ - 多语言切换(I18n)
20
+ - 样式表直写(CSS-in-JS)
21
+ - 服务端渲染(SSR)
22
+
23
+ ## 安装库
24
+ ```
25
+ bun add amateras
11
26
  ```
12
27
 
13
- ## Style in JS
28
+ ## 使用方式
14
29
  ```ts
15
30
  import 'amateras';
16
- import 'amateras/css';
17
31
 
18
- const paragraphStyle = $.css({
19
- border: '2px solid black',
20
- padding: '0.4rem',
21
- textAlign: 'center'
32
+ const App = $('app', () => {
33
+ $('h1', {class: 'title'}, () => $`Hello World!`)
22
34
  })
23
35
 
24
- $('p').css(paragraphStyle).content([
25
- 'Amateras is a ',
26
- $('span')
27
- .css({ color: 'blue', fontWeight: 700 })
28
- .content('DOM Utility Library.')
29
- ])
36
+ $.render(App, () => document.body);
30
37
  ```
31
38
 
32
- ## State Management
39
+ ## 计数组件范例
33
40
  ```ts
34
41
  import 'amateras';
35
42
  import 'amateras/signal';
43
+ import 'amateras/widget';
36
44
 
37
- // define a signal with value 0
38
- const count$ = $.signal(0);
45
+ const Counter = $.widget(() => ({
46
+ layout() {
47
+ const count$ = $.signal(0);
48
+ const double$ = $.compute(() => count$() * 2);
39
49
 
40
- // this variable will be auto recalculate when count$ changes
41
- const doubleCount$ = $.compute(() => count$() * 2);
50
+ console.log('This template only run once.');
42
51
 
43
- // the console message will fired when count$ changes
44
- $.effect(() => console.log( count$() ))
52
+ $('button', $$ => { $(double$)
53
+ $$.on('click', () => count$.set(val => val + 1));
54
+ })
55
+ }
56
+ }))
45
57
 
46
- $(document.body).content([
47
- // Display Counts
48
- $('p').content( $`Counts: ${count$}` ),
58
+ $.render($(Counter), () => document.body);
59
+ ```
49
60
 
50
- // Display Double Counts
51
- $('p').content( $`Double Counts: ${doubleCount$}` ),
61
+ ## 为什么是 Amateras?
62
+ 我喜欢纯粹的开发环境,而对我来说目前主流的前端框架都过于复杂。它们依赖复杂的工具链,使用类似 JSX 这种非原生的文件格式,编写的是脱离 JavaScript 语法的代码。这并没有什么不好,但我更喜欢纯粹的 JavaScript,所有的逻辑都能从代码表面推导出来。为此,我一次又一次地研发这样的库,而经历多次重构的结果就是 Amateras。
52
63
 
53
- // Create a button that make counts plus 1 on click
54
- $('button').content('Add Count').on('click', () => count$.set(value => value + 1))
55
- ])
56
- ```
64
+ ### 不是 JSX
65
+ Amateras 能让你编写接近 HTML 排版的模板代码,实现了在原生 JavaScript 语法下也能写出高可读性的 UI 代码。配合 TypeScript 的类型检查,能大幅减少新手编写时的疑惑。
57
66
 
58
- ## HTMLElement Native Methods Import
59
- ```ts
60
- import 'amateras';
61
- import 'amateras/html';
62
-
63
- // without html package
64
- $('a').attr({ href: '/user' });
65
- $('img').attr({ src: '/profile.jpg' });
66
- // with html package
67
- $('a').href('/user');
68
- $('img').src('/profile.jpg');
69
- ```
67
+ ### 高性能
68
+ 我们都不知道用户究竟用的是什么样的设备使用我们的应用,因此一个足够高性能的构建工具必不可少。Amateras 只会将模板构建一次,任何的更新都只会改动必要的元素。
70
69
 
71
- ## Custom Components
72
- ```ts
73
- import 'amateras';
74
- import 'amateras/html';
75
-
76
- function NameCard(name: string, avatarURL: string) {
77
- return $('div')
78
- .css({
79
- borderRadius: '1rem',
80
- background: '#1e1e1e',
81
- display: 'flex',
82
- overflow: 'hidden'
83
- })
84
- .content([
85
- $('img').src(avatarURL),
86
- $('div').css({ padding: '1rem' }).content([
87
- $('h2').css({ color: '#e1e1e1' }).content(name)
88
- ])
89
- ])
90
- }
91
-
92
- $(document.body).content([
93
- $(NameCard, 'The dancing man', 'https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif')
94
- ])
95
- ```
70
+ ### 模块化与拓展性
71
+ 这是一个贯彻模块化风格的 JavaScript 库,除了核心功能(amateras/core)之外的所有功能几乎都能分割成不同的模块库。例如 `If` 和 `Signal` 都能够按项目需求来导入,就连组件功能 `Widget` 也被模块化。模块化风格让 Amateras 拥有极强的拓展性,只要理解 Amateras 的运作原理就能写出一个配合 Amateras 类型系统的自定义模块。
72
+
73
+ ### 小体积
74
+ 得益于模块化风格,开发者能按照自己的需求导入模块,这使得项目依赖工具可以进一步缩小代码体积。
96
75
 
97
- ## Packages
98
- The packages size result using Vite 7.0 with default bundle settings, polyfills code included.
99
- | Package name | Size | Size(gzip) | Description |
76
+ | 模块库 | 体积 | Gzip | 简介 |
100
77
  | --- | --- | --- | --- |
101
- | amateras | 4.79 kB | 2.20 kB | Core |
102
- | amateras/html | 0.98 kB | 0.26 kB | Import HTMLElement types and methods |
103
- | [amateras/signal](./ext/signal/README.md) | 1.26 kB | 0.49 kB | Reactive data |
104
- | [amateras/css](./ext/css/README.md) | 3.70 kB | 1.44 kB | Style in JS |
105
- | [amateras/router](./ext/router/README.md) | 3.70 kB | 1.64 kB | Amateras Router |
106
- | [amateras/i18n](./ext/i18n/README.md) | 3.02 kB | 1.13 kB | I18n translations |
107
- | [amateras/idb](./ext/idb/README.md) | 5.39 kB | 2.06 kB | IndexedDB Builder and API Wrapper |
108
- | [amateras/markdown](./ext/markdown/README.md) | 6.81 kB | 2.68 kB | Markdown Converter |
78
+ | amateras/core | 5.06 kB | 2.16 kB | 核心模块 |
79
+ | amateras/widget | 0.36 kB | 0.17 kB | 组件模块 |
80
+ | amateras/signal | 1.41 kB | 0.56 kB | 响应式数据模块 |
81
+ | amateras/css | 1.40 kB | 0.67 kB | 样式模块 |
82
+ | amateras/for | 1.03 kB | 0.34 kB | 控制流 For 模块 |
83
+ | amateras/if | 1.75 kB | 0.62 kB | 控制流 If 模块 |
84
+ | amateras/match | 1.29 kB | 0.40 kB | 控制流 Match 模块 |
85
+ | amateras/router | 5.76 kB | 2.16 kB | 页面路由器模块 |
86
+ | amateras/i18n | 1.88 kB | 0.71 kB | 多语言界面模块 |
87
+ | amateras/idb | 5.27 kB | 2.01 kB | IndexedDB 模块 |
88
+ | amateras/markdown | 7.47 kB | 2.93 kB | Markdown 转换 HTML 模块 |
89
+ | amateras/prefetch | 0.56 kB | 0.26 kB | SSR 数据预取 |
90
+ | amateras/meta | 0.07 kB | 0.04 kB | SSR 页面 `meta` 标签管理 |
91
+ | amateras/ui | 1.88 kB | 0.76 kB | UI 组件模块 |
92
+
93
+ ## 文档
94
+ 1. [基础入门](/docs/Basic.md)
95
+ 2. [理解原型树](/docs/ProtoTree.md)
96
+ 3. [组件](/docs/Widget.md)
97
+ 4. [组件数据仓库](/docs/WidgetStore.md)
98
+ 5. [控制流](/docs/ControlFlow.md)
99
+ 6. [路由器](/docs/Router.md)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "amateras",
3
- "version": "0.7.3",
4
- "description": "Amateras is a DOM Utility library.",
3
+ "version": "0.10.0",
4
+ "description": "Amateras is a JavaScript library for building user interface.",
5
5
  "module": "index.ts",
6
6
  "type": "module",
7
7
  "author": {
@@ -15,34 +15,40 @@
15
15
  "homepage": "https://github.com/defaultkavy/amateras",
16
16
  "license": "MIT",
17
17
  "exports": {
18
- ".": "./index.ts",
18
+ ".": {
19
+ "default": "./index.ts",
20
+ "unpkg": "./unpkg/amateras.js"
21
+ },
19
22
  "./env": {
20
23
  "browser": "./packages/core/src/env.browser.ts",
21
24
  "node": "./packages/core/src/env.node.ts",
22
25
  "default": "./packages/core/src/env.browser.ts"
23
26
  },
24
- "./node/*": "./packages/core/src/node/*.ts",
25
- "./lib/*": "./packages/core/src/lib/*.ts",
26
- "./structure/*": "./src/structure/*.ts",
27
+ "./utils": {
28
+ "browser": "./packages/utils/src/index.browser.ts",
29
+ "bun": "./packages/utils/src/index.bun.ts",
30
+ "default": "./packages/utils/src/index.browser.ts"
31
+ },
27
32
  "./core": "./packages/core/src/index.ts",
28
- "./utils": "./packages/utils/src/index.ts",
29
- "./html": "./packages/html/src/index.ts",
30
- "./html/*": "./packages/html/node/*.ts",
31
- "./css": "./packages/css/src/index.ts",
32
33
  "./css/*": "./packages/css/src/ext/*.ts",
33
- "./router": "./packages/router/src/index.ts",
34
- "./i18n": "./packages/i18n/src/index.ts",
35
- "./idb": "./packages/idb/src/index.ts",
36
- "./idb/core": "./packages/idb/src/core.ts",
37
- "./markdown": "./packages/markdown/src/index.ts",
38
34
  "./markdown/syntax/*": "./packages/markdown/src/syntax/*.ts",
39
- "./signal": "./packages/signal/src/index.ts",
40
- "./ui/*": "./packages/ui/*.ts"
35
+ "./*": "./packages/*/src/index.ts"
41
36
  },
42
- "workspaces": [
43
- "packages/*"
44
- ],
45
37
  "dependencies": {
46
38
  "@amateras/core": "./packages/core"
47
- }
39
+ },
40
+ "workspaces": {
41
+ "packages": [
42
+ "packages/*"
43
+ ]
44
+ },
45
+ "devDependencies": {
46
+ "@types/bun": "^1.3.6",
47
+ "vite": "^7.3.1"
48
+ },
49
+ "files": [
50
+ "pakcages",
51
+ "index.ts",
52
+ "tsconfig.json"
53
+ ]
48
54
  }
package/tsconfig.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  // Environment setup & latest features
4
- "lib": ["ESNext", "DOM", "DOM.Iterable"],
4
+ "lib": ["ESNext", "DOM"],
5
5
  "target": "ESNext",
6
- "module": "ESNext",
6
+ "module": "Preserve",
7
7
  "moduleDetection": "force",
8
8
  "jsx": "react-jsx",
9
9
  "allowJs": true,
@@ -19,11 +19,12 @@
19
19
  "skipLibCheck": true,
20
20
  "noFallthroughCasesInSwitch": true,
21
21
  "noUncheckedIndexedAccess": true,
22
+ "noImplicitOverride": true,
22
23
 
23
24
  // Some stricter flags (disabled by default)
24
25
  "noUnusedLocals": false,
25
26
  "noUnusedParameters": false,
26
27
  "noPropertyAccessFromIndexSignature": false
27
28
  },
28
- "exclude": ["deprecated"]
29
+ "exclude": ["deprecated", "**/*.js"]
29
30
  }
@@ -1,32 +0,0 @@
1
- {
2
- "name": "@amateras/core",
3
- "dependencies": {
4
- "@amateras/utils": "workspace:*",
5
- "@amateras/dom": "workspace:*"
6
- },
7
- "imports": {
8
- "#structure/*": "./src/structure/*.ts",
9
- "#lib/*": "./src/lib/*.ts",
10
- "#node/*": "./src/node/*.ts",
11
- "#env": {
12
- "browser": "./src/env.browser.ts",
13
- "node": "./src/env.node.ts",
14
- "default": "./src/env.browser.ts"
15
- }
16
- },
17
- "exports": {
18
- ".": {
19
- "browser": "./src/index.ts",
20
- "node": "./src/main.ts",
21
- "default": "./src/index.ts"
22
- },
23
- "./env": {
24
- "browser": "./src/env.browser.ts",
25
- "node": "./src/env.node.ts",
26
- "default": "./src/env.browser.ts"
27
- },
28
- "./structure/*": "./src/structure/*.ts",
29
- "./lib/*": "./src/lib/*.ts",
30
- "./node/*": "./src/node/*.ts"
31
- }
32
- }
@@ -1,21 +0,0 @@
1
- // window and document
2
- export const _window = window;
3
- export const _document = document;
4
-
5
- interface onclient {
6
- (): boolean;
7
- (fn: Function): void
8
- }
9
-
10
- interface onserver {
11
- (): boolean;
12
- (fn: Function): void
13
- }
14
-
15
- export const onclient: onclient = (fn?: Function) => {
16
- if (fn) return fn();
17
- return true
18
- }
19
- export const onserver: onserver = (fn?: Function) => {
20
- return false;
21
- }
@@ -1,21 +0,0 @@
1
- // window and document
2
- export const _window = window;
3
- export const _document = document;
4
-
5
- interface onclient {
6
- (): boolean;
7
- (fn: Function): void
8
- }
9
-
10
- interface onserver {
11
- (): boolean;
12
- (fn: Function): void
13
- }
14
-
15
- export const onclient: onclient = (fn?: Function) => {
16
- return false;
17
- }
18
- export const onserver: onserver = (fn?: Function) => {
19
- if (fn) return fn();
20
- return true
21
- }
@@ -1,18 +0,0 @@
1
- import type { $Element } from '#node/$Element';
2
- import type { $Node } from '#node/$Node';
3
- import * as core from './index';
4
- import type { $EventTarget } from '#node/$EventTarget';
5
-
6
- declare global {
7
- export import $ = core.$;
8
- type $Parameter<T> = T | undefined | $.$NodeParameterExtends<T>
9
- interface Node {
10
- readonly $: $Node
11
- }
12
- interface EventTarget {
13
- readonly $: $EventTarget
14
- }
15
- interface Element {
16
- readonly $: $Element
17
- }
18
- }
@@ -1,96 +0,0 @@
1
- import './global';
2
- import './lib/assignNodeProperties';
3
- import { $Element } from "#node/$Element";
4
- import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
5
- import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, isUndefined, _bind, _null } from '@amateras/utils';
6
- import { $HTMLElement } from '#node/$HTMLElement';
7
- import { _document } from '#env';
8
- import { $EventTarget, type $Event } from '#node/$EventTarget';
9
-
10
- const nodeNameMap: {[key: string]: Constructor<$EventTarget>} = {}
11
-
12
- type $NodeBuilder = (...args: any[]) => $NodeContentResolver<$Node>
13
- type BuilderResultResolver<F> = F extends Constructor<$Node> ? InstanceType<F> : F extends $NodeBuilder ? ReturnType<F> : never;
14
- type BuilderParameterResolver<F> = F extends Constructor<$Node> ? ConstructorParameters<F> : F extends $NodeBuilder ? Parameters<F> : never;
15
-
16
- type $Type<T extends EventTarget> = T extends HTMLElement ? $HTMLElement : T extends Element ? $Element : T extends (Node | ChildNode) ? $Node : T extends EventTarget ? $EventTarget : never;
17
-
18
- /** Builder function */
19
- export function $<F extends $NodeBuilder | Constructor<$Node> | number, T extends $NodeBuilder | Constructor<$Node>>(
20
- resolver: F,
21
- ...args: F extends number ? [T, ...BuilderParameterResolver<T>] : BuilderParameterResolver<F>
22
- ): F extends number
23
- ? number extends F
24
- ? BuilderResultResolver<T>[]
25
- : Repeat<BuilderResultResolver<T>, F>
26
- : BuilderResultResolver<F>;
27
- /** Get {@link $Node} from {@link NodeList} */
28
- export function $<T extends HTMLElement | Element | Node | ChildNode>(nodes: NodeListOf<T>): $Type<T>[];
29
- /** Get self */
30
- export function $<E extends $EventTarget | null | undefined>($node: E, ...args: any[]): E extends $EventTarget ? E : null;
31
- /** Convert {@link Window} to {@link $EventTarget} */
32
- export function $<W extends Window>(node: W): $EventTarget<WindowEventMap>;
33
- /** Convert {@link Document} to {@link $Node} */
34
- export function $<D extends Document>(node: D): $Node<DocumentEventMap>;
35
- /** Convert {@link EventTarget} base to {@link $EventTarget} base*/
36
- export function $<H extends EventTarget | null | undefined>(target: H, ...args: any[]): H extends EventTarget ? $Type<H> : null;
37
- export function $<E extends Record<string, Event>>(target: EventTarget, ...args: any[]): $EventTarget<E>;
38
- /** Convert string and variables to {@link $NodeContentTypes} array */
39
- export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
40
- /** Get {@link Event.currentTarget} in {@link $EventTarget} type from {@link Event} */
41
- export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['currentTarget']['$'];
42
- /** Create {@link $Node} base object from extensions */
43
- export function $<K extends keyof $.$NodeMap, T extends $.$NodeMap[K]>(tagname: K, ...args: ConstructorParameters<T>): InstanceType<T>;
44
- /** Create {@link $HTMLElement} by tagname */
45
- export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
46
- /** Create {@link $HTMLElement} by custom tagname */
47
- export function $(tagname: string): $HTMLElement<HTMLElement>
48
- /** Create multiple {@link $HTMLElement} objects by tagname */
49
- export function $<N extends number, K extends keyof HTMLElementTagNameMap>(number: N, tagname: K): number extends N ? $HTMLElement<HTMLElementTagNameMap[K]>[] : Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
50
- /** Create multiple {@link $HTMLElement} objects by custom tagname */
51
- export function $<N extends number>(number: N, tagname: string): number extends N ? $HTMLElement<HTMLElement>[] : Repeat<$HTMLElement<HTMLElement>, N>;
52
- export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode> | EventTarget, ...args: any[]) {
53
- if (isNull(resolver) || isUndefined(resolver)) return null;
54
- if (_instanceof(resolver, $Node)) return resolver;
55
- if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
56
- if (isFunction(resolver))
57
- if (resolver.prototype?.constructor) return new resolver.prototype.constructor(...args);
58
- else return resolver(...args);
59
- if (resolver instanceof Array) {
60
- const iterate = args.values();
61
- return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
62
- }
63
- if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
64
- if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element);
65
- if (isNumber(resolver)) return _Array_from({length: resolver}).map(_ => $(args[0], ...args.slice(1)));
66
- if (_instanceof(resolver, HTMLElement)) return new $HTMLElement(resolver);
67
- if (_instanceof(resolver, Element)) return new $Element(resolver);
68
- if (_instanceof(resolver, Node)) return new $Node(resolver as any);
69
- if (_instanceof(resolver, EventTarget)) return new $EventTarget(resolver as any);
70
- if (_instanceof(resolver, NodeList)) return _Array_from(resolver).map($);
71
- return new $HTMLElement(resolver);
72
- }
73
-
74
- export namespace $ {
75
- // css
76
- const _stylesheet = new CSSStyleSheet();
77
- export const stylesheet = _stylesheet;
78
- _document.adoptedStyleSheets.push(_stylesheet);
79
- export const style = _bind(_stylesheet.insertRule, _stylesheet);
80
- // node map
81
- export interface $NodeMap {}
82
- // node content amp
83
- export interface $NodeContentMap {}
84
- export type $NodeContentTypeExtends = $NodeContentMap[keyof $NodeContentMap]
85
- // attr value map
86
- export interface $NodeParameterMap<T> {}
87
- export type $NodeParameterExtends<T> = $NodeParameterMap<T>[keyof $NodeParameterMap<T>]
88
-
89
- export const assign = (...resolver: [nodeName: string, $node: Constructor<$EventTarget>][]) => {
90
- forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
91
- return $;
92
- }
93
- }
94
-
95
- export type $ = typeof $;
96
- globalThis.$ = $;
@@ -1,11 +0,0 @@
1
- import { $HTMLElement } from '#node/$HTMLElement';
2
- import { assignProperties } from '#lib/assignProperties';
3
- import { $Element } from '#node/$Element';
4
- import { $Node, $Text } from '#node/$Node';
5
- import { $EventTarget } from '#node/$EventTarget';
6
-
7
- assignProperties(EventTarget, $EventTarget);
8
- assignProperties(Node, $Node);
9
- assignProperties(Text, $Text);
10
- assignProperties(Element, $Element);
11
- assignProperties(HTMLElement, $HTMLElement);
@@ -1,57 +0,0 @@
1
- import type { $EventTarget } from "#node/$EventTarget";
2
- import { $Node } from "#node/$Node";
3
- import { _instanceof, _null, _Object_defineProperty, _Object_entries, _Object_getOwnPropertyDescriptors, forEach, isUndefined } from "@amateras/utils";
4
-
5
- const assigner = (target: any, {set, get, fn}: {
6
- set?: string[],
7
- get?: string[],
8
- fn?: string[]
9
- }) => {
10
- const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
11
- const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => arr?.map(prop => [type, prop]) ?? []
12
- const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
13
- forEach(list, ([type, prop]) =>
14
- _Object_defineProperty(target.prototype, prop, {
15
- ...(type === GET ? {
16
- get() { return this.node[prop as any] }
17
- } : {
18
- writable: true,
19
- ...(type === SET ? {
20
- // set
21
- value(this, args: any) {
22
- if (!arguments.length) return this.node[prop];
23
- let set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
24
- for (const setter of $Node.setters) {
25
- const result = setter(args, set);
26
- if (!isUndefined(result)) return set(result), this;
27
- }
28
- set(args)
29
- return this;
30
- }
31
- } : {
32
- // fn
33
- value(this, ...args : any[]) {
34
- let result = this.node[prop](...args.map(value => _instanceof(value, $Node) ? value.node : value ?? _null))
35
- return isUndefined(result) ? this : result;
36
- }
37
- })
38
- }),
39
-
40
- })
41
- )
42
- }
43
-
44
- export const assignProperties = (object: Constructor<EventTarget>, target: Constructor<$EventTarget>, tagname?: string) => {
45
- const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
46
- // assign native object properties to target
47
- forEach(_Object_entries(_Object_getOwnPropertyDescriptors(object.prototype)), ([prop, value]) => {
48
- if (!(prop in target.prototype)) {
49
- if (value.get && !value.set) get.push(prop);
50
- else if (value.value) fn.push(prop);
51
- else if (value.get && value.set) set.push(prop);
52
- }
53
- })
54
- assigner(target, {set, get, fn})
55
- // register tagname
56
- if (tagname) $.assign([tagname, target])
57
- }
@@ -1,17 +0,0 @@
1
- import { $Node } from "#node/$Node";
2
- import { isUndefined } from "@amateras/utils";
3
-
4
- export const chain: chain = <T, R, V>(_this: T, args: IArguments | null, get: (() => R) | null, value: V, set: (value: Exclude<V, undefined>) => any) => {
5
- if (args && get && !args.length) return get();
6
- if (isUndefined(value)) return _this;
7
- for (const setter of $Node.setters) {
8
- const result = setter(value, set);
9
- if (!isUndefined(result)) return set(result), _this;
10
- }
11
- return set(value as any), _this;
12
- }
13
-
14
- interface chain {
15
- <T, V>(_this: T, args: null, get: null, value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T
16
- <T, R, V>(_this: T, args: IArguments, get: (() => R), value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T | R
17
- }
@@ -1,20 +0,0 @@
1
- import { _Object_assign } from "@amateras/utils";
2
- import "@amateras/dom/structure/NodeList";
3
- import '@amateras/dom/structure/Node';
4
- import '@amateras/dom/structure/Text';
5
- import '@amateras/dom/structure/Document';
6
- import '@amateras/dom/structure/Element';
7
- import '@amateras/dom/structure/HTMLElement';
8
- import '@amateras/dom/structure/CSSStyleSheet';
9
- import '@amateras/dom/structure/CSS';
10
-
11
- import '@amateras/dom/structure/html/HTMLAnchorElement';
12
-
13
- import { Window } from "@amateras/dom/structure/Window";
14
-
15
- const window = new Window();
16
-
17
- _Object_assign(globalThis, {
18
- window,
19
- ...window,
20
- })
@@ -1,4 +0,0 @@
1
- // This is server environment entry file
2
-
3
- import '#lib/dom';
4
- import './index';