Make it TypeScript compatible

[apirogov]

I am using typescript in my project and e.g. when I use "createAjvValidator" and pass it a schema, TypeScript complains because due to the comment in the code it thinks there is some JSON type and my data is not of that type.

It would be great if the exposed functions would be made properly TypeScript compatible, or at least fixed in a way that TypeScript is not confused and treats everything as any instead of non-existing types.

[josdejong]

Yes, I would like to convert the source code to TypeScript.

This requires some fiddling with the build setup to get this all working though. Help would be welcome.

[cloakedninjas]

So - now that v6 is released and in lieu of source being in TypeScript - will there be .d.ts file provided? DefinitelyTyped is missing this project

[josdejong]

Yes the plan is to make this a TypeScript project. The Svelte setup is TypeScript-ready but there where some issues getting the mocha tests working with TypeScript files.

Help would be welcome.

[josdejong]

I've fixed the setup so it all works with TypeScript. I've converted a couple of files already, though most files still have to be converted. We'll get there 😄

[cloakedninjas]

Thanks for the update, but ideally the types.d.ts file gets placed alongside the dist file

Doing

import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor';

Still results in TS7016: Could not find a declaration file for module 'svelte-jsoneditor/dist/jsoneditor'

And once that's created, a module or interface will be needed for the whole library too, e.g.

export declare interface SvelteComponentConstructor {
    target: HTMLElement;
    props?: JsonEditorOptions;
}

Cheers 👍

[cloakedninjas]

Also - The types.d.ts file that's included in the npm package is not the same as the src/lib/types.ts - The @ts-ignore annotation is missing and now after installing the latest (0.3.53) version, fails to compile:

TS2304: Cannot find name 'SvelteComponentConstructor'.

[josdejong]

Yes indeed, there is work to be done. A couple of things:

• Step one was to make the setup (build tools and testing) work with TS, that is now down,
• So now we can gradually convert all code to TS (working on that)
• The Svelte output has proper TS definitions and should work as is
• The vanilla JS bundle output dist/jsoneditor.js is missing TS definitions.
  • I want to split the npm package in two (one for Svelte, one for Vanilla JS), in order to prevent conflicts between the two and issues with build tools because of that
  • I need to get proper type definitions out of the rollup bundler that generates dist/jsoneditor.js. Fiddling around with that.

[josdejong]

Things should be improved a lot in v0.3.54. Not sure if it works for all setups but the TS definitions work in a standard SvelteKit application and a standard TypeScript create-react-app.

Can you give it a try @cloakedninjas?

[josdejong]

I see when using the bundle, the type definitions can be found, but in a typical setup you get a lot of warnings about missing source maps (pointing to TypeScript source files that are not part of the npm package). Looking into it.

[cloakedninjas]

I see when using the bundle, the type definitions can be found, but in a typical setup you get a lot of warnings about missing source maps (pointing to TypeScript source files that are not part of the npm package). Looking into it.

Just installed 0.3.58 and first thing that I noticed was:

export default class JsonEditor extends SvelteComponentTyped<JsonEditorProps, JsonEditorEvents, JsonEditorSlots> {

Which relies on

import { SvelteComponentTyped } from "svelte";

in node_modules/svelte-jsoneditor/components/JSONEditor.svelte.d.ts

But we don't use Svelte in our project

[josdejong]

Thanks for trying it out. That is a good point. Those interfaces are indeed defined in the Svelte package. So either you will have to import svelte just for the type definitions, or we somehow should copy those interfaces so you don't have to import svelte.

Help would be welcome.