@weft-js/create 0.1.1 → 0.1.3

package/src/stack/pages.mjs

@@ -0,0 +1,151 @@
+// Tailwind: the same files `weft add tailwind` writes (packages/cli/src/tailwind.mjs, held equal by a test).
+/** What `--ui tailwind` adds, pinned. */
+export const tailwindPackages = { tailwindcss: '4.3.3', '@tailwindcss/vite': '4.3.3' }
+/** `vite.config.ts` for `--ui tailwind`. */
+export const TAILWIND_VITE = `import tailwindcss from '@tailwindcss/vite'
+
+export default { plugins: [tailwindcss()] }
+`
+/** The stylesheet for `--ui tailwind`. */
+export const TAILWIND_CSS = `@import "tailwindcss";
+`
+const tw = {
+  card: 'mx-auto max-w-2xl space-y-4 rounded-lg border border-current/15 p-6',
+  title: 'text-2xl font-semibold',
+  button: 'rounded-md border border-current/30 px-3 py-1.5 hover:bg-current/5',
+  input: 'rounded-md border border-current/30 px-3 py-1.5',
+}
+/** The class of a scaffold element: Tailwind's utilities, or the plain CSS in src/app.css. */
+export const classes = (ui, part) => (ui === 'tailwind' ? tw[part] : part === 'card' ? 'card' : '')
+const attr = (ui, part) => (ui === 'tailwind' ? ` class="${tw[part]}"` : '')
+
+/** The page's controls in each UI kit: warp's components, or plain elements with the same roles and names. */
+export const controls = (ui) =>
+  ui === 'warp'
+    ? {
+        imports: `import { Alert, Button, Card, Checkbox, Input } from '@weft-js/warp'\n`,
+        card: (title, body) => `<Card title=${JSON.stringify(title)}>${body}</Card>`,
+        input: (label, box, type = 'text') =>
+          `<Input label=${JSON.stringify(label)} type="${type}" value={${box}.value} onInput={e => (${box}.value = e.currentTarget.value)} />`,
+        submit: (label, pending) => `<Button type="submit" loading={${pending}}>${label}</Button>`,
+        button: (label, onClick, extra = '') =>
+          `<Button emphasis="ghost" ${extra}onClick={${onClick}}>${label}</Button>`,
+        error: (box) => `{${box}.value && <Alert tone="critical" live>{${box}.value}</Alert>}`,
+        row: `<Checkbox checked={t.done} onChange={() => toggleTodo({ id: t.id })}>{t.title}</Checkbox>
+          <Button emphasis="ghost" tone="neutral" size="sm" icon="x" aria-label={\`Delete \${t.title}\`} onClick={() => deleteTodo({ id: t.id })} />`,
+      }
+    : {
+        imports: '',
+        card: (title, body) =>
+          `<section class="${classes(ui, 'card')}"><h1${attr(ui, 'title')}>${title}</h1>${body}</section>`,
+        input: (label, box, type = 'text') =>
+          `<label>${label} <input${attr(ui, 'input')} type="${type}" value={${box}.value} onInput={e => (${box}.value = e.currentTarget.value)} /></label>`,
+        submit: (label, pending) =>
+          `<button${attr(ui, 'button')} type="submit" disabled={${pending}}>${label}</button>`,
+        button: (label, onClick, extra = '') =>
+          `<button${attr(ui, 'button')} type="button" ${extra}onClick={${onClick}}>${label}</button>`,
+        error: (box) => `{${box}.value && <p role="alert">{${box}.value}</p>}`,
+        row: `<label>
+            <input type="checkbox" checked={t.done} onChange={() => toggleTodo({ id: t.id })} /> {t.title}
+          </label>
+          <button type="button" aria-label={\`Delete \${t.title}\`} onClick={() => deleteTodo({ id: t.id })}>×</button>`,
+      }
+
+/** `/todos`: the list on the server functions, written for this `--ui`. */
+export function todosPage(ui) {
+  const c = controls(ui)
+  return `import type { Meta } from '@weft-js/start'
+import { Boundary, state } from '@weft-js/core'
+${c.imports}import { addTodo, deleteTodo, listTodos, toggleTodo } from '#/server/todos'
+
+export const meta: Meta = { title: 'Todos', description: 'Your todo list: add, tick off and delete.' }
+
+// The query is made in here, inside the Boundary, so the Boundary sees it: it shows \`pending\` until the list arrives.
+function TodoList() {
+  const todos = listTodos()
+  return (
+    <ul class="todos">
+      {(todos.value ?? []).map(t => (
+        <li key={t.id} class={t.done ? 'done' : 'open'}>
+          ${c.row}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default function Todos() {
+  const title = state('')
+  const problem = state('')
+  const add = async (e: SubmitEvent) => {
+    e.preventDefault()
+    const text = title.value.trim()
+    if (!text) return
+    title.value = ''
+    problem.value = ''
+    await addTodo({ title: text }).catch((err: Error) => (problem.value = err.message))
+  }
+  return (
+    ${c.card(
+      'Todos',
+      `
+      <form onSubmit={add}>
+        ${c.input('New todo', 'title')}
+        ${c.submit('Add', 'addTodo.pending.value')}
+      </form>
+      ${c.error('problem')}
+      <Boundary pending={<p>Loading…</p>}>
+        <TodoList />
+      </Boundary>
+    `,
+    )}
+  )
+}
+`
+}
+
+/** `/login`: sign in and sign up, written for this `--ui`. */
+export function loginPage(ui) {
+  const c = controls(ui)
+  return `import { redirect, type LoadArgs, type Meta } from '@weft-js/start'
+import { state } from '@weft-js/core'
+${c.imports}import { signIn, signUp } from '#/server/session'
+
+export const load = ({ ctx }: LoadArgs) => {
+  if (ctx.user) redirect('/todos')
+}
+
+export const meta: Meta = { title: 'Sign in', description: 'Sign in, or make an account.' }
+
+export default function Login() {
+  const creating = state(false)
+  const name = state('')
+  const email = state('')
+  const password = state('')
+  const problem = state('')
+  const submit = async (e: SubmitEvent) => {
+    e.preventDefault()
+    problem.value = ''
+    const done = creating.value
+      ? signUp({ name: name.value, email: email.value, password: password.value })
+      : signIn({ email: email.value, password: password.value })
+    await done.catch((err: Error) => (problem.value = err.message))
+  }
+  return (
+    ${c.card(
+      'Sign in',
+      `
+      <form onSubmit={submit}>
+        {creating.value && ${c.input('Name', 'name')}}
+        ${c.input('Email', 'email', 'email')}
+        ${c.input('Password', 'password', 'password')}
+        ${c.submit(`{creating.value ? 'Create account' : 'Sign in'}`, 'signIn.pending.value || signUp.pending.value')}
+      </form>
+      ${c.error('problem')}
+      ${c.button(`{creating.value ? 'I have an account' : 'Create an account'}`, '() => (creating.value = !creating.value)')}
+    `,
+    )}
+  )
+}
+`
+}

package/src/stack/schema.mjs

@@ -0,0 +1,195 @@
+export const authTablesFile = (db) =>
+  ({
+    sqlite: () =>
+      `import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'\n${authTablesSqlite()}`,
+    postgres: () =>
+      `import { boolean, pgTable, text, timestamp } from 'drizzle-orm/pg-core'\n${authTablesPg()}`,
+    mysql: () =>
+      `import { boolean, mysqlTable, text, timestamp, varchar } from 'drizzle-orm/mysql-core'\n${authTablesMysql()}`,
+  })[db]()
+
+const camel = (column) => column.replace(/_(\w)/g, (_, c) => c.toUpperCase())
+
+/** A template's `src/db/auth.ts`: Better Auth's own column names with time zones, as examples/shared/pg/schema.sql has them. */
+export const sharedAuthTables = () =>
+  `import { boolean, pgTable, text, timestamp } from 'drizzle-orm/pg-core'\n${authTablesPg().replace(
+    /(text|boolean|timestamp)\('(\w+)'\)/g,
+    (_, type, column) =>
+      `${type}('${camel(column)}'${type === 'timestamp' ? ', { withTimezone: true }' : ''})`,
+  )}`
+
+export function sqliteSchema(auth) {
+  const owner = auth
+    ? `\n  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),`
+    : ''
+  return `import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+${auth ? authTablesSqlite() : ''}
+export const todos = sqliteTable('todos', {
+  id: text('id').primaryKey(),${owner}
+  title: text('title').notNull(),
+  done: integer('done', { mode: 'boolean' }).notNull().default(false),
+  createdAt: integer('created_at').notNull(),
+})
+`
+}
+
+export function pgSchema(auth) {
+  const owner = auth
+    ? `\n  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),`
+    : ''
+  return `import { bigint, boolean, pgTable, text${auth ? ', timestamp' : ''} } from 'drizzle-orm/pg-core'
+${auth ? authTablesPg() : ''}
+export const todos = pgTable('todos', {
+  id: text('id').primaryKey(),${owner}
+  title: text('title').notNull(),
+  done: boolean('done').notNull().default(false),
+  createdAt: bigint('created_at', { mode: 'number' }).notNull(),
+})
+`
+}
+
+// MySQL can't index a TEXT column, so ids, keys and anything unique are VARCHAR. Otherwise Postgres's tables hold.
+const authTablesMysql = () =>
+  authTablesPg()
+    .replaceAll('pgTable', 'mysqlTable')
+    .replace(
+      /text\('(id|user_id|email|token|account_id|provider_id|identifier)'\)/g,
+      "varchar('$1', { length: 255 })",
+    )
+    .replace(/timestamp\('(\w+)'\)/g, "timestamp('$1', { fsp: 3 })")
+
+export function mysqlSchema(auth) {
+  const owner = auth
+    ? `\n  userId: varchar('user_id', { length: 255 }).notNull().references(() => user.id, { onDelete: 'cascade' }),`
+    : ''
+  return `import { bigint, boolean, mysqlTable, ${auth ? 'text, timestamp, ' : ''}varchar } from 'drizzle-orm/mysql-core'
+${auth ? authTablesMysql() : ''}
+export const todos = mysqlTable('todos', {
+  id: varchar('id', { length: 36 }).primaryKey(),${owner}
+  title: varchar('title', { length: 200 }).notNull(),
+  done: boolean('done').notNull().default(false),
+  createdAt: bigint('created_at', { mode: 'number' }).notNull(),
+})
+`
+}
+
+const authTablesSqlite = () => {
+  const when = (col, opts = '.notNull()') => `integer('${col}', { mode: 'timestamp_ms' })${opts}`
+  return `
+// Better Auth's tables: it reads and writes them through Drizzle, with these names.
+export const user = sqliteTable('user', {
+  id: text('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: integer('email_verified', { mode: 'boolean' }).notNull(),
+  image: text('image'),
+  createdAt: ${when('created_at')},
+  updatedAt: ${when('updated_at')},
+})
+
+export const session = sqliteTable('session', {
+  id: text('id').primaryKey(),
+  expiresAt: ${when('expires_at')},
+  token: text('token').notNull().unique(),
+  createdAt: ${when('created_at')},
+  updatedAt: ${when('updated_at')},
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
+})
+
+export const account = sqliteTable('account', {
+  id: text('id').primaryKey(),
+  accountId: text('account_id').notNull(),
+  providerId: text('provider_id').notNull(),
+  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
+  accessToken: text('access_token'),
+  refreshToken: text('refresh_token'),
+  idToken: text('id_token'),
+  accessTokenExpiresAt: ${when('access_token_expires_at', '')},
+  refreshTokenExpiresAt: ${when('refresh_token_expires_at', '')},
+  scope: text('scope'),
+  password: text('password'),
+  createdAt: ${when('created_at')},
+  updatedAt: ${when('updated_at')},
+})
+
+export const verification = sqliteTable('verification', {
+  id: text('id').primaryKey(),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: ${when('expires_at')},
+  createdAt: ${when('created_at', '')},
+  updatedAt: ${when('updated_at', '')},
+})
+
+export const jwks = sqliteTable('jwks', {
+  id: text('id').primaryKey(),
+  publicKey: text('public_key').notNull(),
+  privateKey: text('private_key').notNull(),
+  createdAt: ${when('created_at')},
+  expiresAt: ${when('expires_at', '')},
+  alg: text('alg'),
+  crv: text('crv'),
+})
+`
+}
+
+const authTablesPg = () => `
+// Better Auth's tables: it reads and writes them through Drizzle, with these names.
+export const user = pgTable('user', {
+  id: text('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: boolean('email_verified').notNull(),
+  image: text('image'),
+  createdAt: timestamp('created_at').notNull(),
+  updatedAt: timestamp('updated_at').notNull(),
+})
+
+export const session = pgTable('session', {
+  id: text('id').primaryKey(),
+  expiresAt: timestamp('expires_at').notNull(),
+  token: text('token').notNull().unique(),
+  createdAt: timestamp('created_at').notNull(),
+  updatedAt: timestamp('updated_at').notNull(),
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
+})
+
+export const account = pgTable('account', {
+  id: text('id').primaryKey(),
+  accountId: text('account_id').notNull(),
+  providerId: text('provider_id').notNull(),
+  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
+  accessToken: text('access_token'),
+  refreshToken: text('refresh_token'),
+  idToken: text('id_token'),
+  accessTokenExpiresAt: timestamp('access_token_expires_at'),
+  refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
+  scope: text('scope'),
+  password: text('password'),
+  createdAt: timestamp('created_at').notNull(),
+  updatedAt: timestamp('updated_at').notNull(),
+})
+
+export const verification = pgTable('verification', {
+  id: text('id').primaryKey(),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: timestamp('expires_at').notNull(),
+  createdAt: timestamp('created_at'),
+  updatedAt: timestamp('updated_at'),
+})
+
+export const jwks = pgTable('jwks', {
+  id: text('id').primaryKey(),
+  publicKey: text('public_key').notNull(),
+  privateKey: text('private_key').notNull(),
+  createdAt: timestamp('created_at').notNull(),
+  expiresAt: timestamp('expires_at'),
+  alg: text('alg'),
+  crv: text('crv'),
+})
+`