Options
All
  • Public
  • Public/Protected
  • All
Menu

jsonx

Index

References

Variables

Functions

References

default

Renames and re-exports getReactElementFromJSONX

renderFile

Renames and re-exports __express

Variables

Const _jsonxChildren

_jsonxChildren: __module = jsonxChildren

Const _jsonxComponents

_jsonxComponents: __module = jsonxComponents

Const _jsonxHelpers

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

Type declaration

  • luxon: __module
  • numeral: typeof numeral

Const _jsonxProps

_jsonxProps: __module = jsonxProps

Const _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(this: Context, 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

    • this: Context
    • 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

    getReactElement

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

    • Parameters

      • this: Context
      • 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(this: Context, 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

        • this: Context
        • 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

        getRenderedJSON

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

        • Parameters

          • this: Context
          • 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

          jsonxHTMLString

          • jsonxHTMLString(this: OutputHTMLContext, config?: OutputHTMLConfig): string

          • Parameters

            • this: OutputHTMLContext
            • config: OutputHTMLConfig = ...

            Returns string

          jsonxRender

          • jsonxRender(this: Context, 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

            • this: Context
            • config: RenderConfig = ...

              options used to inject html via ReactDOM.render

            Returns void

          outputHTML

          • outputHTML(this: OutputHTMLContext, 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

            • this: OutputHTMLContext
            • 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(this: Context, jsonx: jsonx, resources?: {}): string

            • converts JSONX JSON IR to JSX

              example

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

              hello
              '

              Parameters

              • this: Context
              • jsonx: jsonx
              • resources: {} = {}

                Returns string

                jsx string