breaking: update packages to latest major versions; ts initial pass

drashland · Jul 4, 2023 · eb39be1 · eb39be1
1 parent 6dc4c59
commit eb39be1
Show file tree

Hide file tree

Showing 26 changed files with 2,436 additions and 862 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,4 +31,4 @@ yarn-error.log*
 .env.production.local
 
 # vscode
-.vscode
+.vscode
diff --git a/babel.config.json b/babel.config.json
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -1,105 +1,9 @@
-// next.config.js
+/** @type {import("next").NextConfig} */
 module.exports = {
-  publicRuntimeConfig: {
-    app: {
-      env: process.APP_ENV || "production",
-    },
-    localStorageKeys: {
-      darkMode: "drash_land_dark_mode",
-    },
-    // A list of modules that have been migrated over to Next.js. This is used
-    // in the `[...path_params].js` file. If documentation pages for a module
-    // are requested, then `[...path_params].js` will check to see if that
-    // module is listed here and will do one of the following:
-    //
-    //   - If the module is not listed here, then Next.js will end up showing
-    //     the 404 page.
-    //   - If the module is listed here, then Next.js will redirect the user to:
-    //         /{module}/{version}/getting-started/introduction
-    //   - If a module is listed here AND is set to redirect (see the
-    //     `redirects` config down below), then Next.js will redirect the user
-    //     using the `destination` in the `redirects` config.
-    modules: [
-      "dmm",
-      "drash",
-      "line",
-      "sinco",
-      "wocket",
-      "rhum",
-      "vital",
-    ],
-    docDenoLandUrls: {
-      dmm: "https://doc.deno.land/https/deno.land/x/dmm/mod.ts",
-      drash: "https://doc.deno.land/https/deno.land/x/drash/mod.ts",
-      line: "https://doc.deno.land/https/deno.land/x/line/mod.ts",
-      rhum: "https://doc.deno.land/https/deno.land/x/rhum/mod.ts",
-      sinco: "https://doc.deno.land/https/deno.land/x/sinco/mod.ts",
-      wocket: "https://doc.deno.land/https/deno.land/x/wocket/mod.ts",
-      vital: "https://doc.deno.land/https/deno.land/x/vital/mod.ts",
-    },
-    gitHubUrls: {
-      dmm: "https://github.com/drashland/dmm",
-      drash: "https://github.com/drashland/drash",
-      line: "https://github.com/drashland/line",
-      sinco: "https://github.com/drashland/sinco",
-      rhum: "https://github.com/drashland/rhum",
-      wocket: "https://github.com/drashland/wocket",
-      website: "https://github.com/drashland/website-v2",
-      vital: "https://github.com/drashland/vital",
-    },
-    roadmapsUrls: {
-      drash:
-        "https://github.com/drashland/drash/issues?q=is%3Aissue+is%3Aopen+roadmap",
-      line:
-        "https://github.com/drashland/line/issues?q=is%3Aissue+is%3Aopen+roadmap",
-    },
-    versions: {
-      drash: {
-        versions: [
-          "v1.x",
-          "v2.x",
-        ],
-      },
-      line: {
-        versions: [
-          "v0.x",
-          "v1.x",
-        ],
-      },
-      sinco: {
-        versions: [
-          "v1.x",
-          "v2.x",
-          "v3.x",
-          "v4.x",
-        ],
-      },
-      wocket: {
-        versions: [
-          "v0.x",
-          "v1.x",
-        ],
-      },
-      dmm: {
-        versions: [
-          "v1.x",
-          "v2.x",
-        ],
-      },
-      rhum: {
-        versions: [
-          "v1.x",
-          "v2.x",
-        ],
-      },
-      vital: {
-        versions: [
-          "v1.x",
-        ],
-      },
-    },
-  },
   reactStrictMode: false,
+  compiler: {
+    styledComponents: true,
+  },
   redirects() {
     return [
       // Redirect pages without content to the nearest page with content

diff --git a/package.json b/package.json
@@ -5,21 +5,28 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "clean": "rm -rf node_modules && rm yarn.lock && yarn",
     "fmt": "deno fmt src/ docs/ pages/ tests/ styles/ README.md",
     "start": "next start"
   },
   "dependencies": {
-    "next": "12.x",
-    "react": "17.x",
-    "react-dom": "17.x",
-    "react-switch": "6.x",
-    "styled-components": "5.x"
+    "next": "13.x",
+    "react": "18.x",
+    "react-dom": "18.x"
   },
   "devDependencies": {
     "@styled-icons/bootstrap": "10.x",
     "@styled-icons/octicons": "10.x",
+    "@types/node": "20.3.3",
+    "@types/react": "^18.2.14",
+    "@types/styled-components": "^5.1.26",
+    "react-is": "16.x",
     "react-markdown": "8.x",
-    "title-case": "3.x"
+    "react-switch": "7.x",
+    "styled-components": "6.x",
+    "title-case": "3.x",
+    "typescript": "5.x"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }
diff --git a/pages/[...path_params].jsx → pages/[...path_params].tsx b/pages/[...path_params].jsx → pages/[...path_params].tsx
@@ -1,17 +1,17 @@
 import { useEffect, useState } from "react";
 import * as fs from "fs";
 import path from "path";
-import Layout from "../src/components/Layout";
+import Layout from "@/src/components/Layout";
 import styled, { ThemeContext } from "styled-components";
 import { titleCase } from "title-case";
 import { useRouter } from "next/router";
 import {
   convertFilenameToURL,
   formatLabel,
 } from "../src/services/string_service";
-import { publicRuntimeConfig } from "../src/services/config_service";
 import ReactMarkdown from "react-markdown";
-import * as Markdown from "../src/components/Markdown";
+import * as Markdown from "@/src/components/Markdown";
+import { runtimeConfig } from "@/src/config";
 
 /**
  * This constant is used for associating all markdown files with page URIs.
@@ -56,7 +56,8 @@ export default function Page(props) {
   useEffect(() => {
     // If we are redirecting, then we need to do that as soon as possible
     if (redirectUri) {
-      return router.replace(redirectUri);
+      router.replace(redirectUri);
+      return;
     }
 
     window.document.title = getPageTitle();
@@ -97,12 +98,9 @@ export default function Page(props) {
           h2: Markdown.Heading2,
           h3: Markdown.Heading3,
           h4: Markdown.Heading4,
-          li: Markdown.ListItem,
           code: Markdown.Code,
           pre: Markdown.Pre,
           p: Markdown.Paragraph,
-          ol: Markdown.OrderedList,
-          ul: Markdown.UnorderedList,
           img: Markdown.Image,
         }}
       >
@@ -129,21 +127,21 @@ export function getStaticProps({ params }) {
   try {
     markdown = fs.readFileSync(markdownFile, "utf-8");
   } catch (error) {
-    if (publicRuntimeConfig.app.env !== "production") {
+    if (runtimeConfig.app.env !== "production") {
       console.log(`\nMarkdown Error\n`, error);
     }
   }
 
   const module = params.path_params[0];
-  const versions = publicRuntimeConfig.versions[module].versions;
+  const versions = runtimeConfig.versions[module].versions;
   let version = params.path_params[1];
 
   if (!version) {
     version = versions[versions.length - 1];
   }
 
   const editThisPageUrl =
-    `${publicRuntimeConfig.gitHubUrls.website}/edit/main/${markdownFile}`;
+    `${runtimeConfig.gitHubUrls.website}/edit/main/${markdownFile}`;
 
   // Check if we need to redirect the user to the Introduction page. This code
   // exists because users can go to https://drash.land/drash, but that page
@@ -153,7 +151,7 @@ export function getStaticProps({ params }) {
   //
   let redirectUri = null;
   if (params.path_params.length <= 2) {
-    if (publicRuntimeConfig.modules.indexOf(params.path_params[0]) != -1) {
+    if (runtimeConfig.modules.indexOf(params.path_params[0]) != -1) {
       redirectUri = `${module}/${version}/getting-started/introduction`;
     }
   }
@@ -257,4 +255,4 @@ function getSideBarCategories(module, version) {
 function getCategoryLabel(title) {
   const label = titleCase(title).replace(/-/g, " ");
   return formatLabel(label);
-}
+}
diff --git a/pages/_app.jsx → pages/_app.tsx b/pages/_app.jsx → pages/_app.tsx
@@ -44,4 +44,4 @@ export default function MyApp({ Component, pageProps }) {
       <Component {...pageProps} />
     </>
   );
-}
+}
diff --git a/pages/index.jsx → pages/index.tsx b/pages/index.jsx → pages/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { useRouter } from "next/router";
-import LayoutTopBar from "../src/components/LayoutTopBar";
-import LoadingScreen from "../src/components/LoadingScreen";
-import { common as theme } from "../styles/theme.js";
+import LayoutTopBar from "@/src/components/LayoutTopBar";
+import LoadingScreen from "@/src/components/LoadingScreen";
+import { common as theme } from "@/styles/theme";
 
 const MAINTAINERS = [
   {
@@ -120,8 +120,8 @@ const Main = styled.div`
 `;
 
 const Section = styled.div`
-  background: ${({ background }) => background ? background : "#ffffff"};
-  color: ${({ color }) => color ? color : "#333333"};
+  background: ${({ $background }) => $background ? $background : "#ffffff"};
+  color: ${({ $color }) => $color ? $color : "#333333"};
   display: flex;
   padding: 4rem 2rem;
   justify-content: center;
@@ -330,7 +330,7 @@ export default function Home() {
             </div>
           </InnerContainer>
         </Section>
-        <Section background="#2f343c" color="#ffffff">
+        <Section $background="#2f343c" $color="#ffffff">
           <InnerContainer>
             <SectionTitle>Our Software</SectionTitle>
             <CardsContainer>
@@ -525,12 +525,12 @@ export default function Home() {
             </MaintainersContainer>
           </InnerContainer>
         </Section>
-        <Section background="#2f343c" color="#ffffff">
+        <Section $background="#2f343c" $color="#ffffff">
           <InnerContainer>
-            <Copyright>&copy; 2019 - 2022 Drash Land</Copyright>
+            <Copyright>&copy; 2019 - 2023 Drash Land</Copyright>
           </InnerContainer>
         </Section>
       </Main>
     </Container>
   );
-}
+}
diff --git a/src/services/content_replacer_service.js → src/component_replacements.tsx b/src/services/content_replacer_service.js → src/component_replacements.tsx
@@ -1,71 +1,4 @@
-import { Code, Paragraph, Pre } from "../components/Markdown";
-
-export const CODE_BLOCK_COMMENT_REPLACEMENTS = [
-  {
-    from: /\/\/ @Import drash_from_deno$/gm,
-    to:
-      `// Replace \`<VERSION>\` with the latest version of Drash v2.x. The latest\n` +
-      `// version can be found at https://github.com/drashland/drash/releases/latest\n` +
-      `import * as Drash from "https://deno.land/x/drash@<VERSION>/mod.ts";`,
-  },
-  {
-    from: /\/\/ @Export drash_from_deno_no_version_comment$/gm,
-    to: `export * as Drash from "https://deno.land/x/drash@<VERSION>/mod.ts";`,
-  },
-  {
-    from: /\/\/ @Export csrf_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { CSRFService } from "https://deno.land/x/drash@<VERSION>/src/services/csrf/csrf.ts";`,
-  },
-  {
-    from: /\/\/ @Export dexter_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { DexterService } from "https://deno.land/x/drash@<VERSION>/src/services/dexter/dexter.ts";`,
-  },
-  {
-    from: /\/\/ @Export etag_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { ETagService } from "https://deno.land/x/drash@<VERSION>/src/services/etag/etag.ts";`,
-  },
-  {
-    from: /\/\/ @Export graphql_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { GraphQL, GraphQLService } from "https://deno.land/x/drash@<VERSION>/src/services/graphql/graphql.ts";`,
-  },
-  {
-    from: /\/\/ @Export paladin_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { PaladinService } from "https://deno.land/x/drash@<VERSION>/src/services/paladin/paladin.ts";`,
-  },
-  {
-    from: /\/\/ @Export rate_limiter_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { RateLimiterService } from "https://deno.land/x/drash@<VERSION>/src/services/rate_limiter/rate_limiter.ts";`,
-  },
-  {
-    from:
-      /\/\/ @Export resource_loader_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { ResourceLoaderService } from "https://deno.land/x/drash@<VERSION>/src/services/resource_loader/resource_loader.ts";`,
-  },
-  {
-    from: /\/\/ @Export response_time_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { ResponseTimeService } from "https://deno.land/x/drash@<VERSION>/src/services/response_time/response_time.ts";`,
-  },
-  {
-    from: /\/\/ @Export tengine_service_from_deno_no_version_comment$/gm,
-    to:
-      `export { TengineService } from "https://deno.land/x/drash@<VERSION>/src/services/tengine/tengine.ts";`,
-  },
-  {
-    from: /\/\/ @Import line_v1_from_deno$/gm,
-    to:
-      `// Replace \`<VERSION>\` with the latest version of Line v1.x. The latest\n` +
-      `// version can be found at https://github.com/drashland/line/releases/latest\n` +
-      `import * as Line from "https://deno.land/x/line@<VERSION>/mod.ts";`,
-  },
-];
+import { Code, Paragraph, Pre } from "@/src/components/Markdown";
 
 /**
  * Replacement mappings for content.

diff --git a/src/components/Breadcrumbs.jsx → src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.jsx → src/components/Breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { formatLabel } from "../services/string_service";
+import { formatLabel } from "@/src/services/string_service";
 import { titleCase } from "title-case";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -16,7 +16,7 @@ const Container = styled.div`
 `;
 
 const Breadcrumb = styled.div`
-  color: ${({ theme }) => theme.breadcrumbs.color};
+  color: ${(props) => props.theme.breadcrumbs.color};
   display: inline-block;
 
   .slash {

diff --git a/src/components/InnerContainer.jsx → src/components/InnerContainer.tsx b/src/components/InnerContainer.jsx → src/components/InnerContainer.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,4 +31,4 @@ yarn-error.log* @@
     .env.production.local
     # vscode
-    .vscode
+    .vscode