@nrwl/remix 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,7 @@
+# nx-remix
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nx-remix` to execute the unit tests via [Jest](https://jestjs.io).

package/generators.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "name": "NxRemix",
+  "version": "0.0.1",
+  "extends": ["@nrwl/react"],
+  "generators": {
+    "preset": {
+      "factory": "./src/generators/preset/preset.impl",
+      "schema": "./src/generators/preset/schema.json",
+      "description": "Generate a new remix workspace"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@nrwl/remix",
+  "version": "1.0.0-alpha.1",
+  "main": "src/index.js",
+  "generators": "./generators.json",
+  "dependencies": {
+    "@nrwl/devkit": "^13.3.9",
+    "@nrwl/react": "^13.3.9",
+    "tslib": "^2.3.1"
+  },
+  "typings": "./src/index.d.ts"
+}

package/src/generators/application/application.impl.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nrwl/devkit';
+import { NxRemixGeneratorSchema } from './schema';
+export default function (tree: Tree, _options: NxRemixGeneratorSchema): Promise<GeneratorCallback>;

package/src/generators/application/application.impl.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nrwl/devkit");
+const normalize_options_1 = require("./lib/normalize-options");
+const run_tasks_in_serial_1 = require("@nrwl/workspace/src/utilities/run-tasks-in-serial");
+const child_process_1 = require("child_process");
+function default_1(tree, _options) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        const options = (0, normalize_options_1.normalizeOptions)(tree, _options);
+        const tasks = [];
+        (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
+            root: options.projectRoot,
+            projectType: 'library',
+            sourceRoot: `${options.projectRoot}/src`,
+            tags: options.parsedTags,
+        });
+        const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            '@remix-run/react': '^1.0.6',
+            react: '^17.0.2',
+            'react-dom': '^17.0.2',
+            remix: '^1.0.6',
+            '@remix-run/serve': '^1.0.6',
+        }, {
+            '@remix-run/dev': '^1.0.6',
+            '@types/react': '^17.0.24',
+            '@types/react-dom': '^17.0.9',
+            typescript: '~4.4.3',
+        });
+        tasks.push(installTask);
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.projectRoot, Object.assign(Object.assign({}, options), { tmpl: '' }));
+        tasks.push(() => {
+            (0, child_process_1.execSync)('npx remix setup', {
+                cwd: options.projectRoot,
+                stdio: [0, 1, 2],
+            });
+        });
+        if (!options.skipFormat) {
+            yield (0, devkit_1.formatFiles)(tree);
+        }
+        return (0, run_tasks_in_serial_1.runTasksInSerial)(...tasks);
+    });
+}
+exports.default = default_1;
+//# sourceMappingURL=application.impl.js.map

package/src/generators/application/application.impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application.impl.js","sourceRoot":"","sources":["../../../../../../packages/nx-remix/src/generators/application/application.impl.ts"],"names":[],"mappings":";;;AAAA,yCAQsB;AAEtB,+DAA2D;AAC3D,2FAAqF;AACrF,iDAAyC;AAEzC,mBAA+B,IAAU,EAAE,QAAgC;;QACzE,MAAM,OAAO,GAAG,IAAA,oCAAgB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACjD,MAAM,KAAK,GAAwB,EAAE,CAAC;QAEtC,IAAA,gCAAuB,EAAC,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE;YACjD,IAAI,EAAE,OAAO,CAAC,WAAW;YACzB,WAAW,EAAE,SAAS;YACtB,UAAU,EAAE,GAAG,OAAO,CAAC,WAAW,MAAM;YACxC,IAAI,EAAE,OAAO,CAAC,UAAU;SACzB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,IAAA,qCAA4B,EAC9C,IAAI,EACJ;YACE,kBAAkB,EAAE,QAAQ;YAC5B,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,SAAS;YACtB,KAAK,EAAE,QAAQ;YACf,kBAAkB,EAAE,QAAQ;SAC7B,EACD;YACE,gBAAgB,EAAE,QAAQ;YAC1B,cAAc,EAAE,UAAU;YAC1B,kBAAkB,EAAE,SAAS;YAC7B,UAAU,EAAE,QAAQ;SACrB,CACF,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAExB,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,0BAAiB,EAAC,SAAS,EAAE,OAAO,CAAC,EACrC,OAAO,CAAC,WAAW,kCAEd,OAAO,KACV,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE;YACd,IAAA,wBAAQ,EAAC,iBAAiB,EAAE;gBAC1B,GAAG,EAAE,OAAO,CAAC,WAAW;gBACxB,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;aACjB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YACvB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;SACzB;QAED,OAAO,IAAA,sCAAgB,EAAC,GAAG,KAAK,CAAC,CAAC;IACpC,CAAC;CAAA;AAnDD,4BAmDC"}

package/src/generators/application/lib/normalize-options.d.ts

@@ -0,0 +1,8 @@
+import { NxRemixGeneratorSchema } from '../schema';
+import { Tree } from '@nrwl/devkit';
+export interface NormalizedSchema extends NxRemixGeneratorSchema {
+    projectName: string;
+    projectRoot: string;
+    parsedTags: string[];
+}
+export declare function normalizeOptions(tree: Tree, options: NxRemixGeneratorSchema): NormalizedSchema;

package/src/generators/application/lib/normalize-options.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nrwl/devkit");
+function normalizeOptions(tree, options) {
+    const name = (0, devkit_1.names)(options.name).fileName;
+    const projectName = name;
+    const projectRoot = `packages/${name}`;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    return Object.assign(Object.assign({}, options), { projectName,
+        projectRoot,
+        parsedTags });
+}
+exports.normalizeOptions = normalizeOptions;
+//# sourceMappingURL=normalize-options.js.map

package/src/generators/application/lib/normalize-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-options.js","sourceRoot":"","sources":["../../../../../../../packages/nx-remix/src/generators/application/lib/normalize-options.ts"],"names":[],"mappings":";;;AACA,yCAA2C;AAQ3C,SAAgB,gBAAgB,CAC9B,IAAU,EACV,OAA+B;IAE/B,MAAM,IAAI,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;IAC1C,MAAM,WAAW,GAAG,IAAI,CAAC;IACzB,MAAM,WAAW,GAAG,YAAY,IAAI,EAAE,CAAC;IACvC,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI;QAC7B,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC9C,CAAC,CAAC,EAAE,CAAC;IAEP,uCACK,OAAO,KACV,WAAW;QACX,WAAW;QACX,UAAU,IACV;AACJ,CAAC;AAjBD,4CAiBC"}

package/src/generators/application/schema.d.ts

@@ -0,0 +1,5 @@
+export interface NxRemixGeneratorSchema {
+  name: string;
+  tags?: string;
+  skipFormat?: boolean;
+}

package/src/generators/application/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxRemix",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What is the name of the application?"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the project (used for linting)",
+      "alias": "t"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files",
+      "default": "false"
+    }
+  }
+}

package/src/generators/preset/files/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
+```

package/src/generators/preset/files/app/entry.client.tsx__tmpl__

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

package/src/generators/preset/files/app/entry.server.tsx__tmpl__

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}

package/src/generators/preset/files/app/root.tsx__tmpl__

@@ -0,0 +1,178 @@
+import {
+  Link,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch
+} from "remix";
+import type { LinksFunction } from "remix";
+
+import globalStylesUrl from "./styles/global.css";
+import darkStylesUrl from "./styles/dark.css";
+
+// https://remix.run/api/app#links
+export let links: LinksFunction = () => {
+  return [
+    { rel: "stylesheet", href: globalStylesUrl },
+    {
+      rel: "stylesheet",
+      href: darkStylesUrl,
+      media: "(prefers-color-scheme: dark)"
+    }
+  ];
+};
+
+// https://remix.run/api/conventions#default-export
+// https://remix.run/api/conventions#route-filenames
+export default function App() {
+  return (
+    <Document>
+      <Layout>
+        <Outlet />
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#errorboundary
+export function ErrorBoundary({ error }: { error: Error }) {
+  console.error(error);
+  return (
+    <Document title="Error!">
+      <Layout>
+        <div>
+          <h1>There was an error</h1>
+          <p>{error.message}</p>
+          <hr />
+          <p>
+            Hey, developer, you should replace this with what you want your
+            users to see.
+          </p>
+        </div>
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#catchboundary
+export function CatchBoundary() {
+  let caught = useCatch();
+
+  let message;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>
+          Oops! Looks like you tried to visit a page that you do not have access
+          to.
+        </p>
+      );
+      break;
+    case 404:
+      message = (
+        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
+      );
+      break;
+
+    default:
+      throw new Error(caught.data || caught.statusText);
+  }
+
+  return (
+    <Document title={`${caught.status} ${caught.statusText}`}>
+      <Layout>
+        <h1>
+          {caught.status}: {caught.statusText}
+        </h1>
+        {message}
+      </Layout>
+    </Document>
+  );
+}
+
+function Document({
+  children,
+  title
+}: {
+  children: React.ReactNode;
+  title?: string;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        {title ? <title>{title}</title> : null}
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="remix-app">
+      <header className="remix-app__header">
+        <div className="container remix-app__header-content">
+          <Link to="/" title="Remix" className="remix-app__header-home-link">
+            <RemixLogo />
+          </Link>
+          <nav aria-label="Main navigation" className="remix-app__header-nav">
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <a href="https://remix.run/docs">Remix Docs</a>
+              </li>
+              <li>
+                <a href="https://github.com/remix-run/remix">GitHub</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div className="remix-app__main">
+        <div className="container remix-app__main-content">{children}</div>
+      </div>
+      <footer className="remix-app__footer">
+        <div className="container remix-app__footer-content">
+          <p>&copy; You!</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function RemixLogo() {
+  return (
+    <svg
+      viewBox="0 0 659 165"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      aria-labelledby="remix-run-logo-title"
+      role="img"
+      width="106"
+      height="30"
+      fill="currentColor"
+    >
+      <title id="remix-run-logo-title">Remix Logo</title>
+      <path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
+      <path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
+      <path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
+      <path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
+      <path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
+    </svg>
+  );
+}

package/src/generators/preset/files/app/routes/demos/about/index.tsx__tmpl__

@@ -0,0 +1,17 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        You are looking at the index route for the <code>/about</code> URL
+        segment, but there are nested routes as well!
+      </p>
+      <p>
+        <strong>
+          <Link to="whoa">Check out one of them here.</Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

package/src/generators/preset/files/app/routes/demos/about/whoa.tsx__tmpl__

@@ -0,0 +1,20 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        Whoa, this is a nested route! We render the <code>/about</code> layout
+        route component, and its <code>Outlet</code> renders our route
+        component. 🤯
+      </p>
+      <p>
+        <strong>
+          <Link to="..">
+            Go back to the <code>/about</code> index.
+          </Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

package/src/generators/preset/files/app/routes/demos/about.tsx__tmpl__

@@ -0,0 +1,44 @@
+import { Outlet } from "remix";
+import type { MetaFunction, LinksFunction } from "remix";
+
+import stylesUrl from "../../styles/demos/about.css";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "About Remix"
+  };
+};
+
+export let links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: stylesUrl }];
+};
+
+export default function Index() {
+  return (
+    <div className="about">
+      <div className="about__intro">
+        <h2>About Us</h2>
+        <p>
+          Ok, so this page isn't really <em>about us</em>, but we did want to
+          show you a few more things Remix can do.
+        </p>
+        <p>
+          Did you notice that things look a little different on this page? The
+          CSS that we import in the route file and include in its{" "}
+          <code>links</code> export is only included on this route and its
+          children.
+        </p>
+        <p>
+          Wait a sec...<em>its children</em>? To understand what we mean by
+          this,{" "}
+          <a href="https://remix.run/tutorial/4-nested-routes-params">
+            read all about nested routes in the docs
+          </a>
+          .
+        </p>
+        <hr />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

package/src/generators/preset/files/app/routes/demos/actions.tsx__tmpl__

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from "react";
+import type { ActionFunction } from "remix";
+import { Form, json, useActionData, redirect } from "remix";
+
+export function meta() {
+  return { title: "Actions Demo" };
+}
+
+// When your form sends a POST, the action is called on the server.
+// - https://remix.run/api/conventions#action
+// - https://remix.run/guides/data-updates
+export let action: ActionFunction = async ({ request }) => {
+  let formData = await request.formData();
+  let answer = formData.get("answer");
+
+  // Typical action workflows start with validating the form data that just came
+  // over the network. Clientside validation is fine, but you definitely need it
+  // server side.  If there's a problem, return the the data and the component
+  // can render it.
+  if (typeof answer !== "string") {
+    return json("Come on, at least try!", { status: 400 });
+  }
+
+  if (answer !== "egg") {
+    return json(`Sorry, ${answer} is not right.`, { status: 400 });
+  }
+
+  // Finally, if the data is valid, you'll typically write to a database or send or
+  // email or log the user in, etc. It's recommended to redirect after a
+  // successful action, even if it's to the same place so that non-JavaScript workflows
+  // from the browser doesn't repost the data if the user clicks back.
+  return redirect("/demos/correct");
+};
+
+export default function ActionsDemo() {
+  // https://remix.run/api/remix#useactiondata
+  let actionMessage = useActionData<string>();
+  let answerRef = useRef<HTMLInputElement>(null);
+
+  // This form works without JavaScript, but when we have JavaScript we can make
+  // the experience better by selecting the input on wrong answers! Go ahead, disable
+  // JavaScript in your browser and see what happens.
+  useEffect(() => {
+    if (actionMessage && answerRef.current) {
+      answerRef.current.select();
+    }
+  }, [actionMessage]);
+
+  return (
+    <div className="remix__page">
+      <main>
+        <h2>Actions!</h2>
+        <p>
+          This form submission will send a post request that we handle in our
+          `action` export. Any route can export an action to handle data
+          mutations.
+        </p>
+        <Form method="post" className="remix__form">
+          <h3>Post an Action</h3>
+          <p>
+            <i>What is more useful when it is broken?</i>
+          </p>
+          <label>
+            <div>Answer:</div>
+            <input ref={answerRef} name="answer" type="text" />
+          </label>
+          <div>
+            <button>Answer!</button>
+          </div>
+          {actionMessage ? (
+            <p>
+              <b>{actionMessage}</b>
+            </p>
+          ) : null}
+        </Form>
+      </main>
+
+      <aside>
+        <h3>Additional Resources</h3>
+        <ul>
+          <li>
+            Guide:{" "}
+            <a href="https://remix.run/guides/data-writes">Data Writes</a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/conventions#action">
+              Route Action Export
+            </a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/remix#useactiondata">
+              <code>useActionData</code>
+            </a>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}

package/src/generators/preset/files/app/routes/demos/correct.tsx__tmpl__

@@ -0,0 +1,3 @@
+export default function NiceWork() {
+  return <h1>You got it right!</h1>;
+}