svelte plugin: <Component> is not defined

[pyoner]

I have 2 files:
App.svelte

<h1>Hello {name}!</h1>
<Form data="data value" wrapper="wrapper" schema="form schema" />

<style>
  h1 {
    color: purple;
  }
</style>

<script lang="ts">
  import Form from "./Form.svelte";
  export let name;
</script>

Form.svelte

<form>
  <h1>A Form component</h1>
  <p>props</p>
  <ul>
    <li>data - {data}</li>
    <li>wrapper - {wrapper}</li>
    <li>schema - {schema}</li>
  </ul>
</form>

<script lang="ts">
  export let data;
  export let wrapper;
  export let schema;
</script>

And got an error:

svelte-form/src/App.svelte (2,18): Cannot find module './Form.svelte'.
(!) svelte plugin: 'Form' is not defined

but if I remove an attribute lang="ts" from the App.svelte file it works

[pyoner]

I think the typescript compiler can't import a svelte file
We need to preprocess the svelte file

Recursion has occurred :)

[PaulMaly]

@pyoner I think we should somehow convince Typescript compiler don't import svelte file at all. Just leave it as is.

[pyoner]

@PaulMaly check my transpile.js file https://github.com/pyoner/svelte-ts-preprocess/blob/import-svelte/tests/transpile.js
It works!

But I added some code (https://github.com/pyoner/svelte-ts-preprocess/blob/import-svelte/tests/transpile.js#L5), because ts using tree shaking https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit

Here output:

{ outputText: 'import Form from \'./Form.svelte\';\nForm;\nimport y from \'./module.ts\';\nlet x = y;\nlet z = \'\';\n',
  diagnostics: [],
  sourceMapText: undefined }

I think something is wrong with compiler options in your code

[pyoner]

ts.transpileModule does not check type errors :(

[pyoner]

I think we can ignore this error Cannot find module './Form.svelte' if it happens
And use a transformers https://github.com/Microsoft/TypeScript/blob/97fbc87e9834b9bf12fe01bf442e16749da02d1d/lib/typescript.d.ts#L5601 to include svelte imports (import Form from "./Form.svelte";) to the result code

[filipsobol]

The problem here is that you import Form component, but don't use it in the script, so TS compiler simply removes it. There were few issues created in TypeScript repo to make it possible to force import of "unused" modules, but most of them were closed because this is intended behavior.

Quick and dirty fix:

<script lang="ts">
  import Form from "./Form.svelte";
  export let name;

  console.log(Form)
</script>

[PaulMaly]

@pyoner Can't check your example because of 404 page. Can you describe your fix here or ping me in messager to discuss it?

[pyoner]

@PaulMaly hi,
I did some research and released a new version https://github.com/pyoner/svelte-ts-preprocess
If you want, we can do a merge

[PaulMaly]

@pyoner Wow, you did a lot of work as I can see! Much more than I do initially. How about to add you to collaborators of this repo?

[pyoner]

@PaulMaly I agree :)

[pyoner]

PR #6