UI Framework JPS

2.1.12-6 verified Mon Apr 27 auth: no javascript

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.

Common errors

error TypeError: uiFramework.createApp is not a function ↓

cause Version >=2.0.0 changed the API to uiFramework.init.

fix

Replace createApp with init.

error Error: Cannot find module 'react' ↓

cause React is a peer dependency but not installed.

fix

Run npm install react react-dom.

error Module not found: Error: Can't resolve 'socket.io' ↓

cause Socket.io is a required dependency.

fix

Run npm install socket.io.

Warnings

breaking Version 2.0.0 changed the initialization API from createApp to init. ↓

fix Use uiFramework.init() instead of uiFramework.createApp().

deprecated use of API_SERVER_URL as 'blank' defaults to undefined; future versions may require a valid URL. ↓

fix Set API_SERVER_URL to a valid URL string.

gotcha DEBUG must be set to 'true' as a string, not boolean, in environment variables. ↓

fix Set DEBUG='true' in .env file.

gotcha The package is ESM-only; using require() will fail unless you use dynamic import. ↓

fix Use import statements or import() for CommonJS.

Install

npm install ui-framework-jps

yarn add ui-framework-jps

pnpm add ui-framework-jps

Imports

default

wrong

const uiFramework = require('ui-framework-jps')

correct

import uiFramework from 'ui-framework-jps'

ESM-only package; CommonJS require may lead to default import issues.

Component

wrong

import Component from 'ui-framework-jps'

correct

import { Component } from 'ui-framework-jps'

Named export Component must be destructured.

StateManager

wrong

const StateManager = require('ui-framework-jps').StateManager

correct

import { StateManager } from 'ui-framework-jps'

Use import statement for tree-shaking.

Quickstart

This quickstart shows how to initialize the framework, use state management, and render a simple React component.

import uiFramework from 'ui-framework-jps';
import { Component, StateManager } from 'ui-framework-jps';

// Initialize with API server URL
const app = uiFramework.init({
  API_SERVER_URL: process.env.API_SERVER_URL ?? 'http://localhost:3000',
  DEBUG: true,
});

// Create a simple component
const MyComponent = () => {
  const state = StateManager.useState('counter');
  return (
    <div>
      <p>Count: {state.value}</p>
      <button onClick={() => state.set(state.value + 1)}>Increment</button>
    </div>
  );
};

app.render('#root', MyComponent);