Code Monkey home page Code Monkey logo

monaco-yaml's Introduction

Monaco YAML

ci workflow npm version npm downloads demo netlify status

YAML language plugin for the Monaco Editor. It provides the following features when editing YAML files:

  • Code completion, based on JSON schemas or by looking at similar objects in the same file
  • Hovers, based on JSON schemas
  • Validation: Syntax errors and schema validation
  • Formatting using Prettier
  • Document Symbols
  • Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)
  • Links from JSON references.
  • Links and hover effects from YAML anchors.
  • Code folding.

Schemas can also be provided by configuration. See here for the API that the plugin offers to configure the YAML language support.

Table of Contents

Installation

npm install monaco-yaml

Usage

Before implementing monaco-yaml, or even Monaco editor, it’s recommended to learn the basic concepts of Monaco editor.

To configure monaco-yaml, call configureMonacoYaml.

import * as monaco from 'monaco-editor'
import { configureMonacoYaml } from 'monaco-yaml'

configureMonacoYaml(monaco, {
  enableSchemaRequest: true,
  schemas: [
    {
      // If YAML file is opened matching this glob
      fileMatch: ['**/.prettierrc.*'],
      // Then this schema will be downloaded from the internet and used.
      uri: 'https://json.schemastore.org/prettierrc.json'
    },
    {
      // If YAML file is opened matching this glob
      fileMatch: ['**/person.yaml'],
      // The following schema will be applied
      schema: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
            description: 'The person’s display name'
          },
          age: {
            type: 'integer',
            description: 'How old is the person in years?'
          },
          occupation: {
            enum: ['Delivery person', 'Software engineer', 'Astronaut']
          }
        }
      },
      // And the URI will be linked to as the source.
      uri: 'https://github.com/remcohaszing/monaco-yaml#usage'
    }
  ]
})

const prettierc = monaco.editor.createModel(
  'singleQuote: true\nproseWrap: always\nsemi: yes\n',
  undefined,
  monaco.Uri.parse('file:///.prettierrc.yaml')
)

monaco.editor.createModel(
  'name: John Doe\nage: 42\noccupation: Pirate\n',
  undefined,
  monaco.Uri.parse('file:///person.yaml')
)

monaco.editor.create(document.getElementById('editor'), {
  automaticLayout: true,
  model: prettierc
})

Also make sure to register the web worker. When using Webpack 5, this looks like the code below. Other bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be omitted.

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    switch (label) {
      case 'editorWorkerService':
        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
      case 'css':
      case 'less':
      case 'scss':
        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url))
      case 'handlebars':
      case 'html':
      case 'razor':
        return new Worker(
          new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url)
        )
      case 'json':
        return new Worker(
          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)
        )
      case 'javascript':
      case 'typescript':
        return new Worker(
          new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url)
        )
      case 'yaml':
        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url))
      default:
        throw new Error(`Unknown label ${label}`)
    }
  }
}

Examples

A demo is available on monaco-yaml.js.org.

Some usage examples can be found in the examples directory.

API

monaco-yaml has the following exports:

configureMonacoYaml(monaco, options?)

Configure monaco-yaml.

Note: There may only be one configured instance of monaco-yaml at a time.

Arguments

  • monaco (object): The Monaco editor module. Typically you get this by importing monaco-editor. Third party integrations often expose it as the global monaco variable instead.
  • options (object): Options to configure monaco-yaml.

Options

  • completion (boolean): If set, enable schema based autocompletion. (Default: true)
  • customTags (string[]): A list of custom tags. (Default: [])
  • enableSchemaRequest (boolean): If set, the schema service will load schema content on-demand. (Default: false)
  • format (boolean): Prettier from the bundle. (Default: true)
  • hover (boolean): If set, enable hover typs based the JSON schema. (Default: true)
  • isKubernetes (boolean): If true, a different diffing algorithm is used to generate error messages. (Default: false)
  • schemas (object[]): A list of known schemas and/or associations of schemas to file names. (Default: [])
  • validate (boolean): based validation. (Default: true)
  • yamlVersion ('1.1' | '1.2'): The YAML version to use for parsing. (Default: 1,2)

Returns

An object that can be used to dispose or update monaco-yaml.

FAQ

Does this work with the Monaco UMD bundle?

Yes, starting from version 5.0.0

Does this work with Monaco Editor from a CDN?

Yes, starting from version 5.0.0

Does this work with @monaco-editor/loader or @monaco-editor/react?

Yes, starting from version 5.0.0

Is the web worker necessary?

Yes. The web worker provides the core functionality of monaco-yaml.

Does it work without a bundler?

No. monaco-yaml uses dependencies from node_modules, so they can be deduped and your bundle size is decreased. This comes at the cost of not being able to use it without a bundler.

How do I integrate monaco-yaml with a framework? (Angular, React, Vue, etc.)

monaco-yaml only uses the Monaco Editor. It’s not tied to a framework, all that’s needed is a DOM node to attach the Monaco Editor to. See the Monaco Editor examples for examples on how to integrate Monaco Editor in your project, then configure monaco-yaml as described above.

Does monaco-yaml work with create-react-app?

Yes, but you’ll have to eject. See #92 (comment) for details.

Why doesn’t it work with Vite?

Some users have experienced the following error when using Vite:

Uncaught (in promise) Error: Unexpected usage
  at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js)
  at webWorker.js

As a workaround, create a file named yaml.worker.js in your own project with the following contents:

import 'monaco-yaml/yaml.worker.js'

Then in your Monaco environment getWorker function, reference this file instead of referencing monaco-yaml/yaml.worker.js directly:

import YamlWorker from './yaml.worker.js?worker'

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    switch (label) {
      // Handle other cases
      case 'yaml':
        return new YamlWorker()
      default:
        throw new Error(`Unknown label ${label}`)
    }
  }
}

Why isn’t monaco-yaml working? Official Monaco language extensions do work.

This is most likely due to the fact that monaco-yaml is using a different instance of the monaco-editor package than you are. This is something you’ll want to avoid regardless of monaco-editor, because it means your bundle is significantly larger than it needs to be. This is likely caused by one of the following issues:

  • A code splitting misconfiguration

    To solve this, try inspecting your bundle using for example webpack-bundle-analyzer. If monaco-editor is in there twice, this is the issue. It’s up to you to solve this, as it’s project-specific.

  • You’re using a package which imports monaco-editor for you, but it’s using a different version.

    You can find out why the monaco-editor is installed using npm ls monaco-editor or yarn why monaco-editor. It should exist only once, but it’s ok if it’s deduped.

    You may be able to solve this by deleting your node_modules folder and package-lock.json or yarn.lock, then running npm install or yarn install respectively.

Using Monaco webpack loader plugin

If you’re using monaco webpack plugin, then instead of the above code, you can extend the plugin’s configuration. Extend your webpack.config.js file with the following:

import { MonacoWebpackPlugin } from 'monaco-editor-webpack-plugin'

export default {
  // ...the rest of your webpack configuration...
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['yaml'],
      customLanguages: [
        {
          label: 'yaml',
          entry: 'monaco-yaml',
          worker: {
            id: 'monaco-yaml/yamlWorker',
            entry: 'monaco-yaml/yaml.worker'
          }
        }
      ]
    })
  ]
}

You can also refer to the example of a complete project.

Why does it try to download my schema even when I provided one as an object?

You may have provided a schema configured like this:

{
  uri: "http://example.com",
  fileMatch: ["file_name.yml"],
  schema: {
    $schema: "http://json-schema.org/draft-07/schema#",
    $id: "http://example.com",
    title: "placeholder title",
    description: "placeholder description",
    type: "object",
    properties: {
      name: {
        description: "name property description",
        type: "string",
      },
    },
    required: ["name"],
  },
}

And would be surprised to see the error:

Unable to load schema from '<http://example.com>': Failed to fetch.

It happens because plugin uses schema URI not only as the URL to download the schema from, but also to determine the schema name. To fix this, change the uri parameter to http://example.com/schema-name.json.

Contributing

Please see our contributing guidelines

Credits

Originally @kpdecker forked this repository from monaco-json by @microsoft and rewrote it to work with yaml-language-server instead. Later the repository maintenance was taken over by @pengx17. Eventually the repository was tranferred to the account of @remcohaszing, who is currently maintaining this repository with the help of @fleon and @yazaabed.

The heavy processing is done in yaml-language-server, best known for being the backbone for vscode-yaml. This repository provides a thin layer to add functionality provided by yaml-language-server into monaco-editor.

License

MIT

monaco-yaml's People

Contributors

abemedia avatar aeschli avatar alexdima avatar banderror avatar chrisburr avatar danbulant avatar fleon avatar golergka avatar haines avatar jounqin avatar jrieken avatar kpdecker avatar kristenmills avatar lujjjh avatar medihack avatar msftgits avatar nivl avatar patrickshipe avatar pengx17 avatar rebornix avatar remcohaszing avatar symind avatar yazaabed avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

monaco-yaml's Issues

Schema not working

I enabled quickSuggestions for the editor, and in the console the yaml schemas array has my schema object , but the schema is not working. I'm using this tool to generate the schema https://www.jsonschema.net/ from my original json file to test it, and I also tried using a js object schema, neither works. fileMatch and the uri has the name of my content uri. Do you know if I need to configure something else to get it to work?

Looking for maintainers

Due to personal issues, I will not have time to continue maintaining this repo or npm package any longer. Leave comments if you are interested for being a maintainer.

First call to createDiagnosticsAdapter and YamlDocuments.ensureCache throws null reference error

A quick debugging shows that only the first call to these functions throws error; they are both tied to a null inmemory model with uri inmemory://model/1. However at this point the document is already loaded.

> monaco.contribution.js:58 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getModeId')
    at doValidate (monaco.contribution.js:58)
doValidate @ monaco.contribution.js:58
async function (async)
doValidate @ monaco.contribution.js:54
onModelAdd @ monaco.contribution.js:72
fire @ event.js:424
createModel @ modelServiceImpl.js:324
doCreateModel @ standaloneCodeEditor.js:323
createTextModel @ standaloneCodeEditor.js:317
StandaloneEditor @ standaloneCodeEditor.js:180
(anonymous) @ standaloneEditor.js:62
withAllStandaloneServices @ standaloneEditor.js:49
create @ standaloneEditor.js:61
...

> TypeError: Cannot read properties of null (reading 'uri')
    at YamlDocuments.ensureCache (yaml.worker.worker.js:23425)
    at YamlDocuments.getYamlDocument (yaml.worker.worker.js:23418)
    at Object.findLinks2 [as findLinks] (yaml.worker.worker.js:24862)
    at Object.findLinks (yaml.worker.worker.js:25404)
    at EditorSimpleWorker.fmr (yaml.worker.worker.js:14912)
    at SimpleWorkerServer._handleMessage (yaml.worker.worker.js:12526)
    at Object.handleMessage (yaml.worker.worker.js:12512)
    at SimpleWorkerProtocol._handleMessage (yaml.worker.worker.js:12381)
    at SimpleWorkerProtocol.handleMessage (yaml.worker.worker.js:12354)
    at SimpleWorkerServer.onmessage (yaml.worker.worker.js:12516)
    at errors.js:8

Custom YAML tags

In my YAML document, I want to use some custom tags. Unfortunately, when using monaco-yaml I get the error marker that the tag is unknown (e.g. unknown tag <!foo>YAML(0)). Is it possible somewhere to define those custom tags or to disable tag validation at all (without disabling validation as a whole)?

Demo version

Hi! Could you please share a link where I can check a demo version of this plugin in action?

Completion is not working while other options work well

Hello, in my project, completion is not workfing while other options work well. It is strange and i can't figure it out what the problem is.

Here is my code:

import React, { FC, useEffect, useRef } from 'react';
import { editor, Environment } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor';
// eslint-disable-next-line import/no-webpack-loader-syntax
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker.js';
// eslint-disable-next-line import/no-webpack-loader-syntax
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker.js';

import classes from './editeNodeAttr.module.less';

declare global {
  interface Window {
    MonacoEnvironment: Environment;
  }
}

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    if (label === 'yaml') {
      return new YamlWorker();
    }
    return new EditorWorker();
  },
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  format: true,
  hover: true,
  completion: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        id: 'http://myserver/foo-schema.json',
        type: 'object',
        properties: {
          boolean: {
            description: 'Are boolean supported?',
            type: 'boolean',
          },
          enum: {
            description: 'Pick your starter',
            enum: ['Bulbasaur', 'Squirtle', 'Charmander', 'Pikachu'],
          },
        },
      },
    },
  ],
});

const YamlEditTest: FC = () => {
  const ref = useRef(null);

  const defaultValue = `enum: `;

  useEffect(() => {
    const yamlInstance = editor.create(ref.current, {
      automaticLayout: true,
      value: defaultValue,
      language: 'yaml',
      fontSize: 15,
    });

    yamlInstance.onDidChangeModelContent(event => {
      const markers = editor.getModelMarkers({});
      console.log(markers);
    });
  }, [defaultValue]);

  return <div className={classes.yamlEdite} ref={ref} style={{ border: '1px solid #d9d9d9' }} />;
};

export default YamlEditTest;

when i hover, it shows the tips:
image

But it can not complete the value according to the enum configuration, like the example in the monaco-yaml.js.org:
image

The version of monaco-editor is 0.27.0 and monaco-yaml is 3.0.1.

Property 'yaml' does not exist on type 'typeof languages'

i'm using ngx-monaco-editor (https://github.com/atularen/ngx-monaco-editor#readme) library in my Angular project. also i would like to use monaco-yaml:

monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({ ... })

for some reason i get following error:

error TS2339: Property 'yaml' does not exist on type 'typeof languages'.

i cannot understand, what's the problem: ngx-monaco-editor already contains monaco-editor lib, and monaco.languages is defined, but there is no yaml property. that's kinda strange for me, since in monaco-yaml is declared same monaco namespace with property yaml, so it's global scope, but my code see only monaco namespase properties defined in ngx-monaco-editor

i'll be happy if anyone has any ideas about what could that be

Non-relative import for unknown module: monaco-editor/esm/vs/editor/editor.worker

I've been trying to add this plugin for a while without success. Is there something I'm missing here?
Thanks.

Steps to reproduce

Clone latest monaco-editor (0.23.0):

$ git clone https://github.com/microsoft/monaco-editor.git
$ cd monaco-editor

Install the package:

$ npm i -D monaco-yaml

Add the plugin to my metadata.js file:

{
  name: "monaco-yaml",
  contrib: "vs/language/yaml/monaco.contribution",
  modulePrefix: "vs/language/yaml",
  paths: {
    src: "/monaco-yaml/lib/dev",
    "npm/dev": "node_modules/monaco-yaml/lib/dev",
    "npm/min": "node_modules/monaco-yaml/lib/min",
    esm: "node_modules/monaco-yaml/lib/esm",
  },
}

Build it:

$ npm run release

I get the following error:

Non-relative import for unknown module: monaco-editor/esm/vs/editor/editor.worker in /Users/jose.veiga/Projects/monaco-editor/node_modules/monaco-yaml/lib/esm/yaml.worker.js

What I've tried

I tried commenting out the esm config, since I'm only gonna be using the dev or min version anyway:

{
  name: "monaco-yaml",
  contrib: "vs/language/yaml/monaco.contribution",
  modulePrefix: "vs/language/yaml",
  paths: {
    src: "/monaco-yaml/lib/dev",
    "npm/dev": "node_modules/monaco-yaml/lib/dev",
    "npm/min": "node_modules/monaco-yaml/lib/min",
    // esm: "node_modules/monaco-yaml/lib/esm",
  },
}

This works (the release script finishes successfully), however, when I copy the artifacts into my Angular web app...

$ rm -rf <path-to-web-app>/src/assets/monaco/vs
$ cp -R ./monaco-editor/release/dev/vs <path-to-web-app>/src/assets/monaco/

...and refresh, I get this error in the browser:

Uncaught ReferenceError: monaco is not defined

registerCompletionItemProvider Example

Can we have an example using the registerCompletionItemProvider example from Monaco playground?

I've tried in many ways and unable to see the completion option expand. We found that:

  • If I change to a different language (ie. plaintext) the completion does popup. Only when I have the language set to yaml completion does not work.

I've created an example codesandbox here: https://codesandbox.io/s/silent-firefly-4rq4w?file=/index.jsx

If you change lines 72, and 92 from yaml to plaintext and type l anywhere in the editor you will see:

image

But having it set to yaml it does not work.

how use the isKubernetes diagnostic option

Hello!

I'm trying to understand what the isKubernetes property on the DiagnosticsOptions interface does - if/how to use it... I couldn't find anything helpful here or in the language-server repo - can anyone provide some insight / point me to somewhere I can learn?

thanks in advance!

/Ole

Is `completion` or `hover` option available in `DiagnosticsOptions`?

In the type definition file, they are not available:

https://github.com/pengx17/monaco-yaml/blob/master/src/monaco.d.ts#L7-L45

But they are used in demos: https://github.com/pengx17/monaco-yaml/search?q=completion

And according to the doc:

  • Code completion, based on JSON schemas or by looking at similar objects in the same file
  • Hovers, based on JSON schemas

So, my question is are the two feature not configurable? Or should they be added into the type definition file?

Upgrade yaml-language-server to 0.14

We will upgrade to the latest version of yaml-language-server after 24.12.2020 as it is the release date for them. There will be a lot of breaking changes as we will jump from 0.11 to 0.14 as 0.13 has some issues with autocompletion.

monaco-yaml with react-monaco-editor and webpack

I'm trying to get monaco-yaml to work with react-monaco-editor and webpack. It looks like I got everything working, correctly and the yaml.worker is loading without errors. The only issue is that when I attempt to use any feature of monaco-yaml, it just never proceeds. Intellisense is stuck on "Loading...". From examining the code it looks like the MonacoWebWorkerImpl.prototype._getForeignProxy function in webworker.js never resolves or rejects, it just waits. Has anyone run into anything like this?

Unable to parse content from '/undefined': Parse error at offset 0

Unable to parse content from '/undefined': Parse error at offset 0 when i set enableSchemaRequest false

Here is my code:

import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor';
import yamlWorkerUrl from 'worker-plugin/loader?name=yaml&esModule!monaco-yaml/lib/esm/yaml.worker';

window.MonacoEnvironment = {
  getWorkerUrl() {
    return yamlWorkerUrl;
  }
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: false,
  hover: true,
  completion: true,
  schemas: [
    {
      fileMatch: ['*'],
      schema: {
        type: 'object',
        properties: {
          p1: {
            enum: ['v1', 'v2'],
          },
        },
      },
    },
    {
      schema: {
        type: 'object',
        properties: {
          q1: {
            enum: ['x1', 'x2'],
          },
        },
      },
    },
  ],
});
const monaco = editor.create(document.getElementById('editor'), {
        value: 'p1: ',
        language: 'yaml',
});
 console.log(monaco);
}

Constructs like 'if-then' not working in auto-suggest

I have a draft-07 json schema(http://json-schema.org/draft-07/schema) with an if-then construct, something like this:

{
      "$schema": "http://json-schema.org/draft-07/schema#",
      "uri": "http://myserver/foo-schema.json",
      "fileMatch": ["*"],
      "schema": {
        "type": "object",
        "properties": {
          "street_address": {
            "type": "string"
          },
          "country": {
            "enum": ["United States of America", "Canada", "Netherlands"]
          }
        },
        "allOf": [
          {
            "if": {
              "properties": {
                "country": { "const": "United States of America" }
              }
            },
            "then": {
              "properties": {
                "postal_code": { "pattern": "[0-9]{5}(-[0-9]{4})?" }
              }
            }
          },
          {
            "properties": {
              "postal_code2": { "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" }
            }
          },
          {
            "properties": { "postal_code3": { "pattern": "[0-9]{4} [A-Z]{2}" } }
          }
        ]
      }
    }

As per the schema, if I type country: United States of America, editor should also enlist postal_code1 in the dropdown. But as shown in the screenshot below, it doesn't.

image

Is this expected behaviour?

ESM Support

README.md states that ESM support is added but not tested.

However, when looking at the latest release available on npm, the ESM-style files do not appear to be included.

What is the current status on supporting ESM? I'd love to be able to integrate this plugin into my React app in combination with webpack by implementing what the monaco-editor repository states for integrating with webpack, but without ESM support this does not appear to be an option.

Uncaught ReferenceError: global is not defined

need some help.

I use monaco-editor, monaco-yaml, monaco-editor-webpack-plugin in Angular.

But I get an error such like this

image

  • how I use

webpack.config.js

const MonacoEditorWebpackPlugin = require("monaco-editor-webpack-plugin");
const webpack = require("webpack");

module.exports = (config, options) => {
  config.plugins.push(
    new MonacoEditorWebpackPlugin({
      languages: ['yaml'],
      globalAPI: true,
      customLanguages: [
        {
          label: "yaml",
          entry: "../../monaco-yaml/lib/esm/monaco.contribution",
          worker: {
            id: "vs/language/yaml/yamlWorker",
            entry: "../../monaco-yaml/lib/esm/yaml.worker.js",
          },
        },
      ],
    })
  );
  return config;
};

app.component.ts

import { AfterViewInit, Component, OnInit } from '@angular/core';

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'my-app'
  constructor(){

  }
  ngAfterViewInit(): void {
    monaco.editor.create(document.getElementById('testEditor'), {
      value: `
object: 
  test: 123
      `,
      language: 'yaml',
      theme: "vs-dark",
    });

    console.log('monaco2', monaco)
    setTimeout(()=>{
      console.log('monaco', monaco)
    },1000)
  }
  ngOnInit(): void {
  }
}

and I make a demo for debug

here is repo : https://github.com/linfanxxxx/monaco-debug/tree/master/src

run it with below:

npm install
npm run start

and you will see the error

Add tests

I realized that all the tests in the test directory are actually tests for the yaml-language-server and there are actually no tests for this repo. There should defintely be test coverage for the yaml plugin we're creating here.

Resolve referenced json schema

We have a large json schema file referencing some external json schema files using relative paths, e.g.

{
    $ref: "../external/schema.json"
}

Currently this cannot be handled by monaco-yaml, it attempts to fetch these reference with the file protocol:

Fetch API cannot load file:///../external/schema.json. URL scheme "file" is not supported.

It would be great if either

  • externally json schema referenced with a relative path can be resolved correctly, or
  • externally referenced json schema could be resolved with a custom resolver (maybe as an option passed to setDiagnosticsOptions).

validation for if-then-else schema feature is not correct

Hello, I want to use this JSON schema feature in my project: https://json-schema.org/understanding-json-schema/reference/conditionals.html?highlight=options#if-then-else.

image

But when I apply it to my schema:

// add the following attribute for testing
"p3": {
  "type": "object",
  "properties": {
    "street_address": {
      "type": "string"
    },
    "country": {
      "default": "United States of America",
      "enum": ["United States of America", "Canada"]
    }
  },
  "if": {
    "properties": { "country": { "const": "United States of America" } }
  },
  "then": {
    "properties": { "postal_code": { "pattern": "[0-9]{5}(-[0-9]{4})?" } }
  },
  "else": {
    "properties": { "postal_code": { "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" } }
  }
},

The validation is not correct and the completion is not working:
image

Can monaco-yaml suport this feature?

label.replace is not a function

Running into this error

TypeError: label.replace is not a function
    at Object.add (/projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:7881:25)
    at YAMLCompletion.JSONCompletion2.addEnumValueCompletions (/projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:4094:19)
    at YAMLCompletion.JSONCompletion2.addSchemaValueCompletions (/projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:3972:12)
    at YAMLCompletion.addSchemaValueCompletions (/projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:8133:11)
    at /projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:8111:20
    at Array.forEach (<anonymous>)
    at YAMLCompletion.getValueCompletions (/projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:8069:23)
    at /projects/_next/static/083ffcf6caefb8bf132b88c985d2dc95.worker.js:7969:14
(Most recent call first)

Reproduction steps:

  1. Open https://monaco-yaml.js.org/
  2. Switch to CircleCI config.yml
  3. Start typing version: 2.1 on line 1

image

Monaco-yaml bundle size has quintupled

I use monaco-yaml with the Monaco webpack plugin. After upgrading the monaco-yaml version a few days ago, the YAML worker size in the bundle has quintupled:

Before 302.33 KB build/static/js/yaml.worker.worker.be29fed70a279074a7221032a1be3734.js
After 1.53 MB build/static/js/yaml.worker.worker.be29fed70a279074a7221032a1be3734.js

This also causes the build process to take considerably more memory. Any idea what may have caused this?

Thank you to everyone working to maintain this library - it's incredibly useful to us!

yaml-worker 'exports is not defined' error

I'm trying to get the umd example working - I've built monaco-yaml using yarn.

It looks like the paths in examples/umd are out by a level, so I've copied index.html from the examples/umd folder to examples.

I can open index.html in a browser and the editor loads. I can see that the yaml functionality is working, apart from the auto-completion and anything that relies on the language server, looking at the console log, I see:

Uncaught ReferenceError: exports is not defined
    at yamlWorker.js:1548

Any help or pointers greatly appreciated.

Remove yaml-language-server code from the repo

I'm not sure why yaml-language-server's code has been copied into the repo. Maybe there are some custom code changes from the fork, but in that case, its quite unelegant to modify a third party dependency within the repo's source code. This makes it very difficult to maintain and upgrade dependencies.

So I propose we remove the sources of other repos included in this repo and reference them via dependencies. The repo sources included are:

  • yaml-language-server
  • yaml-ast-parser-custom-tags (which isn't really being imported/used anywhere and not used because js-yaml is used instead.

If the repos mentioned above have custom modifications needed for this repo, we should fork them and reference those forks instead.

Usage with `MonacoWebpackPlugin`?

I tried multiple solutions, mostly around trying to integrate the worker loading phase into an existing webpack, and it didn't work for me (ForgeinModule errors, or issues with monaco is undefined).

I managed to make it work with MonacoWebpackPlugin only when I modify the built-in languages array of MonacoWebpackPlugin before loading it:

const { languagesArr } = require('monaco-editor-webpack-plugin/out/languages');

const yamlLang = languagesArr.find(t => t.label === 'yaml');

yamlLang.entry = [
  yamlLang.entry,
  '../../monaco-yaml/esm/monaco.contribution'
];
yamlLang.worker = {
  id: 'vs/language/yaml/yamlWorker',
  entry: '../../monaco-yaml/esm/yaml.worker.js'
}

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

// later in your code, register MonacoWebpackPlugin in your webpack plugins

This is the only way I managed to get the worker loaded correctly with MonacoWebpackPlugin, because all registration, imports of monaco.contribution , loading the worker, and configuring the MonacoEnvironment is managed by the plugin automatically.

Maybe this should be documented? or improved somehow?

Build without prettier

I'm not using formatting, however prettier is included in the final webpack bundle, making much larger than it needs to be.

Is there any way to not include prettier?

run 'npm install .' error

node version: v9.4.0
errmsg:

Error: Error: ENOENT: no such file or directory, open '/home/tacy/workspace/react/monaco-yaml/node_modules/vscode-languageserver-types/lib/main.js'
In module tree:
    vs/languages/yaml/monaco.contribution
      vs/languages/yaml/yamlMode
        vs/languages/yaml/languageFeatures

    at Object.fs.openSync (fs.js:663:18)

    at /home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:23960:19
    at /home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:2896:39
    at /home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:2836:25
    at Function.prim.nextTick (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:23794:9)
    at Object.errback (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:2835:26)
    at Object.callback (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:2821:23)
    at Object.then (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:2875:23)
    at build (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:23919:12)
    at runBuild (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:25622:17)
    at Object.execCb (/home/tacy/workspace/react/monaco-yaml/node_modules/requirejs/bin/r.js:1869:33)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `gulp release`
npm ERR! Exit status 1
npm ERR!

Custom format

Our schema uses custom formats and those errors aren't picked up until server-side validation on saving.

It would be really great if one could register validation functions for custom formats to do the same validation on the front-end as is currently occurring on the server.

Incompatible with @monaco-editor/react. Is web worker necessary?

From the readme:

Also make sure to register the web worker.

Going through the previous issues, and looking at all the examples (example: #92 (comment)) it seems that instantiating the Web Worker is necessary. I'm curious why this is needed especially since the current playground on the official site has no mentions of a worker: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults. I'd be happy to submit a PR to update the readme, but I'm a bit curious what the worker provides.

This all stems from trying to implement monaco-yaml in a create-react-app application without ejecting. In a best case scenario I'd like to be able to use this with https://www.npmjs.com/package/@monaco-editor/react, however it seems that it's incompatible in it's current state.

fix formatter

per #14, the formatter enables prettier as the default formatter, but it will not work properly in esm or in umd (without configuring requirejs correctly).

Can not run example or use it with vite

Main Problem

[email protected]

Like #53, i can not run it with vite.

I also get Unpected usage at EditorSimpleWorker.loadForeignModule.

image

Other

about package-lock.json

Otherwise, i tried to run example in this repo.

This repo has package-lock.json, so i use npm to install it. But yaml-language-server told me only use yarn.

I find redhat-developer/yaml-language-server#528, but it has not been released.

So, can we remove package-lock.json to avoid forcing npm?

Can not run example

I remove package-lock.json and use yarn to run it. (I tried npm too.)

yarn prepack
// to get built esm
cd examples/demo && yarn start

The example can not show validate tooltip like https://monaco-yaml.js.org/.

image

Can you help me?

Thanks. I have tried every method I could think of, but it didn't work.

Demo Fails to Build and Run

Summary

The demo fails to build and run.

Platform

  • Windows 10, 64 bit, Version 20H2, OS build 19042.1110
  • Node 14.17.3

Steps to Reproduce

  • Download the latest repo as zip from github and extract it to a folder
  • In a command prompt navigate to <folder>\examples\demo
  • Run npm install to get dependencies
  • Run npm start to start application
  • Browser tab opens and loads application index page
  • UI shows frame but fails to load editor
  • Server side error occurs:
ERROR in ./src/index.ts 3:0-52
Module not found: Error: Can't resolve 'monaco-yaml' in 'D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\src'
resolve 'monaco-yaml' in 'D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\src'
  Parsed request is a module
  using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\src\node_modules doesn't exist or is not a directory
      looking for modules in D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules
        single file module
          using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\package.json (relative path: ./node_modules/monaco-yaml)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml is not a file
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.ts doesn't exist
        existing directory D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml
          using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\package.json (relative path: .)
            using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\package.json (relative path: ./node_modules/monaco-yaml)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml is not a file
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.js doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml.ts doesn't exist
              as directory
                existing directory D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml
                  using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\package.json (relative path: .)
                    use ./lib/esm/monaco.contribution.js from module in package.json
                      using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\package.json (relative path: ./lib/esm/monaco.contribution.js)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js doesn't exist
                        .mjs
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.mjs doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.js doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.ts doesn't exist
                        as directory
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js doesn't exist
                    use ./lib/esm/monaco.contribution.js from main in package.json
                      using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\package.json (relative path: ./lib/esm/monaco.contribution.js)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js doesn't exist
                        .mjs
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.mjs doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.js doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js.ts doesn't exist
                        as directory
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\lib\esm\monaco.contribution.js doesn't exist
                    using path: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\index
                      using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\index doesn't exist
                        .mjs
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\index.mjs doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\index.js doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\demo\node_modules\monaco-yaml\index.ts doesn't exist
      D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\examples\node_modules doesn't exist or is not a directory
      looking for modules in D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules
        single file module
          using description file: D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\package.json (relative path: ./node_modules/monaco-yaml)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules\monaco-yaml doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules\monaco-yaml.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules\monaco-yaml.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules\monaco-yaml.ts doesn't exist
        D:\Users\user\Downloads\monaco-yaml-main-2\monaco-yaml-main\node_modules\monaco-yaml doesn't exist
      D:\Users\user\Downloads\monaco-yaml-main-2\node_modules doesn't exist or is not a directory
      D:\Users\user\Downloads\node_modules doesn't exist or is not a directory
      D:\Users\user\node_modules doesn't exist or is not a directory
      D:\Users\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory

"self is not defined error" in Next.js project

After some headaches, I got react-monaco-editor successfully working in a Next.js project. Now I would like to integrate monaco-yaml. I added it to the configuration of next-transpile-modules, but now get the following error:

ReferenceError: self is not defined
    at eval (webpack-internal:///include-loader!../../node_modules/monaco-editor/esm/vs/editor/editor.api.js:1:1)
    at Object.include-loader!../../node_modules/monaco-editor/esm/vs/editor/editor.api.js (/workspace/myproject/.next/server/pages/module-editor.js:5778:1)
    at __webpack_require__ (/workspace/myproject/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///../../node_modules/monaco-yaml/lib/esm/monaco.contribution.js:6:96)
    at Module.../../node_modules/monaco-yaml/lib/esm/monaco.contribution.js (/workspace/myproject/.next/server/pages/module-editor.js:11596:1)
    at __webpack_require__ (/workspace/myproject/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///./app/module-editor/components/ModuleEditor.tsx:7:69)
    at Module../app/module-editor/components/ModuleEditor.tsx (/workspace/myproject/.next/server/pages/module-editor.js:5746:1)
    at __webpack_require__ (/workspace/m/.nextyproject/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///./app/module-editor/pages/module-editor/index.tsx:14:99)

Now I am a bit stranded as I have no clue what to try next to solve this problem. Does someone have an idea what's the cause of this error?

setDiagnosticsOptions no longer works after worker loaded

It seems that somewhere between monaco-yaml version 3 and 3.2, calling setDiagnosticsOptions to change schemas no longer works - the schemas seem frozen to what they were when the worker was first loaded. The options change, but it looks like a no-op – we don't try to load any new schemas. It seems to work in Monaco's JSON plugin just fine (if I call setDiagnosticsOptions with a changed schema, it takes effect even for an active Monaco editor).

I tried digging around to find out what is causing this, but it looks like the code changed significantly from 3.0 to 3.2 - any thoughts?

Autocompletion happening without colon getting appended

Autocompletion for a dependent field happens without a colon. Is this a known issue?

For e.g. spec is a field dependent on another field type as shown in below schema (it's a partial schema, can share complete schema, if needed)

connector field is of type object and works fine, completing with a colon.

But spec field, which is also of type object coming from an allOf section, doesn't.

Screen.Recording.2021-02-15.at.6.10.33.PM.mov
        "allOf": [
          {
            "if": {
              "properties": {
                "type": {
                  "const": "Http"
                }
              }
            },
            "then": {
              "properties": {
                "spec": {
                  "$ref": "#/definitions/BitbucketHttpCredentials"
                }
              }
            }
          },
          {
            "if": {
              "properties": {
                "type": {
                  "const": "Ssh"
                }
              }
            },
            "then": {
              "properties": {
                "spec": {
                  "$ref": "#/definitions/BitbucketSshCredentials"
                }
              }
            }
          }
        ]

Expose the Path of Item on Cursor

Sorry, if it's the wrong place to ask, but in your Readme the Path of the selected Item is found on top of the image.
(spec, template, spec, containers)

Is there a way to get that path?

image

ReferenceError: monaco is not defined

Getting "ReferenceError: monaco is not defined", though editor works fine with syntax highlight.
image

When component is destroyed, getting another error:
image

even though I can mount the component again and it works as expected.

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from "./app";

window.MonacoEnvironment = {
    getWorkerUrl(moduleId, label) {
        if (label === 'yaml') {
            return '../yaml.worker.bundle.js';
        }
        return '../editor.worker.bundle.js';
    },
};

ReactDOM.render(<App />, document.getElementById('root'));

YAMLEditor.js

import React, {useEffect, useState} from 'react';
import PropTypes from "prop-types";
import MonacoEditor from 'react-monaco-editor';
import 'monaco-yaml/esm/monaco.contribution';
import {languages} from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor';

const {yaml} = languages || {};

const YAMLEditor = (props) => {
    const [value, setValue] = useState(props.yamlData);
    useEffect(() => {
        yaml &&
        yaml.yamlDefaults.setDiagnosticsOptions({
            validate: true,
            enableSchemaRequest: true,
            hover: true,
            completion: true
        });
    }, []);

    return (
        <MonacoEditor
            width="800"
            height="600"
            language="yaml"
            value={value}
            onChange={setValue}
        />
    );
};

YAMLEditor.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    yamlData: PropTypes.any
};

export default YAMLEditor;

Usages in a lazy loaded component

<YAMLEditor yamlData={this.state.yamlRawContent} />

webpack entry and output:

entry: {
        main: './src/index.js',
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'yaml.worker': 'monaco-yaml/esm/yaml.worker.js',
        'polyfill': '@babel/polyfill'
}

output: {
        path: path.resolve(__dirname, 'dist'),
        globalObject: 'this',
        publicPath: '/',
        filename: '[name].bundle.js'
}

package.json

"devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/plugin-proposal-class-properties": "7.3.3",
    "@babel/plugin-transform-modules-commonjs": "7.4.0",
    "@babel/plugin-transform-runtime": "7.3.4",
    "@babel/preset-env": "7.7.1",
    "@babel/preset-react": "7.0.0",
    "babel-cli": "6.6.5",
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "compression-webpack-plugin": "^3.1.0",
    "copy-webpack-plugin": "^5.0.3",
    "cors": "^2.8.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "eslint": "^5.15.3",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-react": "^7.12.4",
    "eslint-watch": "^5.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "gulp": "^4.0.2",
    "gulp-connect": "^5.5.0",
    "gulp-nodemon": "^2.2.1",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "^0.12.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.5.0",
    "jest-puppeteer": "^4.1.0",
    "json-update": "^4.0.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "2.0.7",
    "puppeteer": "^1.13.0",
    "react-loadable": "^5.5.0",
    "react-test-renderer": "^16.8.6",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "6.0.6",
    "scss-loader": "0.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.19.1",
    "webpack-async-chunk-names-plugin": "^0.1.1",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "file-loader": "^3.0.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "immutable": "^4.0.0-rc.12",
    "material-table": "1.34.2",
    "material-ui-slider": "^3.0.8",
    "monaco-yaml": "^2.4.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "monaco-editor": "^0.20.0",
    "react-monaco-editor": "^0.34.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-slick": "^0.25.2",
    "react-swipeable-views": "^0.13.1",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^1.0.2",
    "slick-carousel": "^1.8.1",
    "throttle-debounce": "^2.1.0",
    "yaml-js": "^0.2.3"
  }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.