Add typescript support for the components

[nateshmbhat]

i get error messages when I use component in typescript saying , Property '$on' does not exist on type 'unknown'.ts(2339)

[nateshmbhat]

My tsconfig file :

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*", "app"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

roll up config file :

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import {
	terser
} from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.ts',
	output: {
		sourcemap: true,
		format: 'cjs',
		name: 'app',
		file: 'public/build/bundle.js',
		exports: 'auto'
	},
	external: [
		'fs',
		'path'
	],
	plugins: [


		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file - better for performance
			css: css => {
				css.write('bundle.css');
			},
			preprocess: sveltePreprocess(),
		}),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs

		resolve({
			browser: true,
			dedupe: ['svelte']
		}),

		commonjs(),
		typescript({
			moduleResolution: 'node',
			sourceMap: !production,
			inlineSources: !production
		}),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

[nateshmbhat]

Doing npm i @types/svelte-materialify didn't download any typings.

[TheComputerM]

Which component are you using, I have not finished adding all the typings, you can manually add them if you want.

[nateshmbhat]

I'm using Button component.

When I looked in the index.d.ts file it was importing from wrong paths ". /component/Button".

But the current master branch code imports from proper file.

Can you please publish the updated code to npm?

Also is it possible to give type completion for the svelte events like "on:click" and other such events?

[TheComputerM]

Will be able to add type completion for events and slots once this gets approved.

[TheComputerM]

Pushed new version v0.1.11 to npm, does that solve the issue?

[TheComputerM]

Closing due to no response.