{"id":22509,"library":"ui-framework-jps","title":"UI Framework JPS","description":"A TypeScript-based UI framework for state management and UI components, integrating React, Socket.io, Express, MongoDB, and Chart.js. Current version is 2.1.12-6. Release cadence is irregular; developed as a personal project. Key differentiators: includes real-time features through Socket.io, full-stack capabilities with Express and MongoDB, and uses Bootstrap for styling. However, documentation is incomplete, and the package is in early stages with limited adoption.","status":"active","version":"2.1.12-6","language":"javascript","source_language":"en","source_url":"https://github.com/jsharples777/ui-framework","tags":["javascript","React","Babel","Socket","typescript"],"install":[{"cmd":"npm install ui-framework-jps","lang":"bash","label":"npm"},{"cmd":"yarn add ui-framework-jps","lang":"bash","label":"yarn"},{"cmd":"pnpm add ui-framework-jps","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"UI component rendering","package":"react","optional":false},{"reason":"Real-time communication","package":"socket.io","optional":false},{"reason":"Server framework","package":"express","optional":false},{"reason":"Database","package":"mongodb","optional":false}],"imports":[{"note":"ESM-only package; CommonJS require may lead to default import issues.","wrong":"const uiFramework = require('ui-framework-jps')","symbol":"default","correct":"import uiFramework from 'ui-framework-jps'"},{"note":"Named export Component must be destructured.","wrong":"import Component from 'ui-framework-jps'","symbol":"Component","correct":"import { Component } from 'ui-framework-jps'"},{"note":"Use import statement for tree-shaking.","wrong":"const StateManager = require('ui-framework-jps').StateManager","symbol":"StateManager","correct":"import { StateManager } from 'ui-framework-jps'"}],"quickstart":{"code":"import uiFramework from 'ui-framework-jps';\nimport { Component, StateManager } from 'ui-framework-jps';\n\n// Initialize with API server URL\nconst app = uiFramework.init({\n  API_SERVER_URL: process.env.API_SERVER_URL ?? 'http://localhost:3000',\n  DEBUG: true,\n});\n\n// Create a simple component\nconst MyComponent = () => {\n  const state = StateManager.useState('counter');\n  return (\n    <div>\n      <p>Count: {state.value}</p>\n      <button onClick={() => state.set(state.value + 1)}>Increment</button>\n    </div>\n  );\n};\n\napp.render('#root', MyComponent);","lang":"typescript","description":"This quickstart shows how to initialize the framework, use state management, and render a simple React component."},"warnings":[{"fix":"Use uiFramework.init() instead of uiFramework.createApp().","message":"Version 2.0.0 changed the initialization API from createApp to init.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Set API_SERVER_URL to a valid URL string.","message":"use of API_SERVER_URL as 'blank' defaults to undefined; future versions may require a valid URL.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Set DEBUG='true' in .env file.","message":"DEBUG must be set to 'true' as a string, not boolean, in environment variables.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import statements or import() for CommonJS.","message":"The package is ESM-only; using require() will fail unless you use dynamic import.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'-6':27 '2.1.12':26 'adopt':72 'babel':75 'base':7 'bootstrap':56 'cadenc':29 'capabl':49 'chart.js':22 'compon':15 'current':23 'develop':32 'differenti':38 'document':60 'earli':68 'express':19,51 'featur':43 'framework':2,9 'full':47 'full-stack':46 'howev':59 'includ':39 'incomplet':62 'integr':16 'irregular':31 'javascript':73 'jps':3 'key':37 'limit':71 'manag':12 'mongodb':20,53 'packag':65 'person':35 'project':36 'react':17,74 'real':41 'real-tim':40 'releas':28 'socket':76 'socket.io':18,45 'stack':48 'stage':69 'state':11 'style':58 'time':42 'typescript':6,77 'typescript-bas':5 'ui':1,8,14 'use':55 'version':24","created_at":"2026-04-27T17:05:33.151499+00:00","updated_at":"2026-04-27T17:05:33.151499+00:00","problems":[{"fix":"Replace createApp with init.","cause":"Version >=2.0.0 changed the API to uiFramework.init.","error":"TypeError: uiFramework.createApp is not a function"},{"fix":"Run npm install react react-dom.","cause":"React is a peer dependency but not installed.","error":"Error: Cannot find module 'react'"},{"fix":"Run npm install socket.io.","cause":"Socket.io is a required dependency.","error":"Module not found: Error: Can't resolve 'socket.io'"}],"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":"https://github.com/jsharples777/ui-framework","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/ui-framework-jps","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","database","http-networking","observability"],"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}}