Nuxt.jsからNext.jsに移行中
tmtk752016年ごろ触れた感じだとJSXとredux-sagaがどうしても好きになれなくて代わりにVue/Nuxt.jsを選んだ。が、結局JSXが使いたくなってNuxtから切り替えることにした。
Next.js, Recoil, Immer, Emotion辺りを試している。UIは無難にMaterial-UI。Nuxtの頃はVuetify使ってた。
tmtk75Monaco editorのReact componentがあって超助かった。
Nuxtのときは自分で書いてた。
tmtk75Electronでデスクトップアプリ化していた。
Nextにはそのままずばりのひな形があってこれも助かった。
ちなみにNext.jsへの初pull requestはこれ。
tmtk75Nuxtで使っていたlibrary その1
- PouchDB: NoSQL。同期が簡単にできてよかった。
- dayjs: 日付扱うならほぼde factoか。
- fuse.js: fuzzy searching
- hotkeys-js: keyboard shortcut
- lunr: full text search（日本語弱い）
- showdown: Markdown parser
- ulid: "Universally Unique Lexicographically Sortable Identifier" だって。
tmtk75vuexは使ってなかった。composition-api使ってrecoilと同じようなことしてた。
そのおかげでReact Hooksにもすぐ慣れられた。
tmtk75Immerで上と下って挙動違うのね。
produce((draft) => { draft.unshift(something) })
produce((draft) => draft.unshift(something))
useEffect忘れがち。
tmtk75Next.js + Material-UIはそのままだとLinkの扱いが相性悪いので以下のforwardRefが必要。
tmtk75なんでこのwarningになるかは分からないんだけど、
VM31640:37 Warning: React does not recognize the `backgroundColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
defaultValueを使うようにしたら出なくなった。
- value={title}
+ defaultValue={title}
次はこれ。
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component
undefined to a defined value,
アッハイ。
useState(s || "")としてやったら出なくなりました。
tmtk75globalの宣言が変わったみたいだな。globalThisだけになった。
diff --git a/app/electron-src/preload.ts b/app/electron-src/preload.ts
index 88aa70f..8ecf2b5 100644
--- a/app/electron-src/preload.ts
+++ b/app/electron-src/preload.ts
@@ -1,18 +1,14 @@
/* eslint-disable @typescript-eslint/no-namespace */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { ipcRenderer, IpcRenderer } from 'electron'
+import { ipcRenderer, IpcRenderer } from "electron";
declare global {
- namespace NodeJS {
- interface Global {
- ipcRenderer: IpcRenderer
- }
- }
+ var ipcRenderer: IpcRenderer;
}
まだvalueとdefaultValueに慣れない。
tmtk75なるほど、Comlinkね。
tmtk75Error: Rendered more hooks than during the previous render.
ほほう？
ああ、なるほど、hook呼ぶ前にretrunするなってことね。
tmtk75認証部分の移植中。
この記事が参考になった。
ありがとうございました https://zenn.dev/eringiv3/scraps/daa94fc864025e
tmtk75package化したらloadURLで何も表示できなくなる問題にここ数日ぶち当たってた。
解決してみたらなんのことはない、必要な環境変数が.env.development.localでのみ宣言されていて、productionビルドでは定義されていないことが原因だった。とりあえず.env.production.localを作ってやったら無事動いた。
SPA + Auth0 client-sideとElectron + Auth0が同じbuildで動くようにできた。
nuxtのときよりもスマートにできて満足。
tmtk75macのサブ機のVSCodeで、定義へのjump（go to definition）がcmd + clickでaltにしたくて困ってたんだけど、Editor: Multi Cursor Modifierがaltになってたせいだった。これをctrlCmdにしたらalt + clickでgo to definitionの動きをするようになった。
tmtk75仕事がめっちゃ忙しくて全然これの時間がとれなかった。
やっと時間がとれたのでversionを表示するところを修正中。
vercel or othersで表示する値を切り替える必要があるかね。
tmtk75Next.js + TypeScript + Jest.
ここ見て設定できました。
- https://zenn.dev/garypippi/articles/c79cb002e001681a73cd
- https://qiita.com/mame_daifuku/items/79b6a5a1514a3f067e1a
/**
* @jest-environment jsdom
*/
ふむ。
npx @mui/codemod v5.0.0/jss-to-styled ./renderer/components/templates/
Warning: Expected server HTML to contain a matching <ul> in <div>.
reload時に毎回出るこのwarningがやっと直せた。
_app.tsxでwindowがないときに空のfragmentを返すようにしてたんだけど、そのせいだった。
これで直ったわ。
@@ -28,7 +28,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}, []);
if (!(typeof window !== "undefined")) {
- return <></>;
+ return (
+ <RecoilRoot>
+ <Component {...pageProps} />
+ </RecoilRoot>
+ );
}
そろそろCode Signingもちゃんと考えるか。
実験はこれかな？
tmtk75NextAuthでdropboxのアクセストークンをとるのに参考にした。
tmtk75アプリはMUI、Webサイトはtailwindを使ってみる。
導入にはここを参考にさせてもらいました。
tmtk75next.jsで.svg表示。
私が使ってるAffinity Designerで出力するとstyleにpropertyが文字列で入ってるのでそのままコピペじゃReactで都合が悪い。
- svgr: https://zenn.dev/catnose99/articles/49c12f84182bdf
- styleを無理矢理propertyに: https://stackoverflow.com/questions/61118266/how-to-convert-svg-style-to-jsx
数が少なければ後者でもいいかもな。
tmtk75そういえばMUI v4からMUI v5へ移行したんだけど、移行時の修正で一番困ったのがuseAutocompleteが返すgroupedOptionsの型が変わったことだったな。
新: groupedOptions: T[] | Array<AutocompleteGroupedOption<T>>
旧: groupedOptions: T[]
とりあえずas T[]として型だけ一致させたけど。
AutocompleteもrenderOptionの仕様変わってたわ。optionクリックしても選択されなかった。
ここの通りに直したら期待通り動いた。
Breaking changeがちゃんと書いてあるのいい。
tmtk75GitHub Actions、Environmentsってあるのか。知らなかった。
めっちゃはまった。
Secretsに登録しただけじゃ参照できないの忘れてた。
tmtk75MDXだと<URL>の表記ができないんだな。まあしょうがないか。
tmtk75MDXでrenderingを試して、失敗したらfallbackとしてMarkdownとしてrenderingするようにしてみた。
いい感じ。
tmtk75next-auth v4でdropbox providerでの認証ができないな。
v3 -> v4にしただけで他は変えてないからversion差違しかないはずなんだけど。
tmtk75ここで報告した。再現したようだけどまだ解決はしてないみたいね。
tmtk75PouchDBのforce putハマった...
同じrevision numberだとrevisionの文字列のdictionary orderで新旧が決まるのね...
tmtk75MUIのThem interface、補完で2つ出てくるけど下が上を継承してんのね。
import { Theme } from "@mui/system";
import { Theme } from "@mui/material/styles";
fs.watch
tmtk75callbackをpropertyとして受け取＋一回だけ初期化のケースはreactだと気をつける必要があるんだな。
callbackがclosureでbindしてる変数が最新じゃないってのでハマった。
tmtk75大した量のテキストでもないのにmonaco-editorのCTRL + Aでの全選択がどうもワンテンポ遅い（押してから数百ミリ秒くらいつまる）感があって何故かと思ってたんだけど、その理由がさっき分かった。
プロポーショナルフォントのせいだった。面白い。
tmtk75<a>に属性足したくてunifiedのvisitとか見てるんだけど、この辺使うっぽいな。
tmtk75あるTypeScriptのコードを書くとVSCodeのlang-serverがcrash(?)する事象に遭遇。
unifiedのtransformer plugin絡みなんだけど、visitのvisitorの関数をanonymous funcで書いたときに3rd argをつけると再現する。さてどう回避しようかな。
import { visit } from "unist-util-visit";
...
export function fooPlugin(): unified.Transformer<hast.Root, hast.Root> {
...
visit(w, "element", (node: any, index, parent /* これ */) => {
visitの型推論が動くと壊れるっぽいな...。
tmtk75移行自体はとっくに終わってるので閉じるか。