diff --git a/eslint-plugin/src/svelte-check-props.ts b/eslint-plugin/src/svelte-check-props.ts index ef59cbd300..28d4a8cbe3 100644 --- a/eslint-plugin/src/svelte-check-props.ts +++ b/eslint-plugin/src/svelte-check-props.ts @@ -142,33 +142,6 @@ const reportInvalidPropType = ( }); }; -const isDispatchCall = (node: TSESTree.Node | null, eventName: string) => - node && - node.type === TSESTree.AST_NODE_TYPES.CallExpression && - node.callee.type === TSESTree.AST_NODE_TYPES.Identifier && - node.callee.name === 'dispatch' && - node.arguments[0]?.type === TSESTree.AST_NODE_TYPES.Literal && - node.arguments[0].value === eventName; - -const isDispatchCallStatement = (eventName: string) => (node: TSESTree.Node) => - (node.type === TSESTree.AST_NODE_TYPES.ExpressionStatement && isDispatchCall(node.expression, eventName)) || - (node.type === TSESTree.AST_NODE_TYPES.VariableDeclaration && node.declarations.find((declaration) => isDispatchCall(declaration.init, eventName))); - -const findCallToDispatch = (functionNode: TSESTree.Node, eventName: string) => { - const body = - functionNode.type === TSESTree.AST_NODE_TYPES.ArrowFunctionExpression || functionNode.type === TSESTree.AST_NODE_TYPES.FunctionExpression - ? functionNode.body - : undefined; - if (body) { - if (body.type === TSESTree.AST_NODE_TYPES.BlockStatement) { - return body.body.find(isDispatchCallStatement(eventName)); - } else if (isDispatchCall(body, eventName)) { - return body; - } - } - return undefined; -}; - const isBindingAssignment = (node: TSESTree.Node, propName: string) => node.type === TSESTree.AST_NODE_TYPES.AssignmentExpression && node.operator === '=' && @@ -195,18 +168,14 @@ const findBindingAssignment = (functionNode: TSESTree.Node, propName: string) => const fixApiPatchEventHandler = ( fixer: TSESLint.RuleFixer, - name: string, prop: EventInfo, widgetStatementNode: TSESTree.Node, widgetPatchArgNode: TSESTree.ObjectExpression | undefined, eventInApiPatch: TSESTree.Node | undefined, - callToDispatch: TSESTree.Node | undefined, bindingAssignment: TSESTree.Node | undefined, context: Readonly>, ) => { - const arrowFunction = prop.propBinding - ? `(event) => {\n\t${prop.propBinding} = event;\n\tdispatch(${JSON.stringify(name)}, event);\n}` - : `(event) => dispatch(${JSON.stringify(name)}, event)`; + const arrowFunction = `(event) => {\n\t${prop.propBinding} = event;\n}`; if (eventInApiPatch) { if ( (eventInApiPatch.type === TSESTree.AST_NODE_TYPES.ArrowFunctionExpression || @@ -218,9 +187,6 @@ const fixApiPatchEventHandler = ( if (prop.propBinding && !bindingAssignment) { content += `\n${prop.propBinding} = ${eventInApiPatch.params[0].name};`; } - if (!callToDispatch) { - content += `\ndispatch(${JSON.stringify(name)}, ${eventInApiPatch.params[0].name});`; - } const indentation = getChildIndentation(eventInApiPatch.body.body[0], eventInApiPatch.body, context); return insertNewLineBefore(fixer, context.getSourceCode().getLastToken(eventInApiPatch.body)!, addIndentation(content, indentation), context); } @@ -243,30 +209,19 @@ const reportApiPatchEventHandlerIssue = ( widgetStatementNode: TSESTree.Node, widgetPatchArgNode: TSESTree.ObjectExpression | undefined, eventInWidgetPatch: TSESTree.Node | undefined, - callToDispatch: TSESTree.Node | undefined, bindingAssignment: TSESTree.Node | undefined, - context: Readonly>, + context: Readonly>, ) => { context.report({ node: eventInWidgetPatch || widgetPatchArgNode || widgetStatementNode, - messageId: !callToDispatch ? 'missingDispatchCall' : 'missingBindingAssignment', + messageId: 'missingBindingAssignment', data: { name, widgetProp: prop.widgetProp, propBinding: prop.propBinding, }, fix(fixer) { - return fixApiPatchEventHandler( - fixer, - name, - prop, - widgetStatementNode, - widgetPatchArgNode, - eventInWidgetPatch, - callToDispatch, - bindingAssignment, - context, - ); + return fixApiPatchEventHandler(fixer, prop, widgetStatementNode, widgetPatchArgNode, eventInWidgetPatch, bindingAssignment, context); }, }); }; @@ -339,17 +294,15 @@ export const svelteCheckPropsRule = ESLintUtils.RuleCreator.withoutDocs({ const eventsObject = extractEventsObject(widgetNode.init); for (const [eventName, eventInfo] of widgetInfo.events) { const eventInApiPatch = eventsObject?.properties.get(eventInfo.widgetProp); - const callToDispatch = eventInApiPatch ? findCallToDispatch(eventInApiPatch, eventName) : undefined; const bindingAssignment = eventInApiPatch && eventInfo.propBinding ? findBindingAssignment(eventInApiPatch, eventInfo.propBinding) : undefined; - if (!callToDispatch || (!bindingAssignment && eventInfo.propBinding)) { + if (!bindingAssignment && eventInfo.propBinding) { reportApiPatchEventHandlerIssue( eventName, eventInfo, widgetStatementNode, eventsObject?.node, eventInApiPatch, - callToDispatch, bindingAssignment, context, ); @@ -372,7 +325,6 @@ export const svelteCheckPropsRule = ESLintUtils.RuleCreator.withoutDocs({ invalidPropType: 'Invalid type for "export let {{ name }}" declaration: expected {{ expectedType }}, found {{ foundType }}.', missingBoundProp: 'Missing "export let {{ name }}" declaration, as it is a bound property in the API.', missingBoundPropInAPI: 'Missing property {{ name }} in the API.', - missingDispatchCall: 'Could not find call to dispatch("{{name}}") in {{ widgetProp }} listener in call to widget.patch.', missingBindingAssignment: 'Could not find assignment to {{ propBinding }} in {{ widgetProp }} listener in call to widget.patch.', }, type: 'problem', diff --git a/eslint-plugin/test/svelte-check-props.spec.ts b/eslint-plugin/test/svelte-check-props.spec.ts index a23f1170a6..eab36cf99f 100644 --- a/eslint-plugin/test/svelte-check-props.spec.ts +++ b/eslint-plugin/test/svelte-check-props.spec.ts @@ -10,7 +10,7 @@ RuleTester.afterAll = afterAll; describe('svelte-check-props', () => { const codeTemplate = (scriptContent: string, widgetProps: string, events = '{}') => - ``; + ``; const ruleTester = new RuleTester({ plugins: ['svelte'], @@ -45,13 +45,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined;', 'someProp2: string; onSomeProp2Change: (event: string) => void;', - '{onSomeProp2Change: (event) => {dispatch("someProp2Change", event); someProp2 = event;}}', + '{onSomeProp2Change: (event) => {someProp2 = event;}}', ), errors: [{messageId: 'extraProp', data: {name: 'someProp1'}}], output: codeTemplate( 'export let someProp2: string | undefined;', 'someProp2: string; onSomeProp2Change: (event: string) => void;', - '{onSomeProp2Change: (event) => {dispatch("someProp2Change", event); someProp2 = event;}}', + '{onSomeProp2Change: (event) => {someProp2 = event;}}', ), }, { @@ -59,7 +59,7 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined, someProp3: string | undefined;', 'someProp2: string; onSomeProp2Change: (event: string) => void;', - '{onSomeProp2Change: (event) => {dispatch("someProp2Change", event); someProp2 = event;}}', + '{onSomeProp2Change: (event) => {someProp2 = event;}}', ), errors: [ {messageId: 'extraProp', data: {name: 'someProp1'}}, @@ -68,7 +68,7 @@ describe('svelte-check-props', () => { output: codeTemplate( 'export let someProp2: string | undefined;', 'someProp2: string; onSomeProp2Change: (event: string) => void;', - '{onSomeProp2Change: (event) => {dispatch("someProp2Change", event); someProp2 = event;}}', + '{onSomeProp2Change: (event) => {someProp2 = event;}}', ), }, { @@ -76,13 +76,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), errors: [{messageId: 'extraProp', data: {name: 'someProp2'}}], output: codeTemplate( 'export let someProp1: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), }, { @@ -90,7 +90,7 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined, someProp3: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), errors: [ {messageId: 'extraProp', data: {name: 'someProp2'}}, @@ -99,7 +99,7 @@ describe('svelte-check-props', () => { output: codeTemplate( 'export let someProp1: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), }, { @@ -107,7 +107,7 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined, someProp3: string | undefined, someProp4: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), errors: [ {messageId: 'extraProp', data: {name: 'someProp2'}}, @@ -117,7 +117,7 @@ describe('svelte-check-props', () => { output: codeTemplate( 'export let someProp1: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}}', ), }, { @@ -125,7 +125,7 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp1: string | undefined, someProp2: string | undefined, someProp3: string | undefined, someProp4: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void; someProp3: string; onSomeProp3Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}, onSomeProp3Change: (event) => {dispatch("someProp3Change", event); someProp3 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}, onSomeProp3Change: (event) => {someProp3 = event;}}', ), errors: [ {messageId: 'extraProp', data: {name: 'someProp2'}}, @@ -134,21 +134,17 @@ describe('svelte-check-props', () => { output: codeTemplate( 'export let someProp1: string | undefined, someProp3: string | undefined;', 'someProp1: string; onSomeProp1Change: (event: string) => void; someProp3: string; onSomeProp3Change: (event: string) => void;', - '{onSomeProp1Change: (event) => {dispatch("someProp1Change", event); someProp1 = event;}, onSomeProp3Change: (event) => {dispatch("someProp3Change", event); someProp3 = event;}}', + '{onSomeProp1Change: (event) => {someProp1 = event;}, onSomeProp3Change: (event) => {someProp3 = event;}}', ), }, { filename: 'file.svelte', - code: codeTemplate( - '', - 'someProp: string; onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', - ), + code: codeTemplate('', 'someProp: string; onSomePropChange: (event: string) => void;', '{onSomePropChange: (event) => {someProp = event;}}'), errors: [{messageId: 'missingBoundProp', data: {name: 'someProp'}}], output: codeTemplate( '\nexport let someProp: string | undefined = undefined;', 'someProp: string; onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), }, { @@ -156,7 +152,7 @@ describe('svelte-check-props', () => { code: codeTemplate( 'let someProp: string | undefined;', 'onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), errors: [{messageId: 'missingBoundPropInAPI', data: {name: 'someProp'}}], }, @@ -165,17 +161,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp: string | undefined;', 'onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), errors: [ {messageId: 'extraProp', data: {name: 'someProp'}}, {messageId: 'missingBoundPropInAPI', data: {name: 'someProp'}}, ], - output: codeTemplate( - '', - 'onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', - ), + output: codeTemplate('', 'onSomePropChange: (event: string) => void;', '{onSomePropChange: (event) => {someProp = event;}}'), outputError: true, }, { @@ -183,13 +175,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp: string;', 'someProp: string; onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), errors: [{messageId: 'invalidPropType', data: {name: 'someProp', expectedType: 'string | undefined', foundType: 'string'}}], output: codeTemplate( 'export let someProp: string | undefined;', 'someProp: string; onSomePropChange: (event: string) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), }, { @@ -197,13 +189,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp: string | undefined;', 'someProp: number; onSomePropChange: (event: number) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), errors: [{messageId: 'invalidPropType', data: {name: 'someProp', expectedType: 'number | undefined', foundType: 'string | undefined'}}], output: codeTemplate( 'export let someProp: number | undefined;', 'someProp: number; onSomePropChange: (event: number) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), }, { @@ -211,45 +203,23 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let someProp;', 'someProp: number; onSomePropChange: (event: number) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', + '{onSomePropChange: (event) => {someProp = event;}}', ), errors: [{messageId: 'invalidPropType', data: {name: 'someProp', expectedType: 'number | undefined', foundType: 'any'}}], output: codeTemplate( 'export let someProp: number | undefined;', 'someProp: number; onSomePropChange: (event: number) => void;', - '{onSomePropChange: (event) => {dispatch("somePropChange", event); someProp = event;}}', - ), - }, - { - filename: 'file.svelte', - code: codeTemplate('', 'onSomething: (event: number) => void;'), - errors: [{messageId: 'missingDispatchCall', data: {name: 'something', widgetProp: 'onSomething'}}], - output: codeTemplate('', 'onSomething: (event: number) => void;', '{\n\tonSomething: (event) => dispatch("something", event),}'), - }, - { - filename: 'file.svelte', - code: codeTemplate('', 'onSomething: (event: number) => void;', '{\n\tother: 5,\n}'), - errors: [{messageId: 'missingDispatchCall', data: {name: 'something', widgetProp: 'onSomething'}}], - output: codeTemplate('', 'onSomething: (event: number) => void;', '{\n\tonSomething: (event) => dispatch("something", event),\n\tother: 5,\n}'), - }, - { - filename: 'file.svelte', - code: codeTemplate('', 'onSomething: (event: number) => void;', '{\n\tonSomething: (evt) => {\n\t\tsomethingElse(evt);\n\t},\n}'), - errors: [{messageId: 'missingDispatchCall', data: {name: 'something', widgetProp: 'onSomething'}}], - output: codeTemplate( - '', - 'onSomething: (event: number) => void;', - '{\n\tonSomething: (evt) => {\n\t\tsomethingElse(evt);\n\t\n\t\tdispatch("something", evt);\n\t},\n}', + '{onSomePropChange: (event) => {someProp = event;}}', ), }, { filename: 'file.svelte', code: codeTemplate('export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;'), - errors: [{messageId: 'missingDispatchCall', data: {name: 'somethingChange', widgetProp: 'onSomethingChange'}}], + errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t\tdispatch("somethingChange", event);\n\t},}', + '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t},}', ), }, { @@ -259,11 +229,11 @@ describe('svelte-check-props', () => { 'onSomethingChange: (event: number) => void;\nsomething: number;', '{\n\tother: 5,\n}', ), - errors: [{messageId: 'missingDispatchCall', data: {name: 'somethingChange', widgetProp: 'onSomethingChange'}}], + errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t\tdispatch("somethingChange", event);\n\t},\n\tother: 5,\n}', + '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t},\n\tother: 5,\n}', ), }, { @@ -273,11 +243,11 @@ describe('svelte-check-props', () => { 'onSomethingChange: (event: number) => void;\nsomething: number;', '{\n\tonSomethingChange: (evt) => {\n\t\tsomethingElse(evt);\n\t},\n}', ), - errors: [{messageId: 'missingDispatchCall', data: {name: 'somethingChange', widgetProp: 'onSomethingChange'}}], + errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (evt) => {\n\t\tsomethingElse(evt);\n\t\n\t\tsomething = evt;\n\t\tdispatch("somethingChange", evt);\n\t},\n}', + '{\n\tonSomethingChange: (evt) => {\n\t\tsomethingElse(evt);\n\t\n\t\tsomething = evt;\n\t},\n}', ), }, { @@ -285,13 +255,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (evt) => {\n\t\tdispatch("somethingChange", evt);\n\t},\n}', + '{\n\tonSomethingChange: (evt) => {\n\t\t\n\t},\n}', ), errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (evt) => {\n\t\tdispatch("somethingChange", evt);\n\t\n\t\tsomething = evt;\n\t},\n}', + '{\n\tonSomethingChange: (evt) => {\n\t\t\n\t\n\t\tsomething = evt;\n\t},\n}', ), }, { @@ -299,13 +269,13 @@ describe('svelte-check-props', () => { code: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (evt) => dispatch("somethingChange", evt),\n}', + '{\n\tonSomethingChange: (evt) => callSomething(),\n}', ), errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t\tdispatch("somethingChange", event);\n\t},\n}', + '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t},\n}', ), }, { @@ -315,25 +285,11 @@ describe('svelte-check-props', () => { 'onSomethingChange: (event: number) => void;\nsomething: number;', '{\n\tonSomethingChange: undefined,\n}', ), - errors: [{messageId: 'missingDispatchCall', data: {name: 'somethingChange', widgetProp: 'onSomethingChange'}}], - output: codeTemplate( - 'export let something: number | undefined;', - 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t\tdispatch("somethingChange", event);\n\t},\n}', - ), - }, - { - filename: 'file.svelte', - code: codeTemplate( - 'export let something: number | undefined;', - 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => something = event,\n}', - ), - errors: [{messageId: 'missingDispatchCall', data: {name: 'somethingChange', widgetProp: 'onSomethingChange'}}], + errors: [{messageId: 'missingBindingAssignment', data: {propBinding: 'something', widgetProp: 'onSomethingChange'}}], output: codeTemplate( 'export let something: number | undefined;', 'onSomethingChange: (event: number) => void;\nsomething: number;', - '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t\tdispatch("somethingChange", event);\n\t},\n}', + '{\n\tonSomethingChange: (event) => {\n\t\tsomething = event;\n\t},\n}', ), }, ]; @@ -350,6 +306,18 @@ describe('svelte-check-props', () => { { code: codeTemplate('', ''), }, + { + filename: 'file.svelte', + code: codeTemplate('', 'onSomething: (event: number) => void;'), + }, + { + filename: 'file.svelte', + code: codeTemplate( + 'export let something: number | undefined;', + 'onSomethingChange: (event: number) => void;\nsomething: number;', + '{\n\tonSomethingChange: (event) => something = event,\n}', + ), + }, ...invalid .filter(({output, outputError}) => !!output && !outputError) .map(({output}) => ({ diff --git a/svelte/demo/samples/alert/Dynamic.route.svelte b/svelte/demo/samples/alert/Dynamic.route.svelte index 4b6dbeb278..d5d391792d 100644 --- a/svelte/demo/samples/alert/Dynamic.route.svelte +++ b/svelte/demo/samples/alert/Dynamic.route.svelte @@ -35,5 +35,5 @@ {#each $alerts$ as alert (alert)} {@const {dismissible, animationOnInit, animation, type, slotDefault} = alert} - alerts$.remove(alert)} /> + alerts$.remove(alert)} /> {/each} diff --git a/svelte/demo/samples/rating/Default.route.svelte b/svelte/demo/samples/rating/Default.route.svelte index 37cd6be3f9..6896e73680 100644 --- a/svelte/demo/samples/rating/Default.route.svelte +++ b/svelte/demo/samples/rating/Default.route.svelte @@ -6,7 +6,7 @@ let left = 0; - (hovered = e.detail)} on:leave={(e) => (left = e.detail)} ariaLabel="rating" /> + (hovered = e)} onLeave={(e) => (left = e)} ariaLabel="rating" />
Current rate: {rating}
Hovered: {hovered}
diff --git a/svelte/headless/config.ts b/svelte/headless/config.ts index 5c950df4ad..46e3e74fa2 100644 --- a/svelte/headless/config.ts +++ b/svelte/headless/config.ts @@ -74,7 +74,7 @@ export const widgetsConfigFactory = >; defaultConfig?: Partial> | ReadableSignal> | undefined>; - events: Pick, keyof WidgetProps & `on${string}`>; + events: Pick, keyof WidgetProps & `on${string}Change`>; }) => callWidgetFactoryWithConfig({ factory, diff --git a/svelte/headless/slotTypes.ts b/svelte/headless/slotTypes.ts index 46680f76f3..4e4e95b54e 100644 --- a/svelte/headless/slotTypes.ts +++ b/svelte/headless/slotTypes.ts @@ -5,12 +5,6 @@ export const useSvelteSlot = Symbol('useSvelteSlot'); export type WidgetPropsProps = Partial; -export type WidgetPropsEvents = { - [K in keyof Props & `on${string}` as K extends `on${infer U}` ? Uncapitalize : never]: NonNullable extends (arg: infer U) => void - ? CustomEvent - : never; -}; - export type WidgetPropsSlots = { [K in keyof Props & `slot${string}` as K extends `slot${infer U}` ? Uncapitalize : never]: Props[K] extends SlotContent ? U : never; }; diff --git a/svelte/headless/utils.ts b/svelte/headless/utils.ts index 55724d34a4..0f66c75fdd 100644 --- a/svelte/headless/utils.ts +++ b/svelte/headless/utils.ts @@ -2,7 +2,6 @@ import type {Widget, WidgetFactory, WidgetProps} from '@agnos-ui/core'; import {findChangedProperties, toReadableStore} from '@agnos-ui/core'; import type {ReadableSignal, WritableSignal} from '@amadeus-it-group/tansu'; import {asReadable, computed, writable} from '@amadeus-it-group/tansu'; -import {createEventDispatcher as svelteCreateEventDispatcher} from 'svelte'; import type {SlotContent, SlotSvelteComponent, SlotsPresent} from './slotTypes'; import {useSvelteSlot} from './slotTypes'; @@ -17,9 +16,6 @@ export function createPatchChangedProps(patchFn: (arg: Partial }; } -export const createEventDispatcher = () => - svelteCreateEventDispatcher<{[K in keyof T]: T[K] extends CustomEvent ? U : never}>(); - /** * Merges two functions. * @param fn1 - first function @@ -61,7 +57,7 @@ export const callWidgetFactoryWithConfig = ({ $$slots: SlotsPresent>; defaultConfig?: Partial> | ReadableSignal> | undefined>; widgetConfig?: null | undefined | ReadableSignal> | undefined>; - events: Pick, keyof WidgetProps & `on${string}`>; + events: Pick, keyof WidgetProps & `on${string}Change`>; }): W & {patchChangedProps: W['patch']} => { const defaultConfig$ = toReadableStore(defaultConfig); const processedSlots: any = {}; @@ -71,7 +67,7 @@ export const callWidgetFactoryWithConfig = ({ } } const props: {[key in keyof WidgetProps]: WritableSignal[key]>} = {} as any; - for (const event of Object.keys(events) as (keyof WidgetProps & `on${string}`)[]) { + for (const event of Object.keys(events) as (keyof WidgetProps & `on${string}Change`)[]) { props[event] = eventStore(events[event] as any) as any; } const widget = factory({ diff --git a/svelte/lib/accordion/Accordion.svelte b/svelte/lib/accordion/Accordion.svelte index 8c84611599..be03fb95ab 100644 --- a/svelte/lib/accordion/Accordion.svelte +++ b/svelte/lib/accordion/Accordion.svelte @@ -1,15 +1,13 @@