Update packages to latest versions and reduce initial bundle size

Author: patdx

.npmrc

@@ -0,0 +1 @@
+save-prefix=

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "editor.formatOnSave": true
-}
+}

package.json

@@ -3,41 +3,43 @@
     "dev": "npm run server",
     "prod": "npm run build && npm run server:prod",
     "build": "vite build",
-    "server": "ts-node ./server/index.ts",
-    "server:prod": "cross-env NODE_ENV=production ts-node ./server/index.ts"
+    "server": "tsx ./server/index.ts",
+    "server:prod": "cross-env NODE_ENV=production tsx ./server/index.ts"
   },
   "dependencies": {
-    "@types/compression": "^1.7.2",
-    "@types/express": "^4.17.14",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
-    "@vitejs/plugin-react": "^3.0.0",
-    "compression": "^1.7.4",
-    "cross-env": "^7.0.3",
-    "express": "^4.18.1",
-    "indent-string": "^5.0.0",
-    "mobx": "^6.9.0",
-    "mobx-react-lite": "^3.4.3",
-    "node-sql-parser": "^4.6.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sirv": "^2.0.2",
-    "sql-formatter": "^12.2.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.3",
-    "vite-plugin-ssr": "^0.4.112"
+    "@types/compression": "1.7.5",
+    "@types/express": "4.17.21",
+    "@types/node": "20.11.7",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "@vitejs/plugin-react": "4.2.1",
+    "compression": "1.7.4",
+    "cross-env": "7.0.3",
+    "express": "4.18.2",
+    "indent-string": "5.0.0",
+    "lodash-es": "4.17.21",
+    "mobx": "6.12.0",
+    "mobx-react-lite": "4.0.5",
+    "node-sql-parser": "4.18.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sirv": "2.0.4",
+    "sql-formatter": "15.1.3",
+    "typescript": "5.3.3",
+    "vike": "0.4.160",
+    "vite": "5.0.12"
   },
   "type": "module",
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "serve": "^14.2.0",
-    "tailwindcss": "^3.3.1"
+    "@tailwindcss/forms": "0.5.7",
+    "@tailwindcss/typography": "0.5.10",
+    "@types/lodash-es": "4.17.12",
+    "autoprefixer": "10.4.17",
+    "postcss": "8.4.33",
+    "prettier": "3.2.4",
+    "serve": "14.2.1",
+    "tailwindcss": "3.4.1",
+    "tsx": "4.7.0"
   },
   "packageManager": "[email protected]+sha1.872b21adeaae4e71acd5c551ba848d927d6aa446"
 }

renderer/_error.page.tsx renamed to pages/_error/+Page.tsx

@@ -1,8 +1,4 @@
-import React from 'react';
-
-export { Page };
-
-function Page({ is404 }: { is404: boolean }) {
+export function Page({ is404 }: { is404: boolean }) {
   if (is404) {
     return (
       <>

pages/index/index.page.tsx renamed to pages/index/+Page.tsx

@@ -1,8 +1,13 @@
-import { action, remove } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { formatDialect, sqlite } from 'sql-formatter';
-import { DEFAULT_QUERY, Query, parseOne, state } from './state';
-import { FC } from 'react';
+import { Fragment } from 'react';
+import {
+  bindMobxInput,
+  formatQueryAction,
+  parseOne,
+  removeQueryAction,
+  state,
+  type Query,
+} from './state';
 
 export const Page = observer(function Page() {
   const parsed = state.parsed;
@@ -24,21 +29,17 @@ export const Page = observer(function Page() {
       </div>
 
       {state.queries.map((query, index) => (
-        <>
+        <Fragment key={index}>
           {index !== 0 ? <hr /> : null}
-          <QueryEditor key={index} index={index} query={query} />
-        </>
+          <QueryEditor index={index} query={query} />
+        </Fragment>
       ))}
 
       <hr />
 
       <div>
         <button
-          onClick={action(() => {
-            const newQuery = { ...DEFAULT_QUERY };
-            newQuery.name += '_' + (state.queries.length + 1);
-            state.queries.push(newQuery);
-          })}
+          onClick={state.addQuery}
           className="p-1 border bg-gray-100 hover:bg-gray-200 active:bg-gray-200"
         >
           Add another query
@@ -71,31 +72,22 @@ const QueryEditor = observer(function QueryEditor({
       <input
         type="text"
         className="form-input rounded"
-        value={query.name}
-        onChange={action((event) => (query.name = event.target.value))}
+        {...bindMobxInput(query, 'name')}
       />
       <textarea
         className="form-textarea w-full rounded"
         rows={10}
-        value={query.sql}
-        onChange={action((event) => (query.sql = event.target.value))}
+        {...bindMobxInput(query, 'sql')}
       />
       <div className="flex gap-2">
         <button
-          onClick={action(() => {
-            query.sql = formatDialect(query.sql, {
-              dialect: sqlite,
-              tabWidth: 2,
-            });
-          })}
+          onClick={formatQueryAction(query)}
           className="p-1 border bg-gray-100 hover:bg-gray-200 active:bg-gray-200"
         >
           Format
         </button>
         <button
-          onClick={action(() => {
-            remove(state.queries, index as any);
-          })}
+          onClick={removeQueryAction(index)}
           className="p-1 border bg-gray-100 hover:bg-gray-200 active:bg-gray-200"
         >
           Remove query

pages/index/state.ts

@@ -1,7 +1,14 @@
 import indentString from 'indent-string';
-import { observable } from 'mobx';
+import { once } from 'lodash-es';
+import { action, makeAutoObservable, remove, runInAction } from 'mobx';
 import type { Column } from 'node-sql-parser';
-import { Parser } from 'node-sql-parser';
+import nodeSqlParser from 'node-sql-parser'; // https://vitejs.dev/guide/migration#ssr-externalized-modules-value-now-matches-production
+import type { ChangeEvent } from 'react';
+
+const getParser = once(() => {
+  const { Parser } = nodeSqlParser;
+  return new Parser();
+});
 
 export type Query = {
   name: string;
@@ -20,19 +27,64 @@ limit
   2`,
 };
 
-export const state = observable({
-  queries: [DEFAULT_QUERY] as Query[],
+export const state = makeAutoObservable(
+  {
+    queries: [DEFAULT_QUERY] as Query[],
 
-  get parsed() {
-    try {
-      const jsonQuery = generateJsonQuery(this.queries);
-      return jsonQuery;
-    } catch (err) {
-      console.warn(err);
-      return undefined;
-    }
+    get parsed() {
+      try {
+        const jsonQuery = generateJsonQuery(this.queries);
+        return jsonQuery;
+      } catch (err) {
+        console.warn(err);
+        return undefined;
+      }
+    },
+
+    addQuery() {
+      const newQuery = { ...DEFAULT_QUERY };
+      newQuery.name += '_' + (this.queries.length + 1);
+      this.queries.push(newQuery);
+    },
   },
-});
+  {},
+  {
+    autoBind: true,
+  },
+);
+
+// TODO: is there a way to define the action more
+// efficiently?
+export const formatQueryAction = (query: Query) => async () => {
+  const { formatDialect, sqlite } = await import('sql-formatter');
+
+  const sql = formatDialect(query.sql, {
+    dialect: sqlite,
+    tabWidth: 2,
+  });
+
+  runInAction(() => {
+    query.sql = sql;
+  });
+};
+
+// TODO: is there a way to define the action more
+// efficiently?
+export const removeQueryAction = (index: number) =>
+  action(() => {
+    remove(state.queries, index as any);
+  });
+
+export function bindMobxInput<T, K extends keyof T>(model: T, field: K) {
+  return {
+    value: model[field],
+    onChange: action(
+      (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        (model as any)[field] = event.target.value;
+      },
+    ),
+  };
+}
 
 function getColumnNames(columns: Column[]) {
   const names: string[] = [];
@@ -52,7 +104,7 @@ function getColumnNames(columns: Column[]) {
 
 export function parseOne(query: Query) {
   try {
-    const parser = new Parser();
+    const parser = getParser();
     const ast = parser.astify(query.sql, { database: 'sqlite' });
     console.log(ast);
     const first = Array.isArray(ast) ? ast[0] : ast;