msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: move Renderer type to `.d.ts`

Browse Source
svelte-custom-renderer-single-type-argument
paoloricciuti 4 months ago
parent 7012a4d633
commit 2a4af72fdb
5 changed files with 170 additions and 99 deletions
Show Stats Download Patch File Download Diff File

29
packages/svelte/src/internal/client/custom-renderer/index.js
Unescape View File

@ -1,4 +1,5 @@
/** @import { ComponentContext } from '#client' */
/** @import { Renderer } from "./types.js" */
/** @import { Component, ComponentType, SvelteComponent } from '../../../index.js' */
import { boundary } from '../dom/blocks/boundary.js';
import { branch, effect_root } from '../reactivity/effects.js';
@ -6,34 +7,6 @@ import { push, pop, component_context } from '../context.js';
import { push_renderer } from './state.js';
import { get_parent_node, remove_child } from '../dom/operations.js';
/**
* @template {object} [TFragment=object]
* @template {object} [TElement=object]
* @template {object} [TTextNode=object]
* @template {object} [TComment=object]
* @template [TNode=TFragment | TElement | TTextNode | TComment]
* @typedef {Object} Renderer
* @property {()=>TFragment} createFragment - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
* @property {(name: string)=>TElement} createElement - Creates an element with the given name.
* @property {(data: string)=>TTextNode} createTextNode - Creates a text node with the given data.
* @property {(data: string)=>TComment} createComment - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
* @property {(node: TNode)=> "fragment" | "element" | "text" | "comment"} nodeType - Should return the type of the node in string form ("fragment", "element", "text", "comment").
* @property {(node: TTextNode | TComment)=>string | null} getNodeValue - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
* @property {(element: TElement, name: string)=>string | null} getAttribute - Return the value of the attribute with the given name on the element, or null if it doesn't exist
* @property {(element: TElement, key: string, value: any)=>void} setAttribute - Set the attribute with the given name and value on the element
* @property {(element: TElement, name: string)=>void} removeAttribute - Remove the attribute with the given name from the element
* @property {(element: TElement, name: string)=>boolean} hasAttribute - Return true if the element has an attribute with the given name
* @property {(node: TElement | TTextNode | TComment, text: string)=>void} setText - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
* @property {(element: TElement | TFragment)=>TNode | null} getFirstChild - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
* @property {(element: TElement | TFragment)=>TNode | null} getLastChild - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
* @property {(node: TElement | TTextNode | TComment)=>TNode | null} getNextSibling - Return the next sibling of the node, or null if it has no next sibling
* @property {(parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null)=>void} insert - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
* @property {(node: TElement | TTextNode | TComment)=>void} remove - Remove the node from the tree
* @property {(element: TElement | TTextNode | TComment)=>TNode | null} getParent - Return the parent of the element, or null if it has no parent
* @property {(target: TElement, type: string, handler: any, options?: any)=>void} addEventListener - Add an event listener of the given type and handler to the target node, with optional options
* @property {(target: TElement, type: string, handler: any, options?: any)=>void} removeEventListener - Remove an event listener of the given type and handler from the target node, with optional options
*/
/**
* @template {object} [TFragment=object]
* @template {object} [TElement=object]

2
packages/svelte/src/internal/client/custom-renderer/state.js
Unescape View File

@ -1,5 +1,5 @@
/**
* @import { Renderer } from ".";
* @import { Renderer } from "./types.js";
*/
/**

88
packages/svelte/src/internal/client/custom-renderer/types.d.ts vendored
Unescape View File

@ -0,0 +1,88 @@
export type NodeType = 'fragment' | 'element' | 'text' | 'comment';
export type Renderer<
TFragment extends object = object,
TElement extends object = object,
TTextNode extends object = object,
TComment extends object = object,
TNode extends TFragment | TElement | TTextNode | TComment =
| TFragment
| TElement
| TTextNode
| TComment
> = {
/** Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of its children. */
createFragment(): TFragment;
/** Creates an element with the given name. */
createElement(name: string): TElement;
/** Creates a text node with the given data. */
createTextNode(data: string): TTextNode;
/**
* Creates a comment node with the given data.
* This is often used as an anchor for inserting elements; it doesn't necessarily need to be rendered.
*/
createComment(data: string): TComment;
/** Should return the type of the node in string form. */
nodeType(node: TNode): NodeType;
/**
* Return the value of the node:
* - text value of a text node
* - data value of a comment
* - null for elements and fragments
*/
getNodeValue(node: TTextNode | TComment): string | null;
/** Return the value of the attribute with the given name on the element, or null if it doesn't exist. */
getAttribute(element: TElement, name: string): string | null;
/** Set the attribute with the given name and value on the element. */
setAttribute(element: TElement, key: string, value: any): void;
/** Remove the attribute with the given name from the element. */
removeAttribute(element: TElement, name: string): void;
/** Return true if the element has an attribute with the given name. */
hasAttribute(element: TElement, name: string): boolean;
/**
* Set the text content of the node to the given value.
* This should work for both text nodes and elements.
*/
setText(node: TElement | TTextNode | TComment, text: string): void;
/** Return the first child of the element or fragment, or null if it has no children. */
getFirstChild(element: TElement | TFragment): TNode | null;
/** Return the last child of the element or fragment, or null if it has no children. */
getLastChild(element: TElement | TFragment): TNode | null;
/** Return the next sibling of the node, or null if it has no next sibling. */
getNextSibling(node: TElement | TTextNode | TComment): TNode | null;
/**
* Insert the element into the parent before the anchor.
* If anchor is null, insert at the end.
*/
insert(
parent: TElement | TFragment,
element: TNode,
anchor: TElement | TTextNode | TComment | null
): void;
/** Remove the node from the tree. */
remove(node: TElement | TTextNode | TComment): void;
/** Return the parent of the element, or null if it has no parent. */
getParent(element: TElement | TTextNode | TComment): TNode | null;
/** Add an event listener of the given type and handler to the target node. */
addEventListener(target: TElement, type: string, handler: any, options?: any): void;
/** Remove an event listener of the given type and handler from the target node. */
removeEventListener(target: TElement, type: string, handler: any, options?: any): void;
};

2
packages/svelte/src/internal/client/dom/blocks/branches.js
Unescape View File

@ -1,5 +1,5 @@
/** @import { Effect, TemplateNode } from '#client' */
/** @import { Renderer } from '../../custom-renderer' */
/** @import { Renderer } from '../../custom-renderer/types.js' */
import { Batch, current_batch } from '../../reactivity/batch.js';
import {
branch,

148
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -2582,83 +2582,93 @@ declare module 'svelte/renderer' {
unmount: () => void;
};
};
export type Renderer<TFragment extends object = object, TElement extends object = object, TTextNode extends object = object, TComment extends object = object, TNode = TFragment | TElement | TTextNode | TComment> = {
/**
* - Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of it's children.
*/
createFragment: () => TFragment;
/**
* - Creates an element with the given name.
*/
createElement: (name: string) => TElement;
/**
* - Creates a text node with the given data.
*/
createTextNode: (data: string) => TTextNode;
/**
* - Creates a comment node with the given data. This is often used as an anchor for inserting elements, it doesn't necessarily need to be rendered
*/
createComment: (data: string) => TComment;
/**
* - Should return the type of the node in string form ("fragment", "element", "text", "comment").
*/
nodeType: (node: TNode) => "fragment" | "element" | "text" | "comment";
/**
* - Return the value of the node...this should be the text value of a text node, the data value of a comment, null for elements and fragments
*/
getNodeValue: (node: TTextNode | TComment) => string | null;
/**
* - Return the value of the attribute with the given name on the element, or null if it doesn't exist
*/
getAttribute: (element: TElement, name: string) => string | null;
/**
* - Set the attribute with the given name and value on the element
*/
setAttribute: (element: TElement, key: string, value: any) => void;
/**
* - Remove the attribute with the given name from the element
*/
removeAttribute: (element: TElement, name: string) => void;
/**
* - Return true if the element has an attribute with the given name
*/
hasAttribute: (element: TElement, name: string) => boolean;
/**
* - Set the text content of the node to the given value. This should work for both text nodes and elements (setting text content on an element should replace all of it's children with a single text node)
*/
setText: (node: TElement | TTextNode | TComment, text: string) => void;
/**
* - Return the first child of the element, or null if it has no children. This should work for both elements and fragments
*/
getFirstChild: (element: TElement | TFragment) => TNode | null;
/**
* - Return the last child of the element, or null if it has no children. This should work for both elements and fragments
*/
getLastChild: (element: TElement | TFragment) => TNode | null;
/**
* - Return the next sibling of the node, or null if it has no next sibling
*/
getNextSibling: (node: TElement | TTextNode | TComment) => TNode | null;
/**
* - Insert the element into the parent before the anchor (if the anchor is null, insert at the end). This should work for both elements and fragments as parents. If `element` is a fragment, all of it's children should be inserted, not the fragment itself. If the element already has a parent, it should be removed from it's current parent before being inserted into the new parent.
*/
insert: (parent: TElement | TFragment, element: TNode, anchor: TElement | TTextNode | TComment | null) => void;
type NodeType = 'fragment' | 'element' | 'text' | 'comment';
type Renderer<
TFragment extends object = object,
TElement extends object = object,
TTextNode extends object = object,
TComment extends object = object,
TNode extends TFragment | TElement | TTextNode | TComment =
| TFragment
| TElement
| TTextNode
| TComment
> = {
/** Creates a fragment, a container for multiple nodes. Inserting a fragment should insert all of its children. */
createFragment(): TFragment;
/** Creates an element with the given name. */
createElement(name: string): TElement;
/** Creates a text node with the given data. */
createTextNode(data: string): TTextNode;
/**
* - Remove the node from the tree
* Creates a comment node with the given data.
* This is often used as an anchor for inserting elements; it doesn't necessarily need to be rendered.
*/
remove: (node: TElement | TTextNode | TComment) => void;
createComment(data: string): TComment;
/** Should return the type of the node in string form. */
nodeType(node: TNode): NodeType;
/**
* - Return the parent of the element, or null if it has no parent
* Return the value of the node:
* - text value of a text node
* - data value of a comment
* - null for elements and fragments
*/
getParent: (element: TElement | TTextNode | TComment) => TNode | null;
getNodeValue(node: TTextNode | TComment): string | null;
/** Return the value of the attribute with the given name on the element, or null if it doesn't exist. */
getAttribute(element: TElement, name: string): string | null;
/** Set the attribute with the given name and value on the element. */
setAttribute(element: TElement, key: string, value: any): void;
/** Remove the attribute with the given name from the element. */
removeAttribute(element: TElement, name: string): void;
/** Return true if the element has an attribute with the given name. */
hasAttribute(element: TElement, name: string): boolean;
/**
* - Add an event listener of the given type and handler to the target node, with optional options
* Set the text content of the node to the given value.
* This should work for both text nodes and elements.
*/
addEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
setText(node: TElement | TTextNode | TComment, text: string): void;
/** Return the first child of the element or fragment, or null if it has no children. */
getFirstChild(element: TElement | TFragment): TNode | null;
/** Return the last child of the element or fragment, or null if it has no children. */
getLastChild(element: TElement | TFragment): TNode | null;
/** Return the next sibling of the node, or null if it has no next sibling. */
getNextSibling(node: TElement | TTextNode | TComment): TNode | null;
/**
* - Remove an event listener of the given type and handler from the target node, with optional options
* Insert the element into the parent before the anchor.
* If anchor is null, insert at the end.
*/
removeEventListener: (target: TElement, type: string, handler: any, options?: any) => void;
insert(
parent: TElement | TFragment,
element: TNode,
anchor: TElement | TTextNode | TComment | null
): void;
/** Remove the node from the tree. */
remove(node: TElement | TTextNode | TComment): void;
/** Return the parent of the element, or null if it has no parent. */
getParent(element: TElement | TTextNode | TComment): TNode | null;
/** Add an event listener of the given type and handler to the target node. */
addEventListener(target: TElement, type: string, handler: any, options?: any): void;
/** Remove an event listener of the given type and handler from the target node. */
removeEventListener(target: TElement, type: string, handler: any, options?: any): void;
};
/**
* @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.

Write Preview
Loading…
Cancel
Save