Next 15 (#104)

Dockerfile

@@ -20,7 +20,7 @@ LABEL org.opencontainers.image.url="https://jspaste.eu" \
       org.opencontainers.image.documentation="https://docs.jspaste.eu" \
       org.opencontainers.image.licenses="EUPL-1.2"
 
-ENV HOSTNAME=127.0.0.1
+ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
 
 EXPOSE 3000

next.config.js

@@ -1,5 +1,3 @@
-import million from 'million/compiler';
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	output: process.env.NEXT_OUTPUT,
@@ -14,6 +12,11 @@ const nextConfig = {
 			}
 		]
 	},
+	bundlePagesRouterDependencies: true,
+	experimental: {
+		reactCompiler: true,
+		ppr: true
+	},
 	async redirects() {
 		return [
 			{
@@ -40,11 +43,4 @@ const nextConfig = {
 	}
 };
 
-let configExport = nextConfig;
-
-if (process.env.NODE_ENV === 'production') {
-	console.info('Loaded production config');
-	configExport = million.next(nextConfig);
-}
-
-export default configExport;
+export default nextConfig;

package.json

@@ -16,7 +16,7 @@
 		"lint:biome": "bun biome lint .",
 		"lint:tsc": "bun tsc --noEmit",
 		"start": "bun run build && bun next start",
-		"start:dev": "bun next dev"
+		"start:dev": "bun next dev --turbo"
 	},
 	"dependencies": {
 		"@chakra-ui/icons": "~2.1.1",
@@ -27,11 +27,11 @@
 		"@types/bun": "~1.1.3",
 		"@types/react": "~18.3.3",
 		"@types/react-dom": "~18.3.0",
+		"babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
 		"highlight.js": "~11.9.0",
-		"million": "~3.1.6",
-		"next": "~14.2.3",
-		"react": "~18.3.1",
-		"react-dom": "~18.3.1",
+		"next": "rc",
+		"react": "rc",
+		"react-dom": "rc",
 		"react-icons": "~5.2.1",
 		"typescript": "~5.4.5",
 		"zustand": "~4.5.2"

src/components/general/Editor.tsx

@@ -2,6 +2,9 @@ import useLanguage from '@/hooks/useLanguage';
 import useTheme from '@/hooks/useTheme';
 import useThemeValues from '@/hooks/useThemeValues';
 import useLanguageStore from '@/store/language';
+import amoledTheme from '@/themes/monaco/amoled.json';
+import defaultTheme from '@/themes/monaco/default.json';
+import midnightTheme from '@/themes/monaco/midnight.json';
 import type { EditorProps } from '@/types/Components.ts';
 import type { Theme } from '@/types/Theme.ts';
 import { Box, Spinner, useBreakpointValue } from '@chakra-ui/react';
@@ -51,13 +54,14 @@ const Editor = ({ setInformation, setValue, documentId, isEditing, enableEdit }:
 
 			const { monacoTheme, isCustomMonacoTheme } = themes.find((t) => t.id === themeId) ?? (themes[0] as Theme);
 
+			// FIXME
 			if (isCustomMonacoTheme) {
-				const themeData = await import(`@/themes/monaco/${monacoTheme}.json`);
-
-				editorMonaco?.editor.defineTheme(monacoTheme, themeData.default);
+				if (monacoTheme === 'default') editorMonaco.editor.defineTheme(monacoTheme, defaultTheme);
+				if (monacoTheme === 'amoled') editorMonaco.editor.defineTheme(monacoTheme, amoledTheme);
+				if (monacoTheme === 'midnight') editorMonaco.editor.defineTheme(monacoTheme, midnightTheme);
 			}
 
-			editorMonaco?.editor.setTheme(monacoTheme);
+			editorMonaco.editor.setTheme(monacoTheme);
 		},
 		[monaco, themeId, themes]
 	);

src/types/Components.ts

@@ -1,7 +1,7 @@
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from 'react';
 
 type ActionButtonProps = {
-	icon: ReactElement;
+	icon: ReactElement<any>;
 	label: string;
 	onClick?: () => void;
 	isDisabled?: boolean;
@@ -26,8 +26,8 @@ type EditorProps = {
 };
 
 type InformationLabelProps = {
-	label: ReactElement | string;
-	icon?: ReactElement;
+	label: ReactElement<any> | string;
+	icon?: ReactElement<any>;
 	isSelectable?: boolean;
 	onClick?: () => void;
 
@@ -58,7 +58,7 @@ type SelectModalProps = {
 };
 
 type SettingPopoverProps = {
-	trigger: ReactElement;
+	trigger: ReactElement<any>;
 };
 
 type DocumentScreenProps = {
@@ -68,7 +68,7 @@ type DocumentScreenProps = {
 type Language = {
 	id: string | undefined;
 	name: string;
-	icon?: ReactElement;
+	icon?: ReactElement<any>;
 	extension?: string;
 };