npm - create-elit - Versions diffs - 3.2.7 → 3.2.8 - Mend

create-elit 3.2.7 → 3.2.8

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 (23) hide show

package/dist/templates/README.md +23 -0
package/dist/templates/elit.config.ts +59 -0
package/dist/templates/package.json +14 -0
package/dist/templates/public/favicon.svg +22 -0
package/dist/templates/public/index.html +14 -0
package/dist/templates/src/client.ts +15 -0
package/dist/templates/src/components/Footer.ts +20 -0
package/dist/templates/src/components/Header.ts +70 -0
package/dist/templates/src/components/index.ts +2 -0
package/dist/templates/src/main.ts +22 -0
package/dist/templates/src/pages/ChatListPage.ts +144 -0
package/dist/templates/src/pages/ChatPage.ts +186 -0
package/dist/templates/src/pages/ForgotPasswordPage.ts +110 -0
package/dist/templates/src/pages/HomePage.ts +166 -0
package/dist/templates/src/pages/LoginPage.ts +182 -0
package/dist/templates/src/pages/PrivateChatPage.ts +268 -0
package/dist/templates/src/pages/ProfilePage.ts +342 -0
package/dist/templates/src/pages/RegisterPage.ts +230 -0
package/dist/templates/src/router.ts +30 -0
package/dist/templates/src/server.ts +595 -0
package/dist/templates/src/styles.ts +1181 -0
package/dist/templates/tsconfig.json +23 -0
package/package.json +2 -3

package/dist/templates/README.md ADDED Viewed

@@ -0,0 +1,23 @@
+# ELIT_PROJECT_NAME
+A new Elit project created with create-elit.
+## Getting Started
+```bash
+npm install
+npm run dev
+```
+Visit http://localhost:3003 to view your app.
+## Available Scripts
+- `npm run dev` - Start development server with HMR
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+## Learn More
+- [Elit Documentation](https://d-osc.github.io/elit)
+- [GitHub Repository](https://github.com/d-osc/elit)

package/dist/templates/elit.config.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { server } from './src/server';
+import { client } from './src/client';
+export default {
+  dev: {
+    port: 3003,
+    host: 'localhost',
+    open: true,
+    logging: true,
+    clients: [{
+      root: '.',
+      basePath: '',
+      ssr: () => client,
+      api: server
+    }]
+  },
+  build: [{
+    entry: './src/main.ts',
+    outDir: './dist',
+    outFile: 'main.js',
+    format: 'esm',
+    minify: true,
+    sourcemap: true,
+    target: 'es2020',
+    copy: [
+      {
+        from: './public/index.html', to: './index.html',
+        transform: (content: string, config: { basePath: string; projectName: string; }) => {
+          // Replace script src
+          let html = content.replace('src="../src/main.ts"', 'src="main.js"');
+          // Replace project name placeholder
+          html = html.replace(/ELIT_PROJECT_NAME/g, config.projectName);
+          // Inject base tag if basePath is configured
+          if (config.basePath) {
+            const baseTag = `<base href="${config.basePath}/">`;
+            html = html.replace(
+              '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+              `<meta name="viewport" content="width=device-width, initial-scale=1.0">\n  ${baseTag}`
+            );
+          }
+          return html;
+        }
+      },
+      { from: './public/favicon.svg', to: './favicon.svg' }
+    ]
+  }],
+  preview: {
+    port: 3000,
+    host: 'localhost',
+    open: false,
+    logging: true,
+    root: './dist',
+    basePath: '',
+    index: './index.html'
+  }
+};

package/dist/templates/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "ELIT_PROJECT_NAME",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "elit dev",
+    "build": "elit build",
+    "preview": "elit preview"
+  },
+  "dependencies": {
+    "@types/node": "^25.0.9",
+     "elit": "^ELIT_VERSION"
+  }
+}

package/dist/templates/public/favicon.svg ADDED Viewed

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366f1"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <!-- Clean background -->
+  <rect width="100" height="100" rx="20" fill="url(#grad)"/>
+  <!-- Simple E shape - 3 horizontal bars -->
+  <rect x="28" y="25" width="44" height="8" rx="4" fill="white"/>
+  <rect x="28" y="46" width="32" height="8" rx="4" fill="white"/>
+  <rect x="28" y="67" width="44" height="8" rx="4" fill="white"/>
+  <!-- Vertical connector -->
+  <rect x="28" y="25" width="8" height="50" rx="4" fill="white"/>
+  <!-- Single accent dot -->
+  <circle cx="72" cy="50" r="6" fill="white" opacity="0.5"/>
+</svg>

package/dist/templates/public/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ELIT_PROJECT_NAME</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <meta name="description" content="Built with Elit - Full-stack TypeScript framework">
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="../src/main.ts"></script>
+</body>
+</html>

package/dist/templates/src/client.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { div, html, head, body, title, link, script, meta } from 'elit/el';
+export const client = html(
+  head(
+    title('ELIT_PROJECT_NAME - Elit App'),
+    link({ rel: 'icon', type: 'image/svg+xml', href: 'public/favicon.svg' }),
+    meta({ charset: 'UTF-8' }),
+    meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+    meta({ name: 'description', content: 'Elit - Full-stack TypeScript framework with dev server, HMR, routing, SSR, and REST API.' })
+  ),
+  body(
+    div({ id: 'app' }),
+    script({ type: 'module', src: '/src/main.js' })
+  )
+);

package/dist/templates/src/components/Footer.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { footer, div, p, a } from 'elit/el';
+export function Footer() {
+  return footer({ className: 'footer' },
+    div({ className: 'footer-content' },
+      div({ className: 'footer-section' },
+        p({ className: 'footer-title' }, 'My Elit App'),
+        p({ className: 'footer-text' }, 'Built with Elit Framework')
+      ),
+      div({ className: 'footer-section' },
+        a({ href: 'https://github.com', target: '_blank', className: 'footer-link' }, 'GitHub'),
+        a({ href: '#', className: 'footer-link' }, 'Documentation'),
+        a({ href: '#', className: 'footer-link' }, 'Support')
+      ),
+      div({ className: 'footer-section' },
+        p({ className: 'footer-copyright' }, '© 2026 My Elit App. All rights reserved.')
+      )
+    )
+  );
+}

package/dist/templates/src/components/Header.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import { header, nav, div, a, h1, button, span } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+export function Header(router: Router) {
+  // Check if user is logged in (has token in localStorage)
+  const isLoggedIn = createState(!!localStorage.getItem('token'));
+  const user = createState(() => {
+    const userStr = localStorage.getItem('user');
+    return userStr ? JSON.parse(userStr) : null;
+  });
+  // Listen for storage changes to update header when login/logout happens
+  const handleStorageChange = (e: StorageEvent) => {
+    if (e.key === 'token' || e.key === 'user') {
+      isLoggedIn.value = !!localStorage.getItem('token');
+      const userStr = localStorage.getItem('user');
+      user.value = userStr ? JSON.parse(userStr) : null;
+    }
+  };
+  // Also listen for custom storage events (same-tab updates)
+  const handleCustomStorageChange = () => {
+    isLoggedIn.value = !!localStorage.getItem('token');
+    const userStr = localStorage.getItem('user');
+    user.value = userStr ? JSON.parse(userStr) : null;
+  };
+  window.addEventListener('storage', handleStorageChange);
+  window.addEventListener('elit:storage', handleCustomStorageChange);
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    isLoggedIn.value = false;
+    router.push('/');
+  };
+  return header({ className: 'header' },
+    nav({ className: 'nav' },
+      div({ className: 'nav-brand' },
+        a({ href: '#/', className: 'brand-link' },
+          h1({ className: 'brand-title' }, 'ELIT_PROJECT_NAME')
+        )
+      ),
+      reactive(isLoggedIn, (loggedIn) => {
+        if (loggedIn) {
+          return div({ className: 'nav-menu' },
+            a({ href: '#/chat/list', className: 'nav-link' }, 'Messages'),
+            a({ href: '#/profile', className: 'nav-link' }, 'Profile'),
+            reactive(user, (u) => u ? span({ className: 'nav-user' }, `Welcome, ${u.name}`) : null),
+            button({
+              className: 'btn btn-secondary btn-sm',
+              onclick: handleLogout
+            }, 'Logout')
+          );
+        }
+        return div({ className: 'nav-menu' },
+          a({ href: '#/login', className: 'nav-link' }, 'Login'),
+          button({
+            className: 'btn btn-primary btn-sm',
+            onclick: () => router.push('/register')
+          }, 'Sign Up')
+        );
+      })
+    )
+  );
+}

package/dist/templates/src/components/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Header } from './Header';
2	+ export { Footer } from './Footer';

package/dist/templates/src/main.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { div, main } from 'elit/el';
+import { reactive } from 'elit/state';
+import { dom } from 'elit/dom';
+import { injectStyles } from './styles';
+import { router, RouterView } from './router';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+injectStyles()
+// Create reactive state (shared between SSR and client)
+// Main App
+const App = () =>
+  div(
+    Header(router),
+    main(
+      reactive(router.currentRoute, () => RouterView())
+    ),
+    Footer()
+  );
+// Render
+dom.render('#app', App());

package/dist/templates/src/pages/ChatListPage.ts ADDED Viewed

@@ -0,0 +1,144 @@
+import { div, h2, h3, p, button, span, input } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  bio: string;
+  avatar: string;
+}
+export function ChatListPage(router: Router) {
+  // Check if user is logged in
+  const token = localStorage.getItem('token');
+  const user = localStorage.getItem('user');
+  if (!token || !user) {
+    router.push('/login');
+    return div({ className: 'chat-page' }, p('Redirecting to login...'));
+  }
+  const userData = JSON.parse(user);
+  const users = createState<User[]>([]);
+  const searchQuery = createState('');
+  const isLoading = createState(false);
+  const error = createState('');
+  // Load users
+  const loadUsers = async () => {
+    isLoading.value = true;
+    try {
+      const response = await fetch('/api/users', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Current user ID:', userData.id);
+        console.log('All users:', data.users);
+        // Filter out current user
+        const allUsers = data.users || [];
+        users.value = allUsers.filter((u: User) => u.id !== userData.id);
+        console.log('Filtered users:', users.value);
+      } else {
+        error.value = 'Failed to load users';
+      }
+    } catch (err) {
+      console.error('Error loading users:', err);
+      error.value = 'Network error. Please try again.';
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  // Load users on mount
+  loadUsers();
+  // Open chat with specific user
+  const openChat = (userId: string) => {
+    router.push(`/chat/dm/${userId}`);
+  };
+  return div({ className: 'chat-list-page' },
+    div({ className: 'chat-container' },
+      // Header
+      div({ className: 'chat-header' },
+        div({ className: 'chat-header-info' },
+          h2({ className: 'chat-title' }, 'Messages'),
+          p({ className: 'chat-subtitle' }, 'Select a user to start chatting')
+        ),
+        button({
+          className: 'btn btn-secondary btn-sm',
+          onclick: () => router.push('/profile')
+        }, 'Back to Profile')
+      ),
+      // Search
+      div({ className: 'chat-search' },
+        input({
+          type: 'text',
+          className: 'chat-input',
+          placeholder: 'Search users...',
+          oninput: (e: Event) => {
+            searchQuery.value = (e.target as HTMLInputElement).value;
+          }
+        })
+      ),
+      // Error Display
+      reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+      // Users List
+      div({ className: 'chat-users-list' },
+        reactive(isLoading, (loading) => {
+          if (loading) {
+            return div({ className: 'chat-loading' }, p('Loading users...'));
+          }
+          return reactive(users, (userList) => {
+          const filteredUsers = searchQuery.value
+            ? userList.filter(u =>
+                u.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                u.email.toLowerCase().includes(searchQuery.value.toLowerCase())
+              )
+            : userList;
+          if (filteredUsers.length === 0) {
+            return div({ className: 'chat-empty' },
+              p({ className: 'chat-empty-text' }, searchQuery.value ? 'No users found' : 'No other users yet')
+            );
+          }
+          return div({ className: 'chat-users-grid' },
+            ...filteredUsers.map(u =>
+              div({
+                className: 'chat-user-card',
+                onclick: () => openChat(u.id)
+              },
+                div({ className: 'chat-user-avatar' },
+                  span({ className: 'chat-avatar-text' }, u.name.charAt(0).toUpperCase())
+                ),
+                div({ className: 'chat-user-info' },
+                  h3({ className: 'chat-user-name' }, u.name),
+                  p({ className: 'chat-user-email' }, u.email),
+                  u.bio ? p({ className: 'chat-user-bio' }, u.bio) : null
+                ),
+                button({
+                  className: 'btn btn-primary btn-sm chat-chat-button'
+                }, 'Chat')
+              )
+            )
+          );
+        });
+        })
+      )
+    )
+  );
+}

package/dist/templates/src/pages/ChatPage.ts ADDED Viewed

@@ -0,0 +1,186 @@
+import { div, h2, p, input, button, span, form } from 'elit/el';
+import { createState, reactive, createSharedState } from 'elit/state';
+import type { Router } from 'elit';
+interface ChatMessage {
+  id: string;
+  roomId: string;
+  userId: string;
+  userName: string;
+  text: string;
+  timestamp: number;
+}
+export function ChatPage(router: Router) {
+  // Check if user is logged in
+  const token = localStorage.getItem('token');
+  const user = localStorage.getItem('user');
+  if (!token || !user) {
+    router.push('/login');
+    return div({ className: 'chat-page' }, p('Redirecting to login...'));
+  }
+  const userData = JSON.parse(user);
+  // Create shared state for chat messages with WebSocket sync
+  const chatMessages = createSharedState<ChatMessage[]>('chat:general', [], `ws://${location.host}`);
+  const newMessage = createState('');
+  const error = createState('');
+  const isLoading = createState(false);
+  // Load initial messages from API
+  const loadMessages = async () => {
+    try {
+      const response = await fetch('/api/chat/messages?roomId=general', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        chatMessages.value = data.messages || [];
+      }
+    } catch (err) {
+      console.error('Failed to load messages:', err);
+    }
+  };
+  // Load messages on mount
+  loadMessages();
+  const handleSendMessage = async (e: Event) => {
+    e.preventDefault();
+    const messageText = newMessage.value.trim();
+    if (!messageText) {
+      error.value = 'Please enter a message';
+      return;
+    }
+    newMessage.value = '';
+    error.value = '';
+    isLoading.value = true;
+    try {
+      const response = await fetch('/api/chat/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          roomId: 'general',
+          message: messageText
+        })
+      });
+      if (response.ok) {
+        const data = await response.json();
+        // Add the sent message to shared state (syncs with other clients)
+        if (data.message) {
+          chatMessages.value = [...chatMessages.value, data.message];
+        }
+      } else {
+        const errorData = await response.json();
+        error.value = errorData.error || 'Failed to send message';
+      }
+      isLoading.value = false;
+    } catch (err) {
+      error.value = 'Network error. Please try again.';
+      isLoading.value = false;
+    }
+  };
+  // Cleanup shared state on unmount
+  const cleanup = () => {
+    chatMessages.disconnect();
+  };
+  // Poll for new messages every 2 seconds (fallback if WebSocket is not available)
+  const pollInterval = setInterval(() => {
+    if (!chatMessages.value || chatMessages.value.length === 0) {
+      loadMessages();
+    }
+  }, 2000);
+  return div({ className: 'chat-page' },
+    div({ className: 'chat-container' },
+      // Chat Header
+      div({ className: 'chat-header' },
+        div({ className: 'chat-header-info' },
+          h2({ className: 'chat-title' }, 'Chat Room'),
+          p({ className: 'chat-subtitle' }, `Logged in as ${userData.name}`)
+        ),
+        button({
+          className: 'btn btn-secondary btn-sm',
+          onclick: () => {
+            clearInterval(pollInterval);
+            cleanup();
+            router.push('/profile');
+          }
+        }, 'Back to Profile')
+      ),
+      // Messages Area
+      div({ className: 'chat-messages' },
+        reactive(chatMessages.state, (msgs) => {
+          if (!msgs || msgs.length === 0) {
+            return div({ className: 'chat-empty' },
+              p({ className: 'chat-empty-text' }, 'No messages yet. Start the conversation!')
+            );
+          }
+          return div({ className: 'chat-messages-list' },
+            ...msgs.map(msg =>
+              div({
+                className: `chat-message ${msg.userId === userData.id ? 'chat-message-user' : 'chat-message-other'}`
+              },
+                div({ className: 'chat-message-content' },
+                  span({ className: 'chat-message-sender' },
+                    msg.userId === userData.id ? 'You' : msg.userName
+                  ),
+                  p({ className: 'chat-message-text' }, msg.text)
+                ),
+                span({ className: 'chat-message-time' },
+                  new Date(msg.timestamp).toLocaleTimeString()
+                )
+              )
+            )
+          );
+        }),
+        isLoading.value ? div({ className: 'chat-typing' },
+          span({ className: 'typing-dot' }, '.'),
+          span({ className: 'typing-dot' }, '.'),
+          span({ className: 'typing-dot' }, '.')
+        ) : null
+      ),
+      // Error Display
+      reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+      // Input Area
+      form({ className: 'chat-input-area', onsubmit: handleSendMessage },
+        input({
+          type: 'text',
+          className: 'chat-input',
+          placeholder: 'Type your message...',
+          value: newMessage.value,
+          oninput: (e: Event) => {
+            newMessage.value = (e.target as HTMLInputElement).value;
+            error.value = '';
+          }
+        }),
+        button({
+          type: 'submit',
+          className: 'btn btn-primary',
+          disabled: isLoading.value || !newMessage.value.trim()
+        }, isLoading.value ? 'Sending...' : 'Send')
+      )
+    )
+  );
+}