sveltejs / svelte-extras Goto Github PK

Think you have host-to-address map created with Object.create(null):

const store = new Store({
  hostToAddress: Object.create(null)
});

Now, you store IPv address of a domain. If setDeep method accepts an array as a key path:

import { setDeep } from 'svelte-extras';
setDeep.call(store, ['hostToAddress', 'example.com'], '128.66.0.0');

So an array as a key path can include an arbitrary key, and so useful when a key is not sanitized or known to include .. I'd like to see this.

In sapper,

import {observe} from 'svelte-extras'

causes the error:
Can't import the named export 'observe' from non EcmaScript module (only default export is available)

This works:

import {observe} from 'svelte-extras/dist/svelte-extras.es.js'

Idea from @TehShrike on Gitter

Hi, probably I'm just dumb, but why the loop here?

The current API for observeMany is this:

this.observeMany(['x', 'y'], (newValues, oldValues) => {
        const x = newValues[0];
        const y = newValues[1];
});

But perhaps this would be better?

this.observeMany(['x', 'y'], (newValues, oldValues) => {
        const {x, y} = newValues;
});

now that it's been deprecated, we need a version of it here. we can also update observeDeep and observeMany to use onstate

I want to be able to do this:

component.tween('foo', 42, {
  duration: 800,
  easing: eases.cubicOut
}).then( () => {
  console.log( 'tada' );
});

Starting a tween should stop any existing tweens on the same key. I suspect setting a key should have the same effect, and probably the only way to do that is to monkey-patch the component when the tween method is first called.

A bug was introduced inspring somewhere between 1.51. and 1.6.0.

In 1.5.1 when you interrupt a spring with a new spring things are great. In 1.6.0 it discontinuously jumps to one of the two values in the object that is being updated before resuming the spring simulation properly with both values. In 1.6.0 the y value jumps to the new position while the x value works correctly. In 1.5.1 everything works fine. In 1.6.0 this is also intermittent, so the behavior is not always exhibited.

The REPL seems to be down right now, so I've attached a gif of the behavior and the code is pasted below.

<div
		 class='ball'
		 style='transform: translate({{coords[0]}}px,{{coords[1]}}px); pointer-events: none;'
></div>

<h3>Mouse over target</h3>
<div
	ref:target
	style="width: 500px; height: 200px; background: blue;margin: 80px;"
	on:mousemove="move(event)"
  on:mouseleave="leave(event)"
>
	
</div>

<style>
	:global(body) {
		padding: 0;
		overflow: hidden;
	}
	
	.ball {
		position: absolute;
		width: 2em;
		height: 2em;
		background-color: purple;
		border-radius: 50%;
		top: -1em;
		left: -1em;
	}
	
</style>

<script>
	import { spring } from '[email protected]';

	export default {
		data() {
			return {
				defaultTarget: [150, 150],
				coords: [0, 0]
			};
		},
		oncreate() {
			this.set({coords: this.get('defaultTarget')});
		},
		methods: {
			move(e) {
				this.spring('coords', [e.clientX, e.clientY], {
					stiffness: 0.3,
					damping: 0.7
				});
			},
			leave(e) {
				const defaultTarget = this.get('defaultTarget');
				this.spring('coords', [defaultTarget[0], defaultTarget[1]], {
					stiffness: 0.1,
					damping: 0.9
				});
			},
			spring
		}
	}
</script>

Problem
When using the setDeep method for keypaths that are not nested it does not work.

Example: https://svelte.technology/repl?version=1.29.3&gist=d100d0b76009d898406e21aa1406240f

One solution to the problem:

// If not a nested keypath
if ( keys[0] === undefined ) { 
  const data:any = {};
  data[ lastKey ] = value;
  this.set( data );
  return;
}

The fix above have been added with a PR: #4

This...

component.spring(x, 100, opts);

// later...
component.spring(x, 100, opts);

...doesn't quite work correctly — the second one should essentially be a no-op, but instead it resets the velocity to zero. It should set the target/stiffness/damping on the current spring but otherwise leave the existing spring intact.

Something seem to have changed in the svelte compiler that has caused this to no longer work. This also affects svelte-virtual-list as it depends on this repo. I am inclined to think the breakage happened in the compiler itself and not this repo, but it seem to affect code from this repo.

https://svelte.technology/repl?version=1.60.3&gist=66bb8372ed59124c3568c26a2b39dce2