#3 fixed eslint for one shopify app

apps/sfy-eu-blocks-app/app/package.json

@@ -49,7 +49,7 @@
 		"vite-tsconfig-paths": "^5.0.1"
 	},
 	"devDependencies": {
-		"@blgc/config": "^0.0.20",
+		"@blgc/config": "^0.0.21",
 		"@shopify/api-codegen-preset": "^1.1.1",
 		"@types/node": "^22.5.0",
 		"@types/react": "^18.3.4",

apps/sfy-eu-blocks-app/app/shopify.app.toml

@@ -4,7 +4,7 @@ client_id = "a7314ae84139f89d0289de296fb9e19a"
 extension_directories = [ ]
 name = "eu-blocks"
 handle = "eu-blocks"
-application_url = "https://favorite-study-florence-number.trycloudflare.com"
+application_url = "https://adjusted-suggesting-lcd-archive.trycloudflare.com"
 embedded = true
 
 [build]
@@ -18,9 +18,9 @@ scopes = "write_products"
 
 [auth]
 redirect_urls = [
-  "https://favorite-study-florence-number.trycloudflare.com/auth/callback",
-  "https://favorite-study-florence-number.trycloudflare.com/auth/shopify/callback",
-  "https://favorite-study-florence-number.trycloudflare.com/api/auth/callback"
+  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/auth/callback",
+  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/auth/shopify/callback",
+  "https://adjusted-suggesting-lcd-archive.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

apps/sfy-eu-blocks-app/app/src/entry.server.tsx

@@ -13,38 +13,52 @@ export default async function handleRequest(
 	responseStatusCode: number,
 	responseHeaders: Headers,
 	remixContext: EntryContext
-) {
+): Promise<Response> {
 	addDocumentResponseHeaders(request, responseHeaders);
-	const userAgent = request.headers.get('user-agent');
-	const callbackName = isbot(userAgent ?? '') ? 'onAllReady' : 'onShellReady';
+
+	const userAgent = request.headers.get('user-agent') ?? '';
+	const callbackName = isbot(userAgent) ? 'onAllReady' : 'onShellReady';
 
 	return new Promise((resolve, reject) => {
+		let finalResponseStatusCode = responseStatusCode;
+
+		const renderOptions: TRenderOptions = {
+			[callbackName]: () => {
+				const body = new PassThrough();
+				const stream = createReadableStreamFromReadable(body);
+
+				responseHeaders.set('Content-Type', 'text/html');
+
+				resolve(
+					new Response(stream, {
+						headers: responseHeaders,
+						status: finalResponseStatusCode
+					})
+				);
+
+				pipe(body);
+			},
+			onShellError: (error) => {
+				reject(error as Error);
+			},
+			onError: (error) => {
+				finalResponseStatusCode = 500;
+				console.error(error);
+			}
+		};
+
 		const { pipe, abort } = renderToPipeableStream(
 			<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
-			{
-				[callbackName]: () => {
-					const body = new PassThrough();
-					const stream = createReadableStreamFromReadable(body);
-
-					responseHeaders.set('Content-Type', 'text/html');
-					resolve(
-						new Response(stream, {
-							headers: responseHeaders,
-							status: responseStatusCode
-						})
-					);
-					pipe(body);
-				},
-				onShellError(error) {
-					reject(error);
-				},
-				onError(error) {
-					responseStatusCode = 500;
-					console.error(error);
-				}
-			}
+			renderOptions
 		);
 
 		setTimeout(abort, ABORT_DELAY);
 	});
 }
+
+interface TRenderOptions {
+	onShellReady?: () => void;
+	onAllReady?: () => void;
+	onShellError: (error: unknown) => void;
+	onError: (error: unknown) => void;
+}

apps/sfy-eu-blocks-app/app/src/environment/config/app.config.ts

@@ -1,5 +1,6 @@
 export const appConfig = {
 	name: 'eu-blocks',
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- No guarantee that NODE_ENV is set
 	environment: process.env.NODE_ENV ?? 'local',
 	packageVersion: process.env.npm_package_version
 };

apps/sfy-eu-blocks-app/app/src/environment/config/index.ts

@@ -1,2 +1,3 @@
 export * from './api-core.config';
 export * from './app.config';
+export * from './shopify.config';

apps/sfy-eu-blocks-app/app/src/environment/config/shopify.config.ts

@@ -0,0 +1,18 @@
+import { assertValue } from '@blgc/utils';
+
+export const shopifyConfig = {
+	apiKey: assertValue(
+		process.env.SHOPIFY_API_KEY,
+		'Environment variable "SHOPIFY_API_KEY" not set!'
+	),
+	apiSecret: assertValue(
+		process.env.SHOPIFY_API_SECRET,
+		'Environment variable "SHOPIFY_API_SECRET" not set!'
+	),
+	appUrl: assertValue(
+		process.env.SHOPIFY_APP_URL,
+		'Environment variable "SHOPIFY_APP_URL" not set!'
+	),
+	scopes: typeof process.env.SCOPES === 'string' ? process.env.SCOPES.split(',') : [],
+	shopCustomDomain: process.env.SHOP_CUSTOM_DOMAIN
+};

apps/sfy-eu-blocks-app/app/src/root.tsx

@@ -1,8 +1,9 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import React from 'react';
 
-export default function App() {
+export const Root: React.FC = () => {
 	return (
-		<html>
+		<html lang="en">
 			<head>
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -18,4 +19,6 @@ export default function App() {
 			</body>
 		</html>
 	);
-}
+};
+
+export default Root;

apps/sfy-eu-blocks-app/app/src/routes/_index/route.tsx

@@ -1,10 +1,11 @@
-import { json, redirect, type LoaderFunctionArgs } from '@remix-run/node';
+import { json, redirect } from '@remix-run/node';
 import { Form, useLoaderData } from '@remix-run/react';
 
 import { login } from '../../shopify.server';
+import { type TJsonLoaderFunction } from '../../types';
 import styles from './styles.module.css';
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader: TJsonLoaderFunction<{ showForm: boolean }> = async ({ request }) => {
 	const url = new URL(request.url);
 
 	if (url.searchParams.get('shop')) {
@@ -14,7 +15,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	return json({ showForm: Boolean(login) });
 };
 
-export default function App() {
+const Page: React.FC = () => {
 	const { showForm } = useLoaderData<typeof loader>();
 
 	return (
@@ -53,4 +54,6 @@ export default function App() {
 			</div>
 		</div>
 	);
-}
+};
+
+export default Page;