@bgoodman/code-edit - npm Package Compare versions

Comparing version 1.3.0 to 1.4.1

dist/index.d.ts

@@ -1,6 +0,25 @@
-export default class CodeEdit extends HTMLElement {
+/// <reference types="codemirror" />
+declare enum Mode {
+    htmlmixed = "htmlmixed",
+    javascript = "javascript",
+    typescript = "typescript",
+    markdown = "markdown"
+}
+declare class CodeEdit extends HTMLElement {
+    static get observedAttributes(): string[];
+    editor?: CodeMirror.EditorFromTextArea;
     constructor();
-    private isMac;
-    private editorView;
-    private editorState;
+    connectedCallback(): Promise<void>;
+    get mode(): Mode;
+    set mode(newState: Mode);
+    get storageKey(): string | undefined;
+    initEditor(): Promise<CodeMirror.EditorFromTextArea>;
+    getValue(seperator?: string): Promise<string>;
+    setValue(code: string): Promise<void>;
+    attributeChangedCallback(_name: string, _oldValue: string, _newValue: string): Promise<void>;
+    private loadSessionInputData;
+    private saveSessionInput;
+    private getModeDfn;
 }
+
+export default CodeEdit;

dist/index.js

@@ -41,2 +41,6 @@ /*! *****************************************************************************
         super();
+        this.saveSessionInput = (_instance, _changes) => __awaiter(this, void 0, void 0, function* () {
+            const input = yield this.getValue();
+            window.localStorage.setItem(`${window.location.href}-${this.storageKey}`, input);
+        });
         const template = document.createElement('template');
@@ -64,8 +68,13 @@ template.innerHTML = `
     }
+    get storageKey() {
+        return this.getAttribute("storage-key") || undefined;
+    }
     initEditor() {
         const prevEl = this.shadowRoot.querySelector("div.CodeMirror");
-        console.log("prevEL", prevEl);
         if (prevEl) {
             prevEl.remove();
         }
+        if (this.editor) {
+            this.editor.off("change", this.saveSessionInput);
+        }
         return new Promise((resolve) => {
@@ -81,2 +90,9 @@ this.getModeDfn().import.then(() => __awaiter(this, void 0, void 0, function* () {
                 });
+                const initialState = this.loadSessionInputData();
+                if (initialState) {
+                    this.setValue(initialState);
+                }
+                if (this.storageKey) {
+                    editor.on("change", this.saveSessionInput);
+                }
                 resolve(editor);
@@ -111,3 +127,2 @@ }));
             if (_name === "mode" && _oldValue !== _newValue && _oldValue !== null) {
-                console.log("attr. 'mode':", _oldValue, _newValue);
                 this.editor = yield this.initEditor();
@@ -117,2 +132,7 @@ }
     }
+    loadSessionInputData() {
+        return this.storageKey
+            ? window.localStorage.getItem(`${window.location.href}-${this.storageKey}`) || undefined
+            : undefined;
+    }
     getModeDfn() {
@@ -119,0 +139,0 @@ switch (this.mode) {

package.json

 {
   "name": "@bgoodman/code-edit",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "A custom element encapsulating a CodeMirror instance.",
@@ -17,2 +17,3 @@ "main": "./dist/index.js",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-dts": "^1.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -19,0 +20,0 @@ "rollup-plugin-postcss": "^2.0.3",

README.md

@@ -32,2 +32,8 @@ # code-edit
 
+## `storage-key`
+
+If set, allows the editors value to persist accross sessions using `window.localStorage`.
+Data is stored as key `${window.location.href}-${this.storageKey}`.
+If unset, the editor's value will reset each time the component loads.
+
 ## Methods
@@ -34,0 +40,0 @@

rollup.config.js

@@ -7,2 +7,3 @@ import fs from "fs";
 import glob from 'glob';
+import dts from "rollup-plugin-dts";
 
@@ -21,18 +22,25 @@ glob.sync('**/*/*.css').forEach((css) => {  // Use forEach because https://github.com/rollup/rollup/issues/1873
 
-export default {
-    input: 'src/index.ts',
-    output: {
-        dir: "dist",
-        format: "esm",
+export default [
+    {
+        input: 'src/index.ts',
+        output: {
+            dir: "dist",
+            format: "esm",
+        },
+        plugins: [
+            postcss({
+                writeDefinitions: true,
+                modules: false,
+                inject: false,
+            }),
+            nodeResolve(),
+            commonjs(),
+            typescript(),
+        ]
     },
-    plugins: [
-        postcss({
-			writeDefinitions: true,
-            modules: false,
-            inject: false,
-        }),
-        nodeResolve(),
-        commonjs(),
-        typescript(),
-    ]
-}
+    {
+        input: "./src/index.ts",
+        output: [{ file: "dist/index.d.ts", format: "es" }],
+        plugins: [dts()],
+    },
+]

src/index.ts

@@ -46,8 +46,14 @@ import style from "codemirror/lib/codemirror.css";
 
+    public get storageKey() {
+        return this.getAttribute("storage-key") || undefined;
+    }
+
     public initEditor(): Promise<CodeMirror.EditorFromTextArea> {
         const prevEl = this.shadowRoot!.querySelector<HTMLDivElement>("div.CodeMirror");
-        console.log("prevEL",prevEl)
         if (prevEl) {
             prevEl.remove();
         };
+        if (this.editor) {
+            this.editor.off("change", this.saveSessionInput)
+        };
         return new Promise( (resolve) => {
@@ -63,2 +69,9 @@ this.getModeDfn().import.then( async () => {
                 });
+                const initialState = this.loadSessionInputData();
+                if (initialState) {
+                    this.setValue(initialState);
+                };
+                if (this.storageKey) {
+                    editor.on("change", this.saveSessionInput)
+                }
                 resolve(editor);
@@ -89,3 +102,2 @@ });
         if (_name === "mode" && _oldValue !== _newValue && _oldValue !== null) {
-            console.log("attr. 'mode':",_oldValue,_newValue)
             this.editor = await this.initEditor();
@@ -95,2 +107,13 @@ }
 
+    private loadSessionInputData() {
+        return this.storageKey
+            ? window.localStorage.getItem(`${window.location.href}-${this.storageKey}`) || undefined
+            : undefined
+    }
+
+    private saveSessionInput = async (_instance: CodeMirror.Editor, _changes: CodeMirror.EditorChangeLinkedList) => {
+        const input = await this.getValue();
+        window.localStorage.setItem(`${window.location.href}-${this.storageKey}`, input);
+    }
+
     private getModeDfn() {
@@ -97,0 +120,0 @@ switch (this.mode) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1763823

increased by7.58%

Number of package files

26

increased by4%

Lines of code

39890

increased by9.3%

Number of lines in readme file

55

increased by12.24%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes