Added a bunch of new features to the base code

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/demo/src/routes",
+      // "webRoot": "${workspaceFolder}/"
+      // "webRoot": "${workspaceFolder}/demo/src/routes"
+      // "webRoot": "${workspaceFolder}/demo/src/routes"
+    }
+  ]
+}

demo/package.json

@@ -14,24 +14,24 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "^0.5.0",
-    "sirv": "^0.4.0",
-    "svelte-codemirror": "^1.2.0"
+    "sirv": "^0.4.0"
   },
   "devDependencies": {
-    "npm-run-all": "^4.1.5",
-    "sapper": "^0.27.0",
-    "svelte": "^3.0.0",
     "@babel/core": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "rollup": "^1.0.0",
-    "rollup-plugin-babel": "^4.0.2",
-    "rollup-plugin-commonjs": "^9.1.6",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-svelte": "^5.0.1",
-    "rollup-plugin-terser": "^4.0.4"
+    "@rollup/plugin-babel": "^5.0.3",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.1",
+    "@rollup/plugin-replace": "^2.3.3",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^2.39.0",
+    "rollup-plugin-svelte": "^5.2.2",
+    "rollup-plugin-terser": "^6.1.0",
+    "sapper": "^0.27.0",
+    "svelte": "^3.15.0",
+    "svelte-codemirror": "git+https://github.com/frantic0/svelte-codemirror.git"
   }
 }

demo/rollup.config.js

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
 import svelte from 'rollup-plugin-svelte';
-import babel from 'rollup-plugin-babel';
+import babel from "@rollup/plugin-babel";
 import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
 import pkg from './package.json';
@@ -17,10 +17,11 @@ export default {
 	client: {
 		input: config.client.input(),
 		output: config.client.output(),
+		// sourcemap: true,
 		plugins: [
 			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				"process.browser": true,
+				"process.env.NODE_ENV": JSON.stringify(mode)
 			}),
 			svelte({
 				dev,
@@ -32,51 +33,60 @@ export default {
 			}),
 			commonjs(),
 
-			legacy && babel({
-				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				runtimeHelpers: true,
-				exclude: ['node_modules/@babel/**'],
-				presets: [
-					['@babel/preset-env', {
-						targets: '> 0.25%, not dead'
-					}]
-				],
-				plugins: [
-					'@babel/plugin-syntax-dynamic-import',
-					['@babel/plugin-transform-runtime', {
-						useESModules: true
-					}]
-				]
-			}),
+			legacy &&
+				babel({
+					extensions: [".js", ".mjs", ".html", ".svelte"],
+					runtimeHelpers: true,
+					exclude: ["node_modules/@babel/**"],
+					presets: [
+						[
+							"@babel/preset-env",
+							{
+								targets: "> 0.25%, not dead"
+							}
+						]
+					],
+					plugins: [
+						"@babel/plugin-syntax-dynamic-import",
+						[
+							"@babel/plugin-transform-runtime",
+							{
+								useESModules: true
+							}
+						]
+					]
+				}),
 
-			!dev && terser({
-				module: true
-			})
+			!dev &&
+				terser({
+					module: true
+				})
 		],
 
-		onwarn,
+		onwarn
 	},
 
 	server: {
 		input: config.server.input(),
 		output: config.server.output(),
 		plugins: [
 			replace({
-				'process.browser': false,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				"process.browser": false,
+				"process.env.NODE_ENV": JSON.stringify(mode)
 			}),
 			svelte({
-				generate: 'ssr',
+				generate: "ssr",
 				dev
 			}),
 			resolve(),
 			commonjs()
 		],
 		external: Object.keys(pkg.dependencies).concat(
-			require('module').builtinModules || Object.keys(process.binding('natives'))
+			require("module").builtinModules ||
+				Object.keys(process.binding("natives"))
 		),
 
-		onwarn,
+		onwarn
 	},
 
 	serviceworker: {
@@ -85,13 +95,13 @@ export default {
 		plugins: [
 			resolve(),
 			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
+				"process.browser": true,
+				"process.env.NODE_ENV": JSON.stringify(mode)
 			}),
 			commonjs(),
 			!dev && terser()
 		],
 
-		onwarn,
+		onwarn
 	}
 };

demo/src/codeMirrorPlugins.js

@@ -1,8 +1,27 @@
-import "codemirror/mode/javascript/javascript.js";
-// import 'codemirror/mode/shell/shell.js';
-import "codemirror/mode/handlebars/handlebars.js";
-import "codemirror/mode/htmlmixed/htmlmixed.js";
-import "codemirror/mode/xml/xml.js";
-import "codemirror/mode/css/css.js";
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/shell/shell.js';
+import 'codemirror/mode/ebnf/ebnf';
+import 'codemirror/mode/handlebars/handlebars.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/mode/xml/xml.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/asn.1/asn.1.js';
+import 'codemirror/mode/clojure/clojure.js';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/keymap/vim.js';
+import 'codemirror/theme/monokai.css';
+import 'codemirror/theme/icecoder.css';
 import "codemirror/addon/edit/closebrackets.js";
 import "codemirror/addon/edit/closetag.js";
+import 'codemirror/theme/shadowfox.css';
+import 'codemirror/theme/cobalt.css';
+import 'codemirror/addon/search/search.js';
+import 'codemirror/addon/search/searchcursor.js';
+import 'codemirror/addon/search/jump-to-line.js';
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/comment/comment.js";
+import "codemirror/addon/comment/continuecomment.js";
+
+// import './theme.css';
+// import "./sema.css";

demo/src/icecoder.css

@@ -0,0 +1,44 @@
+
+/*
+ICEcoder default theme by Matt Pass, used in code editor available at https://icecoder.net
+*/
+
+.cm-s-icecoder { color: #666; background: #1d1d1b; }
+
+.cm-s-icecoder span.cm-keyword { color: #eee; font-weight:bold; }  /* off-white 1 */
+.cm-s-icecoder span.cm-atom { color: #e1c76e; }                    /* yellow */
+.cm-s-icecoder span.cm-number { color: #6cb5d9; }                  /* blue */
+.cm-s-icecoder span.cm-def { color: #b9ca4a; }                     /* green */
+
+.cm-s-icecoder span.cm-variable { color: #6cb5d9; }                /* blue */
+.cm-s-icecoder span.cm-variable-2 { color: #cc1e5c; }              /* pink */
+.cm-s-icecoder span.cm-variable-3, .cm-s-icecoder span.cm-type { color: #f9602c; } /* orange */
+
+.cm-s-icecoder span.cm-property { color: #eee; }                   /* off-white 1 */
+.cm-s-icecoder span.cm-operator { color: #9179bb; }                /* purple */
+.cm-s-icecoder span.cm-comment { color: #97a3aa; }                 /* grey-blue */
+
+.cm-s-icecoder span.cm-string { color: #b9ca4a; }                  /* green */
+.cm-s-icecoder span.cm-string-2 { color: #6cb5d9; }                /* blue */
+
+.cm-s-icecoder span.cm-meta { color: #555; }                       /* grey */
+
+.cm-s-icecoder span.cm-qualifier { color: #555; }                  /* grey */
+.cm-s-icecoder span.cm-builtin { color: #214e7b; }                 /* bright blue */
+.cm-s-icecoder span.cm-bracket { color: #cc7; }                    /* grey-yellow */
+
+.cm-s-icecoder span.cm-tag { color: #e8e8e8; }                     /* off-white 2 */
+.cm-s-icecoder span.cm-attribute { color: #099; }                  /* teal */
+
+.cm-s-icecoder span.cm-header { color: #6a0d6a; }                  /* purple-pink */
+.cm-s-icecoder span.cm-quote { color: #186718; }                   /* dark green */
+.cm-s-icecoder span.cm-hr { color: #888; }                         /* mid-grey */
+.cm-s-icecoder span.cm-link { color: #e1c76e; }                    /* yellow */
+.cm-s-icecoder span.cm-error { color: #d00; }                      /* red */
+
+.cm-s-icecoder .CodeMirror-cursor { border-left: 1px solid white; }
+.cm-s-icecoder div.CodeMirror-selected { color: #fff; background: #037; }
+.cm-s-icecoder .CodeMirror-gutters { background: #1d1d1b; min-width: 41px; border-right: 0; }
+.cm-s-icecoder .CodeMirror-linenumber { color: #555; cursor: default; }
+.cm-s-icecoder .CodeMirror-matchingbracket { color: #fff !important; background: #555 !important; }
+.cm-s-icecoder .CodeMirror-activeline-background { background: #000; }

demo/src/routes/_layout.svelte

@@ -8,7 +8,7 @@
   main {
     position: relative;
     background-color: white;
-    padding: 2em;
+    /* padding: 0.1em; */
     margin: 0 auto;
     box-sizing: border-box;
   }