{"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,"search_vec":"'1.0.59':35 '2025':83 'alert':26 'api':23 'applic':13 'async':66 'authent':21 'autocomplet':32 'base':18 'build':9 'bundl':74 'compon':30,64 'confirm':28 'custom':25 'data':67 'datadriverinput':63 'design':42 'develop':44 'dialog':29 'differenti':40 'distribut':36 'document':75 'filter':70 'framework':3,7,56 'frontend':2,6 'hash':17 'hash-bas':16 'helper':24 'includ':61 'input':33 'javascript':84 'jwt':20 'key':39 'larger':55 'last':80 'lightweight':5 'like':57 'load':68 'minimalist':41 'need':46 'npm':38 'overhead':53 'page':12 'primarili':77 'react':58 'requir':71 'rest':22 'rout':19 'russian':79 'simpl':48 'singl':11 'single-pag':10 'spas':14 'system':27 'target':43 'tma':1 'toolkit':50 'unopinion':49 'updat':81 'version':34 'via':37 'vue':60 'webpack':72 'without':51","created_at":"2026-04-27T17:05:19.087120+00:00","updated_at":"2026-04-27T17:05:19.087120+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/tma-frontend-framework","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","auth-security","http-networking"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}