Remove next imports

front/apps/web/next.config.js

@@ -50,11 +50,8 @@ const nextConfig = {
 			...config.resolve,
 			alias: {
 				...config.resolve.alias,
-				"react-native$": "react-native-web",
-				"react-native/Libraries/Image/AssetRegistry$":
-					"react-native-web/dist/modules/AssetRegistry",
 			},
-			extensions: [".web.ts", ".web.tsx", ".web.js", ".web.jsx", ...config.resolve.extensions],
+			extensions: [..config.resolve.extensions],
 		};
 
 		if (!config.plugins) config.plugins = [];

front/apps/web/package.json

@@ -10,6 +10,7 @@
 		"build": "vite build",
 		"start": "vite preview"
 	},
+	"type": "module",
 	"dependencies": {
 		"@gorhom/portal": "^1.0.14",
 		"@kyoo/models": "workspace:^",
@@ -54,6 +55,7 @@
 		"@types/react": "18.2.48",
 		"@types/react-dom": "18.2.18",
 		"react-native": "0.73.2",
-		"typescript": "^5.3.3"
+		"typescript": "^5.3.3",
+		"vite-plugin-react-native-web": "^1.0.2"
 	}
 }

front/apps/web/src/pages/+config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "vike/types";
-import logoUrl from "~/public/icon.svg";
+import logoUrl from "../../public/icon.svg";
 import vikeReact from "vike-react/config";
 import vikeReactQuery from "vike-react-query/config";
 

front/apps/web/src/pages/index/+Page.tsx

@@ -0,0 +1,3 @@
+import { HomePage } from "@kyoo/ui";
+
+export default HomePage;

front/apps/web/vite.config.ts

@@ -1,7 +1,17 @@
 import react from "@vitejs/plugin-react";
+import reactNativeWeb from "vite-plugin-react-native-web";
 import vike from "vike/plugin";
 import type { UserConfig } from "vite";
+import path from "node:path";
 
 export default {
-	plugins: [react(), vike()],
+	server: {
+		host: "0.0.0.0",
+	},
+	resolve: {
+		alias: {
+			"~": path.resolve(__dirname, "./src"),
+		},
+	},
+	plugins: [react(), vike(), reactNativeWeb()],
 } satisfies UserConfig;

front/packages/primitives/src/image/image.web.tsx

@@ -18,14 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import NextImage from "next/image";
 import { useState } from "react";
 import { type ImageStyle, View, type ViewStyle } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { imageBorderRadius } from "../constants";
+import type { Props, ImageLayout } from "./base-image";
-import { Skeleton } from "../skeleton";
-import type { ImageLayout, Props } from "./base-image";
 import { BlurhashContainer } from "./blurhash.web";
+import { Skeleton } from "../skeleton";
+import { imageBorderRadius } from "../constants";
 
 export const Image = ({
 	src,
@@ -54,21 +53,17 @@ export const Image = ({
 
 	return (
 		<BlurhashContainer blurhash={src.blurhash} {...css([layout, border], props)}>
-			<NextImage
+			<img
 				src={src[quality ?? "high"]}
-				priority={quality === "high"}
+				// fetchpriority={quality === "high" ? "high" : "low"}
 				alt={alt!}
-				fill={true}
 				style={{
 					objectFit: "cover",
 					opacity: state === "loading" ? 0 : 1,
 					transition: "opacity .2s ease-out",
 				}}
-				// Don't use next's server to reprocess images, they are already optimized by kyoo.
-				unoptimized={true}
 				onLoad={() => setState("finished")}
 				onError={() => setState("errored")}
-				suppressHydrationWarning
 			/>
 		</BlurhashContainer>
 	);

front/packages/primitives/src/image/sprite.web.tsx

@@ -18,8 +18,6 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import NextImage from "next/image";
-
 export const Sprite = ({
 	src,
 	alt,
@@ -37,12 +35,9 @@ export const Sprite = ({
 	y: number;
 }) => {
 	return (
-		<NextImage
+		<img
 			src={src}
-			priority={false}
 			alt={alt!}
-			// Don't use next's server to reprocess images, they are already optimized by kyoo.
-			unoptimized={true}
 			style={{
 				objectFit: "none",
 				objectPosition: `${-x}px ${-y}px`,

front/packages/primitives/src/menu.web.tsx

@@ -20,20 +20,14 @@
 
 import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import Link from "next/link";
+import { type ComponentProps, type ComponentType, forwardRef, type ReactElement, type ReactNode } from "react";
-import {
-	type ComponentProps,
-	type ComponentType,
-	type ReactElement,
-	type ReactNode,
-	forwardRef,
-} from "react";
 import type { PressableProps } from "react-native";
 import type { SvgProps } from "react-native-svg";
 import { useYoshiki as useNativeYoshiki } from "yoshiki/native";
 import { useYoshiki } from "yoshiki/web";
 import { Icon } from "./icons";
 import { P } from "./text";
+import { Link } from "./links";
 import { ContrastArea, SwitchVariant } from "./themes";
 import { focusReset, ts } from "./utils";
 

front/packages/primitives/src/utils/head.web.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import NextHead from "next/head";
+
 
 export const Head = ({
 	title,
@@ -29,11 +29,13 @@ export const Head = ({
 	description?: string | null;
 	image?: string | null;
 }) => {
-	return (
+	return <> </>
-		<NextHead>
+	// TODO: implement this
-			{title && <title>{`${title} - Kyoo`}</title>}
+	// return (
-			{description && <meta name="description" content={description} />}
+	// 	<NextHead>
-			{image && <meta property="og:image" content={image} />}
+	// 		{title && <title>{`${title} - Kyoo`}</title>}
-		</NextHead>
+	// 		{description && <meta name="description" content={description} />}
-	);
+	// 		{image && <meta property="og:image" content={image} />}
+	// 	</NextHead>
+	// );
 };

front/yarn.lock

@@ -7770,6 +7770,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flow-remove-types@npm:^2.233.0":
+  version: 2.236.0
+  resolution: "flow-remove-types@npm:2.236.0"
+  dependencies:
+    hermes-parser: 0.21.0
+    pirates: ^3.0.2
+    vlq: ^0.2.1
+  bin:
+    flow-node: flow-node
+    flow-remove-types: flow-remove-types
+  checksum: d1012205b8effde9483a6fddf154c9b36c42ba9219d6643b486b7fcf10ddc57d05f2a821478b5e12fc82786638e3527d28127321b0d54639acf42235bd1c3acb
+  languageName: node
+  linkType: hard
+
 "fontfaceobserver@npm:^2.1.0":
   version: 2.3.0
   resolution: "fontfaceobserver@npm:2.3.0"
@@ -8189,6 +8203,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hermes-estree@npm:0.21.0":
+  version: 0.21.0
+  resolution: "hermes-estree@npm:0.21.0"
+  checksum: b1654b8de21a102c36ef4a5a80f9956b04fc6e26fb16edb09ccb3ca4e2fbc3b794daaadb1696891e2b6192d4f2a581a1c5d1bf0c977a712ec6540505326d208c
+  languageName: node
+  linkType: hard
+
 "hermes-parser@npm:0.15.0":
   version: 0.15.0
   resolution: "hermes-parser@npm:0.15.0"
@@ -8207,6 +8228,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hermes-parser@npm:0.21.0":
+  version: 0.21.0
+  resolution: "hermes-parser@npm:0.21.0"
+  dependencies:
+    hermes-estree: 0.21.0
+  checksum: 2e2ae7ebd446dc765d353323e1ff073d7fc96fcd90a8396dbfc0d13299d4c81293ccc72778bb4c6f1a6dc3751b2b778480a238f03419ccd9a8f364e5a58235ed
+  languageName: node
+  linkType: hard
+
 "hermes-profile-transformer@npm:^0.0.6":
   version: 0.0.6
   resolution: "hermes-profile-transformer@npm:0.0.6"
@@ -10150,6 +10180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-modules-regexp@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "node-modules-regexp@npm:1.0.0"
+  checksum: 99541903536c5ce552786f0fca7f06b88df595e62e423c21fa86a1674ee2363dad1f7482d1bec20b4bd9fa5f262f88e6e5cb788fc56411113f2fe2e97783a3a7
+  languageName: node
+  linkType: hard
+
 "node-releases@npm:^2.0.14":
   version: 2.0.14
   resolution: "node-releases@npm:2.0.14"
@@ -10605,6 +10642,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pirates@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "pirates@npm:3.0.2"
+  dependencies:
+    node-modules-regexp: ^1.0.0
+  checksum: 73bc9d8a1859c0854740541d1afd0c87b62d3d63fdaec38c3ac7f57d9d70b9f6f325f5ffcac11b8935c8d9249ead41c9c59632ed098b225a96219274ca6248c8
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.1, pirates@npm:^4.0.6":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
@@ -13039,6 +13085,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-react-native-web@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "vite-plugin-react-native-web@npm:1.0.2"
+  dependencies:
+    flow-remove-types: ^2.233.0
+  checksum: 8e97b65152c1a1fdc9e5453fb3b24509ce4d194c6f9aab4f7abfaef283ed46eb3303e34c416cb628e219555739ccd20f7115419c17fa2760ff7f80eeaede23e2
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.2.11":
   version: 5.2.11
   resolution: "vite@npm:5.2.11"
@@ -13079,6 +13134,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vlq@npm:^0.2.1":
+  version: 0.2.3
+  resolution: "vlq@npm:0.2.3"
+  checksum: 2231d8caeb5b2c1a438677ab029e9a94aa6fb61ab05819c72691b792aea0456dab29576aff5ae29309ee45bad0a309e832dc45173119bca1393f3b87709d8f8d
+  languageName: node
+  linkType: hard
+
 "vlq@npm:^1.0.0":
   version: 1.0.1
   resolution: "vlq@npm:1.0.1"
@@ -13182,6 +13244,7 @@ __metadata:
     vike-react: ^0.4.8
     vike-react-query: ^0.0.5
     vite: ^5.2.11
+    vite-plugin-react-native-web: ^1.0.2
     yoshiki: 1.2.14
     zod: ^3.22.4
   languageName: unknown