Skip to content

Commit c475cde

Browse files
committed
chore: wip
1 parent b5684a3 commit c475cde

File tree

16 files changed

+138
-235
lines changed

16 files changed

+138
-235
lines changed
File renamed without changes.

_nuxtflare/nuxt.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default defineNuxtConfig({
2+
3+
})
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { z } from 'zod'
2+
3+
export default eventHandler(async (event) => {
4+
const { sql, params, method } = await readValidatedBody(event, z.object({
5+
sql: z.string(),
6+
params: z.array(z.any()),
7+
method: z.enum(['all', 'get', 'run', 'values'])
8+
}).parse)
9+
10+
// Make sure the client is initialized first
11+
useDatabase()
12+
const client = useDatabaseClient()
13+
14+
try {
15+
if (method === 'run')
16+
return client.prepare(sql).run(params)
17+
if (method === 'all' || method === 'values')
18+
return client.prepare(sql).raw().all(params)
19+
// method = 'get'
20+
return client.prepare(sql).raw().get(params)
21+
} catch (e: any) {
22+
throw createError({
23+
statusCode: 500,
24+
message: `Database error: ${e.message}`
25+
})
26+
}
27+
})

_nuxtflare/server/utils/database.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { drizzle as drizzleD1, DrizzleD1Database } from 'drizzle-orm/d1'
2+
import { drizzle } from 'drizzle-orm/better-sqlite3'
3+
import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3'
4+
import { drizzle as drizzleHTTP } from 'drizzle-orm/sqlite-proxy'
5+
import type { SqliteRemoteDatabase } from 'drizzle-orm/sqlite-proxy'
6+
import { ofetch } from 'ofetch'
7+
// @ts-ignore
8+
import Database from 'better-sqlite3'
9+
import { join } from 'pathe'
10+
11+
// export * as tables from '~/server/database/schema'
12+
13+
let _db: DrizzleD1Database | BetterSQLite3Database | SqliteRemoteDatabase | null = null
14+
let _client: any = null
15+
16+
export const useDatabase = () => {
17+
if (!_db) {
18+
const isDev = process.env.NODE_ENV === 'development'
19+
if (process.env.DB) {
20+
// d1 in production
21+
_client = process.env.DB
22+
_db = drizzleD1(_client)
23+
} else if (isDev && process.env.NUXT_HUB_URL) {
24+
console.log('Using D1 remote database...')
25+
_db = drizzleHTTP(async (sql, params, method) => {
26+
// https://orm.drizzle.team/docs/get-started-sqlite#http-proxy
27+
try {
28+
const rows = await ofetch('/api/db/query', {
29+
baseURL: process.env.NUXT_HUB_URL,
30+
method: 'POST',
31+
body: { sql, params, method }
32+
})
33+
return { rows }
34+
} catch (err) {
35+
console.error('Error from remote database', err)
36+
return { rows: [] }
37+
}
38+
})
39+
} else if (isDev) {
40+
// local sqlite in development
41+
console.log('Using local database...')
42+
_client = new Database(join(process.cwd(), './db.sqlite'))
43+
_db = drizzle(_client)
44+
} else {
45+
throw new Error('No database configured for production')
46+
}
47+
}
48+
return _db
49+
}
50+
51+
export const useDatabaseClient = () => {
52+
if (!_client) {
53+
throw new Error('No client configured')
54+
}
55+
return _client
56+
}

app.config.ts

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
export default defineAppConfig({
22
ui: {
3-
primary: 'emerald',
4-
container: {
5-
constrained: 'max-w-2xl'
6-
},
7-
card: {
8-
header: {
9-
base: 'flex flex-wrap items-center justify-between'
10-
},
11-
body: {
12-
base: 'space-y-4'
13-
}
14-
},
15-
dropdown: {
16-
width: 'w-full',
17-
popper: {
18-
strategy: 'absolute'
19-
}
20-
}
3+
primary: 'lime',
4+
gray: 'neutral'
215
}
226
})

app.vue

Lines changed: 21 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,31 @@
1-
<script setup>
2-
const { loggedIn } = useUserSession()
1+
<script setup lang="ts">
32
const colorMode = useColorMode()
43
5-
watch(loggedIn, () => {
6-
if (!loggedIn.value) {
7-
navigateTo('/')
8-
}
9-
})
10-
11-
function toggleColorMode() {
12-
colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
13-
}
4+
const color = computed(() => colorMode.value === 'dark' ? '#111827' : 'white')
145
156
useHead({
16-
htmlAttrs: { lang: 'en' },
17-
link: [{ rel: 'icon', href: '/icon.png' }],
18-
})
19-
20-
useSeoMeta({
21-
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
22-
title: 'Nuxt Todos Edge',
23-
description:
24-
'A Nuxt demo hosted with Edge-side rendering, authentication and queyring a SQLite database',
25-
ogImage: '/social-image.png',
26-
twitterImage: '/social-image.png',
27-
twitterCard: 'summary_large_image',
7+
meta: [
8+
{ charset: 'utf-8' },
9+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
10+
{ key: 'theme-color', name: 'theme-color', content: color }
11+
],
12+
link: [
13+
{ rel: 'icon', href: '/favicon.ico' }
14+
],
15+
htmlAttrs: {
16+
lang: 'en'
17+
}
2818
})
2919
</script>
3020

3121
<template>
32-
<UContainer class="min-h-screen flex flex-col justify-center">
33-
<div class="mb-2 text-right">
34-
<UButton
35-
square
36-
variant="ghost"
37-
color="black"
38-
:icon="$colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
39-
@click="toggleColorMode"
40-
/>
41-
</div>
42-
43-
<NuxtPage />
22+
<div>
23+
<NuxtLoadingIndicator />
4424

45-
<footer class="text-center mt-2">
46-
<NuxtLink
47-
href="https://github.com/atinux/nuxt-todos-edge"
48-
target="_blank"
49-
class="text-sm text-gray-500 hover:text-gray-700"
50-
>
51-
GitHub
52-
</NuxtLink>
53-
·
54-
<NuxtLink
55-
href="https://twitter.com/Atinux"
56-
target="_blank"
57-
class="text-sm text-gray-500 hover:text-gray-700"
58-
>
59-
Twitter
60-
</NuxtLink>
61-
</footer>
62-
</UContainer>
63-
<UNotifications />
64-
</template>
25+
<NuxtLayout>
26+
<NuxtPage />
27+
</NuxtLayout>
6528

66-
<style lang="postcss">
67-
body {
68-
@apply font-sans text-gray-950 bg-gray-50 dark:bg-gray-950 dark:text-gray-50;
69-
}
70-
</style>
29+
<UNotifications />
30+
</div>
31+
</template>

nuxt.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
export default defineNuxtConfig({
22
devtools: { enabled: true },
3+
// extends: '@nuxt/ui-pro',
4+
extends: [
5+
'/Users/atinux/Projects/nuxt/ui-pro',
6+
'./_nuxtflare'
7+
],
38
modules: [
49
'@nuxt/ui',
510
'nuxt-auth-utils'

pages/todos.vue

Lines changed: 0 additions & 117 deletions
This file was deleted.

server/api/test.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { sql } from 'drizzle-orm'
2+
3+
export default defineEventHandler(async (event) => {
4+
const db = useDatabase()
5+
6+
const rows = await db.all(sql`
7+
SELECT
8+
name
9+
FROM
10+
sqlite_schema
11+
WHERE
12+
type = 'table' AND
13+
name NOT LIKE 'sqlite_%' and name NOT LIKE '_litestream_%' and name NOT LIKE '__drizzle%'
14+
;
15+
`)
16+
17+
return rows
18+
})

server/api/todos/[id].delete.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default eventHandler(async (event) => {
88
const session = await requireUserSession(event)
99

1010
// List todos for the current user
11-
const deletedTodo = await useDB().delete(tables.todos).where(and(
11+
const deletedTodo = await useDatabase().delete(tables.todos).where(and(
1212
eq(tables.todos.id, id),
1313
eq(tables.todos.userId, session.user.id)
1414
)).returning().get()

server/api/todos/[id].patch.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default eventHandler(async (event) => {
1111
const session = await requireUserSession(event)
1212

1313
// List todos for the current user
14-
const todo = await useDB().update(tables.todos).set({
14+
const todo = await useDatabase().update(tables.todos).set({
1515
completed
1616
}).where(and(
1717
eq(tables.todos.id, id),

server/api/todos/index.get.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default eventHandler(async (event) => {
44
const session = await requireUserSession(event)
55

66
// List todos for the current user
7-
const todos = await useDB().select().from(tables.todos).where(eq(tables.todos.userId, session.user.id)).all()
7+
const todos = await useDatabase().select().from(tables.todos).where(eq(tables.todos.userId, session.user.id)).all()
88

99
return todos
1010
})

server/api/todos/index.post.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default eventHandler(async (event) => {
77
const session = await requireUserSession(event)
88

99
// List todos for the current user
10-
const todo = await useDB().insert(tables.todos).values({
10+
const todo = await useDatabase().insert(tables.todos).values({
1111
userId: session.user.id,
1212
title,
1313
createdAt: new Date()

0 commit comments

Comments
 (0)