sinwan-ui-core 0.0.0 → 1.1.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.
- package/CHANGELOG.md +28 -0
- package/README.md +31 -12
- package/dist/chunks/chunk-3zrktrd2.js +189 -0
- package/dist/chunks/chunk-6r59k5mb.js +384 -0
- package/dist/chunks/chunk-7r6fwdyt.js +16 -0
- package/dist/chunks/chunk-8zvv4kad.js +116 -0
- package/dist/chunks/chunk-94xhejch.js +511 -0
- package/dist/chunks/chunk-9whagkb6.js +31 -0
- package/dist/chunks/chunk-bw9vp0y9.js +69 -0
- package/dist/chunks/chunk-ejwby1pn.js +107 -0
- package/dist/chunks/chunk-f6hw8ash.js +29 -0
- package/dist/chunks/chunk-te52bwb8.js +448 -0
- package/dist/controls.d.ts +141 -0
- package/dist/controls.js +55 -0
- package/dist/core.d.ts +24 -0
- package/dist/core.js +42 -0
- package/dist/direction.d.ts +15 -0
- package/dist/direction.js +10 -0
- package/dist/dismiss.d.ts +1 -0
- package/dist/dismiss.js +6 -0
- package/dist/floating.d.ts +105 -0
- package/dist/floating.js +24 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +166 -0
- package/dist/menu-sub.d.ts +34 -0
- package/dist/menu-sub.js +14 -0
- package/dist/overlay.d.ts +111 -0
- package/dist/overlay.js +47 -0
- package/dist/slot.d.ts +8 -0
- package/dist/slot.js +7 -0
- package/dist/theme.d.ts +34 -0
- package/dist/theme.js +12 -0
- package/dist/types.d.ts +11 -0
- package/dist/types.js +8 -0
- package/package.json +108 -5
- package/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc +0 -119
- package/bun.lock +0 -66
- package/index.ts +0 -1
- package/tsconfig.json +0 -30
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { type InjectionKey, type SinwanNode } from "sinwan/component";
|
|
2
|
+
import { signal, type Computed, type Signal } from "sinwan/reactivity";
|
|
3
|
+
import { type Align, type Placement } from "./core";
|
|
4
|
+
export type OpenApi = {
|
|
5
|
+
open: Signal<boolean> | Computed<boolean>;
|
|
6
|
+
setOpen: (value: boolean) => void;
|
|
7
|
+
triggerEl: ReturnType<typeof signal<HTMLElement | null>>;
|
|
8
|
+
requestClose: (delayMs?: number) => void;
|
|
9
|
+
cancelClose: () => void;
|
|
10
|
+
isHoverOpenBlocked: () => boolean;
|
|
11
|
+
setPointerOverTrigger: (over: boolean) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const DialogKey: InjectionKey<OpenApi>;
|
|
14
|
+
export type DialogRootProps = {
|
|
15
|
+
children?: SinwanNode;
|
|
16
|
+
open?: boolean;
|
|
17
|
+
defaultOpen?: boolean;
|
|
18
|
+
onOpenChange?: (open: boolean) => void;
|
|
19
|
+
};
|
|
20
|
+
export declare const DialogRoot: import("sinwan/component").SinwanComponent<DialogRootProps>;
|
|
21
|
+
export declare const DialogTrigger: import("sinwan/component").SinwanComponent<{
|
|
22
|
+
children?: SinwanNode;
|
|
23
|
+
class?: string;
|
|
24
|
+
asChild?: boolean;
|
|
25
|
+
}>;
|
|
26
|
+
export declare const DialogClose: import("sinwan/component").SinwanComponent<{
|
|
27
|
+
children?: SinwanNode;
|
|
28
|
+
class?: string;
|
|
29
|
+
asChild?: boolean;
|
|
30
|
+
}>;
|
|
31
|
+
export declare const DialogOverlay: import("sinwan/component").SinwanComponent<{
|
|
32
|
+
class?: string;
|
|
33
|
+
}>;
|
|
34
|
+
export declare const DialogContent: import("sinwan/component").SinwanComponent<{
|
|
35
|
+
[key: `data-${string}`]: string | undefined;
|
|
36
|
+
children?: SinwanNode;
|
|
37
|
+
class?: string;
|
|
38
|
+
onEscapeKeyDown?: (e: KeyboardEvent) => void;
|
|
39
|
+
"data-side"?: string;
|
|
40
|
+
"data-size"?: string;
|
|
41
|
+
"data-vaul-drawer-direction"?: string;
|
|
42
|
+
"data-slot"?: string;
|
|
43
|
+
}>;
|
|
44
|
+
export declare const CollapsibleKey: InjectionKey<{
|
|
45
|
+
open: Signal<boolean> | Computed<boolean>;
|
|
46
|
+
setOpen: (v: boolean) => void;
|
|
47
|
+
}>;
|
|
48
|
+
export declare const CollapsibleRoot: import("sinwan/component").SinwanComponent<{
|
|
49
|
+
children?: SinwanNode;
|
|
50
|
+
open?: boolean;
|
|
51
|
+
defaultOpen?: boolean;
|
|
52
|
+
onOpenChange?: (open: boolean) => void;
|
|
53
|
+
class?: string;
|
|
54
|
+
}>;
|
|
55
|
+
export declare const CollapsibleTrigger: import("sinwan/component").SinwanComponent<{
|
|
56
|
+
children?: SinwanNode;
|
|
57
|
+
class?: string;
|
|
58
|
+
asChild?: boolean;
|
|
59
|
+
}>;
|
|
60
|
+
export declare const CollapsibleContent: import("sinwan/component").SinwanComponent<{
|
|
61
|
+
children?: SinwanNode;
|
|
62
|
+
class?: string;
|
|
63
|
+
}>;
|
|
64
|
+
export declare const PopoverKey: InjectionKey<OpenApi & {
|
|
65
|
+
placement: Placement;
|
|
66
|
+
align: Align;
|
|
67
|
+
}>;
|
|
68
|
+
export declare const PopoverRoot: import("sinwan/component").SinwanComponent<{
|
|
69
|
+
children?: SinwanNode;
|
|
70
|
+
open?: boolean;
|
|
71
|
+
defaultOpen?: boolean;
|
|
72
|
+
onOpenChange?: (open: boolean) => void;
|
|
73
|
+
placement?: Placement;
|
|
74
|
+
align?: Align;
|
|
75
|
+
}>;
|
|
76
|
+
export declare const PopoverTrigger: import("sinwan/component").SinwanComponent<{
|
|
77
|
+
children?: SinwanNode;
|
|
78
|
+
class?: string;
|
|
79
|
+
asChild?: boolean;
|
|
80
|
+
}>;
|
|
81
|
+
export declare const PopoverContent: import("sinwan/component").SinwanComponent<{
|
|
82
|
+
children?: SinwanNode;
|
|
83
|
+
class?: string;
|
|
84
|
+
side?: Placement;
|
|
85
|
+
align?: Align;
|
|
86
|
+
sideOffset?: number;
|
|
87
|
+
onmouseenter?: (event: MouseEvent) => void;
|
|
88
|
+
onmouseleave?: (event: MouseEvent) => void;
|
|
89
|
+
}>;
|
|
90
|
+
export declare const TooltipKey: InjectionKey<OpenApi>;
|
|
91
|
+
export declare const TooltipProvider: import("sinwan/component").SinwanComponent<{
|
|
92
|
+
children?: SinwanNode;
|
|
93
|
+
delayDuration?: number;
|
|
94
|
+
}>;
|
|
95
|
+
export declare const TooltipRoot: import("sinwan/component").SinwanComponent<{
|
|
96
|
+
children?: SinwanNode;
|
|
97
|
+
open?: boolean;
|
|
98
|
+
defaultOpen?: boolean;
|
|
99
|
+
onOpenChange?: (open: boolean) => void;
|
|
100
|
+
}>;
|
|
101
|
+
export declare const TooltipTrigger: import("sinwan/component").SinwanComponent<{
|
|
102
|
+
children?: SinwanNode;
|
|
103
|
+
class?: string;
|
|
104
|
+
asChild?: boolean;
|
|
105
|
+
}>;
|
|
106
|
+
export declare const TooltipContent: import("sinwan/component").SinwanComponent<{
|
|
107
|
+
children?: SinwanNode;
|
|
108
|
+
class?: string;
|
|
109
|
+
side?: Placement;
|
|
110
|
+
sideOffset?: number;
|
|
111
|
+
}>;
|
package/dist/overlay.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DialogKey2,
|
|
3
|
+
DialogRoot2,
|
|
4
|
+
DialogTrigger2,
|
|
5
|
+
DialogClose2,
|
|
6
|
+
DialogOverlay2,
|
|
7
|
+
DialogContent2,
|
|
8
|
+
CollapsibleKey2,
|
|
9
|
+
CollapsibleRoot2,
|
|
10
|
+
CollapsibleTrigger2,
|
|
11
|
+
CollapsibleContent2,
|
|
12
|
+
PopoverKey2,
|
|
13
|
+
PopoverRoot2,
|
|
14
|
+
PopoverTrigger2,
|
|
15
|
+
PopoverContent2,
|
|
16
|
+
TooltipKey2,
|
|
17
|
+
TooltipProvider2,
|
|
18
|
+
TooltipRoot2,
|
|
19
|
+
TooltipTrigger2,
|
|
20
|
+
TooltipContent2
|
|
21
|
+
} from "./chunks/chunk-94xhejch.js";
|
|
22
|
+
import"./chunks/chunk-bw9vp0y9.js";
|
|
23
|
+
import"./chunks/chunk-7r6fwdyt.js";
|
|
24
|
+
import"./chunks/chunk-9whagkb6.js";
|
|
25
|
+
import"./chunks/chunk-ejwby1pn.js";
|
|
26
|
+
import"./chunks/chunk-6r59k5mb.js";
|
|
27
|
+
export {
|
|
28
|
+
CollapsibleContent2 as CollapsibleContent,
|
|
29
|
+
CollapsibleKey2 as CollapsibleKey,
|
|
30
|
+
CollapsibleRoot2 as CollapsibleRoot,
|
|
31
|
+
CollapsibleTrigger2 as CollapsibleTrigger,
|
|
32
|
+
DialogClose2 as DialogClose,
|
|
33
|
+
DialogContent2 as DialogContent,
|
|
34
|
+
DialogKey2 as DialogKey,
|
|
35
|
+
DialogOverlay2 as DialogOverlay,
|
|
36
|
+
DialogRoot2 as DialogRoot,
|
|
37
|
+
DialogTrigger2 as DialogTrigger,
|
|
38
|
+
PopoverContent2 as PopoverContent,
|
|
39
|
+
PopoverKey2 as PopoverKey,
|
|
40
|
+
PopoverRoot2 as PopoverRoot,
|
|
41
|
+
PopoverTrigger2 as PopoverTrigger,
|
|
42
|
+
TooltipContent2 as TooltipContent,
|
|
43
|
+
TooltipKey2 as TooltipKey,
|
|
44
|
+
TooltipProvider2 as TooltipProvider,
|
|
45
|
+
TooltipRoot2 as TooltipRoot,
|
|
46
|
+
TooltipTrigger2 as TooltipTrigger
|
|
47
|
+
};
|
package/dist/slot.d.ts
ADDED
package/dist/slot.js
ADDED
package/dist/theme.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { type InjectionKey, type SinwanNode } from "sinwan/component";
|
|
2
|
+
import { type Signal } from "sinwan/reactivity";
|
|
3
|
+
export type Theme = "light" | "dark" | "system";
|
|
4
|
+
export type ResolvedTheme = "light" | "dark";
|
|
5
|
+
export type Palette = "credit-blue" | "jomlaty" | "cazview";
|
|
6
|
+
export type ThemeApi = {
|
|
7
|
+
theme: Signal<Theme>;
|
|
8
|
+
resolved: Signal<ResolvedTheme>;
|
|
9
|
+
setTheme: (theme: Theme) => void;
|
|
10
|
+
themes: Theme[];
|
|
11
|
+
palette: Signal<Palette>;
|
|
12
|
+
setPalette: (palette: Palette) => void;
|
|
13
|
+
palettes: Palette[];
|
|
14
|
+
};
|
|
15
|
+
export declare const ThemeKey: InjectionKey<ThemeApi>;
|
|
16
|
+
export type ThemeProviderProps = {
|
|
17
|
+
children?: SinwanNode;
|
|
18
|
+
defaultTheme?: Theme;
|
|
19
|
+
forcedTheme?: Theme;
|
|
20
|
+
storageKey?: string;
|
|
21
|
+
defaultPalette?: Palette;
|
|
22
|
+
forcedPalette?: Palette;
|
|
23
|
+
paletteStorageKey?: string;
|
|
24
|
+
palettes?: Palette[];
|
|
25
|
+
disableTransitionOnChange?: boolean;
|
|
26
|
+
enableSystem?: boolean;
|
|
27
|
+
attribute?: "class" | "data-theme";
|
|
28
|
+
};
|
|
29
|
+
export declare const ThemeProvider: import("sinwan/component").SinwanComponent<ThemeProviderProps>;
|
|
30
|
+
export declare function useTheme(): ThemeApi;
|
|
31
|
+
export declare const ThemeToggle: import("sinwan/component").SinwanComponent<{
|
|
32
|
+
class?: string;
|
|
33
|
+
children?: SinwanNode;
|
|
34
|
+
}>;
|
package/dist/theme.js
ADDED
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { SinwanElement, SinwanNode } from "sinwan/component";
|
|
2
|
+
export type DivProps = JSX.IntrinsicElements["div"];
|
|
3
|
+
export type ButtonHTMLProps = JSX.IntrinsicElements["button"];
|
|
4
|
+
export type InputHTMLProps = JSX.IntrinsicElements["input"];
|
|
5
|
+
export type TextareaHTMLProps = JSX.IntrinsicElements["textarea"];
|
|
6
|
+
export type LabelHTMLProps = JSX.IntrinsicElements["label"];
|
|
7
|
+
export type AnchorHTMLProps = JSX.IntrinsicElements["a"];
|
|
8
|
+
export type SpanProps = JSX.IntrinsicElements["span"];
|
|
9
|
+
export type SVGProps = JSX.IntrinsicElements["svg"];
|
|
10
|
+
export declare function isSinwanElement(node: SinwanNode): node is SinwanElement;
|
|
11
|
+
export declare function flattenChildren(children: SinwanNode | undefined): SinwanNode[];
|
package/dist/types.js
ADDED
package/package.json
CHANGED
|
@@ -1,15 +1,118 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.0",
|
|
3
2
|
"name": "sinwan-ui-core",
|
|
4
|
-
"
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Headless behaviour primitives for Sinwan UI components: overlays, floating positioning, dismiss layers, controls, slots, theme and direction.",
|
|
5
|
+
"author": "Mohammed Ben Cheikh",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://sinwanjs.com",
|
|
8
|
+
"bugs": "https://github.com/sinwanjs/sinwan-ui-core/issues",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/sinwanjs/sinwan-ui-core.git"
|
|
12
|
+
},
|
|
5
13
|
"type": "module",
|
|
14
|
+
"main": "./dist/index.js",
|
|
15
|
+
"module": "./dist/index.js",
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"sinwan-ui-core:source": "./src/index.ts",
|
|
21
|
+
"import": "./dist/index.js",
|
|
22
|
+
"default": "./dist/index.js"
|
|
23
|
+
},
|
|
24
|
+
"./controls": {
|
|
25
|
+
"types": "./dist/controls.d.ts",
|
|
26
|
+
"sinwan-ui-core:source": "./src/controls.tsx",
|
|
27
|
+
"import": "./dist/controls.js",
|
|
28
|
+
"default": "./dist/controls.js"
|
|
29
|
+
},
|
|
30
|
+
"./core": {
|
|
31
|
+
"types": "./dist/core.d.ts",
|
|
32
|
+
"sinwan-ui-core:source": "./src/core.tsx",
|
|
33
|
+
"import": "./dist/core.js",
|
|
34
|
+
"default": "./dist/core.js"
|
|
35
|
+
},
|
|
36
|
+
"./direction": {
|
|
37
|
+
"types": "./dist/direction.d.ts",
|
|
38
|
+
"sinwan-ui-core:source": "./src/direction.tsx",
|
|
39
|
+
"import": "./dist/direction.js",
|
|
40
|
+
"default": "./dist/direction.js"
|
|
41
|
+
},
|
|
42
|
+
"./dismiss": {
|
|
43
|
+
"types": "./dist/dismiss.d.ts",
|
|
44
|
+
"sinwan-ui-core:source": "./src/dismiss.ts",
|
|
45
|
+
"import": "./dist/dismiss.js",
|
|
46
|
+
"default": "./dist/dismiss.js"
|
|
47
|
+
},
|
|
48
|
+
"./floating": {
|
|
49
|
+
"types": "./dist/floating.d.ts",
|
|
50
|
+
"sinwan-ui-core:source": "./src/floating.ts",
|
|
51
|
+
"import": "./dist/floating.js",
|
|
52
|
+
"default": "./dist/floating.js"
|
|
53
|
+
},
|
|
54
|
+
"./menu-sub": {
|
|
55
|
+
"types": "./dist/menu-sub.d.ts",
|
|
56
|
+
"sinwan-ui-core:source": "./src/menu-sub.tsx",
|
|
57
|
+
"import": "./dist/menu-sub.js",
|
|
58
|
+
"default": "./dist/menu-sub.js"
|
|
59
|
+
},
|
|
60
|
+
"./overlay": {
|
|
61
|
+
"types": "./dist/overlay.d.ts",
|
|
62
|
+
"sinwan-ui-core:source": "./src/overlay.tsx",
|
|
63
|
+
"import": "./dist/overlay.js",
|
|
64
|
+
"default": "./dist/overlay.js"
|
|
65
|
+
},
|
|
66
|
+
"./slot": {
|
|
67
|
+
"types": "./dist/slot.d.ts",
|
|
68
|
+
"sinwan-ui-core:source": "./src/slot.ts",
|
|
69
|
+
"import": "./dist/slot.js",
|
|
70
|
+
"default": "./dist/slot.js"
|
|
71
|
+
},
|
|
72
|
+
"./theme": {
|
|
73
|
+
"types": "./dist/theme.d.ts",
|
|
74
|
+
"sinwan-ui-core:source": "./src/theme.tsx",
|
|
75
|
+
"import": "./dist/theme.js",
|
|
76
|
+
"default": "./dist/theme.js"
|
|
77
|
+
},
|
|
78
|
+
"./types": {
|
|
79
|
+
"types": "./dist/types.d.ts",
|
|
80
|
+
"sinwan-ui-core:source": "./src/types.ts",
|
|
81
|
+
"import": "./dist/types.js",
|
|
82
|
+
"default": "./dist/types.js"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"sideEffects": false,
|
|
86
|
+
"files": [
|
|
87
|
+
"dist",
|
|
88
|
+
"CHANGELOG.md"
|
|
89
|
+
],
|
|
90
|
+
"keywords": [
|
|
91
|
+
"sinwan",
|
|
92
|
+
"ui",
|
|
93
|
+
"headless",
|
|
94
|
+
"primitives",
|
|
95
|
+
"accessibility",
|
|
96
|
+
"floating"
|
|
97
|
+
],
|
|
6
98
|
"scripts": {
|
|
7
|
-
"
|
|
99
|
+
"build": "bun run build.ts",
|
|
100
|
+
"test": "bun test --coverage ./__tests__",
|
|
101
|
+
"typecheck": "bunx tsc -p tsconfig.json",
|
|
102
|
+
"exports:check": "bun run scripts/export-map.ts --check",
|
|
103
|
+
"exports:sync": "bun run scripts/export-map.ts --write"
|
|
104
|
+
},
|
|
105
|
+
"dependencies": {
|
|
106
|
+
"@floating-ui/dom": "^1.8.0"
|
|
8
107
|
},
|
|
9
108
|
"devDependencies": {
|
|
10
|
-
"@types/bun": "latest"
|
|
109
|
+
"@types/bun": "latest",
|
|
110
|
+
"bun-plugin-sinwan": "1.0.0",
|
|
111
|
+
"happy-dom": "^20.14.5",
|
|
112
|
+
"sinwan": "^2.0.3",
|
|
113
|
+
"typescript": "^5.9.3"
|
|
11
114
|
},
|
|
12
115
|
"peerDependencies": {
|
|
13
|
-
"
|
|
116
|
+
"sinwan": ">=2.0.3 <3.0.0"
|
|
14
117
|
}
|
|
15
118
|
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Use Bun instead of Node.js, npm, pnpm, or vite.
|
|
3
|
-
globs: "*.ts, *.tsx, *.html, *.css, *.js, *.jsx, package.json"
|
|
4
|
-
alwaysApply: false
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
Default to using Bun instead of Node.js.
|
|
8
|
-
|
|
9
|
-
- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
|
|
10
|
-
- Use `bun test` instead of `jest` or `vitest`
|
|
11
|
-
- Use `bun check` instead of `tsc --noEmit`
|
|
12
|
-
- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
|
|
13
|
-
- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
|
|
14
|
-
- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
|
|
15
|
-
- Use `bunx <package> <command>` instead of `npx <package> <command>`
|
|
16
|
-
- Bun automatically loads .env, so don't use dotenv.
|
|
17
|
-
|
|
18
|
-
## APIs
|
|
19
|
-
|
|
20
|
-
- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
|
|
21
|
-
- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
|
|
22
|
-
- `Bun.redis` for Redis. Don't use `ioredis`.
|
|
23
|
-
- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
|
|
24
|
-
- `WebSocket` is built-in. Don't use `ws`.
|
|
25
|
-
- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
|
|
26
|
-
- Bun.$`ls` instead of execa.
|
|
27
|
-
|
|
28
|
-
## Testing
|
|
29
|
-
|
|
30
|
-
Use `bun test` to run tests.
|
|
31
|
-
|
|
32
|
-
```ts#index.test.ts
|
|
33
|
-
import { test, expect } from "bun:test";
|
|
34
|
-
|
|
35
|
-
test("hello world", () => {
|
|
36
|
-
expect(1).toBe(1);
|
|
37
|
-
});
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Type checking
|
|
41
|
-
|
|
42
|
-
Use `bun check` to type check the project. It reads `tsconfig.json` and reports the same errors as `tsc`.
|
|
43
|
-
|
|
44
|
-
- `bun check src/index.ts` checks one file and what it imports
|
|
45
|
-
- `bun --check src/index.ts`, `bun test --check` and `bun build --check` type check first, and do nothing else if there is an error
|
|
46
|
-
|
|
47
|
-
## Frontend
|
|
48
|
-
|
|
49
|
-
Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
|
|
50
|
-
|
|
51
|
-
Server:
|
|
52
|
-
|
|
53
|
-
```ts#index.ts
|
|
54
|
-
import index from "./index.html"
|
|
55
|
-
|
|
56
|
-
Bun.serve({
|
|
57
|
-
routes: {
|
|
58
|
-
"/": index,
|
|
59
|
-
"/api/users/:id": {
|
|
60
|
-
GET: (req) => {
|
|
61
|
-
return new Response(JSON.stringify({ id: req.params.id }));
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
// optional websocket support
|
|
66
|
-
websocket: {
|
|
67
|
-
open: (ws) => {
|
|
68
|
-
ws.send("Hello, world!");
|
|
69
|
-
},
|
|
70
|
-
message: (ws, message) => {
|
|
71
|
-
ws.send(message);
|
|
72
|
-
},
|
|
73
|
-
close: (ws) => {
|
|
74
|
-
// handle close
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
development: {
|
|
78
|
-
hmr: true,
|
|
79
|
-
console: true,
|
|
80
|
-
}
|
|
81
|
-
})
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
|
|
85
|
-
|
|
86
|
-
```html#index.html
|
|
87
|
-
<html>
|
|
88
|
-
<body>
|
|
89
|
-
<h1>Hello, world!</h1>
|
|
90
|
-
<script type="module" src="./frontend.tsx"></script>
|
|
91
|
-
</body>
|
|
92
|
-
</html>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
With the following `frontend.tsx`:
|
|
96
|
-
|
|
97
|
-
```tsx#frontend.tsx
|
|
98
|
-
import React from "react";
|
|
99
|
-
import { createRoot } from "react-dom/client";
|
|
100
|
-
|
|
101
|
-
// import .css files directly and it works
|
|
102
|
-
import './index.css';
|
|
103
|
-
|
|
104
|
-
const root = createRoot(document.body);
|
|
105
|
-
|
|
106
|
-
export default function Frontend() {
|
|
107
|
-
return <h1>Hello, world!</h1>;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
root.render(<Frontend />);
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Then, run index.ts
|
|
114
|
-
|
|
115
|
-
```sh
|
|
116
|
-
bun --hot ./index.ts
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
|
package/bun.lock
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"lockfileVersion": 2,
|
|
3
|
-
"configVersion": 1,
|
|
4
|
-
"workspaces": {
|
|
5
|
-
"": {
|
|
6
|
-
"name": "sinwan-ui-core",
|
|
7
|
-
"devDependencies": {
|
|
8
|
-
"@types/bun": "latest",
|
|
9
|
-
},
|
|
10
|
-
"peerDependencies": {
|
|
11
|
-
"typescript": "^7",
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
"packages": {
|
|
16
|
-
"@types/bun": ["@types/bun@1.4.4", "", { "dependencies": { "bun-types": "1.4.4" } }, "sha512-9wkRDXUXK124pEnAutE6n/l18j+i9GC5IAHK8TmX/2nlySETmky0OU6yL5U8pW1AoKh++AN9auDCr647BfurjQ=="],
|
|
17
|
-
|
|
18
|
-
"@types/node": ["@types/node@26.6.5", "", { "dependencies": { "undici-types": "~8.9.0" } }, "sha512-uMzsv9stDdofIZBx4UGh4Z9ZgXnGC9seRDscilBcTHAeOFk67MZg/k9bWVfO+bk4qZmG+l52hRnLwUiH2LnJTg=="],
|
|
19
|
-
|
|
20
|
-
"@typescript/typescript-aix-ppc64": ["@typescript/typescript-aix-ppc64@7.0.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ=="],
|
|
21
|
-
|
|
22
|
-
"@typescript/typescript-darwin-arm64": ["@typescript/typescript-darwin-arm64@7.0.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA=="],
|
|
23
|
-
|
|
24
|
-
"@typescript/typescript-darwin-x64": ["@typescript/typescript-darwin-x64@7.0.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA=="],
|
|
25
|
-
|
|
26
|
-
"@typescript/typescript-freebsd-arm64": ["@typescript/typescript-freebsd-arm64@7.0.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ=="],
|
|
27
|
-
|
|
28
|
-
"@typescript/typescript-freebsd-x64": ["@typescript/typescript-freebsd-x64@7.0.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw=="],
|
|
29
|
-
|
|
30
|
-
"@typescript/typescript-linux-arm": ["@typescript/typescript-linux-arm@7.0.2", "", { "os": "linux", "cpu": "arm" }, "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ=="],
|
|
31
|
-
|
|
32
|
-
"@typescript/typescript-linux-arm64": ["@typescript/typescript-linux-arm64@7.0.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ=="],
|
|
33
|
-
|
|
34
|
-
"@typescript/typescript-linux-loong64": ["@typescript/typescript-linux-loong64@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ=="],
|
|
35
|
-
|
|
36
|
-
"@typescript/typescript-linux-mips64el": ["@typescript/typescript-linux-mips64el@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA=="],
|
|
37
|
-
|
|
38
|
-
"@typescript/typescript-linux-ppc64": ["@typescript/typescript-linux-ppc64@7.0.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA=="],
|
|
39
|
-
|
|
40
|
-
"@typescript/typescript-linux-riscv64": ["@typescript/typescript-linux-riscv64@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ=="],
|
|
41
|
-
|
|
42
|
-
"@typescript/typescript-linux-s390x": ["@typescript/typescript-linux-s390x@7.0.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw=="],
|
|
43
|
-
|
|
44
|
-
"@typescript/typescript-linux-x64": ["@typescript/typescript-linux-x64@7.0.2", "", { "os": "linux", "cpu": "x64" }, "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A=="],
|
|
45
|
-
|
|
46
|
-
"@typescript/typescript-netbsd-arm64": ["@typescript/typescript-netbsd-arm64@7.0.2", "", { "os": "none", "cpu": "arm64" }, "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA=="],
|
|
47
|
-
|
|
48
|
-
"@typescript/typescript-netbsd-x64": ["@typescript/typescript-netbsd-x64@7.0.2", "", { "os": "none", "cpu": "x64" }, "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA=="],
|
|
49
|
-
|
|
50
|
-
"@typescript/typescript-openbsd-arm64": ["@typescript/typescript-openbsd-arm64@7.0.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ=="],
|
|
51
|
-
|
|
52
|
-
"@typescript/typescript-openbsd-x64": ["@typescript/typescript-openbsd-x64@7.0.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg=="],
|
|
53
|
-
|
|
54
|
-
"@typescript/typescript-sunos-x64": ["@typescript/typescript-sunos-x64@7.0.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g=="],
|
|
55
|
-
|
|
56
|
-
"@typescript/typescript-win32-arm64": ["@typescript/typescript-win32-arm64@7.0.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ=="],
|
|
57
|
-
|
|
58
|
-
"@typescript/typescript-win32-x64": ["@typescript/typescript-win32-x64@7.0.2", "", { "os": "win32", "cpu": "x64" }, "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g=="],
|
|
59
|
-
|
|
60
|
-
"bun-types": ["bun-types@1.4.4", "", { "dependencies": { "@types/node": "*", "undici-types": "*" } }, "sha512-yjrJh5oGX7mMPKGd19YXyIjmEuj4G4zNC30bs7PM9Az7NQ3ndF3j6hbeRdvJTRQEhJ/FYQwW0a2moweEi2hMxQ=="],
|
|
61
|
-
|
|
62
|
-
"typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
|
|
63
|
-
|
|
64
|
-
"undici-types": ["undici-types@8.9.0", "", {}, "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg=="],
|
|
65
|
-
}
|
|
66
|
-
}
|
package/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
console.log("Hello via Bun!");
|
package/tsconfig.json
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
// Environment setup & latest features
|
|
4
|
-
"lib": ["ESNext"],
|
|
5
|
-
"target": "ESNext",
|
|
6
|
-
"module": "Preserve",
|
|
7
|
-
"moduleDetection": "force",
|
|
8
|
-
"jsx": "react-jsx",
|
|
9
|
-
"allowJs": true,
|
|
10
|
-
"types": ["bun"],
|
|
11
|
-
|
|
12
|
-
// Bundler mode
|
|
13
|
-
"moduleResolution": "bundler",
|
|
14
|
-
"allowImportingTsExtensions": true,
|
|
15
|
-
"verbatimModuleSyntax": true,
|
|
16
|
-
"noEmit": true,
|
|
17
|
-
|
|
18
|
-
// Best practices
|
|
19
|
-
"strict": true,
|
|
20
|
-
"skipLibCheck": true,
|
|
21
|
-
"noFallthroughCasesInSwitch": true,
|
|
22
|
-
"noUncheckedIndexedAccess": true,
|
|
23
|
-
"noImplicitOverride": true,
|
|
24
|
-
|
|
25
|
-
// Some stricter flags (disabled by default)
|
|
26
|
-
"noUnusedLocals": false,
|
|
27
|
-
"noUnusedParameters": false,
|
|
28
|
-
"noPropertyAccessFromIndexSignature": false
|
|
29
|
-
}
|
|
30
|
-
}
|