Upgrade to @udibo/[email protected]

Author: KyleJune

.github/workflows/main.yml

@@ -31,7 +31,8 @@
         "--inspect-wait"
       ],
       "env": {
-        "APP_ENV": "production"
+        "APP_ENV": "production",
+        "NODE_ENV": "production"
       },
       "attachSimplePort": 9229
     },
@@ -48,7 +49,26 @@
         "--inspect-wait"
       ],
       "env": {
-        "APP_ENV": "test"
+        "APP_ENV": "test",
+        "NODE_ENV": "development"
+      },
+      "attachSimplePort": 9229
+    },
+    {
+      "request": "launch",
+      "name": "deno task: dev",
+      "type": "node",
+      "program": "${workspaceFolder}/dev.ts",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "deno",
+      "runtimeArgs": [
+        "run",
+        "-A",
+        "--inspect-wait"
+      ],
+      "env": {
+        "APP_ENV": "development",
+        "NODE_ENV": "development"
       },
       "attachSimplePort": 9229
     }

.vscode/launch.json

@@ -3,10 +3,8 @@
   "deno.lint": true,
   "deno.unstable": false,
   "deno.config": "./deno.jsonc",
-  "deno.importMap": "./import_map.json",
-  "deno.suggest.imports.hosts": {
-    "https://deno.land": true
-  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
   "editor.quickSuggestions": {
     "strings": true
   }

.vscode/settings.json

@@ -29,17 +29,29 @@ To run the tests, use `deno task test` or `deno task test-watch`.
 
 To check formatting and run lint, use `deno task check`.
 
-To create a build and to run the build, use `deno task build` and
-`deno task run`. By default, the application builds and runs in development
-mode. To build and run a production build, set the `APP_ENV` environment
-variable to `production`.
+The following 2 commands can be used for creating builds.
+
+- `deno task build-dev`: Builds the application in development mode.
+- `deno task build-prod`: Builds the application in production mode.
+
+A build must be generated before you can run an application. You can use the
+following 2 commands to run the application.
+
+- `deno task run-dev`: Runs the application in development mode.
+- `deno task run-prod`: Runs the application in production mode.
 
 To run the application in development mode with live reloading, use
 `deno task dev`.
 
 When in development, identifiers are not minified and sourcemaps are generated
 and linked.
 
+The commands ending in `-dev` and `-prod` set the `APP_ENV` and `NODE_ENV`
+environment variables. The `NODE_ENV` environment variable is needed for react.
+If you use the `deno task build` or `deno task run` tasks, you should make sure
+that you set both of those environment variables. Those environment variables
+are also needed if you deploy to Deno Deploy.
+
 ## Contributing
 
 To contribute, please read the [contributing instruction](CONTRIBUTING.md).

README.md

@@ -0,0 +1,13 @@
+import { assertEquals } from "@std/assert";
+import { describe, it } from "@std/testing/bdd";
+
+import { render } from "../test-utils.tsx";
+
+import { Loading } from "./loading.tsx";
+
+const loadingTests = describe("Loading component");
+
+it(loadingTests, "renders loading message", () => {
+  using screen = render(<Loading />);
+  assertEquals(screen.getByText("Loading...").textContent, "Loading...");
+});

app.tsx

@@ -1 +1,3 @@
-export const Loading = () => <div>Loading...</div>;
+export function Loading() {
+  return <div>Loading...</div>;
+}

components/loading.test.tsx

@@ -0,0 +1,14 @@
+import type { Post } from "../models/posts.ts";
+
+export const posts: { [id: number]: Post } = {
+  0: {
+    id: 0,
+    title: "My first post",
+    content: "This is my first post.",
+  },
+  1: {
+    id: 1,
+    title: "My second post",
+    content: "This is my second post.",
+  },
+};

components/loading.tsx

@@ -1,24 +1,60 @@
 {
   "tasks": {
-    "build": "deno run -A --import-map=./import_map.json https://deno.land/x/[email protected]/build.ts",
+    // Builds the application.
+    "build": "deno run -A --config=deno.jsonc jsr:@udibo/[email protected]/build",
+    // Builds the application in development mode.
+    "build-dev": "export APP_ENV=development NODE_ENV=development && deno task build",
+    // Builds the application in production mode.
+    "build-prod": "export APP_ENV=production NODE_ENV=production && deno task build",
+    // Builds and runs the application in development mode, with hot reloading.
+    "dev": "export APP_ENV=development NODE_ENV=development && deno run -A --config=deno.jsonc jsr:@udibo/[email protected]/dev",
+    // Runs the application. Requires the application to be built first.
     "run": "deno run -A ./main.ts",
-    "dev": "deno run -A --import-map=./import_map.json https://deno.land/x/[email protected]/dev.ts",
-    "test": "export APP_ENV=test && deno test -A .",
-    "test-watch": "export APP_ENV=test && deno test -A --watch .",
+    // Runs the application in development mode. Requires the application to be built first.
+    "run-dev": "export APP_ENV=development NODE_ENV=development && deno task run",
+    // Runs the application in production mode. Requires the application to be built first.
+    "run-prod": "export APP_ENV=production NODE_ENV=production && deno task run",
+    // Runs the tests.
+    "test": "export APP_ENV=test NODE_ENV=development && deno test -A --trace-leaks",
+    // Runs the tests in watch mode.
+    "test-watch": "export APP_ENV=test NODE_ENV=development && deno test -A --trace-leaks --watch",
+    // Checks the formatting and runs the linter.
     "check": "deno lint && deno fmt --check",
-    "cache-reload": "deno cache --reload main.ts && deno cache --reload --import-map=./import_map.json https://deno.land/x/[email protected]/dev.ts",
+    // Gets your branch up to date with master after a squash merge.
     "git-rebase": "git fetch origin main && git rebase --onto origin/main HEAD"
   },
   "compilerOptions": {
     "lib": ["esnext", "dom", "dom.iterable", "dom.asynciterable", "deno.ns"],
     "jsx": "react-jsx",
-    "jsxImportSource": "npm/react"
+    "jsxImportSource": "react",
+    "jsxImportSourceTypes": "@types/react"
   },
   "lint": {
-    "exclude": ["public/build"]
+    "exclude": ["public/build", "routes/_main.ts", "routes/_main.tsx"]
   },
   "fmt": {
     "exclude": ["public/build"]
   },
-  "importMap": "./import_map.json"
+  "imports": {
+    "@udibo/http-error": "jsr:@udibo/http-error@0",
+    "@udibo/react-app": "jsr:@udibo/[email protected]",
+    "@luca/esbuild-deno-loader": "jsr:@luca/[email protected]",
+    "@oak/oak": "jsr:@oak/oak@16",
+    "@std/assert": "jsr:@std/assert@1",
+    "@std/async": "jsr:@std/async@1",
+    "@std/fs": "jsr:@std/fs@0",
+    "@std/log": "jsr:@std/log@0",
+    "@std/path": "jsr:@std/path@1",
+    "@std/testing": "jsr:@std/testing@0",
+    "esbuild": "npm:[email protected]",
+    "react": "npm:react@18",
+    "@types/react": "npm:@types/react@18",
+    "react-dom": "npm:react-dom@18",
+    "react-error-boundary": "npm:react-error-boundary@4",
+    "react-router-dom": "npm:react-router-dom@6",
+    "react-helmet-async": "npm:react-helmet-async@2",
+    "serialize-javascript": "npm:serialize-javascript@6",
+    "@testing-library/react": "npm:@testing-library/react@16",
+    "global-jsdom": "npm:global-jsdom@24"
+  }
 }