Options
All
  • Public
  • Public/Protected
  • All
Menu

jsonx

Index

References

default

Renames and re-exports getReactElementFromJSONX

renderFile

Renames and re-exports __express

Variables

_jsonxChildren

_jsonxChildren: __module = jsonxChildren

_jsonxComponents

_jsonxComponents: __module = jsonxComponents

_jsonxHelpers

_jsonxHelpers: { luxon: __module; numeral: typeof numeral } = ...

Type declaration

  • luxon: __module
  • numeral: typeof numeral

_jsonxProps

_jsonxProps: __module = jsonxProps

_jsonxUtils

_jsonxUtils: __module = jsonxUtils

renderIndex

renderIndex: number = 0

Functions

__express

  • __express(filePath?: string, options?: any, callback?: any): undefined | string
  • Use JSONX for express view rendering

    files ending with anything other than '.json' or '.jsonx' are processed as javascript files. Express templates support template views on the __template property.

    Parameters

    • Optional filePath: string

      path to jsonx express view

    • Optional options: any

      property used for express view {locals}

    • Optional callback: any

    Returns undefined | string

__getReact

  • __getReact(): typeof React
  • Exposes react module used in JSONX

    Returns typeof React

    React

__getReactDOM

  • __getReactDOM(): __module
  • Exposes react dom module used in JSONX

    Returns __module

    ReactDOM

compile

  • compile(jsonx: jsonx, resources: {}): (props: any) => ReactElementLike
  • converts a jsonx json object into a react function component

    example

    jsonx.compile({jsonx:{component:'div',props:{title:'some title attribute'},children:'inner html text'}}) //=>React Function Component

    Parameters

    • jsonx: jsonx

      valid JSONX JSON

    • resources: {}

      props for react element

      Returns (props: any) => ReactElementLike

      React element via React.createElement

        • (props: any): ReactElementLike
        • Parameters

          • props: any

          Returns ReactElementLike

    Const getReactElement

    • getReactElement(jsonx?: jsonx | simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined
    • Parameters

      • Optional jsonx: jsonx | simpleJsonx
      • resources: {}

        Returns ReactElementLike | JSONReactElement | null | string | undefined

      getReactElementFromJSON

      • getReactElementFromJSON(__namedParameters: JSONReactElement): ReactElementLike
      • converts a json object {type,props,children} into a react element

        example

        jsonx.getReactElementFromJSON({type:'div',props:{title:'some title attribute'},children:'inner html text'})

        Parameters

        • __namedParameters: JSONReactElement

        Returns ReactElementLike

        React element via React.createElement

      getReactElementFromJSONX

      • getReactElementFromJSONX(jsonx?: jsonx | simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined
      • Use React.createElement and JSONX JSON to create React elements

        example

        // Uses react to create the equivalent JSX hello world jsonx.getReactElementFromJSONX({component:'myCompnent',props:{style:{color:'blue'}},children:'hello world'})

        property

        {object} this - options for getReactElementFromJSONX

        property

        {Object} [this.componentLibraries] - react components to render with JSONX

        property

        {boolean} [this.debug=false] - use debug messages

        property

        {boolean} [this.returnJSON=false] - return json object of {type,props,children} instead of react element

        property

        {boolean} [this.disableRenderIndexKey=false] - disables auto assign a key prop

        property

        {function} [this.logError=console.error] - error logging function

        property

        {string[]} [this.boundedComponents=[]] - list of components that require a bound this context (usefult for redux router)

        Parameters

        • Optional jsonx: jsonx | simpleJsonx

          any valid JSONX JSON object

        • resources: {}

          any additional resource used for asynchronous properties

          Returns ReactElementLike | JSONReactElement | null | string | undefined

          React element via React.createElement

        Const getRenderedJSON

        • getRenderedJSON(jsonx?: jsonx | simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined
        • Parameters

          • Optional jsonx: jsonx | simpleJsonx
          • resources: {}

            Returns ReactElementLike | JSONReactElement | null | string | undefined

          jsonToJSX

          • jsonToJSX(json: JSONReactElement): string
          • converts JSONX JSON IR to JSX

            example

            jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '

            hello
            '

            Parameters

            • json: JSONReactElement

              {type,props,children}

            Returns string

            jsx string

          Const jsonxHTMLString

          • jsonxHTMLString(config: OutputHTMLConfig): string
          • Parameters

            • config: OutputHTMLConfig

            Returns string

          jsonxRender

          • jsonxRender(config: RenderConfig): void
          • Use JSONX without any configuration to render JSONX JSON to HTML and insert JSONX into querySelector using ReactDOM.render

            example

            // Uses react to create

            hello world

            jsonx.jsonxRender({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });

            property

            {object} this - options for getReactElementFromJSONX

            Parameters

            • config: RenderConfig

              options used to inject html via ReactDOM.render

            Returns void

          outputHTML

          • outputHTML(config: OutputHTMLConfig): string
          • Use ReactDOMServer.renderToString to render html from JSONX

            example

            // Uses react to create

            hello world

            jsonx.outputHTML({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, });

            property

            {object} this - options for getReactElementFromJSONX

            Parameters

            • config: OutputHTMLConfig

              options used to inject html via ReactDOM.render

            Returns string

            React genereated html via JSONX JSON

          outputJSON

          • outputJSON(jsonx: jsonx, resources?: {}): JSONReactElement
          • Compiles JSONX into JSON IR format for react create element

            example

            jsonx.outputJSON({ component: 'div', props: { title: 'test', }, children: 'hello', }); //=> { type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }

            property

            {object} this - options for getReactElementFromJSONX

            Parameters

            • jsonx: jsonx

              any valid JSONX JSON object

            • resources: {} = {}

              any additional resource used for asynchronous properties

              Returns JSONReactElement

              json - {type,props,children}

            outputJSX

            • outputJSX(jsonx: jsonx, resources: {}): string
            • converts JSONX JSON IR to JSX

              example

              jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '

              hello
              '

              Parameters

              • jsonx: jsonx
              • resources: {}

                Returns string

                jsx string