Juris (JavaScript Unified Reactive Interface Solution)

The CSS Extractor categorizes styles into three distinct layers to optimize performance:

1. Static Styles: Extracted to native CSS classes for fast rendering (e.g., padding, display).
2. Reactive Styles: Preserved as JavaScript functions that run when state changes (e.g., color: () => getState('theme.color')).
3. Interactive States: Converted into event handlers (e.g., $hover, $active).

When you provide a style object, the processor analyzes the properties, generates CSS for the static layer, modifies props to include the generated className and reactive styles, and sets up event handlers for interactive states.

// Input Example:
{
  style: {
    padding: '1rem',                      // Static
    color: () => getState('theme.color'), // Reactive
    $hover: { background: 'blue' }        // Interactive
  }
}

// Output Example:
{
  className: 'j-component-abc123',        // CSS class for static styles
  style: {
    color: () => getState('theme.color')  // Preserved reactive styles
  },
  onmouseenter: (e) => { ... },          // Generated event handler
  onmouseleave: (e) => { ... }
}

Headless components allow you to define logic and APIs that can be consumed by other components without providing a UI. You define them in the headlessComponents property of the Juris constructor. They can expose an api object for method calls and use hooks (like onRegister) for setup logic. These are accessed via ctx.<componentName> within other components.

const app = new Juris({
  headlessComponents: {
    geolocation: (props, ctx) => ({
      api: {
        getCurrentPosition() {
          navigator.geolocation.getCurrentPosition(
            pos => ctx.setState('geo.position', pos.coords)
          );
        }
      },
      hooks: {
        onRegister: () => console.log('Geolocation service ready')
      }
    })
  }
});

// Usage in a component
const LocationDisplay = (props, ctx) => ({
  button: {
    text: 'Get Location',
    onclick: () => ctx.geolocation.getCurrentPosition()
  }
});

Juris achieves Temporal Independence by Default through an object-first architecture and path-based reactivity.

Unlike traditional frameworks where a change to a single state variable can trigger a cascade of re-renders across an entire component tree, Juris allows you to define reactivity at the property level using functions that call context.getState(). This ensures that a component or sub-component only updates when the specific piece of state it is watching changes, eliminating unnecessary render waterfalls and the need for manual optimization patterns like React.memo.

// Juris: Temporal independence through path-based reactivity
const App = (props, context) => ({
  div: {
    children: [
      {
        UserProfile: {
          // Only updates when user data changes
          user: () => context.getState('user.profile')
        }
      },
      {
        PostsList: {
          // Only updates when posts change
          posts: () => context.getState('posts.items')
        }
      },
      {
        LoadingSpinner: {
          // Only updates when loading state changes
          loading: () => context.getState('ui.loading')
        }
      }
    ]
  }
});

The Object DOM is platform-agnostic and can be converted into various target formats (HTML, React, Vue, Native, etc.) using transformation engines. This allows a single component definition to be deployed across web, mobile, and desktop platforms.

Key transformation capabilities include:

• HTML: Converts the object structure into standard HTML strings.
• React: Converts the object into React.createElement calls, mapping properties like onclick to onClick and handling children via React.cloneElement.
• Vue: Generates Vue component objects containing templates, data, methods, and computed properties.
• Native (Mobile): Maps web elements (like div, span, button) to native components (like View, Text, TouchableOpacity for React Native; or Container, Text, ElevatedButton for Flutter/SwiftUI).

// Example of a universal component definition
const universalCard = {
  div: {
    className: 'card',
    style: {
      padding: '20px',
      borderRadius: '8px'
    },
    children: [
      {
        h3: {
          className: 'card-title',
          text: () => getTitle()
        }
      },
      {
        button: {
          className: 'card-action',
          text: 'Action',
          onclick: () => handleAction()
        }
      }
    ]
  }
};

// Deploying to different platforms
const webOutput = juris.render(universalCard);
const reactOutput = objectToReact(universalCard);
const vueOutput = objectToVue(universalCard);
const mobileOutput = objectToReactNative(universalCard);

Juris uses a headless component pattern to decouple business logic from UI implementation. This allows you to define pure logic components that manage state and provide an API, which can then be consumed by multiple different UI implementations (e.g., Mobile vs. Desktop).

To create a headless component:

1. Define a function that returns an object containing an api (methods to manipulate state) and optionally hooks (lifecycle methods).
2. Use context.getState(path) to retrieve state and context.setState(path, value) to update it.
3. Register the component using juris.registerHeadlessComponent(name, component, options).
4. Access the logic in your UI components via context.ComponentName.

// 1. Define pure logic
const TodoLogic = (props, context) => ({
  api: {
    addTodo: (text) => {
      const todos = context.getState('todos', []);
      const newTodo = { id: Date.now(), text, completed: false };
      context.setState('todos', [...todos, newTodo]);
    },
    // ... other methods
  }
});

// 2. Register it
juris.registerHeadlessComponent('TodoLogic', TodoLogic, { autoInit: true });

// 3. Use in UI
const MobileUI = (props, context) => ({
  div: {
    children: () => {
      const todos = context.getState('todos', []);
      const todoAPI = context.TodoLogic; // Access the registered API
      return [
        { MobileInput: { onSubmit: todoAPI.addTodo } },
        { MobileList: { todos } }
      ];
    }
  }
});