npm - application.ts - Versions diffs - 1.0.0 - Mend

application.ts 1.0.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 (31) hide show

package/LICENSE +21 -0
package/README.md +358 -0
package/dist/app/App.d.ts +124 -0
package/dist/app/App.js +326 -0
package/dist/app/App.js.map +1 -0
package/dist/app/AppView.d.ts +143 -0
package/dist/app/AppView.js +264 -0
package/dist/app/AppView.js.map +1 -0
package/dist/app/types.d.ts +67 -0
package/dist/app/types.js +2 -0
package/dist/app/types.js.map +1 -0
package/dist/index.d.ts +11 -0
package/dist/index.js +10 -0
package/dist/index.js.map +1 -0
package/dist/navigation/route.d.ts +34 -0
package/dist/navigation/route.js +68 -0
package/dist/navigation/route.js.map +1 -0
package/dist/navigation/router.d.ts +92 -0
package/dist/navigation/router.js +246 -0
package/dist/navigation/router.js.map +1 -0
package/dist/navigation/types.d.ts +63 -0
package/dist/navigation/types.js +9 -0
package/dist/navigation/types.js.map +1 -0
package/package.json +68 -0
package/src/app/App.ts +391 -0
package/src/app/AppView.ts +333 -0
package/src/app/types.ts +78 -0
package/src/index.ts +28 -0
package/src/navigation/route.ts +87 -0
package/src/navigation/router.ts +284 -0
package/src/navigation/types.ts +73 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 Xoboto Contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,358 @@
+# Application.Ts
+A lightweight, dependency-free except template.ts and stackview.ts TypeScript framework for building single-page applications (SPAs) with pure vanilla JavaScript and CSS. No build tools required, just modern web standards.
+## What is Application.Ts?
+Application.Ts is a minimalist SPA framework that combines:
+- **Routing**: URL-based navigation with parameters and guards
+- **Templating**: Reactive data binding with Template.Ts
+- **View Management**: Stack-based view transitions with StackView.Ts
+- **Component Model**: Web Components for reusable UI elements
+Built on web standards, Application.Ts provides a simple yet powerful foundation for creating modern web applications without the complexity of larger frameworks.
+## Quick Setup
+```bash
+npm install application.ts
+```
+```typescript
+import { App } from 'application.ts';
+import { HomeView } from './views/home.view';
+const app = new App('#root');
+app.router
+    .map('/', HomeView)
+    .notFound(NotFoundView);
+app.start();
+```
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>
+```
+## Features
+### 🚀 Routing
+- Pattern-based routing with URL parameters
+- Navigation guards (canEnter)
+- Programmatic navigation
+- Browser history support
+- Query string handling
+```typescript
+app.router
+    .map('/', HomeView)
+    .map('/user/:id', UserView)
+    .map('/dashboard', DashboardView, {
+        canEnter: () => AuthService.isLoggedIn()
+    })
+    .notFound(NotFoundView);
+```
+#### Route Guards with canEnter
+Protect routes with navigation guards. The `canEnter` function can:
+- Return `true` to allow navigation
+- Return `false` to block navigation
+- Return a string path to redirect
+```typescript
+// Simple authentication check
+app.router.map('/dashboard', DashboardView, {
+    canEnter: () => {
+        return AuthService.isLoggedIn();
+    }
+});
+// Redirect to login if not authenticated
+app.router.map('/profile', ProfileView, {
+    canEnter: () => {
+        if (!AuthService.isLoggedIn()) {
+            return '/login'; // Redirect to login page
+        }
+        return true; // Allow access
+    }
+});
+// Access route parameters in guard
+app.router.map('/admin/:section', AdminView, {
+    canEnter: (params) => {
+        if (!AuthService.isAdmin()) {
+            return '/'; // Redirect to home
+        }
+        return true;
+    }
+});
+// Async guards for API checks
+app.router.map('/document/:id', DocumentView, {
+    canEnter: async (params) => {
+        const hasAccess = await checkDocumentPermission(params.id);
+        return hasAccess ? true : '/unauthorized';
+    }
+});
+```
+### 🎨 Reactive Templates
+Data binding with Template.Ts v2:
+- `@on:` - Event handlers
+- `@prop:` - Property binding
+- `@att` - Attribute binding
+- `@batt` - Boolean attribute binding
+- `@if` - Conditional rendering
+- `@for` - List rendering
+- `{{ }}` - Expression interpolation
+```typescript
+const template = `
+<div>
+    <h1>{{ title }}</h1>
+    <button @on:click="increment">Count: {{ count }}</button>
+    <ul>
+        <li @for="items">{{ item.name }}</li>
+    </ul>
+</div>`;
+```
+### 🧩 Component System
+Build reusable components with AppView base class:
+```typescript
+import { AppView, Register } from 'application.ts';
+@Register
+export class MyComponent extends AppView {
+    template() {
+        return `<div>{{ message }}</div>`;
+    }
+    state() {
+        return { message: 'Hello World' };
+    }
+}
+```
+### 📐 Layouts
+Wrap views with shared layouts:
+```typescript
+app.router
+    .map('/', HomeView)
+    .map('/about', AboutView)
+    .setLayout(DefaultLayout);
+```
+### 🎯 View Lifecycle
+Hook into view lifecycle events:
+```typescript
+export class MyView extends AppView {
+    async onMounted() {
+        // View mounted to DOM
+    }
+    async stackViewShown() {
+        // View became visible
+    }
+    async stackViewHidden() {
+        // View hidden
+    }
+}
+```
+## How to Use
+### 1. Create a View
+```typescript
+// views/home.view.ts
+import { AppView, Register } from 'application.ts';
+const template = `
+<div class="home">
+    <h1>{{ title }}</h1>
+    <p>Counter: {{ count }}</p>
+    <button @on:click="increment">Increment</button>
+</div>`;
+class State {
+    title: string = 'Home Page';
+    count: number = 0;
+    increment: () => void = () => {
+        this.count++;
+    };
+}
+@Register
+export class HomeView extends AppView {
+    template() {
+        return template;
+    }
+    state() {
+        return new State();
+    }
+}
+```
+### 2. Set Up Routes
+```typescript
+// main.ts
+import { App } from 'application.ts';
+import { HomeView } from './views/home.view';
+import { AboutView } from './views/about.view';
+import { UserView } from './views/user.view';
+const app = new App('#root');
+app.router
+    .map('/', HomeView)
+    .map('/about', AboutView)
+    .map('/user/:id', UserView);
+app.start();
+```
+### 3. Navigate Between Views
+```typescript
+// Programmatic navigation
+this.navigate('/about');
+this.navigate('/user/123');
+// In templates with links
+<a href="/about">About</a>
+<a href="/user/42">User Profile</a>
+```
+### 4. Access Route Parameters
+```typescript
+export class UserView extends AppView {
+    async onMounted() {
+        const userId = this.params?.id;
+        console.log('User ID:', userId);
+    }
+}
+```
+### 5. Create Components
+```typescript
+// components/button.component.ts
+import { AppView, Register } from 'application.ts';
+const template = `
+<button @on:click="handleClick" class="btn">
+    {{ label }}
+</button>`;
+@Register
+export class AppButton extends AppView {
+    template() { return template; }
+    state() {
+        return {
+            label: 'Click me',
+            handleClick: () => {
+                this.dispatchEvent(new CustomEvent('buttonclick', {
+                    bubbles: true
+                }));
+            }
+        };
+    }
+    get label() { return this.viewState.label; }
+    set label(value: string) { this.setState('label', value); }
+}
+```
+Use in templates:
+```html
+<app-button @prop:label="'Save'" @on:buttonclick="handleSave"></app-button>
+```
+## Examples
+Explore the `/examples` folder for complete working examples:
+- **Minimal** - The simplest possible app
+- **Basic** - Routing, layouts, and components
+- **Advanced** - Full-featured SPA with services, state management, and more
+## API Reference
+### App
+```typescript
+const app = new App(selector: string, options?: AppOptions);
+app.router // Access router
+app.start() // Start the application
+```
+### Router
+```typescript
+router.map(path: string, view: typeof AppView, options?: RouteOptions)
+router.setLayout(layout: typeof AppView)
+router.notFound(view: typeof AppView)
+router.navigate(path: string)
+router.start()
+```
+### AppView
+```typescript
+abstract class AppView {
+    template(): string // Define HTML template
+    state() // Define reactive state
+    // Lifecycle hooks
+    onBeforeMount()
+    onMounted()
+    onBeforeUnmount()
+    onUnmounted()
+    onStateChanged()
+    onParamsChanged()
+    // Navigation
+    navigate(path: string)
+    // State management
+    setState(key: string, value: any)
+    setStates(updates: Record<string, any>)
+    update() // Force re-render
+}
+```
+## License
+MIT
+## Contributing
+Contributions are welcome! Please feel free to submit issues or pull requests.
+## Links
+- [Template.Ts Documentation](https://www.npmjs.com/package/template.ts)
+- [StackView.Ts Documentation](https://www.npmjs.com/package/stackview.ts)

package/dist/app/App.d.ts ADDED Viewed

@@ -0,0 +1,124 @@
+import { Router } from '../navigation/router';
+import type { AppView } from './AppView';
+/**
+ * View constructor type
+ */
+type ViewConstructor = new () => AppView<any>;
+/**
+ * Main App class that manages routing and view rendering
+ * Integrates Router with StackView.Ts for navigation
+ *
+ * @example
+ * ```typescript
+ * import { App } from 'application.ts';
+ * import { HomeView, AboutView, NotFoundView } from './views';
+ *
+ * const app = new App('#root');
+ *
+ * app.router
+ *     .map('/', HomeView)
+ *     .map('/about', AboutView)
+ *     .notFound(NotFoundView);
+ *
+ * app.start();
+ * ```
+ */
+export declare class App {
+    readonly router: Router;
+    private stackView;
+    private rootElement;
+    private viewRegistry;
+    private layoutRegistry;
+    private currentViewInstance;
+    private currentLayoutInstance;
+    private currentRoutePath;
+    private defaultLayout;
+    /**
+     * Get the App instance from any element by traversing up the DOM tree
+     * @param element - Any HTMLElement in the app
+     * @returns App instance or null if not found
+     */
+    static fromElement(element: HTMLElement | null): App | null;
+    constructor(rootSelector?: string);
+    /**
+     * Register a view class with a handler name
+     * @param handler - The view handler/identifier used in router.map()
+     * @param viewClass - The AppView class constructor
+     */
+    registerView(handler: string, viewClass: ViewConstructor): this;
+    /**
+     * Register multiple views at once
+     * @param views - Object mapping handler names to view classes
+     */
+    registerViews(views: Record<string, ViewConstructor>): this;
+    /**
+     * Register a layout class with a handler name
+     * @param handler - The layout handler/identifier
+     * @param layoutClass - The AppView layout class constructor
+     */
+    registerLayout(handler: string, layoutClass: ViewConstructor): this;
+    /**
+     * Register multiple layouts at once
+     * @param layouts - Object mapping handler names to layout classes
+     */
+    registerLayouts(layouts: Record<string, ViewConstructor>): this;
+    /**
+     * Set the default layout for all routes
+     * @param handler - The layout handler name, or null for no layout
+     */
+    setDefaultLayout(handler: string | null): this;
+    /**
+     * Initialize the root element and StackView
+     * @param selector - CSS selector for the root element
+     */
+    private initializeRoot;
+    /**
+     * Start the application
+     * @param rootSelector - Optional root selector if not provided in constructor
+     */
+    start(rootSelector?: string): void;
+    /**
+     * Resolve view class from handler (supports both class constructor and string lookup)
+     * @param handler - View class constructor or string identifier
+     * @returns View class constructor or null
+     */
+    private resolveViewClass;
+    /**
+     * Handle navigation event from router
+     */
+    private handleNavigation;
+    /**
+     * Render view wrapped in a layout
+     */
+    private renderWithLayout;
+    /**
+     * Render view without layout
+     */
+    private renderWithoutLayout;
+    /**
+     * Handle not found event from router
+     */
+    private handleNotFound;
+    /**
+     * Get the route pattern that matches the given path
+     */
+    getRoutePattern(path: string): string | null;
+    /**
+     * Get the current view instance
+     */
+    get currentView(): AppView<any> | null;
+    /**
+     * Get the current route pattern (e.g., '/user/:id')
+     */
+    get currentRoute(): string | null;
+    /**
+     * Navigate to a specific path
+     * @param path - The path to navigate to
+     */
+    navigate(path: string): void;
+    /**
+     * Go back in navigation history
+     */
+    goBack(): Promise<void>;
+}
+export {};