Update my hook.ts to 415 sveltekit #6065

bitdom8 · 2022-08-19T09:00:30Z

bitdom8
Aug 19, 2022

Hi loved sveltekit but just one update broke all my structure of [lang]. There is no info regarding resolve etc. How can we rewrite the code below?

import * as cookie from 'cookie';

import type { Handle } from '@sveltejs/kit';
import { customAlphabet } from 'nanoid';
import { detectLocale } from './i18n/i18n-util'
import { initAcceptLanguageHeaderDetector } from 'typesafe-i18n/detectors'
import { searchlanguage } from '$src/stores/api';

const htmlLanguageAttributeReplacer = (locale: string) =>
	({ html }) => html.replace('%lang%', `${locale}>`)

export const handle: Handle = async ({ event, resolve }) => {
	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
	const jwt = cookies.jwt && Buffer.from(cookies.jwt, 'base64').toString();
	const jwt = b => JSON.parse(Buffer.from(b.split('.')[1], 'base64').toString('binary'));

	event.locals.user = jwt ? jwt : null;
	console.log(9999, cookies.jwt?.split("iss")[0])

	const nanoid = customAlphabet('1234567890', 10);
	console.log(nanoid(), pond.getFiles());
	event.locals.userid = cookies.userid || nanoid();

	if (event.url.pathname.startsWith('/')) {
		return new Response('custom response');
	  }
	console.log(JSON.stringify(event), "alla", event.params.lang)

	const response = await resolve(event);
	const [, lang] = event.url.pathname.split('/')

	searchlanguage.set(lang);

	const response = await resolve(event, {
		transformPageChunk: htmlLanguageAttributeReplacer(lang)
	});
	  event.url = new URL("çsdf")

	if (!cookies.userid) {
		// if this is the first time the user has visited this app,
		// set a cookie so that we recognise them when they return
		response.headers.set(
			'set-cookie',
			cookie.serialize('userid', event.locals.userid, {
				path: '/',
				httpOnly: true
			})
		);
	}

	return response
	.toString().replace(`<html class="Flow2">`, `<html class="Flow2" lang="en">`);
};



export const getSession: GetSession = (event) => {
/** @type {import('@sveltejs/kit').GetSession} */
export function getSession(event) {
	export const getSession = (event) => {
	detect the preferred language the user has configured in his browser
	https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language
	const headers = getHeaders(event)
	const acceptLanguageDetector = initAcceptLanguageHeaderDetector({ headers })
	const locale = detectLocale(acceptLanguageDetector)

	console.log(999, locale)

	return {
		locale,
		user: {
			name: event.locals.user?.split("name")[0],
			email: event.locals.user?.split("email")[0]
		}
	}
}

const getHeaders = (event) => {
	const headers: Record<string, string> = {}
	event.request.headers.forEach((value, key) => headers[key] = value)

	return headers
}

david-plugge · 2022-08-19T09:09:18Z

david-plugge
Aug 19, 2022

The logic in your getSession hook should now be moved into /src/routes/+layout.server.ts.

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, request }) => {
	const locale = somehowGetTheLocale(request);

	return {
		locale
	};
};

now you can access it like this:

<script>
	import { page } from '$app/stores';
	
	$: console.log($page.data.locale);
</script>

0 replies

bitdom8 · 2022-08-19T13:44:13Z

bitdom8
Aug 19, 2022
Author

Hi it helped a little to understand. But the code is immense. Can you help more?

8 replies

bitdom8 Aug 20, 2022
Author

An error 👍
Cannot read properties of undefined (reading 'locale')

bitdom8 Aug 20, 2022
Author

Took our hooks from here https://github.com/sveltekit-i18n/lib/blob/master/examples/locale-router/src/hooks.js#L31-L35. Thanks @david-plugge . But I think all is broken now @jarda-svoboda

david-plugge Aug 20, 2022

Can you create a minimal reproduction?

bitdom8 Aug 20, 2022
Author

After starting from minimal production, noticed that immigration has been completed without giving errors. But in fact, migration was not fine.

Thanks @david-plugge, you are remarkable. When I start from beginning, it works. Need to copy all of the files and codes.

Wanna work with you. Do you have a open position?

Also will miss 405 svelte bc it was more versatile with less files:(

david-plugge Aug 20, 2022

Glad you solved it!

I´m pretty sure once the new api design is complete with its Actions implemented and more resources exist to learn from almost everybody will see the benefits about the changes :)

Uh oh!

Update my hook.ts to 415 sveltekit #6065

Uh oh!

Uh oh!

bitdom8 Aug 19, 2022

Replies: 2 comments · 8 replies

Uh oh!

Uh oh!

david-plugge Aug 19, 2022

Uh oh!

bitdom8 Aug 19, 2022 Author

Uh oh!

bitdom8 Aug 20, 2022 Author

Uh oh!

bitdom8 Aug 20, 2022 Author

Uh oh!

david-plugge Aug 20, 2022

Uh oh!

Uh oh!

bitdom8 Aug 20, 2022 Author

Uh oh!

david-plugge Aug 20, 2022

bitdom8
Aug 19, 2022

Replies: 2 comments 8 replies

david-plugge
Aug 19, 2022

bitdom8
Aug 19, 2022
Author

bitdom8 Aug 20, 2022
Author

bitdom8 Aug 20, 2022
Author

bitdom8 Aug 20, 2022
Author