v1.1.0リリース作業

.eslintignore

@@ -0,0 +1,2 @@
+.eslintrc.cjs
+.prettierrc.cjs

.eslintrc.cjs

@@ -4,29 +4,32 @@ module.exports = {
     browser: true,
     node: true,
   },
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2021,
-    sourceType: "module",
-    project: "./tsconfig.json",
+    sourceType: 'module',
+    project: './tsconfig.json',
   },
   settings: {
     react: {
-      version: "detect",
+      version: 'detect',
     },
   },
   extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:react/recommended",
-    "prettier",
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:react/recommended',
+    'prettier',
   ],
   ignorePatterns: [
-    ".eslintrc.js",
-    "webpack.common.js",
-    "webpack.prod.js",
-    "webpack.dev.js",
-    "babel.config.js",
+    '.eslintrc.js',
+    'webpack.common.js',
+    'webpack.prod.js',
+    'webpack.dev.js',
+    'babel.config.js',
   ],
+  rules: {
+    'react/no-unknown-property': ['error', { ignore: ['jsx'] }],
+  },
 };

.github/dependabot.yml

@@ -9,3 +9,4 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+    target-branch: "develop"

.node-version

@@ -1 +1 @@
-16.15.0
+20.0.0

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+## [Unreleased][unreleased]
+
+## [1.1.0]
+
+- fix: 検索対象のサイトがWindowを閉じるたびにリセットさてていた不具合を修正
+- fix: 視認性を上げるためデザイン変更を行いました
+- feature: 検索対象サイトの保持ルールに関しての設定項目を追加
+
+## [1.0.5] 2022-06-02
+
+- 初回リリース

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qkd",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "",
   "scripts": {
     "build": "run-p build:*",
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/ken7253/qkd#readme",
   "volta": {
-    "node": "16.15.0"
+    "node": "20.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
@@ -41,10 +41,10 @@
     "@typescript-eslint/parser": "^5.30.3",
     "babel-loader": "^9.1.2",
     "cpx": "^1.5.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.1",
-    "npm-check-updates": "^16.0.5",
+    "eslint-plugin-react": "^7.31.11",
+    "npm-check-updates": "^16.4.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "ts-loader": "^9.3.1",
@@ -55,6 +55,6 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-jsx": "^5.0.2"
+    "styled-jsx": "^5.1.0"
   }
 }

src/components/Contents.tsx

@@ -1,18 +1,61 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import DocumentSearch from './DocumentSearch';
 import SelectProvider from './SelectProvider';
+import Settings from './Settings';
+
+export type ProviderList = Provider[];
+
+interface Provider {
+  name: string;
+  displayName?: string;
+  baseURL: `https://${string}`;
+  query: string;
+  color?: `#${string}`;
+}
 
 const Contents = () => {
-  const [url, setURL] = useState<URL | undefined>();
+  const providerList = [
+    {
+      name: 'MDN' as const,
+      baseURL: 'https://developer.mozilla.org/ja/search' as const,
+      query: 'q=',
+    },
+    {
+      name: 'Zenn' as const,
+      baseURL: 'https://zenn.dev/search' as const,
+      query: 'q=',
+    },
+    {
+      name: 'Qiita' as const,
+      baseURL: 'https://qiita.com/search' as const,
+      query: 'q=',
+    },
+  ] satisfies ProviderList;
 
-  const getURL = (select: URL | undefined) => {
-    setURL(select);
+  const { storage } = chrome;
+  const fallbackURL = providerList[0].baseURL;
+  const [searchURL, setSearchURL] = useState<string>(fallbackURL);
+
+  const providerUpdateHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setSearchURL(value);
   };
 
+  useEffect(() => {
+    void storage.local.set({
+      lastSelectURL: searchURL,
+    });
+  }, [searchURL]);
+
   return (
     <main>
-      <DocumentSearch searchURL={url} />
-      <SelectProvider onChangeProvider={getURL} />
+      <DocumentSearch href={searchURL} />
+      <SelectProvider
+        provider={providerList}
+        selected={searchURL}
+        onUpdatedProvider={providerUpdateHandler}
+      />
+      <Settings items={providerList}></Settings>
     </main>
   );
 };

src/components/DocumentSearch.tsx

@@ -1,27 +1,26 @@
 import React, { ChangeEvent, useState } from 'react';
 
 interface Props {
-  searchURL: URL | undefined;
+  href: string;
 }
 
 const DocumentSearch: React.FC<Props> = (props: Props) => {
-  const { searchURL } = props;
+  const { href } = props;
 
   const [word, setWord] = useState('');
 
-  const link = searchURL && word ? `${searchURL.toString()}${word}` : undefined;
+  const link = href && word ? `${href}?q=${word}` : undefined;
 
-  const changeHandler = (e: ChangeEvent) => {
-    if (e.target instanceof HTMLInputElement) {
-      const safeText = encodeURI(e.target.value);
-      console.log(word);
-      setWord(safeText);
-    }
+  const textUpdateHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const safeText = encodeURI(value);
+    const trimSafeText = safeText.trim();
+    setWord(trimSafeText ?? '');
   };
 
   return (
     <div className="document-search">
-      <input type="search" onChange={(e) => changeHandler(e)} autoFocus></input>
+      <input type="search" onChange={textUpdateHandler} autoFocus></input>
       <a href={link} target="_blank" rel="noreferrer">
         Search
       </a>

src/components/SelectProvider.tsx

@@ -1,99 +1,26 @@
-import React, { ChangeEvent, useState, useEffect } from 'react';
-
-type providerList = Provider[];
-
-interface Provider {
-  name: string;
-  displayName?: string;
-  baseURL: string;
-  query: string | 'q=';
-  color?: string;
-}
+import React, { ChangeEvent } from 'react';
+import { type ProviderList } from './Contents';
 
 interface Props {
-  onChangeProvider?: (select: URL | undefined) => void;
+  selected: string;
+  provider: ProviderList;
+  onUpdatedProvider: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 const SelectProvider: React.FC<Props> = (props: Props) => {
-  const providerList: providerList = [
-    {
-      name: 'mdn',
-      baseURL: 'developer.mozilla.org/ja/search',
-      query: 'q=',
-    },
-    {
-      name: 'zenn',
-      baseURL: 'zenn.dev/search',
-      query: 'q=',
-    },
-    {
-      name: 'qiita',
-      baseURL: 'qiita.com/search',
-      query: 'q=',
-    },
-  ];
-
-  const { onChangeProvider } = props;
-
-  const URL_SCHEMA = 'https://' as const;
-  const COOKIE_NAME = 'selectedProvider' as const;
-  const getDefaultProvider = (): string | undefined => {
-    const rawCookie = document.cookie;
-    return rawCookie
-      .split('; ')
-      .find((row) => row.startsWith(COOKIE_NAME))
-      ?.split('=')[1];
-  };
-
-  const [current, setCurrent] = useState<URL>(
-    new URL(`${URL_SCHEMA}${providerList[0].baseURL}?${providerList[0].query}`),
-  );
-  const [provider, setProvider] = useState(
-    getDefaultProvider() || providerList[0].name,
-  );
-
-  const changeHandler = (e: ChangeEvent) => {
-    if (e.target instanceof HTMLInputElement) {
-      const item = providerList.find((value) => {
-        if (e.target instanceof HTMLInputElement) {
-          return value.name === e.target.value;
-        }
-      });
-
-      if (!item) return;
-      const absolute = new URL(`${URL_SCHEMA}${item.baseURL}?${item.query}`);
-      setProvider(item.name);
-      setCurrent(absolute);
-      if (onChangeProvider) {
-        onChangeProvider(absolute);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (onChangeProvider) onChangeProvider(current);
-
-    return () => {
-      if (onChangeProvider) onChangeProvider(undefined);
-    };
-  }, []);
-
-  useEffect(() => {
-    /** @todo Retains side effects and should be considered for modification. */
-    document.cookie = `${COOKIE_NAME}=${provider}`;
-  }, [provider]);
+  const { onUpdatedProvider, provider, selected } = props;
 
   return (
     <div className="select-provider">
-      {providerList.map((item) => {
+      {provider.map((item) => {
         return (
           <label key={item.name}>
             <input
               type="radio"
               name="provider"
-              value={item.name}
-              defaultChecked={item.name === provider}
-              onChange={changeHandler}
+              value={item.baseURL}
+              defaultChecked={item.baseURL === selected}
+              onChange={onUpdatedProvider}
             ></input>
             <span>{item.displayName || item.name}</span>
           </label>
@@ -129,14 +56,19 @@ const SelectProvider: React.FC<Props> = (props: Props) => {
           align-items: center;
           width: 100%;
           height: 100%;
-          color: var(--c-theme-light);
+          color: var(--c-lightest);
           border-radius: 5px;
           font-weight: 700;
+          font-size: 1rem;
+          line-height: 1;
           background-color: var(--c-theme-main);
         }
+        input:checked + span::before {
+          content: '✔';
+          padding-right: 4px;
+        }
         input:checked + span {
           background-color: var(--c-theme-dark);
-          color: var(--c-theme-light);
         }
       `}</style>
     </div>