Switch to remix

Author: patdx

.editorconfig

@@ -10,8 +10,8 @@ indent_size = 2
 
 # YAML doesn't support hard tabs 🙃
 # Templates that will be weird with hard tabs in the website editor
-[{**.yml,**.md,**.rs,**.mdx,justfile,**.json}]
+[{**.yml,**.yaml,**.md,**.rs,**.mdx,justfile,**.json}]
 indent_style = space
 
 [*.rs]
-indent_size = 4
+indent_size = 4

.github/workflows/main.yaml

@@ -14,39 +14,19 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'pnpm'
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 8.6.3
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+      - run: corepack enable
 
       - name: Install dependencies
         run: pnpm install
 
       - name: Build
         run: pnpm build
 
-      - name: Publish
-        uses: cloudflare/pages-action@1
+      - name: Deploy
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: edge-cms # e.g. 'my-project'
-          directory: dist/client # e.g. 'dist'
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          command: pages deploy

.gitignore

@@ -1,15 +1,8 @@
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-dist
 node_modules
-/data
 
-# /wrangler.toml
+/.cache
+/build
+.env
+.dev.vars
 
-/bin
+.wrangler

.vscode/settings.json

@@ -6,16 +6,26 @@
 	"typescript.enablePromptUseWorkspaceTsdk": true,
 	"typescript.preferences.importModuleSpecifier": "non-relative",
 	"javascript.preferences.importModuleSpecifier": "non-relative",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.defaultFormatter": "biomejs.biome",
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"cSpell.words": ["rjsf"],
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
 	"[typescript]": {
 		"editor.defaultFormatter": "biomejs.biome"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  }
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[sql]": {
+		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+	},
+	"editor.codeActionsOnSave": {
+		"quickfix.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
+	}
 }

README.md

@@ -36,3 +36,11 @@ node scripts/generate-wrangler.js
 ```
 
 If you run without sops set up it will still work but some values will be undefined.
+
+
+## Wishlist
+
+- tenants
+- user sso
+- can host posts for a blog, etc
+- fix overlap API bug

src/components/details.tsx app/components/details.tsx

@@ -1,7 +1,10 @@
-import type { FallbackProps } from 'rakkasjs';
-import { flattenError } from 'src/utils/wrap-server-query';
+import { flattenError } from '~/utils/wrap-server-query';
 
-export default function ErrorPage(props: FallbackProps) {
+export function ErrorPage(props: {
+	error: any;
+	/** @deprecated not used */
+	resetErrorBoundary?: () => void;
+}) {
 	// const message =
 	//   typeof props.error?.stack === 'string'
 	//     ? props.error.stack

src/routes/$error.tsx app/components/error-page.tsx

@@ -7,6 +7,7 @@ export const IconX = () => (
 		stroke="currentColor"
 		className="w-6 h-6"
 	>
+		<title>Cross</title>
 		<path
 			strokeLinecap="round"
 			strokeLinejoin="round"
@@ -24,6 +25,7 @@ export const IconMenu = () => (
 		stroke="currentColor"
 		className="w-6 h-6"
 	>
+		<title>Menu</title>
 		<path
 			strokeLinecap="round"
 			strokeLinejoin="round"

src/components/for.tsx app/components/for.tsx

@@ -0,0 +1,29 @@
+import MonacoEditor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+	getWorker(_, label) {
+		if (label === 'json') {
+			return new jsonWorker();
+		}
+		// if (label === 'css' || label === 'scss' || label === 'less') {
+		// 	return new cssWorker();
+		// }
+		// if (label === 'html' || label === 'handlebars' || label === 'razor') {
+		// 	return new htmlWorker();
+		// }
+		// if (label === 'typescript' || label === 'javascript') {
+		// 	return new tsWorker();
+		// }
+		return new editorWorker();
+	},
+};
+
+loader.config({ monaco });
+
+export { MonacoEditor };

src/components/icons.tsx app/components/icons.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 
 export const Show: FC<{
-	when?: {};
+	when?: any;
 	fallback?: ReactNode;
 	children?: ReactNode;
 }> = ({ when, fallback, children }) => {

app/components/monaco-editor.client.tsx

@@ -0,0 +1,19 @@
+import { NavLink } from '@remix-run/react';
+import clsx from 'clsx';
+
+export function StyledLink({
+	children,
+	...props
+}: React.ComponentProps<typeof NavLink> & { activeClass?: string }) {
+	const { activeClass, ...rest } = props;
+	return (
+		<NavLink
+			{...rest}
+			className={({ isActive }) =>
+				clsx(props.className, isActive && props.activeClass)
+			}
+		>
+			{children}
+		</NavLink>
+	);
+}

src/components/show.tsx app/components/show.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import type { JSONSchema6 } from 'json-schema';
+import type { FC } from 'react';
+import { compactStringify } from '~/utils/compact-stringify';
+import { For } from '~/components/for';
+
+export const ViewEntity: FC<{
+  data: any;
+  schema: JSONSchema6;
+  type?: 'json' | 'pretty';
+}> = ({ data, schema, type }) => {
+  const properties = Object.entries(schema.properties ?? {}).map(
+    ([key, value]) => ({
+      key,
+      value,
+    }),
+  );
+
+  if (type === 'json') {
+    return <pre className="whitespace-pre-wrap">{compactStringify(data)}</pre>;
+  } else {
+    return (
+      <For
+        each={properties}
+        as={({ key, value }) => (
+          <Property
+            key={key}
+            name={key}
+            schema={value as JSONSchema6}
+            value={data?.[key]}
+          />
+        )}
+      />
+    );
+  }
+};
+
+const Property: FC<{
+  name: string;
+  schema: JSONSchema6;
+  value: any;
+}> = ({ name, schema, ...props }) => {
+  const type = schema.type;
+
+  let value: any;
+  let showWhiteSpace: boolean;
+
+  if (['string', 'number'].includes(typeof props.value)) {
+    value = props.value;
+    showWhiteSpace = schema['ui:widget'] === 'textarea';
+  } else {
+    value = compactStringify(props.value);
+    showWhiteSpace = true;
+  }
+
+  return (
+    <div>
+      <div className={clsx('font-bold')}>{name}</div>
+      <div className={clsx(showWhiteSpace && 'whitespace-pre-wrap')}>
+        {value}
+      </div>
+    </div>
+  );
+};

app/components/styled-link.tsx

@@ -1,5 +1,5 @@
+import type { AppLoadContext } from '@remix-run/cloudflare';
 import type { JSONSchema6 } from 'json-schema';
-import type { RequestContext } from 'rakkasjs';
 import sql, { join, raw } from 'sql-template-tag';
 import { getSystemTable, isSystemTable } from './migrator/system-tables';
 import { getOrm } from './orm';
@@ -10,7 +10,7 @@ export const loadEntityData = async ({
 	withEntities,
 	byId,
 }: {
-	context: RequestContext;
+	context: AppLoadContext;
 	entityName: string;
 	withEntities?: boolean;
 	byId?: string | number;
@@ -73,11 +73,11 @@ export const loadEntityData = async ({
 };
 
 export const insertItem = async (
-	context: RequestContext,
+	context: AppLoadContext,
 	entityName: string,
 	data: any,
 ) => {
-	console.log(`insert item`, entityName, data);
+	console.log('insert item', entityName, data);
 
 	const dataPairs = Object.entries(data);
 
@@ -95,6 +95,10 @@ export const insertItem = async (
 		.bind(...query.values)
 		.first<{ id: string | number }>();
 
+	if (!result) {
+		throw new Error(`Could not insert item ${JSON.stringify(data)}`);
+	}
+
 	return result;
 };
 
@@ -104,7 +108,7 @@ export const updateItem = async ({
 	id,
 	data,
 }: {
-	context: RequestContext;
+	context: AppLoadContext;
 	entityName: string;
 	// NOTE: id must be passed separately to account for the case
 	// where id is changed inside the update

app/components/view-entity.tsx

@@ -1,5 +1,5 @@
 import type { JSONSchema6 } from 'json-schema';
-import { formatSql } from 'src/utils/format-sqlite';
+import { formatSql } from '~/utils/format-sqlite';
 import { convertJsonSchemaToDatabaseSchema } from './convert-schema';
 import { generateMigrationStepCreateTable } from './diff-schema';
 
@@ -13,7 +13,7 @@ export const getCreateTableQuery = (
 ) => {
 	const name = jsonSchema.title;
 
-	if (!name) throw new Error(`Name of table is required`);
+	if (!name) throw new Error('Name of table is required');
 
 	const databaseSchema = convertJsonSchemaToDatabaseSchema(jsonSchema);
 

src/db/entities.ts app/db/entities.ts

@@ -1,4 +1,4 @@
-import { formatSql } from 'src/utils/format-sqlite';
+import { formatSql } from '~/utils/format-sqlite';
 import { escapeIdIfNeeded } from './shared';
 import type {
 	MigrationStep,
@@ -79,7 +79,7 @@ export const generateMigrationStepCreateTable = (
 ) => {
 	const name = step.table.name;
 
-	if (!name) throw new Error(`Name of table is required`);
+	if (!name) throw new Error('Name of table is required');
 
 	return [
 		'CREATE TABLE',

src/db/load-entity-data.ts app/db/load-entity-data.ts

@@ -0,0 +1,34 @@
+WITH all_tables AS (
+	SELECT
+		name
+	FROM
+		sqlite_schema
+	WHERE
+		type = 'table'
+		AND name NOT IN ('d1_kv', '_cf_KV') -- ignore system tables
+)
+SELECT
+	at.name name,
+	json_group_array(
+		json_object(
+			'cid',
+			pti.cid,
+			'name',
+			pti.name,
+			'type',
+			pti.type,
+			'dflt_value',
+			pti.dflt_value,
+			'notnull',
+			pti."notnull",
+			'pk',
+			pti.pk
+		)
+	) as columns
+FROM
+	all_tables at
+	INNER JOIN pragma_table_info(at.name) pti
+GROUP BY
+	at.name
+ORDER BY
+	name;