Merge branch 'version-4' into custom-elements-rework

pull/8457/head
Simon Holthausen 3 years ago
commit 149c10010b

@ -6,47 +6,12 @@ on:
permissions:
contents: read # to fetch code (actions/checkout)
jobs:
Setup:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macOS-latest]
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- run: npm install
env:
SKIP_PREPARE: true
- run: npm run build
env:
PUBLISH: true
- name: Upload build assets
id: upload-artifact
uses: actions/upload-artifact@v3
with:
name: build-assets
path: |
index.*
compiler.*
ssr.*
action/
animate/
easing/
internal/
motion/
store/
transition/
types/
Tests:
needs: Setup
runs-on: ${{ matrix.os }}
timeout-minutes: 15
strategy:
matrix:
node-version: [8, 10, 12, 14, 16, 18]
node-version: [14, 16, 18]
os: [ubuntu-latest, windows-latest, macOS-latest]
steps:
- uses: actions/checkout@v3
@ -54,24 +19,7 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
cache: npm
- name: Download build assets
uses: actions/download-artifact@v3
id: download-artifact
with:
name: build-assets
- name: Get Node version ${{ runner.os }}
run: echo "NODE_VERSION=`node --version`" >> $GITHUB_ENV
if: runner.os != 'Windows'
- name: Get Node version ${{ runner.os }}
run: |
chcp 65001
echo ("NODE_VERSION=$(node --version)") >> $env:GITHUB_ENV
if: runner.os == 'Windows'
- run: npm install --save-dev puppeteer@13
if: ${{ runner.os == 'Linux' && (!startsWith(env.NODE_VERSION, 'v8.') && !startsWith(env.NODE_VERSION, 'v10.')) }}
- run: npm install
env:
SKIP_PREPARE: true
- run: npm run test:integration
env:
CI: true

@ -1,5 +1,14 @@
# Svelte changelog
## Unreleased (4.0)
* Minimum supported Node version is now Node 14
## Unreleased (3.0)
* Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
* Add support for resize observer bindings (`<div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>`) ([#8022](https://github.com/sveltejs/svelte/pull/8022))
## 3.58.0
* Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))

@ -546,6 +546,11 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
*/
'bind:innerText'?: string | undefined | null;
readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
readonly 'bind:contentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
readonly 'bind:borderBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
readonly 'bind:devicePixelContentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
// SvelteKit
'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;

@ -1,23 +0,0 @@
// This script generates the TypeScript definitions
const { execSync } = require('child_process');
const { readFileSync, writeFileSync } = require('fs');
execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly', { stdio: 'inherit' });
// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
function modify(path, modifyFn) {
const content = readFileSync(path, 'utf8');
writeFileSync(path, modifyFn(content));
}
modify(
'types/runtime/index.d.ts',
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
);
modify(
'types/compiler/index.d.ts',
content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
);

5855
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -86,7 +86,7 @@
}
},
"engines": {
"node": ">= 8"
"node": ">= 14"
},
"types": "types/runtime/index.d.ts",
"scripts": {
@ -95,11 +95,11 @@
"test:unit": "mocha --config .mocharc.unit.js --exit",
"quicktest": "mocha --exit",
"build": "rollup -c && npm run tsd",
"prepare": "node scripts/skip_in_ci.js npm run build",
"prepare": "npm run build",
"dev": "rollup -cw",
"posttest": "agadoo internal/index.mjs",
"prepublishOnly": "node check_publish_env.js && npm run lint && npm run build && npm test",
"tsd": "node ./generate-type-definitions.js",
"tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
"lint": "eslint \"{src,test}/**/*.{ts,js}\" --cache"
},
"repository": {
@ -119,45 +119,45 @@
},
"homepage": "https://svelte.dev",
"devDependencies": {
"@ampproject/remapping": "^0.3.0",
"@jridgewell/sourcemap-codec": "^1.4.14",
"@rollup/plugin-commonjs": "^11.0.0",
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^11.2.1",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-sucrase": "^3.1.0",
"@rollup/plugin-typescript": "^2.0.1",
"@rollup/plugin-sucrase": "^5.0.1",
"@rollup/plugin-typescript": "^11.1.0",
"@rollup/plugin-virtual": "^3.0.1",
"@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
"@types/aria-query": "^5.0.1",
"@types/mocha": "^7.0.0",
"@types/node": "^8.10.53",
"@typescript-eslint/eslint-plugin": "^5.29.0",
"@typescript-eslint/parser": "^5.29.0",
"acorn": "^8.8.1",
"@types/mocha": "^10.0.1",
"@types/node": "^14.14.31",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"acorn": "^8.8.2",
"agadoo": "^3.0.0",
"aria-query": "^5.1.3",
"axobject-query": "^3.1.1",
"code-red": "^1.0.0",
"css-tree": "^2.3.1",
"eslint": "^8.35.0",
"eslint-plugin-import": "^2.27.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-svelte3": "^4.0.0",
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"jsdom": "^15.2.1",
"jsdom": "^21.1.1",
"kleur": "^4.1.5",
"locate-character": "^2.0.5",
"magic-string": "^0.30.0",
"mocha": "^7.0.0",
"mocha": "^10.2.0",
"periscopic": "^3.1.0",
"puppeteer": "^2.0.0",
"rollup": "^1.27.14",
"puppeteer": "^19.8.5",
"rollup": "^3.20.2",
"source-map": "^0.7.4",
"source-map-support": "^0.5.21",
"tiny-glob": "^0.2.9",
"tslib": "^2.5.0",
"typescript": "^3.7.5",
"typescript": "^5.0.4",
"util": "^0.12.5"
}
}

@ -1,24 +1,58 @@
import fs from 'fs';
import fs from 'node:fs';
import { createRequire } from 'node:module';
import replace from '@rollup/plugin-replace';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import sucrase from '@rollup/plugin-sucrase';
import typescript from '@rollup/plugin-typescript';
import pkg from './package.json';
const require = createRequire(import.meta.url);
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
const is_publish = !!process.env.PUBLISH;
const ts_plugin = is_publish
? typescript({
include: 'src/**',
typescript: require('typescript')
})
: sucrase({
transforms: ['typescript']
});
const external = id => id.startsWith('svelte/');
// The following external and path logic is necessary so that the bundled runtime pieces and the index file
// reference each other correctly instead of bundling their references to each other
/**
* Ensures that relative imports inside `src/runtime` like `./internal` and `../store` are externalized correctly
*/
const external = (id, parent_id) => {
const parent_segments = parent_id.replace(/\\/g, '/').split('/');
// TODO needs to be adjusted when we move to JS modules
if (parent_segments[parent_segments.length - 3] === 'runtime') {
return /\.\.\/\w+$/.test(id);
} else {
return id === './internal' && parent_segments[parent_segments.length - 2] === 'runtime';
}
}
/**
* Transforms externalized import paths like `../store` into correct relative imports with correct index file extension import
*/
const replace_relative_svelte_imports = (id, ending) => {
id = id.replace(/\\/g, '/');
// TODO needs to be adjusted when we move to JS modules
return /src\/runtime\/\w+$/.test(id) && `../${id.split('/').pop()}/${ending}`;
}
/**
* Transforms externalized `./internal` import path into correct relative import with correct index file extension import
*/
const replace_relative_internal_import = (id, ending) => {
id = id.replace(/\\/g, '/');
// TODO needs to be adjusted when we move to JS modules
return id.endsWith('src/runtime/internal') && `./internal/${ending}`;
}
fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
@ -30,12 +64,12 @@ export default [
{
file: `index.mjs`,
format: 'esm',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
paths: id => replace_relative_internal_import(id, 'index.mjs')
},
{
file: `index.js`,
format: 'cjs',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
paths: id => replace_relative_internal_import(id, 'index.js')
}
],
external,
@ -48,12 +82,12 @@ export default [
{
file: `ssr.mjs`,
format: 'esm',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
paths: id => replace_relative_internal_import(id, 'index.mjs')
},
{
file: `ssr.js`,
format: 'cjs',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
paths: id => replace_relative_internal_import(id, 'index.js')
}
],
external,
@ -68,12 +102,12 @@ export default [
{
file: `${dir}/index.mjs`,
format: 'esm',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
paths: id => replace_relative_svelte_imports(id, 'index.mjs')
},
{
file: `${dir}/index.js`,
format: 'cjs',
paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
paths: id => replace_relative_svelte_imports(id, 'index.js')
}
],
external,
@ -83,7 +117,7 @@ export default [
}),
ts_plugin,
{
writeBundle(bundle) {
writeBundle(_options, bundle) {
if (dir === 'internal') {
const mod = bundle['index.mjs'];
if (mod) {

@ -1,7 +0,0 @@
if (process.env.SKIP_PREPARE) {
console.log('Skipped "prepare" script');
} else {
const { execSync } = require("child_process");
const command = process.argv.slice(2).join(" ");
execSync(command, { stdio: "inherit" });
}

@ -286,7 +286,7 @@ You cannot `export default`, since the default export is the component itself.
<script context="module">
let totalComponents = 0;
// this allows an importer to do e.g.
// the export keyword allows this function to imported with e.g.
// `import Example, { alertTotal } from './Example.svelte'`
export function alertTotal() {
alert(totalComponents);

@ -1,3 +1,4 @@
import type { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping';
import { walk } from 'estree-walker';
import { getLocator } from 'locate-character';
import Stats from '../Stats';
@ -32,7 +33,6 @@ import { print, b } from 'code-red';
import { is_reserved_keyword } from './utils/reserved_keywords';
import { apply_preprocessor_sourcemap } from '../utils/mapped_code';
import Element from './nodes/Element';
import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types/types';
import { clone } from '../utils/clone';
import compiler_warnings from './compiler_warnings';
import compiler_errors from './compiler_errors';

@ -3,7 +3,7 @@ import get_object from '../utils/get_object';
import Expression from './shared/Expression';
import Component from '../Component';
import TemplateScope from './shared/TemplateScope';
import { regex_dimensions } from '../../utils/patterns';
import { regex_dimensions, regex_box_size } from '../../utils/patterns';
import { Node as ESTreeNode } from 'estree';
import { TemplateNode } from '../../interfaces';
import Element from './Element';
@ -92,6 +92,7 @@ export default class Binding extends Node {
this.is_readonly =
regex_dimensions.test(this.name) ||
regex_box_size.test(this.name) ||
(isElement(parent) &&
((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
(parent.name === 'input' && type === 'file')) /* TODO others? */);

@ -12,7 +12,7 @@ import Text from './Text';
import { namespaces } from '../../utils/namespaces';
import map_children from './shared/map_children';
import { is_name_contenteditable, get_contenteditable_attr } from '../utils/contenteditable';
import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character, regex_box_size } from '../../utils/patterns';
import fuzzymatch from '../../utils/fuzzymatch';
import list from '../../utils/list';
import Let from './Let';
@ -1090,7 +1090,10 @@ export default class Element extends Node {
} else if (contenteditable && !contenteditable.is_static) {
return component.error(contenteditable, compiler_errors.dynamic_contenteditable_attribute);
}
} else if (name !== 'this') {
} else if (
name !== 'this' &&
!regex_box_size.test(name)
) {
return component.error(binding, compiler_errors.invalid_binding(binding.name));
}
});

@ -24,7 +24,7 @@ type Owner = INode;
const regex_contains_term_function_expression = /FunctionExpression/;
export default class Expression {
type: 'Expression' = 'Expression';
type: 'Expression' = 'Expression' as const;
component: Component;
owner: Owner;
node: Node;

@ -1,3 +1,4 @@
import type { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping';
import { b, x, p } from 'code-red';
import Component from '../Component';
import Renderer from './Renderer';
@ -8,7 +9,6 @@ import { invalidate } from './invalidate';
import Block from './Block';
import { ImportDeclaration, ClassDeclaration, Node, Statement, ObjectExpression, Expression } from 'estree';
import { apply_preprocessor_sourcemap } from '../../utils/mapped_code';
import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
import { flatten } from '../../utils/flatten';
import check_enable_sourcemap from '../utils/check_enable_sourcemap';
import { push_array } from '../../utils/push_array';

@ -11,6 +11,7 @@ import { Node, Identifier } from 'estree';
import add_to_set from '../../../utils/add_to_set';
import mark_each_block_bindings from '../shared/mark_each_block_bindings';
import handle_select_value_binding from './handle_select_value_binding';
import { regex_box_size } from '../../../../utils/patterns';
export default class BindingWrapper {
node: Binding;
@ -455,7 +456,12 @@ function get_value_from_dom(
return x`$$value`;
}
// <select bind:value='selected'>
// <div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>
if (regex_box_size.test(name)) {
return x`@ResizeObserverSingleton.entries.get(this)?.${name}`;
}
// <select bind:value='selected>
if (node.name === 'select') {
return node.get_static_attribute_value('multiple') === true ?
x`@select_multiple_value(this)` :

@ -12,7 +12,7 @@ import { namespaces } from '../../../../utils/namespaces';
import AttributeWrapper from './Attribute';
import StyleAttributeWrapper from './StyleAttribute';
import SpreadAttributeWrapper from './SpreadAttribute';
import { regex_dimensions, regex_starts_with_newline, regex_backslashes } from '../../../../utils/patterns';
import { regex_dimensions, regex_starts_with_newline, regex_backslashes, regex_border_box_size, regex_content_box_size, regex_device_pixel_content_box_size, regex_content_rect } from '../../../../utils/patterns';
import Binding from './Binding';
import add_to_set from '../../../utils/add_to_set';
import { add_event_handler } from '../shared/add_event_handlers';
@ -64,11 +64,29 @@ const events = [
filter: (node: Element, _name: string) =>
node.name === 'input' && node.get_static_attribute_value('type') === 'range'
},
// resize events
{
event_names: ['elementresize'],
filter: (_node: Element, name: string) =>
regex_dimensions.test(name)
},
{
event_names: ['elementresizecontentbox'],
filter: (_node: Element, name: string) =>
regex_content_rect.test(name) ?? regex_content_box_size.test(name)
},
{
event_names: ['elementresizeborderbox'],
filter: (_node: Element, name: string) =>
regex_border_box_size.test(name)
},
{
event_names: ['elementresizedevicepixelcontentbox'],
filter: (_node: Element, name: string) =>
regex_device_pixel_content_box_size.test(name)
},
// media events
{
event_names: ['timeupdate'],
@ -747,14 +765,33 @@ export default class ElementWrapper extends Wrapper {
`);
binding_group.events.forEach(name => {
if (name === 'elementresize') {
// special case
if (['elementresize', 'elementresizecontentbox', 'elementresizeborderbox', 'elementresizedevicepixelcontentbox'].indexOf(name) !== -1) {
const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
block.add_variable(resize_listener);
// Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
switch (name) {
case 'elementresize':
block.chunks.mount.push(
b`${resize_listener} = @add_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizecontentbox':
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizeborderbox':
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizedevicepixelcontentbox':
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
}
block.chunks.destroy.push(
b`${resize_listener}();`

@ -2,6 +2,6 @@ export { default as compile } from './compile/index';
export { default as parse } from './parse/index';
export { default as preprocess } from './preprocess/index';
export { walk } from 'estree-walker';
export type { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from './interfaces';
export const VERSION = '__VERSION__';
// additional exports added through generate-type-definitions.js

@ -1,4 +1,4 @@
import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
import type { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping';
import { getLocator } from 'locate-character';
import { MappedCode, SourceLocation, parse_attached_sourcemap, sourcemap_add_offset, combine_sourcemaps } from '../utils/mapped_code';
import { decode_map } from './decode_sourcemap';
@ -57,7 +57,7 @@ class PreprocessResult implements Source {
to_processed(): Processed {
// Combine all the source maps for each preprocessor function into one
const map: RawSourceMap = combine_sourcemaps(this.file_basename, this.sourcemap_list);
const map = combine_sourcemaps(this.file_basename, this.sourcemap_list);
return {
// TODO return separated output, in future version where svelte.compile supports it:

@ -1,4 +1,4 @@
import { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping/dist/types/types';
import type { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping';
import remapping from '@ampproject/remapping';
import { SourceMap } from 'magic-string';
import { Source, Processed } from '../preprocess/types';
@ -216,11 +216,11 @@ export class MappedCode {
export function combine_sourcemaps(
filename: string,
sourcemap_list: Array<DecodedSourceMap | RawSourceMap>
): RawSourceMap {
) {
if (sourcemap_list.length == 0) return null;
let map_idx = 1;
const map: RawSourceMap =
const map =
sourcemap_list.slice(0, -1)
.find(m => m.sources.length !== 1) === undefined

@ -4,7 +4,7 @@ export const regex_starts_with_whitespace = /^\s/;
export const regex_starts_with_whitespaces = /^[ \t\r\n]*/;
export const regex_ends_with_whitespace = /\s$/;
export const regex_ends_with_whitespaces = /[ \t\r\n]*$/;
export const regex_only_whitespaces = /^\s+$/;
export const regex_only_whitespaces = /^[ \t\n\r\f]+$/;
export const regex_whitespace_characters = /\s/g;
export const regex_non_whitespace_character = /\S/;
@ -22,3 +22,9 @@ export const regex_ends_with_underscore = /_$/;
export const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
export const regex_dimensions = /^(?:offset|client)(?:Width|Height)$/;
export const regex_content_rect = /^(?:contentRect)$/;
export const regex_content_box_size = /^(?:contentBoxSize)$/;
export const regex_border_box_size = /^(?:borderBoxSize)$/;
export const regex_device_pixel_content_box_size = /^(?:devicePixelContentBoxSize)$/;
export const regex_box_size = /^(?:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize)$/;

@ -1,5 +1,5 @@
import { cubicOut } from 'svelte/easing';
import { is_function } from 'svelte/internal';
import { cubicOut } from '../easing';
import { is_function } from '../internal';
// todo: same as Transition, should it be shared?
export interface AnimationConfig {

@ -3,7 +3,7 @@ Adapted from https://github.com/mattdesl
Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
*/
export { identity as linear } from 'svelte/internal';
export { identity as linear } from '../internal';
export function backInOut(t: number) {
const s = 1.70158 * 1.525;

@ -13,5 +13,5 @@ export {
createEventDispatcher,
SvelteComponentDev as SvelteComponent,
SvelteComponentTyped
// additional exports added through generate-type-definitions.js
} from 'svelte/internal';
} from './internal';
export type { ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents } from './internal';

@ -0,0 +1,69 @@
import { globals } from './globals';
/**
* Resize observer singleton.
* One listener per element only!
* https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
*/
export class ResizeObserverSingleton {
constructor(readonly options?: ResizeObserverOptions) {}
observe(element: Element, listener: Listener) {
this._listeners.set(element, listener);
this._getObserver().observe(element, this.options);
return () => {
this._listeners.delete(element);
this._observer.unobserve(element); // this line can probably be removed
};
}
private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globals ? new WeakMap() : undefined;
private _observer?: ResizeObserver;
private _getObserver() {
return this._observer ?? (this._observer = new ResizeObserver((entries) => {
for (const entry of entries) {
(ResizeObserverSingleton as any).entries.set(entry.target, entry);
this._listeners.get(entry.target)?.(entry);
}
}));
}
}
// Needs to be written like this to pass the tree-shake-test
(ResizeObserverSingleton as any).entries = 'WeakMap' in globals ? new WeakMap() : undefined;
type Listener = (entry: ResizeObserverEntry)=>any;
// TODO: Remove this
interface ResizeObserverSize {
readonly blockSize: number;
readonly inlineSize: number;
}
interface ResizeObserverEntry {
readonly borderBoxSize: readonly ResizeObserverSize[];
readonly contentBoxSize: readonly ResizeObserverSize[];
readonly contentRect: DOMRectReadOnly;
readonly devicePixelContentBoxSize: readonly ResizeObserverSize[];
readonly target: Element;
}
type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
interface ResizeObserverOptions {
box?: ResizeObserverBoxOptions;
}
interface ResizeObserver {
disconnect(): void;
observe(target: Element, options?: ResizeObserverOptions): void;
unobserve(target: Element): void;
}
interface ResizeObserverCallback {
(entries: ResizeObserverEntry[], observer: ResizeObserver): void;
}
declare let ResizeObserver: {
prototype: ResizeObserver;
new(callback: ResizeObserverCallback): ResizeObserver;
};

@ -1,3 +1,4 @@
import { ResizeObserverSingleton } from './ResizeObserverSingleton';
import { contenteditable_truthy_values, has_prop } from './utils';
// Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
@ -306,6 +307,15 @@ export function attr(node: Element, attribute: string, value?: string) {
else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
}
/**
* List of attributes that should always be set through the attr method,
* because updating them through the property setter doesn't work reliably.
* In the example of `width`/`height`, the problem is that the setter only
* accepts numeric values, but the attribute can also be set to a string like `50%`.
* If this list becomes too big, rethink this approach.
*/
const always_set_through_set_attribute = ['width', 'height'];
export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
// @ts-ignore
const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@ -316,7 +326,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
node.style.cssText = attributes[key];
} else if (key === '__value') {
(node as any).value = node[key] = attributes[key];
} else if (descriptors[key] && descriptors[key].set) {
} else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) {
node[key] = attributes[key];
} else {
attr(node, key, attributes[key]);
@ -689,7 +699,7 @@ export function is_crossorigin() {
return crossorigin;
}
export function add_resize_listener(node: HTMLElement, fn: () => void) {
export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) {
const computed_style = getComputedStyle(node);
if (computed_style.position === 'static') {
@ -737,6 +747,11 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
};
}
export const resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' });
export const resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' });
export const resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
export { ResizeObserverSingleton };
export function toggle_class(element, name, toggle) {
element.classList[toggle ? 'add' : 'remove'](name);
}

@ -376,8 +376,10 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
run(b: INTRO | OUTRO) {
if (is_function(config)) {
wait().then(() => {
const opts: TransitionOptions = { direction: b ? 'in' : 'out' };
// @ts-ignore
config = config(options);
config = config(opts);
go(b);
});
} else {

@ -1,4 +1,4 @@
import { Readable } from 'svelte/store';
import type { Readable } from '../store';
export function noop() {}

@ -1,5 +1,5 @@
import { Readable, writable } from 'svelte/store';
import { loop, now, Task } from 'svelte/internal';
import { Readable, writable } from '../store';
import { loop, now, Task } from '../internal';
import { is_date } from './utils';
interface TickContext<T> {

@ -1,6 +1,6 @@
import { Readable, writable } from 'svelte/store';
import { assign, loop, now, Task } from 'svelte/internal';
import { linear } from 'svelte/easing';
import { Readable, writable } from '../store';
import { assign, loop, now, Task } from '../internal';
import { linear } from '../easing';
import { is_date } from './utils';
function get_interpolator(a, b) {
@ -122,7 +122,7 @@ export function tweened<T>(value?: T, defaults: Options<T> = {}): Tweened<T> {
const elapsed = now - start;
if (elapsed > duration) {
if (elapsed > <number> duration) {
store.set(value = new_value);
return false;
}

@ -1,4 +1,4 @@
import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal';
import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from '../internal';
/** Callback to inform of a value updates. */
export type Subscriber<T> = (value: T) => void;

@ -1,5 +1,5 @@
import { cubicOut, cubicInOut, linear } from 'svelte/easing';
import { assign, split_css_unit, is_function } from 'svelte/internal';
import { cubicOut, cubicInOut, linear } from '../easing';
import { assign, split_css_unit, is_function } from '../internal';
export type EasingFunction = (t: number) => number;

@ -109,11 +109,11 @@ function cleanChildren(node) {
node.removeChild(child);
}
child.data = child.data.replace(/\s+/g, '\n');
child.data = child.data.replace(/[ \t\n\r\f]+/g, '\n');
if (previous && previous.nodeType === 3) {
previous.data += child.data;
previous.data = previous.data.replace(/\s+/g, '\n');
previous.data = previous.data.replace(/[ \t\n\r\f]+/g, '\n');
node.removeChild(child);
child = previous;
@ -130,13 +130,13 @@ function cleanChildren(node) {
// collapse whitespace
if (node.firstChild && node.firstChild.nodeType === 3) {
node.firstChild.data = node.firstChild.data.replace(/^\s+/, '');
if (!node.firstChild.data) node.removeChild(node.firstChild);
node.firstChild.data = node.firstChild.data.replace(/^[ \t\n\r\f]+/, '');
if (!node.firstChild.data.length) node.removeChild(node.firstChild);
}
if (node.lastChild && node.lastChild.nodeType === 3) {
node.lastChild.data = node.lastChild.data.replace(/\s+$/, '');
if (!node.lastChild.data) node.removeChild(node.lastChild);
node.lastChild.data = node.lastChild.data.replace(/[ \t\n\r\f]+$/, '');
if (!node.lastChild.data.length) node.removeChild(node.lastChild);
}
}
@ -145,7 +145,7 @@ export function normalizeHtml(window, html, preserveComments = false) {
const node = window.document.createElement('div');
node.innerHTML = html
.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
.replace(/>[\s\r\n]+</g, '><')
.replace(/>[ \t\n\r\f]+</g, '><')
.trim();
cleanChildren(node);
return node.innerHTML.replace(/<\/?noscript\/?>/g, '');

@ -1,8 +1,8 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
add_iframe_resize_listener,
add_render_callback,
add_resize_listener,
detach,
element,
init,
@ -23,7 +23,7 @@ function create_fragment(ctx) {
},
m(target, anchor) {
insert(target, div, anchor);
div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
div_resize_listener = add_iframe_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
},
p: noop,
i: noop,

@ -1,8 +1,8 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
add_iframe_resize_listener,
add_render_callback,
add_resize_listener,
detach,
element,
init,
@ -42,7 +42,7 @@ function create_fragment(ctx) {
},
m(target, anchor) {
insert(target, video, anchor);
video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
video_resize_listener = add_iframe_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
if (!mounted) {
dispose = [

@ -0,0 +1,11 @@
export default {
html: `
<div>&nbsp;</div>
<div>
<span>&nbsp;</span>
</div>
<div>&nbsp;</div>
`
};

@ -0,0 +1,13 @@
<script>
import Component from './Component.svelte'
</script>
<Component>&nbsp;</Component>
<Component>
<span>&nbsp;</span>
</Component>
<Component>
{@html "&nbsp;"}
</Component>

@ -0,0 +1,4 @@
export default {
// https://github.com/sveltejs/svelte/issues/6752
html: '<img height="100%" width="100%" alt="" />'
};

@ -0,0 +1 @@
<img height="100%" width="100%" alt="" {...$$restProps} />

@ -4,16 +4,19 @@ export default {
const div_in = target.querySelector('#in');
const div_out = target.querySelector('#out');
const div_both = target.querySelector('#both');
const div_bothin = target.querySelector('#both-in');
const div_bothout = target.querySelector('#both-out');
assert.equal(div_in.initial, 'in');
assert.equal(div_out.initial, 'out');
assert.equal(div_both.initial, 'both');
assert.equal(div_in.directions, 'in,in');
assert.equal(div_out.directions, 'out');
assert.equal(div_bothin.directions, 'both');
assert.equal(div_bothout.directions, 'both');
return Promise.resolve().then(() => {
assert.equal(div_in.later, 'in');
assert.equal(div_out.later, 'out');
assert.equal(div_both.later, 'both');
assert.equal(div_in.directions, 'in,in');
assert.equal(div_out.directions, 'out,out');
assert.equal(div_bothin.directions, 'both,in');
assert.equal(div_bothout.directions, 'both,out');
});
}
};

@ -2,10 +2,10 @@
export let visible;
function foo(node, _params, options) {
node.initial = options.direction;
node.directions = options.direction;
return (opts) => {
node.later = opts.direction;
node.directions += "," + opts.direction;
return {
duration: 10
@ -15,10 +15,11 @@
</script>
{#if visible}
<div id="both" transition:foo></div>
<div id="in" in:foo></div>
<div id="both-in" transition:foo />
<div id="in" in:foo />
{/if}
{#if !visible}
<div id="out" out:foo></div>
<div id="out" out:foo />
<div id="both-out" transition:foo={{ duration: 500 }} />
{/if}

@ -1,12 +1,12 @@
{
"include": [],
"include": ["src/**/*"],
"compilerOptions": {
"rootDir": "src",
// target node v8+ (https://node.green/)
// the only missing feature is Array.prototype.values
"lib": ["es2017"],
"lib": ["es2017", "DOM", "DOM.Iterable"],
"target": "es2017",
"declaration": true,

Loading…
Cancel
Save