foo
'); 20 | * 21 | * @returns {string} - The stripped HTML 22 | */ 23 | export const stripHtmlTags = (html: string): string => { 24 | return html.replace(/<[^>]*>/g, ''); 25 | }; 26 | 27 | /** 28 | * Escapes a string for use in HTML. 29 | * @param {string} str - The string to escape 30 | * @example 31 | * escapeHtml('foo
'); 32 | * 33 | * @returns {string} - The escaped string 34 | */ 35 | export const escapeHtml = (str: string): string => { 36 | return str.replace(//g, '>'); 37 | }; 38 | 39 | /** 40 | * Escapes a string for use in JavaScript. 41 | * @param {string} str - The string to escape 42 | * @example 43 | * escapeJs('foo "bar"'); 44 | * 45 | * @returns {string} - The escaped string 46 | */ 47 | export const escapeJs = (str: string): string => { 48 | return str.replace(/'/g, "\\'").replace(/"/g, '\\"'); 49 | }; 50 | 51 | /** 52 | * Escapes a string for use in a URL. 53 | * 54 | * @param {string} str - The string to escape 55 | * @example 56 | * escapeUrl('foo bar'); 57 | * 58 | * @returns {string} - The escaped string 59 | */ 60 | export const escapeUrl = (str: string): string => { 61 | return encodeURIComponent(str); 62 | }; 63 | 64 | /** 65 | * Escapes a string for use in a regular expression. 66 | * 67 | * @param {string} str - The string to escape 68 | * @example 69 | * escapeRegExp('foo.bar'); 70 | * 71 | * @returns {string} - The escaped string 72 | */ 73 | export const escapeRegExp = (str: string): string => { 74 | return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 75 | }; 76 | 77 | /** 78 | * Returns a random nonce. 79 | * 80 | * @example 81 | * const nonce = getNonce(); 82 | * 83 | * @returns {string} - The nonce 84 | */ 85 | export const getNonce = () => { 86 | let text = ''; 87 | const possible = 88 | 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 89 | for (let i = 0; i < 32; i++) { 90 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 91 | } 92 | return text; 93 | }; 94 | -------------------------------------------------------------------------------- /src/app/helpers/tree.helper.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from '../interfaces'; 2 | 3 | export const generateTree = ( 4 | json: object, 5 | showValues: boolean = true, 6 | ): Tree => { 7 | const tree: Tree = {}; 8 | let currentId = 1; 9 | 10 | // Initialize the queue with the root node 11 | const queue: { id: number; name: string; data: unknown }[] = [ 12 | { id: currentId, name: 'root', data: json }, 13 | ]; 14 | 15 | // Process each item in the queue 16 | while (queue.length > 0) { 17 | const { id, name, data } = queue.shift()!; 18 | 19 | // Create the current node and add it to the tree 20 | tree[id] = { id: id.toString(), name }; 21 | 22 | // Determine if the node has children 23 | if (typeof data === 'object' && data !== null) { 24 | const children: number[] = []; 25 | 26 | // Add each property or array item to the queue 27 | for (const [key, value] of Object.entries(data)) { 28 | currentId += 1; 29 | children.push(currentId); 30 | 31 | // Add to the queue with an incremented ID 32 | queue.push({ id: currentId, name: key, data: value }); 33 | } 34 | 35 | tree[id].children = children; 36 | } else if (showValues) { 37 | // If it's a primitive value and showValues is true, add it as a leaf node 38 | currentId += 1; 39 | tree[currentId] = { id: currentId.toString(), name: data.toString() }; 40 | tree[id].children = [currentId]; 41 | } 42 | } 43 | 44 | return tree; 45 | }; 46 | -------------------------------------------------------------------------------- /src/app/interfaces/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tree.interface'; 2 | -------------------------------------------------------------------------------- /src/app/interfaces/tree.interface.ts: -------------------------------------------------------------------------------- 1 | export interface TreeNode { 2 | id: string; 3 | name: string; 4 | children?: number[]; 5 | } 6 | 7 | export interface Tree { 8 | [key: number]: TreeNode; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/models/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManuelGil/vscode-json-flow/d6515cd6b0259e893793e999deafcef49df6082f/src/app/models/.gitkeep -------------------------------------------------------------------------------- /src/app/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './node.model'; 2 | -------------------------------------------------------------------------------- /src/app/models/node.model.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Command, 3 | ThemeIcon, 4 | TreeItem, 5 | TreeItemCollapsibleState, 6 | TreeItemLabel, 7 | Uri, 8 | } from 'vscode'; 9 | 10 | /** 11 | * The Node class 12 | * 13 | * @class 14 | * @classdesc The class that represents a node in the tree view. 15 | * @export 16 | * @public 17 | * @extends {TreeItem} 18 | * @property {string | TreeItemLabel} label - The label 19 | * @property {string | Uri | { light: Uri; dark: Uri } | ThemeIcon} [iconPath] - The icon path 20 | * @property {Command} [command] - The command 21 | * @property {Uri} [resourceUri] - The resource URI 22 | * @property {string} [contextValue] - The context value 23 | * @property {Node[]} [children] - The children 24 | * @example 25 | * const node = new Node('About Us', TreeItemCollapsibleState.None, 'about', { 26 | * title: 'About Us', 27 | * command: 'extension-stater-kit.aboutUs', 28 | * }); 29 | * 30 | * @see https://code.visualstudio.com/api/references/vscode-api#TreeItem 31 | */ 32 | export class NodeModel extends TreeItem { 33 | // ----------------------------------------------------------------- 34 | // Properties 35 | // ----------------------------------------------------------------- 36 | 37 | // Public properties 38 | /** 39 | * The children. 40 | * @type {NodeModel[]} 41 | * @public 42 | * @memberof NodeModel 43 | * @example 44 | * node.children = []; 45 | */ 46 | children?: NodeModel[]; 47 | 48 | // ----------------------------------------------------------------- 49 | // Constructor 50 | // ----------------------------------------------------------------- 51 | 52 | /** 53 | * The constructor 54 | * 55 | * @constructor 56 | * @param {string | TreeItemLabel} label - The label 57 | * @param {string | Uri | { light: Uri; dark: Uri } | ThemeIcon} [iconPath] - The icon path 58 | * @param {Command} [command] - The command 59 | * @param {Uri} [resourceUri] - The resource URI 60 | * @param {string} [contextValue] - The context value 61 | * @param {NodeModel[]} [children] - The children 62 | * @example 63 | * const node = new Node('About Us', new ThemeIcon('info'), { 64 | * title: 'About Us', 65 | * command: 'extension-stater-kit.aboutUs', 66 | * }); 67 | */ 68 | constructor( 69 | readonly label: string | TreeItemLabel, 70 | readonly iconPath?: string | Uri | { light: Uri; dark: Uri } | ThemeIcon, 71 | readonly command?: Command, 72 | readonly resourceUri?: Uri, 73 | readonly contextValue?: string, 74 | children?: NodeModel[], 75 | ) { 76 | super( 77 | label, 78 | children 79 | ? TreeItemCollapsibleState.Expanded 80 | : TreeItemCollapsibleState.None, 81 | ); 82 | this.iconPath = iconPath; 83 | this.resourceUri = resourceUri; 84 | this.command = command; 85 | this.contextValue = contextValue; 86 | this.children = children; 87 | } 88 | 89 | // ----------------------------------------------------------------- 90 | // Methods 91 | // ----------------------------------------------------------------- 92 | 93 | // Public methods 94 | /** 95 | * The setChildren method 96 | * 97 | * @function setChildren 98 | * @param {NodeModel[]} children - The children 99 | * @public 100 | * @memberof NodeModel 101 | * @example 102 | * node.setChildren([]); 103 | * 104 | * @returns {void} The result 105 | */ 106 | setChildren(children: NodeModel[]): void { 107 | this.collapsibleState = TreeItemCollapsibleState.Expanded; 108 | this.children = children; 109 | } 110 | 111 | /** 112 | * The hasChildren method 113 | * 114 | * @function hasChildren 115 | * @public 116 | * @memberof NodeModel 117 | * @example 118 | * const hasChildren = node.hasChildren(); 119 | * 120 | * @returns {boolean} The result 121 | */ 122 | hasChildren(): boolean { 123 | return !!(this.children && this.children.length); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/app/providers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManuelGil/vscode-json-flow/d6515cd6b0259e893793e999deafcef49df6082f/src/app/providers/.gitkeep -------------------------------------------------------------------------------- /src/app/providers/feedback.provider.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Event, 3 | EventEmitter, 4 | l10n, 5 | ProviderResult, 6 | ThemeIcon, 7 | TreeDataProvider, 8 | TreeItem, 9 | } from 'vscode'; 10 | 11 | import { EXTENSION_ID } from '../configs'; 12 | import { FeedbackController } from '../controllers'; 13 | import { NodeModel } from '../models'; 14 | 15 | /** 16 | * The FeedbackProvider class 17 | * 18 | * @class 19 | * @classdesc The class that represents the feedback provider. 20 | * @export 21 | * @public 22 | * @implements {TreeDataProvider