@valbuild/next 0.69.3 → 0.72.1

package/README.md

@@ -40,7 +40,9 @@
 
 # 🐉 HERE BE DRAGONS 🐉
 
-This version of Val is currently an alpha version - the API can be considered relatively stable, but expect some features to be broken and the UX to be changing.
+Val is currently in beta - the API can be considered relatively stable, but expect some features to be broken and the UX to be changing.
+
+Join us on [discord](https://discord.gg/cZzqPvaX8k) to get help or give us feedback.
 
 ## Table of contents
 
@@ -60,11 +62,17 @@ This version of Val is currently an alpha version - the API can be considered re
 
 ## Installation
 
-- Make sure you have TypeScript 5+, Next 14+, React 18.20.+
-- Install the packages (@valbuild/eslint-plugin is recommended but not required):
+- Make sure your project is using
+- Install the packages:
 
 ```sh
-npm install @valbuild/core@latest @valbuild/next@latest @valbuild/eslint-plugin@latest
+npm install @valbuild/core@latest @valbuild/next@latest
+```
+
+- Optionally, but recommend add the eslint-plugin package:
+
+```sh
+npm install -D  @valbuild/eslint-plugin@latest
 ```
 
 - Run the init script:
@@ -73,6 +81,14 @@ npm install @valbuild/core@latest @valbuild/next@latest @valbuild/eslint-plugin@
 npx @valbuild/init@latest
 ```
 
+If you do not wish to use the init script, or having issues with it, checkout the [manual configuration guide](./MANUAL_CONFIGURATION.md).
+
+## Additional setup
+
+- If you have a monorepo, or have a project where the project is located in a subdirectory relative to the github repository see the [monorepos](#monorepos) section
+- See [formatting published content](#formatting-published-content) if you use prettier (or similar) Val to do it as well.
+- If you want editors to update content in production, read up on how to setup [remote mode](#remote-mode).
+
 ## Getting started
 
 ### Create your first Val content file
@@ -179,8 +195,8 @@ Once your project is set up in [app.val.build](https://app.val.build), configure
 
 ### Environment Variables
 
-- **`VAL_API_KEY`**: Obtain this from your project's configuration page.
-- **`VAL_SECRET`**: Generate a random secret to secure communication between the UX client and your Next.js application.
+- **`VAL_API_KEY`**: This is the API key used to authenticate server side API requests. You can find it under Settings in your project on [app.val.build](https://app.val.build).
+- **`VAL_SECRET`**: In addition to the VAL_API_KEY, you need to generate a random secret to secure communication between the UX client and your Next.js application. You can use any random string for this, but if you have openssl installed you can run the following command: `openssl rand -hex 16`
 
 ### `val.config` Properties
 
@@ -189,6 +205,7 @@ Set these properties in the `val.config` file:
 - **`project`**: The fully qualified name of your project, formatted as `<team>/<name>`.
 - **`gitBranch`**: The Git branch your application uses. For Vercel, use `VERCEL_GIT_COMMIT_REF`.
 - **`gitCommit`**: The current Git commit your application is running on. For Vercel, use `VERCEL_GIT_COMMIT_SHA`.
+- **`root`**: Optional. The path to the `val.config` file. Typically empty or undefined. If the project folder is under `web`, root would be: `/web`.
 
 ### Example `val.config.ts`
 
@@ -197,6 +214,7 @@ import { initVal } from "@valbuild/next";
 
 const { s, c, val, config } = initVal({
   project: "myteam/myproject",
+  //root: "/subdir", // only required for monorepos. Use the path where val.config is located. The path should start with /
   gitBranch: process.env.VERCEL_GIT_COMMIT_REF,
   gitCommit: process.env.VERCEL_GIT_COMMIT_SHA,
 });
@@ -205,6 +223,71 @@ export type { t } from "@valbuild/next";
 export { s, c, val, config };
 ```
 
+# Formatting published content
+
+If you are using `prettier` or another code formatting tool, it is recommended to setup formatting of code after changes have been applied.
+
+## Setting up formatting using Prettier
+
+- Install `prettier` as **RUNTIME** dependency, by moving the `prettier` dependency from `devDependencies` to `dependencies`. The reason you need to do this, is that Val will be using it at runtime in production, and it has to be part of your build for this to work.
+- Optionally create a `.prettierrc.json` file unless you have one already. We recommend doing this, so that you can be sure that formatting is applied consistently in both your development environment and by Val. You can set this to be an empty object, if you are want to keep using `prettier`s defaults:
+
+  ```json
+  {}
+  ```
+
+- Add a formatter to the `/val/val.server`:
+
+  ```ts
+  formatter: (code: string, filePath: string) => {
+    return prettier.format(code, {
+      filepath: filePath,
+      ...prettierOptions, // <- use the same rules as in development
+    } as prettier.Options);
+  },
+  ```
+
+  Unless you have any modifications in your `val.server` file, the complete file should now look like this:
+
+  ```ts
+  import "server-only";
+  import { initValServer } from "@valbuild/next/server";
+  import { config } from "../val.config";
+  import { draftMode } from "next/headers";
+  import valModules from "../val.modules";
+  import prettier from "prettier";
+  import prettierOptions from "../.prettierrc.json";
+
+  const { valNextAppRouter } = initValServer(
+    valModules,
+    { ...config },
+    {
+      draftMode,
+      formatter: (code: string, filePath: string) => {
+        return prettier.format(code, {
+          filepath: filePath,
+          ...prettierOptions, // <- use the same rules as in development
+        } as prettier.Options);
+      },
+    },
+  );
+
+  export { valNextAppRouter };
+  ```
+
+You should now be able to hit the save button locally and see prettier rules being applied.
+
+## Other formatters
+
+Val is formatter agnostic, so it is possible to use the same flow as the one described for `prettier` above to any formatter you might want to use.
+
+**NOTE**: this will be applied at runtime in production so you need make sure that the formatting dependencies are in the `dependencies` section of your `package.json`
+
+# Monorepos
+
+Val supports projects that are not under the root path in GitHub, and therefore monorepos.
+To configure your project for monorepos, you can use the `root` parameter described in the [config](#valconfig-properties) section.
+
 # Schema types
 
 ## String

package/package.json

@@ -8,7 +8,7 @@
     "next",
     "react"
   ],
-  "version": "0.69.3",
+  "version": "0.72.1",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -45,11 +45,11 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.69.3",
-    "@valbuild/react": "~0.69.3",
-    "@valbuild/server": "~0.69.3",
-    "@valbuild/shared": "~0.69.3",
-    "@valbuild/ui": "~0.69.3",
+    "@valbuild/core": "~0.72.1",
+    "@valbuild/react": "~0.72.1",
+    "@valbuild/server": "~0.72.1",
+    "@valbuild/shared": "~0.72.1",
+    "@valbuild/ui": "~0.72.1",
     "client-only": "^0.0.1",
     "server-only": "^0.0.1"
   },