TMA Frontend Framework

1.0.59 verified Mon Apr 27 auth: no javascript

A lightweight frontend framework for building single-page applications (SPAs) with hash-based routing, JWT authentication, REST API helper, custom alert system, confirm dialog component, and autocomplete input. Version 1.0.59, distributed via npm. Key differentiators: minimalistic design targeting developers who need a simple, unopinionated toolkit without the overhead of larger frameworks like React or Vue. Includes a DataDriverInput component with async data loading and filtering. Requires Webpack for bundling. Documentation is primarily in Russian. Last updated in 2025.

Common errors

error import { Router } from 'tma-frontend-framework'; TypeError: Router is not a constructor ↓

cause Using default import instead of named import.

fix

Change to: import { Router } from 'tma-frontend-framework';

error Uncaught SyntaxError: The requested module 'tma-frontend-framework' does not provide an export named 'default' ↓

cause Attempting to import as default export, which does not exist.

fix

Use named exports like: import { Router, ApiHelper } from 'tma-frontend-framework';

error Module not found: Error: Can't resolve 'tma-frontend-framework' ↓

cause Missing npm install or incorrect path.

fix

Run: npm install tma-frontend-framework

error Uncaught TypeError: Cannot read properties of undefined (reading 'login') ↓

cause ApiHelper instance not created with 'new' keyword.

fix

Use: const api = new ApiHelper();

Warnings

gotcha Router uses hash-based routing (e.g., #/) but does not support history API or non-hash paths. ↓

fix Ensure URLs are structured as #/path or configure server for hash routing.

gotcha All components and functions are destructured from the package; there is no default export. ↓

fix Use named imports: import { Router } from 'tma-frontend-framework'.

gotcha Package depends on Webpack and CSS loaders for bundling; not pre-compiled. ↓

fix Install webpack, css-loader, style-loader and configure a webpack config.

Install

npm install tma-frontend-framework

yarn add tma-frontend-framework

pnpm add tma-frontend-framework

Imports

Router

wrong

import Router from 'tma-frontend-framework'

correct

import { Router } from 'tma-frontend-framework'

Named export, not default. Only ESM supported.

ApiHelper

wrong

const ApiHelper = require('tma-frontend-framework')

correct

import { ApiHelper } from 'tma-frontend-framework'

Named export. ESM only; no CommonJS support.

DataDriverInput
```
import { DataDriverInput } from 'tma-frontend-framework'
```
Named export for the autocomplete input component.
Alert functions (e.g., showAlert)
wrong
```
import { Alert } from 'tma-frontend-framework'
```
correct
```
import { showAlert } from 'tma-frontend-framework'
```
Custom alert functions are exported individually; no Alert class.

Confirm component

wrong

import Confirm from 'tma-frontend-framework'

correct

import { Confirm } from 'tma-frontend-framework'

Named export for the confirm dialog component.

Quickstart

Shows basic usage of Router, ApiHelper, and DataDriverInput to set up routing, authenticated API calls, and autocomplete input.

import { Router } from 'tma-frontend-framework';
import { ApiHelper } from 'tma-frontend-framework';
import { DataDriverInput } from 'tma-frontend-framework';

// Define routes
const routes = {
  '/': () => console.log('Home'),
  '/about': () => console.log('About'),
};
const router = new Router(routes);
router.init();

// API helper
const api = new ApiHelper();
async function getData() {
  const token = await api.login('/auth', 'user', 'pass');
  const data = await api.request('/data', 'GET');
  console.log(data);
}

// DataDriverInput
const input = new DataDriverInput({
  dataLoader: async (query) => {
    const res = await fetch('/api/items?q=' + query);
    return res.json();
  },
  maxItems: 10,
  inputElement: document.getElementById('my-input'),
});
input.init();