Skip to content

Commit 3c6c0d3

Browse files
tristanlee85tristanlee85
committed
Server render text direction based on Optimizely decision
1 parent 5faf4e1 commit 3c6c0d3

File tree

9 files changed

+155
-293
lines changed

9 files changed

+155
-293
lines changed

‎examples/v7-optimizely-edge/edge-functions/main.js

+26-177
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,51 @@
1+
import '../lib/polyfills';
12
import {
23
createInstance,
34
eventDispatcher,
45
} from '@optimizely/optimizely-sdk/dist/optimizely.lite.min.js';
56
import optimizelyDatafile from '../lib/optimizely/datafile.json';
7+
import { v4 } from 'uuid';
68

79
const CLIENT_ENGINE = 'EDGIO_EF';
810
const COOKIE_NAME = 'optimizely_visitor_id';
911

10-
/**
11-
* An example edge function which forwards the request to the origin.
12-
* See routes.js for how this function is configured to run for requests to "/".
13-
*/
14-
1512
export async function handleHttpRequest(request, context) {
16-
// Fetch user Id from the cookie if available so a returning user from same browser session always sees the same variation.
1713
const userId =
1814
request.headers
1915
.get('Cookie')
2016
?.split(';')
2117
.find((cookie) => cookie.trim().startsWith(`${COOKIE_NAME}=`))
22-
?.split('=')[1] || `user-${new Date().getTime()}`;
23-
24-
console.log(JSON.stringify(context, null, 2));
25-
const url = new URL('/', request.url);
26-
const resp = await fetch(url, {
27-
edgio: {
28-
origin: 'edgio_self',
29-
},
30-
});
31-
32-
// handle the response as needed
33-
// For example, to inject some html into the body:
34-
const html = await resp.text();
18+
?.split('=')[1] || v4();
3519

3620
// Create Optimizely instance using datafile downloaded at build time.
37-
// const instance = createInstance({
38-
// datafile: optimizelyDatafile,
39-
// clientEngine: CLIENT_ENGINE,
40-
// eventDispatcher,
41-
// });
42-
43-
// // Return the original HTML if the instance is not created.
44-
// if (!instance) {
45-
// return resp;
46-
// }
47-
48-
// await instance.onReady();
49-
50-
// // Create Optimizely User Context
51-
// const userContext = instance.createUserContext(userId.toString());
52-
53-
// // Decide variation for the flag.
54-
// const decision = userContext.decide('foo_flag');
55-
56-
// console.log(`[OPTIMIZELY] userId: ${userId}`);
57-
// console.log(
58-
// `[OPTIMIZELY] flag 'foo_flag' is ${
59-
// decision.enabled ? 'enabled' : 'disabled'
60-
// } for the user ${userId}`
61-
// );
62-
63-
// To send the response to the client with the new HTML but the same headers as the origin response:
64-
return new Response(html, {
65-
...resp,
66-
headers: {
67-
...resp.headers,
68-
'x-edge-function': 'main.js',
69-
},
21+
const instance = createInstance({
22+
datafile: optimizelyDatafile,
23+
clientEngine: CLIENT_ENGINE,
24+
eventDispatcher,
7025
});
71-
}
72-
73-
// Check if setTimeout is already available (in case of running in an environment that has it)
74-
75-
let timers = new Map();
76-
let nextTimerId = 1;
7726

78-
(function () {
79-
var timerQueue = [];
80-
var nextTimerId = 0;
81-
82-
function runTimers() {
83-
var now = Date.now();
84-
var nextCheck = null;
85-
86-
// Run due timers
87-
for (var i = 0; i < timerQueue.length; i++) {
88-
var timer = timerQueue[i];
89-
if (timer.time <= now) {
90-
timer.callback.apply(null, timer.args);
91-
if (timer.repeating) {
92-
timer.time = now + timer.delay; // schedule next run
93-
nextCheck =
94-
nextCheck !== null ? Math.min(nextCheck, timer.time) : timer.time;
95-
} else {
96-
timerQueue.splice(i--, 1); // remove non-repeating timer
97-
}
98-
} else {
99-
nextCheck =
100-
nextCheck !== null ? Math.min(nextCheck, timer.time) : timer.time;
101-
}
102-
}
103-
104-
// Schedule next check
105-
if (nextCheck !== null) {
106-
var delay = Math.max(nextCheck - Date.now(), 0);
107-
setTimeout(runTimers, delay);
108-
}
27+
// Return the original HTML if the instance is not created.
28+
if (!instance) {
29+
return Response.error('Optimizely instance unavailable.');
10930
}
11031

111-
global.setTimeout = function (callback, delay, ...args) {
112-
var timerId = ++nextTimerId;
113-
var timer = {
114-
id: timerId,
115-
callback: callback,
116-
time: Date.now() + delay,
117-
args: args,
118-
repeating: false,
119-
delay: delay,
120-
};
121-
timerQueue.push(timer);
122-
return timerId;
123-
};
124-
125-
global.clearTimeout = function (timerId) {
126-
for (var i = 0; i < timerQueue.length; i++) {
127-
if (timerQueue[i].id === timerId) {
128-
timerQueue.splice(i, 1);
129-
break;
130-
}
131-
}
132-
};
133-
134-
global.queueMicrotask = function (callback) {
135-
Promise.resolve()
136-
.then(callback)
137-
.catch((err) =>
138-
setTimeout(() => {
139-
throw err;
140-
})
141-
);
142-
};
143-
144-
setTimeout(runTimers, 0);
145-
})();
146-
147-
//@ts-ignore
148-
149-
// export async function middleware(req: NextRequest, ev: NextFetchEvent) {
150-
// // Fetch user Id from the cookie if available so a returning user from same browser session always sees the same variation.
151-
// const userId = req.cookies.get(COOKIE_NAME)?.value || crypto.randomUUID()
152-
153-
// // Create Optimizely instance using datafile downloaded at build time.
154-
// const instance = createInstance({
155-
// datafile: optimizelyDatafile,
156-
// clientEngine: VERCEL_EDGE_CLIENT_ENGINE,
157-
// eventDispatcher: {
158-
// dispatchEvent: ({ url, params }: { url: string; params: any }) => {
159-
// // Tell edge function to wait for this promise to fullfill.
160-
// ev.waitUntil(
161-
// fetch(url, {
162-
// method: 'POST',
163-
// body: JSON.stringify(params),
164-
// })
165-
// )
166-
// },
167-
// },
168-
// })
169-
170-
// // Create Optimizely User Context
171-
// const userContext = instance!.createUserContext(userId.toString())
32+
await instance.onReady();
17233

173-
// // Decide variation for the flag.
174-
// const decision = userContext!.decide('product_sort')
34+
const userContext = instance.createUserContext(userId.toString());
35+
const decision = userContext.decide('text_direction');
36+
const textDir = decision['enabled'] ? 'rtl' : 'ltr';
17537

176-
// // Fetch datafile revision for debugging.
177-
// const revision = instance!.getOptimizelyConfig()!.revision
38+
console.log(
39+
`[OPTIMIZELY] User ID: ${userId}, Text Direction: ${textDir}, Decision: ${decision}`
40+
);
17841

179-
// console.log(`[OPTIMIZELY] Datafile Revision: ${revision}`)
180-
// console.log(`[OPTIMIZELY] userId: ${userId}`)
181-
// console.log(
182-
// `[OPTIMIZELY] flag 'product_sort' is ${
183-
// decision.enabled ? 'enabled' : 'disabled'
184-
// } for the user ${userId}`
185-
// )
186-
// console.log(
187-
// `[OPTIMIZELY] User ${userId} was bucketed in to variation ${decision.variationKey}`
188-
// )
189-
// console.log(`[OPTIMIZELY] sort_method is ${decision.variables.sort_method}`)
190-
191-
// // Rewriting the path based on sort_method. The default is Alphabetical.
192-
// req.nextUrl.pathname =
193-
// decision.variables.sort_method === 'popular_first' ? '/popular' : '/'
194-
// let res = NextResponse.rewrite(req.nextUrl)
195-
196-
// if (!req.cookies.has(COOKIE_NAME)) {
197-
// // Saving userId in the cookie so that the decision sticks for subsequent visits.
198-
// res.cookies.set(COOKIE_NAME, userId)
199-
// }
42+
const url = new URL('/', request.url);
43+
url.searchParams.set('dir', textDir);
44+
const resp = await fetch(url, {
45+
edgio: {
46+
origin: 'edgio_self',
47+
},
48+
});
20049

201-
// return res
202-
// }
50+
return resp;
51+
}

‎examples/v7-optimizely-edge/lib/optimizely/datafile.json

+1-86
Original file line numberDiff line numberDiff line change
@@ -1,86 +1 @@
1-
{
2-
"accountId": "29260950578",
3-
"projectId": "29260950578",
4-
"revision": "3",
5-
"attributes": [],
6-
"audiences": [
7-
{
8-
"id": "$opt_dummy_audience",
9-
"name": "Optimizely-Generated Audience for Backwards Compatibility",
10-
"conditions": "[\"or\", {\"match\": \"exact\", \"name\": \"$opt_dummy_attribute\", \"type\": \"custom_attribute\", \"value\": \"$opt_dummy_value\"}]"
11-
}
12-
],
13-
"version": "4",
14-
"events": [],
15-
"integrations": [],
16-
"anonymizeIP": true,
17-
"botFiltering": false,
18-
"typedAudiences": [],
19-
"variables": [],
20-
"environmentKey": "development",
21-
"sdkKey": "2imW2dz6yoT3fzLKWFDmz",
22-
"featureFlags": [
23-
{
24-
"id": "179247",
25-
"key": "foo_flag",
26-
"rolloutId": "rollout-179247-29212200416",
27-
"experimentIds": ["9300000938906"],
28-
"variables": []
29-
}
30-
],
31-
"rollouts": [
32-
{
33-
"id": "rollout-179247-29212200416",
34-
"experiments": [
35-
{
36-
"id": "default-rollout-179247-29212200416",
37-
"key": "default-rollout-179247-29212200416",
38-
"status": "Running",
39-
"layerId": "rollout-179247-29212200416",
40-
"variations": [
41-
{
42-
"id": "587019",
43-
"key": "off",
44-
"featureEnabled": false,
45-
"variables": []
46-
}
47-
],
48-
"trafficAllocation": [{ "entityId": "587019", "endOfRange": 10000 }],
49-
"forcedVariations": {},
50-
"audienceIds": [],
51-
"audienceConditions": []
52-
}
53-
]
54-
}
55-
],
56-
"experiments": [
57-
{
58-
"id": "9300000938906",
59-
"key": "rule_one",
60-
"status": "Running",
61-
"layerId": "9300000712842",
62-
"variations": [
63-
{
64-
"id": "587020",
65-
"key": "on",
66-
"featureEnabled": true,
67-
"variables": []
68-
},
69-
{
70-
"id": "587019",
71-
"key": "off",
72-
"featureEnabled": false,
73-
"variables": []
74-
}
75-
],
76-
"trafficAllocation": [
77-
{ "entityId": "587019", "endOfRange": 2500 },
78-
{ "entityId": "587020", "endOfRange": 5000 }
79-
],
80-
"forcedVariations": {},
81-
"audienceIds": [],
82-
"audienceConditions": []
83-
}
84-
],
85-
"groups": []
86-
}
1+
{"accountId":"29260950578","projectId":"29260950578","revision":"7","attributes":[],"audiences":[{"id":"$opt_dummy_audience","name":"Optimizely-Generated Audience for Backwards Compatibility","conditions":"[\"or\", {\"match\": \"exact\", \"name\": \"$opt_dummy_attribute\", \"type\": \"custom_attribute\", \"value\": \"$opt_dummy_value\"}]"}],"version":"4","events":[],"integrations":[],"anonymizeIP":true,"botFiltering":false,"typedAudiences":[],"variables":[],"environmentKey":"development","sdkKey":"2imW2dz6yoT3fzLKWFDmz","featureFlags":[{"id":"179326","key":"text_direction","rolloutId":"rollout-179326-29212200416","experimentIds":["9300000941392"],"variables":[]}],"rollouts":[{"id":"rollout-179326-29212200416","experiments":[{"id":"default-rollout-179326-29212200416","key":"default-rollout-179326-29212200416","status":"Running","layerId":"rollout-179326-29212200416","variations":[{"id":"587821","key":"off","featureEnabled":false,"variables":[]}],"trafficAllocation":[{"entityId":"587821","endOfRange":10000}],"forcedVariations":{},"audienceIds":[],"audienceConditions":[]}]}],"experiments":[{"id":"9300000941392","key":"text_direction","status":"Running","layerId":"9300000714177","variations":[{"id":"587821","key":"off","featureEnabled":false,"variables":[]},{"id":"587822","key":"on","featureEnabled":true,"variables":[]}],"trafficAllocation":[{"entityId":"587821","endOfRange":5000},{"entityId":"587822","endOfRange":10000}],"forcedVariations":{},"audienceIds":[],"audienceConditions":[]}],"groups":[]}

‎examples/v7-optimizely-edge/lib/polyfills/crypto.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import CryptoJS from 'crypto-js';
2+
import getRandomValues from 'polyfill-crypto.getrandomvalues';
3+
4+
global.crypto = {
5+
...CryptoJS,
6+
getRandomValues,
7+
};

‎examples/v7-optimizely-edge/lib/polyfills/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './timer';
2+
import './crypto';

0 commit comments

Comments
 (0)