use-chisel 0.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/README.md +42 -0
- package/dist/index.d.ts +44 -0
- package/dist/index.js +1701 -0
- package/package.json +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
# use-chisel
|
|
2
|
+
|
|
3
|
+
Dev-only visual editing layer for Next.js apps.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install use-chisel
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Use
|
|
12
|
+
|
|
13
|
+
Mount `Chisel` in your app layout during development:
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Chisel } from "use-chisel"
|
|
17
|
+
|
|
18
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
19
|
+
return (
|
|
20
|
+
<html lang="en">
|
|
21
|
+
<body>
|
|
22
|
+
{children}
|
|
23
|
+
{process.env.NODE_ENV === "development" ? <Chisel /> : null}
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Add `EditableRegion` when you want copied prompts to include stable source hints:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { EditableRegion } from "use-chisel"
|
|
34
|
+
|
|
35
|
+
<EditableRegion id="homepage.hero.title">Launch faster</EditableRegion>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Publish
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm publish --workspace use-chisel --access public
|
|
42
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export type ChiselProps = {
|
|
3
|
+
enabled?: boolean;
|
|
4
|
+
position?: "left" | "right";
|
|
5
|
+
projectName?: string;
|
|
6
|
+
};
|
|
7
|
+
export type DOMRectJSON = {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
top: number;
|
|
13
|
+
right: number;
|
|
14
|
+
bottom: number;
|
|
15
|
+
left: number;
|
|
16
|
+
};
|
|
17
|
+
export type EditIntent = {
|
|
18
|
+
route: string;
|
|
19
|
+
viewport: {
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
};
|
|
23
|
+
element: {
|
|
24
|
+
tagName: string;
|
|
25
|
+
selector: string;
|
|
26
|
+
ancestry: string[];
|
|
27
|
+
boundingRect: DOMRectJSON;
|
|
28
|
+
textBefore?: string;
|
|
29
|
+
textAfter?: string;
|
|
30
|
+
sourceHint?: string;
|
|
31
|
+
};
|
|
32
|
+
changes: Array<{
|
|
33
|
+
property: string;
|
|
34
|
+
before: string | number | null;
|
|
35
|
+
after: string | number;
|
|
36
|
+
}>;
|
|
37
|
+
};
|
|
38
|
+
type EditableRegionProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
39
|
+
id: string;
|
|
40
|
+
as?: keyof JSX.IntrinsicElements;
|
|
41
|
+
};
|
|
42
|
+
export declare function EditableRegion({ id, as, children, ...props }: EditableRegionProps): React.JSX.Element;
|
|
43
|
+
export declare function Chisel({ enabled, position, projectName }: ChiselProps): React.JSX.Element | null;
|
|
44
|
+
export {};
|