Merge pull request #496 from narumincho/dev-next

一部 Next.js Vercel に移植

Author: narumincho

.gitignore

@@ -20,3 +20,4 @@ node_modules/
 /core/**/**.js
 /.next/
 tsconfig.tsbuildinfo
+/.vercel/

static/hack_regular_subset.woff2 assets/hack_regular_subset.woff2

@@ -2,11 +2,11 @@ import * as d from "../../localData";
 import * as indexedDB from "../indexedDB";
 import { AddMessage, useNotification } from "./useNotification";
 import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
-import { locationAndLanguageToUrl, urlToUrlData } from "../../common/url";
 import type { TypePartIdAndMessage } from "../../core/TypePartIdAndMessage";
 import { api } from "../api";
 import { generateTypeScriptCode } from "../../core/main";
 import { jsTs } from "../../gen/main";
+import { urlToUrlData } from "../../common/url";
 import { useResourceState } from "./resourceState";
 import { useTypePartIdListInProject } from "./typePartIdListInProject";
 
@@ -253,21 +253,16 @@ export const useDefinyApp = (): UseDefinyAppResult => {
    */
   const jump = useCallback(
     (newLocationAndLanguage: d.LocationAndLanguage): void => {
-      window.history.pushState(
-        undefined,
-        "",
-        locationAndLanguageToUrl(newLocationAndLanguage).toString()
+      console.log(
+        JSON.stringify(newLocationAndLanguage) + "にjump したいようだ"
       );
-      setLocationAndLanguage(newLocationAndLanguage);
     },
     []
   );
 
   const replace = (newLocationAndLanguage: d.LocationAndLanguage): void => {
-    window.history.replaceState(
-      undefined,
-      "",
-      locationAndLanguageToUrl(newLocationAndLanguage).toString()
+    console.log(
+      JSON.stringify(newLocationAndLanguage) + "にURLを変えたいようだ"
     );
     setLocationAndLanguage(newLocationAndLanguage);
   };

static/icon.png assets/icon.png

@@ -1,9 +1,15 @@
 import * as d from "../localData";
 import * as s from "../staticResource";
-import { structuredUrlToUrl, urlToStructuredUrl } from "../gen/url/main";
+import {
+  StructuredUrl,
+  structuredUrlToNodeUrlObject,
+  structuredUrlToUrl,
+  urlToStructuredUrl,
+} from "../gen/url/main";
+import type { UrlObject } from "url";
 import { clientScriptPath } from "../clientScriptHash";
 
-const languageQueryKey = "hl";
+export const languageQueryKey = "hl";
 export const defaultLanguage: d.Language = "English";
 
 const origin =
@@ -19,23 +25,64 @@ export const locationAndLanguageToUrl = (
     searchParams: new Map<string, string>([
       [
         languageQueryKey,
-        dataLanguageToHlQueryValue(locationAndLanguage.language),
+        dataLanguageToQueryValue(locationAndLanguage.language),
       ],
     ]),
   });
 };
 
-const dataLanguageToHlQueryValue = (language: d.Language): string => {
+export const locationAndLanguageToStructuredUrl = (
+  locationAndLanguage: d.LocationAndLanguage
+): StructuredUrl => {
+  return {
+    path: locationToPathList(locationAndLanguage.location),
+    searchParams: new Map<string, string>([
+      [
+        languageQueryKey,
+        dataLanguageToQueryValue(locationAndLanguage.language),
+      ],
+    ]),
+  };
+};
+
+export const locationAndLanguageToNodeUrlObject = (
+  locationAndLanguage: d.LocationAndLanguage
+): UrlObject => {
+  return structuredUrlToNodeUrlObject(
+    locationAndLanguageToStructuredUrl(locationAndLanguage)
+  );
+};
+
+export const dataLanguageToQueryValue = (language: d.Language): string => {
   switch (language) {
     case "English":
-      return "en";
+      return englishId;
     case "Japanese":
-      return "ja";
+      return japaneseId;
     case "Esperanto":
-      return "eo";
+      return esperantoId;
   }
 };
 
+export const queryValueToDataLanguage = (language: string): d.Language => {
+  switch (language) {
+    case englishId:
+      return "English";
+    case japaneseId:
+      return "Japanese";
+    case esperantoId:
+      return "Esperanto";
+  }
+  return defaultLanguage;
+};
+
+export const isValidLanguageQueryValue = (value: unknown): boolean => {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return new Set([englishId, japaneseId, esperantoId]).has(value);
+};
+
 const locationToPathList = (location: d.Location): ReadonlyArray<string> => {
   switch (location._) {
     case "Home":
@@ -76,7 +123,9 @@ const toolToPath = (toolName: d.ToolName): string => {
  * URLのパスを場所のデータに変換する
  * @param url `https://definy.app/project/580d8d6a54cf43e4452a0bba6694a4ed?hl=ja` のようなURL
  */
-export const urlToUrlData = (url: URL): d.UrlData => {
+export const urlToUrlData = (
+  url: Readonly<Pick<URL, "pathname" | "search">>
+): d.UrlData => {
   const structuredUrl = urlToStructuredUrl(url.pathname, url.search);
   if (
     structuredUrl.path[0] === "logInCallback" &&
@@ -153,11 +202,11 @@ const locationFromUrl = (path: ReadonlyArray<string>): d.Location => {
 
 const languageFromIdString = (languageAsString: string): d.Language => {
   switch (languageAsString) {
-    case "ja":
+    case japaneseId:
       return "Japanese";
-    case "en":
+    case englishId:
       return "English";
-    case "eo":
+    case esperantoId:
       return "Esperanto";
   }
   return defaultLanguage;
@@ -191,3 +240,7 @@ const localProjectPath = "local-project";
 const toolPath = "tool";
 const toolThemeColorRainbow = "theme-color-rainbow";
 const toolSoundQuiz = "sound-quiz";
+
+const englishId = "en";
+const esperantoId = "eo";
+const japaneseId = "ja";