TypeScript Support

[ja1den]

I saw in #3 that you aren't planning to add TypeScript support, but it would be awesome if you did. I'm probably going to write some types for my current project, so maybe I'll make a PR when I get time.

This framework is awesome, thanks!

[halfmoonui]

Sure sounds good. If TypeScript support is something that meaningfully improves the framework, a PR would be great.

[ja1den]

I've written the types, but I got stuck when I realized the repo has a number of differences with the package on npm:

• no index.js.
• no module.exports = halfmoon in halfmoon.js.
• no package.json.

Is there a reason the npm module and the GitHub repo are different?

[halfmoonui]

The halfmoon.js file in this repo is meant to be used with a <script> tag, and it auto-initializes the components that require JS. This does not work with JS frameworks that use the virtual DOM, so the file in the npm package has a slight change that addresses this. I couldn't figure out an elegant way of including the npm files in this repo with the last release, so I decided to leave it out for the time being.

Edit After giving it some more thought, I think it is a bit too early for integrating types into the core file. This is mainly because of the following reasons:

• The framework is still in its early stages, and there are more components and functions that I want to add that will use JavaScript.
• I would first like to solve the problem of bringing the npm package and this repo together. Target is the next realease.
• The core library can be used just fine without TypeScript integration.

I am sorry for any inconveniences.

[ja1den]

That makes sense. Thanks for considering!

[lgk-bsw]

I also would love to have TypeScript support. @Jadie-Wadie Maybe you could constribute to https://github.com/DefinitelyTyped/DefinitelyTyped, so the types could get published under @types/halfmoon. 😇

[halfmoonui]

@lgk-bsw From what I remember, Bootstrap also does something similar, with a separate repo where there are .ts versions of the .js files.

[ixahmedxi]

A "types" folder can be created and then referenced in the types property inside the package.json file. I think this is better than having a separate repo for the typescript definitions as that it will make users not need to install multiple packages. I can help out with creating the definitions.

[ja1den]

I've created DefinitelyTyped/DefinitelyTyped#46789.

[lgk-bsw]

A "types" folder can be created and then referenced in the types property inside the package.json file. I think this is better than having a separate repo for the typescript definitions as that it will make users not need to install multiple packages. I can help out with creating the definitions.

It's pretty common to have a seperate package for the types. And editors like Visual Studio Code will recommend to install @types/halfmoon, so I think it's a good solution. 😊

[ja1den]

My pull request got merged. Install @types/halfmoon for TypeScript support.

[halfmoonui]

@Jadie-Wadie That is awesome! Thank you for the quick work.

[MeowningMaster]

I'm new to typescript, how to import halfmoon css? (snowpack)

[MeowningMaster]

<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet" /> in index.html works, is it fine solution?

[ja1den]

If you're using snowpack, install it with npm and import it like any other module. I'd put it in your index.ts or index.tsx file.

E.g. import 'node_modules/halfmoon/css/halfmoon-variables.min.css';

You might have to fix the path depending on the location of your file.

[MeowningMaster]

thanks