Autosubscriptions not working in <script>

[cortopy]

Describe the bug
As mentioned in #81, autosubscriptions work in the html part but not <script>

In the following:

<script lang="ts">
	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';

        let isLarge = $count > 10;
</script>

<h1>Count is now {isLarge ? "large" : "small"}</h1>

<Incrementer/>
<Decrementer/>
<Resetter/>

two errors are thrown because (1) count is not used and (2) $count is undefined.

I know this example is pretty dumb because the evaluation could be done in the HTML, but basically using autosubscriptions in the <script> confuses the ts transpiler.

[TwitchBronBron]

I realize this is a huge hack, but it might at least get rid of the errors. How about we inject variable declarations into the in-memory copy of the source code right before we preprocess it? Some type of algorithm like this:

var autoSubs = [];
var rawTypescriptText = getTextFromScriptTagSomehow();
//regex match every variable that starts with a dollar sign
var regexp = /(\$\w*)/g;
var match;
while (match = regexp.exec(rawTypescriptText)) {
  var name = match[0];
  //add this name if we don't have it yet
  if (autoSubs.indexOf(name) === -1) {
    autoSubs.push(name);
  }
}
//generate the var declaration text. i.e.: "var $item1: any;var $item2: any;var $item3: any;"
var injectedText = autoSubs.reduce(function(cumulativeText, autoSubName){
	return cumulativeText + 'var ' + autoSubName + ': any;';
}, '');

var modifiedTypescriptText = injectedText + rawTypescriptText;
transpile(modifiedTypescriptText);

So this code:

<script lang="typescript">
    import { age } from './ageStore;
    var ageNextYear = $age + 1;
</script>

would become

<script lang="typescript">
    var $age: any;import { age } from './ageStore;
    var ageNextYear = $age + 1;
</script>

If we append to the beginning of the first line, we might need to then fix column offset numbers for any diagnostics that appear on the first line.

This is just the first step, getting rid of the compile errors. Once that's done, perhaps we could do some smarter type detection instead of defaulting to :any.

Something similar could probably be done for unused variables, but those would need to be declared at the very end of whatever scope they came from. For now we could just recommend people disable that noUnusedLocals typescript flag.

[joelmukuthu]

For now we could just recommend people disable that noUnusedLocals typescript flag.

I've spent a couple of days before finally figuring this out -- and declarations too. I'd like to PR this for the README. Are there any other flags that you know of that should be disabled?

@kaisermann are you okay with a PR that adds this to the README?

[kaisermann]

The real solution to this probably requires some significant time, which I don't have at the moment. That would be great @joelmukuthu 😁

[kaisermann]

I'm closing this as we now have some documentation regarding unsupported compiler options. Anyway, the real deal to fix this (and ts support at all) will be the official language tools .