diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8080a06767..1e0ce53864 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -59,6 +59,16 @@ jobs: 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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cb521f390..fd4ff5f7ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,22 @@ # Svelte changelog +## 3.55.1 (unreleased) + +* add missing `submitter` property to `on:submit` event type + +## 3.55.0 + +* Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649)) + +## 3.54.0 + +* Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) +* Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) +* Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) +* Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) +* Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) +* Fix escaping SSR'd values in `style:` directive ([#8085](https://github.com/sveltejs/svelte/issues/8085)) + ## 3.53.1 * Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6153ae25d9..01f8728cc0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,7 @@ There are many ways to contribute to Svelte, and many of them do not involve wri - Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues). - Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests). -- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request). +- If you find an issue you would like to fix, [open a pull request](#pull-requests). - Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page. - Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on. @@ -24,44 +24,43 @@ Contributions are very welcome. If you think you need help planning your contrib One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in. - Ask for more information if you believe the issue does not provide all the details required to solve it. -- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues. - Flag issues that are stale or that should be closed. - Ask for test plans and review code. -## Bugs +## Our process -We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). +### RFCs -If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. +If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. -If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) +### Roadmap -## Reporting new issues +When deciding where to contribute, you may wish to take a look at [our roadmap](https://svelte.dev/roadmap). The Svelte team generally works on a single major effort at a time. This has a couple benefits for us as maintainers. First, it allows us to focus and make noticeable progress in an area being proactive rather than reactive. Secondly, it allows us to handle related issues and PRs together. By batching issues and PRs together we’re able to ensure implementations and fixes holistically address the set of problems and use cases encountered by our users. -When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. +### Maintainer meetings -- **One issue, one bug:** Please report a single bug per issue. -- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. +The maintainers meet on the final Saturday of each month. While these meetings are not open publicly, we will report back by leaving a comment on each issue discussed. We will generally discuss items aligning with our roadmap, but major PRs needing discussion amongst the maintainers can be added to the agenda for the monthly maintainer’s meeting. However, we typically are only able to get to a couple of items that are not aligned with our current priority. -## RFCs +### Prioritization -If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. +We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFC, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch. -## Installation +## Bugs -1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. -1. After cloning the repository, run `npm install` in the root of the repository. -1. To start a development server, run `npm run dev`. +We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). -## Pull requests +If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. -### Your first pull request +If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) -So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at. +### Reporting new issues -Working on your first Pull Request? You can learn how from this free video series: +When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. + +- **One issue, one bug:** Please report a single bug per issue. +- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. -[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) +## Pull requests ### Proposing a change @@ -69,20 +68,19 @@ If you would like to request a new feature or enhancement but are not yet thinki If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue. -### Sending a pull request +Small pull requests are much easier to review and more likely to get merged. -Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. +### Installation -Please make sure the following is done when submitting a pull request: +1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. +1. After cloning the repository, run `npm install` in the root of the repository. +1. To start a development server, run `npm run dev`. -1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. -1. Describe your **test plan** in your pull request description. Make sure to test your changes. -1. Make sure your code lints (`npm run lint`). -1. Make sure your tests pass (`npm run test`). +### Creating a branch -All pull requests should be opened against the `master` branch. +Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. If you've never sent a GitHub pull request before, you can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). -#### Test plan +### Testing A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI. @@ -110,6 +108,25 @@ Test samples are kept in `/test/xxx/samples` folder. 1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`. 1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`) +### Style guide + +[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. + +#### Code conventions + +- `snake_case` for internal variable names and methods. +- `camelCase` for public variable names and methods. + +### Sending your pull request + +Please make sure the following is done when submitting a pull request: + +1. Describe your **test plan** in your pull request description. Make sure to test your changes. +1. Make sure your code lints (`npm run lint`). +1. Make sure your tests pass (`npm run test`). + +All pull requests should be opened against the `master` branch. Make sure the PR does only one thing, otherwise please split it. + #### Breaking changes When adding a new breaking change, follow this template in your pull request: @@ -123,19 +140,10 @@ When adding a new breaking change, follow this template in your pull request: - **Severity (number of people affected x effort)**: ``` -### What happens next? - -The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above. - -## Style guide - -[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. - -### Code conventions - -- `snake_case` for internal variable names and methods. -- `camelCase` for public variable names and methods. - ## License By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE). + +## Questions + +Feel free to ask in [#contributing](https://discord.com/channels/457912077277855764/750401468569354431) on [Discord](https://svelte.dev/chat) if you have questions about our process, how to proceed, etc. diff --git a/README.md b/README.md index 97e9ab65f3..11150f39b8 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,11 @@ Svelte is an MIT-licensed open source project with its ongoing development made Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly. +## Roadmap + +You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on. + + ## Development Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out! diff --git a/elements/index.d.ts b/elements/index.d.ts new file mode 100644 index 0000000000..4668d190f9 --- /dev/null +++ b/elements/index.d.ts @@ -0,0 +1,1581 @@ +// Type definitions for Svelte HTML, based on JSX React 18 typings +// Original Project/Authors: +// Type definitions for React 18.0 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana +// AssureSign +// Microsoft +// John Reilly +// Benoit Benezech +// Patricio Zavolinsky +// Eric Anderson +// Dovydas Navickas +// Josh Rutherford +// Guilherme Hübner +// Ferdy Budhidharma +// Johann Rakotoharisoa +// Olivier Pascal +// Martin Hochel +// Frank Li +// Jessica Franco +// Saransh Kataria +// Kanitkorn Sujautra +// Sebastian Silbermann +// Kyle Scully +// Cong Zhang +// Dimitri Mitropoulos +// JongChan Choi +// Victor Magalhães +// Dale Tan +// Priyanshu Rav +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined` + +type Booleanish = boolean | 'true' | 'false'; + +// +// Event Handler Types +// ---------------------------------------------------------------------- + +type EventHandler = +(event: E & { currentTarget: EventTarget & T}) => any; + +export type ClipboardEventHandler = EventHandler; +export type CompositionEventHandler = EventHandler; +export type DragEventHandler = EventHandler; +export type FocusEventHandler = EventHandler; +export type FormEventHandler = EventHandler; +export type ChangeEventHandler = EventHandler; +export type KeyboardEventHandler = EventHandler; +export type MouseEventHandler = EventHandler; +export type TouchEventHandler = EventHandler; +export type PointerEventHandler = EventHandler; +export type UIEventHandler = EventHandler; +export type WheelEventHandler = EventHandler; +export type AnimationEventHandler = EventHandler; +export type TransitionEventHandler = EventHandler; +export type MessageEventHandler = EventHandler; + +// +// DOM Attributes +// ---------------------------------------------------------------------- + +export interface DOMAttributes { + // Clipboard Events + 'on:copy'?: ClipboardEventHandler | undefined | null; + 'on:cut'?: ClipboardEventHandler | undefined | null; + 'on:paste'?: ClipboardEventHandler | undefined | null; + + // Composition Events + 'on:compositionend'?: CompositionEventHandler | undefined | null; + 'on:compositionstart'?: CompositionEventHandler | undefined | null; + 'on:compositionupdate'?: CompositionEventHandler | undefined | null; + + // Focus Events + 'on:focus'?: FocusEventHandler | undefined | null; + 'on:focusin'?: FocusEventHandler | undefined | null; + 'on:focusout'?: FocusEventHandler | undefined | null; + 'on:blur'?: FocusEventHandler | undefined | null; + + // Form Events + 'on:change'?: FormEventHandler | undefined | null; + 'on:beforeinput'?: EventHandler | undefined | null; + 'on:input'?: FormEventHandler | undefined | null; + 'on:reset'?: FormEventHandler | undefined | null; + 'on:submit'?: EventHandler | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4 + 'on:invalid'?: EventHandler | undefined | null; + 'on:formdata'?: EventHandler | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4 + + // Image Events + 'on:load'?: EventHandler | undefined | null; + 'on:error'?: EventHandler | undefined | null; // also a Media Event + + // Detail Events + 'on:toggle'?: EventHandler | undefined | null; + + // Keyboard Events + 'on:keydown'?: KeyboardEventHandler | undefined | null; + 'on:keypress'?: KeyboardEventHandler | undefined | null; + 'on:keyup'?: KeyboardEventHandler | undefined | null; + + // Media Events + 'on:abort'?: EventHandler | undefined | null; + 'on:canplay'?: EventHandler | undefined | null; + 'on:canplaythrough'?: EventHandler | undefined | null; + 'on:cuechange'?: EventHandler | undefined | null; + 'on:durationchange'?: EventHandler | undefined | null; + 'on:emptied'?: EventHandler | undefined | null; + 'on:encrypted'?: EventHandler | undefined | null; + 'on:ended'?: EventHandler | undefined | null; + 'on:loadeddata'?: EventHandler | undefined | null; + 'on:loadedmetadata'?: EventHandler | undefined | null; + 'on:loadstart'?: EventHandler | undefined | null; + 'on:pause'?: EventHandler | undefined | null; + 'on:play'?: EventHandler | undefined | null; + 'on:playing'?: EventHandler | undefined | null; + 'on:progress'?: EventHandler | undefined | null; + 'on:ratechange'?: EventHandler | undefined | null; + 'on:seeked'?: EventHandler | undefined | null; + 'on:seeking'?: EventHandler | undefined | null; + 'on:stalled'?: EventHandler | undefined | null; + 'on:suspend'?: EventHandler | undefined | null; + 'on:timeupdate'?: EventHandler | undefined | null; + 'on:volumechange'?: EventHandler | undefined | null; + 'on:waiting'?: EventHandler | undefined | null; + + // MouseEvents + 'on:auxclick'?: MouseEventHandler | undefined | null; + 'on:click'?: MouseEventHandler | undefined | null; + 'on:contextmenu'?: MouseEventHandler | undefined | null; + 'on:dblclick'?: MouseEventHandler | undefined | null; + 'on:drag'?: DragEventHandler | undefined | null; + 'on:dragend'?: DragEventHandler | undefined | null; + 'on:dragenter'?: DragEventHandler | undefined | null; + 'on:dragexit'?: DragEventHandler | undefined | null; + 'on:dragleave'?: DragEventHandler | undefined | null; + 'on:dragover'?: DragEventHandler | undefined | null; + 'on:dragstart'?: DragEventHandler | undefined | null; + 'on:drop'?: DragEventHandler | undefined | null; + 'on:mousedown'?: MouseEventHandler | undefined | null; + 'on:mouseenter'?: MouseEventHandler | undefined | null; + 'on:mouseleave'?: MouseEventHandler | undefined | null; + 'on:mousemove'?: MouseEventHandler | undefined | null; + 'on:mouseout'?: MouseEventHandler | undefined | null; + 'on:mouseover'?: MouseEventHandler | undefined | null; + 'on:mouseup'?: MouseEventHandler | undefined | null; + + // Selection Events + 'on:select'?: EventHandler | undefined | null; + 'on:selectionchange'?: EventHandler | undefined | null; + 'on:selectstart'?: EventHandler | undefined | null; + + // Touch Events + 'on:touchcancel'?: TouchEventHandler | undefined | null; + 'on:touchend'?: TouchEventHandler | undefined | null; + 'on:touchmove'?: TouchEventHandler | undefined | null; + 'on:touchstart'?: TouchEventHandler | undefined | null; + + // Pointer Events + 'on:gotpointercapture'?: PointerEventHandler | undefined | null; + 'on:pointercancel'?: PointerEventHandler | undefined | null; + 'on:pointerdown'?: PointerEventHandler | undefined | null; + 'on:pointerenter'?: PointerEventHandler | undefined | null; + 'on:pointerleave'?: PointerEventHandler | undefined | null; + 'on:pointermove'?: PointerEventHandler | undefined | null; + 'on:pointerout'?: PointerEventHandler | undefined | null; + 'on:pointerover'?: PointerEventHandler | undefined | null; + 'on:pointerup'?: PointerEventHandler | undefined | null; + 'on:lostpointercapture'?: PointerEventHandler | undefined | null; + + // UI Events + 'on:scroll'?: UIEventHandler | undefined | null; + 'on:resize'?: UIEventHandler | undefined | null; + + // Wheel Events + 'on:wheel'?: WheelEventHandler | undefined | null; + + // Animation Events + 'on:animationstart'?: AnimationEventHandler | undefined | null; + 'on:animationend'?: AnimationEventHandler | undefined | null; + 'on:animationiteration'?: AnimationEventHandler | undefined | null; + + // Transition Events + 'on:transitionstart'?: TransitionEventHandler | undefined | null; + 'on:transitionrun'?: TransitionEventHandler | undefined | null; + 'on:transitionend'?: TransitionEventHandler | undefined | null; + 'on:transitioncancel'?: TransitionEventHandler | undefined | null; + + // Svelte Transition Events + 'on:outrostart'?: EventHandler, T> | undefined | null; + 'on:outroend'?: EventHandler, T> | undefined | null; + 'on:introstart'?: EventHandler, T> | undefined | null; + 'on:introend'?: EventHandler, T> | undefined | null; + + // Message Events + 'on:message'?: MessageEventHandler | undefined | null; + 'on:messageerror'?: MessageEventHandler | undefined | null; + + // Global Events + 'on:cancel'?: EventHandler | undefined | null; + 'on:close'?: EventHandler | undefined | null; + 'on:fullscreenchange'?: EventHandler | undefined | null; + 'on:fullscreenerror'?: EventHandler | undefined | null; +} + +// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ +export interface AriaAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string | undefined | null; + /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ + 'aria-atomic'?: Booleanish | undefined | null; + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null; + /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ + 'aria-busy'?: Booleanish | undefined | null; + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: number | undefined | null; + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + 'aria-colindex'?: number | undefined | null; + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + 'aria-colspan'?: number | undefined | null; + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + * @see aria-owns. + */ + 'aria-controls'?: string | undefined | null; + /** Indicates the element that represents the current item within a container or set of related elements. */ + 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null; + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + 'aria-describedby'?: string | undefined | null; + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + 'aria-details'?: string | undefined | null; + /** + * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + * @see aria-hidden @see aria-readonly. + */ + 'aria-disabled'?: Booleanish | undefined | null; + /** + * Indicates what functions can be performed when a dragged object is released on the drop target. + * @deprecated in ARIA 1.1 + */ + 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null; + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + 'aria-errormessage'?: string | undefined | null; + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: Booleanish | undefined | null; + /** + * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, + * allows assistive technology to override the general default of reading in document source order. + */ + 'aria-flowto'?: string | undefined | null; + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + 'aria-grabbed'?: Booleanish | undefined | null; + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined | null; + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: Booleanish | undefined | null; + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined | null; + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + 'aria-keyshortcuts'?: string | undefined | null; + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + 'aria-label'?: string | undefined | null; + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + 'aria-labelledby'?: string | undefined | null; + /** Defines the hierarchical level of an element within a structure. */ + 'aria-level'?: number | undefined | null; + /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ + 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined | null; + /** Indicates whether an element is modal when displayed. */ + 'aria-modal'?: Booleanish | undefined | null; + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: Booleanish | undefined | null; + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: Booleanish | undefined | null; + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + 'aria-orientation'?: 'horizontal' | 'vertical' | undefined | null; + /** + * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship + * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. + * @see aria-controls. + */ + 'aria-owns'?: string | undefined | null; + /** + * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. + * A hint could be a sample value or a brief description of the expected format. + */ + 'aria-placeholder'?: string | undefined | null; + /** + * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-setsize. + */ + 'aria-posinset'?: number | undefined | null; + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: Booleanish | undefined | null; + /** + * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. + * @see aria-atomic. + */ + 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined | null; + /** Indicates that user input is required on the element before a form may be submitted. */ + 'aria-required'?: Booleanish | undefined | null; + /** Defines a human-readable, author-localized description for the role of an element. */ + 'aria-roledescription'?: string | undefined | null; + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + 'aria-rowcount'?: number | undefined | null; + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + 'aria-rowindex'?: number | undefined | null; + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + 'aria-rowspan'?: number | undefined | null; + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: Booleanish | undefined | null; + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + 'aria-setsize'?: number | undefined | null; + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined | null; + /** Defines the maximum allowed value for a range widget. */ + 'aria-valuemax'?: number | undefined | null; + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: number | undefined | null; + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: number | undefined | null; + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string | undefined | null; +} + +// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions +export type AriaRole = + | 'alert' + | 'alertdialog' + | 'application' + | 'article' + | 'banner' + | 'button' + | 'cell' + | 'checkbox' + | 'columnheader' + | 'combobox' + | 'complementary' + | 'contentinfo' + | 'definition' + | 'dialog' + | 'directory' + | 'document' + | 'feed' + | 'figure' + | 'form' + | 'grid' + | 'gridcell' + | 'group' + | 'heading' + | 'img' + | 'link' + | 'list' + | 'listbox' + | 'listitem' + | 'log' + | 'main' + | 'marquee' + | 'math' + | 'menu' + | 'menubar' + | 'menuitem' + | 'menuitemcheckbox' + | 'menuitemradio' + | 'navigation' + | 'none' + | 'note' + | 'option' + | 'presentation' + | 'progressbar' + | 'radio' + | 'radiogroup' + | 'region' + | 'row' + | 'rowgroup' + | 'rowheader' + | 'scrollbar' + | 'search' + | 'searchbox' + | 'separator' + | 'slider' + | 'spinbutton' + | 'status' + | 'switch' + | 'tab' + | 'table' + | 'tablist' + | 'tabpanel' + | 'term' + | 'textbox' + | 'timer' + | 'toolbar' + | 'tooltip' + | 'tree' + | 'treegrid' + | 'treeitem' + | (string & {}); + +export interface HTMLAttributes extends AriaAttributes, DOMAttributes { + // Standard HTML Attributes + accesskey?: string | undefined | null; + autofocus?: boolean | undefined | null; + class?: string | undefined | null; + contenteditable?: Booleanish | 'inherit' | undefined | null; + contextmenu?: string | undefined | null; + dir?: string | undefined | null; + draggable?: Booleanish | undefined | null; + enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null; + hidden?: boolean | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + placeholder?: string | undefined | null; + slot?: string | undefined | null; + spellcheck?: Booleanish | undefined | null; + style?: string | undefined | null; + tabindex?: number | undefined | null; + title?: string | undefined | null; + translate?: 'yes' | 'no' | '' | undefined | null; + inert?: boolean | undefined | null; + + // Unknown + radiogroup?: string | undefined | null; // , + + // WAI-ARIA + role?: AriaRole | undefined | null; + + // RDFa Attributes + about?: string | undefined | null; + datatype?: string | undefined | null; + inlist?: any; + prefix?: string | undefined | null; + property?: string | undefined | null; + resource?: string | undefined | null; + typeof?: string | undefined | null; + vocab?: string | undefined | null; + + // Non-standard Attributes + autocapitalize?: string | undefined | null; + autocorrect?: string | undefined | null; + autosave?: string | undefined | null; + color?: string | undefined | null; + itemprop?: string | undefined | null; + itemscope?: boolean | undefined | null; + itemtype?: string | undefined | null; + itemid?: string | undefined | null; + itemref?: string | undefined | null; + results?: number | undefined | null; + security?: string | undefined | null; + unselectable?: 'on' | 'off' | undefined | null; + + // Living Standard + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents + * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute + */ + inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined | null; + /** + * Specify that a standard HTML element should behave like a defined custom built-in element + * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is + */ + is?: string | undefined | null; + + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:innerHTML'?: string | undefined | null; + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:textContent'?: string | undefined | null; + + // SvelteKit + 'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null; + 'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-reload'?: true | '' | 'off' | undefined | null; +} + +export type HTMLAttributeAnchorTarget = + | '_self' + | '_blank' + | '_parent' + | '_top' + | (string & {}); + +export interface HTMLAnchorAttributes extends HTMLAttributes { + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + ping?: string | undefined | null; + rel?: string | undefined | null; + target?: HTMLAttributeAnchorTarget | undefined | null; + type?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + + // Sapper + 'sapper:noscroll'?: true | undefined | null; + 'sapper:prefetch'?: true | undefined | null; +} + +export interface HTMLAudioAttributes extends HTMLMediaAttributes {} + +export interface HTMLAreaAttributes extends HTMLAttributes { + alt?: string | undefined | null; + coords?: string | undefined | null; + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + shape?: string | undefined | null; + target?: string | undefined | null; + ping?: string | undefined | null; +} + +export interface HTMLBaseAttributes extends HTMLAttributes { + href?: string | undefined | null; + target?: string | undefined | null; +} + +export interface HTMLBlockquoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLButtonAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + name?: string | undefined | null; + type?: 'submit' | 'reset' | 'button' | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLCanvasAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColAttributes extends HTMLAttributes { + span?: number | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColgroupAttributes extends HTMLAttributes { + span?: number | undefined | null; +} + +export interface HTMLDataAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLDetailsAttributes extends HTMLAttributes { + open?: boolean | undefined | null; + + 'bind:open'?: boolean | undefined | null; +} + +export interface HTMLDelAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export interface HTMLDialogAttributes extends HTMLAttributes { + open?: boolean | undefined | null; +} + +export interface HTMLEmbedAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLFieldsetAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLFormAttributes extends HTMLAttributes { + acceptcharset?: string | undefined | null; + action?: string | undefined | null; + autocomplete?: string | undefined | null; + enctype?: string | undefined | null; + method?: string | undefined | null; + name?: string | undefined | null; + novalidate?: boolean | undefined | null; + target?: string | undefined | null; + rel?: string | undefined | null; +} + +export interface HTMLHtmlAttributes extends HTMLAttributes { + manifest?: string | undefined | null; +} + +export interface HTMLIframeAttributes extends HTMLAttributes { + allow?: string | undefined | null; + allowfullscreen?: boolean | undefined | null; + allowtransparency?: boolean | undefined | null; + /** @deprecated */ + frameborder?: number | string | undefined | null; + height?: number | string | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + /** @deprecated */ + marginheight?: number | undefined | null; + /** @deprecated */ + marginwidth?: number | undefined | null; + name?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sandbox?: string | undefined | null; + /** @deprecated */ + scrolling?: string | undefined | null; + seamless?: boolean | undefined | null; + src?: string | undefined | null; + srcdoc?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLImgAttributes extends HTMLAttributes { + alt?: string | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + decoding?: 'async' | 'auto' | 'sync' | undefined | null; + height?: number | string | undefined | null; + ismap?: boolean | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLInsAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export type HTMLInputTypeAttribute = + | 'button' + | 'checkbox' + | 'color' + | 'date' + | 'datetime-local' + | 'email' + | 'file' + | 'hidden' + | 'image' + | 'month' + | 'number' + | 'password' + | 'radio' + | 'range' + | 'reset' + | 'search' + | 'submit' + | 'tel' + | 'text' + | 'time' + | 'url' + | 'week' + | (string & {}); + +export interface HTMLInputAttributes extends HTMLAttributes { + accept?: string | undefined | null; + alt?: string | undefined | null; + autocomplete?: string | undefined | null; + capture?: boolean | 'user' | 'environment' | undefined | null; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute + checked?: boolean | undefined | null; + crossorigin?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + height?: number | string | undefined | null; + list?: string | undefined | null; + max?: number | string | undefined | null; + maxlength?: number | undefined | null; + min?: number | string | undefined | null; + minlength?: number | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + pattern?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + src?: string | undefined | null; + step?: number | string | undefined | null; + type?: HTMLInputTypeAttribute | undefined | null; + value?: any; + width?: number | string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:checked'?: boolean | undefined | null; + 'bind:value'?: any; + 'bind:group'?: any | undefined | null; + 'bind:files'?: FileList | undefined | null; + 'bind:indeterminate'?: boolean | undefined | null; +} + +export interface HTMLKeygenAttributes extends HTMLAttributes { + challenge?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + keytype?: string | undefined | null; + keyparams?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLLabelAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; +} + +export interface HTMLLiAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLLinkAttributes extends HTMLAttributes { + as?: string | undefined | null; + crossorigin?: string | undefined | null; + href?: string | undefined | null; + hreflang?: string | undefined | null; + integrity?: string | undefined | null; + media?: string | undefined | null; + imagesrcset?: string | undefined | null; + imagesizes?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + sizes?: string | undefined | null; + type?: string | undefined | null; + charset?: string | undefined | null; +} + +export interface HTMLMapAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLMenuAttributes extends HTMLAttributes { + type?: string | undefined | null; +} + +export interface HTMLMediaAttributes extends HTMLAttributes { + autoplay?: boolean | undefined | null; + controls?: boolean | undefined | null; + controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback' | (string & {}) | undefined | null; + crossorigin?: string | undefined | null; + currenttime?: number | undefined | null; + defaultmuted?: boolean | undefined | null; + defaultplaybackrate?: number | undefined | null; + loop?: boolean | undefined | null; + mediagroup?: string | undefined | null; + muted?: boolean | undefined | null; + playsinline?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + /** + * a value between 0 and 1 + */ + volume?: number | undefined | null; + + readonly 'bind:duration'?: number | undefined | null; + readonly 'bind:buffered'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:played'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seekable'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seeking'?: boolean | undefined | null; + readonly 'bind:ended'?: boolean | undefined | null; + 'bind:muted'?: boolean | undefined | null; + 'bind:volume'?: number | undefined | null; + /** + * the current playback time in the video, in seconds + */ + 'bind:currentTime'?: number | undefined | null; + /** + * how fast or slow to play the video, where 1 is 'normal' + */ + 'bind:playbackRate'?: number | undefined | null; + 'bind:paused'?: boolean | undefined | null; +} + +export interface HTMLMetaAttributes extends HTMLAttributes { + charSet?: string | undefined | null; + content?: string | undefined | null; + httpequiv?: string | undefined | null; + name?: string | undefined | null; + media?: string | undefined | null; +} + +export interface HTMLMeterAttributes extends HTMLAttributes { + form?: string | undefined | null; + high?: number | undefined | null; + low?: number | undefined | null; + max?: number | string | undefined | null; + min?: number | string | undefined | null; + optimum?: number | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLQuoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLObjectAttributes extends HTMLAttributes { + classid?: string | undefined | null; + data?: string | undefined | null; + form?: string | undefined | null; + height?: number | string | undefined | null; + name?: string | undefined | null; + type?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; + wmode?: string | undefined | null; +} + +export interface HTMLOlAttributes extends HTMLAttributes { + reversed?: boolean | undefined | null; + start?: number | undefined | null; + type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined | null; +} + +export interface HTMLOptgroupAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; +} + +export interface HTMLOptionAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; + selected?: boolean | undefined | null; + value?: any; +} + +export interface HTMLOutputAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLParamAttributes extends HTMLAttributes { + name?: string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLProgressAttributes extends HTMLAttributes { + max?: number | string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLSlotAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLScriptAttributes extends HTMLAttributes { + async?: boolean | undefined | null; + /** @deprecated */ + charset?: string | undefined | null; + crossorigin?: string | undefined | null; + defer?: boolean | undefined | null; + integrity?: string | undefined | null; + nomodule?: boolean | undefined | null; + nonce?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLSelectAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + value?: any; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLSourceAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + media?: string | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLStyleAttributes extends HTMLAttributes { + media?: string | undefined | null; + nonce?: string | undefined | null; + scoped?: boolean | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLTableAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | undefined | null; + bgcolor?: string | undefined | null; + border?: number | undefined | null; + cellpadding?: number | string | undefined | null; + cellspacing?: number | string | undefined | null; + frame?: boolean | undefined | null; + rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | undefined | null; + summary?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLTextareaAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + cols?: number | undefined | null; + dirname?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + maxlength?: number | undefined | null; + minlength?: number | undefined | null; + name?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + rows?: number | undefined | null; + value?: string | string[] | number | undefined | null; + wrap?: string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLTdAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; + height?: number | string | undefined | null; + width?: number | string | undefined | null; + valign?: 'top' | 'middle' | 'bottom' | 'baseline' | undefined | null; +} + +export interface HTMLThAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; +} + +export interface HTMLTimeAttributes extends HTMLAttributes { + datetime?: string | undefined | null; +} + +export interface HTMLTrackAttributes extends HTMLAttributes { + default?: boolean | undefined | null; + kind?: string | undefined | null; + label?: string | undefined | null; + src?: string | undefined | null; + srclang?: string | undefined | null; +} + +export interface HTMLVideoAttributes extends HTMLMediaAttributes { + height?: number | string | undefined | null; + playsinline?: boolean | undefined | null; + poster?: string | undefined | null; + width?: number | string | undefined | null; + disablepictureinpicture?: boolean | undefined | null; + disableremoteplayback?: boolean | undefined | null; + + readonly 'bind:videoWidth'?: number | undefined | null; + readonly 'bind:videoHeight'?: number | undefined | null; +} + +export interface SvelteMediaTimeRange { + start: number; + end: number; +} + +export interface SvelteWindowAttributes extends HTMLAttributes { + readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null; + readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null; + readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null; + readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null; + 'bind:scrollX'?: Window['scrollX'] | undefined | null; + 'bind:scrollY'?: Window['scrollY'] | undefined | null; + readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null; + + // SvelteKit + 'on:sveltekit:start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-end'?: EventHandler | undefined | null; + + 'on:devicelight'?: EventHandler | undefined | null; + 'on:beforeinstallprompt'?: EventHandler | undefined | null; + 'on:deviceproximity'?: EventHandler | undefined | null; + 'on:paint'?: EventHandler | undefined | null; + 'on:userproximity'?: EventHandler | undefined | null; + 'on:beforeprint'?: EventHandler | undefined | null; + 'on:afterprint'?: EventHandler | undefined | null; + 'on:languagechange'?: EventHandler | undefined | null; + 'on:orientationchange'?: EventHandler | undefined | null; + 'on:message'?: EventHandler | undefined | null; + 'on:messageerror'?: EventHandler | undefined | null; + 'on:offline'?: EventHandler | undefined | null; + 'on:online'?: EventHandler | undefined | null; + 'on:beforeunload'?: EventHandler | undefined | null; + 'on:unload'?: EventHandler | undefined | null; + 'on:storage'?: EventHandler | undefined | null; + 'on:hashchange'?: EventHandler | undefined | null; + 'on:pagehide'?: EventHandler | undefined | null; + 'on:pageshow'?: EventHandler | undefined | null; + 'on:popstate'?: EventHandler | undefined | null; + 'on:devicemotion'?: EventHandler | undefined | null; + 'on:deviceorientation'?: EventHandler | undefined | null; + 'on:deviceorientationabsolute'?: EventHandler | undefined | null; + 'on:unhandledrejection'?: EventHandler | undefined | null; + 'on:rejectionhandled'?: EventHandler | undefined | null; +} + +export interface SVGAttributes extends AriaAttributes, DOMAttributes { + // Attributes which also defined in HTMLAttributes + className?: string | undefined | null; + class?: string | undefined | null; + color?: string | undefined | null; + height?: number | string | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + max?: number | string | undefined | null; + media?: string | undefined | null; + method?: string | undefined | null; + min?: number | string | undefined | null; + name?: string | undefined | null; + style?: string | undefined | null; + target?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; + + // Other HTML properties supported by SVG elements in browsers + role?: AriaRole | undefined | null; + tabindex?: number | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + + // SVG Specific attributes + 'accent-height'?: number | string | undefined | null; + accumulate?: 'none' | 'sum' | undefined | null; + additive?: 'replace' | 'sum' | undefined | null; + 'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | + 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | + 'mathematical' | 'inherit' | undefined | null; + allowReorder?: 'no' | 'yes' | undefined | null; + alphabetic?: number | string | undefined | null; + amplitude?: number | string | undefined | null; + 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined | null; + ascent?: number | string | undefined | null; + attributeName?: string | undefined | null; + attributeType?: string | undefined | null; + autoReverse?: number | string | undefined | null; + azimuth?: number | string | undefined | null; + baseFrequency?: number | string | undefined | null; + 'baseline-shift'?: number | string | undefined | null; + baseProfile?: number | string | undefined | null; + bbox?: number | string | undefined | null; + begin?: number | string | undefined | null; + bias?: number | string | undefined | null; + by?: number | string | undefined | null; + calcMode?: number | string | undefined | null; + 'cap-height'?: number | string | undefined | null; + clip?: number | string | undefined | null; + 'clip-path'?: string | undefined | null; + clipPathUnits?: number | string | undefined | null; + 'clip-rule'?: number | string | undefined | null; + 'color-interpolation'?: number | string | undefined | null; + 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined | null; + 'color-profile'?: number | string | undefined | null; + 'color-rendering'?: number | string | undefined | null; + contentScriptType?: number | string | undefined | null; + contentStyleType?: number | string | undefined | null; + cursor?: number | string | undefined | null; + cx?: number | string | undefined | null; + cy?: number | string | undefined | null; + d?: string | undefined | null; + decelerate?: number | string | undefined | null; + descent?: number | string | undefined | null; + diffuseConstant?: number | string | undefined | null; + direction?: number | string | undefined | null; + display?: number | string | undefined | null; + divisor?: number | string | undefined | null; + 'dominant-baseline'?: number | string | undefined | null; + dur?: number | string | undefined | null; + dx?: number | string | undefined | null; + dy?: number | string | undefined | null; + edgeMode?: number | string | undefined | null; + elevation?: number | string | undefined | null; + 'enable-background'?: number | string | undefined | null; + end?: number | string | undefined | null; + exponent?: number | string | undefined | null; + externalResourcesRequired?: number | string | undefined | null; + fill?: string | undefined | null; + 'fill-opacity'?: number | string | undefined | null; + 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined | null; + filter?: string | undefined | null; + filterRes?: number | string | undefined | null; + filterUnits?: number | string | undefined | null; + 'flood-color'?: number | string | undefined | null; + 'flood-opacity'?: number | string | undefined | null; + focusable?: number | string | undefined | null; + 'font-family'?: string | undefined | null; + 'font-size'?: number | string | undefined | null; + 'font-size-adjust'?: number | string | undefined | null; + 'font-stretch'?: number | string | undefined | null; + 'font-style'?: number | string | undefined | null; + 'font-variant'?: number | string | undefined | null; + 'font-weight'?: number | string | undefined | null; + format?: number | string | undefined | null; + from?: number | string | undefined | null; + fx?: number | string | undefined | null; + fy?: number | string | undefined | null; + g1?: number | string | undefined | null; + g2?: number | string | undefined | null; + 'glyph-name'?: number | string | undefined | null; + 'glyph-orientation-horizontal'?: number | string | undefined | null; + 'glyph-orientation-vertical'?: number | string | undefined | null; + glyphRef?: number | string | undefined | null; + gradientTransform?: string | undefined | null; + gradientUnits?: string | undefined | null; + hanging?: number | string | undefined | null; + href?: string | undefined | null; + 'horiz-adv-x'?: number | string | undefined | null; + 'horiz-origin-x'?: number | string | undefined | null; + ideographic?: number | string | undefined | null; + 'image-rendering'?: number | string | undefined | null; + in2?: number | string | undefined | null; + in?: string | undefined | null; + intercept?: number | string | undefined | null; + k1?: number | string | undefined | null; + k2?: number | string | undefined | null; + k3?: number | string | undefined | null; + k4?: number | string | undefined | null; + k?: number | string | undefined | null; + kernelMatrix?: number | string | undefined | null; + kernelUnitLength?: number | string | undefined | null; + kerning?: number | string | undefined | null; + keyPoints?: number | string | undefined | null; + keySplines?: number | string | undefined | null; + keyTimes?: number | string | undefined | null; + lengthAdjust?: number | string | undefined | null; + 'letter-spacing'?: number | string | undefined | null; + 'lighting-color'?: number | string | undefined | null; + limitingConeAngle?: number | string | undefined | null; + local?: number | string | undefined | null; + 'marker-end'?: string | undefined | null; + markerHeight?: number | string | undefined | null; + 'marker-mid'?: string | undefined | null; + 'marker-start'?: string | undefined | null; + markerUnits?: number | string | undefined | null; + markerWidth?: number | string | undefined | null; + mask?: string | undefined | null; + maskContentUnits?: number | string | undefined | null; + maskUnits?: number | string | undefined | null; + mathematical?: number | string | undefined | null; + mode?: number | string | undefined | null; + numOctaves?: number | string | undefined | null; + offset?: number | string | undefined | null; + opacity?: number | string | undefined | null; + operator?: number | string | undefined | null; + order?: number | string | undefined | null; + orient?: number | string | undefined | null; + orientation?: number | string | undefined | null; + origin?: number | string | undefined | null; + overflow?: number | string | undefined | null; + 'overline-position'?: number | string | undefined | null; + 'overline-thickness'?: number | string | undefined | null; + 'paint-order'?: number | string | undefined | null; + 'panose-1'?: number | string | undefined | null; + path?: string | undefined | null; + pathLength?: number | string | undefined | null; + patternContentUnits?: string | undefined | null; + patternTransform?: number | string | undefined | null; + patternUnits?: string | undefined | null; + 'pointer-events'?: number | string | undefined | null; + points?: string | undefined | null; + pointsAtX?: number | string | undefined | null; + pointsAtY?: number | string | undefined | null; + pointsAtZ?: number | string | undefined | null; + preserveAlpha?: number | string | undefined | null; + preserveAspectRatio?: string | undefined | null; + primitiveUnits?: number | string | undefined | null; + r?: number | string | undefined | null; + radius?: number | string | undefined | null; + refX?: number | string | undefined | null; + refY?: number | string | undefined | null; + 'rendering-intent'?: number | string | undefined | null; + repeatCount?: number | string | undefined | null; + repeatDur?: number | string | undefined | null; + requiredExtensions?: number | string | undefined | null; + requiredFeatures?: number | string | undefined | null; + restart?: number | string | undefined | null; + result?: string | undefined | null; + rotate?: number | string | undefined | null; + rx?: number | string | undefined | null; + ry?: number | string | undefined | null; + scale?: number | string | undefined | null; + seed?: number | string | undefined | null; + 'shape-rendering'?: number | string | undefined | null; + slope?: number | string | undefined | null; + spacing?: number | string | undefined | null; + specularConstant?: number | string | undefined | null; + specularExponent?: number | string | undefined | null; + speed?: number | string | undefined | null; + spreadMethod?: string | undefined | null; + startOffset?: number | string | undefined | null; + stdDeviation?: number | string | undefined | null; + stemh?: number | string | undefined | null; + stemv?: number | string | undefined | null; + stitchTiles?: number | string | undefined | null; + 'stop-color'?: string | undefined | null; + 'stop-opacity'?: number | string | undefined | null; + 'strikethrough-position'?: number | string | undefined | null; + 'strikethrough-thickness'?: number | string | undefined | null; + string?: number | string | undefined | null; + stroke?: string | undefined | null; + 'stroke-dasharray'?: string | number | undefined | null; + 'stroke-dashoffset'?: string | number | undefined | null; + 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' | undefined | null; + 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined | null; + 'stroke-miterlimit'?: string | undefined | null; + 'stroke-opacity'?: number | string | undefined | null; + 'stroke-width'?: number | string | undefined | null; + surfaceScale?: number | string | undefined | null; + systemLanguage?: number | string | undefined | null; + tableValues?: number | string | undefined | null; + targetX?: number | string | undefined | null; + targetY?: number | string | undefined | null; + 'text-anchor'?: string | undefined | null; + 'text-decoration'?: number | string | undefined | null; + textLength?: number | string | undefined | null; + 'text-rendering'?: number | string | undefined | null; + to?: number | string | undefined | null; + transform?: string | undefined | null; + u1?: number | string | undefined | null; + u2?: number | string | undefined | null; + 'underline-position'?: number | string | undefined | null; + 'underline-thickness'?: number | string | undefined | null; + unicode?: number | string | undefined | null; + 'unicode-bidi'?: number | string | undefined | null; + 'unicode-range'?: number | string | undefined | null; + 'units-per-em'?: number | string | undefined | null; + 'v-alphabetic'?: number | string | undefined | null; + values?: string | undefined | null; + 'vector-effect'?: number | string | undefined | null; + version?: string | undefined | null; + 'vert-adv-y'?: number | string | undefined | null; + 'vert-origin-x'?: number | string | undefined | null; + 'vert-origin-y'?: number | string | undefined | null; + 'v-hanging'?: number | string | undefined | null; + 'v-ideographic'?: number | string | undefined | null; + viewBox?: string | undefined | null; + viewTarget?: number | string | undefined | null; + visibility?: number | string | undefined | null; + 'v-mathematical'?: number | string | undefined | null; + widths?: number | string | undefined | null; + 'word-spacing'?: number | string | undefined | null; + 'writing-mode'?: number | string | undefined | null; + x1?: number | string | undefined | null; + x2?: number | string | undefined | null; + x?: number | string | undefined | null; + xChannelSelector?: string | undefined | null; + 'x-height'?: number | string | undefined | null; + 'xlink:actuate'?: string | undefined | null; + 'xlink:arcrole'?: string | undefined | null; + 'xlink:href'?: string | undefined | null; + 'xlink:role'?: string | undefined | null; + 'xlink:show'?: string | undefined | null; + 'xlink:title'?: string | undefined | null; + 'xlink:type'?: string | undefined | null; + 'xml:base'?: string | undefined | null; + 'xml:lang'?: string | undefined | null; + xmlns?: string | undefined | null; + 'xmlns:xlink'?: string | undefined | null; + 'xml:space'?: string | undefined | null; + y1?: number | string | undefined | null; + y2?: number | string | undefined | null; + y?: number | string | undefined | null; + yChannelSelector?: string | undefined | null; + z?: number | string | undefined | null; + zoomAndPan?: string | undefined | null; +} + +export interface HTMLWebViewAttributes extends HTMLAttributes { + allowfullscreen?: boolean | undefined | null; + allowpopups?: boolean | undefined | null; + autosize?: boolean | undefined | null; + blinkfeatures?: string | undefined | null; + disableblinkfeatures?: string | undefined | null; + disableguestresize?: boolean | undefined | null; + disablewebsecurity?: boolean | undefined | null; + guestinstance?: string | undefined | null; + httpreferrer?: string | undefined | null; + nodeintegration?: boolean | undefined | null; + partition?: string | undefined | null; + plugins?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + useragent?: string | undefined | null; + webpreferences?: string | undefined | null; +} + +// +// DOM Elements +// ---------------------------------------------------------------------- + +export interface SvelteHTMLElements { + a: HTMLAnchorAttributes; + abbr: HTMLAttributes; + address: HTMLAttributes; + area: HTMLAreaAttributes; + article: HTMLAttributes; + aside: HTMLAttributes; + audio: HTMLAudioAttributes; + b: HTMLAttributes; + base: HTMLBaseAttributes; + bdi: HTMLAttributes; + bdo: HTMLAttributes; + big: HTMLAttributes; + blockquote: HTMLBlockquoteAttributes; + body: HTMLAttributes; + br: HTMLAttributes; + button: HTMLButtonAttributes; + canvas: HTMLCanvasAttributes; + caption: HTMLAttributes; + cite: HTMLAttributes; + code: HTMLAttributes; + col: HTMLColAttributes; + colgroup: HTMLColgroupAttributes; + data: HTMLDataAttributes; + datalist: HTMLAttributes; + dd: HTMLAttributes; + del: HTMLDelAttributes; + details: HTMLDetailsAttributes; + dfn: HTMLAttributes; + dialog: HTMLDialogAttributes; + div: HTMLAttributes; + dl: HTMLAttributes; + dt: HTMLAttributes; + em: HTMLAttributes; + embed: HTMLEmbedAttributes; + fieldset: HTMLFieldsetAttributes; + figcaption: HTMLAttributes; + figure: HTMLAttributes; + footer: HTMLAttributes; + form: HTMLFormAttributes; + h1: HTMLAttributes; + h2: HTMLAttributes; + h3: HTMLAttributes; + h4: HTMLAttributes; + h5: HTMLAttributes; + h6: HTMLAttributes; + head: HTMLAttributes; + header: HTMLAttributes; + hgroup: HTMLAttributes; + hr: HTMLAttributes; + html: HTMLHtmlAttributes; + i: HTMLAttributes; + iframe: HTMLIframeAttributes; + img: HTMLImgAttributes; + input: HTMLInputAttributes; + ins: HTMLInsAttributes; + kbd: HTMLAttributes; + keygen: HTMLKeygenAttributes; + label: HTMLLabelAttributes; + legend: HTMLAttributes; + li: HTMLLiAttributes; + link: HTMLLinkAttributes; + main: HTMLAttributes; + map: HTMLMapAttributes; + mark: HTMLAttributes; + menu: HTMLMenuAttributes; + menuitem: HTMLAttributes; + meta: HTMLMetaAttributes; + meter: HTMLMeterAttributes; + nav: HTMLAttributes; + noscript: HTMLAttributes; + object: HTMLObjectAttributes; + ol: HTMLOlAttributes; + optgroup: HTMLOptgroupAttributes; + option: HTMLOptionAttributes; + output: HTMLOutputAttributes; + p: HTMLAttributes; + param: HTMLParamAttributes; + picture: HTMLAttributes; + pre: HTMLAttributes; + progress: HTMLProgressAttributes; + q: HTMLQuoteAttributes; + rp: HTMLAttributes; + rt: HTMLAttributes; + ruby: HTMLAttributes; + s: HTMLAttributes; + samp: HTMLAttributes; + slot: HTMLSlotAttributes; + script: HTMLScriptAttributes; + section: HTMLAttributes; + select: HTMLSelectAttributes; + small: HTMLAttributes; + source: HTMLSourceAttributes; + span: HTMLAttributes; + strong: HTMLAttributes; + style: HTMLStyleAttributes; + sub: HTMLAttributes; + summary: HTMLAttributes; + sup: HTMLAttributes; + table: HTMLTableAttributes; + template: HTMLAttributes; + tbody: HTMLAttributes; + td: HTMLTdAttributes; + textarea: HTMLTextareaAttributes; + tfoot: HTMLAttributes; + th: HTMLThAttributes; + thead: HTMLAttributes; + time: HTMLTimeAttributes; + title: HTMLAttributes; + tr: HTMLAttributes; + track: HTMLTrackAttributes; + u: HTMLAttributes; + ul: HTMLAttributes; + var: HTMLAttributes; + video: HTMLVideoAttributes; + wbr: HTMLAttributes; + webview: HTMLWebViewAttributes; + // SVG + svg: SVGAttributes; + + animate: SVGAttributes; + animateMotion: SVGAttributes; + animateTransform: SVGAttributes; + circle: SVGAttributes; + clipPath: SVGAttributes; + defs: SVGAttributes; + desc: SVGAttributes; + ellipse: SVGAttributes; + feBlend: SVGAttributes; + feColorMatrix: SVGAttributes; + feComponentTransfer: SVGAttributes; + feComposite: SVGAttributes; + feConvolveMatrix: SVGAttributes; + feDiffuseLighting: SVGAttributes; + feDisplacementMap: SVGAttributes; + feDistantLight: SVGAttributes; + feDropShadow: SVGAttributes; + feFlood: SVGAttributes; + feFuncA: SVGAttributes; + feFuncB: SVGAttributes; + feFuncG: SVGAttributes; + feFuncR: SVGAttributes; + feGaussianBlur: SVGAttributes; + feImage: SVGAttributes; + feMerge: SVGAttributes; + feMergeNode: SVGAttributes; + feMorphology: SVGAttributes; + feOffset: SVGAttributes; + fePointLight: SVGAttributes; + feSpecularLighting: SVGAttributes; + feSpotLight: SVGAttributes; + feTile: SVGAttributes; + feTurbulence: SVGAttributes; + filter: SVGAttributes; + foreignObject: SVGAttributes; + g: SVGAttributes; + image: SVGAttributes; + line: SVGAttributes; + linearGradient: SVGAttributes; + marker: SVGAttributes; + mask: SVGAttributes; + metadata: SVGAttributes; + mpath: SVGAttributes; + path: SVGAttributes; + pattern: SVGAttributes; + polygon: SVGAttributes; + polyline: SVGAttributes; + radialGradient: SVGAttributes; + rect: SVGAttributes; + stop: SVGAttributes; + switch: SVGAttributes; + symbol: SVGAttributes; + text: SVGAttributes; + textPath: SVGAttributes; + tspan: SVGAttributes; + use: SVGAttributes; + view: SVGAttributes; + + // Svelte specific + 'svelte:window': SvelteWindowAttributes; + 'svelte:body': HTMLAttributes; + 'svelte:fragment': { slot?: string }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; + + [name: string]: { [name: string]: any }; +} diff --git a/elements/package.json b/elements/package.json new file mode 100644 index 0000000000..1704e6b78b --- /dev/null +++ b/elements/package.json @@ -0,0 +1,3 @@ +{ + "types": "./index.d.ts" +} diff --git a/package-lock.json b/package-lock.json index 59c853fa4b..eeef42a72c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.55.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svelte", - "version": "3.53.1", + "version": "3.55.0", "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", diff --git a/package.json b/package.json index 4fde354b6a..8839b95c75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.55.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", @@ -17,6 +17,7 @@ "easing", "motion", "action", + "elements", "README.md" ], "exports": { @@ -75,6 +76,9 @@ "import": "./transition/index.mjs", "require": "./transition/index.js" }, + "./elements": { + "types": "./elements/index.d.ts" + }, "./ssr": { "types": "./types/runtime/index.d.ts", "import": "./ssr.mjs", diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md deleted file mode 100644 index b29525dec3..0000000000 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: "Frameworks without the framework: why didn't we think of this sooner?" -description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you. -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -> Wait, this new framework has a *runtime*? Ugh. Thanks, I'll pass. -> **– front end developers in 2018** - -We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what *really* mattered was performance once your app was already interactive. - -But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly. - -If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing. - -Perhaps we need to rethink the whole thing. - - -## What problem do frameworks *really* solve? - -The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks *move the complexity around*, away from code that you had to write and into code you didn't. - -Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your *concepts*. Frameworks are primarily a tool for structuring your thoughts, not your code. - -Given that, what if the framework *didn't actually run in the browser*? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser. - - -## Introducing Svelte - -Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. - -The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC. - -And once your app *is* up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).) - -It's basically as fast as vanilla JS, which makes sense because it *is* vanilla JS – just vanilla JS that you didn't have to write. - - -## But that's not the important thing - -Well, it *is* important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development. - -Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.) - -Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, *you still have to serve React itself*. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny. - -Finally, something I've wrestled with a great deal as an open source maintainer: your users always want *their* features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary. - - -## We're just getting started - -Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on. - -But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md deleted file mode 100644 index 29e59270d0..0000000000 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: The easiest way to get started with Svelte -description: This'll only take a minute. -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a ` diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md deleted file mode 100644 index 65d0234645..0000000000 --- a/site/content/blog/2019-04-15-setting-up-your-editor.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Setting up your editor -description: Instructions for configuring linting and syntax highlighting -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris -draft: true ---- - -*__Coming soon__* - -This post will walk you through setting up your editor so that it recognises Svelte files: - -* eslint-plugin-svelte3 -* svelte-vscode -* associating .svelte files with HTML in VSCode, Sublime, etc. - -## Atom - -To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the following lines to your `core` section: - -```cson -"*": - core: - … - customFileTypes: - "text.html.basic": [ - "svelte" - ] -``` - -## Vim/Neovim - -You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server. - -As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`: - -``` -au! BufNewFile,BufRead *.svelte set ft=html -``` - -To temporarily turn on HTML syntax highlighting for the current buffer, use: - -``` -:set ft=html -``` - -To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic): - -``` - -``` - -## Visual Studio Code - -We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). - -## JetBrains WebStorm - -The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details. - -## Sublime Text 3 - -Open any `.svelte` file. - -Go to *__View → Syntax → Open all with current extension as... → HTML__*. diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md deleted file mode 100644 index 834e042138..0000000000 --- a/site/content/blog/2019-04-16-svelte-for-new-developers.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Svelte for new developers -description: Never used Node.js or the command line? No problem -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running. - -If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people. - -If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat). - - -## First things first - -You'll be using the *command line*, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line. - -The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day. - -Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type - -```bash -cd Development -``` - -to go to it. From there, you could create a new project directory with the `mkdir` command: - -```bash -mkdir svelte-projects -cd svelte-projects -``` - -A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands: - -* `cd ..` — navigates to the parent of the current directory -* `cat my-file.txt` — on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt` -* `open .` (or `start .` on Windows) — opens the current directory in Finder or File Explorer - - -## Installing Node.js - -[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/). - -Once installed, you'll have access to three new commands: - -* `node my-file.js` — runs the JavaScript in `my-file.js` -* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package -* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them - - -## Installing a text editor - -To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components). - - -## Creating a project - -We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work. - -On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it): - -```bash -npm create vite@latest my-svelte-project -- --template svelte -cd my-svelte-project -npm install -``` - -> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript. - -This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`. - -In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following: - -```bash -npm run dev -``` - -Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser. - -Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local *web server* (hence 'localhost') on port 5173. - -Try changing `src/App.svelte` and saving it. The application will update with your changes. - - -## Building your app - -In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed. - -When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command: - -```bash -npm run build -``` - -Your `dist` directory now contains an optimised version of your app. You can run it like so: - -```bash -npm run preview -``` diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md deleted file mode 100644 index 97e020af90..0000000000 --- a/site/content/blog/2019-04-20-write-less-code.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Write less code -description: The most important metric you're not paying attention to -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. - -Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop. - -In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in *more* code. It's a vicious cycle. - -Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing. - - -## Readability is important - -I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this... - -```js -for (let i = 0; i <= 100; i += 1) { - if (i % 2 === 0) { - console.log(`${i} is even`); - } -} -``` - -...into something much harder to parse: - -```js -for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`); -``` - -Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code. - - -## Yes, I'm talking about Svelte - -Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version: - -
- -
- -How would we build this in React? It would probably look something like this: - -```js -import React, { useState } from 'react'; - -export default () => { - const [a, setA] = useState(1); - const [b, setB] = useState(2); - - function handleChangeA(event) { - setA(+event.target.value); - } - - function handleChangeB(event) { - setB(+event.target.value); - } - - return ( -
- - - -

{a} + {b} = {a + b}

-
- ); -}; -``` - -Here's an equivalent component in Vue: - -```html - - - -``` - - - -In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! - -It's unusual for the difference to be *quite* so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely: - - -### Top-level elements - -In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `
`, but it's the same basic idea, and still results in an extra level of indentation). - -In Vue, your markup must be wrapped in a `