Add Typescript support, export only components

[czue]

Just some README updates on top of #20

[skoch]

I would keep a section in there about the deprecation of the init function.

Something along the lines of "As of version 0.9.0 the init function has been deprecated. ..." and point to the new version of how one would upgrade (if they wanted to) using the non jsx version.

[skoch]

We don't need to import the CSS, the component is handling that behind the scenes.

[czue]

I found (in my test vite app at least) that I still had to do this. If that's not expected, any idea under what circumstances that might be true?

[skoch]

If using in a React app this shouldn't be needed. Take a look at the index.tsx file in /dev -- no need to import the css since the component itself is importing.

If you are using this in the non JSX way, then yes, you will need to import the CSS.

[czue]

Weird, maybe an issue with my dev setup then? What I did:

1. Run npm run build
2. In a separate project, add this to package.json:

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "bluesky-comments": "file:../../bluesky-comments"
  },

3. Import and run like this:

// import 'bluesky-comments/bluesky-comments.css'
import './App.css'
import { BlueskyComments } from "bluesky-comments";


function App() {
return (
  <>
      <BlueskyComments
         uri="https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24"
          />

  </>
)
}

export default App

If I leave that css import commented out the styles don't work, but if I add it they do.

[czue]

@skoch thanks for the great feedback. I think I've addressed everything, so the only remaining issue is to get to the bottom of the CSS import situation. Then I think we can merge this in and ship a new version

[skoch]

Sounds good!
I'll take a peek later today and create a new project much like you did to confirm/deny.
Thanks for the discussion and looking forward to adding more.

[skoch]

I stand corrected.

In order to have the css bundled with the JS as an import, we should use vite-plugin-lib-inject-css
https://www.npmjs.com/package/vite-plugin-lib-inject-css

And with that the vite.config.js would need an update.

I'll update my PR (which will then be part of this?) I also see I neglected to add the types in package.json

edit: updated and created #22

[czue]

I maybe should have put this comment here: #22 (comment) Pasting it below:

After merging #22 I'm now having issues with the CDN install:

Loading module from “http://localhost:4000/assets/bluesky-comments/main.css” was blocked because of a disallowed MIME type (“text/html”).

Seems like it's trying to load the css file from a relative path, but that file isn't present in the outputted build. Any ideas?

FYI, I'll be offline for the next couple days but should be able to turn this around on Monday or Tuesday before the holiday break.

[skoch]

Ahh, I see that now as well when testing that method.

I guess it could be removed and then users would be required to add the CSS in their project. Not ideal in my opinion but if you need to support that usage then I'm not sure how to proceed.

I'm wondering if there's a way to support both.

I'll be offline as well for a few days!