npm - create-mikstack - Versions diffs - 0.1.0 - Mend

create-mikstack 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/templates/base/src/routes/api/dev/emails/+server.ts ADDED Viewed

@@ -0,0 +1,89 @@
+import { dev } from "$app/environment";
+import { error } from "@sveltejs/kit";
+import { desc, eq } from "drizzle-orm";
+import { db } from "$lib/server/db";
+import { notificationDelivery } from "$lib/server/db/schema";
+import type { RequestHandler } from "./$types";
+export const GET: RequestHandler = async () => {
+  if (!dev) error(404);
+  const deliveries = await db
+    .select({
+      id: notificationDelivery.id,
+      type: notificationDelivery.type,
+      channel: notificationDelivery.channel,
+      recipientEmail: notificationDelivery.recipientEmail,
+      status: notificationDelivery.status,
+      error: notificationDelivery.error,
+      createdAt: notificationDelivery.createdAt,
+    })
+    .from(notificationDelivery)
+    .where(eq(notificationDelivery.channel, "email"))
+    .orderBy(desc(notificationDelivery.createdAt))
+    .limit(50);
+  const rows = deliveries
+    .map(
+      (d) => `
+    <tr>
+      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb">
+        <a href="/api/dev/emails/${d.id}" target="_blank" style="color:#2563eb">${esc(d.type)}</a>
+      </td>
+      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb">${esc(d.recipientEmail ?? "—")}</td>
+      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb">
+        <span style="padding:2px 8px;border-radius:9999px;font-size:12px;background:${statusColor(d.status)}">${esc(d.status)}</span>
+        ${d.error ? `<span style="color:#ef4444;font-size:12px"> ${esc(d.error)}</span>` : ""}
+      </td>
+      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;color:#6b7280;font-size:13px">${d.createdAt.toLocaleString()}</td>
+    </tr>`,
+    )
+    .join("");
+  const html = `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><title>Dev Emails</title></head>
+<body style="font-family:system-ui,sans-serif;margin:0;padding:24px;background:#f9fafb">
+  <h1 style="font-size:20px;margin:0 0 16px">Dev Email Log</h1>
+  ${
+    deliveries.length === 0
+      ? '<p style="color:#6b7280">No emails sent yet.</p>'
+      : `<table style="width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1)">
+    <thead>
+      <tr style="background:#f3f4f6;text-align:left">
+        <th style="padding:8px 12px;font-weight:600">Type</th>
+        <th style="padding:8px 12px;font-weight:600">To</th>
+        <th style="padding:8px 12px;font-weight:600">Status</th>
+        <th style="padding:8px 12px;font-weight:600">Sent</th>
+      </tr>
+    </thead>
+    <tbody>${rows}</tbody>
+  </table>`
+  }
+</body>
+</html>`;
+  return new Response(html, {
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+};
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+function statusColor(status: string): string {
+  switch (status) {
+    case "sent":
+    case "delivered":
+      return "#dcfce7";
+    case "failed":
+      return "#fee2e2";
+    default:
+      return "#fef3c7";
+  }
+}

package/templates/base/src/routes/api/dev/emails/[id]/+server.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { dev } from "$app/environment";
+import { error } from "@sveltejs/kit";
+import { eq } from "drizzle-orm";
+import { db } from "$lib/server/db";
+import { notificationDelivery } from "$lib/server/db/schema";
+import type { RequestHandler } from "./$types";
+export const GET: RequestHandler = async ({ params }) => {
+  if (!dev) error(404);
+  const [delivery] = await db
+    .select({ content: notificationDelivery.content })
+    .from(notificationDelivery)
+    .where(eq(notificationDelivery.id, params.id));
+  if (!delivery?.content) error(404);
+  const content = delivery.content as { html?: string };
+  if (!content.html) error(404, "No HTML content for this delivery");
+  return new Response(content.html, {
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+};

package/templates/base/src/routes/api/notifications/[...path]/+server.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { notif } from "$lib/server/notifications";
+import type { RequestHandler } from "./$types";
+const handle: RequestHandler = async ({ request, locals }) => {
+  return notif.handler(request, locals.user?.id ?? null);
+};
+export const GET = handle;
+export const POST = handle;
+export const PUT = handle;

package/templates/base/src/routes/api/zero/get-queries/+server.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import type { RequestHandler } from "./$types";
+import { handleQueryRequest } from "@rocicorp/zero/server";
+import { mustGetQuery } from "@rocicorp/zero";
+import { schema } from "$lib/zero/schema";
+import { queries } from "$lib/zero/queries";
+export const POST: RequestHandler = async ({ request, locals }) => {
+  if (!locals.user) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  try {
+    const ctx = { userID: locals.user.id };
+    const response = await handleQueryRequest(
+      (name, args) => {
+        const query = mustGetQuery(queries, name);
+        return query.fn({ args, ctx });
+      },
+      schema,
+      request,
+    );
+    return Response.json(response);
+  } catch (error) {
+    console.error("Query error:", error);
+    return Response.json({ error: "Internal server error" }, { status: 500 });
+  }
+};

package/templates/base/src/routes/api/zero/mutate/+server.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import type { RequestHandler } from "./$types";
+import { handleMutateRequest } from "@rocicorp/zero/server";
+import { mustGetMutator } from "@rocicorp/zero";
+import { dbProvider } from "$lib/zero/db-provider.server";
+import { mutators } from "$lib/zero/mutators";
+export const POST: RequestHandler = async ({ request, locals }) => {
+  if (!locals.user) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  try {
+    const ctx = { userID: locals.user.id };
+    const result = await handleMutateRequest(
+      dbProvider,
+      async (transact) => {
+        return await transact(async (tx, name, args) => {
+          const mutator = mustGetMutator(mutators, name);
+          return await mutator.fn({ tx, ctx, args });
+        });
+      },
+      request,
+    );
+    return Response.json(result);
+  } catch (error) {
+    console.error("Mutate error:", error);
+    return Response.json({ error: "Internal server error" }, { status: 500 });
+  }
+};

package/templates/base/src/routes/sign-in/+page.svelte ADDED Viewed

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import EnvelopeSimple from "phosphor-svelte/lib/EnvelopeSimple";
+  import CheckCircle from "phosphor-svelte/lib/CheckCircle";
+  import Button from "{{uiPrefix}}/Button";
+  import FormField from "{{uiPrefix}}/FormField";
+  import Input from "{{uiPrefix}}/Input";
+  import { createForm } from "@mikstack/form";
+  import * as v from "valibot";
+  import { authClient } from "$lib/auth-client";
+  const form = createForm({
+    schema: v.object({
+      email: v.pipe(v.string(), v.email("Please enter a valid email address")),
+    }),
+    initialValues: { email: "" },
+    async onSubmit(data) {
+      const { error } = await authClient.signIn.magicLink({
+        email: data.email,
+        callbackURL: "/",
+      });
+      if (error) throw new Error(error.message ?? "Failed to send magic link");
+      return { sent: true };
+    },
+  });
+  const emailField = form.fields.email;
+</script>
+<div class="sign-in">
+  <h1>Sign in to {{projectName}}</h1>
+  {#if form.result}
+    <div class="success">
+      <CheckCircle size={24} weight="duotone" />
+      <p>Check your email for a magic link to sign in.</p>
+    </div>
+  {:else}
+    <form id={form.id} onsubmit={form.onsubmit} class="sign-in-form">
+      <FormField for={emailField.as("email").id}>
+        {#snippet label(attrs)}
+          <label {...attrs}>Email</label>
+        {/snippet}
+        <Input {...emailField.as("email")} placeholder="you@example.com" />
+        {#snippet error(attrs)}
+          {#each emailField.issues() as issue (issue.message)}
+            <p {...attrs}>{issue.message}</p>
+          {/each}
+        {/snippet}
+      </FormField>
+      {#if form.error}
+        <p class="form-error">{form.error}</p>
+      {/if}
+      <Button type="submit" disabled={form.pending}>
+        <EnvelopeSimple size={16} weight="bold" />
+        {form.pending ? "Sending magic link..." : "Sign in with magic link"}
+      </Button>
+    </form>
+  {/if}
+</div>
+<style>
+  .sign-in {
+    max-width: 24rem;
+    margin: 0 auto;
+    padding: var(--space-8) var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  h1 {
+    font-size: var(--text-2xl);
+  }
+  .sign-in-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .form-error {
+    font-size: var(--text-sm);
+    color: var(--danger);
+  }
+  .success {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-2);
+    color: var(--text-1);
+  }
+</style>

package/templates/base/tsconfig.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "rewriteRelativeImportExtensions": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "noUncheckedIndexedAccess": true
+  },
+  "include": [
+    ".svelte-kit/ambient.d.ts",
+    ".svelte-kit/non-ambient.d.ts",
+    ".svelte-kit/types/**/$types.d.ts",
+    "vite.config.js",
+    "vite.config.ts",
+    "src/**/*.js",
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "tests/**/*.js",
+    "tests/**/*.ts",
+    "tests/**/*.svelte",
+    "*.ts",
+    "*.js"
+  ],
+  "exclude": [
+    "node_modules/**",
+    "src/service-worker.js",
+    "src/service-worker/**/*.js",
+    "src/service-worker.ts",
+    "src/service-worker/**/*.ts",
+    "src/service-worker.d.ts",
+    "src/service-worker/**/*.d.ts"
+  ]
+}

package/templates/github-actions-bun/.github/workflows/ci.yml ADDED Viewed

@@ -0,0 +1,22 @@
+name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run lint
+      - run: bun run format:check
+      - run: bun run check
+      - run: bun run build

package/templates/github-actions-npm/.github/workflows/ci.yml ADDED Viewed

@@ -0,0 +1,25 @@
+name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run format:check
+      - run: npm run check
+      - run: npm run build

package/templates/github-actions-pnpm/.github/workflows/ci.yml ADDED Viewed

@@ -0,0 +1,27 @@
+name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run lint
+      - run: pnpm run format:check
+      - run: pnpm run check
+      - run: pnpm run build

package/templates/i18n/lingui.config.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { extractor } from "@mikstack/svelte-lingui/extractor";
+import type { LinguiConfig } from "@lingui/conf";
+const config: LinguiConfig = {
+  locales: ["en"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "src/locales/{locale}",
+      include: ["src"],
+    },
+  ],
+  extractors: [extractor],
+};
+export default config;

package/templates/i18n/package.json.partial ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "i18n:extract": "lingui extract",
+    "i18n:extract:watch": "lingui extract --watch"
+  },
+  "dependencies": {
+    "@lingui/core": "^5.9.0",
+    "@mikstack/svelte-lingui": "^0.1.0"
+  },
+  "devDependencies": {
+    "@lingui/cli": "^5.9.0",
+    "@lingui/conf": "^5.9.0"
+  }
+}

package/templates/i18n/src/lib/i18n.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { setupI18n } from "@lingui/core";
+import { setI18n } from "@mikstack/svelte-lingui";
+import { messages } from "../locales/en.po";
+const i18n = setupI18n();
+export function initI18n(): void {
+  i18n.loadAndActivate({ locale: "en", messages });
+  setI18n(i18n);
+}

package/templates/i18n/src/locales/en.po ADDED Viewed

@@ -0,0 +1,6 @@
+msgid ""
+msgstr ""
+"Language: en\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"

package/templates/i18n/src/po.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare module "*.po" {
+  export const messages: Record<string, string>;
+}

package/templates/i18n/vite.config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { linguiPo } from "@mikstack/svelte-lingui/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [linguiPo(), sveltekit()],
+});

package/templates/supply-chain-bun/bunfig.toml ADDED Viewed

@@ -0,0 +1,3 @@
+[install]
+# Reject packages published less than 3 days ago
+minPublishAge = "3d"

package/templates/testing/package.json.partial ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "vitest": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "@testcontainers/postgresql": "^11.11.0"
+  }
+}

package/templates/testing/src/example.test.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+describe("example", () => {
+  it("should work", () => {
+    expect(1 + 1).toBe(2);
+  });
+});

package/templates/testing/src/lib/server/db/test-utils.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { PostgreSqlContainer, type StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "./schema";
+import type { DrizzleDB } from "./index";
+export type TestDatabase = {
+  container: StartedPostgreSqlContainer;
+  client: ReturnType<typeof postgres>;
+  db: DrizzleDB;
+};
+export async function createTestDatabase(): Promise<TestDatabase> {
+  const container = await new PostgreSqlContainer("postgres:17-alpine").start();
+  const connectionUri = container.getConnectionUri();
+  const client = postgres(connectionUri);
+  const db = drizzle(client, { schema, casing: "snake_case" });
+  return { container, client, db };
+}
+export async function stopTestDatabase(testDb: TestDatabase): Promise<void> {
+  await testDb.client.end();
+  await testDb.container.stop();
+}

package/templates/testing/vitest.config.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+import { sveltekit } from "@sveltejs/kit/vite";
+export default defineConfig({
+  plugins: [sveltekit()],
+  test: {
+    include: ["src/**/*.test.ts"],
+  },
+});

package/templates/ui/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint"
+  ]
+}

package/templates/ui/package.json.partial ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "lint:css": "stylelint \"src/**/*.{css,svelte}\""
+  },
+  "dependencies": {
+    "phosphor-svelte": "^3.1.0",
+    "svelte-sonner": "^1.0.0"
+  },
+  "devDependencies": {
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0"
+  }
+}

package/templates/ui/src/app.css ADDED Viewed

@@ -0,0 +1,94 @@
+/* Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+body {
+  min-height: 100dvh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+/* Design Tokens */
+:root {
+  /* Typography */
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  /* Border Radii */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  /* Light Mode Colors (oklch) */
+  --surface-1: oklch(100% 0 0);
+  --surface-2: oklch(97% 0 0);
+  --surface-3: oklch(93% 0 0);
+  --text-1: oklch(20% 0 0);
+  --text-2: oklch(40% 0 0);
+  --accent: oklch(55% 0.2 260);
+  --danger: oklch(55% 0.2 25);
+  --border: oklch(85% 0 0);
+  --focus: oklch(55% 0.2 260 / 50%);
+  color: var(--text-1);
+  background-color: var(--surface-1);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface-1: oklch(15% 0 0);
+    --surface-2: oklch(20% 0 0);
+    --surface-3: oklch(25% 0 0);
+    --text-1: oklch(93% 0 0);
+    --text-2: oklch(70% 0 0);
+    --accent: oklch(70% 0.18 260);
+    --danger: oklch(70% 0.18 25);
+    --border: oklch(30% 0 0);
+    --focus: oklch(70% 0.18 260 / 50%);
+  }
+}

package/templates/ui/src/routes/+layout.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "../app.css";
+  // {{#if:i18n}}
+  import { initI18n } from "$lib/i18n";
+  initI18n();
+  // {{/if:i18n}}
+  let { children }: { children: Snippet } = $props();
+</script>
+{@render children()}

package/templates/ui/stylelint.config.js ADDED Viewed

@@ -0,0 +1,7 @@
+/** @type {import('stylelint').Config} */
+export default {
+  extends: ["stylelint-config-standard"],
+  rules: {
+    "selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["global"] }],
+  },
+};

package/templates/ui/vite.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [sveltekit()],
+});