ckeditor5-svelte - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global.Ckeditor = factory());
-}(this, function () { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Ckeditor = factory());
+}(this, (function () { 'use strict';
 
@@ -23,2 +23,5 @@ function noop() { }
     }
+    function is_empty(obj) {
+        return Object.keys(obj).length === 0;
+    }
     function insert(target, node, anchor) {
@@ -33,2 +36,8 @@ target.insertBefore(node, anchor || null);
     }
+    function attr(node, attribute, value) {
+        if (value == null)
+            node.removeAttribute(attribute);
+        else if (node.getAttribute(attribute) !== value)
+            node.setAttribute(attribute, value);
+    }
     function children(element) {
@@ -49,3 +58,3 @@ return Array.from(element.childNodes);
         if (!current_component)
-            throw new Error(`Function called outside component initialization`);
+            throw new Error('Function called outside component initialization');
         return current_component;
@@ -60,3 +69,3 @@ }
     function createEventDispatcher() {
-        const component = current_component;
+        const component = get_current_component();
         return (type, detail) => {
@@ -90,12 +99,18 @@ const callbacks = component.$$.callbacks[type];
     }
+    let flushing = false;
+    const seen_callbacks = new Set();
     function flush() {
-        const seen_callbacks = new Set();
+        if (flushing)
+            return;
+        flushing = true;
         do {
             // first, call beforeUpdate functions
             // and update components
-            while (dirty_components.length) {
-                const component = dirty_components.shift();
+            for (let i = 0; i < dirty_components.length; i += 1) {
+                const component = dirty_components[i];
                 set_current_component(component);
                 update(component.$$);
             }
+            set_current_component(null);
+            dirty_components.length = 0;
             while (binding_callbacks.length)
@@ -109,5 +124,5 @@ binding_callbacks.pop()();
                 if (!seen_callbacks.has(callback)) {
-                    callback();
                     // ...so guard against infinite loops
                     seen_callbacks.add(callback);
+                    callback();
                 }
@@ -121,9 +136,12 @@ }
         update_scheduled = false;
+        flushing = false;
+        seen_callbacks.clear();
     }
     function update($$) {
-        if ($$.fragment) {
-            $$.update($$.dirty);
+        if ($$.fragment !== null) {
+            $$.update();
             run_all($$.before_update);
-            $$.fragment.p($$.dirty, $$.ctx);
-            $$.dirty = null;
+            const dirty = $$.dirty;
+            $$.dirty = [-1];
+            $$.fragment && $$.fragment.p($$.ctx, dirty);
             $$.after_update.forEach(add_render_callback);
@@ -141,3 +159,3 @@ }
         const { fragment, on_mount, on_destroy, after_update } = component.$$;
-        fragment.m(target, anchor);
+        fragment && fragment.m(target, anchor);
         // onMount happens before the initial afterUpdate
@@ -159,23 +177,23 @@ add_render_callback(() => {
     function destroy_component(component, detaching) {
-        if (component.$$.fragment) {
-            run_all(component.$$.on_destroy);
-            component.$$.fragment.d(detaching);
+        const $$ = component.$$;
+        if ($$.fragment !== null) {
+            run_all($$.on_destroy);
+            $$.fragment && $$.fragment.d(detaching);
             // TODO null out other refs, including component.$$ (but need to
             // preserve final state?)
-            component.$$.on_destroy = component.$$.fragment = null;
-            component.$$.ctx = {};
+            $$.on_destroy = $$.fragment = null;
+            $$.ctx = [];
         }
     }
-    function make_dirty(component, key) {
-        if (!component.$$.dirty) {
+    function make_dirty(component, i) {
+        if (component.$$.dirty[0] === -1) {
             dirty_components.push(component);
             schedule_update();
-            component.$$.dirty = blank_object();
+            component.$$.dirty.fill(0);
         }
-        component.$$.dirty[key] = true;
+        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
     }
-    function init(component, options, instance, create_fragment, not_equal, prop_names) {
+    function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
         const parent_component = current_component;
         set_current_component(component);
-        const props = options.props || {};
         const $$ = component.$$ = {
@@ -185,3 +203,3 @@ fragment: null,
             // state
-            props: prop_names,
+            props,
             update: noop,
@@ -198,27 +216,33 @@ not_equal,
             callbacks: blank_object(),
-            dirty: null
+            dirty,
+            skip_bound: false
         };
         let ready = false;
         $$.ctx = instance
-            ? instance(component, props, (key, value) => {
-                if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {
-                    if ($$.bound[key])
-                        $$.bound[key](value);
+            ? instance(component, options.props || {}, (i, ret, ...rest) => {
+                const value = rest.length ? rest[0] : ret;
+                if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
+                    if (!$$.skip_bound && $$.bound[i])
+                        $$.bound[i](value);
                     if (ready)
-                        make_dirty(component, key);
+                        make_dirty(component, i);
                 }
+                return ret;
             })
-            : props;
+            : [];
         $$.update();
         ready = true;
         run_all($$.before_update);
-        $$.fragment = create_fragment($$.ctx);
+        // `false` as a special case of no DOM component
+        $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
         if (options.target) {
             if (options.hydrate) {
+                const nodes = children(options.target);
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                $$.fragment.l(children(options.target));
+                $$.fragment && $$.fragment.l(nodes);
+                nodes.forEach(detach);
             }
             else {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                $$.fragment.c();
+                $$.fragment && $$.fragment.c();
             }
@@ -232,2 +256,5 @@ if (options.intro)
     }
+    /**
+     * Base class for Svelte components. Used when dev=false.
+     */
     class SvelteComponent {
@@ -247,4 +274,8 @@ $destroy() {
         }
-        $set() {
-            // overridden by instance, if it has props
+        $set($$props) {
+            if (this.$$set && !is_empty($$props)) {
+                this.$$.skip_bound = true;
+                this.$$set($$props);
+                this.$$.skip_bound = false;
+            }
         }
@@ -278,6 +309,6 @@ }
 
-    /* src/Ckeditor.svelte generated by Svelte v3.6.7 */
+    /* src/Ckeditor.svelte generated by Svelte v3.32.1 */
 
     function create_fragment(ctx) {
-    	var div;
+    	let div;
 
@@ -287,19 +318,12 @@ return {
     			div = element("div");
+    			attr(div, "id", "_editor");
     		},
-
     		m(target, anchor) {
     			insert(target, div, anchor);
-    			ctx.div_binding(div);
     		},
-
     		p: noop,
     		i: noop,
     		o: noop,
-
     		d(detaching) {
-    			if (detaching) {
-    				detach(div);
-    			}
-
-    			ctx.div_binding(null);
+    			if (detaching) detach(div);
     		}
@@ -312,111 +336,94 @@ };
     function instance_1($$self, $$props, $$invalidate) {
-    	
-      
-      // Properties
-      let { editor = null, value = '', config = () => ({}) } = $$props;
-      let { disabled = false } = $$props;
+    	let { editor = null } = $$props;
+    	let { value = "" } = $$props;
+    	let { config = () => ({}) } = $$props;
+    	let { disabled = false } = $$props;
 
-      // Instance variables
-      let instance = null;
-      let lastEditorData = '';
-      let editorElement;
-      const dispatch = createEventDispatcher();
+    	// Instance variables
+    	let instance = null;
 
-      function watchValue(x) {
-        if (instance && x !== lastEditorData){
-          instance.setData(x);
-        }
-      }
+    	let lastEditorData = "";
+    	let editorElement;
+    	const dispatch = createEventDispatcher();
 
+    	function watchValue(x) {
+    		if (instance && x !== lastEditorData) {
+    			instance.setData(x);
+    		}
+    	}
 
-      onMount( () => {
-        
-        // If value is passed then add it to config
-        if(value) {
-          Object.assign(config, {
-            initialData: value
-          });
-        }
+    	onMount(() => {
+    		// If value is passed then add it to config
+    		if (value) {
+    			Object.assign(config, { initialData: value });
+    		}
 
-        editor.create(editorElement, config)
-        .then(editor => {
+    		// Get dom element to mount initialised editor instance
+    		editorElement = document.getElementById("_editor");
 
-            // Save the reference to the instance for future use.
-            instance = editor;
+    		editor.create(editorElement, config).then(editor => {
+    			// Save the reference to the instance for future use.
+    			instance = editor;
 
-            // Set initial disabled state.
-            editor.isReadOnly = disabled;
-            
-            // Let the world know the editor is ready.
-            dispatch('ready', editor);
+    			// Set initial disabled state.
+    			editor.isReadOnly = disabled;
 
-            setUpEditorEvents();
+    			// Let the world know the editor is ready.
+    			dispatch("ready", editor);
 
-        })
-        .catch( error => {
-            console.error( error );
-        });
+    			setUpEditorEvents();
+    		}).catch(error => {
+    			console.error(error);
+    		});
+    	});
 
-      });
+    	onDestroy(() => {
+    		if (instance) {
+    			instance.destroy();
+    			instance = null;
+    		}
 
-      onDestroy(() => {
-        
-        if (instance ) {
-          instance.destroy();
-          instance = null;
-        }
+    		// Note: By the time the editor is destroyed (promise resolved, editor#destroy fired)
+    		// the Vue component will not be able to emit any longer.
+    		// So emitting #destroy a bit earlier.
+    		dispatch("destroy", instance);
+    	});
 
-        // Note: By the time the editor is destroyed (promise resolved, editor#destroy fired)
-        // the Vue component will not be able to emit any longer. So emitting #destroy a bit earlier.
-        dispatch('destroy', instance);
-      });
+    	function setUpEditorEvents() {
+    		const emitInputEvent = evt => {
+    			// Cache the last editor data. This kind of data is a result of typing,
+    			// editor command execution, collaborative changes to the document, etc.
+    			// This data is compared when the component value changes in a 2-way binding.
+    			const data = $$invalidate(0, value = lastEditorData = instance.getData());
 
-      function setUpEditorEvents() {
-          const emitInputEvent = evt => {
-            // Cache the last editor data. This kind of data is a result of typing,
-            // editor command execution, collaborative changes to the document, etc.
-            // This data is compared when the component value changes in a 2-way binding.
-            const data = value = lastEditorData = instance.getData();
-            dispatch('input', { data, evt, instance }); $$invalidate('value', value);
-          };
+    			dispatch("input", { data, evt, instance });
+    		};
 
-          // Debounce emitting the #input event. When data is huge, instance#getData()
-          // takes a lot of time to execute on every single key press and ruins the UX.
-          instance.model.document.on( 'change:data', 
-            justDebounceIt( emitInputEvent, INPUT_EVENT_DEBOUNCE_WAIT ));
+    		// Debounce emitting the #input event. When data is huge, instance#getData()
+    		// takes a lot of time to execute on every single key press and ruins the UX.
+    		instance.model.document.on("change:data", justDebounceIt(emitInputEvent, INPUT_EVENT_DEBOUNCE_WAIT));
 
-          instance.editing.view.document.on( 'focus', evt => {
-            dispatch('focus',{ evt, instance });
-          });
+    		instance.editing.view.document.on("focus", evt => {
+    			dispatch("focus", { evt, instance });
+    		});
 
-          instance.editing.view.document.on( 'blur', evt => {
-            dispatch('blur', { evt, instance });
-          });
-        }
-
-    	function div_binding($$value) {
-    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-    			$$invalidate('editorElement', editorElement = $$value);
+    		instance.editing.view.document.on("blur", evt => {
+    			dispatch("blur", { evt, instance });
     		});
     	}
 
-    	$$self.$set = $$props => {
-    		if ('editor' in $$props) $$invalidate('editor', editor = $$props.editor);
-    		if ('value' in $$props) $$invalidate('value', value = $$props.value);
-    		if ('config' in $$props) $$invalidate('config', config = $$props.config);
-    		if ('disabled' in $$props) $$invalidate('disabled', disabled = $$props.disabled);
+    	$$self.$$set = $$props => {
+    		if ("editor" in $$props) $$invalidate(1, editor = $$props.editor);
+    		if ("value" in $$props) $$invalidate(0, value = $$props.value);
+    		if ("config" in $$props) $$invalidate(2, config = $$props.config);
+    		if ("disabled" in $$props) $$invalidate(3, disabled = $$props.disabled);
     	};
 
-    	$$self.$$.update = ($$dirty = { value: 1 }) => {
-    		if ($$dirty.value) { watchValue(value); }
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*value*/ 1) {
+    			 watchValue(value);
+    		}
     	};
 
-    	return {
-    		editor,
-    		value,
-    		config,
-    		disabled,
-    		editorElement,
-    		div_binding
-    	};
+    	return [value, editor, config, disabled];
     }
@@ -427,3 +434,9 @@
     		super();
-    		init(this, options, instance_1, create_fragment, safe_not_equal, ["editor", "value", "config", "disabled"]);
+
+    		init(this, options, instance_1, create_fragment, safe_not_equal, {
+    			editor: 1,
+    			value: 0,
+    			config: 2,
+    			disabled: 3
+    		});
     	}
@@ -434,2 +447,2 @@ }
 
-}));
+})));

package.json

 {
   "name": "ckeditor5-svelte",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Unofficial Svelte.js 3 component for CKEditor 5 – the best browser-based rich text editor.",
@@ -15,3 +15,3 @@ "homepage": "https://github.com/techlab23/ckeditor5-svelte",
   },
-  "svelte": "src/Ckeditor.svelte",
+  "svelte": "src/index.js",
   "module": "dist/index.mjs",
@@ -24,10 +24,2 @@ "main": "dist/index.js",
   },
-  "devDependencies": {
-    "np": "^5.0.3",
-    "rollup": "^1.11.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-svelte": "^5.0.0",
-    "rollup-plugin-commonjs": "^10.0.1",
-    "svelte": "^3.0.0"
-  },
   "keywords": [
@@ -52,2 +44,10 @@ "wysiwyg",
   ],
+  "devDependencies": {
+    "svelte": "^3.32.1",
+    "np": "^7.2.0",
+    "rollup": "^2.38.4",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "@rollup/plugin-commonjs": "^17.1.0"
+  },
   "dependencies": {
@@ -54,0 +54,0 @@ "just-debounce-it": "^1.1.0"

README.md

 # CKEditor 5 rich text editor component for Svelte.js 3
 
-Official CKEditor 5 rich text editor component for Svelte.js 3.
+CKEditor 5 rich text editor component for Svelte.js 3.

No alert changes

Improved metrics

Total package byte prevSize

29744

5.57%

Number of package files

6

20%

Lines of code

787

6.06%

No dependency changes