(feat) Add accessors autocomplete (#893)

If the component option `accessors` is present / present and set to `true`, add getters and setters to the generated Svelte2TsxComponent class for each exported `let` prop. This way we get autocomplete / intellisense for accessors.
#882

Author: Vatroslav Vrbanic

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);
@@ -278,7 +304,8 @@ function processSvelteTemplate(
         uses$$restProps,
         uses$$slots,
         componentDocumentation,
-        resolvedStores
+        resolvedStores,
+        usesAccessors
     };
 }
 
@@ -289,6 +316,7 @@ function addComponentExport({
     strictEvents,
     isTsFile,
     getters,
+    setters,
     fileName,
     componentDocumentation
 }: AddComponentExportPara) {
@@ -301,19 +329,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);
 }
@@ -353,6 +378,7 @@ function createRenderFunction({
     scriptDestination,
     slots,
     getters,
+    setters,
     events,
     exportedNames,
     isTsFile,
@@ -410,6 +436,7 @@ function createRenderFunction({
         `\nreturn { props: ${exportedNames.createPropsStr(
             isTsFile
         )}, slots: ${slotsAsDef}, getters: ${createRenderFunctionGetterStr(getters)}` +
+        `, setters: ${createRenderFunctionSetterStr(setters)}` +
         `, events: ${events.toDefString()} }}`;
 
     // wrap template with callback
@@ -440,7 +467,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
@@ -467,17 +495,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
@@ -488,6 +517,7 @@ export function svelte2tsx(
         slots,
         events,
         getters,
+        setters,
         exportedNames,
         isTsFile: options?.isTsFile,
         uses$$props,
@@ -511,6 +541,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))) {
 }