v1.0.4 - packaging

Author: FormBucketSupport

dist/index.mjs

@@ -0,0 +1,358 @@
+import { SvelteComponent, init, safe_not_equal, element, append, text, insert, set_data, detach, space, empty, add_binding_callback, noop } from 'svelte/internal';
+import { createEventDispatcher, onMount } from 'svelte';
+
+/* src/CodeMirror.svelte generated by Svelte v3.5.1 */
+
+function add_css() {
+	var style = element("style");
+	style.id = 'svelte-1jpkv2x-style';
+	style.textContent = "textarea.svelte-1jpkv2x{visibility:hidden}pre.svelte-1jpkv2x{position:absolute;width:100%;height:100%;top:0;left:0;border:none;padding:4px 4px 4px 60px;resize:none;font-family:var(--font-mono);font-size:13px;line-height:1.7;user-select:none;pointer-events:none;color:#ccc;tab-size:2;-moz-tab-size:2}";
+	append(document.head, style);
+}
+
+// (225:0) {#if !CodeMirror}
+function create_if_block(ctx) {
+	var pre, t;
+
+	return {
+		c() {
+			pre = element("pre");
+			t = text(ctx.code);
+			pre.className = "svelte-1jpkv2x";
+		},
+
+		m(target, anchor) {
+			insert(target, pre, anchor);
+			append(pre, t);
+		},
+
+		p(changed, ctx) {
+			if (changed.code) {
+				set_data(t, ctx.code);
+			}
+		},
+
+		d(detaching) {
+			if (detaching) {
+				detach(pre);
+			}
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	var textarea, t, if_block_anchor;
+
+	var if_block = (!ctx.CodeMirror) && create_if_block(ctx);
+
+	return {
+		c() {
+			textarea = element("textarea");
+			t = space();
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+			textarea.tabIndex = "0";
+			textarea.readOnly = true;
+			textarea.value = ctx.code;
+			textarea.className = "svelte-1jpkv2x";
+		},
+
+		m(target, anchor) {
+			insert(target, textarea, anchor);
+			add_binding_callback(() => ctx.textarea_binding(textarea, null));
+			insert(target, t, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+
+		p(changed, ctx) {
+			if (changed.items) {
+				ctx.textarea_binding(null, textarea);
+				ctx.textarea_binding(textarea, null);
+			}
+
+			if (changed.code) {
+				textarea.value = ctx.code;
+			}
+
+			if (!ctx.CodeMirror) {
+				if (if_block) {
+					if_block.p(changed, ctx);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+
+		i: noop,
+		o: noop,
+
+		d(detaching) {
+			if (detaching) {
+				detach(textarea);
+			}
+
+			ctx.textarea_binding(null, textarea);
+
+			if (detaching) {
+				detach(t);
+			}
+
+			if (if_block) if_block.d(detaching);
+
+			if (detaching) {
+				detach(if_block_anchor);
+			}
+		}
+	};
+}
+
+const is_browser = typeof window !== "undefined";
+
+let codemirror_promise;
+let _CodeMirror;
+
+if (is_browser) {
+  codemirror_promise = import('codemirror');
+
+  codemirror_promise.then(mod => {
+    _CodeMirror = mod.default;
+  });
+}
+
+function sleep(ms) {
+  return new Promise(fulfil => setTimeout(fulfil, ms));
+}
+
+function instance($$self, $$props, $$invalidate) {
+	const dispatch = createEventDispatcher();
+
+  let { code = "", readonly = false, errorLoc = null, flex = false, lineNumbers = true, tab = true } = $$props;
+
+  let w;
+  let h;
+  let mode;
+
+  // We have to expose set and update methods, rather
+  // than making this state-driven through props,
+  // because it's difficult to update an editor
+  // without resetting scroll otherwise
+  async function set(new_code, new_mode) {
+    if (new_mode !== mode) {
+      await createEditor((mode = new_mode));    }
+
+    $$invalidate('code', code = new_code);
+    updating_externally = true;
+    if (editor) editor.setValue(code);
+    updating_externally = false;
+  }
+
+  function update(new_code) {
+    $$invalidate('code', code = new_code);
+
+    if (editor) {
+      const { left, top } = editor.getScrollInfo();
+      editor.setValue((code = new_code)); $$invalidate('code', code);
+      editor.scrollTo(left, top);
+    }
+  }
+
+  function resize() {
+    editor.refresh();
+  }
+
+  function focus() {
+    editor.focus();
+  }
+
+  const modes = {
+    js: {
+      name: "javascript",
+      json: false
+    },
+    json: {
+      name: "javascript",
+      json: true
+    },
+    svelte: {
+      name: "handlebars",
+      base: "text/html"
+    }
+  };
+
+  const refs = {};
+  let editor;
+  let updating_externally = false;
+  let marker;
+  let error_line;
+  let destroyed = false;
+  let CodeMirror;
+
+  let previous_error_line;
+
+  onMount(() => {
+    if (_CodeMirror) {
+      $$invalidate('CodeMirror', CodeMirror = _CodeMirror);
+      createEditor(mode || "svelte").then(() => {
+        if (editor) editor.setValue(code || "");
+      });
+    } else {
+      codemirror_promise.then(async mod => {
+        $$invalidate('CodeMirror', CodeMirror = mod.default);
+        await createEditor(mode || "svelte");
+        if (editor) editor.setValue(code || "");
+      });
+    }
+
+    return () => {
+      destroyed = true;
+      if (editor) editor.toTextArea();
+    };
+  });
+
+  let first = true;
+
+  async function createEditor(mode) {
+    if (destroyed || !CodeMirror) return;
+
+    if (editor) editor.toTextArea();
+
+    const opts = {
+      lineNumbers,
+      lineWrapping: true,
+      indentWithTabs: true,
+      indentUnit: 2,
+      tabSize: 2,
+      value: "",
+      mode: modes[mode] || {
+        name: mode
+      },
+      readOnly: readonly,
+      autoCloseBrackets: true,
+      autoCloseTags: true
+    };
+
+    if (!tab)
+      opts.extraKeys = {
+        Tab: tab,
+        "Shift-Tab": tab
+      };
+
+    // Creating a text editor is a lot of work, so we yield
+    // the main thread for a moment. This helps reduce jank
+    if (first) await sleep(50);
+
+    if (destroyed) return;
+
+    $$invalidate('editor', editor = CodeMirror.fromTextArea(refs.editor, opts));
+
+    editor.on("change", instance => {
+      if (!updating_externally) {
+        const value = instance.getValue();
+        dispatch("change", { value });
+      }
+    });
+
+    if (first) await sleep(50);
+    editor.refresh();
+
+    first = false;
+  }
+
+	function textarea_binding($$node, check) {
+		if ($$node || (!$$node && refs.editor === check)) refs.editor = $$node;
+		$$invalidate('refs', refs);
+	}
+
+	$$self.$set = $$props => {
+		if ('code' in $$props) $$invalidate('code', code = $$props.code);
+		if ('readonly' in $$props) $$invalidate('readonly', readonly = $$props.readonly);
+		if ('errorLoc' in $$props) $$invalidate('errorLoc', errorLoc = $$props.errorLoc);
+		if ('flex' in $$props) $$invalidate('flex', flex = $$props.flex);
+		if ('lineNumbers' in $$props) $$invalidate('lineNumbers', lineNumbers = $$props.lineNumbers);
+		if ('tab' in $$props) $$invalidate('tab', tab = $$props.tab);
+	};
+
+	$$self.$$.update = ($$dirty = { editor: 1, w: 1, h: 1, marker: 1, errorLoc: 1, previous_error_line: 1, error_line: 1 }) => {
+		if ($$dirty.editor || $$dirty.w || $$dirty.h) { if (editor && w && h) {
+        editor.refresh();
+      } }
+		if ($$dirty.marker || $$dirty.errorLoc || $$dirty.editor) { {
+        if (marker) marker.clear();
+    
+        if (errorLoc) {
+          const line = errorLoc.line - 1;
+          const ch = errorLoc.column;
+    
+          $$invalidate('marker', marker = editor.markText(
+            { line, ch },
+            { line, ch: ch + 1 },
+            {
+              className: "error-loc"
+            }
+          ));
+    
+          $$invalidate('error_line', error_line = line);
+        } else {
+          $$invalidate('error_line', error_line = null);
+        }
+      } }
+		if ($$dirty.editor || $$dirty.previous_error_line || $$dirty.error_line) { if (editor) {
+        if (previous_error_line != null) {
+          editor.removeLineClass(previous_error_line, "wrap", "error-line");
+        }
+    
+        if (error_line && error_line !== previous_error_line) {
+          editor.addLineClass(error_line, "wrap", "error-line");
+          $$invalidate('previous_error_line', previous_error_line = error_line);
+        }
+      } }
+	};
+
+	return {
+		code,
+		readonly,
+		errorLoc,
+		flex,
+		lineNumbers,
+		tab,
+		set,
+		update,
+		resize,
+		focus,
+		refs,
+		CodeMirror,
+		textarea_binding
+	};
+}
+
+class CodeMirror_1 extends SvelteComponent {
+	constructor(options) {
+		super();
+		if (!document.getElementById("svelte-1jpkv2x-style")) add_css();
+		init(this, options, instance, create_fragment, safe_not_equal, ["code", "readonly", "errorLoc", "flex", "lineNumbers", "tab", "set", "update", "resize", "focus"]);
+	}
+
+	get set() {
+		return this.$$.ctx.set;
+	}
+
+	get update() {
+		return this.$$.ctx.update;
+	}
+
+	get resize() {
+		return this.$$.ctx.resize;
+	}
+
+	get focus() {
+		return this.$$.ctx.focus;
+	}
+}
+
+export default CodeMirror_1;

example/src/routes/index.svelte

@@ -47,6 +47,6 @@
   <title>svelte-codemirror example</title>
 </svelte:head>
 
-<div class="codemirror-container">
-  <CodeMirror />
+<div class="codemirror-container flex">
+  <CodeMirror code={`Foo`} />
 </div>