Snap - looks like we're working on the same thing

[Brendan-csel]

I'm pretty close to finished a complete port of React-Bootstrap. Perhaps we should collaborate!

[kristianmandrup]

Sure :) You can take pieces from my repo that you find useful. I can delete my npm package to free up the name if you like.

I'd love to see a fully working solution sooner rather than later...

[kristianmandrup]

I looked at your github repos but couldn't find anything there. Let's collaborate for sure.

[Brendan-csel]

I have just been working locally ...up until today!

I've just pushed the repo to Github along with a Demo page here.

Thanks for your offer regarding the npm package. I'm not sure if deleting the package is the right thing to do. I think it could be transferred - but it will still be a week or so until I'm ready for that stage.

[Brendan-csel]

I think I'm finished! Sorting out the remaining issues with transitions and tooltips took ages.

Anyway - I'd love to be able to set up an npm package under solid-bootstrap if I could? (never done that before).

[Brendan-csel]

@kristianmandrup if you're happy with the port I've done it would be great if we could publish it on npm as solid-bootstrap.

I think you'd need to transfer permissions for that package to my account, brendan-csel, according to this npm help article

[kristianmandrup]

Hi @Brendan-csel, been busy all weekend. I had a quick look at your source and main github page. Very impressive. I will gladly hand over the npm name to you.

I see that you are also using the splitProps(mergeProps(defaultProps, p), [...]) pattern, which I learned from @ryan as part of my learning curve on this library. Perfect!

I will check out the npk link you sent to manage the transfer of npm permissions. Cheers!

[kristianmandrup]

I ended up simply deleting the package. Now it should be freely available for you to claim as your own.

[kristianmandrup]

🥳 🎈 🥇 Very excited about this! You should notify @ryan when it is published so he can put it on the official SolidJS page.

[Brendan-csel]

Thank you! I'll have a go at that this evening. I've just adding some sidebar navigation for the docs so getting this up on npm will a great way to "launch".

I've been keeping folks updated on Discord so I'm sure this will be up on the Solid website as soon as it is ready.

...now to figure out how to publish to npm ...might take a peek at your repo. 😄

[kristianmandrup]

You simply update package.json using the npm information on exports

Conditional exports provide a way to map to different paths depending on certain conditions. They are supported for both CommonJS and ES module imports.

For example, a package that wants to provide different ES module exports for require() and import can be written:

// package.json
{
  "main": "./main-require.cjs",
  "exports": {
    "import": "./main-module.js",
    "require": "./main-require.cjs"
  },
  "type": "module"
}

Node.js implements the following conditions:

• "import" - matches when the package is loaded via import or import(), or via any top-level import or resolve operation by the ECMAScript module loader. Applies regardless of the module format of the target file. Always mutually exclusive with "require".
• "require" - matches when the package is loaded via require(). The referenced file should be loadable with require() although the condition matches regardless of the module format of the target file. Expected formats include CommonJS, JSON, and native addons but not ES modules as require() doesn't support them. Always mutually exclusive with "import".
• "node" - matches for any Node.js environment. Can be a CommonJS or ES module file. This condition should always come after "import" or "require".
• "node-addons" - similar to "node" and matches for any Node.js environment. This condition can be used to provide an entry point which uses native C++ addons as opposed to an entry point which is more universal and doesn't rely on native addons. This condition can be disabled via the --no-addons flag.
• "default" - the generic fallback that always matches. Can be a CommonJS or ES module file. This condition should always come last.

Within the "exports" object, key order is significant. During condition matching, earlier entries have higher priority and take precedence over later entries. The general rule is that conditions should be from most specific to least specific in object order.

I watched a stream by @ryan where he mentioned how he was using this mechanism internally in his packages.

To export types for typescript, see https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html and https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c

To control which files are uploaded to npm, see the following

Instead, you should whitelist the files you want to publish. This can be done by adding the files property in package.json:

“files”: [“lib/**/*”]

That’s it! Easy 😃 Only the lib folder will be included in the published package! (README.md and package.json are added by default).

After your package.json has been configured using these guidelines, simply run npm publish to publish it to npm repository.

[Brendan-csel]

Wow - thanks for the great write up. I'm getting there but have realised I'm not going to get his all done tonight (getting late here) ...but hopefully in another 24hours it will all be up and running!

[kristianmandrup]

To generate the type definition file, see https://stackoverflow.com/a/58066522

When creating your own library, you can can create *.d.ts files by using the tsc (TypeScript Compiler) command like so: (assuming you're building your library to the dist/lib folder)

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d (--declaration): generates the *.d.ts files
• --declarationDir dist/lib: Output directory for generated declaration files.
• --declarationMap: Generates a sourcemap for each corresponding .d.ts file.
• --emitDeclarationOnly: Only emit .d.ts declaration files. (no compiled JS) (see the docs for all command line compiler options)

Or for instance in your package.json

"scripts": {
    "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}

and then run: yarn build:types

[Brendan-csel]

Thanks. I actually just copied the rollup setup from solid-app-router and it seemed to create all the bits I needed. Built js, types, etc.

I just want to put a bit more thought into structuring the exports before I publish for real.

[kristianmandrup]

Cool :) Any chance you could help me with this https://github.com/nxext/nx-extensions/pull/344#issuecomment-977576057 after you're done with solid-bootstrap? ;)

[Brendan-csel]

I go sooo close and then npm publish gave me...

HttpErrorGeneral: 403 Forbidden - PUT https://registry.npmjs.org/solid-bootstrap - solid-bootstrap cannot be republished until 24 hours have passed.

Hopefully it is true to this message and I might be able to publish tomorrow...

[kristianmandrup]

I see you have published https://www.npmjs.com/package/solid-bootstrap-core. What is this for? No Readme? I was wondering if you had based your work on Reactstrap 8 (Bootstrap 4) or Reactstrap 9 (Bootstrap 5). I can see the component examples use bootstrap 5, but it also looks like you are supporting some Reactstrap 8 or Bootstrap 4 components? Just curious... All my work is based off the Reactstrap bootstrap5 branch which was recently released into master as Reactstrap 9. Might still be some value there?

[Brendan-csel]

Core is a "unstyled/headless" dependency for Solid-Bootstrap. I need to connect the npm package up to a better page like this one.

I'm still publishing updates to these packages at a pretty rapid rate while I get the whole npm/exports/naming stuff sorted out. Hopefully I'll be able to push the first test version of the main package in a couple of hours - but expect some further quick-fire updates over the next 24 hours while I get the details sorted and tested. I'll announce on Discord once it is settled.

[Brendan-csel]

Cool :) Any chance you could help me with this nxext/nx-extensions#344 (comment) after you're done with solid-bootstrap? ;)

I took a look. Is all completely foreign to me sorry. But great to see more Solid things like this being worked on!

[Brendan-csel]

And we're live! Thanks for helping with the package!

[kristianmandrup]

Do you have any idea regarding the benefits of using esbuild vs vite for SolidJS?

https://how-to.dev/how-to-build-solidjs-application-with-esbuild

[Brendan-csel]

Yeah, we've been using esbuild for a mid-sized Solid project along with vanilla-extract for CSS. Never used Vite or css modules until this Bootstrap port - it's been fine too. So ...whatever works.

[Brendan-csel]

I believe Vite uses esbuild at dev time anyway - and rollup for production builds.