@hellixit/hellixitboard 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -53
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,13 +7,11 @@
|
|
|
7
7
|
Install the package together with its React peer dependencies.
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install react react-dom @
|
|
10
|
+
npm install react react-dom @hellixit/hellixitboard
|
|
11
11
|
# or
|
|
12
|
-
yarn add react react-dom @
|
|
12
|
+
yarn add react react-dom @hellixit/hellixitboard
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
> **Note**: If you want to try unreleased changes, use `@excalidraw/hellixitboard@next`.
|
|
16
|
-
|
|
17
15
|
## Quick start
|
|
18
16
|
|
|
19
17
|
The minimum working setup has two easy-to-miss requirements:
|
|
@@ -21,14 +19,14 @@ The minimum working setup has two easy-to-miss requirements:
|
|
|
21
19
|
1. Import the package CSS:
|
|
22
20
|
|
|
23
21
|
```ts
|
|
24
|
-
import "@
|
|
22
|
+
import "@hellixit/hellixitboard/index.css";
|
|
25
23
|
```
|
|
26
24
|
|
|
27
25
|
2. Render Hellixitboard inside a container with a non-zero height.
|
|
28
26
|
|
|
29
27
|
```tsx
|
|
30
|
-
import { Hellixitboard } from "@
|
|
31
|
-
import "@
|
|
28
|
+
import { Hellixitboard } from "@hellixit/hellixitboard";
|
|
29
|
+
import "@hellixit/hellixitboard/index.css";
|
|
32
30
|
|
|
33
31
|
export default function App() {
|
|
34
32
|
return (
|
|
@@ -49,8 +47,8 @@ Hellixitboard should be rendered on the client. In SSR frameworks such as Next.j
|
|
|
49
47
|
// app/components/HellixitboardClient.tsx
|
|
50
48
|
"use client";
|
|
51
49
|
|
|
52
|
-
import { Hellixitboard } from "@
|
|
53
|
-
import "@
|
|
50
|
+
import { Hellixitboard } from "@hellixit/hellixitboard";
|
|
51
|
+
import "@hellixit/hellixitboard/index.css";
|
|
54
52
|
|
|
55
53
|
export default function HellixitboardClient() {
|
|
56
54
|
return (
|
|
@@ -75,11 +73,6 @@ export default function Page() {
|
|
|
75
73
|
}
|
|
76
74
|
```
|
|
77
75
|
|
|
78
|
-
See the local examples for complete setups:
|
|
79
|
-
|
|
80
|
-
- [examples/with-nextjs](https://github.com/hellixitboard/hellixitboard/tree/master/examples/with-nextjs)
|
|
81
|
-
- [examples/with-script-in-browser](https://github.com/hellixitboard/hellixitboard/tree/master/examples/with-script-in-browser)
|
|
82
|
-
|
|
83
76
|
## LLM / agent tips
|
|
84
77
|
|
|
85
78
|
If an LLM or coding agent is setting up Hellixitboard, these shortcuts usually save more time than re-prompting:
|
|
@@ -87,37 +80,14 @@ If an LLM or coding agent is setting up Hellixitboard, these shortcuts usually s
|
|
|
87
80
|
- Start with a plain `<Hellixitboard />` in a `100vh` container. Add refs, `initialData`, persistence, or custom UI only after the base embed works.
|
|
88
81
|
- If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures.
|
|
89
82
|
- In Next.js or other SSR frameworks, assume client-only rendering first. Use `"use client"` and `dynamic(..., { ssr: false })` before debugging hydration or `window is not defined` errors.
|
|
90
|
-
- If imports or entrypoints are unclear, inspect `node_modules/@
|
|
83
|
+
- If imports or entrypoints are unclear, inspect `node_modules/@hellixit/hellixitboard/package.json`. The installed package exports are the source of truth.
|
|
91
84
|
- Do not set `window.HELLIXITBOARD_ASSET_PATH` unless you are intentionally self-hosting fonts/assets.
|
|
92
|
-
- When docs and generated code drift, copy the nearest working example from this repo, especially `examples/with-nextjs` or `examples/with-script-in-browser`.
|
|
93
|
-
|
|
94
|
-
## Migrating to `@excalidraw/hellixitboard@0.18.x`
|
|
95
|
-
|
|
96
|
-
Version `0.18.x` removes the old `types/`-prefixed deep import paths. If you were importing types from `@excalidraw/hellixitboard/types/...`, switch to the new type-only subpaths below.
|
|
97
|
-
|
|
98
|
-
| Old path | New path |
|
|
99
|
-
| --- | --- |
|
|
100
|
-
| `@excalidraw/hellixitboard/types/data/transform.js` | `@excalidraw/hellixitboard/element/transform` |
|
|
101
|
-
| `@excalidraw/hellixitboard/types/data/types.js` | `@excalidraw/hellixitboard/data/types` |
|
|
102
|
-
| `@excalidraw/hellixitboard/types/element/types.js` | `@excalidraw/hellixitboard/element/types` |
|
|
103
|
-
| `@excalidraw/hellixitboard/types/utility-types.js` | `@excalidraw/hellixitboard/common/utility-types` |
|
|
104
|
-
| `@excalidraw/hellixitboard/types/types.js` | `@excalidraw/hellixitboard/types` |
|
|
105
|
-
|
|
106
|
-
Drop the `.js` extension. The new package `exports` map resolves these paths without it.
|
|
107
|
-
|
|
108
|
-
These deep subpaths are for `import type` only. Runtime imports should come from the package root, plus `@excalidraw/hellixitboard/index.css` for styles.
|
|
109
|
-
|
|
110
|
-
For example:
|
|
111
|
-
|
|
112
|
-
```ts
|
|
113
|
-
import { exportToSvg } from "@excalidraw/hellixitboard";
|
|
114
|
-
```
|
|
115
85
|
|
|
116
86
|
## Self-hosting fonts
|
|
117
87
|
|
|
118
|
-
By default, Hellixitboard downloads the fonts it needs from the
|
|
88
|
+
By default, Hellixitboard downloads the fonts it needs from the CDN.
|
|
119
89
|
|
|
120
|
-
For self-hosting, copy the contents of `node_modules/@
|
|
90
|
+
For self-hosting, copy the contents of `node_modules/@hellixit/hellixitboard/dist/prod/fonts` into the path where your app serves static assets, for example `public/`. Then set `window.HELLIXITBOARD_ASSET_PATH` to that same path:
|
|
121
91
|
|
|
122
92
|
```html
|
|
123
93
|
<script>
|
|
@@ -127,16 +97,4 @@ For self-hosting, copy the contents of `node_modules/@excalidraw/hellixitboard/d
|
|
|
127
97
|
|
|
128
98
|
## Demo
|
|
129
99
|
|
|
130
|
-
Try the [
|
|
131
|
-
|
|
132
|
-
## Integration
|
|
133
|
-
|
|
134
|
-
Read the [integration docs](https://docs.excalidraw.com/docs/@excalidraw/hellixitboard/integration).
|
|
135
|
-
|
|
136
|
-
## API
|
|
137
|
-
|
|
138
|
-
Read the [API docs](https://docs.excalidraw.com/docs/@excalidraw/hellixitboard/api).
|
|
139
|
-
|
|
140
|
-
## Contributing
|
|
141
|
-
|
|
142
|
-
Read the [contributing docs](https://docs.excalidraw.com/docs/@excalidraw/hellixitboard/contributing).
|
|
100
|
+
Try the live demo at [board.hellixit.cloud](https://board.hellixit.cloud).
|