npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-monaco-tree

v18.2.0

Published

A tree view based on monaco-editor powered by VSCode.

Downloads

383

Readme

NgxMonacoTree

npm version Build Status License: MIT

This is a Tree view based on monaco-editor and vscode on Angular.

Changelog

Current

  • Update dependencies

18.1.0

  • Upgrade to Angular 18

17.5.0

  • Add default value (thank to matthieu-crouzet)

17.3.0

  • Bug fix publish directory (thank to DustdevDM)

17.1.0

  • Migrate to Angular 17
  • Add color to files
  • Add highlight on selected file or folder
  • Add buttons to create file or folder, and collapse all folders
  • Drag & Drop

15.2.0

  • Migrate from yarn to pnpm
  • Create a project with Angular 17 to test the compatibility
  • Passing to standalone components
  • CI/CD with Github Actions

15.1.1

  • Add demo on stackblitz in README

15.1.0

  • Fix theme in context menu

15.0.0

  • Upgrade to Angular 15

14.0.0

  • Upgrade to Angular 14

Features

  • Folder and file management
  • Dark or Light theme
  • Icon files based on Materiel Icon (vscode-material-icon-theme)
  • Auto Matching between file ou folder name and icon
  • Event on click with path (click to app.module.ts trigger an event with path information (src/app/app.module.tsfor example)

Demo

Stackblitz : ngx-monaco-tree-demo

Installation

Available on Angular ~~13, 14, 15,~~ 17, 18 or highter

Install it

npm i --save ngx-monaco-tree @vscode/codicons
yarn add ngx-monaco-tree @vscode/codicons
pnpm add ngx-monaco-tree @vscode/codicons

Edit your angular.json to add icons

...
assets: [
	...
	{
		"glob": "**/*",
		"input": "node_modules/ngx-monaco-tree/assets",
		"output": "/assets/"
	}
]
styles: [
	...
	"node_modules/@vscode/codicons/dist/codicon.css"
]
...

Import directly in your module or component

import {NgxMonacoTreeComponent} from "./ngx-monaco-tree.component";

@NgModule({
  ...
    imports: [
        ...
        NgxMonacoTreeComponent,
    ],
})

export class AppModule {
}

In your app.component.ts

tree: [
  {
    name: ".vscode",
    content: [{ name: "settings.json" }],
  },
  {
    name: "src",
    content: [
      {
        name: "app",
        content: [
          { name: "app.component.html" },
          { name: 'app.component.css', color: 'gray' },
          { name: 'app.component.spec.ts', color: 'yellow' },
          { name: 'app.component.ts', color: 'green' },
          { name: 'app.module.ts', color: 'red' },
        ],
      },
      {
        name: "assets",
        content: [{ name: ".gitkeep" }],
      },
      {
        name: "environments",
        content: [{ name: "environment.prod.ts" }, { name: "environment.ts" }],
      },
      {
        name: "favicon.ico",
      },
      {
        name: "index.html",
      },
      {
        name: "main.ts",
      },
      {
        name: "polyfill.ts",
      },
      {
        name: "styles.css",
      },
    ],
  },
  {
    name: "angular.json",
  },
  {
    name: "package-lock.json",
  },
  {
    name: "package.json",
  },
  {
    name: "tsconfig.json",
  },
];

In your html

<monaco-tree  [tree]="tree"></monaco-tree>

Arguments

List of arguments

| name | type | default | description | |--|--|--|--| | tree | MonacoTreeElement | [] | Tree view of your file system | | theme | vs-dark / vs-light | vs-dark | Theme light or dark | | height | string | 500px | Height of MonacoTree | | width | string | 300px | Width of MonacoTree | | currentFile | string | `` | Default file opened |

List of events

| name | arguments | description | |--|--|--| | clickFile | path: string | callback to invoke when file or folder is clicked | clickContextMenu | action: ContextMenuAction | callback to invoke when element in context menu is clicked | dragDropFile | action: DragAndDropEvent | callback to invoke when file or folder is dragged and dropped

Note :

type MonacoTreeElement = {
	name: string;
	content?: MonacoTreeElement[],
  color?: 'red'|'yellow'|'green'|'gray'|string
}

type ContextMenuAction = ['new_file'|'new_directory'|'delete_file'|'rename_file', string];

Credits

monaco-editor vscode vscode-material-icon-theme monaco-tree

Acknowledgments

  • matthieu-crouzet
  • DustdevDM

License

MIT