@nrwl/remix 13.7.1 → 14.1.7

package/src/utils/insert-statement-after-imports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-statement-after-imports.js","sourceRoot":"","sources":["../../../../../packages/remix/src/utils/insert-statement-after-imports.ts"],"names":[],"mappings":";;;AAAA,yCAAsE;AACtE,2CAIoB;AAEpB;;GAEG;AACH,SAAgB,2BAA2B,CACzC,IAAU,EACV,IAAY,EACZ,SAAiB;IAEjB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAE1C,MAAM,UAAU,GAAG,IAAA,6BAAgB,EAAC,IAAI,EAAE,QAAQ,EAAE,yBAAY,CAAC,MAAM,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,gCAAmB,CAAC,CAAC;IAC3E,MAAM,KAAK,GACT,gBAAgB,CAAC,MAAM,GAAG,CAAC;QACzB,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;QACxD,CAAC,CAAC,CAAC,CAAC;IAER,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;QAC/B,SAAS,GAAG,KAAK,SAAS,EAAE,CAAC;KAC9B;IAED,MAAM,WAAW,GAAG,IAAA,6BAAoB,EAAC,QAAQ,EAAE;QACjD;YACE,IAAI,EAAE,mBAAU,CAAC,MAAM;YACvB,KAAK;YACL,IAAI,EAAE,SAAS;SAChB;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAChC,CAAC;AA5BD,kEA4BC"}

package/src/utils/insert-statement-in-default-function.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nrwl/devkit';
+export declare function insertStatementInDefaultFunction(tree: Tree, path: string, statement: any): void;

package/src/utils/insert-statement-in-default-function.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertStatementInDefaultFunction = void 0;
+const devkit_1 = require("@nrwl/devkit");
+const get_default_export_1 = require("./get-default-export");
+function insertStatementInDefaultFunction(tree, path, statement) {
+    const defaultExport = (0, get_default_export_1.getDefaultExport)(tree, path);
+    if (!defaultExport) {
+        throw Error('No default export found!');
+    }
+    const index = defaultExport.body.statements.length > 0
+        ? defaultExport.body.statements[0].pos
+        : 0;
+    const newContents = (0, devkit_1.applyChangesToString)(tree.read(path, 'utf-8'), [
+        {
+            type: devkit_1.ChangeType.Insert,
+            index,
+            text: statement,
+        },
+    ]);
+    tree.write(path, newContents);
+}
+exports.insertStatementInDefaultFunction = insertStatementInDefaultFunction;
+//# sourceMappingURL=insert-statement-in-default-function.js.map

package/src/utils/insert-statement-in-default-function.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-statement-in-default-function.js","sourceRoot":"","sources":["../../../../../packages/remix/src/utils/insert-statement-in-default-function.ts"],"names":[],"mappings":";;;AAAA,yCAAsE;AACtE,6DAAwD;AAExD,SAAgB,gCAAgC,CAC9C,IAAU,EACV,IAAY,EACZ,SAAS;IAET,MAAM,aAAa,GAAG,IAAA,qCAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEnD,IAAI,CAAC,aAAa,EAAE;QAClB,MAAM,KAAK,CAAC,0BAA0B,CAAC,CAAC;KACzC;IAED,MAAM,KAAK,GACT,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QACtC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG;QACtC,CAAC,CAAC,CAAC,CAAC;IAER,MAAM,WAAW,GAAG,IAAA,6BAAoB,EAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;QACjE;YACE,IAAI,EAAE,mBAAU,CAAC,MAAM;YACvB,KAAK;YACL,IAAI,EAAE,SAAS;SAChB;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAChC,CAAC;AAzBD,4EAyBC"}

package/src/utils/remix-route-utils.d.ts

@@ -0,0 +1,11 @@
+import { Tree } from '@nrwl/devkit';
+/**
+ *
+ * @param tree
+ * @param path to the route which could be fully specified or just "foo/bar"
+ * @param projectName the name of the project where the route should be added
+ * @param fileExtension the file extension to add to resolved route file
+ * @returns file path to the route
+ */
+export declare function resolveRemixRouteFile(tree: Tree, path: string, projectName: string, fileExtension?: string): string;
+export declare function normalizeRoutePath(path: string, projectRoot: string): string;

package/src/utils/remix-route-utils.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeRoutePath = exports.resolveRemixRouteFile = void 0;
+const devkit_1 = require("@nrwl/devkit");
+/**
+ *
+ * @param tree
+ * @param path to the route which could be fully specified or just "foo/bar"
+ * @param projectName the name of the project where the route should be added
+ * @param fileExtension the file extension to add to resolved route file
+ * @returns file path to the route
+ */
+function resolveRemixRouteFile(tree, path, projectName, fileExtension) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    if (!project)
+        throw new Error(`Project does not exist: ${projectName}`);
+    const { fileName: routePath } = (0, devkit_1.names)(path.replace(/^\//, '').replace(/\/$/, ''));
+    const normalizedRoutePath = normalizeRoutePath(routePath, project.root);
+    // if no file extension specified, let's try to find it
+    if (!fileExtension) {
+        // see if the path already has it
+        const extensionMatch = path.match(/(\.[^.]+)$/);
+        if (extensionMatch) {
+            fileExtension = extensionMatch[0];
+        }
+        else {
+            // look for either .ts or .tsx to exist in tree
+            if (tree.exists(`${normalizedRoutePath}.ts`)) {
+                fileExtension = '.ts';
+            }
+            else {
+                // default to .tsx if nothing else found
+                fileExtension = '.tsx';
+            }
+        }
+    }
+    const fileName = normalizedRoutePath.endsWith(fileExtension)
+        ? normalizedRoutePath
+        : `${normalizedRoutePath}${fileExtension}`;
+    // TODO: what if someone changes the Remix app root folder in the remix.config.js?
+    const routeFilePath = (0, devkit_1.joinPathFragments)(project.root, 'app/routes', fileName);
+    return routeFilePath;
+}
+exports.resolveRemixRouteFile = resolveRemixRouteFile;
+function normalizeRoutePath(path, projectRoot) {
+    if (path.indexOf(projectRoot) === -1)
+        return path;
+    if (path.indexOf('/routes/') > -1)
+        return path.substring(path.indexOf('/routes/') + 8);
+    return path.substring(projectRoot.length + 1);
+}
+exports.normalizeRoutePath = normalizeRoutePath;
+//# sourceMappingURL=remix-route-utils.js.map

package/src/utils/remix-route-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remix-route-utils.js","sourceRoot":"","sources":["../../../../../packages/remix/src/utils/remix-route-utils.ts"],"names":[],"mappings":";;;AAAA,yCAKsB;AAEtB;;;;;;;GAOG;AACH,SAAgB,qBAAqB,CACnC,IAAU,EACV,IAAY,EACZ,WAAmB,EACnB,aAAsB;IAEtB,MAAM,OAAO,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAC5D,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,WAAW,EAAE,CAAC,CAAC;IACxE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,cAAK,EACnC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3C,CAAC;IACF,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAExE,uDAAuD;IACvD,IAAI,CAAC,aAAa,EAAE;QAClB,iCAAiC;QACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAEhD,IAAI,cAAc,EAAE;YAClB,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;SACnC;aAAM;YACL,+CAA+C;YAC/C,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,mBAAmB,KAAK,CAAC,EAAE;gBAC5C,aAAa,GAAG,KAAK,CAAC;aACvB;iBAAM;gBACL,wCAAwC;gBACxC,aAAa,GAAG,MAAM,CAAC;aACxB;SACF;KACF;IAED,MAAM,QAAQ,GAAG,mBAAmB,CAAC,QAAQ,CAAC,aAAa,CAAC;QAC1D,CAAC,CAAC,mBAAmB;QACrB,CAAC,CAAC,GAAG,mBAAmB,GAAG,aAAa,EAAE,CAAC;IAC7C,kFAAkF;IAClF,MAAM,aAAa,GAAG,IAAA,0BAAiB,EAAC,OAAO,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;IAC9E,OAAO,aAAa,CAAC;AACvB,CAAC;AArCD,sDAqCC;AAED,SAAgB,kBAAkB,CAAC,IAAY,EAAE,WAAmB;IAClE,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAClD,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAChD,CAAC;AALD,gDAKC"}

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

@@ -1,17 +0,0 @@
-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/application/files/app/routes/demos/about/whoa.tsx__tmpl__

@@ -1,20 +0,0 @@
-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/application/files/app/routes/demos/about.tsx__tmpl__

@@ -1,44 +0,0 @@
-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/application/files/app/routes/demos/actions.tsx__tmpl__

@@ -1,101 +0,0 @@
-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/application/files/app/routes/demos/correct.tsx__tmpl__

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

package/src/generators/application/files/app/routes/demos/params/$id.tsx__tmpl__

@@ -1,110 +0,0 @@
-import { useCatch, Link, json, useLoaderData } from "remix";
-import type { LoaderFunction, MetaFunction } from "remix";
-
-// The `$` in route filenames becomes a pattern that's parsed from the URL and
-// passed to your loaders so you can look up data.
-// - https://remix.run/api/conventions#loader-params
-export let loader: LoaderFunction = async ({ params }) => {
-  // pretend like we're using params.id to look something up in the db
-
-  if (params.id === "this-record-does-not-exist") {
-    // If the record doesn't exist we can't render the route normally, so
-    // instead we throw a 404 reponse to stop running code here and show the
-    // user the catch boundary.
-    throw new Response("Not Found", { status: 404 });
-  }
-
-  // now pretend like the record exists but the user just isn't authorized to
-  // see it.
-  if (params.id === "shh-its-a-secret") {
-    // Again, we can't render the component if the user isn't authorized. You
-    // can even put data in the response that might help the user rectify the
-    // issue! Like emailing the webmaster for access to the page. (Oh, right,
-    // `json` is just a Response helper that makes it easier to send JSON
-    // responses).
-    throw json({ webmasterEmail: "hello@remix.run" }, { status: 401 });
-  }
-
-  // Sometimes your code just blows up and you never anticipated it. Remix will
-  // automatically catch it and send the UI to the error boundary.
-  if (params.id === "kaboom") {
-    lol();
-  }
-
-  // but otherwise the record was found, user has access, so we can do whatever
-  // else we needed to in the loader and return the data. (This is boring, we're
-  // just gonna return the params.id).
-  return { param: params.id };
-};
-
-export default function ParamDemo() {
-  let data = useLoaderData();
-  return (
-    <h1>
-      The param is <i style={{ color: "red" }}>{data.param}</i>
-    </h1>
-  );
-}
-
-// https://remix.run/api/conventions#catchboundary
-// https://remix.run/api/remix#usecatch
-// https://remix.run/api/guides/not-found
-export function CatchBoundary() {
-  let caught = useCatch();
-
-  let message: React.ReactNode;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Looks like you tried to visit a page that you do not have access to.
-          Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
-        </p>
-      );
-    case 404:
-      message = (
-        <p>Looks like you tried to visit a page that does not exist.</p>
-      );
-    default:
-      message = (
-        <p>
-          There was a problem with your request!
-          <br />
-          {caught.status} {caught.statusText}
-        </p>
-      );
-  }
-
-  return (
-    <>
-      <h2>Oops!</h2>
-      <p>{message}</p>
-      <p>
-        (Isn't it cool that the user gets to stay in context and try a different
-        link in the parts of the UI that didn't blow up?)
-      </p>
-    </>
-  );
-}
-
-// https://remix.run/api/conventions#errorboundary
-// https://remix.run/api/guides/not-found
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
-  return (
-    <>
-      <h2>Error!</h2>
-      <p>{error.message}</p>
-      <p>
-        (Isn't it cool that the user gets to stay in context and try a different
-        link in the parts of the UI that didn't blow up?)
-      </p>
-    </>
-  );
-}
-
-export let meta: MetaFunction = ({ data }) => {
-  return {
-    title: data ? `Param: ${data.param}` : "Oops...",
-  };
-};

package/src/generators/application/files/app/routes/demos/params/index.tsx__tmpl__

@@ -1,40 +0,0 @@
-import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
-import type { LoaderFunction } from "remix";
-
-export default function Boundaries() {
-  return (
-    <>
-      <h2>Params</h2>
-      <p>
-        When you name a route segment with $ like{" "}
-        <code>routes/users/$userId.js</code>, the $ segment will be parsed from
-        the URL and sent to your loaders and actions by the same name.
-      </p>
-      <h2>Errors</h2>
-      <p>
-        When a route throws and error in it's action, loader, or component,
-        Remix automatically catches it, won't even try to render the component,
-        but it will render the route's ErrorBoundary instead. If the route
-        doesn't have one, it will bubble up to the routes above it until it hits
-        the root.
-      </p>
-      <p>So be as granular as you want with your error handling.</p>
-      <h2>Not Found</h2>
-      <p>
-        (and other{" "}
-        <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses">
-          client errors
-        </a>
-        )
-      </p>
-      <p>
-        Loaders and Actions can throw a <code>Response</code> instead of an
-        error and Remix will render the CatchBoundary instead of the component.
-        This is great when loading data from a database isn't found. As soon as
-        you know you can't render the component normally, throw a 404 response
-        and send your app into the catch boundary. Just like error boundaries,
-        catch boundaries bubble, too.
-      </p>
-    </>
-  );
-}

package/src/generators/application/files/app/routes/demos/params.tsx__tmpl__

@@ -1,43 +0,0 @@
-import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
-
-export function meta() {
-  return { title: "Boundaries Demo" };
-}
-
-export default function Boundaries() {
-  return (
-    <div className="remix__page">
-      <main>
-        <Outlet />
-      </main>
-
-      <aside>
-        <h2>Click these Links</h2>
-        <ul>
-          <li>
-            <Link to=".">Start over</Link>
-          </li>
-          <li>
-            <Link to="one">
-              Param: <i>one</i>
-            </Link>
-          </li>
-          <li>
-            <Link to="two">
-              Param: <i>two</i>
-            </Link>
-          </li>
-          <li>
-            <Link to="this-record-does-not-exist">This will be a 404</Link>
-          </li>
-          <li>
-            <Link to="shh-its-a-secret">And this will be 401 Unauthorized</Link>
-          </li>
-          <li>
-            <Link to="kaboom">This one will throw an error</Link>
-          </li>
-        </ul>
-      </aside>
-    </div>
-  );
-}

package/src/generators/application/files/app/styles/dark.css

@@ -1,7 +0,0 @@
-:root {
-  --color-foreground: hsl(0, 0%, 100%);
-  --color-background: hsl(0, 0%, 7%);
-  --color-links: hsl(213, 100%, 73%);
-  --color-links-hover: hsl(213, 100%, 80%);
-  --color-border: hsl(0, 0%, 25%);
-}

package/src/generators/application/files/app/styles/demos/about.css

@@ -1,26 +0,0 @@
-/*
- * Whoa whoa whoa, wait a sec...why are we overriding global CSS selectors?
- * Isn't that kind of scary? How do we know this won't have side effects?
- *
- * In Remix, CSS that is included in a route file will *only* show up on that
- * route (and for nested routes, its children). When the user navigates away
- * from that route the CSS files linked from those routes will be automatically
- * unloaded, making your styles much easier to predict and control.
- *
- * Read more about styling routes in the docs:
- * https://remix.run/guides/styling
- */
-
-:root {
-  --color-foreground: hsl(0, 0%, 7%);
-  --color-background: hsl(56, 100%, 50%);
-  --color-links: hsl(345, 56%, 39%);
-  --color-links-hover: hsl(345, 51%, 49%);
-  --color-border: rgb(184, 173, 20);
-  --font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-}
-
-.about__intro {
-  max-width: 500px;
-}