Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support create-next-app@15 with the setup wizard #340

Merged
merged 1 commit into from
Nov 13, 2024
Merged

Support create-next-app@15 with the setup wizard #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/backend/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function GlobalError({ error }: any) {

return (
<html>
<body suppressHydrationWarning>
<body>
[An unhandled error occurred.]
<Error
statusCode={500}
Expand Down
4 changes: 2 additions & 2 deletions apps/backend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export default function RootLayout({
children: React.ReactNode,
}) {
return (
<html lang="en" suppressHydrationWarning>
<body suppressHydrationWarning>
<html lang="en">
<body>
{children}
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function GlobalError({ error }: any) {

return (
<html>
<body suppressHydrationWarning>
<body>
{isProdLike ? (
<Spinner />
) : (
Expand Down
9 changes: 4 additions & 5 deletions apps/dashboard/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function RootLayout({
}

return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`} suppressHydrationWarning>
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<StyleLink href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block" />
Expand All @@ -85,10 +85,9 @@ export default function RootLayout({
<CSPostHogProvider>
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
suppressHydrationWarning
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
<Analytics />
<PageView />
Expand Down
14 changes: 14 additions & 0 deletions apps/e2e/tests/general/setup-wizard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { exec } from "child_process";
import { describe } from "vitest";
import { it } from "../helpers";

describe("Setup wizard", () => {
it("completes successfully with create-next-app", async ({ expect }) => {
const [error, stdout, stderr] = await new Promise<[Error | null, string, string]>((resolve) => {
exec("pnpm -C packages/init-stack run test-run-auto", (error, stdout, stderr) => {
resolve([error, stdout, stderr]);
});
});
expect(error, `Expected no error to be thrown!\n\n\n\nstdout: ${stdout}\n\n\n\nstderr: ${stderr}`).toBeNull();
}, 120_000);
});
4 changes: 2 additions & 2 deletions examples/demo/src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
--foreground: black;
}

[data-stack-theme='dark'] {
html:has(head > [data-stack-theme="dark"]) {
--background: black;
--foreground: white;
}

body {
background-color: var(--background);
color: var(--foreground);
}
}
2 changes: 1 addition & 1 deletion examples/demo/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<head />
<body suppressHydrationWarning>
<body>
<StackProvider app={stackServerApp}>
<StackTheme>
<Provider>
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["selector", '[data-stack-theme="dark"]'],
darkMode: ["selector", 'html:has(head > [data-stack-theme="dark"])'],
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@stackframe/stack-ui/src/**/*.{ts,tsx}",
Expand Down
4 changes: 2 additions & 2 deletions examples/docs-examples/src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
--foreground: black;
}

[data-stack-theme='dark'] {
html:has(head > [data-stack-theme="dark"]) {
--background: black;
--foreground: white;
}

body {
background-color: var(--background);
color: var(--foreground);
} */
} */
2 changes: 1 addition & 1 deletion examples/docs-examples/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning className={inter.className}>
<head />
<body suppressHydrationWarning>
<body>
<StackProvider
app={stackServerApp}
>
Expand Down
2 changes: 1 addition & 1 deletion examples/supabase/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { stackServerApp } from "../stack";

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<html lang="en">
<body className="bg-background text-foreground">
<StackProvider app={stackServerApp}>
<StackTheme>
Expand Down
1 change: 1 addition & 0 deletions packages/init-stack/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
test-run-output
10 changes: 7 additions & 3 deletions packages/init-stack/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ async function main() {
);
}
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
const nextVersionInPackageJson = packageJson?.dependencies["next"] ?? packageJson?.devDependencies["next"];
const nextVersionInPackageJson = packageJson?.dependencies?.["next"] ?? packageJson?.devDependencies?.["next"];
if (!nextVersionInPackageJson) {
throw new UserError(
`The project at ${projectPath} does not appear to be a Next.js project, or does not have 'next' installed as a dependency. Only Next.js projects are currently supported.`
Expand Down Expand Up @@ -195,6 +195,8 @@ async function main() {
);
}

const stackPackageName = process.env.STACK_PACKAGE_NAME_OVERRIDE || "@stackframe/stack";

const isReady = await inquirer.prompt([
{
type: "confirm",
Expand All @@ -209,7 +211,7 @@ async function main() {

console.log();
console.log(`${ansis.bold}Installing dependencies...${ansis.clear}`);
await shellNicelyFormatted(`${installCommand} @stackframe/stack`, {
await shellNicelyFormatted(`${installCommand} ${stackPackageName}`, {
shell: true,
cwd: projectPath,
});
Expand Down Expand Up @@ -294,7 +296,9 @@ main()
"For more information, please visit https://docs.stack-auth.com/getting-started/setup"
);
console.log();
await open("https://app.stack-auth.com/wizard-congrats");
if (!process.env.STACK_DISABLE_INTERACTIVE) {
await open("https://app.stack-auth.com/wizard-congrats");
}
})
.catch((err) => {
if (!(err instanceof UserError)) {
Expand Down
6 changes: 5 additions & 1 deletion packages/init-stack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
"main": "index.mjs",
"bin": "./index.mjs",
"scripts": {
"init-stack": "node index.mjs"
"clean": "rimraf test-run-output && rimraf node_modules",
"init-stack": "node index.mjs",
"init-stack:local": "STACK_PACKAGE_NAME_OVERRIDE=../../stack node index.mjs",
"test-run": "rimraf test-run-output && npx -y create-next-app@latest test-run-output && pnpm run init-stack:local test-run-output",
"test-run-auto": "rimraf test-run-output && npx -y create-next-app@latest test-run-output --app --ts --no-src-dir --tailwind --use-npm --eslint --import-alias '##@#/*' --turbopack && STACK_DISABLE_INTERACTIVE=true pnpm run init-stack:local test-run-output"
},
"files": [
"README.md",
Expand Down
10 changes: 5 additions & 5 deletions packages/stack-emails/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
}
},
"peerDependencies": {
"react": ">=18.2",
"react-dom": ">=18.2",
"react": ">=18.2 || >=19.0.0-rc.0",
"react-dom": ">=18.2 || >=19.0.0-rc.0",
"yup": "^1.4.0",
"@types/react": ">=18.2.66",
"@types/react-dom": ">=18.2.66",
"next": ">=14.1.0"
"@types/react": ">=18.2.66 || >=19.0.0-rc.0",
"@types/react-dom": ">=18.2.66 || >=19.0.0-rc.0",
"next": ">=14.1.0 || >=15.0.0-rc.0"
},
"peerDependenciesMeta": {
"@types/react": {
Expand Down
10 changes: 5 additions & 5 deletions packages/stack-sc/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@
"LICENSE"
],
"peerDependencies": {
"next": ">=14.1",
"react": ">=18.2",
"react-dom": ">=18.2",
"@types/react": ">=18.3.12",
"@types/react-dom": ">=18.3.1"
"next": ">=14.1 || >=15.0.0-rc.0",
"react": ">=18.2 || >=19.0.0-rc.0",
"react-dom": ">=18.2 || >=19.0.0-rc.0",
"@types/react": ">=18.3.12 || >=19.0.0-rc.0",
"@types/react-dom": ">=18.3.1 || >=19.0.0-rc.0"
},
"peerDependenciesMeta": {
"@types/react": {
Expand Down
10 changes: 5 additions & 5 deletions packages/stack-shared/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
}
},
"peerDependencies": {
"react": ">=18.2",
"react-dom": ">=18.2",
"@types/react": ">=18.2",
"@types/react-dom": ">=18.2",
"next": ">=14.1.0",
"react": ">=18.2 || >=19.0.0-rc.0",
"react-dom": ">=18.2 || >=19.0.0-rc.0",
"@types/react": ">=18.2 || >=19.0.0-rc.0",
"@types/react-dom": ">=18.2 || >=19.0.0-rc.0",
"next": ">=14.1.0 || >=15.0.0-rc.0",
"yup": "^1.4.0"
},
"peerDependenciesMeta": {
Expand Down
18 changes: 11 additions & 7 deletions packages/stack-shared/src/hooks/use-hash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { useSyncExternalStore } from "react";
import { suspendIfSsr } from "../utils/react";

const getHash = () => typeof window === "undefined" ? undefined : window.location.hash.substring(1);
export const useHash = () => {
const params = useParams();
const [hash, setHash] = useState(getHash());
useEffect(() => setHash(getHash()), [params]);
return hash;
suspendIfSsr("useHash");
return useSyncExternalStore(
(onChange) => {
const interval = setInterval(() => onChange(), 10);
return () => clearInterval(interval);
},
() => window.location.hash.substring(1)
);
};

10 changes: 5 additions & 5 deletions packages/stack-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
}
},
"peerDependencies": {
"react": ">=18.2",
"react-dom": ">=18.2",
"@types/react": ">=18.2.12",
"@types/react-dom": ">=18.2.12",
"next": ">=14.1.0",
"react": ">=18.2 || >=19.0.0-rc.0",
"react-dom": ">=18.2 || >=19.0.0-rc.0",
"@types/react": ">=18.2.12 || >=19.0.0-rc.0",
"@types/react-dom": ">=18.2.12 || >=19.0.0-rc.0",
"next": ">=14.1.0 || >=15.0.0-rc.0",
"yup": "^1.4.0"
},
"peerDependenciesMeta": {
Expand Down
10 changes: 5 additions & 5 deletions packages/stack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@
"yup": "^1.4.0"
},
"peerDependencies": {
"next": ">=14.1",
"react": ">=18.2",
"react-dom": ">=18.2",
"@types/react": ">=18.2",
"@types/react-dom": ">=18.2"
"next": ">=14.1 || >=15.0.0-rc.0",
"react": ">=18.2 || >=19.0.0-rc.0",
"react-dom": ">=18.2 || >=19.0.0-rc.0",
"@types/react": ">=18.2 || >=19.0.0-rc.0",
"@types/react-dom": ">=18.2 || >=19.0.0-rc.0"
},
"peerDependenciesMeta": {
"@types/react": {
Expand Down
1 change: 0 additions & 1 deletion packages/stack/src/components/elements/maybe-full-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export function MaybeFullPage({
<>
<div
id={id}
suppressHydrationWarning
style={{
minHeight: '100vh',
alignSelf: 'stretch',
Expand Down
1 change: 0 additions & 1 deletion packages/stack/src/components/elements/ssr-layout-effect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export function SsrScript(props: { script: string, nonce?: string }) {

return (
<script
suppressHydrationWarning
nonce={props.nonce}
dangerouslySetInnerHTML={{ __html: props.script }}
/>
Expand Down
3 changes: 1 addition & 2 deletions packages/stack/src/providers/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function convertColorsToCSS(theme: Theme) {
.stack-scope {
${colorsToCSSVars(colors.light)}
}
[data-stack-theme="dark"] .stack-scope {
html:has(head > [data-stack-theme="dark"]) .stack-scope {
${colorsToCSSVars(colors.dark)}
}`;
}
Expand All @@ -95,7 +95,6 @@ export function StackTheme({
<>
<BrowserScript nonce={nonce} />
<style
suppressHydrationWarning
nonce={nonce}
dangerouslySetInnerHTML={{
__html: globalCSS + "\n" + convertColorsToCSS(themeValue),
Expand Down
9 changes: 8 additions & 1 deletion packages/stack/src/utils/browser-script.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,14 @@ const script = () => {
};

const setTheme = (mode: 'dark' | 'light') => {
document.documentElement.setAttribute('data-stack-theme', mode);
let el = document.getElementById(`--stack-theme-mode`);
if (!el) {
el = document.createElement("style");
el.id = `--stack-theme-mode`;
el.innerHTML = `/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \`html:has(head > [data-stack-theme=XYZ])\` selector to apply styles based on the theme. */`;
document.head.appendChild(el);
}
el.setAttribute("data-stack-theme", mode);
};

const colorToRGB = (color: string): [number, number, number] | null => {
Expand Down
2 changes: 1 addition & 1 deletion packages/stack/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["selector", '[data-stack-theme="dark"]'],
darkMode: ["selector", 'html:has(head > [data-stack-theme="dark"])'],
content: [
"./src/**/*.{ts,tsx}",
"./node_modules/@stackframe/stack-ui/src/**/*.{ts,tsx}",
Expand Down
Loading
Loading