dan/monaco-yaml
1
0
Fork 0
mirror of https://github.com/danbulant/monaco-yaml synced 2026-07-07 03:51:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #18 from kristenmills/react-example

Browse source 
Add React demos
This commit is contained in:
Peng Xiao 2020-02-24 09:49:05 +08:00 committed by GitHub
commit c9ea76feeb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 11036 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -15,7 +15,8 @@ for the API that the JSON plugin offers to configure the JSON language support.
## Installing ## Installing
`yarn add monaco-yaml` `yarn add monaco-yaml`
See `demo/index.html` as an example. Both vs loader and ESM are supported. Both vs loader and ESM are supported.
See `examples` directory for esm and umd examples.
## Development ## Development

3
examples/react-webpack-worker-loader/.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

2
examples/react-webpack-worker-loader/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
dist/
node_modules/

9
examples/react-webpack-worker-loader/README.md Normal file
View file

@ -0,0 +1,9 @@
# Demo: React + Weback + Worker Loader + Babel
To run:
```
yarn && yarn start
```
The demo will open in your browser. See (index.jsx)[index.jsx#L34-L36] for the schema loaded.

10
examples/react-webpack-worker-loader/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React Example</title>
</head>
<body>
<div id="react"></div>
</body>
</html>

80
examples/react-webpack-worker-loader/index.jsx Normal file
View file

@ -0,0 +1,80 @@
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import MonacoEditor from 'react-monaco-editor';
import 'monaco-yaml/esm/monaco.contribution';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js#L1-L91)
import 'monaco-editor';
// NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
// import shouldn't go through loader syntax.
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker';
import YamlWorker from 'worker-loader!monaco-yaml/esm/yaml.worker';
window.MonacoEnvironment = {
getWorker(workerId, label) {
if (label === 'yaml') {
return new YamlWorker();
}
return new EditorWorker();
},
};
const { yaml } = languages || {};
const Editor = () => {
const [value, setValue] = useState('p1: ');
useEffect(() => {
yaml &&
yaml.yamlDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
hover: true,
completion: true,
schemas: [
{
uri: 'http://myserver/foo-schema.json', // id of the first schema
fileMatch: ['*'], // associate with our model
schema: {
id: 'http://myserver/foo-schema.json', // id of the first schema
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2'],
},
p2: {
$ref: 'http://myserver/bar-schema.json', // reference the second schema
},
},
},
},
{
uri: 'http://myserver/bar-schema.json', // id of the first schema
schema: {
id: 'http://myserver/bar-schema.json', // id of the first schema
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2'],
},
},
},
},
],
});
}, []);
return (
<MonacoEditor
width="800"
height="600"
language="yaml"
value={value}
onChange={setValue}
/>
);
};
ReactDOM.render(<Editor />, document.getElementById('react'));

31
examples/react-webpack-worker-loader/package.json Normal file
View file

@ -0,0 +1,31 @@
{
"name": "react-webpack-worker-loader-example",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"monaco-editor": "^0.20.0",
"monaco-yaml": "^2.4.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-monaco-editor": "^0.34.0",
"style-loader": "^1.1.3",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"worker-loader": "^2.0.0"
}
}

37
examples/react-webpack-worker-loader/webpack.config.js Normal file
View file

@ -0,0 +1,37 @@
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
main: './index.jsx',
},
output: {
globalObject: 'this',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
loader: 'file-loader',
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './index.html',
}),
],
};

5354
examples/react-webpack-worker-loader/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff

3
examples/react-webpack/.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

2
examples/react-webpack/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
dist/
node_modules/

9
examples/react-webpack/README.md Normal file
View file

@ -0,0 +1,9 @@
# Demo: React + Weback + Babel
To run:
```
yarn && yarn start
```
The demo will open in your browser. See (index.jsx)[index.jsx#L34-L36] for the schema loaded.

10
examples/react-webpack/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React Example</title>
</head>
<body>
<div id="react"></div>
</body>
</html>

75
examples/react-webpack/index.jsx Normal file
View file

@ -0,0 +1,75 @@
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import MonacoEditor from 'react-monaco-editor';
import 'monaco-yaml/esm/monaco.contribution';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js#L1-L91)
import 'monaco-editor';
window.MonacoEnvironment = {
getWorkerUrl(moduleId, label) {
if (label === 'yaml') {
return './yaml.worker.bundle.js';
}
return './editor.worker.bundle.js';
},
};
const { yaml } = languages || {};
const Editor = () => {
const [value, setValue] = useState('p1: ');
useEffect(() => {
yaml &&
yaml.yamlDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
hover: true,
completion: true,
schemas: [
{
uri: 'http://myserver/foo-schema.json', // id of the first schema
fileMatch: ['*'], // associate with our model
schema: {
id: 'http://myserver/foo-schema.json', // id of the first schema
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2'],
},
p2: {
$ref: 'http://myserver/bar-schema.json', // reference the second schema
},
},
},
},
{
uri: 'http://myserver/bar-schema.json', // id of the first schema
schema: {
id: 'http://myserver/bar-schema.json', // id of the first schema
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2'],
},
},
},
},
],
});
}, []);
return (
<MonacoEditor
width="800"
height="600"
language="yaml"
value={value}
onChange={setValue}
/>
);
};
ReactDOM.render(<Editor />, document.getElementById('react'));

30
examples/react-webpack/package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "react-webpack-example",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"monaco-editor": "^0.20.0",
"monaco-yaml": "^2.4.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-monaco-editor": "^0.34.0",
"style-loader": "^1.1.3",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}

39
examples/react-webpack/webpack.config.js Normal file
View file

@ -0,0 +1,39 @@
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
main: './index.jsx',
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
'yaml.worker': 'monaco-yaml/esm/yaml.worker.js',
},
output: {
globalObject: 'this',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
loader: 'file-loader',
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './index.html',
}),
],
};

5338
examples/react-webpack/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff

0
demo/index.html → examples/umd/index.html
View file

2
package.json
View file

@ -72,7 +72,7 @@
}, },
"lint-staged": { "lint-staged": {
"linters": { "linters": {
"*.{json,scss,html,ts}": [ "*.{json,scss,html,ts,js,jsx}": [
"prettier --write", "prettier --write",
"git add" "git add"
] ]