@valbuild/core 0.13.0 → 0.13.1
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 +25 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,14 +54,15 @@ Val is built on top of TypeScript and Git, letting you use types, branches, vers
|
|
|
54
54
|
|
|
55
55
|
## Installation
|
|
56
56
|
|
|
57
|
-
- Make sure you have TypeScript 4.9+, Next
|
|
57
|
+
- Make sure you have TypeScript 4.9+, Next 12+ (other meta frameworks will come), React 18+ (other frontend frameworks will come)
|
|
58
|
+
- **NOTE**: THIS GUIDE is using the Next `/pages` directory NOT the new `/app` directory!
|
|
58
59
|
- Install the packages:
|
|
59
60
|
|
|
60
61
|
```sh
|
|
61
62
|
npm install @valbuild/core @valbuild/react @valbuild/server
|
|
62
63
|
```
|
|
63
64
|
|
|
64
|
-
- Create your val.config.ts file:
|
|
65
|
+
- Create your val.config.ts file. NOTE: this file should be in the same directory as `tsconfig.json`:
|
|
65
66
|
|
|
66
67
|
```ts
|
|
67
68
|
// ./val.config.ts
|
|
@@ -83,7 +84,6 @@ export { s, val };
|
|
|
83
84
|
///...
|
|
84
85
|
"strict": true,
|
|
85
86
|
///...
|
|
86
|
-
"jsx": "react-jsx",
|
|
87
87
|
"jsxImportSource": "@valbuild/react"
|
|
88
88
|
//...
|
|
89
89
|
}
|
|
@@ -94,7 +94,7 @@ export { s, val };
|
|
|
94
94
|
- Enable contextual editing: setup Val endpoints
|
|
95
95
|
|
|
96
96
|
```ts
|
|
97
|
-
// ./pages/api/val/[...val].ts
|
|
97
|
+
// ./src/pages/api/val/[...val].ts
|
|
98
98
|
|
|
99
99
|
import { createRequestListener } from "@valbuild/server";
|
|
100
100
|
import { NextApiHandler } from "next";
|
|
@@ -113,32 +113,23 @@ export const config = {
|
|
|
113
113
|
};
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
- Enable contextual editing: Use the Val provider in
|
|
116
|
+
- Enable contextual editing: Use the Val provider in the \_app file:
|
|
117
117
|
|
|
118
118
|
```tsx
|
|
119
|
-
// ./
|
|
119
|
+
// ./src/pages/_app.tsx
|
|
120
120
|
|
|
121
121
|
import { ValProvider } from "@valbuild/react";
|
|
122
|
-
import "
|
|
122
|
+
import type { AppProps } from "next/app";
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
children,
|
|
126
|
-
}: {
|
|
127
|
-
children: React.ReactNode;
|
|
128
|
-
}) {
|
|
124
|
+
function MyApp({ Component, pageProps }: AppProps) {
|
|
129
125
|
return (
|
|
130
|
-
<
|
|
131
|
-
{
|
|
132
|
-
|
|
133
|
-
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
|
|
134
|
-
*/}
|
|
135
|
-
<head />
|
|
136
|
-
<body>
|
|
137
|
-
<ValProvider host="/api/val">{children}</ValProvider>
|
|
138
|
-
</body>
|
|
139
|
-
</html>
|
|
126
|
+
<ValProvider host="/api/val">
|
|
127
|
+
<Component {...pageProps} />
|
|
128
|
+
</ValProvider>
|
|
140
129
|
);
|
|
141
130
|
}
|
|
131
|
+
|
|
132
|
+
export default MyApp;
|
|
142
133
|
```
|
|
143
134
|
|
|
144
135
|
## Getting started
|
|
@@ -150,12 +141,12 @@ Content defined in Val is always defined `.val.{ts|js}` files.
|
|
|
150
141
|
They must export a default `val.content` where the first argument equals the path of the file relative to the `val.config.{js|ts}` file.
|
|
151
142
|
|
|
152
143
|
```ts
|
|
153
|
-
// ./
|
|
144
|
+
// ./src/content/example/blogs.val.ts
|
|
154
145
|
|
|
155
|
-
import { s, val } from "
|
|
146
|
+
import { s, val } from "../../../val.config";
|
|
156
147
|
|
|
157
148
|
export default val.content(
|
|
158
|
-
"/
|
|
149
|
+
"/src/content/example/blogs", // <- NOTE: this must be the same path as the file
|
|
159
150
|
s.array(s.object({ title: s.string(), text: s.string() })),
|
|
160
151
|
[
|
|
161
152
|
{
|
|
@@ -173,30 +164,27 @@ export default val.content(
|
|
|
173
164
|
### Use your content
|
|
174
165
|
|
|
175
166
|
```tsx
|
|
176
|
-
// /
|
|
167
|
+
// ./src/pages/example/index.tsx
|
|
177
168
|
|
|
178
169
|
import { NextPage } from "next";
|
|
179
170
|
import { useVal } from "@valbuild/react";
|
|
180
|
-
import blogsVal from "
|
|
181
|
-
import { val } from "val.config";
|
|
171
|
+
import blogsVal from "@/content/example/blogs.val";
|
|
182
172
|
|
|
183
|
-
const
|
|
184
|
-
const
|
|
173
|
+
const Blog: NextPage = () => {
|
|
174
|
+
const blog = useVal(blogsVal[0]);
|
|
185
175
|
return (
|
|
186
176
|
<main>
|
|
187
177
|
<article>
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
</section>
|
|
193
|
-
))}
|
|
178
|
+
<section>
|
|
179
|
+
<h1>{blog.title}</h1>
|
|
180
|
+
<p>{blog.text}</p>
|
|
181
|
+
</section>
|
|
194
182
|
</article>
|
|
195
183
|
</main>
|
|
196
184
|
);
|
|
197
185
|
};
|
|
198
186
|
|
|
199
|
-
export default
|
|
187
|
+
export default Blog;
|
|
200
188
|
```
|
|
201
189
|
|
|
202
190
|
## Concepts
|