doc: add remix example

kaoDev · Aug 5, 2022 · 41da85c · 41da85c
1 parent cf156ab
commit 41da85c
Show file tree

Hide file tree

Showing 17 changed files with 7,415 additions and 0 deletions.
diff --git a/example-remix/.eslintrc b/example-remix/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
+}
diff --git a/example-remix/.gitignore b/example-remix/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/example-remix/README.md b/example-remix/README.md
@@ -0,0 +1,53 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```
diff --git a/example-remix/app/entry.client.tsx b/example-remix/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from '@remix-run/react';
+import { hydrateRoot } from 'react-dom/client';
+
+hydrateRoot(document, <RemixBrowser />);
diff --git a/example-remix/app/entry.server.tsx b/example-remix/app/entry.server.tsx
@@ -0,0 +1,32 @@
+import type { EntryContext } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import { renderToString } from 'react-dom/server';
+import { IconsCache, SpriteContextProvider } from 'react-lazy-svg';
+import { renderSpriteSheetToString } from 'react-lazy-svg/dist/ssr';
+import { readSvg } from './serverLoadSvg';
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const sessionIcons: IconsCache = new Map();
+
+  remixContext.appState;
+
+  const markup = renderToString(
+    <SpriteContextProvider loadSVG={readSvg} knownIcons={sessionIcons}>
+      <RemixServer context={remixContext} url={request.url} />
+    </SpriteContextProvider>,
+  );
+
+  const extendedMarkup = await renderSpriteSheetToString(markup, sessionIcons);
+
+  responseHeaders.set('Content-Type', 'text/html');
+
+  return new Response('<!DOCTYPE html>' + extendedMarkup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/example-remix/app/icons/icon1.svg b/example-remix/app/icons/icon1.svg
diff --git a/example-remix/app/icons/icon2.svg b/example-remix/app/icons/icon2.svg
diff --git a/example-remix/app/root.tsx b/example-remix/app/root.tsx
@@ -0,0 +1,45 @@
+import type { MetaFunction } from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import { initOnClient, SpriteContextProvider } from 'react-lazy-svg';
+
+export const meta: MetaFunction = () => ({
+  charset: 'utf-8',
+  title: 'New Remix App',
+  viewport: 'width=device-width,initial-scale=1',
+});
+
+const isClient = typeof window !== 'undefined';
+
+if (isClient) {
+  initOnClient();
+}
+
+const loadSVG = async (url: string) => {
+  return await (await fetch(url)).text();
+};
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <SpriteContextProvider embeddedSSR loadSVG={loadSVG}>
+          <Outlet />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </SpriteContextProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/example-remix/app/routes/index.tsx b/example-remix/app/routes/index.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Links } from '@remix-run/react';
+import { Icon } from 'react-lazy-svg';
+import icon1 from '../icons/icon1.svg';
+import icon2 from '../icons/icon2.svg';
+
+import stylesheetUrl from '../styles.css';
+
+export function links() {
+  return [{ rel: 'stylesheet', href: stylesheetUrl }];
+}
+
+export default function Index() {
+  const [showInitial, setShowInitial] = useState(true);
+
+  return (
+    <div className="Home">
+      <div className="Home-header">
+        <h1>🦥 react-lazy-svg</h1>
+        <p>
+          The icon is loaded on the {showInitial ? 'server' : 'client'}. Size
+          and color is set via css.
+        </p>
+        {showInitial ? (
+          <>
+            <Icon url={icon1} className="icon"></Icon>
+            <Icon url={icon1} className="icon red"></Icon>
+            <Icon url={icon1} className="icon blue large"></Icon>
+          </>
+        ) : (
+          <>
+            <Icon url={icon2} className="icon"></Icon>
+            <Icon url={icon2} className="icon red"></Icon>
+            <Icon url={icon2} className="icon blue large"></Icon>
+          </>
+        )}
+        <button onClick={() => setShowInitial(!showInitial)}>
+          toggle icon
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/example-remix/app/serverLoadSvg.ts b/example-remix/app/serverLoadSvg.ts
@@ -0,0 +1,29 @@
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
+
+const svgIconFiles = new Map<string, string>();
+const readFile = promisify(fs.readFile);
+const baseUrl = '/build/_assets';
+
+export const readSvg = async (url: string) => {
+  if (svgIconFiles.has(url)) {
+    return svgIconFiles.get(url);
+  }
+
+  if (url.startsWith(baseUrl)) {
+    const filePath = path.join(
+      __dirname,
+      '..',
+      'public',
+      'build',
+      '_assets',
+      url.substring(baseUrl.length),
+    );
+    const fileContents = await readFile(filePath, 'utf8');
+    svgIconFiles.set(url, fileContents);
+    return fileContents;
+  }
+
+  return undefined;
+};
diff --git a/example-remix/app/styles.css b/example-remix/app/styles.css
@@ -0,0 +1,22 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+}
+
+.icon.red {
+  fill: #a71013;
+}
+.icon.blue {
+  fill: #0514b2;
+}
+.icon.large {
+  width: 48px;
+  height: 48px;
+}
diff --git a/example-remix/package.json b/example-remix/package.json
@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@remix-run/node": "^1.6.3",
+    "@remix-run/react": "^1.6.3",
+    "@remix-run/serve": "^1.6.3",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "react-lazy-svg": "link:../"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.6.3",
+    "@remix-run/eslint-config": "^1.6.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.19.0",
+    "typescript": "^4.7.4"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}
diff --git a/example-remix/public/favicon.ico b/example-remix/public/favicon.ico
diff --git a/example-remix/remix.config.js b/example-remix/remix.config.js
@@ -0,0 +1,8 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+};
diff --git a/example-remix/remix.env.d.ts b/example-remix/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/example-remix/tsconfig.json b/example-remix/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/dev" />
		/// <reference types="@remix-run/node/globals" />