rollback svelte/environment

.eslintignore

@@ -10,7 +10,6 @@ internal_exports.ts
 # output files
 animate/*.js
 easing/*.js
-environment/*.js
 internal/*.js
 interpolate/*.js
 motion/*.js

.gitignore

@@ -9,7 +9,6 @@ node_modules
 
 /animate
 /easing
-/environment
 /internal
 /interpolate
 /motion

environment/index.d.ts

@@ -0,0 +1 @@
+export * from '../types/runtime/environment/index';

environment/index.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function noop() {}
+const is_browser = typeof window !== 'undefined';
+const is_iframe = is_browser && window.self !== window.top;
+const is_cors =
+	is_iframe &&
+	/*#__PURE__*/ (() => {
+		try {
+			if (window.parent) void window.parent.document;
+			return false;
+		} catch (error) {
+			return true;
+		}
+	})();
+const has_Symbol = typeof Symbol === 'function';
+/* eslint-disable no-var */
+
+const globals = is_browser ? window : typeof globalThis !== 'undefined' ? globalThis : global;
+const resolved_promise = Promise.resolve();
+
+exports.now = is_browser ? window.performance.now.bind(window.performance) : Date.now.bind(Date);
+exports.raf = is_browser ? requestAnimationFrame : noop;
+exports.framerate = 1000 / 60;
+
+/* tests only */
+const set_now = (v) => void (exports.now = v);
+const set_raf = (fn) => void (exports.raf = fn);
+const set_framerate = (v) => void (exports.framerate = v);
+
+exports.globals = globals;
+exports.has_Symbol = has_Symbol;
+exports.is_browser = is_browser;
+exports.is_cors = is_cors;
+exports.is_iframe = is_iframe;
+exports.noop = noop;
+exports.resolved_promise = resolved_promise;
+exports.set_framerate = set_framerate;
+exports.set_now = set_now;
+exports.set_raf = set_raf;

environment/index.mjs

@@ -0,0 +1,29 @@
+function noop() {}
+const is_browser = typeof window !== 'undefined';
+const is_iframe = is_browser && window.self !== window.top;
+const is_cors =
+	is_iframe &&
+	/*#__PURE__*/ (() => {
+		try {
+			if (window.parent) void window.parent.document;
+			return false;
+		} catch (error) {
+			return true;
+		}
+	})();
+const has_Symbol = typeof Symbol === 'function';
+/* eslint-disable no-var */
+
+const globals = is_browser ? window : typeof globalThis !== 'undefined' ? globalThis : global;
+const resolved_promise = Promise.resolve();
+
+let now = is_browser ? window.performance.now.bind(window.performance) : Date.now.bind(Date);
+let raf = is_browser ? requestAnimationFrame : noop;
+let framerate = 1000 / 60;
+
+/* tests only */
+const set_now = (v) => void (now = v);
+const set_raf = (fn) => void (raf = fn);
+const set_framerate = (v) => void (framerate = v);
+
+export { framerate, globals, has_Symbol, is_browser, is_cors, is_iframe, noop, now, raf, resolved_promise, set_framerate, set_now, set_raf };

environment/package.json

@@ -0,0 +1,5 @@
+{
+										"main": "./index",
+										"module": "./index.mjs",
+										"types": "./index.d.ts"
+									}

package.json

@@ -8,7 +8,6 @@
 		"animate",
 		"dev",
 		"easing",
-		"environment",
 		"internal",
 		"interpolate",
 		"motion",

site/content/examples/08-motion/01-spring/App.svelte

@@ -1,184 +1,156 @@
 <script>
-  import { spring } from "svelte/motion";
+	import { spring } from 'svelte/motion';
-  import { framerate } from "svelte/environment";
+	import { derived } from 'svelte/store';
-  import { derived } from "svelte/store";
 
-  const s = spring(50);
+	let framerate = 16.666;
-  let prev_time = now();
+	requestAnimationFrame((a) => {
-  let prev_value = 50;
+		requestAnimationFrame((b) => {
-  const velocity = derived(
+			framerate = b - a;
-    s,
+		});
-    (v) =>
+	});
-      (-prev_value + (prev_value = v)) / (-prev_time + (prev_time = now())),
+	const s = spring(50);
-    0.0
+	let prev_time = now();
-  );
+	let prev_value = 50;
-  let l_time;
+	const velocity = derived(s, (v) => (-prev_value + (prev_value = v)) / (-prev_time + (prev_time = now())), 0.0);
-  $: canvas && Draw($velocity, $s);
+	let l_time;
-  let { mass, stiffness, damping, soft } = s;
+	$: canvas && Draw($velocity, $s);
-  $: s.soft = soft;
+	let { mass, stiffness, damping, soft } = s;
-  $: s.mass = mass;
+	$: s.soft = soft;
-  $: s.stiffness = stiffness;
+	$: s.mass = mass;
-  $: s.damping = damping;
+	$: s.stiffness = stiffness;
-  let solver;
+	$: s.damping = damping;
+	let solver;
 
-  function solve_spring(target, prev_velocity) {
+	function solve_spring(target, prev_velocity) {
-    const target_ = target;
+		const target_ = target;
-    const delta = target - $s;
+		const delta = target - $s;
-    if (soft || 1 <= damping / (2.0 * Math.sqrt(stiffness * mass))) {
+		if (soft || 1 <= damping / (2.0 * Math.sqrt(stiffness * mass))) {
-      const angular_frequency = -Math.sqrt(stiffness / mass);
+			const angular_frequency = -Math.sqrt(stiffness / mass);
-      solver = (t) =>
+			solver = (t) =>
-        target_ -
+				target_ - (delta + t * (-angular_frequency * delta - prev_velocity)) * Math.exp(t * angular_frequency);
-        (delta + t * (-angular_frequency * delta - prev_velocity)) *
+		} else {
-          Math.exp(t * angular_frequency);
+			const damping_frequency = Math.sqrt(4.0 * mass * stiffness - damping ** 2);
-    } else {
+			const leftover = (damping * delta - 2.0 * mass * prev_velocity) / damping_frequency;
-      const damping_frequency = Math.sqrt(
+			const dfm = (0.5 * damping_frequency) / mass;
-        4.0 * mass * stiffness - damping ** 2
+			const dm = -(0.5 * damping) / mass;
-      );
+			let f = 0.0;
-      const leftover =
+			solver = (t) => target_ - (Math.cos((f = t * dfm)) * delta + Math.sin(f) * leftover) * Math.exp(t * dm);
-        (damping * delta - 2.0 * mass * prev_velocity) / damping_frequency;
+		}
-      const dfm = (0.5 * damping_frequency) / mass;
+		reset_time = now();
-      const dm = -(0.5 * damping) / mass;
+		s.set((target__ = target));
-      let f = 0.0;
+	}
-      solver = (t) =>
+	let target__ = 50;
-        target_ -
+	let canvas;
-        (Math.cos((f = t * dfm)) * delta + Math.sin(f) * leftover) *
+	const start_time = now();
-          Math.exp(t * dm);
+	let reset_time = start_time;
-    }
+	const canvas_history = [];
-    reset_time = now();
+	let max_x, min_x, max_y, min_y, canvas_width, canvas_height;
-    s.set((target__ = target));
+	let step, length;
-  }
+	let last_index;
-  let target__ = 50;
+	let ctx;
-  let canvas;
+	const XC = (x) => ((x - min_x) / (max_x - min_x)) * canvas_width;
-  const start_time = now();
+	const YC = (y) => canvas_height - ((y - min_y) / (max_y - min_y)) * canvas_height;
-  let reset_time = start_time;
+	const get_index = (i = 0) => (i + Math.floor((prev_time - start_time) / framerate)) % length;
-  const canvas_history = [];
+	function Draw() {
-  let max_x, min_x, max_y, min_y, canvas_width, canvas_height;
+		if (!step) {
-  let step, length;
+			max_y = canvas_height / 2;
-  let last_index;
+			min_y = -canvas_height / 2;
-  let ctx;
+			max_x = canvas_width / 1000;
-  const XC = (x) => ((x - min_x) / (max_x - min_x)) * canvas_width;
+			min_x = -max_x;
-  const YC = (y) =>
+			step = framerate / 1000; //framerate / canvas_width;
-    canvas_height - ((y - min_y) / (max_y - min_y)) * canvas_height;
+			length = Math.floor(max_x / step);
-  const get_index = (i = 0) =>
+			canvas_history.length = length;
-    (i + Math.floor((prev_time - start_time) / framerate)) % length;
+			canvas_history.fill(0);
-  function Draw() {
+			ctx = canvas.getContext('2d');
-    if (!step) {
+		}
-      max_y = canvas_height / 2;
+		ctx.lineWidth = 12;
-      min_y = -canvas_height / 2;
+		let offset = (prev_time - reset_time) / 1000;
-      max_x = canvas_width / 1000;
+		const start_index = get_index(0);
-      min_x = -max_x;
+		if (last_index === (last_index = start_index) || !solver) return;
-      step = framerate / 1000; //framerate / canvas_width;
+		ctx.clearRect(0, 0, canvas_width, canvas_height);
-      length = Math.floor(max_x / step);
+		ctx.beginPath();
-      canvas_history.length = length;
+		let x = min_x,
-      canvas_history.fill(0);
+			y = 0,
-      ctx = canvas.getContext("2d");
+			i = start_index + 1;
-    }
+		ctx.moveTo(XC(x), YC(y));
-    ctx.lineWidth = 12;
+		for (x += step; i <= length; i++) ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
-    let offset = (prev_time - reset_time) / 1000;
+		for (i = 0; i < start_index; i++) ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
-    const start_index = get_index(0);
+		ctx.lineTo(XC(x), YC((canvas_history[start_index] = canvas_height / 2 - prev_value)));
-    if (last_index === (last_index = start_index) || !solver) return;
+		if (Math.abs(prev_value - solver(offset)) > 20) {
-    ctx.clearRect(0, 0, canvas_width, canvas_height);
+			solve_spring(target__, $velocity);
-    ctx.beginPath();
+			offset = 0;
-    let x = min_x,
+		}
-      y = 0,
+		x = 0;
-      i = start_index + 1;
+		while (x <= max_x) ctx.lineTo(XC((x += step)), canvas_height / 2 - YC(solver(x + step + offset)));
-    ctx.moveTo(XC(x), YC(y));
+		ctx.stroke();
-    for (x += step; i <= length; i++)
+	}
-      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
-    for (i = 0; i < start_index; i++)
-      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
-    ctx.lineTo(
-      XC(x),
-      YC((canvas_history[start_index] = canvas_height / 2 - prev_value))
-    );
-    if (Math.abs(prev_value - solver(offset)) > 20) {
-      solve_spring(target__, $velocity);
-      offset = 0;
-    }
-    x = 0;
-    while (x <= max_x)
-      ctx.lineTo(
-        XC((x += step)),
-        canvas_height / 2 - YC(solver(x + step + offset))
-      );
-    ctx.stroke();
-  }
 </script>
 
 <style>
-  :global(body) {
+	:global(body) {
-    width: 100vw;
+		width: 100vw;
-    height: 100vh;
+		height: 100vh;
-    overflow: hidden;
+		overflow: hidden;
-  }
+	}
-  svg {
+	svg {
-    width: 100vw;
+		width: 100vw;
-    height: 100vh;
+		height: 100vh;
-  }
+	}
-  circle {
+	circle {
-    fill: tomato;
+		fill: tomato;
-  }
+	}
-  canvas {
+	canvas {
-    width: 100vw;
+		width: 100vw;
-    height: 100vh;
+		height: 100vh;
-    position: absolute;
+		position: absolute;
-    left: 0;
+		left: 0;
-    top: 0;
+		top: 0;
-    z-index: -1;
+		z-index: -1;
-  }
+	}
 </style>
 
 <svelte:window
-  on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
+	on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
-  bind:innerWidth={canvas_width}
+	bind:innerWidth={canvas_width}
-  bind:innerHeight={canvas_height} />
+	bind:innerHeight={canvas_height} />
 <div style="position: absolute; right: 1em;">
-  <label>
+	<label>
-    <h3>velocity</h3>
+		<h3>velocity</h3>
-    <progress
+		<progress value={!Number.isNaN($velocity) && Number.isFinite($velocity) && $velocity + 10} min={0} max={20} />
-      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && $velocity + 10}
+	</label>
-      min={0}
+	<label>
-      max={20} />
+		<h3>speed</h3>
-  </label>
+		<progress value={!Number.isNaN($velocity) && Number.isFinite($velocity) && Math.abs($velocity)} min={0} max={20} />
-  <label>
+	</label>
-    <h3>speed</h3>
+	<label>
-    <progress
+		<h3>y {$s.toFixed(0)}</h3>
-      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && Math.abs($velocity)}
+		<progress value={!Number.isNaN($s) && $s} min={0} max={1000} />
-      min={0}
+	</label>
-      max={20} />
+	<label>
-  </label>
+		<h3>target {target__}</h3>
-  <label>
+		<progress value={!Number.isNaN(target__) && target__} min={0} max={1000} />
-    <h3>y {$s.toFixed(0)}</h3>
+	</label>
-    <progress value={!Number.isNaN($s) && $s} min={0} max={1000} />
+	<label>
-  </label>
+		<h3>stiffness ({stiffness})</h3>
-  <label>
+		<input bind:value={stiffness} type="range" min="10" max="200" step="0.01" />
-    <h3>target {target__}</h3>
+	</label>
-    <progress value={!Number.isNaN(target__) && target__} min={0} max={1000} />
-  </label>
-  <label>
-    <h3>stiffness ({stiffness})</h3>
-    <input bind:value={stiffness} type="range" min="10" max="200" step="0.01" />
-  </label>
 
-  <label>
+	<label>
-    <h3>damping ({damping})</h3>
+		<h3>damping ({damping})</h3>
-    <input bind:value={damping} type="range" min="0.1" max="20" step="0.01" />
+		<input bind:value={damping} type="range" min="0.1" max="20" step="0.01" />
-  </label>
+	</label>
-  <label>
+	<label>
-    <h3>mass ({mass})</h3>
+		<h3>mass ({mass})</h3>
-    <input bind:value={mass} type="range" min="0.1" max="20" step="0.01" />
+		<input bind:value={mass} type="range" min="0.1" max="20" step="0.01" />
-  </label>
+	</label>
-  <label>
+	<label>
-    <h3>
+		<h3>
-      soft
+			soft
-      <input bind:checked={soft} type="checkbox" />
+			<input bind:checked={soft} type="checkbox" />
-    </h3>
+		</h3>
-  </label>
+	</label>
 </div>
 <svg>
-  <circle
+	<circle cx={-15 + canvas_width / 2} cy={$s} r={30} />
-    cx={-15+canvas_width / 2}
-    cy={$s}
-    r={30} />
 </svg>
 <canvas bind:this={canvas} width={canvas_width} height={canvas_height} />

src/runtime/internal/Component.ts

@@ -2,7 +2,7 @@ import { add_render_callback, flush, schedule_update } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
 import { children, detach } from './dom';
 import { transition_in } from './transitions';
-import { noop } from 'svelte/environment';
+import { noop } from './environment';
 type binary = 0 | 1;
 export interface Fragment {
 	key: string | null;

src/runtime/internal/animations.ts

@@ -1,5 +1,5 @@
 import { run_transition } from './transitions';
-import { noop } from 'svelte/environment';
+import { noop } from './environment';
 
 export interface AnimationConfig {
 	delay?: number;

src/runtime/internal/dev.ts

@@ -1,5 +1,5 @@
 import { custom_event, append, insert, detach, listen, attr } from './dom';
-import { has_Symbol } from 'svelte/environment';
+import { has_Symbol } from './environment';
 import { SvelteComponent } from './Component';
 
 export function add_location_dev(element, file, line, column, char) {

src/runtime/internal/dom.ts

@@ -1,4 +1,4 @@
-import { is_cors } from 'svelte/environment';
+import { is_cors } from './environment';
 
 export function append(target: Node, node: Node) {
 	target.appendChild(node);

src/runtime/internal/index.ts

@@ -3,6 +3,7 @@ export * from './await_block';
 export * from './Component';
 export * from './dev';
 export * from './dom';
+export * from './environment';
 export * from './keyed_each';
 export * from './lifecycle';
 export * from './loop';
@@ -13,6 +14,3 @@ export * from './stores';
 // export * from './style_manager'
 export * from './transitions';
 export * from './utils';
-
-// todo: [create_module.ts line 24] allow compiler to import non internal
-export * from '../environment/index';

src/runtime/internal/loop.ts

@@ -1,4 +1,4 @@
-import { now, raf, framerate, noop } from 'svelte/environment';
+import { now, raf, framerate, noop } from './environment';
 type TaskCallback = (t: number) => boolean;
 type TaskCanceller = () => void;
 

src/runtime/internal/scheduler.ts

@@ -1,5 +1,5 @@
 import { set_current_component } from './lifecycle';
-import { resolved_promise, now } from 'svelte/environment';
+import { resolved_promise, now } from './environment';
 import { T$$ } from './Component';
 
 let update_scheduled = false;

src/runtime/internal/stores.ts

@@ -1,6 +1,6 @@
 import { safe_not_equal, subscribe } from './utils';
 import { onEachFrame, loop } from './loop';
-import { noop } from 'svelte/environment';
+import { noop } from './environment';
 type Setter<T> = (value: T) => void;
 type StopCallback = () => void;
 export type StartStopNotifier<T> = (set: Setter<T>) => StopCallback | void;

src/runtime/internal/style_manager.ts

@@ -1,4 +1,4 @@
-import { framerate } from 'svelte/environment';
+import { framerate } from './environment';
 
 let documents_uid = 0;
 let running_animations = 0;

src/runtime/internal/transitions.ts

@@ -1,7 +1,7 @@
 import { TransitionConfig } from '../transition';
 import { Fragment } from './Component';
 import { custom_event } from './dom';
-import { now, noop } from 'svelte/environment';
+import { now, noop } from './environment';
 import { setFrameTimeout, setTweenTimeout } from './loop';
 import { add_measure_callback } from './scheduler';
 import { animate_css } from './style_manager';

src/runtime/internal/utils.ts

@@ -1,4 +1,4 @@
-import { noop } from 'svelte/environment';
+import { noop } from './environment';
 
 export const is_promise = <T = any>(value: any): value is PromiseLike<T> =>
 	value && typeof value === 'object' && typeof value.then === 'function';

test/custom-elements/index.ts

@@ -59,7 +59,6 @@ describe('custom-elements', function () {
 		const solo = /\.solo$/.test(dir);
 		const skip = /\.skip$/.test(dir);
 		const internal = path.resolve('internal/index.mjs');
-		const environment = path.resolve('environment/index.mjs');
 		const index = path.resolve('index.mjs');
 		const warnings = [];
 
@@ -79,9 +78,6 @@ describe('custom-elements', function () {
 							if (importee === 'svelte') {
 								return index;
 							}
-							if (importee === 'svelte/environment' || importee === '../environment') {
-								return environment;
-							}
 						},
 
 						transform(code, id) {

test/runtime/index.ts

@@ -2,8 +2,7 @@ import { relative, resolve } from 'path';
 import { readFileSync, existsSync, unlinkSync, writeFileSync, readdirSync } from 'fs';
 import { rollup } from 'rollup';
 import virtual from '@rollup/plugin-virtual';
-import { clear_loops, flush, SvelteComponent } from '../../internal';
+import { clear_loops, flush, SvelteComponent,set_now, set_raf, set_framerate } from '../../internal';
-import { set_now, set_raf, set_framerate } from '../../environment';
 import { showOutput, loadConfig, loadSvelte, cleanRequireCache, env, setupHtmlEqual, mkdirp } from '../helpers';
 import { glob } from '../tiny-glob';
 import { assert } from '../test';
@@ -255,9 +254,6 @@ describe('runtime', () => {
 						if (importee.startsWith('svelte/')) {
 							return importee.replace('svelte', process.cwd()) + '/index.mjs';
 						}
-						if (importee === '../environment') {
-							return process.cwd() + '/environment/index.mjs';
-						}
 					},
 				},
 			],