Skip to content

Commit f3e4041

Browse files
spastorellispastorelli
authored
Adapt OpenAPI code samples to prefill API key using visitor data (#3666)
1 parent 8e99871 commit f3e4041

File tree

13 files changed

+667
-102
lines changed

13 files changed

+667
-102
lines changed

‎.changeset/dry-pens-behave.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@gitbook/react-openapi": patch
3+
"gitbook": patch
4+
---
5+
6+
Adapt OpenAPI code samples to prefill API key using visitor data

‎packages/gitbook/src/components/DocumentView/CodeBlock/PlainCodeBlock.tsx‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import type { DocumentBlockCode, JSONDocument } from '@gitbook/api';
1+
import type { JSONDocument } from '@gitbook/api';
22
import { useId } from 'react';
33

44
import { CodeBlock } from './CodeBlock';
5+
import { convertCodeStringToBlock } from './utils';
56

67
/**
78
* Plain code block with syntax highlighting.
@@ -11,31 +12,7 @@ export function PlainCodeBlock(props: { code: string; syntax: string }) {
1112
const { code, syntax } = props;
1213
const id = useId();
1314

14-
const block: DocumentBlockCode = {
15-
key: id,
16-
object: 'block',
17-
type: 'code',
18-
data: {
19-
syntax,
20-
},
21-
nodes: code.split('\n').map((line) => ({
22-
object: 'block',
23-
type: 'code-line',
24-
data: {},
25-
nodes: [
26-
{
27-
object: 'text',
28-
leaves: [
29-
{
30-
object: 'leaf',
31-
text: line,
32-
marks: [],
33-
},
34-
],
35-
},
36-
],
37-
})),
38-
};
15+
const block = convertCodeStringToBlock({ key: id, code, syntax });
3916

4017
const document: JSONDocument = {
4118
object: 'document',

‎packages/gitbook/src/components/DocumentView/CodeBlock/utils.test.ts‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import { describe, expect, it } from 'bun:test';
2+
import { convertCodeStringToBlock } from './utils';
3+
4+
describe('convertCodeStringToBlock', () => {
5+
it('converts plain code string without placeholders', () => {
6+
const result = convertCodeStringToBlock({
7+
key: 'test1',
8+
code: 'console.log("hello");',
9+
syntax: 'javascript',
10+
});
11+
12+
expect(result).toEqual({
13+
key: 'test1',
14+
object: 'block',
15+
type: 'code',
16+
data: { syntax: 'javascript' },
17+
nodes: [
18+
{
19+
object: 'block',
20+
type: 'code-line',
21+
data: {},
22+
nodes: [
23+
{
24+
object: 'text',
25+
leaves: [{ object: 'leaf', text: 'console.log("hello");', marks: [] }],
26+
},
27+
],
28+
},
29+
],
30+
});
31+
});
32+
33+
it('converts a single placeholder into an expression node', () => {
34+
const result = convertCodeStringToBlock({
35+
key: 'test2',
36+
code: 'const config = { API_KEY: "$$__X-GITBOOK-PREFILL[visitor.claims.apiKey ?? "YOUR_API_KEY"]__$$" }',
37+
syntax: 'javascript',
38+
});
39+
40+
expect(result).toEqual({
41+
key: 'test2',
42+
object: 'block',
43+
type: 'code',
44+
data: { syntax: 'javascript' },
45+
nodes: [
46+
{
47+
object: 'block',
48+
type: 'code-line',
49+
data: {},
50+
nodes: [
51+
{
52+
object: 'text',
53+
leaves: [
54+
{ object: 'leaf', text: 'const config = { API_KEY: "', marks: [] },
55+
],
56+
},
57+
{
58+
object: 'inline',
59+
type: 'expression',
60+
data: { expression: 'visitor.claims.apiKey ?? "YOUR_API_KEY"' },
61+
isVoid: true,
62+
},
63+
{
64+
object: 'text',
65+
leaves: [{ object: 'leaf', text: '" }', marks: [] }],
66+
},
67+
],
68+
},
69+
],
70+
});
71+
});
72+
73+
it('handles multiple placeholders in one line', () => {
74+
const result = convertCodeStringToBlock({
75+
key: 'test3',
76+
code: 'let a = $$__X-GITBOOK-PREFILL[valA]__$$, b = $$__X-GITBOOK-PREFILL[valB]__$$;',
77+
syntax: 'javascript',
78+
});
79+
80+
expect(result).toEqual({
81+
key: 'test3',
82+
object: 'block',
83+
type: 'code',
84+
data: { syntax: 'javascript' },
85+
nodes: [
86+
{
87+
object: 'block',
88+
type: 'code-line',
89+
data: {},
90+
nodes: [
91+
{
92+
object: 'text',
93+
leaves: [{ object: 'leaf', text: 'let a = ', marks: [] }],
94+
},
95+
{
96+
object: 'inline',
97+
type: 'expression',
98+
data: { expression: 'valA' },
99+
isVoid: true,
100+
},
101+
{
102+
object: 'text',
103+
leaves: [{ object: 'leaf', text: ', b = ', marks: [] }],
104+
},
105+
{
106+
object: 'inline',
107+
type: 'expression',
108+
data: { expression: 'valB' },
109+
isVoid: true,
110+
},
111+
{
112+
object: 'text',
113+
leaves: [{ object: 'leaf', text: ';', marks: [] }],
114+
},
115+
],
116+
},
117+
],
118+
});
119+
});
120+
121+
it('handles multiple placeholders across different lines', () => {
122+
const result = convertCodeStringToBlock({
123+
key: 'test4',
124+
code: [
125+
'const name = "$$__X-GITBOOK-PREFILL[visitor.claims.userName]__$$";',
126+
'const age = $$__X-GITBOOK-PREFILL[visitor.claims.userAge]__$$;',
127+
'console.log(name, age);',
128+
].join('\n'),
129+
syntax: 'javascript',
130+
});
131+
132+
expect(result).toEqual({
133+
key: 'test4',
134+
object: 'block',
135+
type: 'code',
136+
data: { syntax: 'javascript' },
137+
nodes: [
138+
{
139+
object: 'block',
140+
type: 'code-line',
141+
data: {},
142+
nodes: [
143+
{
144+
object: 'text',
145+
leaves: [{ object: 'leaf', text: 'const name = "', marks: [] }],
146+
},
147+
{
148+
object: 'inline',
149+
type: 'expression',
150+
data: { expression: 'visitor.claims.userName' },
151+
isVoid: true,
152+
},
153+
{
154+
object: 'text',
155+
leaves: [{ object: 'leaf', text: '";', marks: [] }],
156+
},
157+
],
158+
},
159+
{
160+
object: 'block',
161+
type: 'code-line',
162+
data: {},
163+
nodes: [
164+
{
165+
object: 'text',
166+
leaves: [{ object: 'leaf', text: 'const age = ', marks: [] }],
167+
},
168+
{
169+
object: 'inline',
170+
type: 'expression',
171+
data: { expression: 'visitor.claims.userAge' },
172+
isVoid: true,
173+
},
174+
{
175+
object: 'text',
176+
leaves: [{ object: 'leaf', text: ';', marks: [] }],
177+
},
178+
],
179+
},
180+
{
181+
object: 'block',
182+
type: 'code-line',
183+
data: {},
184+
nodes: [
185+
{
186+
object: 'text',
187+
leaves: [
188+
{ object: 'leaf', text: 'console.log(name, age);', marks: [] },
189+
],
190+
},
191+
],
192+
},
193+
],
194+
});
195+
});
196+
197+
it('returns an empty code block for empty string', () => {
198+
const result = convertCodeStringToBlock({
199+
key: 'test5',
200+
code: '',
201+
syntax: 'javascript',
202+
});
203+
204+
expect(result).toEqual({
205+
key: 'test5',
206+
object: 'block',
207+
type: 'code',
208+
data: { syntax: 'javascript' },
209+
nodes: [
210+
{
211+
object: 'block',
212+
type: 'code-line',
213+
data: {},
214+
nodes: [],
215+
},
216+
],
217+
});
218+
});
219+
});

‎packages/gitbook/src/components/DocumentView/CodeBlock/utils.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import type { DocumentBlockCode, DocumentBlockCodeLine } from '@gitbook/api';
2+
3+
const PREFILL_WITH_EXPR_REGEX = /\$\$__X-GITBOOK-PREFILL\[(.+?)\]__\$\$/g;
4+
5+
/**
6+
* Convert a raw code string into a `DocumentBlockCode` object representation.
7+
*
8+
* Any placeholder of the form `$$__X-GITBOOK-PREFILL[<expression>]__$$` inside the code
9+
* string is transformed into a DocumentInlineExpression node with its `data.expression` set to the
10+
* extracted `<expression>`.
11+
*/
12+
export function convertCodeStringToBlock(args: {
13+
key: string;
14+
code: string;
15+
syntax: string;
16+
}): DocumentBlockCode {
17+
const { key, code, syntax } = args;
18+
const lines = code.split('\n').map<DocumentBlockCodeLine>((line) => {
19+
const nodes: DocumentBlockCodeLine['nodes'] = [];
20+
let lastIndex = 0;
21+
22+
for (const match of line.matchAll(PREFILL_WITH_EXPR_REGEX)) {
23+
const [placeholder, expression] = match;
24+
const start = match.index ?? 0;
25+
26+
if (start > lastIndex) {
27+
nodes.push({
28+
object: 'text',
29+
leaves: [{ object: 'leaf', text: line.slice(lastIndex, start), marks: [] }],
30+
});
31+
}
32+
33+
if (expression) {
34+
nodes.push({
35+
object: 'inline',
36+
type: 'expression',
37+
data: { expression },
38+
isVoid: true,
39+
});
40+
}
41+
42+
lastIndex = start + placeholder.length;
43+
}
44+
45+
if (lastIndex < line.length) {
46+
nodes.push({
47+
object: 'text',
48+
leaves: [{ object: 'leaf', text: line.slice(lastIndex), marks: [] }],
49+
});
50+
}
51+
52+
return {
53+
object: 'block',
54+
type: 'code-line',
55+
data: {},
56+
nodes,
57+
};
58+
});
59+
60+
return {
61+
key,
62+
object: 'block',
63+
type: 'code',
64+
data: { syntax },
65+
nodes: lines,
66+
};
67+
}

‎packages/gitbook/src/lib/visitors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,7 @@ export function serveVisitorClaimsDataRequest(request: NextRequest, siteRequestU
454454
});
455455

456456
if (!visitorToken && !Object.keys(unsignedClaims).length) {
457-
return NextResponse.json({});
457+
return NextResponse.json({ visitor: { claims: { unsigned: {} } } });
458458
}
459459

460460
const visitorClaims = {

0 commit comments

Comments
 (0)