{"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,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}