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.

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

fix small typo in doc #2433

Closed
wants to merge 13 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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 DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ npm run dev
REMIX_LOCAL_DEV_OUTPUT_DIRECTORY=../my-remix-app yarn watch
```

Now - any time you make changes in the Remix repository, the they will be written out to the appropriate locations in `../my-remix-app/node_modules` and you can restart the `npm run dev` command to pick them up 🎉.
Now - any time you make changes in the Remix repository, they will be written out to the appropriate locations in `../my-remix-app/node_modules` and you can restart the `npm run dev` command to pick them up 🎉.

### Transition Manager Flows

Expand Down
2 changes: 2 additions & 0 deletions contributors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
- emzoumpo
- eps1lon
- evanwinter
- exegeteio
- fergusmeiklejohn
- fgiuliani
- fishel-feng
Expand Down Expand Up @@ -297,3 +298,4 @@
- youngvform
- zachdtaylor
- zainfathoni
- TheRealAstoo
2 changes: 1 addition & 1 deletion docs/guides/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,7 @@ An example using SASS.
npm add -D sass
```

2. Add an npm script to your `package.json`'s `script` section' that uses the installed too to generate CSS files.
2. Add an npm script to your `package.json`'s `script` section' that uses the installed tool to generate CSS files.

```json filename="package.json"
{
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorials/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -695,7 +695,7 @@ If you refresh you're not going to see it yet. Every route inside of `app/routes
💿 Add an outlet to the admin page

```tsx filename=app/routes/admin.tsx lines=[1,21]
import { Outlet, Link, useLoaderData } from "remix";
import { json, Outlet, Link, useLoaderData } from "remix";

//...
export default function Admin() {
Expand Down
28 changes: 28 additions & 0 deletions fixtures/gists-app/app/routes/meta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import type { LoaderFunction, MetaFunction } from "remix";
import { json, useLoaderData } from "remix";

export let loader: LoaderFunction = async () => {
return json({
title: "Meta Page",
description: "This is a meta page",
});
};

export let meta: MetaFunction = ({ data }) => {
return {
title: data.title,
description: data.description,
"og:image": "https://picsum.photos/200/200",
"og:type": data.contentType, // undefined
};
};

export default function MetaPage() {
let { title } = useLoaderData();
return (
<div data-test-id="/links">
<h2>{title}</h2>
<hr />
</div>
);
}
5 changes: 4 additions & 1 deletion fixtures/gists-app/jest/globalSetup.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import * as path from "path";
import type { ChildProcess } from "child_process";
import { spawn } from "child_process";
// @ts-expect-error
import setupPuppeteer from "jest-environment-puppeteer/setup";

function installDeps(dir: string): Promise<void> {
return new Promise((accept, reject) => {
Expand Down Expand Up @@ -42,7 +44,8 @@ async function startServer(dir: string): Promise<ChildProcess> {
});
}

export default async function () {
export default async function setup(globalConfig: any) {
await setupPuppeteer(globalConfig);
let rootDir = path.dirname(__dirname);
await installDeps(rootDir);
await runBuild(rootDir);
Expand Down
5 changes: 4 additions & 1 deletion fixtures/gists-app/jest/globalTeardown.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import type { ChildProcess } from "child_process";
// @ts-expect-error
import teardownPuppeteer from "jest-environment-puppeteer/teardown";

function stopServer(serverProc: ChildProcess): Promise<void> {
return new Promise((accept) => {
Expand All @@ -10,7 +12,8 @@ function stopServer(serverProc: ChildProcess): Promise<void> {
});
}

module.exports = async () => {
module.exports = async (globalConfig: any) => {
// @ts-ignore
await stopServer(global.testServerProc);
await teardownPuppeteer(globalConfig);
};
1 change: 1 addition & 0 deletions fixtures/gists-app/jest/setup.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
import { installGlobals } from "@remix-run/node";
require("expect-puppeteer");
installGlobals();
1 change: 1 addition & 0 deletions fixtures/gists-app/jest/setupAfterEnv.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
require("expect-puppeteer");
jest.setTimeout(10000);
1 change: 1 addition & 0 deletions fixtures/gists-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"autoprefixer": "^10.2.4",
"cssnano": "^4.1.10",
"fs-extra": "^10.0.0",
"get-port": "^5.1.1",
"pm2": "^4.5.1",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1",
Expand Down
115 changes: 60 additions & 55 deletions fixtures/gists-app/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,69 +2,74 @@ const express = require("express");
const morgan = require("morgan");
const compression = require("compression");
const { createRequestHandler } = require("@remix-run/express");
const getPort = require("get-port");

const port = process.env.PORT || 3000;

if (process.env.NODE_ENV === "test") {
class MockConsole {
assert() {}
clear() {}
count() {}
countReset() {}
debug() {}
dir() {}
dirxml() {}
error() {}
group() {}
groupCollapsed() {}
groupEnd() {}
info() {}
log() {}
table() {}
time() {}
timeEnd() {}
timeLog() {}
timeStamp() {}
trace() {}
warn() {}
getPort({ port: process.env.PORT || 3000 }).then((port) => {
if (process.env.NODE_ENV === "test") {
class MockConsole {
assert() {}
clear() {}
count() {}
countReset() {}
debug() {}
dir() {}
dirxml() {}
error() {}
group() {}
groupCollapsed() {}
groupEnd() {}
info() {}
log() {}
table() {}
time() {}
timeEnd() {}
timeLog() {}
timeStamp() {}
trace() {}
warn() {}
}
global.console = new MockConsole();
}
global.console = new MockConsole();
}

let app = express();
let app = express();

app.use(compression());
app.use(compression());

app.use(
express.static("public", {
// maxAge: process.env.NODE_ENV === "production" ? "1y" : undefined
maxAge: "1y",
})
);
app.use(
express.static("public", {
// maxAge: process.env.NODE_ENV === "production" ? "1y" : undefined
maxAge: "1y",
})
);

app.get("/fails.css", (req, res) => {
res.status(500).send("Boom! No CSS here!");
});
app.get("/fails.css", (req, res) => {
res.status(500).send("Boom! No CSS here!");
});

// server-side redirect
app.get("/user-gists/:username", (req, res) => {
res.redirect(301, `/gists/${req.params.username}`);
});
// server-side redirect
app.get("/user-gists/:username", (req, res) => {
res.redirect(301, `/gists/${req.params.username}`);
});

if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test") {
app.use(morgan("dev"));
}
if (
process.env.NODE_ENV !== "production" &&
process.env.NODE_ENV !== "test"
) {
app.use(morgan("dev"));
}

app.all(
"*",
createRequestHandler({
build: require("@remix-run/dev/server-build"),
getLoadContext() {
return { userId: 4 };
},
})
);
app.all(
"*",
createRequestHandler({
build: require("@remix-run/dev/server-build"),
getLoadContext() {
return { userId: 4 };
},
})
);

app.listen(port, () => {
console.log(`Gists app running on port ${port}`);
app.listen(port, () => {
console.log(`Gists app running on port ${port}`);
console.log(`http://localhost:${port}`);
});
});
52 changes: 52 additions & 0 deletions fixtures/gists-app/tests/meta-test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { Browser, Page } from "puppeteer";
import puppeteer from "puppeteer";

import { disableJavaScript, getHtml } from "./utils";

const testPort = 3000;
const testServer = `http://localhost:${testPort}`;

describe("route module meta export", () => {
let browser: Browser;
let page: Page;
beforeEach(async () => {
browser = await puppeteer.launch();
page = await browser.newPage();
});

afterEach(() => browser.close());

describe("route meta export", () => {
test("meta { title } adds a <title />", async () => {
await disableJavaScript(page);
await page.goto(`${testServer}/meta`);
let title = await getHtml(page, "title");
expect(title).toEqual(expect.stringMatching(/<title>/s));
});

test("meta { description } adds a <meta name='description' />", async () => {
await disableJavaScript(page);
await page.goto(`${testServer}/meta`);
let meta = await getHtml(page, "meta");
expect(meta).toEqual(
expect.stringMatching(/<meta\s+name="description"/s)
);
});

test("meta { 'og:*' } adds a <meta property='og:*' />", async () => {
await disableJavaScript(page);
await page.goto(`${testServer}/meta`);
let meta = await getHtml(page, "meta");
expect(meta).toEqual(expect.stringMatching(/<meta\s+property="og:*/s));
});

test("empty meta does not render a tag", async () => {
await disableJavaScript(page);
await page.goto(`${testServer}/meta`);
let meta = await getHtml(page, "meta");
expect(meta).not.toEqual(
expect.stringMatching(/<meta\s+property="og:type/s)
);
});
});
});
6 changes: 5 additions & 1 deletion fixtures/gists-app/tests/utils.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import prettier from "prettier";
import type { Page, Request, Response } from "puppeteer";
import type {
Page,
HTTPRequest as Request,
HTTPResponse as Response,
} from "puppeteer";
import cheerio from "cheerio";

export async function getHtml(page: Page, selector?: string): Promise<string> {
Expand Down
Loading