Rootz JS Snippets

This extension provides you Rootz JS snippets for VS Code.

Installation

Visual Studio Marketplace

Launch Quick Open:

• Linux: Ctrl+P
• macOS: ⌘P
• Windows: Ctrl+P

Paste the following command and press Enter:

ext install rootzjs-snippets

GitHub Repository Clone

Change to your .vscode/extensions VS Code extensions directory. Depending on your platform it is located in the following folders:

• Linux: ~/.vscode/extensions
• macOS: ~/.vscode/extensions
• Windows: %USERPROFILE%\.vscode\extensions

Clone the Material Theme repository as rootz-js-snippets:

git clone https://github.com/rootzjs/rootzjs-snippets.git rootzjs-snippets

Search command

You can search through snippets with ES7 snippet search command which can be run with CMD + Shift + P or just use CMD + Shift + R (CTRL + ALT + R for Windows & Linux) keybinding.

Here is direct link to marketplace ES7 React/Redux/React-Native/JS Snippets

Supported languages (file extensions)

• JavaScript (.js)
• JavaScript React (.jsx)

Basic Methods

Template Body

Template body definition of all snippets mentioned above.

rootzcomponent

import React from "react";

/**
 * Rootz Component definition
 * @param {Object} NodeProps
 * @param {Object<string, any>} NodeProps.props
 * @param {Object<string, any>} NodeProps.state
 * @param {Object<string, any>} NodeProps.profile
 * @param {Object<string, Function>} NodeProps.actions
 * @link https://rootzjs.org/#/nodeprops#properties
 */
export default (NodeProps) => {
    const { props, state, } = NodeProps;
    
    return (
        YOUR_JSX_GOES_HERE
    )
} 

rootznode

import { createNode } from "@rootzjs/core";
import Component from "module";

/**
 * @type {([Object<string, function>, (arg0: nodeDef) => React.PureComponent])}
 * @link https://rootzjs.org/#/node
 */
const [node, dispatchNode] = createNode("NODE_ID", Component)

/**
 * Initial state of component
 */
node.state({  });


export default dispatchNode(node); 

rootznodecomponent

import React from "react";
import { createNode } from "@rootzjs/core";

/**
 * @type {([Object<string, function>, (arg0: nodeDef) => React.PureComponent])}
 * @link https://rootzjs.org/#/node
 */
const [node, dispatchNode] = createNode("NODE_ID",
    
    /**
     * Rootz Node-Component definition
     * @param {Object} NodeProps
     * @param {Object<string, any>} NodeProps.props
     * @param {Object<string, any>} NodeProps.state
     * @param {Object<string, any>} NodeProps.profile
     * @param {Object<string, Function>} NodeProps.actions
     * @link https://rootzjs.org/#/nodeprops#properties
     */
    ({ props, state, }) => {
        return (
            YOUR_JSX_GOES_HERE
        );
    }
);

/**
 * Initial state of component
 */
node.state({  });


export default dispatchNode(node); 

rootzaction

/**
 * Action Definition
 * @param {string} ACTION_ID
 * @param {Object<string, any>}
 * @link https://rootzjs.org/#/actions
 */
node.useAction("ACTION_ID", {
    NewState
});

rootzactioncallback

/**
 * Action Definition with Update Logic
 * @param {string} ACTION_ID
 * @param {(state: Object<string, any>, args: Array.<any>) => Object<string, any>} callback
 * @link https://rootzjs.org/#/actions#actions-with-update-logic
 */
node.useAction("ACTION_ID", (state, args) => {
    const [ Arguments ] = args;

    return { NewState };
});

rootzcontract

/**
 * Contract Definition
 * @param {String} NODE_ID
 * @param {String} ACTION_ID
 * @param {Object<string, any>}
 */
node.useContract("NODE_ID", "ACTION_ID", {
    NewState
});

rootzcontractcallback

/**
 * Contract Definition with Update Logic
 * @param {String} NODE_ID
 * @param {String} ACTION_ID
 * @param {(state: Object<string, any>, args: Array.<any>) => Object<string, any>} callback
 */
node.useContract("NODE_ID", "ACTION_ID", (state, args) => {
    const [ Arguments ] = args;

    return { NewState };
});