svelte
Advanced tools
Comparing version 5.0.0-next.179 to 5.0.0-next.180
@@ -5,3 +5,3 @@ { | ||
"license": "MIT", | ||
"version": "5.0.0-next.179", | ||
"version": "5.0.0-next.180", | ||
"type": "module", | ||
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts", |
@@ -74,3 +74,3 @@ /** @import { Visitors } from 'zimmerframe' */ | ||
if (node.metadata.rule?.metadata.parent_rule) { | ||
if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) { | ||
const has_explicit_nesting_selector = selectors.some((selector) => | ||
@@ -77,0 +77,0 @@ selector.selectors.some((s) => s.type === 'NestingSelector') |
@@ -386,3 +386,3 @@ import is_reference from 'is-reference'; | ||
// because $set method needs accessors | ||
!!options.legacy?.componentApi, | ||
options.compatibility?.componentApi === 4, | ||
reactive_statements: new Map(), | ||
@@ -389,0 +389,0 @@ binding_groups: new Map(), |
@@ -286,3 +286,3 @@ /** @import * as ESTree from 'estree' */ | ||
if (options.legacy.componentApi) { | ||
if (options.compatibility.componentApi === 4) { | ||
component_returned_object.push( | ||
@@ -336,19 +336,13 @@ b.init('$set', b.id('$.update_legacy_props')), | ||
const append_styles = | ||
analysis.inject_styles && analysis.css.ast | ||
? () => | ||
component_block.body.push( | ||
b.stmt( | ||
b.call( | ||
'$.append_styles', | ||
b.id('$$anchor'), | ||
b.literal(analysis.css.hash), | ||
b.literal(render_stylesheet(source, analysis, options).code) | ||
) | ||
) | ||
) | ||
: () => {}; | ||
if (analysis.css.ast !== null && analysis.inject_styles) { | ||
const hash = b.literal(analysis.css.hash); | ||
const code = b.literal(render_stylesheet(analysis.source, analysis, options).code); | ||
append_styles(); | ||
state.hoisted.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)]))); | ||
component_block.body.unshift( | ||
b.stmt(b.call('$.append_styles', b.id('$$anchor'), b.id('$$css'))) | ||
); | ||
} | ||
const should_inject_context = | ||
@@ -428,6 +422,22 @@ analysis.needs_context || | ||
if (options.hmr) { | ||
const accept_fn = b.arrow( | ||
[b.id('module')], | ||
b.block([b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default'))))]) | ||
); | ||
const accept_fn_body = [ | ||
b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default')))) | ||
]; | ||
if (analysis.css.hash) { | ||
// remove existing `<style>` element, in case CSS changed | ||
accept_fn_body.unshift( | ||
b.stmt( | ||
b.call( | ||
b.member( | ||
b.call('document.querySelector', b.literal('#' + analysis.css.hash)), | ||
b.id('remove'), | ||
false, | ||
true | ||
) | ||
) | ||
) | ||
); | ||
} | ||
body.push( | ||
@@ -440,2 +450,3 @@ component, | ||
b.const(b.id('filename'), b.member(b.id(analysis.name), b.id('filename'))), | ||
b.const(b.id('accept'), b.arrow([b.id('module')], b.block(accept_fn_body))), | ||
b.stmt(b.assignment('=', b.id(analysis.name), b.call('$.hmr', b.id('s')))), | ||
@@ -449,6 +460,10 @@ b.stmt( | ||
b.stmt( | ||
b.call('import.meta.hot.acceptExports', b.array([b.literal('default')]), accept_fn) | ||
b.call( | ||
'import.meta.hot.acceptExports', | ||
b.array([b.literal('default')]), | ||
b.id('accept') | ||
) | ||
) | ||
]), | ||
b.block([b.stmt(b.call('import.meta.hot.accept', accept_fn))]) | ||
b.block([b.stmt(b.call('import.meta.hot.accept', b.id('accept')))]) | ||
) | ||
@@ -482,3 +497,3 @@ ]) | ||
if (options.legacy.componentApi) { | ||
if (options.compatibility.componentApi === 4) { | ||
body.unshift(b.imports([['createClassComponent', '$$_createClassComponent']], 'svelte/legacy')); | ||
@@ -485,0 +500,0 @@ component_block.body.unshift( |
@@ -102,4 +102,4 @@ import type { | ||
/** | ||
* - `'injected'`: styles will be included in the JavaScript class and injected at runtime for the components actually rendered. | ||
* - `'external'`: the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. | ||
* - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root. | ||
* - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. | ||
* This is always `'injected'` when compiling with `customElement` mode. | ||
@@ -145,3 +145,3 @@ */ | ||
*/ | ||
legacy?: { | ||
compatibility?: { | ||
/** | ||
@@ -151,5 +151,5 @@ * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 — | ||
* or as an object with a `.render(...)` method when compiling for the server | ||
* @default false | ||
* @default 5 | ||
*/ | ||
componentApi?: boolean; | ||
componentApi?: 4 | 5; | ||
}; | ||
@@ -232,3 +232,3 @@ /** | ||
| 'name' | ||
| 'legacy' | ||
| 'compatibility' | ||
| 'outputFilename' | ||
@@ -243,3 +243,3 @@ | 'cssOutputFilename' | ||
sourcemap: CompileOptions['sourcemap']; | ||
legacy: Required<Required<CompileOptions>['legacy']>; | ||
compatibility: Required<Required<CompileOptions>['compatibility']>; | ||
runes: CompileOptions['runes']; | ||
@@ -246,0 +246,0 @@ customElementOptions: SvelteOptions['customElement']; |
@@ -81,4 +81,8 @@ /** @import { ModuleCompileOptions, ValidatedModuleCompileOptions, CompileOptions, ValidatedCompileOptions } from '#compiler' */ | ||
legacy: object({ | ||
componentApi: boolean(false) | ||
legacy: removed( | ||
'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead' | ||
), | ||
compatibility: object({ | ||
componentApi: list([4, 5], 5) | ||
}), | ||
@@ -85,0 +89,0 @@ |
@@ -59,2 +59,4 @@ import { STATE_SYMBOL } from '../../../constants.js'; | ||
}); | ||
return element_or_component; | ||
} |
@@ -44,3 +44,3 @@ import { set, source } from '../../reactivity/sources.js'; | ||
/** | ||
* Used to simulate `$on` on a component instance when `legacy.componentApi` is `true` | ||
* Used to simulate `$on` on a component instance when `compatibility.componentApi === 4` | ||
* @param {Record<string, any>} $$props | ||
@@ -57,3 +57,3 @@ * @param {string} event_name | ||
/** | ||
* Used to simulate `$set` on a component instance when `legacy.componentApi` is `true`. | ||
* Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`. | ||
* Needs component accessors so that it can call the setter of the prop. Therefore doesn't | ||
@@ -60,0 +60,0 @@ * work for updating props in `$$props` or `$$restProps`. |
@@ -79,3 +79,3 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */ | ||
/** | ||
* Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `legacy.componentApi` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information | ||
* Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information | ||
* @param {string} component | ||
@@ -87,3 +87,3 @@ * @param {string} name | ||
if (DEV) { | ||
const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`legacy.componentApi\` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`); | ||
const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`); | ||
@@ -90,0 +90,0 @@ error.name = 'Svelte error'; |
@@ -23,2 +23,3 @@ export { add_locations } from './dev/elements.js'; | ||
export { head } from './dom/blocks/svelte-head.js'; | ||
export { append_styles } from './dom/css.js'; | ||
export { action } from './dom/elements/actions.js'; | ||
@@ -124,3 +125,3 @@ export { | ||
} from './reactivity/store.js'; | ||
export { append_styles, set_text } from './render.js'; | ||
export { set_text } from './render.js'; | ||
export { | ||
@@ -127,0 +128,0 @@ get, |
@@ -112,2 +112,5 @@ import { | ||
effect.f |= EFFECT_RAN; | ||
} catch (e) { | ||
destroy_effect(effect); | ||
throw e; | ||
} finally { | ||
@@ -114,0 +117,0 @@ set_is_flushing_effect(previously_flushing_effect); |
@@ -25,2 +25,3 @@ import { DEV } from 'esm-env'; | ||
import { assign_nodes } from './dom/template.js'; | ||
import { queue_micro_task } from './dom/task.js'; | ||
@@ -298,33 +299,1 @@ /** @type {Set<string>} */ | ||
} | ||
/** | ||
* @param {Node} target | ||
* @param {string} style_sheet_id | ||
* @param {string} styles | ||
*/ | ||
export async function append_styles(target, style_sheet_id, styles) { | ||
// Wait a tick so that the template is added to the dom, else getRootNode() will yield wrong results | ||
// If it turns out that this results in noticeable flickering, we need to do something like doing the | ||
// append outside and adding code in mount that appends all stylesheets (similar to how we do it with event delegation) | ||
await Promise.resolve(); | ||
const append_styles_to = get_root_for_style(target); | ||
if (!append_styles_to.getElementById(style_sheet_id)) { | ||
const style = document.createElement('style'); | ||
style.id = style_sheet_id; | ||
style.textContent = styles; | ||
const target = /** @type {Document} */ (append_styles_to).head || append_styles_to; | ||
target.appendChild(style); | ||
} | ||
} | ||
/** | ||
* @param {Node} node | ||
*/ | ||
function get_root_for_style(node) { | ||
if (!node) return document; | ||
const root = node.getRootNode ? node.getRootNode() : node.ownerDocument; | ||
if (root && /** @type {ShadowRoot} */ (root).host) { | ||
return /** @type {ShadowRoot} */ (root); | ||
} | ||
return /** @type {Document} */ (node.ownerDocument); | ||
} |
@@ -15,4 +15,5 @@ import { untrack } from './runtime.js'; | ||
/** | ||
* @param {() => any} component_fn | ||
* @returns {any} | ||
* @template Component | ||
* @param {() => Component} component_fn | ||
* @returns {Component} | ||
*/ | ||
@@ -19,0 +20,0 @@ export function validate_dynamic_component(component_fn) { |
@@ -0,1 +1,3 @@ | ||
/** @import { Component, Payload, RenderOutput } from '#server' */ | ||
/** @import { Store } from '#shared' */ | ||
import { is_promise, noop } from '../shared/utils.js'; | ||
@@ -40,15 +42,14 @@ import { subscribe_to_store } from '../../store/utils.js'; | ||
/** @returns {import('#server').Payload} */ | ||
function create_payload() { | ||
return { out: '', head: { title: '', out: '', anchor: 0 }, anchor: 0 }; | ||
} | ||
/** | ||
* @param {import('#server').Payload} to_copy | ||
* @returns {import('#server').Payload} | ||
* @param {Payload} to_copy | ||
* @returns {Payload} | ||
*/ | ||
export function copy_payload(to_copy) { | ||
export function copy_payload({ out, css, head }) { | ||
return { | ||
...to_copy, | ||
head: { ...to_copy.head } | ||
out, | ||
css: new Set(css), | ||
head: { | ||
title: head.title, | ||
out: head.out | ||
} | ||
}; | ||
@@ -59,4 +60,4 @@ } | ||
* Assigns second payload to first | ||
* @param {import('#server').Payload} p1 | ||
* @param {import('#server').Payload} p2 | ||
* @param {Payload} p1 | ||
* @param {Payload} p2 | ||
* @returns {void} | ||
@@ -67,7 +68,6 @@ */ | ||
p1.head = p2.head; | ||
p1.anchor = p2.anchor; | ||
} | ||
/** | ||
* @param {import('#server').Payload} payload | ||
* @param {Payload} payload | ||
* @param {string} tag | ||
@@ -110,6 +110,7 @@ * @param {() => void} attributes_fn | ||
* @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} [options] | ||
* @returns {import('#server').RenderOutput} | ||
* @returns {RenderOutput} | ||
*/ | ||
export function render(component, options = {}) { | ||
const payload = create_payload(); | ||
/** @type {Payload} */ | ||
const payload = { out: '', css: new Set(), head: { title: '', out: '' } }; | ||
@@ -122,3 +123,3 @@ const prev_on_destroy = on_destroy; | ||
push(); | ||
/** @type {import('#server').Component} */ (current_component).c = options.context; | ||
/** @type {Component} */ (current_component).c = options.context; | ||
} | ||
@@ -137,4 +138,10 @@ | ||
let head = payload.head.out + payload.head.title; | ||
for (const { hash, code } of payload.css) { | ||
head += `<style id="${hash}">${code}</style>`; | ||
} | ||
return { | ||
head: payload.head.out || payload.head.title ? payload.head.out + payload.head.title : '', | ||
head, | ||
html: payload.out, | ||
@@ -146,4 +153,4 @@ body: payload.out | ||
/** | ||
* @param {import('#server').Payload} payload | ||
* @param {(head_payload: import('#server').Payload['head']) => void} fn | ||
* @param {Payload} payload | ||
* @param {(head_payload: Payload['head']) => void} fn | ||
* @returns {void} | ||
@@ -172,3 +179,3 @@ */ | ||
/** | ||
* @param {import('#server').Payload} payload | ||
* @param {Payload} payload | ||
* @param {boolean} is_html | ||
@@ -320,3 +327,3 @@ * @param {Record<string, string>} props | ||
* @param {string} store_name | ||
* @param {import('#shared').Store<V> | null | undefined} store | ||
* @param {Store<V> | null | undefined} store | ||
* @returns {V} | ||
@@ -348,3 +355,3 @@ */ | ||
* @template V | ||
* @param {import('#shared').Store<V>} store | ||
* @param {Store<V>} store | ||
* @param {V} value | ||
@@ -363,3 +370,3 @@ * @returns {V} | ||
* @param {string} store_name | ||
* @param {import('#shared').Store<V>} store | ||
* @param {Store<V>} store | ||
* @param {any} expression | ||
@@ -375,3 +382,3 @@ */ | ||
* @param {string} store_name | ||
* @param {import('#shared').Store<number>} store | ||
* @param {Store<number>} store | ||
* @param {1 | -1} [d] | ||
@@ -389,3 +396,3 @@ * @returns {number} | ||
* @param {string} store_name | ||
* @param {import('#shared').Store<number>} store | ||
* @param {Store<number>} store | ||
* @param {1 | -1} [d] | ||
@@ -428,4 +435,4 @@ * @returns {number} | ||
/** | ||
* @param {import('#server').Payload} payload | ||
* @param {void | ((payload: import('#server').Payload, props: Record<string, unknown>) => void)} slot_fn | ||
* @param {Payload} payload | ||
* @param {void | ((payload: Payload, props: Record<string, unknown>) => void)} slot_fn | ||
* @param {Record<string, unknown>} slot_props | ||
@@ -432,0 +439,0 @@ * @param {null | (() => void)} fallback_fn |
@@ -16,7 +16,6 @@ export interface Component { | ||
out: string; | ||
anchor: number; | ||
css: Set<{ hash: string; code: string }>; | ||
head: { | ||
title: string; | ||
out: string; | ||
anchor: number; | ||
}; | ||
@@ -23,0 +22,0 @@ } |
@@ -9,3 +9,3 @@ // generated during release, do not modify | ||
*/ | ||
export const VERSION = '5.0.0-next.179'; | ||
export const VERSION = '5.0.0-next.180'; | ||
export const PUBLIC_VERSION = '5'; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2128366
212
46715