🚀 Juris JSDoc TypeScript Definitions - jurisjs/juris GitHub Wiki

/**
 * @typedef {import('./types').JurisElementOptions} JurisElementOptions
 * @typedef {import('./types').JurisVDOMElement} JurisVDOMElement
 * @typedef {import('./types').JurisContext} JurisContext
 */

// At the top of your JS files
/// <reference path="./types/index.d.ts" />

// Or use JSDoc imports for AMAZING autocomplete!
/** @typedef {import('./types/index.d.ts').JurisInstance} JurisInstance */
/** @typedef {import('./types/index.d.ts').JurisComponentFunction} JurisComponentFunction */

/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement} 
 */
const MyComponent = (props, context) => {
  const { getState, setState } = context;
  
  return {
    div: {
      text: () => `Hello ${getState('user.name', 'World')}!`,
      onClick: () => setState('clicked', true)
    }
  };
};

/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement} 
 */
const TodoList = (props, context) => ({
  ul: {
    children: () => context.getState('todos', []).map(todo => ({
      li: { 
        text: todo.title,
        className: () => todo.completed ? 'completed' : ''
      }
    }))
  }
});

/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement} 
 */
const ContactForm = (props, context) => ({
  form: {
    onSubmit: (e) => {
      e.preventDefault();
      context.setState('form.submitted', true);
    },
    children: [
      {
        input: {
          type: 'text',
          placeholder: 'Your name',
          value: () => context.getState('form.name', ''),
          onInput: (e) => context.setState('form.name', e.target.value)
        }
      },
      {
        button: {
          type: 'submit',
          text: 'Submit'
        }
      }
    ]
  }
});

/**
 * Gets a value from the application state - REACTIVE MAGIC! ✨
 * 
 * @param {string} path - Dot-notation path (e.g., 'user.profile.name')
 * @param {any} [defaultValue] - Default value if path doesn't exist
 * @param {boolean} [track=true] - Whether to track for reactivity
 * @returns {any} The state value
 */
getState: (path, defaultValue, track) => any;

/**
 * Sets a value in the application state - INSTANT UPDATES! 🚀
 * 
 * @param {string} path - Dot-notation path where to set the value
 * @param {any} value - The value to set
 * @param {any} [context] - Additional context for debugging
 */
setState: (path, value, context) => void;

/**
 * Base properties for all elements - The foundation of AWESOME! 🏗️
 */
const elementProps = {
  id: 'string',
  className: 'string', 
  onClick: () => void, // Touch-optimized for mobile! 📱
  style: {} // or function returning object - REACTIVE STYLES! 💫
};

/**
 * Element that can contain text, children, or innerHTML - MAXIMUM FLEXIBILITY! 🤸
 */
const containerElement = {
  text: 'string', // or function returning string - LIVE UPDATES!
  children: [], // or function returning array - DYNAMIC LISTS!
  innerHTML: 'string' // or function returning string - RAW POWER!
};

/**
 * Input element with form control support - REACTIVE FORMS! ⚡
 */
const inputElement = {
  type: 'text', // 'email', 'password', 'number', 'checkbox', 'radio'
  value: 'string', // or function returning value - TWO-WAY BINDING!
  placeholder: 'string',
  onChange: (e) => void, // INSTANT FEEDBACK!
  onInput: (e) => void // REAL-TIME UPDATES!
};

/**
 * Button element - CLICK & ACTION! 🎯
 */
const buttonElement = {
  type: 'button', // 'submit', 'reset'
  disabled: false, // or function returning boolean - SMART CONTROLS!
  text: 'string', // or function returning string
  children: [] // or function returning array
};

/**
 * Context object provided to components - YOUR TOOLKIT! 🧰
 */
const context = {
  getState: (path, defaultValue, track) => any, // STATE ACCESS!
  setState: (path, value, context) => void, // STATE UPDATES!
  services: {}, // available services - DEPENDENCY INJECTION!
  element: HTMLElement, // DOM element if available
  
  /**
   * Creates component-local state - ISOLATED & CLEAN! 🧹
   * @param {string} key - Unique key for this state
   * @param {any} initialValue - Initial value
   * @returns {[Function, Function]} Getter and setter functions
   */
  newState: (key, initialValue) => [getter, setter] // LOCAL STATE MAGIC!
};

/**
 * Main Juris framework instance - THE BRAIN! 🧠
 */
const juris = {
  getState: (path, defaultValue, track) => any, // GLOBAL STATE!
  setState: (path, value, context) => void, // GLOBAL UPDATES!
  registerComponent: (name, component) => void, // COMPONENT REGISTRY!
  render: (container) => void, // RENDER TO DOM!
  enhance: (selector, definition, options) => unsubscribe // PROGRESSIVE ENHANCEMENT!
};