From edeccb02343dfa819b9976eb678cc89726f10e92 Mon Sep 17 00:00:00 2001 From: Matt Hernandez Date: Mon, 8 Jul 2024 13:11:04 -0500 Subject: [PATCH 1/3] Add vite + remix app to playground to demo ES Module bug --- playground/remix-vite/.eslintrc.cjs | 84 ++++++++++++++ playground/remix-vite/.gitignore | 5 + playground/remix-vite/README.md | 40 +++++++ playground/remix-vite/app/entry.client.tsx | 18 +++ playground/remix-vite/app/entry.server.tsx | 122 ++++++++++++++++++++ playground/remix-vite/app/root.tsx | 37 ++++++ playground/remix-vite/app/routes/_index.tsx | 45 ++++++++ playground/remix-vite/app/tailwind.css | 3 + playground/remix-vite/package.json | 44 +++++++ playground/remix-vite/postcss.config.js | 6 + playground/remix-vite/public/favicon.ico | Bin 0 -> 16958 bytes playground/remix-vite/tailwind.config.ts | 7 ++ playground/remix-vite/tsconfig.json | 32 +++++ playground/remix-vite/vite.config.ts | 16 +++ 14 files changed, 459 insertions(+) create mode 100644 playground/remix-vite/.eslintrc.cjs create mode 100644 playground/remix-vite/.gitignore create mode 100644 playground/remix-vite/README.md create mode 100644 playground/remix-vite/app/entry.client.tsx create mode 100644 playground/remix-vite/app/entry.server.tsx create mode 100644 playground/remix-vite/app/root.tsx create mode 100644 playground/remix-vite/app/routes/_index.tsx create mode 100644 playground/remix-vite/app/tailwind.css create mode 100644 playground/remix-vite/package.json create mode 100644 playground/remix-vite/postcss.config.js create mode 100644 playground/remix-vite/public/favicon.ico create mode 100644 playground/remix-vite/tailwind.config.ts create mode 100644 playground/remix-vite/tsconfig.json create mode 100644 playground/remix-vite/vite.config.ts diff --git a/playground/remix-vite/.eslintrc.cjs b/playground/remix-vite/.eslintrc.cjs new file mode 100644 index 000000000..4f6f59eee --- /dev/null +++ b/playground/remix-vite/.eslintrc.cjs @@ -0,0 +1,84 @@ +/** + * This is intended to be a basic starting point for linting in your app. + * It relies on recommended configs out of the box for simplicity, but you can + * and should modify this configuration to best suit your team's needs. + */ + +/** @type {import('eslint').Linter.Config} */ +module.exports = { + root: true, + parserOptions: { + ecmaVersion: "latest", + sourceType: "module", + ecmaFeatures: { + jsx: true, + }, + }, + env: { + browser: true, + commonjs: true, + es6: true, + }, + ignorePatterns: ["!**/.server", "!**/.client"], + + // Base config + extends: ["eslint:recommended"], + + overrides: [ + // React + { + files: ["**/*.{js,jsx,ts,tsx}"], + plugins: ["react", "jsx-a11y"], + extends: [ + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "plugin:react-hooks/recommended", + "plugin:jsx-a11y/recommended", + ], + settings: { + react: { + version: "detect", + }, + formComponents: ["Form"], + linkComponents: [ + { name: "Link", linkAttribute: "to" }, + { name: "NavLink", linkAttribute: "to" }, + ], + "import/resolver": { + typescript: {}, + }, + }, + }, + + // Typescript + { + files: ["**/*.{ts,tsx}"], + plugins: ["@typescript-eslint", "import"], + parser: "@typescript-eslint/parser", + settings: { + "import/internal-regex": "^~/", + "import/resolver": { + node: { + extensions: [".ts", ".tsx"], + }, + typescript: { + alwaysTryTypes: true, + }, + }, + }, + extends: [ + "plugin:@typescript-eslint/recommended", + "plugin:import/recommended", + "plugin:import/typescript", + ], + }, + + // Node + { + files: [".eslintrc.cjs"], + env: { + node: true, + }, + }, + ], +}; diff --git a/playground/remix-vite/.gitignore b/playground/remix-vite/.gitignore new file mode 100644 index 000000000..80ec311f4 --- /dev/null +++ b/playground/remix-vite/.gitignore @@ -0,0 +1,5 @@ +node_modules + +/.cache +/build +.env diff --git a/playground/remix-vite/README.md b/playground/remix-vite/README.md new file mode 100644 index 000000000..6c4d2168f --- /dev/null +++ b/playground/remix-vite/README.md @@ -0,0 +1,40 @@ +# Welcome to Remix! + +- 📖 [Remix docs](https://remix.run/docs) + +## Development + +Run the dev server: + +```shellscript +npm run dev +``` + +## 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 `npm run build` + +- `build/server` +- `build/client` + +## Styling + +This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information. diff --git a/playground/remix-vite/app/entry.client.tsx b/playground/remix-vite/app/entry.client.tsx new file mode 100644 index 000000000..75c6e8c60 --- /dev/null +++ b/playground/remix-vite/app/entry.client.tsx @@ -0,0 +1,18 @@ +/** + * By default, Remix will handle hydrating your app on the client for you. + * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ + * For more information, see https://remix.run/file-conventions/entry.client + */ + +import { RemixBrowser } from '@remix-run/react' +import { startTransition, StrictMode } from 'react' +import { hydrateRoot } from 'react-dom/client' + +startTransition(() => { + hydrateRoot( + document, + + + + ) +}) diff --git a/playground/remix-vite/app/entry.server.tsx b/playground/remix-vite/app/entry.server.tsx new file mode 100644 index 000000000..56d6163cd --- /dev/null +++ b/playground/remix-vite/app/entry.server.tsx @@ -0,0 +1,122 @@ +/** + * By default, Remix will handle generating the HTTP Response for you. + * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ + * For more information, see https://remix.run/file-conventions/entry.server + */ + +import { PassThrough } from 'node:stream' + +import type { AppLoadContext, EntryContext } from '@remix-run/node' +import { createReadableStreamFromReadable } from '@remix-run/node' +import { RemixServer } from '@remix-run/react' +import { isbot } from 'isbot' +import { renderToPipeableStream } from 'react-dom/server' + +const ABORT_DELAY = 5_000 + +export default function handleRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext, + // This is ignored so we can keep it in the template for visibility. Feel + // free to delete this parameter in your app if you're not using it! + // eslint-disable-next-line @typescript-eslint/no-unused-vars + loadContext: AppLoadContext +) { + return isbot(request.headers.get('user-agent') || '') + ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext) + : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext) +} + +function handleBotRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext +) { + return new Promise((resolve, reject) => { + let shellRendered = false + const { pipe, abort } = renderToPipeableStream( + , + { + onAllReady() { + shellRendered = true + 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: unknown) { + reject(error) + }, + onError(error: unknown) { + responseStatusCode = 500 + // Log streaming rendering errors from inside the shell. Don't log + // errors encountered during initial shell rendering since they'll + // reject and get logged in handleDocumentRequest. + if (shellRendered) { + console.error(error) + } + }, + } + ) + + setTimeout(abort, ABORT_DELAY) + }) +} + +function handleBrowserRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext +) { + return new Promise((resolve, reject) => { + let shellRendered = false + const { pipe, abort } = renderToPipeableStream( + , + { + onShellReady() { + shellRendered = true + 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: unknown) { + reject(error) + }, + onError(error: unknown) { + responseStatusCode = 500 + // Log streaming rendering errors from inside the shell. Don't log + // errors encountered during initial shell rendering since they'll + // reject and get logged in handleDocumentRequest. + if (shellRendered) { + console.error(error) + } + }, + } + ) + + setTimeout(abort, ABORT_DELAY) + }) +} diff --git a/playground/remix-vite/app/root.tsx b/playground/remix-vite/app/root.tsx new file mode 100644 index 000000000..9ebebbcbc --- /dev/null +++ b/playground/remix-vite/app/root.tsx @@ -0,0 +1,37 @@ +import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react' +import { PostHogProvider } from 'posthog-js/react' +import './tailwind.css' + +export async function loader() { + return json({ + PUBLIC_POSTHOG_KEY: process.env.PUBLIC_POSTHOG_KEY, + PUBLIC_POSTHOG_HOST: process.env.PUBLIC_POSTHOG_HOST, + }) +} + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + + + + {children} + + + + + ) +} + +export default function App() { + const { PUBLIC_POSTHOG_KEY, PUBLIC_POSTHOG_HOST } = useLoaderData() + return ( + + + + ) +} diff --git a/playground/remix-vite/app/routes/_index.tsx b/playground/remix-vite/app/routes/_index.tsx new file mode 100644 index 000000000..99b030914 --- /dev/null +++ b/playground/remix-vite/app/routes/_index.tsx @@ -0,0 +1,45 @@ +import type { MetaFunction } from '@remix-run/node' + +export const meta: MetaFunction = () => { + return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }] +} + +export default function Index() { + return ( +
+

Welcome to Remix

+ +
+ ) +} diff --git a/playground/remix-vite/app/tailwind.css b/playground/remix-vite/app/tailwind.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/playground/remix-vite/app/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/playground/remix-vite/package.json b/playground/remix-vite/package.json new file mode 100644 index 000000000..c5daf6999 --- /dev/null +++ b/playground/remix-vite/package.json @@ -0,0 +1,44 @@ +{ + "name": "remix-vite", + "private": true, + "sideEffects": false, + "type": "module", + "scripts": { + "build": "remix vite:build", + "dev": "remix vite:dev", + "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", + "start": "remix-serve ./build/server/index.js", + "typecheck": "tsc" + }, + "dependencies": { + "@remix-run/node": "^2.10.2", + "@remix-run/react": "^2.10.2", + "@remix-run/serve": "^2.10.2", + "isbot": "^4.1.0", + "posthog-js": "^1.93.6", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@remix-run/dev": "^2.10.2", + "@types/react": "^18.2.20", + "@types/react-dom": "^18.2.7", + "@typescript-eslint/eslint-plugin": "^6.7.4", + "@typescript-eslint/parser": "^6.7.4", + "autoprefixer": "^10.4.19", + "eslint": "^8.38.0", + "eslint-import-resolver-typescript": "^3.6.1", + "eslint-plugin-import": "^2.28.1", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.4", + "typescript": "^5.1.6", + "vite": "^5.1.0", + "vite-tsconfig-paths": "^4.2.1" + }, + "engines": { + "node": ">=20.0.0" + } +} diff --git a/playground/remix-vite/postcss.config.js b/playground/remix-vite/postcss.config.js new file mode 100644 index 000000000..d41ad6355 --- /dev/null +++ b/playground/remix-vite/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/playground/remix-vite/public/favicon.ico b/playground/remix-vite/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8830cf6821b354114848e6354889b8ecf6d2bc61 GIT binary patch literal 16958 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 EKbET!0{{R3 literal 0 HcmV?d00001 diff --git a/playground/remix-vite/tailwind.config.ts b/playground/remix-vite/tailwind.config.ts new file mode 100644 index 000000000..67cb1f4f4 --- /dev/null +++ b/playground/remix-vite/tailwind.config.ts @@ -0,0 +1,7 @@ +export default { + content: ['./app/**/*.{js,jsx,ts,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/playground/remix-vite/tsconfig.json b/playground/remix-vite/tsconfig.json new file mode 100644 index 000000000..ddfcb087f --- /dev/null +++ b/playground/remix-vite/tsconfig.json @@ -0,0 +1,32 @@ +{ + "include": [ + "**/*.ts", + "**/*.tsx", + "**/.server/**/*.ts", + "**/.server/**/*.tsx", + "**/.client/**/*.ts", + "**/.client/**/*.tsx" + ], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ES2022"], + "types": ["@remix-run/node", "vite/client"], + "isolatedModules": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "module": "ESNext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "target": "ES2022", + "strict": true, + "allowJs": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "paths": { + "~/*": ["./app/*"] + }, + + // Vite takes care of building everything, not tsc. + "noEmit": true + } +} diff --git a/playground/remix-vite/vite.config.ts b/playground/remix-vite/vite.config.ts new file mode 100644 index 000000000..9393b6ddd --- /dev/null +++ b/playground/remix-vite/vite.config.ts @@ -0,0 +1,16 @@ +import { vitePlugin as remix } from '@remix-run/dev' +import { defineConfig } from 'vite' +import tsconfigPaths from 'vite-tsconfig-paths' + +export default defineConfig({ + plugins: [ + remix({ + future: { + v3_fetcherPersist: true, + v3_relativeSplatPath: true, + v3_throwAbortReason: true, + }, + }), + tsconfigPaths(), + ], +}) From 262437ece7fd583cef3aa9c9577d4795b71aaada Mon Sep 17 00:00:00 2001 From: Matt Hernandez Date: Mon, 23 Sep 2024 14:46:20 -0500 Subject: [PATCH 2/3] Attempted fix --- playground/remix-vite/app/PostHogProvider.tsx | 33 +++++++++++++++++++ playground/remix-vite/app/root.tsx | 2 +- 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 playground/remix-vite/app/PostHogProvider.tsx diff --git a/playground/remix-vite/app/PostHogProvider.tsx b/playground/remix-vite/app/PostHogProvider.tsx new file mode 100644 index 000000000..5861d445a --- /dev/null +++ b/playground/remix-vite/app/PostHogProvider.tsx @@ -0,0 +1,33 @@ +import { posthog } from 'posthog-js' +import type { PostHogConfig, PostHog } from 'posthog-js' +import { createContext, useContext, useEffect, useState } from 'react' + +const PostHogContext = createContext(undefined) + +const PostHogProvider = ({ + MSW, + children, + options, + apiKey, +}: { + MSW?: string + children: React.ReactNode + options: Partial + apiKey: string | undefined +}) => { + const [postHogInstance, setPostHogInstance] = useState(undefined) + + useEffect(() => { + if (MSW === 'true') { + return + } + const posthogInstance = posthog.init(apiKey ?? '', options) + setPostHogInstance(posthogInstance) + }, [apiKey, options, setPostHogInstance, MSW]) + + return {children} +} + +const usePostHog = () => useContext(PostHogContext) + +export { PostHogProvider, usePostHog } diff --git a/playground/remix-vite/app/root.tsx b/playground/remix-vite/app/root.tsx index 9ebebbcbc..333fc0954 100644 --- a/playground/remix-vite/app/root.tsx +++ b/playground/remix-vite/app/root.tsx @@ -1,6 +1,6 @@ import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react' -import { PostHogProvider } from 'posthog-js/react' import './tailwind.css' +import { PostHogProvider } from './PostHogProvider' export async function loader() { return json({ From 6347dc9f87384c13cc4aad5a28e2c78feb218ae5 Mon Sep 17 00:00:00 2001 From: Matt Hernandez Date: Tue, 24 Sep 2024 15:17:05 -0500 Subject: [PATCH 3/3] set up test posthog event --- .../remix-vite/app/components/PostHogRoot.tsx | 13 +++++++++++++ playground/remix-vite/app/root.tsx | 3 +++ 2 files changed, 16 insertions(+) create mode 100644 playground/remix-vite/app/components/PostHogRoot.tsx diff --git a/playground/remix-vite/app/components/PostHogRoot.tsx b/playground/remix-vite/app/components/PostHogRoot.tsx new file mode 100644 index 000000000..fdfc70e91 --- /dev/null +++ b/playground/remix-vite/app/components/PostHogRoot.tsx @@ -0,0 +1,13 @@ +import { useEffect } from 'react' +import { usePostHog } from '../PostHogProvider' + +export function PostHogRoot() { + const posthog = usePostHog() + useEffect(() => { + posthog?.identify('test@test.com', { + email: 'test@test.com', + }) + posthog?.capture('$pageview') + }, [posthog]) + return <> +} diff --git a/playground/remix-vite/app/root.tsx b/playground/remix-vite/app/root.tsx index 333fc0954..ae27064fa 100644 --- a/playground/remix-vite/app/root.tsx +++ b/playground/remix-vite/app/root.tsx @@ -1,6 +1,7 @@ import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react' import './tailwind.css' import { PostHogProvider } from './PostHogProvider' +import { PostHogRoot } from './components/PostHogRoot' export async function loader() { return json({ @@ -29,8 +30,10 @@ export function Layout({ children }: { children: React.ReactNode }) { export default function App() { const { PUBLIC_POSTHOG_KEY, PUBLIC_POSTHOG_HOST } = useLoaderData() + return ( + )