{"id":22465,"library":"tma-frontend-framework","title":"TMA Frontend Framework","description":"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.","status":"active","version":"1.0.59","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install tma-frontend-framework","lang":"bash","label":"npm"},{"cmd":"yarn add tma-frontend-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add tma-frontend-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export, not default. Only ESM supported.","wrong":"import Router from 'tma-frontend-framework'","symbol":"Router","correct":"import { Router } from 'tma-frontend-framework'"},{"note":"Named export. ESM only; no CommonJS support.","wrong":"const ApiHelper = require('tma-frontend-framework')","symbol":"ApiHelper","correct":"import { ApiHelper } from 'tma-frontend-framework'"},{"note":"Named export for the autocomplete input component.","wrong":null,"symbol":"DataDriverInput","correct":"import { DataDriverInput } from 'tma-frontend-framework'"},{"note":"Custom alert functions are exported individually; no Alert class.","wrong":"import { Alert } from 'tma-frontend-framework'","symbol":"Alert functions (e.g., showAlert)","correct":"import { showAlert } from 'tma-frontend-framework'"},{"note":"Named export for the confirm dialog component.","wrong":"import Confirm from 'tma-frontend-framework'","symbol":"Confirm component","correct":"import { Confirm } from 'tma-frontend-framework'"}],"quickstart":{"code":"import { Router } from 'tma-frontend-framework';\nimport { ApiHelper } from 'tma-frontend-framework';\nimport { DataDriverInput } from 'tma-frontend-framework';\n\n// Define routes\nconst routes = {\n  '/': () => console.log('Home'),\n  '/about': () => console.log('About'),\n};\nconst router = new Router(routes);\nrouter.init();\n\n// API helper\nconst api = new ApiHelper();\nasync function getData() {\n  const token = await api.login('/auth', 'user', 'pass');\n  const data = await api.request('/data', 'GET');\n  console.log(data);\n}\n\n// DataDriverInput\nconst input = new DataDriverInput({\n  dataLoader: async (query) => {\n    const res = await fetch('/api/items?q=' + query);\n    return res.json();\n  },\n  maxItems: 10,\n  inputElement: document.getElementById('my-input'),\n});\ninput.init();","lang":"javascript","description":"Shows basic usage of Router, ApiHelper, and DataDriverInput to set up routing, authenticated API calls, and autocomplete input."},"warnings":[{"fix":"Ensure URLs are structured as #/path or configure server for hash routing.","message":"Router uses hash-based routing (e.g., #/) but does not support history API or non-hash paths.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use named imports: import { Router } from 'tma-frontend-framework'.","message":"All components and functions are destructured from the package; there is no default export.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install webpack, css-loader, style-loader and configure a webpack config.","message":"Package depends on Webpack and CSS loaders for bundling; not pre-compiled.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change to: import { Router } from 'tma-frontend-framework';","cause":"Using default import instead of named import.","error":"import { Router } from 'tma-frontend-framework'; TypeError: Router is not a constructor"},{"fix":"Use named exports like: import { Router, ApiHelper } from 'tma-frontend-framework';","cause":"Attempting to import as default export, which does not exist.","error":"Uncaught SyntaxError: The requested module 'tma-frontend-framework' does not provide an export named 'default'"},{"fix":"Run: npm install tma-frontend-framework","cause":"Missing npm install or incorrect path.","error":"Module not found: Error: Can't resolve 'tma-frontend-framework'"},{"fix":"Use: const api = new ApiHelper();","cause":"ApiHelper instance not created with 'new' keyword.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'login')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}