mono-jsx 0.3.4 → 0.5.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 (8) hide show
  1. package/README.md +269 -127
  2. package/jsx-runtime.mjs +587 -507
  3. package/package.json +1 -1
  4. package/setup.mjs +1 -0
  5. package/types/html.d.ts +20 -11
  6. package/types/jsx.d.ts +11 -5
  7. package/types/mono.d.ts +31 -20
  8. package/types/render.d.ts +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mono-jsx",
3
- "version": "0.3.4",
3
+ "version": "0.5.0",
4
4
  "description": "`<html>` as a `Response`.",
5
5
  "type": "module",
6
6
  "module": "./index.mjs",
package/setup.mjs CHANGED
@@ -31,6 +31,7 @@ async function setup() {
31
31
  return;
32
32
  }
33
33
  if (!globalThis.Deno) {
34
+ compilerOptions.lib ??= ["dom", "es2022"];
34
35
  compilerOptions.module ??= "es2022";
35
36
  compilerOptions.moduleResolution ??= "bundler";
36
37
  }
package/types/html.d.ts CHANGED
@@ -125,7 +125,7 @@ export namespace HTML {
125
125
  decoding?: "async" | "auto" | "sync";
126
126
  height?: number | string;
127
127
  isMap?: boolean;
128
- loading?: "eager" | "lazy";
128
+ loading?: "lazy";
129
129
  referRerpolicy?: ReferrerPolicy;
130
130
  sizes?: string;
131
131
  src?: string;
@@ -136,7 +136,7 @@ export namespace HTML {
136
136
 
137
137
  interface FormAttributes<T extends EventTarget> extends GlobalAttributes<T> {
138
138
  "accept-charset"?: string;
139
- action: string | (/* mono-jsx specific */ (data: FormData, event: SubmitEvent) => unknown | Promise<unknown>);
139
+ action: string | (/* @mono-jsx */ (data: FormData, event: SubmitEvent) => unknown | Promise<unknown>);
140
140
  autoComplete?: "on" | "off";
141
141
  encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
142
142
  method?: "GET" | "POST" | "dialog";
@@ -325,7 +325,7 @@ export namespace HTML {
325
325
  allowFullScreen?: boolean;
326
326
  allowTransparency?: boolean;
327
327
  height?: number | string;
328
- loading?: "eager" | "lazy";
328
+ loading?: "lazy";
329
329
  name?: string;
330
330
  referrerPolicy?: ReferrerPolicy;
331
331
  sandbox?: string;
@@ -350,8 +350,8 @@ export namespace HTML {
350
350
  }
351
351
 
352
352
  interface LabelAttributes<T extends EventTarget> extends GlobalAttributes<T> {
353
- form?: string;
354
353
  for?: string;
354
+ form?: string;
355
355
  }
356
356
 
357
357
  interface LiAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -461,8 +461,8 @@ export namespace HTML {
461
461
  }
462
462
 
463
463
  interface OutputAttributes<T extends EventTarget> extends GlobalAttributes<T> {
464
- form?: string;
465
464
  for?: string;
465
+ form?: string;
466
466
  name?: string;
467
467
  }
468
468
 
@@ -821,8 +821,8 @@ export namespace HTML {
821
821
  }
822
822
 
823
823
  interface EventAttributes<T extends EventTarget> {
824
- // mono-jsx specific
825
- onMount?: (event: { type: "mount"; target: T }) => void | Promise<void>;
824
+ // @mono-jsx
825
+ ref?: ((el: T) => unknown) | HTMLElement | null;
826
826
 
827
827
  // Input Events
828
828
  onBeforeInput?: EventHandler<Event, T>;
@@ -915,9 +915,7 @@ export namespace HTML {
915
915
  onResize?: EventHandler<PictureInPictureEvent, T>;
916
916
  }
917
917
 
918
- export interface Elements {
919
- // custom elements
920
- [key: `${string}-${string}`]: GlobalAttributes<HTMLElement>;
918
+ interface Elements {
921
919
  a: AnchorAttributes<HTMLAnchorElement>;
922
920
  abbr: GlobalAttributes<HTMLElement>;
923
921
  address: GlobalAttributes<HTMLElement>;
@@ -1036,7 +1034,7 @@ export namespace HTML {
1036
1034
  wbr: GlobalAttributes<HTMLElement>;
1037
1035
  }
1038
1036
 
1039
- export interface SVGElements {
1037
+ interface SVGElements {
1040
1038
  svg: SVGAttributes<SVGSVGElement>;
1041
1039
  animate: SVGAttributes<SVGAnimateElement>;
1042
1040
  circle: SVGAttributes<SVGCircleElement>;
@@ -1097,4 +1095,15 @@ export namespace HTML {
1097
1095
  use: SVGAttributes<SVGUseElement>;
1098
1096
  view: SVGAttributes<SVGViewElement>;
1099
1097
  }
1098
+
1099
+ type CustomElements =
1100
+ & {
1101
+ [K in keyof JSX.CustomElements]:
1102
+ & JSX.CustomElements[K]
1103
+ & Mono.BaseAttributes
1104
+ & Mono.AsyncComponentAttributes;
1105
+ }
1106
+ & {
1107
+ [K in `${string}-${string}`]?: HTML.GlobalAttributes<HTMLElement>;
1108
+ };
1100
1109
  }
package/types/jsx.d.ts CHANGED
@@ -3,16 +3,16 @@
3
3
  import type * as Mono from "./mono.d.ts";
4
4
  import type { HTML } from "./html.d.ts";
5
5
 
6
- export type ChildType = VNode | VNode[] | string | number | bigint | boolean | null;
7
-
8
6
  export type VNode = readonly [
9
7
  tag: string | symbol | FC<any>,
10
8
  props: Record<string, any>,
11
9
  $vnode: symbol,
12
10
  ];
13
11
 
12
+ export type FCReturnType<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
13
+
14
14
  export interface FC<P = {}> {
15
- (props: P): ChildType | Promise<ChildType> | Generator<ChildType> | AsyncGenerator<ChildType>;
15
+ (props: P): FCReturnType<VNode | string | null>;
16
16
  rendering?: string;
17
17
  }
18
18
 
@@ -23,9 +23,15 @@ declare global {
23
23
  [K in keyof IntrinsicElements]: P extends IntrinsicElements[K] ? K : never;
24
24
  }[keyof IntrinsicElements]
25
25
  | FC<P>;
26
- type Raw = (strings: TemplateStringsArray, ...values: unknown[]) => JSX.Element;
26
+ type Raw = (strings: TemplateStringsArray, ...values: unknown[]) => Element;
27
+ interface CustomElements {}
27
28
  interface Element extends VNode, Response {}
28
29
  interface IntrinsicAttributes extends Mono.BaseAttributes, Mono.AsyncComponentAttributes {}
29
- interface IntrinsicElements extends HTML.Elements, HTML.SVGElements, Mono.Elements {}
30
+ interface IntrinsicElements extends HTML.Elements, HTML.SVGElements, HTML.CustomElements, Mono.Elements {}
30
31
  }
32
+ var JSX: {
33
+ customElements: {
34
+ define: (tagName: string, fc: FC<any>) => void;
35
+ };
36
+ };
31
37
  }
package/types/mono.d.ts CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  import type * as CSS from "./css.d.ts";
4
4
 
5
- type Num1_9 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
6
- type Num0_100 = 0 | Num1_9 | `${Num1_9}${0 | Num1_9}` | 100;
5
+ type D9 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
6
+ type D100 = 0 | D9 | `${D9}${0 | D9}` | 100;
7
7
 
8
8
  export interface BaseCSSProperties extends CSS.Properties<string | number> {}
9
9
 
@@ -12,7 +12,7 @@ export interface AtRuleCSSProperties {
12
12
  [key: `@media${" " | "("}${string}`]: BaseCSSProperties;
13
13
  [key: `@supports${" " | "("}${string}`]: BaseCSSProperties;
14
14
  [key: `@keyframes ${string}`]: {
15
- [key in "from" | "to" | `${Num0_100}%`]?: BaseCSSProperties;
15
+ [key in "from" | "to" | `${D100}%`]?: BaseCSSProperties;
16
16
  };
17
17
  }
18
18
 
@@ -66,11 +66,11 @@ export interface CSSProperties extends BaseCSSProperties, AtRuleCSSProperties, P
66
66
  [key: `&${" " | "." | "["}${string}`]: CSSProperties;
67
67
  }
68
68
 
69
- export type ChildType = JSX.Element | (JSX.Element | string | null)[] | string | number | bigint | boolean | null;
69
+ export type MaybeArray<T> = T | T[];
70
+ export type ChildType = MaybeArray<JSX.Element | string | number | bigint | boolean | null>;
70
71
 
71
72
  export interface BaseAttributes {
72
- children?: ChildType | ChildType[];
73
- key?: string | number;
73
+ children?: MaybeArray<ChildType>;
74
74
  slot?: string;
75
75
  }
76
76
 
@@ -92,17 +92,16 @@ export interface AsyncComponentAttributes {
92
92
 
93
93
  export interface Elements {
94
94
  /**
95
- * The `<toggle>` element is a custom element that represents a toggle switch.
95
+ * The `toggle` element is a custom element that represents a toggle switch.
96
96
  */
97
97
  toggle: BaseAttributes & {
98
- value?: boolean | string | number | null;
98
+ show?: boolean | 0 | 1;
99
99
  };
100
100
  /**
101
- * The `<switch>` element is a custom element that represents a switch.
101
+ * The `switch` element is a custom element that represents a switch.
102
102
  */
103
103
  switch: BaseAttributes & {
104
- value?: string;
105
- defaultValue?: string;
104
+ value?: string | number | boolean | null;
106
105
  };
107
106
  }
108
107
 
@@ -110,29 +109,41 @@ declare global {
110
109
  /**
111
110
  * The `html` function is used to create XSS-unsafe HTML elements.
112
111
  */
113
- var html: JSX.Raw, css: JSX.Raw, js: JSX.Raw;
112
+ var html: JSX.Raw;
113
+ var css: JSX.Raw;
114
+ var js: JSX.Raw;
114
115
 
115
116
  /**
116
117
  * mono-jsx `this` object that is bound to the function component.
117
118
  */
118
- type FC<State = {}, AppState = {}, Context = {}> = {
119
+ type FC<Signals = {}, AppSignals = {}, Context = {}> = {
119
120
  /**
120
- * Application state.
121
- * This is the state that is shared across the entire application.
121
+ * Application signals.
122
+ * Application signals is shared across the entire application.
122
123
  */
123
- readonly app: AppState;
124
+ readonly app: AppSignals;
124
125
  /**
125
126
  * Context object.
127
+ * **This is a server-side only API.**
126
128
  */
127
129
  readonly context: Context;
128
130
  /**
129
131
  * Current request object.
132
+ * **This is a server-side only API.**
130
133
  */
131
134
  readonly request: Request;
132
135
  /**
133
- * The `computed` function is used to create a computed property.
134
- * It takes a function that returns a value and returns the value.
136
+ * The `refs` object is used to store references to DOM elements.
135
137
  */
136
- readonly computed: <V = unknown>(computeFn: () => V) => V;
137
- } & Omit<State, "app" | "context" | "request" | "computed">;
138
+ readonly refs: Record<string, HTMLElement | null>;
139
+ /**
140
+ * The `computed` method is used to create a computed signal.
141
+ */
142
+ readonly computed: <T = unknown>(fn: () => T) => T;
143
+ /**
144
+ * The `effect` method is used to create a side effect.
145
+ * **The effect function is only called on client side.**
146
+ */
147
+ readonly effect: (fn: () => void | (() => void)) => void;
148
+ } & Omit<Signals, "app" | "context" | "request" | "computed" | "effect">;
138
149
  }
package/types/render.d.ts CHANGED
@@ -14,9 +14,9 @@ type HtmxExts = {
14
14
  */
15
15
  export interface RenderOptions extends Partial<HtmxExts> {
16
16
  /**
17
- * Initial state of the application.
17
+ * Initial signals of the application.
18
18
  */
19
- appState?: Record<string, unknown>;
19
+ app?: Record<string, unknown>;
20
20
  /**
21
21
  * The context object to be passed to components.
22
22
  */