@nuraly/lumenjs 0.1.3 → 0.1.4

package/dist/storage/index.d.ts

@@ -0,0 +1,76 @@
+import type { StorageAdapter } from './adapters/types.js';
+export type { StorageAdapter, StoredFile, PutOptions, PresignPutOptions, PresignGetOptions, PresignedUpload } from './adapters/types.js';
+export { LocalStorageAdapter } from './adapters/local.js';
+export { S3StorageAdapter } from './adapters/s3.js';
+export interface LocalStorageConfig {
+    provider: 'local';
+    /** Directory to write uploaded files. Default: './uploads' */
+    uploadDir?: string;
+    /** URL path prefix for serving files. Default: '/uploads' */
+    publicPath?: string;
+}
+export interface S3StorageConfig {
+    provider: 's3';
+    bucket: string;
+    region: string;
+    /** Read from env var LUMENJS_S3_ACCESS_KEY if omitted */
+    accessKeyId?: string;
+    /** Read from env var LUMENJS_S3_SECRET_KEY if omitted */
+    secretAccessKey?: string;
+    /** Custom endpoint for MinIO / Cloudflare R2 / other S3-compatible APIs */
+    endpoint?: string;
+    /** Public CDN base URL. Defaults to https://{bucket}.s3.{region}.amazonaws.com */
+    publicBaseUrl?: string;
+}
+export type StorageConfig = LocalStorageConfig | S3StorageConfig;
+/**
+ * Create a storage adapter from a config object.
+ *
+ * @example
+ * ```ts
+ * // Local dev (default)
+ * const storage = createStorage({ provider: 'local', uploadDir: './uploads' });
+ *
+ * // AWS S3
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+ *   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+ * });
+ *
+ * // MinIO / Cloudflare R2
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   endpoint: 'https://minio.example.com',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.MINIO_KEY!,
+ *   secretAccessKey: process.env.MINIO_SECRET!,
+ * });
+ * ```
+ */
+export declare function createStorage(config: StorageConfig): StorageAdapter;
+/**
+ * Get the global storage adapter (set by the LumenJS runtime or your app).
+ * Returns null if storage has not been configured.
+ *
+ * Available as `req.storage` in API route handlers.
+ */
+export declare function useStorage(): StorageAdapter | null;
+/**
+ * Set the global storage adapter.
+ * Call this in a `_middleware.ts` or app startup to configure storage.
+ *
+ * @example
+ * ```ts
+ * // pages/_middleware.ts
+ * import { setStorage, createStorage } from '@nuraly/lumenjs/dist/storage/index.js';
+ *
+ * setStorage(createStorage({ provider: 'local' }));
+ * ```
+ *
+ * @internal also called by vite-plugin-storage in dev mode
+ */
+export declare function setStorage(adapter: StorageAdapter | null): void;

package/dist/storage/index.js

@@ -0,0 +1,83 @@
+import { LocalStorageAdapter } from './adapters/local.js';
+import { S3StorageAdapter } from './adapters/s3.js';
+export { LocalStorageAdapter } from './adapters/local.js';
+export { S3StorageAdapter } from './adapters/s3.js';
+// ── Factory ───────────────────────────────────────────────────────
+/**
+ * Create a storage adapter from a config object.
+ *
+ * @example
+ * ```ts
+ * // Local dev (default)
+ * const storage = createStorage({ provider: 'local', uploadDir: './uploads' });
+ *
+ * // AWS S3
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+ *   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+ * });
+ *
+ * // MinIO / Cloudflare R2
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   endpoint: 'https://minio.example.com',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.MINIO_KEY!,
+ *   secretAccessKey: process.env.MINIO_SECRET!,
+ * });
+ * ```
+ */
+export function createStorage(config) {
+    if (config.provider === 's3') {
+        const accessKeyId = config.accessKeyId ?? process.env.LUMENJS_S3_ACCESS_KEY ?? '';
+        const secretAccessKey = config.secretAccessKey ?? process.env.LUMENJS_S3_SECRET_KEY ?? '';
+        if (!accessKeyId || !secretAccessKey) {
+            throw new Error('[LumenJS:Storage] S3 credentials are required. ' +
+                'Set accessKeyId/secretAccessKey in config, or set LUMENJS_S3_ACCESS_KEY / LUMENJS_S3_SECRET_KEY env vars.');
+        }
+        return new S3StorageAdapter({
+            bucket: config.bucket,
+            region: config.region,
+            accessKeyId,
+            secretAccessKey,
+            endpoint: config.endpoint,
+            publicBaseUrl: config.publicBaseUrl,
+        });
+    }
+    return new LocalStorageAdapter({
+        uploadDir: config.uploadDir ?? './uploads',
+        publicPath: config.publicPath ?? '/uploads',
+    });
+}
+// ── Singleton ─────────────────────────────────────────────────────
+let _storage = null;
+/**
+ * Get the global storage adapter (set by the LumenJS runtime or your app).
+ * Returns null if storage has not been configured.
+ *
+ * Available as `req.storage` in API route handlers.
+ */
+export function useStorage() {
+    return _storage;
+}
+/**
+ * Set the global storage adapter.
+ * Call this in a `_middleware.ts` or app startup to configure storage.
+ *
+ * @example
+ * ```ts
+ * // pages/_middleware.ts
+ * import { setStorage, createStorage } from '@nuraly/lumenjs/dist/storage/index.js';
+ *
+ * setStorage(createStorage({ provider: 'local' }));
+ * ```
+ *
+ * @internal also called by vite-plugin-storage in dev mode
+ */
+export function setStorage(adapter) {
+    _storage = adapter;
+}

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@nuraly/lumenjs",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Full-stack Lit web component framework with file-based routing, server loaders, SSR, and API routes",
   "type": "module",
   "main": "dist/cli.js",
   "bin": {
     "lumenjs": "dist/cli.js"
   },
-  "exports": {
-    ".": "./dist/cli.js",
-    "./db": "./dist/db/index.js"
-  },
   "files": [
     "dist",
     "templates",
@@ -47,13 +43,29 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/ssr": "^3.2.0",
-    "better-sqlite3": "^11.0.0",
+    "better-sqlite3": "^12.8.0",
+    "codejar": "^4.2.0",
     "glob": "^10.3.0",
     "lit": "^3.1.0",
+    "pg": "^8.20.0",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
     "vite": "^5.4.0"
   },
+  "peerDependencies": {
+    "@aws-sdk/client-s3": "^3.0.0",
+    "@aws-sdk/s3-request-presigner": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@aws-sdk/client-s3": {
+      "optional": true
+    },
+    "@aws-sdk/s3-request-presigner": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@types/better-sqlite3": "^7.6.0",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20.14.2",
     "@vitest/coverage-v8": "^4.0.18",
     "typescript": "^5.4.5",

package/templates/blog/api/posts.ts

@@ -1,20 +1,6 @@
-import { useDb } from '@nuraly/lumenjs/db';
-
 export function GET() {
-  const db = useDb();
-  const posts = db.all('SELECT id, title, slug, content, date FROM posts ORDER BY date DESC');
-  return { posts };
-}
-
-export function POST(req: { body: any }) {
-  const { title, slug, content } = req.body;
-  if (!title || !slug || !content) {
-    throw { status: 400, message: 'title, slug, and content are required' };
-  }
-  const db = useDb();
-  const result = db.run(
-    'INSERT INTO posts (title, slug, content) VALUES (?, ?, ?)',
-    title, slug, content
-  );
-  return { id: result.lastInsertRowid, title, slug, content };
+  return Response.json([
+    { slug: 'hello-world', title: 'Hello World' },
+    { slug: 'getting-started', title: 'Getting Started with LumenJS' },
+  ]);
 }

package/templates/blog/data/migrations/001_init.sql

@@ -3,10 +3,11 @@ CREATE TABLE IF NOT EXISTS posts (
   title TEXT NOT NULL,
   slug TEXT NOT NULL UNIQUE,
   content TEXT NOT NULL,
-  date TEXT NOT NULL DEFAULT (date('now'))
+  date TEXT NOT NULL DEFAULT (date('now')),
+  tags TEXT NOT NULL DEFAULT '[]'
 );
 
-INSERT INTO posts (title, slug, content, date) VALUES
-  ('Hello World', 'hello-world', 'Welcome to your new LumenJS blog! This post was loaded from SQLite.', '2025-01-15'),
-  ('Getting Started with LumenJS', 'getting-started', 'LumenJS makes it easy to build full-stack web apps with Lit web components and file-based routing.', '2025-01-20'),
-  ('SQLite Persistence', 'sqlite-persistence', 'LumenJS includes built-in SQLite support via better-sqlite3. Just use useDb() in your loaders and API routes.', '2025-01-25');
+INSERT INTO posts (title, slug, content, date, tags) VALUES
+  ('Hello World', 'hello-world', 'Welcome to your new LumenJS blog! This post was loaded from SQLite.', '2025-01-15', '["introduction","lumenjs"]'),
+  ('Getting Started with LumenJS', 'getting-started', 'LumenJS makes it easy to build full-stack web apps with Lit web components and file-based routing.', '2025-01-20', '["tutorial","lumenjs","web-components"]'),
+  ('SQLite Persistence', 'sqlite-persistence', 'LumenJS includes built-in SQLite support via better-sqlite3. Just use useDb() in your loaders and API routes.', '2025-01-25', '["database","lumenjs"]');

package/templates/blog/lumenjs.config.ts

@@ -0,0 +1,3 @@
+export default {
+  title: '{{PROJECT_NAME}}',
+};

package/templates/blog/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "lumenjs dev",
+    "build": "lumenjs build",
+    "serve": "lumenjs serve"
+  },
+  "dependencies": {
+    "@nuraly/lumenjs": "^0.1.3",
+    "lit": "^3.1.0"
+  }
+}

package/templates/blog/pages/_layout.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from 'lit';
+
+export class LayoutRoot extends LitElement {
+  static styles = css`
+    :host { display: block; min-height: 100vh; font-family: system-ui; color: #1e293b; }
+    header { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; display: flex; justify-content: space-between; align-items: center; }
+    header a { color: #7c3aed; text-decoration: none; font-weight: 600; font-size: 1.125rem; }
+    nav a { color: #64748b; text-decoration: none; margin-left: 1.5rem; }
+    nav a:hover { color: #7c3aed; }
+    main { max-width: 720px; margin: 0 auto; padding: 0 1rem 3rem; }
+  `;
+
+  render() {
+    return html`
+      <header>
+        <a href="/">{{PROJECT_NAME}}</a>
+        <nav>
+          <a href="/">Home</a>
+          <a href="/posts">Posts</a>
+        </nav>
+      </header>
+      <main><slot></slot></main>
+    `;
+  }
+}

package/templates/blog/pages/index.ts

@@ -1,37 +1,63 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { useDb } from '@nuraly/lumenjs/db';
 
-export function loader() {
-  const db = useDb();
-  const posts = db.all('SELECT id, title, slug, content, date FROM posts ORDER BY date DESC');
-  return { posts };
+function estimateReadingTime(text: string): number {
+  const wordsPerMinute = 200;
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / wordsPerMinute));
 }
 
-@customElement('page-home')
-export class PageHome extends LitElement {
-  @property({ type: Object }) data: any;
+const POSTS = [
+  {
+    slug: 'hello-world',
+    title: 'Hello World',
+    date: '2025-01-15',
+    excerpt: 'Welcome to my blog built with LumenJS.',
+    content: 'Welcome to my blog! This is a sample post built with LumenJS. Each post is a dynamic route using the [slug] parameter.',
+  },
+  {
+    slug: 'getting-started',
+    title: 'Getting Started with LumenJS',
+    date: '2025-01-20',
+    excerpt: 'Learn how to build web apps with Lit components and file-based routing.',
+    content: 'LumenJS uses file-based routing with Lit web components. Create a file in pages/ and it becomes a route. Add a loader() function for server-side data fetching.',
+  },
+];
+
+export async function loader() {
+  return {
+    posts: POSTS.map(({ content, ...post }) => ({
+      ...post,
+      readingTime: estimateReadingTime(content),
+    })),
+  };
+}
+
+export class PageIndex extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
 
   static styles = css`
-    :host { display: block; max-width: 720px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif; }
-    h1 { font-size: 2rem; margin-bottom: 1.5rem; }
-    .post { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; }
-    .post h2 { margin: 0 0 0.25rem; }
-    .post a { color: #0066cc; text-decoration: none; }
-    .post a:hover { text-decoration: underline; }
-    .post .date { color: #666; font-size: 0.875rem; }
-    .post p { color: #333; margin: 0.5rem 0 0; }
+    :host { display: block; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .subtitle { color: #64748b; margin-bottom: 2rem; }
+    .post { border-bottom: 1px solid #e2e8f0; padding: 1.5rem 0; }
+    .post:last-child { border-bottom: none; }
+    .post a { color: #1e293b; text-decoration: none; font-size: 1.25rem; font-weight: 600; }
+    .post a:hover { color: #7c3aed; }
+    .meta { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
+    .excerpt { color: #64748b; margin-top: 0.5rem; line-height: 1.5; }
   `;
 
   render() {
-    const posts = this.data?.posts || [];
+    const posts = this.loaderData.posts || [];
     return html`
       <h1>Blog</h1>
-      ${posts.map((post: any) => html`
+      <p class="subtitle">Thoughts and tutorials</p>
+      ${posts.map((p: any) => html`
         <div class="post">
-          <h2><a href="/posts/${post.slug}">${post.title}</a></h2>
-          <span class="date">${post.date}</span>
-          <p>${post.content}</p>
+          <a href="/posts/${p.slug}">${p.title}</a>
+          <div class="meta">${p.date} · ${p.readingTime} min read</div>
+          <p class="excerpt">${p.excerpt}</p>
         </div>
       `)}
     `;

package/templates/blog/pages/posts/[slug].ts

@@ -1,35 +1,60 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { useDb } from '@nuraly/lumenjs/db';
 
-export function loader({ params }: { params: { slug: string } }) {
-  const db = useDb();
-  const post = db.get('SELECT id, title, slug, content, date FROM posts WHERE slug = ?', params.slug);
-  return { post: post || null };
+function estimateReadingTime(text: string): number {
+  const wordsPerMinute = 200;
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / wordsPerMinute));
+}
+
+const POSTS: Record<string, { title: string; date: string; content: string }> = {
+  'hello-world': {
+    title: 'Hello World',
+    date: '2025-01-15',
+    content: 'Welcome to my blog! This is a sample post built with LumenJS. Each post is a dynamic route using the [slug] parameter.',
+  },
+  'getting-started': {
+    title: 'Getting Started with LumenJS',
+    date: '2025-01-20',
+    content: 'LumenJS uses file-based routing with Lit web components. Create a file in pages/ and it becomes a route. Add a loader() function for server-side data fetching.',
+  },
+};
+
+export async function loader({ params }: { params: { slug: string } }) {
+  const post = POSTS[params.slug];
+  if (!post) return { notFound: true };
+  return {
+    ...post,
+    readingTime: estimateReadingTime(post.content),
+  };
 }
 
-@customElement('page-post')
 export class PagePost extends LitElement {
-  @property({ type: Object }) data: any;
+  static properties = { loaderData: { type: Object }, slug: { type: String } };
+  loaderData: any = {};
+  slug = '';
 
   static styles = css`
-    :host { display: block; max-width: 720px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif; }
-    a { color: #0066cc; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-    .date { color: #666; font-size: 0.875rem; }
-    .content { margin-top: 1rem; line-height: 1.6; color: #333; }
+    :host { display: block; }
+    .back { color: #7c3aed; text-decoration: none; font-size: 0.875rem; }
+    .back:hover { text-decoration: underline; }
+    h1 { font-size: 2rem; margin: 1rem 0 0.25rem; }
+    .date { color: #94a3b8; font-size: 0.875rem; margin-bottom: 1.5rem; }
+    .content { line-height: 1.8; color: #334155; }
+    .not-found { color: #64748b; }
   `;
 
   render() {
-    const post = this.data?.post;
-    if (!post) {
-      return html`<p>Post not found. <a href="/">Back to blog</a></p>`;
+    if (this.loaderData.notFound) {
+      return html`
+        <a class="back" href="/posts">← Back to posts</a>
+        <p class="not-found">Post not found.</p>
+      `;
     }
     return html`
-      <a href="/">&larr; Back to blog</a>
-      <h1>${post.title}</h1>
-      <span class="date">${post.date}</span>
-      <div class="content">${post.content}</div>
+      <a class="back" href="/">← Back to posts</a>
+      <h1>${this.loaderData.title}</h1>
+      <div class="date">${this.loaderData.date} · ${this.loaderData.readingTime} min read</div>
+      <p class="content">${this.loaderData.content}</p>
     `;
   }
 }

package/templates/blog/pages/tag/[tag].ts

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from 'lit';
+
+const ALL_POSTS = [
+  { slug: 'hello-world', title: 'Hello World', date: '2025-01-15', excerpt: 'Welcome to my blog built with LumenJS.', tags: ['introduction', 'lumenjs'] },
+  { slug: 'getting-started', title: 'Getting Started with LumenJS', date: '2025-01-20', excerpt: 'Learn how to build web apps with Lit components and file-based routing.', tags: ['tutorial', 'lumenjs', 'web-components'] },
+];
+
+export async function loader({ params }: { params: { tag: string } }) {
+  const posts = ALL_POSTS.filter(p => p.tags.includes(params.tag));
+  return { tag: params.tag, posts };
+}
+
+export class PageTag extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .subtitle { color: #64748b; margin-bottom: 2rem; }
+    .post { border-bottom: 1px solid #e2e8f0; padding: 1.5rem 0; }
+    .post:last-child { border-bottom: none; }
+    .post a { color: #1e293b; text-decoration: none; font-size: 1.25rem; font-weight: 600; }
+    .post a:hover { color: #7c3aed; }
+    .meta { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
+    .back { color: #7c3aed; text-decoration: none; font-size: 0.875rem; }
+    .back:hover { text-decoration: underline; }
+  `;
+
+  render() {
+    const { tag, posts } = this.loaderData;
+    return html`
+      <a class="back" href="/">← All posts</a>
+      <h1>Tagged: ${tag}</h1>
+      <p class="subtitle">${posts?.length || 0} post${posts?.length !== 1 ? 's' : ''}</p>
+      ${(posts || []).map((p: any) => html`
+        <div class="post">
+          <a href="/posts/${p.slug}">${p.title}</a>
+          <div class="meta">${p.date}</div>
+        </div>
+      `)}
+    `;
+  }
+}

package/templates/dashboard/api/stats.ts

@@ -1,7 +1,10 @@
-import { useDb } from '@nuraly/lumenjs/db';
-
 export function GET() {
-  const db = useDb();
-  const stats = db.all('SELECT id, label, value, unit, updated_at FROM stats ORDER BY id');
-  return { stats };
+  return Response.json({
+    stats: [
+      { label: 'Users', value: 1234 },
+      { label: 'Revenue', value: 12345 },
+      { label: 'Orders', value: 567 },
+      { label: 'Conversion', value: 3.2 },
+    ],
+  });
 }

package/templates/dashboard/lumenjs.config.ts

@@ -0,0 +1,3 @@
+export default {
+  title: '{{PROJECT_NAME}}',
+};

package/templates/dashboard/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "lumenjs dev",
+    "build": "lumenjs build",
+    "serve": "lumenjs serve"
+  },
+  "dependencies": {
+    "@nuraly/lumenjs": "^0.1.3",
+    "lit": "^3.1.0"
+  }
+}

package/templates/dashboard/pages/_layout.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from 'lit';
+
+export class LayoutRoot extends LitElement {
+  static styles = css`
+    :host { display: flex; min-height: 100vh; font-family: system-ui; color: #1e293b; }
+    aside { width: 240px; background: #0f172a; color: #cbd5e1; padding: 1.5rem 0; flex-shrink: 0; }
+    .logo { padding: 0 1.25rem 1.5rem; font-weight: 700; font-size: 1.125rem; color: #fff; }
+    nav a { display: block; padding: 0.625rem 1.25rem; color: #94a3b8; text-decoration: none; font-size: 0.875rem; }
+    nav a:hover { background: #1e293b; color: #fff; }
+    main { flex: 1; background: #f8fafc; padding: 2rem; }
+  `;
+
+  render() {
+    return html`
+      <aside>
+        <div class="logo">{{PROJECT_NAME}}</div>
+        <nav>
+          <a href="/">Overview</a>
+          <a href="/settings">Settings</a>
+        </nav>
+      </aside>
+      <main><slot></slot></main>
+    `;
+  }
+}