Add accessors autocomplete

packages/svelte2tsx/src/svelte2tsx/index.ts

@@ -9,6 +9,7 @@ import { ComponentEvents } from './nodes/ComponentEvents';
 import { EventHandler } from './nodes/event-handler';
 import { ExportedNames } from './nodes/ExportedNames';
 import { createClassGetters, createRenderFunctionGetterStr } from './nodes/exportgetters';
+import { createClassSetters, createRenderFunctionSetterStr } from './nodes/exportsetters';
 import {
     handleScopeAndResolveForSlot,
     handleScopeAndResolveLetVarForSlot
@@ -45,6 +46,7 @@ interface AddComponentExportPara {
     strictEvents: boolean;
     isTsFile: boolean;
     getters: Set<string>;
+    setters: Set<string>;
     fileName?: string;
     componentDocumentation: ComponentDocumentation;
 }
@@ -60,6 +62,7 @@ type TemplateProcessResult = {
     componentDocumentation: ComponentDocumentation;
     events: ComponentEvents;
     resolvedStores: string[];
+    usesAccessors: boolean;
 };
 
 /**
@@ -77,6 +80,7 @@ function processSvelteTemplate(
     let uses$$props = false;
     let uses$$restProps = false;
     let uses$$slots = false;
+    let usesAccessors = false;
 
     const componentDocumentation = new ComponentDocumentation();
 
@@ -90,6 +94,25 @@ function processSvelteTemplate(
     const stores = new Stores(scopeStack, str, isDeclaration);
     const scripts = new Scripts(htmlxAst);
 
+    const handleSvelteOptions = (node: Node) => {
+        for (let i = 0; i < node.attributes.length; i++) {
+            const optionName = node.attributes[i].name;
+            const optionValue = node.attributes[i].value;
+
+            switch (optionName) {
+                case 'accessors':
+                    if (Array.isArray(optionValue)) {
+                        if (optionValue[0].type === 'MustacheTag') {
+                            usesAccessors = optionValue[0].expression.value;
+                        }
+                    } else {
+                        usesAccessors = true;
+                    }
+                    break;
+            }
+        }
+    };
+
     const handleIdentifier = (node: Node) => {
         if (node.name === '$$props') {
             uses$$props = true;
@@ -177,6 +200,9 @@ function processSvelteTemplate(
             case 'Comment':
                 componentDocumentation.handleComment(node);
                 break;
+            case 'Options':
+                handleSvelteOptions(node);
+                break;
             case 'Identifier':
                 handleIdentifier(node);
                 stores.handleIdentifier(node, parent, prop);
@@ -273,7 +299,8 @@ function processSvelteTemplate(
         uses$$restProps,
         uses$$slots,
         componentDocumentation,
-        resolvedStores
+        resolvedStores,
+        usesAccessors
     };
 }
 
@@ -284,6 +311,7 @@ function addComponentExport({
     strictEvents,
     isTsFile,
     getters,
+    setters,
     fileName,
     componentDocumentation
 }: AddComponentExportPara) {
@@ -296,19 +324,16 @@ function addComponentExport({
             ? uses$$propsOr$$restProps
                 ? `__sveltets_with_any(${eventsDef})`
                 : eventsDef
-            : `__sveltets_partial${isTsFile ? '_ts' : ''}${
-                  uses$$propsOr$$restProps ? '_with_any' : ''
-              }(${eventsDef})`;
+            : `__sveltets_partial${isTsFile ? '_ts' : ''}${uses$$propsOr$$restProps ? '_with_any' : ''
+            }(${eventsDef})`;
 
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName);
 
     const statement =
-        `\n\n${doc}export default class${
-            className ? ` ${className}` : ''
+        `\n\n${doc}export default class${className ? ` ${className}` : ''
         } extends createSvelte2TsxComponent(${propDef}) {` +
-        createClassGetters(getters) +
-        '\n}';
+        createClassGetters(getters) + createClassSetters(setters) + '\n}';
 
     str.append(statement);
 }
@@ -348,6 +373,7 @@ function createRenderFunction({
     scriptDestination,
     slots,
     getters,
+    setters,
     events,
     exportedNames,
     isTsFile,
@@ -405,6 +431,7 @@ function createRenderFunction({
         `\nreturn { props: ${exportedNames.createPropsStr(
             isTsFile
         )}, slots: ${slotsAsDef}, getters: ${createRenderFunctionGetterStr(getters)}` +
+        `, setters: ${createRenderFunctionSetterStr(setters)}` +
         `, events: ${events.toDefString()} }}`;
 
     // wrap template with callback
@@ -435,7 +462,8 @@ export function svelte2tsx(
         uses$$restProps,
         events,
         componentDocumentation,
-        resolvedStores
+        resolvedStores,
+        usesAccessors
     } = processSvelteTemplate(str, options);
 
     /* Rearrange the script tags so that module is first, and instance second followed finally by the template
@@ -459,17 +487,18 @@ export function svelte2tsx(
     //move the instance script and process the content
     let exportedNames = new ExportedNames();
     let getters = new Set<string>();
+    let setters = new Set<string>();
     if (scriptTag) {
         //ensure it is between the module script and the rest of the template (the variables need to be declared before the jsx template)
         if (scriptTag.start != instanceScriptTarget) {
             str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
         }
-        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues);
+        const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, usesAccessors);
         uses$$props = uses$$props || res.uses$$props;
         uses$$restProps = uses$$restProps || res.uses$$restProps;
         uses$$slots = uses$$slots || res.uses$$slots;
 
-        ({ exportedNames, events, getters } = res);
+        ({ exportedNames, events, getters, setters } = res);
     }
 
     //wrap the script tag and template content in a function returning the slot and exports
@@ -480,6 +509,7 @@ export function svelte2tsx(
         slots,
         events,
         getters,
+        setters,
         exportedNames,
         isTsFile: options?.isTsFile,
         uses$$props,
@@ -503,6 +533,7 @@ export function svelte2tsx(
         strictEvents: events.hasInterface(),
         isTsFile: options?.isTsFile,
         getters,
+        setters,
         fileName: options?.filename,
         componentDocumentation
     });

packages/svelte2tsx/src/svelte2tsx/nodes/exportsetters.ts

@@ -0,0 +1,12 @@
+export const createClassSetter = (name: string) =>
+    `\n
+    /**accessor*/\n${' '.repeat(4)}set ${name}(${name}) {}`;
+
+export const createClassSetters = (names: Set<string>) => {
+    return Array.from(names).map(createClassSetter).join('');
+};
+
+export function createRenderFunctionSetterStr(setters: Set<string>) {
+    const properties = Array.from(setters).map((name) => `${name}: ${name}`);
+    return `{${properties.join(', ')}}`;
+}

packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts

@@ -21,6 +21,7 @@ export interface InstanceScriptProcessResult {
     uses$$restProps: boolean;
     uses$$slots: boolean;
     getters: Set<string>;
+    setters: Set<string>;
 }
 
 interface PendingStoreResolution {
@@ -33,7 +34,8 @@ export function processInstanceScriptContent(
     str: MagicString,
     script: Node,
     events: ComponentEvents,
-    implicitStoreValues: ImplicitStoreValues
+    implicitStoreValues: ImplicitStoreValues,
+    usesAccessors: boolean
 ): InstanceScriptProcessResult {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
@@ -47,6 +49,7 @@ export function processInstanceScriptContent(
     const astOffset = script.content.start;
     const exportedNames = new ExportedNames();
     const getters = new Set<string>();
+    const setters = new Set<string>();
 
     const implicitTopLevelNames = new ImplicitTopLevelNames();
     let uses$$props = false;
@@ -101,6 +104,11 @@ export function processInstanceScriptContent(
             const name = identifier.getText();
             const end = declaration.end + astOffset;
 
+            if (usesAccessors) {
+                setters.add(name);
+                getters.add(name);
+            }
+
             str.appendLeft(end, `;${name} = __sveltets_any(${name});`);
         };
 
@@ -499,6 +507,7 @@ export function processInstanceScriptContent(
         uses$$props,
         uses$$restProps,
         uses$$slots,
-        getters
+        getters,
+        setters
     };
 }

packages/svelte2tsx/test/sourcemaps/event-binding.html

@@ -4,7 +4,7 @@
                                                                                      1====           2================== 
 <button onclick={(__sveltets_store_get(check), $check) ? method1 : method2} >Bla</button></>
                                        3====           4==================
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/sourcemaps/let.html

@@ -5,7 +5,7 @@
 ;
 () => (<>
 </>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/sourcemaps/repl.html

@@ -178,7 +178,7 @@
 	</> : <></>}
 </div>
 </>);
-return { props: {slug: slug , chapter: chapter}, slots: {}, getters: {}, events: {} }}
+return { props: {slug: slug , chapter: chapter}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/$store-assign/expected.tsx

@@ -23,7 +23,7 @@
     (__sveltets_store_get(store), $store).b = false;
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/$store-index/expected.tsx

@@ -3,7 +3,7 @@
 <>{someRecordOrArr[(__sveltets_store_get(store), $store)]}
 {someObject['$store']}
 {someObject.$store}</>
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx

@@ -4,7 +4,7 @@
      let [a,b,c] = [1,2,3];
 ;
 () => (<></>);
-return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, events: {} }}
+return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx

@@ -2,7 +2,7 @@
 <></>;function render() {
 ;(__sveltets_store_get(var), $var);
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx

@@ -2,7 +2,7 @@
 <></>;function render() {
    ;(__sveltets_store_get(var), $var);
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx

@@ -13,7 +13,7 @@ function render() {
 </>; __sveltets_awaitThen(_$$p, (data) => {<>
 	{data}
 </>})}}</>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/binding-group-store/expected.tsx

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 <></>;function render() {
 <><input id="dom-input" type="radio" {...__sveltets_empty((__sveltets_store_get(compile_options), $compile_options).generate)} value="dom"/></>
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx

@@ -88,7 +88,7 @@
 		<input type="range" value={selected.r} oninput={adjust}/>
 	</div>
 </> : <></>}</>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/commented-out-script/expected.tsx

@@ -6,7 +6,7 @@
 () => (<>
 
 </>);
-return { props: {}, slots: {}, getters: {}, events: {} }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx

@@ -7,7 +7,7 @@
 <div>
     <slot a={b}>Hello</slot>
 </div></>);
-return { props: {}, slots: {'default': {a:b}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:b}}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx

@@ -13,7 +13,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} as unknown as ComponentEvents }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx

@@ -11,7 +11,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} as unknown as ComponentEvents }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx

@@ -11,7 +11,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, setters: {}, events: {} as unknown as ComponentEvents }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx

@@ -11,7 +11,7 @@
     <slot name="test" c={d} e={e}></slot>
     <slot name="abc-cde.113"></slot>
 </div></>);
-return { props: {}, slots: {'default': {a:b}, 'test': {c:d, e:e}, 'abc-cde.113': {}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:b}, 'test': {c:d, e:e}, 'abc-cde.113': {}}, getters: {}, setters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }