Remove React from examples

`react-monaco-editor` has a dependency on `monaco-editor@*`. This makes it
annoying to manage the exact version of `monaco-editor` that’s being used.

examples/react-webpack-worker-loader/.babelrc

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

examples/react-webpack-worker-loader/README.md

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

examples/react-webpack-worker-loader/index.jsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import MonacoEditor from 'react-monaco-editor';
-import 'monaco-yaml/lib/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/lib/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'));

examples/react-webpack/.babelrc

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

examples/react-webpack/README.md

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

examples/react-webpack/index.jsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import MonacoEditor from 'react-monaco-editor';
-import 'monaco-yaml/lib/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'));

examples/webpack-worker-loader/README.md

@@ -0,0 +1,9 @@
+# Demo: Weback + Worker Loader + Monaco + Monaco YAML
+
+To run:
+
+```
+npm start
+```
+
+The demo will open in your browser.

examples/webpack-worker-loader/index.css

@@ -0,0 +1,4 @@
+#editor {
+  width: 800px;
+  height: 600px;
+}

examples/webpack-worker-loader/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>React Example</title>
+    <title>Monaco YAML</title>
   </head>
   <body>
-    <div id="react"></div>
+    <div id="editor"></div>
   </body>
 </html>

examples/webpack-worker-loader/index.js

@@ -0,0 +1,64 @@
+import './index.css';
+
+import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';
+import 'monaco-yaml/lib/esm/monaco.contribution';
+
+// 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/lib/esm/yaml.worker';
+
+window.MonacoEnvironment = {
+  getWorker(workerId, label) {
+    if (label === 'yaml') {
+      return new YamlWorker();
+    }
+    return new EditorWorker();
+  },
+};
+
+languages.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'],
+          },
+        },
+      },
+    },
+  ],
+});
+
+monaco.editor.create(document.getElementById('editor'), {
+  value: 'p1: ',
+  language: 'yaml',
+});

examples/webpack-worker-loader/package.json

@@ -1,27 +1,17 @@
 {
-  "name": "react-webpack-worker-loader-example",
+  "name": "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.21.3",
     "monaco-yaml": "file:../..",
-    "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",

examples/webpack-worker-loader/webpack.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    main: './index.jsx',
+    main: './index.js',
   },
   output: {
     globalObject: 'this',
@@ -12,13 +12,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],

examples/webpack/README.md

@@ -0,0 +1,9 @@
+# Demo: Weback + Monaco + Monaco YAML
+
+To run:
+
+```
+npm start
+```
+
+The demo will open in your browser.

examples/webpack/index.css

@@ -0,0 +1,4 @@
+#editor {
+  width: 800px;
+  height: 600px;
+}

examples/webpack/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>React Example</title>
+    <title>Monaco YAML</title>
   </head>
   <body>
-    <div id="react"></div>
+    <div id="editor"></div>
   </body>
 </html>

examples/webpack/index.js

@@ -0,0 +1,59 @@
+import './index.css';
+
+import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';
+import 'monaco-yaml/lib/esm/monaco.contribution';
+
+// 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';
+  },
+};
+
+languages.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'],
+          },
+        },
+      },
+    },
+  ],
+});
+
+monaco.editor.create(document.getElementById('editor'), {
+  value: 'p1: ',
+  language: 'yaml',
+});

examples/webpack/package.json

@@ -1,27 +1,17 @@
 {
-  "name": "react-webpack-example",
+  "name": "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.21.3",
     "monaco-yaml": "file:../..",
-    "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",

examples/webpack/webpack.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    main: './index.jsx',
+    main: './index.js',
     'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
     'yaml.worker': 'monaco-yaml/lib/esm/yaml.worker.js',
   },
@@ -14,13 +14,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],