Non-Potable Macchiato

    jumper_react

    0.1.13 • Public • Published

    Jumper package · Github license · npm version

    Description

    Last Version: 0.1.13
    Modules:

    1. jumper_react (Base module)
      • Console
      • Memory (Browser Storage)
      • Browser
    2. jumper_react/appState (Module for application state managment)
    3. jumper_react/appStateExtended (Module for application state managment - extended with developers tools only recommend during development)
    4. jumper_react/components (Components tools)
      • parseHTMLComponent
      • parseHTMLReactComponent
      • HTMLReactParser (OOP of parseHTMLReactComponent, comming soon)
      • Widget
    5. jumper_react/cryptography (Crypto algorythms module)
      • basicHashString
      • cyrb53
      • md5
    6. jumper_react/dataProcessing (Data tools module)
    7. jumper_react/languageDescriptor (Language translation module)
    8. jumper_react/models (Models module)
    9. jumper_react/service (Services and network tools module) *
    10. jumper_react/performance (Performance tools module)
    11. jumper_react/strUtils (String utilities module)
      • format
    12. jumper_react/langUtils (Javascript language utilities module)
    13. jumper_react/experimental (Experimental module)

    Jumper.react Logo

    Important classes

    ActionsStack

    1. component : React.Component - target Component to initialize
    2. inArr : Array<ActionOperation | ...> - operations namespaces
    3. options={stackSize:20, debug:false, loadResumeable:true} : any - options to configure

    in component file:

    import React, { Component } from 'react';
    import { ActionsStack } from 'jumper_react/appState';
    
    export default class SampleComponent extends Component {
        constructor(props) {
            super(props);
            let self = this;
            this.state = {
                currentMenu:""
            }
            this.actions = new ActionsStack(this, [
                SampleAction1,
                SampleAction2
            ], { loadResumeable:false });
            let lastData = this.actions.restoreComponentProp("exampleData");
            this.actions.addEventListener("beforeunload", function() {
                this.saveComponentProp("exampleData");
            });
        }
    
        componentDidMount() {
            this.actions.restoreStacksSessions();
        }
    
        render() {
            return (<>
                <h1>Sample...</h1>
            </>);
        }
    }

    in operations/actions file:

    import { ActionOperation, ActionResumeOperation, TemponaryActionOperation } from 'jumper_react/appState';
    
    export class SampleTemponaryAction1 extends TemponaryActionOperation {
    
    }
    
    export class SampleAction1 extends ActionOperation {
        onStore(component, inputData) {
            component.currDocument.dimensionX += inputData.count;
            return {  };
        }
    }
    
    export class SampleAction2 extends ActionOperation {
        onStore(component, inputData) {
            component.currDocument.dimensionY += inputData.count;
            return {  };
        }
    }

    Important functions

    parseHTMLReactComponent

    1. htmlStr: string - input with sample HTML code to parse
    2. allowedTags: Array = [] - Array of allowed or dissalowed tags (string tag name) to parse
    3. allowed: boolean - if true all tag names given in argument 2 will be parsed, otherwise ignored. https://codesandbox.io/s/jumper-module-react-simple-parser-3b8c9
    import React from "react";
    import "./styles.css";
    import { parseHTMLReactComponent } from "jumper_react/components";
    
    export default function App() {
      return parseHTMLReactComponent(
        '<h1><i>Hello world!</i></h1> Really? <span  id="me" style="color:green; background-color:#eee; -webkit-transform:translate(-100px,200px)">Yolo</span> <div><h2>I love react!</h2></div> <input type="text"/>',
        ["h1"],
        false
      );
    }

    parseHTMLComponent

    1. htmlStr: string - input with sample HTML code to parse
    2. allowedTags: Array = [] - Array of allowed or dissalowed tags (string tag name) to parse
    3. allowed: boolean - if true all tag names given in argument 2 will be parsed, otherwise ignored.
    import { parseHTMLComponent } from "jumper_react/components";
    let container = document.createElement("div"), childs = parseHTMLComponent(
        '<h1><i>Hello world!</i></h1> Really? <span  id="me" style="color:green; background-color:#eee; -webkit-transform:translate(-100px,200px)">Yolo</span> <div><h2>I love react!</h2></div> <input type="text"/>',
        ["h1"],
        false
      );
     for(let el of childs) container.appendChild(el);
     console.log(container);
     document.body.innerHTML = "";
     document.body.appendChild(container);

    format

    1. targetStr: string - input with sample text to parse
    2. initialObj: any - can be an Array or Object.prototype. Contains a elements to replace.

    Types:

    • %s - String
    • %f - float
    • %a - any
    • %ad - auto detect
    • %d - decimal
    • %n - science notation
    • %oct - octal number
    • %hex - hex number
    • %bin - binary number
    • %f{number} - floating with rounding (experimental)
    • %b - boolean
    • %bt - boolean translated (experimental)
    console.log(format("Hello %s exacly! Wow, we make it %d times!", ["World", 14]));
    console.log(format("Thats really simple with %s[labelsWord], you can use it in any %s[situationWord]!", {labelsWord:"labels", situationWord:"situation"}));

    Keywords

    Install

    npm i jumper_react

    DownloadsWeekly Downloads

    3

    Version

    0.1.13

    License

    MIT

    Unpacked Size

    151 kB

    Total Files

    17

    Last publish

    Collaborators

    • grano22